woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-07 19:54:15 +08:00
Code Issues Projects Packages Wiki Activity Actions

Introduce a unified script loader to improve script loading, debugging and prevent conflicts

Browse source
This commit is contained in:
Daniel Dudzic 2024-10-05 02:26:09 +02:00
parent 1325779582
commit 5e1c2a22d2
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
10 changed files with 186 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

68
modules/ppcp-axo-block/resources/js/index.js
View file

@ -9,25 +9,25 @@ 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 ppcpConfig = wc.wcSettings.getSetting( `${ gatewayHandle }_data` );
if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
window.PayPalCommerceGateway = ppcpConfig;
}
const axoConfig = window.wc_ppcp_axo;
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 fastlaneSdk = useFastlaneSdk( axoConfig, ppcpConfig );
const { isConfigLoaded, ppcpConfig } =
usePayPalCommerceGateway( initialConfig );
const axoConfig = window.wc_ppcp_axo;
const fastlaneSdk = useFastlaneSdk( namespace, axoConfig, ppcpConfig );
const tokenizedCustomerData = useTokenizeCustomerData();
const handlePaymentSetup = useHandlePaymentSetup(
emitResponse,
@ -35,7 +35,13 @@ const Axo = ( props ) => {
tokenizedCustomerData
);
useAxoSetup( ppcpConfig, fastlaneSdk, paymentComponent );
const isScriptLoaded = useAxoSetup(
namespace,
ppcpConfig,
isConfigLoaded,
fastlaneSdk,
paymentComponent
);
const { handlePaymentLoad } = usePaymentSetupEffect(
onPaymentSetup,
@ -45,31 +51,57 @@ const Axo = ( props ) => {
useAxoCleanup();
return fastlaneSdk ? (
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 }
/>
) : (
<>{ __( 'Loading Fastlane…', 'woocommerce-paypal-payments' ) }</>
);
};
registerPaymentMethod( {
name: ppcpConfig.id,
name: initialConfig.id,
label: (
<div
id="ppcp-axo-block-radio-label"
dangerouslySetInnerHTML={ { __html: ppcpConfig.title } }
dangerouslySetInnerHTML={ { __html: initialConfig.title } }
/>
),
content: <Axo />,
edit: createElement( ppcpConfig.title ),
ariaLabel: ppcpConfig.title,
edit: createElement( initialConfig.title ),
ariaLabel: initialConfig.title,
canMakePayment: () => true,
supports: {
showSavedCards: true,
features: ppcpConfig.supports,
features: initialConfig.supports,
},
} );