woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

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

Browse source
This commit is contained in:
Alex P 2023-12-07 16:28:30 +02:00
parent 2ecbf089f5
commit 7e8881dc9d
No known key found for this signature in database
GPG key ID: 54487A734A204D71
5 changed files with 80 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

25
modules/ppcp-paylater-block/resources/js/edit.js
View file

@ -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}