@automattic/wpcom-checkout
Version:
Functions and components used by WordPress.com checkout.
144 lines (143 loc) • 6.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.createIdealPaymentMethodStore = createIdealPaymentMethodStore;
exports.createIdealMethod = createIdealMethod;
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:ideal-payment-method');
const actions = {
changeCustomerName(payload) {
return { type: 'CUSTOMER_NAME_SET', payload };
},
};
const selectors = {
getCustomerName(state) {
return state.customerName || '';
},
};
function createIdealPaymentMethodStore() {
debug('creating a new ideal payment method store');
const store = (0, data_1.registerStore)('ideal', {
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 createIdealMethod({ store, submitButtonContent, }) {
return {
id: 'ideal',
hasRequiredFields: true,
paymentProcessorId: 'ideal',
label: (0, jsx_runtime_1.jsx)(IdealLabel, {}),
activeContent: (0, jsx_runtime_1.jsx)(IdealFields, {}),
submitButton: (0, jsx_runtime_1.jsx)(IdealPayButton, { store: store, submitButtonContent: submitButtonContent }),
inactiveContent: (0, jsx_runtime_1.jsx)(IdealSummary, {}),
getAriaLabel: (__) => __('iDEAL'),
};
}
function useCustomerData() {
const { customerName } = (0, data_1.useSelect)((select) => {
const store = select('ideal');
return {
customerName: store.getCustomerName(),
};
}, []);
return {
customerName,
};
}
function IdealFields() {
const { __ } = (0, react_i18n_1.useI18n)();
const { customerName } = useCustomerData();
const { changeCustomerName } = (0, data_1.useDispatch)('ideal');
const { formStatus } = (0, composite_checkout_1.useFormStatus)();
const isDisabled = formStatus !== composite_checkout_1.FormStatus.READY;
return ((0, jsx_runtime_1.jsx)(IdealFormWrapper, { children: (0, jsx_runtime_1.jsx)(IdealField, { id: "ideal-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 IdealFormWrapper = 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 & {
right: 3px;
left: auto;
}
}
`;
const IdealField = (0, styled_1.default)(field_1.default) `
margin-top: 16px;
:first-of-type {
margin-top: 0;
}
`;
function IdealPayButton({ disabled, onClick, store, submitButtonContent, }) {
const { formStatus } = (0, composite_checkout_1.useFormStatus)();
const { customerName } = useCustomerData();
// 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; IdealPayButton 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 ideal payment');
onClick({
name: customerName?.value,
});
}
}, buttonType: "primary", isBusy: composite_checkout_1.FormStatus.SUBMITTING === formStatus, fullWidth: true, children: submitButtonContent }));
}
function IdealSummary() {
const { customerName } = useCustomerData();
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(''));
}
if (!customerName?.value.length) {
return false;
}
return true;
}
function IdealLabel() {
const { __ } = (0, react_i18n_1.useI18n)();
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: __('iDEAL') }), (0, jsx_runtime_1.jsx)(payment_method_logos_1.PaymentMethodLogos, { className: "ideal__logo payment-logos", children: (0, jsx_runtime_1.jsx)(IdealLogo, {}) })] }));
}
const IdealLogo = (0, styled_1.default)(IdealLogoSvg) `
height: 20px;
transform: translateY( -3px );
`;
function IdealLogoSvg({ className }) {
return ((0, jsx_runtime_1.jsxs)("svg", { className: className, enableBackground: "new 0 0 52.4 45.4", viewBox: "0 0 52.4 45.4", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "m5.8 39.2h8.6v-13.6h-8.6zm39.1-34.8c-6.4-4.7-15.1-4.4-15.1-4.4h-29.8v45.4h29.8s9.2.6 16.1-5.1c5.6-4.7 6.5-13.2 6.5-18.1 0-4.8-1.7-13.4-7.5-17.8zm0 32.5c-5.6 5.9-14.4 5.5-14.4 5.5h-27.4v-39.3h27.4s7.5-.3 13 4.4c5.3 4.5 5.8 10.6 5.8 15 .1 4-.5 10.3-4.4 14.4zm-34.8-22.9c-2.6 0-4.6 2.1-4.6 4.6s2.1 4.6 4.6 4.6c2.6 0 4.6-2.1 4.6-4.6s-2-4.6-4.6-4.6z" }), (0, jsx_runtime_1.jsx)("path", { clipRule: "evenodd", d: "m34.4 19.5h1.5l-.8-2zm5.9-4.8h2.1v6.5h3.8c-.2-3.4-1.5-8.4-4.8-10.9-4.3-3.4-11-3.8-11-3.8h-12.7v8.2h2.4s2.7.2 2.7 4.1c0 4-2.7 4.1-2.7 4.1h-2.4v16h12.7s7.5 0 12-4.1c2.9-2.7 3.6-8.3 3.8-11.9h-5.8v-8.2zm-9.9 1.7h-4.5v1.4h4.1v1.7h-4.1v1.7h4.5v1.7h-6.2v-8.2h6.2zm6.8 6.5-.6-1.7h-2.8l-.6 1.7h-2.2l3.1-8.2h2.1l3.4 8.2zm-16.4-4.1c0-2.2-1.4-2.4-1.4-2.4h-1.7v4.8h1.7s1.4 0 1.4-2.4z", fill: "#cc2e74", fillRule: "evenodd" })] }));
}
//# sourceMappingURL=ideal.js.map