import { useState, createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { registerPaymentMethod } from '@woocommerce/blocks-registry';
// Hooks
import useFastlaneSdk from './hooks/useFastlaneSdk';
import useTokenizeCustomerData from './hooks/useTokenizeCustomerData';
import useAxoSetup from './hooks/useAxoSetup';
import useAxoCleanup from './hooks/useAxoCleanup';
import useHandlePaymentSetup from './hooks/useHandlePaymentSetup';
import usePaymentSetupEffect from './hooks/usePaymentSetupEffect';
import usePayPalCommerceGateway from './hooks/usePayPalCommerceGateway';
// Components
import { Payment } from './components/Payment/Payment';
const gatewayHandle = 'ppcp-axo-gateway';
const namespace = 'ppcpBlocksPaypalAxo';
const initialConfig = wc.wcSettings.getSetting( `${ gatewayHandle }_data` );
const Axo = ( props ) => {
const { eventRegistration, emitResponse } = props;
const { onPaymentSetup } = eventRegistration;
const [ paymentComponent, setPaymentComponent ] = useState( null );
const { isConfigLoaded, ppcpConfig } =
usePayPalCommerceGateway( initialConfig );
const axoConfig = window.wc_ppcp_axo;
const fastlaneSdk = useFastlaneSdk( namespace, axoConfig, ppcpConfig );
const tokenizedCustomerData = useTokenizeCustomerData();
const handlePaymentSetup = useHandlePaymentSetup(
emitResponse,
paymentComponent,
tokenizedCustomerData
);
const isScriptLoaded = useAxoSetup(
namespace,
ppcpConfig,
isConfigLoaded,
fastlaneSdk,
paymentComponent
);
const { handlePaymentLoad } = usePaymentSetupEffect(
onPaymentSetup,
handlePaymentSetup,
setPaymentComponent
);
useAxoCleanup();
if ( ! isConfigLoaded ) {
return (
<>
{ __(
'Loading configuration…',
'woocommerce-paypal-payments'
) }
</>
);
}
if ( ! isScriptLoaded ) {
return (
<>
{ __(
'Loading PayPal script…',
'woocommerce-paypal-payments'
) }
</>
);
}
if ( ! fastlaneSdk ) {
return (
<>{ __( 'Loading Fastlane…', 'woocommerce-paypal-payments' ) }</>
);
}
return (
<Payment
fastlaneSdk={ fastlaneSdk }
onPaymentLoad={ handlePaymentLoad }
/>
);
};
registerPaymentMethod( {
name: initialConfig.id,
label: (
<div
id="ppcp-axo-block-radio-label"
dangerouslySetInnerHTML={ { __html: initialConfig.title } }
/>
),
content: <Axo />,
edit: createElement( initialConfig.title ),
ariaLabel: initialConfig.title,
canMakePayment: () => true,
supports: {
showSavedCards: true,
features: initialConfig.supports,
},
} );
export default Axo;