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

Functions and components used by WordPress.com checkout.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createEpsPaymentMethodStore = createEpsPaymentMethodStore;
exports.createEpsMethod = createEpsMethod;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const composite_checkout_1 = require("@automattic/composite-checkout");
const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
const data_1 = require("@wordpress/data");
const react_i18n_1 = require("@wordpress/react-i18n");
const debug_1 = tslib_1.__importDefault(require("debug"));
const react_1 = require("react");
const field_1 = tslib_1.__importDefault(require("../field"));
const payment_method_logos_1 = require("../payment-method-logos");
const summary_details_1 = require("../summary-details");
const debug = (0, debug_1.default)('wpcom-checkout:eps-payment-method');
const actions = {
    changeCustomerName(payload) {
        return { type: 'CUSTOMER_NAME_SET', payload };
    },
};
const selectors = {
    getCustomerName(state) {
        return state.customerName || '';
    },
};
function createEpsPaymentMethodStore() {
    debug('creating a new eps payment method store');
    const store = (0, data_1.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;
}
function createEpsMethod({ store, submitButtonContent, }) {
    return {
        id: 'eps',
        hasRequiredFields: true,
        paymentProcessorId: 'eps',
        label: (0, jsx_runtime_1.jsx)(EpsLabel, {}),
        activeContent: (0, jsx_runtime_1.jsx)(EpsFields, {}),
        submitButton: (0, jsx_runtime_1.jsx)(EpsPayButton, { store: store, submitButtonContent: submitButtonContent }),
        inactiveContent: (0, jsx_runtime_1.jsx)(EpsSummary, {}),
        getAriaLabel: (__) => __('EPS e-Pay'),
    };
}
function useCustomerName() {
    const { customerName } = (0, data_1.useSelect)((select) => {
        const store = select('eps');
        return {
            customerName: store.getCustomerName(),
        };
    }, []);
    return customerName;
}
function EpsFields() {
    const { __ } = (0, react_i18n_1.useI18n)();
    const customerName = useCustomerName();
    const { changeCustomerName } = (0, data_1.useDispatch)('eps');
    const { formStatus } = (0, composite_checkout_1.useFormStatus)();
    const isDisabled = formStatus !== composite_checkout_1.FormStatus.READY;
    return ((0, jsx_runtime_1.jsx)(EpsFormWrapper, { children: (0, jsx_runtime_1.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_1.default.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 = (0, styled_1.default)(field_1.default) `
	margin-top: 16px;

	:first-of-type {
		margin-top: 0;
	}
`;
function EpsPayButton({ disabled, onClick, store, submitButtonContent, }) {
    const { formStatus } = (0, composite_checkout_1.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 ((0, jsx_runtime_1.jsx)(composite_checkout_1.Button, { disabled: disabled, onClick: () => {
            if (isFormValid(store)) {
                debug('submitting eps payment');
                onClick({
                    name: customerName?.value,
                });
            }
        }, buttonType: "primary", isBusy: composite_checkout_1.FormStatus.SUBMITTING === formStatus, fullWidth: true, children: submitButtonContent }));
}
function EpsSummary() {
    const customerName = useCustomerName();
    return ((0, jsx_runtime_1.jsx)(summary_details_1.SummaryDetails, { children: (0, jsx_runtime_1.jsx)(summary_details_1.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 { __ } = (0, react_i18n_1.useI18n)();
    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: __('EPS e-Pay') }), (0, jsx_runtime_1.jsx)(payment_method_logos_1.PaymentMethodLogos, { className: "eps__logo payment-logos", children: (0, jsx_runtime_1.jsx)(EpsLogo, {}) })] }));
}
const EpsLogo = (0, styled_1.default)(EpsLogoImg) `
	width: 28px;
`;
function EpsLogoImg({ className }) {
    return (0, jsx_runtime_1.jsx)("img", { src: "/calypso/images/upgrades/eps.svg", alt: "EPS e-Pay", className: className });
}
//# sourceMappingURL=eps.js.map