Pay Later messaging block: Update the PayPal script from paypal/paypal-js to paypal/react-paypal-js

modules/ppcp-paylater-block/block.json

@@ -26,6 +26,10 @@
             "type": "string",
             "default": "black"
         },
+        "size": {
+            "type": "string",
+            "default": "14"
+        },
         "flexColor": {
             "type": "string",
             "default": "white"

modules/ppcp-paylater-block/package.json

@@ -10,6 +10,7 @@
         "Edge >= 14"
     ],
     "dependencies": {
+        "@paypal/react-paypal-js": "^8.2.0",
         "core-js": "^3.25.0"
     },
     "devDependencies": {

modules/ppcp-paylater-block/resources/js/edit.js

@@ -2,17 +2,14 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, SelectControl, Spinner } from '@wordpress/components';
+import { PayPalScriptProvider, PayPalMessages } from "@paypal/react-paypal-js";
 import { useScriptParams } from "./hooks/script-params";
-import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
-import PayPalMessages from "./components/PayPalMessages";
 
 export default function Edit( { attributes, clientId, setAttributes } ) {
     const { layout, logo, position, color, size, flexColor, flexRatio, placement, id } = attributes;
     const isFlex = layout === 'flex';
 
-    const [paypalScriptState, setPaypalScriptState] = useState(null);
-
-    const [rendered, setRendered] = useState(false);
+    const [loaded, setLoaded] = useState(false);
 
     let amount = undefined;
     const postContent = String(wp.data.select('core/editor')?.getEditedPostContent());
@@ -40,8 +37,6 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
     }
     const props = useBlockProps({className: classes});
 
-    const loadingElement = <div {...props}><Spinner/></div>;
-
     useEffect(() => {
         if (!id) {
             setAttributes({id: 'ppcp-' + clientId});
@@ -90,34 +85,25 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
         </div>
     }
 
-    let scriptParams = useScriptParams(PcpPayLaterBlock.ajax.cart_script_params);
+    const scriptParams = useScriptParams(PcpPayLaterBlock.ajax.cart_script_params);
     if (scriptParams === null) {
-        return loadingElement;
+        return (<div {...props}><Spinner/></div>)
     }
-    if (scriptParams === false) {
-        scriptParams = {
-            url_params: {
-                clientId: 'test',
-            }
+
+    const urlParams = scriptParams === false ? {
+        clientId: 'test',
+        components: 'messages',
+    } : {
+        ...scriptParams.url_params,
+        ...{
+            components: 'messages',
         }
     }
-    scriptParams.url_params.components = 'messages,buttons,funding-eligibility';
 
-    if (!paypalScriptState) {
-        loadPaypalScript(scriptParams, () => {
-            setPaypalScriptState('loaded')
-        }, () => {
-            setPaypalScriptState('failed')
-        });
-    }
-    if (paypalScriptState !== 'loaded') {
-        return loadingElement;
-    }
-
-	return (
-		<>
-			<InspectorControls>
-				<PanelBody title={ __( 'Settings', 'woocommerce-paypal-payments' ) }>
+    return (
+        <>
+            <InspectorControls>
+                <PanelBody title={ __( 'Settings', 'woocommerce-paypal-payments' ) }>
                     <SelectControl
                         label={ __( 'Layout', 'woocommerce-paypal-payments' ) }
                         options={ [
@@ -204,20 +190,25 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
                         value={ placement }
                         onChange={ ( value ) => setAttributes( { placement: value } ) }
                     />
-				</PanelBody>
-			</InspectorControls>
+                </PanelBody>
+            </InspectorControls>
             <div {...props}>
                 <div className={'ppcp-overlay-child'}>
-                    <PayPalMessages
-                        style={previewStyle}
-                        amount={amount}
-                        onRender={() => setRendered(true)}
-                    />
+                    <PayPalScriptProvider
+                        options={urlParams}
+                    >
+                        <PayPalMessages
+                            style={previewStyle}
+                            forceReRender={[previewStyle]}
+                            onRender={() => setLoaded(true)}
+                            amount={amount}
+                        />
+                    </PayPalScriptProvider>
                 </div>
                 <div className={'ppcp-overlay-child ppcp-unclicable-overlay'}> {/* make the message not clickable */}
-                    {!rendered && (<Spinner/>)}
+                    {!loaded && (<Spinner/>)}
                 </div>
             </div>
-		</>
-	);
+        </>
+    );
 }

modules/ppcp-paylater-block/yarn.lock

@@ -1005,6 +1005,28 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@paypal/paypal-js@^8.0.4":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-8.0.4.tgz#abe9f40f519b1d2c306adddfbe733be03eb26ce5"
+  integrity sha512-91g5fhRBHGEBoikDzQT6uBn3PzlJQ75g0c3MvqVJqN0XRm5kHa9wz+6+Uaq8QQuxRzz5C2x55Zg057CW6EuwpQ==
+  dependencies:
+    promise-polyfill "^8.3.0"
+
+"@paypal/react-paypal-js@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@paypal/react-paypal-js/-/react-paypal-js-8.2.0.tgz#4b1a142bbb68e62dca4a92da4a6b5568f54901f0"
+  integrity sha512-SworUfu0BNNcqoh0O53Ke4MFpx2m3qJRu3hayXvlluEEXJpKqGSV5aaSGFhbsZqi8hnbsx/hZR7BQbmqsggiGQ==
+  dependencies:
+    "@paypal/paypal-js" "^8.0.4"
+    "@paypal/sdk-constants" "^1.0.122"
+
+"@paypal/sdk-constants@^1.0.122":
+  version "1.0.145"
+  resolved "https://registry.yarnpkg.com/@paypal/sdk-constants/-/sdk-constants-1.0.145.tgz#f373cd3b7cf0409c28e121629b8f1855faf2e77b"
+  integrity sha512-2tclrVX3L44YRJ09H4kkqma/UeAjRJarwH5SyPip10O5S+2ByE1HiyspAJ6hIWSjMngFVqjNyUCnrGcuQA3ldg==
+  dependencies:
+    hi-base32 "^0.5.0"
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.4"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@@ -1599,6 +1621,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hi-base32@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/hi-base32/-/hi-base32-0.5.1.tgz#1279f2ddae2673219ea5870c2121d2a33132857e"
+  integrity sha512-EmBBpvdYh/4XxsnUybsPag6VikPYnN30td+vQk+GI3qpahVEG9+gTkG0aXVxTjBqQ5T6ijbWIu77O+C5WFWsnA==
+
 immutable@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
@@ -1840,6 +1867,11 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+promise-polyfill@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
+  integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
+
 punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"