woocommerce-paypal-payments/modules/ppcp-paylater-wc-blocks/resources/js/CartPayLaterMessagesBlock/edit.js

import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, Spinner } from '@wordpress/components';
import { PayPalScriptProvider, PayPalMessages } from '@paypal/react-paypal-js';
import { useScriptParams } from '../../../../ppcp-paylater-block/resources/js/hooks/script-params';

export default function Edit({ attributes, clientId, setAttributes }) {
    const { id, ppcpId } = attributes;

    const [loaded, setLoaded] = useState(false);

    let amount;
    const postContent = String(wp.data.select('core/editor')?.getEditedPostContent());
    if (postContent.includes('woocommerce/checkout') || postContent.includes('woocommerce/cart')) {
        amount = 50.0;
    }

    const cartConfig = PcpCartPayLaterBlock.config.cart;

    // Dynamically setting previewStyle based on the layout attribute
    let previewStyle = {};
    if (cartConfig.layout === 'flex') {
        previewStyle = {
            layout: cartConfig.layout,
            color: cartConfig.color,
            ratio: cartConfig.ratio,
        };
    } else {
        previewStyle = {
            layout: cartConfig.layout,
            logo: {
                position: cartConfig['logo-position'],
                type: cartConfig['logo-type'],
            },
            text: {
                color: cartConfig['text-color'],
                size: cartConfig['text-size'],
            },
        };
    }

    let classes = ['ppcp-paylater-block-preview', 'ppcp-overlay-parent'];
    if (PcpCartPayLaterBlock.vaultingEnabled || !PcpCartPayLaterBlock.placementEnabled) {
        classes = [...classes, 'ppcp-paylater-unavailable', 'block-editor-warning'];
    }
    const props = useBlockProps({ className: classes.join(' ') });

    useEffect(() => {
        if (!ppcpId) {
            setAttributes({ ppcpId: `ppcp-${clientId}` });
        }
    }, [ppcpId, clientId]);

    if (PcpCartPayLaterBlock.vaultingEnabled) {
        return (
            <div {...props}>
                <div className='block-editor-warning__contents'>
                    <p className='block-editor-warning__message'>
                        {__('Cart - Pay Later Messaging cannot be used while PayPal Vaulting is active. Disable PayPal Vaulting in the PayPal Payment settings to reactivate this block', 'woocommerce-paypal-payments')}
                    </p>
                    <div className='block-editor-warning__actions'>
                        <span className='block-editor-warning__action'>
                            <a href={PcpCartPayLaterBlock.settingsUrl}>
                                <button type='button' className='components-button is-primary'>
                                    {__('PayPal Payments Settings', 'woocommerce-paypal-payments')}
                                </button>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        );
    }

    if (!PcpCartPayLaterBlock.placementEnabled) {
        return (
            <div {...props}>
                <div className='block-editor-warning__contents'>
                    <p className='block-editor-warning__message'>
                        {__('Cart - Pay Later Messaging cannot be used while the “Cart” messaging placement is disabled. Enable the placement in the PayPal Payments Pay Later settings to reactivate this block.', 'woocommerce-paypal-payments')}
                    </p>
                    <div className='block-editor-warning__actions'>
                        <span className='block-editor-warning__action'>
                            <a href={PcpCartPayLaterBlock.payLaterSettingsUrl}>
                                <button type='button' className='components-button is-primary'>
                                    {__('PayPal Payments Settings', 'woocommerce-paypal-payments')}
                                </button>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        );
    }

    const scriptParams = useScriptParams(PcpCartPayLaterBlock.ajax.cart_script_params);
    if (scriptParams === null) {
        return <div {...props}><Spinner /></div>;
    }

    const urlParams = {
        ...scriptParams.url_params,
        components: 'messages',
        dataNamespace: 'ppcp-block-editor-cart-paylater-message',
    };

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Customize your messaging', 'woocommerce-paypal-payments')}>
                    <p>
                        {__('Choose the layout and color of your messaging in the PayPal Payments Pay Later settings for the “Cart” messaging placement.', 'woocommerce-paypal-payments')}
                    </p>
                    <a href={PcpCartPayLaterBlock.payLaterSettingsUrl}>
                        <button type='button' className='components-button is-primary'>
                            {__('PayPal Payments Settings', 'woocommerce-paypal-payments')}
                        </button>
                    </a>
                </PanelBody>
            </InspectorControls>
            <div {...props}>
                <div className='ppcp-overlay-child'>
                    <PayPalScriptProvider options={urlParams}>
                        <PayPalMessages
                            style={previewStyle}
                            onRender={() => setLoaded(true)}
                            amount={amount}
                        />
                    </PayPalScriptProvider>
                </div>
                <div className='ppcp-overlay-child ppcp-unclicable-overlay'> {/* make the message not clickable */}
                    {!loaded && <Spinner />}
                </div>
            </div>
        </>
    );
}