@automattic/wpcom-checkout
Version:
Functions and components used by WordPress.com checkout.
136 lines (133 loc) • 4.98 kB
JavaScript
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:sofort-payment-method');
const actions = {
changeCustomerName(payload) {
return { type: 'CUSTOMER_NAME_SET', payload };
},
};
const selectors = {
getCustomerName(state) {
return state.customerName || '';
},
};
function useCustomerName() {
const { customerName } = useSelect((select) => {
const store = select('sofort');
return {
customerName: store.getCustomerName(),
};
}, []);
return customerName;
}
export function createSofortPaymentMethodStore() {
debug('creating a new sofort payment method store');
const store = registerStore('sofort', {
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 createSofortMethod({ store, submitButtonContent, }) {
return {
id: 'sofort',
hasRequiredFields: true,
paymentProcessorId: 'sofort',
label: _jsx(SofortLabel, {}),
activeContent: _jsx(SofortFields, {}),
submitButton: _jsx(SofortPayButton, { store: store, submitButtonContent: submitButtonContent }),
inactiveContent: _jsx(SofortSummary, {}),
getAriaLabel: () => 'Sofort',
};
}
function SofortFields() {
const { __ } = useI18n();
const customerName = useCustomerName();
const { changeCustomerName } = useDispatch('sofort');
const { formStatus } = useFormStatus();
const isDisabled = formStatus !== FormStatus.READY;
return (_jsx(SofortFormWrapper, { children: _jsx(SofortField, { id: "sofort-cardholder-name", 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 SofortFormWrapper = 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 SofortField = styled(Field) `
margin-top: 16px;
:first-of-type {
margin-top: 0;
}
`;
function SofortPayButton({ 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; SofortPayButton must be used as a payment button in CheckoutSubmitButton');
}
return (_jsx(Button, { disabled: disabled, onClick: () => {
if (isFormValid(store)) {
debug('submitting sofort payment');
onClick({
name: customerName?.value,
});
}
}, buttonType: "primary", isBusy: FormStatus.SUBMITTING === formStatus, fullWidth: true, children: submitButtonContent }));
}
function SofortSummary() {
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 SofortLabel() {
const { __ } = useI18n();
return (_jsxs(Fragment, { children: [_jsx("span", { children: __('Sofort') }), _jsx(PaymentMethodLogos, { className: "sofort__logo payment-logos", children: _jsx(SofortLogo, {}) })] }));
}
const SofortLogo = styled(SofortLogoImg) `
width: 64px;
`;
function SofortLogoImg({ className }) {
return _jsx("img", { src: "/calypso/images/upgrades/sofort.svg", alt: "Sofort", className: className });
}
//# sourceMappingURL=sofort.js.map