44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import {
|
|
useExpressPaymentMethods,
|
|
usePaymentMethodInterface,
|
|
} from '@woocommerce/base-hooks';
|
|
import { cloneElement, isValidElement } from '@wordpress/element';
|
|
import { useCheckoutContext } from '@woocommerce/base-context';
|
|
|
|
const ExpressPaymentMethods = () => {
|
|
const { isEditor } = useCheckoutContext();
|
|
const paymentMethodInterface = usePaymentMethodInterface();
|
|
// not implementing isInitialized here because it's utilized further
|
|
// up in the tree for express payment methods. We won't even get here if
|
|
// there's no payment methods after initialization.
|
|
const { paymentMethods } = useExpressPaymentMethods();
|
|
const paymentMethodIds = Object.keys( paymentMethods );
|
|
const content =
|
|
paymentMethodIds.length > 0 ? (
|
|
paymentMethodIds.map( ( id ) => {
|
|
const expressPaymentMethod = isEditor
|
|
? paymentMethods[ id ].edit
|
|
: paymentMethods[ id ].activeContent;
|
|
return isValidElement( expressPaymentMethod ) ? (
|
|
<li key={ id } id={ `express-payment-method-${ id }` }>
|
|
{ cloneElement( expressPaymentMethod, {
|
|
...paymentMethodInterface,
|
|
} ) }
|
|
</li>
|
|
) : null;
|
|
} )
|
|
) : (
|
|
<li key="noneRegistered">No registered Payment Methods</li>
|
|
);
|
|
return (
|
|
<ul className="wc-block-component-express-checkout-payment-event-buttons">
|
|
{ content }
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
export default ExpressPaymentMethods;
|