diff --git a/modules/ppcp-paylater-block/block.json b/modules/ppcp-paylater-block/block.json index 3a174c38f..4b4c75efe 100644 --- 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 index 5ddbf76cb..573b770d9 100644 --- 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 (
) + } + + const urlParams = scriptParams === false ? { + clientId: 'test', + components: 'messages', + } : { + ...scriptParams.url_params, + ...{ + components: 'messages', + } + } + return ( <> @@ -116,13 +134,10 @@ export default function Edit( { attributes, clientId, setAttributes } ) { /> -
+
{ + const [data, setData] = useState(null); + + useEffect(() => { + (async () => { + try { + const response = await fetch(requestConfig.endpoint); + const json = await response.json(); + if (json.success && json?.data?.url_params) { + setData(json.data); + } else { + setData(false); + } + } catch (e) { + console.error(e); + setData(false); + } + })(); + }, [requestConfig]); + + return data; +}; diff --git a/modules/ppcp-paylater-block/services.php b/modules/ppcp-paylater-block/services.php index 414e9b8da..24b1f0443 100644 --- a/modules/ppcp-paylater-block/services.php +++ b/modules/ppcp-paylater-block/services.php @@ -11,4 +11,16 @@ namespace WooCommerce\PayPalCommerce\PayLaterBlock; 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 index 25d9050ac..d7eb2b1d0 100644 --- a/modules/ppcp-paylater-block/src/PayLaterBlockModule.php +++ b/modules/ppcp-paylater-block/src/PayLaterBlockModule.php @@ -9,6 +9,7 @@ declare(strict_types=1); 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 @@ class PayLaterBlockModule implements ModuleInterface { 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. *