Migrate Google Pay to the new script loader

This commit is contained in:
Daniel Dudzic 2024-10-07 15:30:27 +02:00
parent 07bedc4460
commit 869a47f3cd
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
5 changed files with 59 additions and 36 deletions

View file

@ -4,7 +4,7 @@ import {
registerPaymentMethod,
} from '@woocommerce/blocks-registry';
import { __ } from '@wordpress/i18n';
import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader';
import GooglepayManager from './GooglepayManager';
import { loadCustomScript } from '@paypal/paypal-js';
import GooglepayManagerBlockEditor from './GooglepayManagerBlockEditor';
@ -14,7 +14,7 @@ const ppcpConfig = ppcpData.scriptData;
const buttonData = wc.wcSettings.getSetting( 'ppcp-googlepay_data' );
const buttonConfig = buttonData.scriptData;
const dataNamespace = 'ppcpBlocksEditorPaypalGooglepay';
const namespace = 'ppcpBlocksPaypalGooglepay';
if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
window.PayPalCommerceGateway = ppcpConfig;
@ -24,14 +24,7 @@ const GooglePayComponent = ( props ) => {
const [ bootstrapped, setBootstrapped ] = useState( false );
const [ paypalLoaded, setPaypalLoaded ] = useState( false );
const [ googlePayLoaded, setGooglePayLoaded ] = useState( false );
const bootstrap = function () {
const ManagerClass = props.isEditing
? GooglepayManagerBlockEditor
: GooglepayManager;
const manager = new ManagerClass( buttonConfig, ppcpConfig );
manager.init();
};
const [ manager, setManager ] = useState( null );
useEffect( () => {
// Load GooglePay SDK
@ -41,22 +34,36 @@ const GooglePayComponent = ( props ) => {
ppcpConfig.url_params.components += ',googlepay';
if ( props.isEditing ) {
ppcpConfig.data_namespace = dataNamespace;
}
// Load PayPal
loadPaypalScript( ppcpConfig, () => {
setPaypalLoaded( true );
} );
UnifiedScriptLoader.loadPayPalScript( namespace, ppcpConfig )
.then( () => {
setPaypalLoaded( true );
} )
.catch( ( error ) => {
console.error( 'Failed to load PayPal script: ', error );
} );
}, [] );
useEffect( () => {
if ( ! bootstrapped && paypalLoaded && googlePayLoaded ) {
setBootstrapped( true );
bootstrap();
if ( paypalLoaded && googlePayLoaded && ! manager ) {
const ManagerClass = props.isEditing
? GooglepayManagerBlockEditor
: GooglepayManager;
const newManager = new ManagerClass(
namespace,
buttonConfig,
ppcpConfig
);
setManager( newManager );
}
}, [ paypalLoaded, googlePayLoaded ] );
}, [ paypalLoaded, googlePayLoaded, props.isEditing ] );
useEffect( () => {
if ( manager && ! bootstrapped ) {
setBootstrapped( true );
manager.init();
}
}, [ manager, bootstrapped ] );
return (
<div