@automattic/wpcom-checkout/dist/esm/payment-methods/eps.js

Functions and components used by WordPress.com checkout.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, FormStatus, useFormStatus } from '@automattic/composite-checkout';
import styled from '@emotion/styled';
import { useSelect, useDispatch, registerStore } from '@wordpress/data';
import { useI18n } from '@wordpress/react-i18n';
import debugFactory from 'debug';
import { Fragment } from 'react';
import Field from '../field';
import { PaymentMethodLogos } from '../payment-method-logos';
import { SummaryLine, SummaryDetails } from '../summary-details';
const debug = debugFactory('wpcom-checkout:eps-payment-method');
const actions = {
    changeCustomerName(payload) {
        return { type: 'CUSTOMER_NAME_SET', payload };
    },
};
const selectors = {
    getCustomerName(state) {
        return state.customerName || '';
    },
};
export function createEpsPaymentMethodStore() {
    debug('creating a new eps payment method store');
    const store = registerStore('eps', {
        reducer(state = {
            customerName: { value: '', isTouched: false },
        }, action) {
            switch (action.type) {
                case 'CUSTOMER_NAME_SET':
                    return { ...state, customerName: { value: action.payload, isTouched: true } };
            }
            return state;
        },
        actions,
        selectors,
    });
    return store;
}
export function createEpsMethod({ store, submitButtonContent, }) {
    return {
        id: 'eps',
        hasRequiredFields: true,
        paymentProcessorId: 'eps',
        label: _jsx(EpsLabel, {}),
        activeContent: _jsx(EpsFields, {}),
        submitButton: _jsx(EpsPayButton, { store: store, submitButtonContent: submitButtonContent }),
        inactiveContent: _jsx(EpsSummary, {}),
        getAriaLabel: (__) => __('EPS e-Pay'),
    };
}
function useCustomerName() {
    const { customerName } = useSelect((select) => {
        const store = select('eps');
        return {
            customerName: store.getCustomerName(),
        };
    }, []);
    return customerName;
}
function EpsFields() {
    const { __ } = useI18n();
    const customerName = useCustomerName();
    const { changeCustomerName } = useDispatch('eps');
    const { formStatus } = useFormStatus();
    const isDisabled = formStatus !== FormStatus.READY;
    return (_jsx(EpsFormWrapper, { children: _jsx(EpsField, { id: "cardholderName", type: "Text", autoComplete: "cc-name", label: __('Your name'), value: customerName?.value ?? '', onChange: changeCustomerName, isError: customerName?.isTouched && customerName?.value.length === 0, errorMessage: __('This field is required'), disabled: isDisabled }) }));
}
const EpsFormWrapper = styled.div `
	padding: 16px;
	position: relative;

	:after {
		display: block;
		width: calc( 100% - 6px );
		height: 1px;
		content: '';
		background: ${(props) => props.theme.colors.borderColorLight};
		position: absolute;
		top: 0;
		left: 3px;

		.rtl & {
			left: auto;
			right: 3px;
		}
	}
`;
const EpsField = styled(Field) `
	margin-top: 16px;

	:first-of-type {
		margin-top: 0;
	}
`;
function EpsPayButton({ disabled, onClick, store, submitButtonContent, }) {
    const { formStatus } = useFormStatus();
    const customerName = useCustomerName();
    // This must be typed as optional because it's injected by cloning the
    // element in CheckoutSubmitButton, but the uncloned element does not have
    // this prop yet.
    if (!onClick) {
        throw new Error('Missing onClick prop; EpsPayButton must be used as a payment button in CheckoutSubmitButton');
    }
    return (_jsx(Button, { disabled: disabled, onClick: () => {
            if (isFormValid(store)) {
                debug('submitting eps payment');
                onClick({
                    name: customerName?.value,
                });
            }
        }, buttonType: "primary", isBusy: FormStatus.SUBMITTING === formStatus, fullWidth: true, children: submitButtonContent }));
}
function EpsSummary() {
    const customerName = useCustomerName();
    return (_jsx(SummaryDetails, { children: _jsx(SummaryLine, { children: customerName?.value }) }));
}
function isFormValid(store) {
    const customerName = selectors.getCustomerName(store.getState());
    if (!customerName?.value.length) {
        // Touch the field so it displays a validation error
        store.dispatch(actions.changeCustomerName(''));
        return false;
    }
    return true;
}
function EpsLabel() {
    const { __ } = useI18n();
    return (_jsxs(Fragment, { children: [_jsx("span", { children: __('EPS e-Pay') }), _jsx(PaymentMethodLogos, { className: "eps__logo payment-logos", children: _jsx(EpsLogo, {}) })] }));
}
const EpsLogo = styled(EpsLogoImg) `
	width: 28px;
`;
function EpsLogoImg({ className }) {
    return _jsx("img", { src: "/calypso/images/upgrades/eps.svg", alt: "EPS e-Pay", className: className });
}
//# sourceMappingURL=eps.js.map