mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
🔀 Merge branch 'trunk'
Resolve merge conflict due to new JS code format
This commit is contained in:
Philipp Stracker
commit
1eca3b09d7
181 changed files with 25000 additions and 12119 deletions
|
|
@ -5,230 +5,502 @@ 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';
|
||||
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);
|
||||
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;
|
||||
}
|
||||
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
|
||||
},
|
||||
};
|
||||
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(' ') });
|
||||
const 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]);
|
||||
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.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>
|
||||
);
|
||||
}
|
||||
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);
|
||||
const scriptParams = useScriptParams(
|
||||
PcpPayLaterBlock.ajax.cart_script_params
|
||||
);
|
||||
|
||||
if (scriptParams === null) {
|
||||
return <div {...props}><Spinner/></div>;
|
||||
}
|
||||
if ( scriptParams === null ) {
|
||||
return (
|
||||
<div { ...props }>
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const urlParams = {
|
||||
...scriptParams.url_params,
|
||||
components: 'messages',
|
||||
dataNamespace: 'ppcp-block-editor-paylater-message',
|
||||
};
|
||||
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>
|
||||
</>
|
||||
);
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
import { useState, useEffect } from '@wordpress/element';
|
||||
|
||||
export const useScriptParams = (requestConfig) => {
|
||||
const [data, setData] = useState(null);
|
||||
export const useScriptParams = ( requestConfig ) => {
|
||||
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]);
|
||||
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;
|
||||
return data;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,35 +3,45 @@ import { registerBlockType } from '@wordpress/blocks';
|
|||
import Edit from './edit';
|
||||
|
||||
const paypalIcon = (
|
||||
<svg width="584.798" height="720" viewBox="0 0 154.728 190.5">
|
||||
<g transform="translate(898.192 276.071)">
|
||||
<path clipPath="none" d="M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z" fill="#001c64"/>
|
||||
<path clipPath="none" d="M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z" fill="#0070e0"/>
|
||||
<path clipPath="none" d="M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z" fill="#003087"/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
<svg width="584.798" height="720" viewBox="0 0 154.728 190.5">
|
||||
<g transform="translate(898.192 276.071)">
|
||||
<path
|
||||
clipPath="none"
|
||||
d="M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z"
|
||||
fill="#001c64"
|
||||
/>
|
||||
<path
|
||||
clipPath="none"
|
||||
d="M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z"
|
||||
fill="#0070e0"
|
||||
/>
|
||||
<path
|
||||
clipPath="none"
|
||||
d="M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z"
|
||||
fill="#003087"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const blockId = 'woocommerce-paypal-payments/paylater-messages';
|
||||
|
||||
registerBlockType( blockId, {
|
||||
icon: paypalIcon,
|
||||
edit: Edit,
|
||||
save() {
|
||||
return null;
|
||||
},
|
||||
icon: paypalIcon,
|
||||
edit: Edit,
|
||||
save() {
|
||||
return null;
|
||||
},
|
||||
} );
|
||||
|
||||
document.addEventListener( 'DOMContentLoaded', () => {
|
||||
const { registerCheckoutFilters } = window.wc.blocksCheckout;
|
||||
const { registerCheckoutFilters } = window.wc.blocksCheckout;
|
||||
|
||||
// allow to add this block inside WC cart/checkout blocks
|
||||
registerCheckoutFilters( blockId, {
|
||||
additionalCartCheckoutInnerBlockTypes: (
|
||||
defaultValue
|
||||
) => {
|
||||
defaultValue.push( blockId );
|
||||
return defaultValue;
|
||||
},
|
||||
} );
|
||||
// allow to add this block inside WC cart/checkout blocks
|
||||
registerCheckoutFilters( blockId, {
|
||||
additionalCartCheckoutInnerBlockTypes: ( defaultValue ) => {
|
||||
defaultValue.push( blockId );
|
||||
return defaultValue;
|
||||
},
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
