@automattic/wpcom-checkout/dist/cjs/payment-request-button.js

Functions and components used by WordPress.com checkout.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = PaymentRequestButton;
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 react_i18n_1 = require("@wordpress/react-i18n");
const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
const google_pay_mark_1 = require("./google-pay-mark");
// Disabling this rule to make migrating this to calypso easier with fewer changes
/* eslint-disable @typescript-eslint/no-use-before-define */
// The react-stripe-elements PaymentRequestButtonElement cannot have its
// paymentRequest updated once it has been rendered, so this is a custom one.
// See: https://github.com/stripe/react-stripe-elements/issues/284
function PaymentRequestButton({ paymentRequest, paymentType, disabled, disabledReason, }) {
    const { __ } = (0, react_i18n_1.useI18n)();
    const { formStatus, setFormReady, setFormSubmitting } = (0, composite_checkout_1.useFormStatus)();
    const onClick = (event) => {
        event.persist();
        event.preventDefault();
        setFormSubmitting();
        if (paymentRequest) {
            paymentRequest.on('cancel', setFormReady);
            paymentRequest.show();
        }
    };
    if (!paymentRequest) {
        disabled = true;
    }
    if (formStatus === composite_checkout_1.FormStatus.SUBMITTING) {
        return ((0, jsx_runtime_1.jsx)(composite_checkout_1.Button, { isBusy: true, disabled: true, fullWidth: true, children: __('Completing your purchase') }));
    }
    if (disabled && disabledReason) {
        return ((0, jsx_runtime_1.jsx)(composite_checkout_1.Button, { disabled: true, fullWidth: true, children: disabledReason }));
    }
    if (paymentType === 'apple-pay') {
        return (0, jsx_runtime_1.jsx)(ApplePayButton, { disabled: disabled, onClick: onClick });
    }
    if (paymentType === 'google-pay') {
        // Google Pay branding does not have a disabled state so we will render a different button
        if (disabled) {
            return ((0, jsx_runtime_1.jsx)(composite_checkout_1.Button, { disabled: true, fullWidth: true, children: __('Select a payment card') }));
        }
        return (0, jsx_runtime_1.jsx)(GooglePayButton, { onClick: onClick });
    }
    return ((0, jsx_runtime_1.jsx)(composite_checkout_1.Button, { disabled: disabled, onClick: onClick, fullWidth: true, children: __('Select a payment card') }));
}
PaymentRequestButton.propTypes = {
    paymentRequest: prop_types_1.default.object,
    paymentType: prop_types_1.default.string.isRequired,
    disabled: prop_types_1.default.bool,
    disabledReason: prop_types_1.default.string,
};
const ApplePayButton = styled_1.default.button `
	-webkit-appearance: -apple-pay-button;
	-apple-pay-button-style: black;
	-apple-pay-button-type: plain;
	height: 38px;
	width: 100%;
	position: relative;

	&::after {
		content: '';
		position: ${(props) => (props.disabled ? 'absolute' : 'relative')};
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #ccc;
		opacity: 0.7;

		.rtl & {
			right: 0;
			left: auto;
		}
	}

	@media ( ${(props) => props.theme.breakpoints.tabletUp} ) {
		width: 100%;
	}
`;
const GooglePayButtonWrapper = styled_1.default.button `
	background-color: #000;
	border-radius: 4px;
	width: 100%;
	padding: 12px 24px 10px;
	position: relative;
	text-align: center;
	cursor: pointer;

	svg {
		height: 18px;
	}

	@media ( ${(props) => props.theme.breakpoints.tabletUp} ) {
		width: 100%;
	}
`;
function GooglePayButton({ disabled, onClick, }) {
    return ((0, jsx_runtime_1.jsx)(GooglePayButtonWrapper, { disabled: disabled, onClick: onClick, children: (0, jsx_runtime_1.jsx)(google_pay_mark_1.GooglePayMark, { fill: "white" }) }));
}
//# sourceMappingURL=payment-request-button.js.map