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

Functions and components used by WordPress.com checkout.

import { jsx as _jsx } from "react/jsx-runtime";
import { Button, useFormStatus, FormStatus } from '@automattic/composite-checkout';
import styled from '@emotion/styled';
import { useI18n } from '@wordpress/react-i18n';
import PropTypes from 'prop-types';
import { GooglePayMark } from './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
export default function PaymentRequestButton({ paymentRequest, paymentType, disabled, disabledReason, }) {
    const { __ } = useI18n();
    const { formStatus, setFormReady, setFormSubmitting } = useFormStatus();
    const onClick = (event) => {
        event.persist();
        event.preventDefault();
        setFormSubmitting();
        if (paymentRequest) {
            paymentRequest.on('cancel', setFormReady);
            paymentRequest.show();
        }
    };
    if (!paymentRequest) {
        disabled = true;
    }
    if (formStatus === FormStatus.SUBMITTING) {
        return (_jsx(Button, { isBusy: true, disabled: true, fullWidth: true, children: __('Completing your purchase') }));
    }
    if (disabled && disabledReason) {
        return (_jsx(Button, { disabled: true, fullWidth: true, children: disabledReason }));
    }
    if (paymentType === 'apple-pay') {
        return _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 (_jsx(Button, { disabled: true, fullWidth: true, children: __('Select a payment card') }));
        }
        return _jsx(GooglePayButton, { onClick: onClick });
    }
    return (_jsx(Button, { disabled: disabled, onClick: onClick, fullWidth: true, children: __('Select a payment card') }));
}
PaymentRequestButton.propTypes = {
    paymentRequest: PropTypes.object,
    paymentType: PropTypes.string.isRequired,
    disabled: PropTypes.bool,
    disabledReason: PropTypes.string,
};
const ApplePayButton = styled.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.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 (_jsx(GooglePayButtonWrapper, { disabled: disabled, onClick: onClick, children: _jsx(GooglePayMark, { fill: "white" }) }));
}
//# sourceMappingURL=payment-request-button.js.map