/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import {
useEmitResponse,
useExpressPaymentMethods,
} from '@woocommerce/base-context/hooks';
import {
StoreNoticesContainer,
usePaymentMethodDataContext,
useEditorContext,
} from '@woocommerce/base-context';
import Title from '@woocommerce/base-components/title';
import LoadingMask from '@woocommerce/base-components/loading-mask';
import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
import { useSelect } from '@wordpress/data';
import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
/**
* Internal dependencies
*/
import ExpressPaymentMethods from '../express-payment-methods';
import './style.scss';
const CheckoutExpressPayment = () => {
const {
isCalculating,
isProcessing,
isAfterProcessing,
isBeforeProcessing,
isComplete,
hasError,
} = useSelect( ( select ) => {
const store = select( CHECKOUT_STORE_KEY );
return {
isCalculating: store.isCalculating(),
isProcessing: store.isProcessing(),
isAfterProcessing: store.isAfterProcessing(),
isBeforeProcessing: store.isBeforeProcessing(),
isComplete: store.isComplete(),
hasError: store.hasError(),
};
} );
const { currentStatus: paymentStatus } = usePaymentMethodDataContext();
const { paymentMethods, isInitialized } = useExpressPaymentMethods();
const { isEditor } = useEditorContext();
const { noticeContexts } = useEmitResponse();
if (
! isInitialized ||
( isInitialized && Object.keys( paymentMethods ).length === 0 )
) {
// Make sure errors are shown in the editor and for admins. For example,
// when a payment method fails to register.
if ( isEditor || CURRENT_USER_IS_ADMIN ) {
return (
{ __(
'In a hurry? Use one of our express checkout options:',
'woo-gutenberg-products-block'
) }