woocommerce-paypal-payments/modules/ppcp-paylater-block/resources/js/edit.js

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';

export default function Edit({ attributes, clientId, setAttributes }) {
    const { layout, logo, position, color, size, flexColor, flexRatio, placement, id } = attributes;
    const isFlex = layout === 'flex';

    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 previewStyle = {
        layout,
        logo: {
            position,
            type: logo,
        },
        color: flexColor,
        ratio: flexRatio,
        text: {
            color,
            size
        },
    };

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

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

    if (PcpPayLaterBlock.vaultingEnabled) {
        return (
            <div {...props}>
                <div className='block-editor-warning__contents'>
                    <p className='block-editor-warning__message'>
                        {__('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={PcpPayLaterBlock.payLaterSettingsUrl}>
                                <button type='button' className='components-button is-primary'>
                                    {__('PayPal Payments Settings', 'woocommerce-paypal-payments')}
                                </button>
                            </a>
                        </span>
                        <span className='block-editor-warning__action'>
                            <button
                                onClick={() => wp.data.dispatch('core/block-editor').removeBlock(clientId)}
                                type='button' className='components-button is-secondary'>
                                {__('Remove Block', 'woocommerce-paypal-payments')}
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        );
    }

    if (!PcpPayLaterBlock.placementEnabled) {
        return (
            <div {...props}>
                <div className='block-editor-warning__contents'>
                    <p className='block-editor-warning__message'>
                        {__('Pay Later Messaging cannot be used while the “WooCommerce Block” 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={PcpPayLaterBlock.payLaterSettingsUrl}>
                                <button type='button' className='components-button is-primary'>
                                    {__('PayPal Payments Settings', 'woocommerce-paypal-payments')}
                                </button>
                            </a>
                        </span>
                        <span className='block-editor-warning__action'>
                            <button
                                onClick={() => wp.data.dispatch('core/block-editor').removeBlock(clientId)}
                                type='button' className='components-button is-secondary'>
                                {__('Remove Block', 'woocommerce-paypal-payments')}
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        );
    }

    const scriptParams = useScriptParams(PcpPayLaterBlock.ajax.cart_script_params);

    if (scriptParams === null) {
        return <div {...props}><Spinner/></div>;
    }

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

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Settings', 'woocommerce-paypal-payments')}>
                    <SelectControl
                        label={__('Layout', 'woocommerce-paypal-payments')}
                        options={[
                            { label: __('Text', 'woocommerce-paypal-payments'), value: 'text' },
                            { label: __('Banner', 'woocommerce-paypal-payments'), value: 'flex' },
                        ]}
                        value={layout}
                        onChange={(value) => setAttributes({ layout: value })}
                    />
                    {!isFlex && (
                        <SelectControl
                            label={__('Logo', 'woocommerce-paypal-payments')}
                            options={[
                                { label: __('Full logo', 'woocommerce-paypal-payments'), value: 'primary' },
                                { label: __('Monogram', 'woocommerce-paypal-payments'), value: 'alternative' },
                                { label: __('Inline', 'woocommerce-paypal-payments'), value: 'inline' },
                                { label: __('Message only', 'woocommerce-paypal-payments'), value: 'none' },
                            ]}
                            value={logo}
                            onChange={(value) => setAttributes({ logo: value })}
                        />
                    )}
                    {!isFlex && logo === 'primary' && (
                        <SelectControl
                            label={__('Logo Position', 'woocommerce-paypal-payments')}
                            options={[
                                { label: __('Left', 'woocommerce-paypal-payments'), value: 'left' },
                                { label: __('Right', 'woocommerce-paypal-payments'), value: 'right' },
                                { label: __('Top', 'woocommerce-paypal-payments'), value: 'top' },
                            ]}
                            value={position}
                            onChange={(value) => setAttributes({ position: value })}
                        />
                    )}
                    {!isFlex && (
                        <SelectControl
                            label={__('Text Color', 'woocommerce-paypal-payments')}
                            options={[
                                { label: __('Black / Blue logo', 'woocommerce-paypal-payments'), value: 'black' },
                                { label: __('White / White logo', 'woocommerce-paypal-payments'), value: 'white' },
                                { label: __('Monochrome', 'woocommerce-paypal-payments'), value: 'monochrome' },
                                { label: __('Black / Gray logo', 'woocommerce-paypal-payments'), value: 'grayscale' },
                            ]}
                            value={color}
                            onChange={(value) => setAttributes({ color: value })}
                        />
                    )}
                    {!isFlex && (
                        <SelectControl
                            label={__('Text Size', 'woocommerce-paypal-payments')}
                            options={[
                                { label: __('Small', 'woocommerce-paypal-payments'), value: '12' },
                                { label: __('Medium', 'woocommerce-paypal-payments'), value: '14' },
                                { label: __('Large', 'woocommerce-paypal-payments'), value: '16' },
                            ]}
                            value={size}
                            onChange={(value) => setAttributes({ size: value })}
                        />
                    )}
                    {isFlex && (
                        <SelectControl
                            label={__('Color', 'woocommerce-paypal-payments')}
                            options={[
                                { label: __('Blue', 'woocommerce-paypal-payments'), value: 'blue' },
                                { label: __('Black', 'woocommerce-paypal-payments'), value: 'black' },
                                { label: __('White', 'woocommerce-paypal-payments'), value: 'white' },
                                { label: __('White (no border)', 'woocommerce-paypal-payments'), value: 'white-no-border' },
                            ]}
                            value={flexColor}
                            onChange={(value) => setAttributes({ flexColor: value })}
                        />
                    )}
                    {isFlex && (
                        <SelectControl
                            label={__('Ratio', 'woocommerce-paypal-payments')}
                            options={[
                                { label: __('8x1', 'woocommerce-paypal-payments'), value: '8x1' },
                                { label: __('20x1', 'woocommerce-paypal-payments'), value: '20x1' },
                            ]}
                            value={flexRatio}
                            onChange={(value) => setAttributes({ flexRatio: value })}
                        />
                    )}
                    <SelectControl
                        label={ __( 'Placement page', 'woocommerce-paypal-payments' ) }
                        help={ __( 'Used for the analytics dashboard in the merchant account.', 'woocommerce-paypal-payments' ) }
                        options={ [
                            { label: __( 'Detect automatically', 'woocommerce-paypal-payments' ), value: 'auto' },
                            { label: __( 'Product Page', 'woocommerce-paypal-payments' ), value: 'product' },
                            { label: __( 'Cart', 'woocommerce-paypal-payments' ), value: 'cart' },
                            { label: __( 'Checkout', 'woocommerce-paypal-payments' ), value: 'checkout' },
                            { label: __( 'Home', 'woocommerce-paypal-payments' ), value: 'home' },
                            { label: __( 'Shop', 'woocommerce-paypal-payments' ), value: 'shop' },
                        ] }
                        value={ placement }
                        onChange={ ( value ) => setAttributes( { placement: value } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <div {...props}>
                <div className='ppcp-overlay-child'>
                    <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 */}
                    {!loaded && <Spinner />}
                </div>
            </div>
        </>
    );
}