Retrieve current script url params (client id, ...) in editor

woocommerce · Dec 7, 2023 · 94dc93d · 94dc93d
1 parent 2ecbf08
commit 94dc93d
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 8 deletions.
diff --git a/modules/ppcp-paylater-block/block.json b/modules/ppcp-paylater-block/block.json
@@ -43,6 +43,6 @@
 		"html": false
 	},
 	"textdomain": "woocommerce-paypal-payments",
-	"editorScript": "file:./assets/js/paylater-block.js",
+	"editorScript": "ppcp-paylater-block",
 	"editorStyle": "file:./assets/css/edit.css"
 }
diff --git a/modules/ppcp-paylater-block/resources/js/edit.js b/modules/ppcp-paylater-block/resources/js/edit.js
@@ -3,6 +3,7 @@ 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";
 
 export default function Edit( { attributes, clientId, setAttributes } ) {
     const { layout, logo, position, color, flexColor, flexRatio, placement, id } = attributes;
@@ -23,12 +24,29 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
         },
     };
 
+    const props = useBlockProps({className: ['ppcp-paylater-block-preview', 'ppcp-overlay-parent']});
+
     useEffect(() => {
         if (!id) {
             setAttributes({id: 'ppcp-' + clientId});
         }
     }, []);
 
+    const scriptParams = useScriptParams(PcpPayLaterBlock.ajax.cart_script_params);
+    if (scriptParams === null) {
+        return (<div {...props}><Spinner/></div>)
+    }
+
+    const urlParams = scriptParams === false ? {
+        clientId: 'test',
+        components: 'messages',
+    } : {
+        ...scriptParams.url_params,
+        ...{
+            components: 'messages',
+        }
+    }
+
 	return (
 		<>
 			<InspectorControls>
@@ -116,13 +134,10 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
                     />
 				</PanelBody>
 			</InspectorControls>
-            <div {...useBlockProps({className: ['ppcp-paylater-block-preview', 'ppcp-overlay-parent']})}>
+            <div {...props}>
                 <div className={'ppcp-overlay-child'}>
                     <PayPalScriptProvider
-                        options={{
-                            clientId: "test",
-                            components: "messages",
-                        }}
+                        options={urlParams}
                     >
                         <PayPalMessages
                             style={previewStyle}

diff --git a/modules/ppcp-paylater-block/resources/js/hooks/script-params.js b/modules/ppcp-paylater-block/resources/js/hooks/script-params.js
@@ -0,0 +1,17 @@
+import { useState, useEffect } from '@wordpress/element';
+
+export const useScriptParams = (requestConfig) => {
+    const [data, setData] = useState(null);
+
+    useEffect(async () => {
+        const response = await fetch(requestConfig.endpoint);
+        const json = await response.json();
+        if (json.success && json?.data?.url_params) {
+            setData(json.data);
+        } else {
+            setData(false);
+        }
+    }, [requestConfig]);
+
+    return data;
+};
diff --git a/modules/ppcp-paylater-block/services.php b/modules/ppcp-paylater-block/services.php
@@ -11,4 +11,16 @@
 
 use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
 
-return array();
+return array(
+	'paylater-block.url' => static function ( ContainerInterface $container ): string {
+		/**
+		 * Cannot return false for this path.
+		 *
+		 * @psalm-suppress PossiblyFalseArgument
+		 */
+		return plugins_url(
+			'/modules/ppcp-paylater-block/',
+			dirname( realpath( __FILE__ ), 3 ) . '/woocommerce-paypal-payments.php'
+		);
+	},
+);
diff --git a/modules/ppcp-paylater-block/src/PayLaterBlockModule.php b/modules/ppcp-paylater-block/src/PayLaterBlockModule.php
@@ -9,6 +9,7 @@
 
 namespace WooCommerce\PayPalCommerce\PayLaterBlock;
 
+use WooCommerce\PayPalCommerce\Button\Endpoint\CartScriptParamsEndpoint;
 use WooCommerce\PayPalCommerce\Vendor\Dhii\Container\ServiceProvider;
 use WooCommerce\PayPalCommerce\Vendor\Dhii\Modular\Module\ModuleInterface;
 use WooCommerce\PayPalCommerce\Vendor\Interop\Container\ServiceProviderInterface;
@@ -34,7 +35,27 @@ public function setup(): ServiceProviderInterface {
 	public function run( ContainerInterface $c ): void {
 		add_action(
 			'init',
-			function (): void {
+			function () use ( $c ): void {
+				$script_handle = 'ppcp-paylater-block';
+				wp_register_script(
+					$script_handle,
+					$c->get( 'paylater-block.url' ) . '/assets/js/paylater-block.js',
+					array(),
+					$c->get( 'ppcp.asset-version' ),
+					true
+				);
+				wp_localize_script(
+					$script_handle,
+					'PcpPayLaterBlock',
+					array(
+						'ajax' => array(
+							'cart_script_params' => array(
+								'endpoint' => \WC_AJAX::get_endpoint( CartScriptParamsEndpoint::ENDPOINT ),
+							),
+						),
+					)
+				);
+
 				/**
 				 * Cannot return false for this path.
 				 *