mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-31 06:52:50 +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
|
|
@ -1,141 +1,185 @@
|
|||
(function(wp) {
|
||||
const { createBlock } = wp.blocks;
|
||||
const { select, dispatch, subscribe } = wp.data;
|
||||
const getBlocks = () => select('core/block-editor').getBlocks() || [];
|
||||
( function ( wp ) {
|
||||
const { createBlock } = wp.blocks;
|
||||
const { select, dispatch, subscribe } = wp.data;
|
||||
const getBlocks = () => select( 'core/block-editor' ).getBlocks() || [];
|
||||
|
||||
const { addFilter } = wp.hooks;
|
||||
const { assign } = lodash;
|
||||
const { addFilter } = wp.hooks;
|
||||
const { assign } = lodash;
|
||||
|
||||
// We need to make sure the block is unlocked so that it doesn't get automatically inserted as the last block
|
||||
addFilter(
|
||||
'blocks.registerBlockType',
|
||||
'woocommerce-paypal-payments/modify-cart-paylater-messages',
|
||||
(settings, name) => {
|
||||
if (name === 'woocommerce-paypal-payments/cart-paylater-messages') {
|
||||
const newAttributes = assign({}, settings.attributes, {
|
||||
lock: assign({}, settings.attributes.lock, {
|
||||
default: assign({}, settings.attributes.lock.default, {
|
||||
remove: false
|
||||
})
|
||||
})
|
||||
});
|
||||
// We need to make sure the block is unlocked so that it doesn't get automatically inserted as the last block
|
||||
addFilter(
|
||||
'blocks.registerBlockType',
|
||||
'woocommerce-paypal-payments/modify-cart-paylater-messages',
|
||||
( settings, name ) => {
|
||||
if (
|
||||
name === 'woocommerce-paypal-payments/cart-paylater-messages'
|
||||
) {
|
||||
const newAttributes = assign( {}, settings.attributes, {
|
||||
lock: assign( {}, settings.attributes.lock, {
|
||||
default: assign( {}, settings.attributes.lock.default, {
|
||||
remove: false,
|
||||
} ),
|
||||
} ),
|
||||
} );
|
||||
|
||||
return assign({}, settings, {
|
||||
attributes: newAttributes
|
||||
});
|
||||
}
|
||||
return settings;
|
||||
}
|
||||
);
|
||||
return assign( {}, settings, {
|
||||
attributes: newAttributes,
|
||||
} );
|
||||
}
|
||||
return settings;
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Subscribes to changes in the block editor, specifically checking for the presence of 'woocommerce/cart'.
|
||||
*/
|
||||
subscribe(() => {
|
||||
const currentBlocks = getBlocks();
|
||||
/**
|
||||
* Subscribes to changes in the block editor, specifically checking for the presence of 'woocommerce/cart'.
|
||||
*/
|
||||
subscribe( () => {
|
||||
const currentBlocks = getBlocks();
|
||||
|
||||
currentBlocks.forEach(block => {
|
||||
if (block.name === 'woocommerce/cart') {
|
||||
ensurePayLaterBlockExists(block);
|
||||
}
|
||||
});
|
||||
});
|
||||
currentBlocks.forEach( ( block ) => {
|
||||
if ( block.name === 'woocommerce/cart' ) {
|
||||
ensurePayLaterBlockExists( block );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Ensures the 'woocommerce-paypal-payments/cart-paylater-messages' block exists inside the 'woocommerce/cart' block.
|
||||
* @param {Object} cartBlock - The cart block instance.
|
||||
*/
|
||||
function ensurePayLaterBlockExists(cartBlock) {
|
||||
const payLaterBlock = findBlockByName(cartBlock.innerBlocks, 'woocommerce-paypal-payments/cart-paylater-messages');
|
||||
if (!payLaterBlock) {
|
||||
waitForBlock('woocommerce/cart-totals-block', 'woocommerce-paypal-payments/cart-paylater-messages', 'woocommerce/cart-order-summary-block');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Ensures the 'woocommerce-paypal-payments/cart-paylater-messages' block exists inside the 'woocommerce/cart' block.
|
||||
* @param {Object} cartBlock - The cart block instance.
|
||||
*/
|
||||
function ensurePayLaterBlockExists( cartBlock ) {
|
||||
const payLaterBlock = findBlockByName(
|
||||
cartBlock.innerBlocks,
|
||||
'woocommerce-paypal-payments/cart-paylater-messages'
|
||||
);
|
||||
if ( ! payLaterBlock ) {
|
||||
waitForBlock(
|
||||
'woocommerce/cart-totals-block',
|
||||
'woocommerce-paypal-payments/cart-paylater-messages',
|
||||
'woocommerce/cart-order-summary-block'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Waits for a specific block to appear using async/await pattern before executing the insertBlockAfter function.
|
||||
* @param {string} targetBlockName - Name of the block to wait for.
|
||||
* @param {string} newBlockName - Name of the new block to insert after the target.
|
||||
* @param {string} anchorBlockName - Name of the anchor block to determine position.
|
||||
* @param {number} attempts - The number of attempts made to find the target block.
|
||||
*/
|
||||
async function waitForBlock(targetBlockName, newBlockName, anchorBlockName = '', attempts = 0) {
|
||||
const targetBlock = findBlockByName(getBlocks(), targetBlockName);
|
||||
if (targetBlock) {
|
||||
await delay(1000); // We need this to ensure the block is fully rendered
|
||||
insertBlockAfter(targetBlockName, newBlockName, anchorBlockName);
|
||||
} else if (attempts < 10) { // Poll up to 10 times
|
||||
await delay(1000); // Wait 1 second before retrying
|
||||
await waitForBlock(targetBlockName, newBlockName, anchorBlockName, attempts + 1);
|
||||
} else {
|
||||
console.log('Failed to find target block after several attempts.');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Waits for a specific block to appear using async/await pattern before executing the insertBlockAfter function.
|
||||
* @param {string} targetBlockName - Name of the block to wait for.
|
||||
* @param {string} newBlockName - Name of the new block to insert after the target.
|
||||
* @param {string} anchorBlockName - Name of the anchor block to determine position.
|
||||
* @param {number} attempts - The number of attempts made to find the target block.
|
||||
*/
|
||||
async function waitForBlock(
|
||||
targetBlockName,
|
||||
newBlockName,
|
||||
anchorBlockName = '',
|
||||
attempts = 0
|
||||
) {
|
||||
const targetBlock = findBlockByName( getBlocks(), targetBlockName );
|
||||
if ( targetBlock ) {
|
||||
await delay( 1000 ); // We need this to ensure the block is fully rendered
|
||||
insertBlockAfter( targetBlockName, newBlockName, anchorBlockName );
|
||||
} else if ( attempts < 10 ) {
|
||||
// Poll up to 10 times
|
||||
await delay( 1000 ); // Wait 1 second before retrying
|
||||
await waitForBlock(
|
||||
targetBlockName,
|
||||
newBlockName,
|
||||
anchorBlockName,
|
||||
attempts + 1
|
||||
);
|
||||
} else {
|
||||
console.log(
|
||||
'Failed to find target block after several attempts.'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delays execution by a given number of milliseconds.
|
||||
* @param {number} ms - Milliseconds to delay.
|
||||
* @return {Promise} A promise that resolves after the delay.
|
||||
*/
|
||||
function delay(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
/**
|
||||
* Delays execution by a given number of milliseconds.
|
||||
* @param {number} ms - Milliseconds to delay.
|
||||
* @return {Promise} A promise that resolves after the delay.
|
||||
*/
|
||||
function delay( ms ) {
|
||||
return new Promise( ( resolve ) => setTimeout( resolve, ms ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Inserts a block after a specified block if it doesn't already exist.
|
||||
* @param {string} targetBlockName - Name of the block to find.
|
||||
* @param {string} newBlockName - Name of the new block to insert.
|
||||
* @param {string} anchorBlockName - Name of the anchor block to determine position.
|
||||
*/
|
||||
function insertBlockAfter(targetBlockName, newBlockName, anchorBlockName = '') {
|
||||
const targetBlock = findBlockByName(getBlocks(), targetBlockName);
|
||||
if (!targetBlock) {
|
||||
// Target block not found
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* Inserts a block after a specified block if it doesn't already exist.
|
||||
* @param {string} targetBlockName - Name of the block to find.
|
||||
* @param {string} newBlockName - Name of the new block to insert.
|
||||
* @param {string} anchorBlockName - Name of the anchor block to determine position.
|
||||
*/
|
||||
function insertBlockAfter(
|
||||
targetBlockName,
|
||||
newBlockName,
|
||||
anchorBlockName = ''
|
||||
) {
|
||||
const targetBlock = findBlockByName( getBlocks(), targetBlockName );
|
||||
if ( ! targetBlock ) {
|
||||
// Target block not found
|
||||
return;
|
||||
}
|
||||
|
||||
const parentBlock = select('core/block-editor').getBlock(targetBlock.clientId);
|
||||
if (parentBlock.innerBlocks.some(block => block.name === newBlockName)) {
|
||||
// The block is already inserted next to the target block
|
||||
return;
|
||||
}
|
||||
const parentBlock = select( 'core/block-editor' ).getBlock(
|
||||
targetBlock.clientId
|
||||
);
|
||||
if (
|
||||
parentBlock.innerBlocks.some(
|
||||
( block ) => block.name === newBlockName
|
||||
)
|
||||
) {
|
||||
// The block is already inserted next to the target block
|
||||
return;
|
||||
}
|
||||
|
||||
let offset = 0;
|
||||
if (anchorBlockName !== '') {
|
||||
// Find the anchor block and calculate the offset
|
||||
const anchorIndex = parentBlock.innerBlocks.findIndex(block => block.name === anchorBlockName);
|
||||
offset = parentBlock.innerBlocks.length - (anchorIndex + 1);
|
||||
}
|
||||
let offset = 0;
|
||||
if ( anchorBlockName !== '' ) {
|
||||
// Find the anchor block and calculate the offset
|
||||
const anchorIndex = parentBlock.innerBlocks.findIndex(
|
||||
( block ) => block.name === anchorBlockName
|
||||
);
|
||||
offset = parentBlock.innerBlocks.length - ( anchorIndex + 1 );
|
||||
}
|
||||
|
||||
const newBlock = createBlock(newBlockName);
|
||||
const newBlock = createBlock( newBlockName );
|
||||
|
||||
// Insert the block at the correct position
|
||||
dispatch('core/block-editor').insertBlock(newBlock, parentBlock.innerBlocks.length - offset, parentBlock.clientId);
|
||||
// Insert the block at the correct position
|
||||
dispatch( 'core/block-editor' ).insertBlock(
|
||||
newBlock,
|
||||
parentBlock.innerBlocks.length - offset,
|
||||
parentBlock.clientId
|
||||
);
|
||||
|
||||
// Lock the block after it has been inserted
|
||||
dispatch('core/block-editor').updateBlockAttributes(newBlock.clientId, {
|
||||
lock: { remove: true }
|
||||
});
|
||||
}
|
||||
// Lock the block after it has been inserted
|
||||
dispatch( 'core/block-editor' ).updateBlockAttributes(
|
||||
newBlock.clientId,
|
||||
{
|
||||
lock: { remove: true },
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively searches for a block by name among all blocks.
|
||||
* @param {Array} blocks - The array of blocks to search.
|
||||
* @param {string} blockName - The name of the block to find.
|
||||
* @returns {Object|null} The found block, or null if not found.
|
||||
*/
|
||||
function findBlockByName(blocks, blockName) {
|
||||
for (const block of blocks) {
|
||||
if (block.name === blockName) {
|
||||
return block;
|
||||
}
|
||||
if (block.innerBlocks.length > 0) {
|
||||
const foundBlock = findBlockByName(block.innerBlocks, blockName);
|
||||
if (foundBlock) {
|
||||
return foundBlock;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
})(window.wp);
|
||||
/**
|
||||
* Recursively searches for a block by name among all blocks.
|
||||
* @param {Array} blocks - The array of blocks to search.
|
||||
* @param {string} blockName - The name of the block to find.
|
||||
* @return {Object|null} The found block, or null if not found.
|
||||
*/
|
||||
function findBlockByName( blocks, blockName ) {
|
||||
for ( const block of blocks ) {
|
||||
if ( block.name === blockName ) {
|
||||
return block;
|
||||
}
|
||||
if ( block.innerBlocks.length > 0 ) {
|
||||
const foundBlock = findBlockByName(
|
||||
block.innerBlocks,
|
||||
blockName
|
||||
);
|
||||
if ( foundBlock ) {
|
||||
return foundBlock;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
} )( window.wp );
|
||||
|
|
|
|||
|
|
@ -10,32 +10,31 @@ import Edit from './edit';
|
|||
import metadata from './block.json';
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
registerBlockType(metadata, {
|
||||
icon: paypalIcon,
|
||||
edit: Edit,
|
||||
save() {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
||||
registerBlockType( metadata, {
|
||||
icon: paypalIcon,
|
||||
edit: Edit,
|
||||
save() {
|
||||
return null;
|
||||
},
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -5,134 +5,190 @@ 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 { ppcpId } = attributes;
|
||||
export default function Edit( { attributes, clientId, setAttributes } ) {
|
||||
const { ppcpId } = attributes;
|
||||
|
||||
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 cartConfig = PcpCartPayLaterBlock.config.cart;
|
||||
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'],
|
||||
},
|
||||
};
|
||||
}
|
||||
// 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(' ') });
|
||||
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]);
|
||||
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.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>
|
||||
);
|
||||
}
|
||||
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 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',
|
||||
};
|
||||
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>
|
||||
</>
|
||||
);
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,32 +10,31 @@ import Edit from './edit';
|
|||
import metadata from './block.json';
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
registerBlockType(metadata, {
|
||||
icon: paypalIcon,
|
||||
edit: Edit,
|
||||
save() {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
||||
registerBlockType( metadata, {
|
||||
icon: paypalIcon,
|
||||
edit: Edit,
|
||||
save() {
|
||||
return null;
|
||||
},
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -5,128 +5,190 @@ 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 { ppcpId } = attributes;
|
||||
export default function Edit( { attributes, clientId, setAttributes } ) {
|
||||
const { ppcpId } = attributes;
|
||||
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [ loaded, setLoaded ] = useState( false );
|
||||
|
||||
let amount = undefined;
|
||||
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 checkoutConfig = PcpCheckoutPayLaterBlock.config.checkout;
|
||||
const checkoutConfig = PcpCheckoutPayLaterBlock.config.checkout;
|
||||
|
||||
// Dynamically setting previewStyle based on the layout attribute
|
||||
let previewStyle = {};
|
||||
if (checkoutConfig.layout === 'flex') {
|
||||
previewStyle = {
|
||||
layout: checkoutConfig.layout,
|
||||
color: checkoutConfig.color,
|
||||
ratio: checkoutConfig.ratio,
|
||||
};
|
||||
} else {
|
||||
previewStyle = {
|
||||
layout: checkoutConfig.layout,
|
||||
logo: {
|
||||
position: checkoutConfig['logo-position'],
|
||||
type: checkoutConfig['logo-type'],
|
||||
},
|
||||
text: {
|
||||
color: checkoutConfig['text-color'],
|
||||
size: checkoutConfig['text-size'],
|
||||
},
|
||||
};
|
||||
}
|
||||
// Dynamically setting previewStyle based on the layout attribute
|
||||
let previewStyle = {};
|
||||
if ( checkoutConfig.layout === 'flex' ) {
|
||||
previewStyle = {
|
||||
layout: checkoutConfig.layout,
|
||||
color: checkoutConfig.color,
|
||||
ratio: checkoutConfig.ratio,
|
||||
};
|
||||
} else {
|
||||
previewStyle = {
|
||||
layout: checkoutConfig.layout,
|
||||
logo: {
|
||||
position: checkoutConfig[ 'logo-position' ],
|
||||
type: checkoutConfig[ 'logo-type' ],
|
||||
},
|
||||
text: {
|
||||
color: checkoutConfig[ 'text-color' ],
|
||||
size: checkoutConfig[ 'text-size' ],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
let classes = ['ppcp-paylater-block-preview', 'ppcp-overlay-parent'];
|
||||
if (PcpCheckoutPayLaterBlock.vaultingEnabled || !PcpCheckoutPayLaterBlock.placementEnabled) {
|
||||
classes = ['ppcp-paylater-block-preview', 'ppcp-paylater-unavailable', 'block-editor-warning'];
|
||||
}
|
||||
const props = useBlockProps({ className: classes });
|
||||
let classes = [ 'ppcp-paylater-block-preview', 'ppcp-overlay-parent' ];
|
||||
if (
|
||||
PcpCheckoutPayLaterBlock.vaultingEnabled ||
|
||||
! PcpCheckoutPayLaterBlock.placementEnabled
|
||||
) {
|
||||
classes = [
|
||||
'ppcp-paylater-block-preview',
|
||||
'ppcp-paylater-unavailable',
|
||||
'block-editor-warning',
|
||||
];
|
||||
}
|
||||
const props = useBlockProps( { className: classes } );
|
||||
|
||||
useEffect(() => {
|
||||
if (!ppcpId) {
|
||||
setAttributes({ ppcpId: 'ppcp-' + clientId });
|
||||
}
|
||||
}, [ppcpId, clientId]);
|
||||
useEffect( () => {
|
||||
if ( ! ppcpId ) {
|
||||
setAttributes( { ppcpId: 'ppcp-' + clientId } );
|
||||
}
|
||||
}, [ ppcpId, clientId ] );
|
||||
|
||||
if (PcpCheckoutPayLaterBlock.vaultingEnabled) {
|
||||
return (
|
||||
<div {...props}>
|
||||
<div className={'block-editor-warning__contents'}>
|
||||
<p className={'block-editor-warning__message'}>{__('Checkout - 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={PcpCheckoutPayLaterBlock.settingsUrl}>
|
||||
<button type={'button'} className={'components-button is-primary'}>
|
||||
{__('PayPal Payments Settings', 'woocommerce-paypal-payments')}
|
||||
</button>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if ( PcpCheckoutPayLaterBlock.vaultingEnabled ) {
|
||||
return (
|
||||
<div { ...props }>
|
||||
<div className={ 'block-editor-warning__contents' }>
|
||||
<p className={ 'block-editor-warning__message' }>
|
||||
{ __(
|
||||
'Checkout - 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={ PcpCheckoutPayLaterBlock.settingsUrl }>
|
||||
<button
|
||||
type={ 'button' }
|
||||
className={ 'components-button is-primary' }
|
||||
>
|
||||
{ __(
|
||||
'PayPal Payments Settings',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</button>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!PcpCheckoutPayLaterBlock.placementEnabled) {
|
||||
return (
|
||||
<div {...props}>
|
||||
<div className={'block-editor-warning__contents'}>
|
||||
<p className={'block-editor-warning__message'}>{__('Checkout - Pay Later Messaging cannot be used while the “Checkout” 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={PcpCheckoutPayLaterBlock.payLaterSettingsUrl}>
|
||||
<button type={'button'} className={'components-button is-primary'}>
|
||||
{__('PayPal Payments Settings', 'woocommerce-paypal-payments')}
|
||||
</button>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if ( ! PcpCheckoutPayLaterBlock.placementEnabled ) {
|
||||
return (
|
||||
<div { ...props }>
|
||||
<div className={ 'block-editor-warning__contents' }>
|
||||
<p className={ 'block-editor-warning__message' }>
|
||||
{ __(
|
||||
'Checkout - Pay Later Messaging cannot be used while the “Checkout” 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={
|
||||
PcpCheckoutPayLaterBlock.payLaterSettingsUrl
|
||||
}
|
||||
>
|
||||
<button
|
||||
type={ 'button' }
|
||||
className={ 'components-button is-primary' }
|
||||
>
|
||||
{ __(
|
||||
'PayPal Payments Settings',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</button>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const scriptParams = useScriptParams(PcpCheckoutPayLaterBlock.ajax.cart_script_params);
|
||||
if (scriptParams === null) {
|
||||
return <div {...props}><Spinner/></div>;
|
||||
}
|
||||
const scriptParams = useScriptParams(
|
||||
PcpCheckoutPayLaterBlock.ajax.cart_script_params
|
||||
);
|
||||
if ( scriptParams === null ) {
|
||||
return (
|
||||
<div { ...props }>
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const urlParams = {
|
||||
...scriptParams.url_params,
|
||||
components: 'messages',
|
||||
dataNamespace: 'ppcp-block-editor-checkout-paylater-message',
|
||||
};
|
||||
const urlParams = {
|
||||
...scriptParams.url_params,
|
||||
components: 'messages',
|
||||
dataNamespace: 'ppcp-block-editor-checkout-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 “Checkout” messaging placement.', 'woocommerce-paypal-payments')}</p>
|
||||
<a href={PcpCheckoutPayLaterBlock.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>
|
||||
</>
|
||||
);
|
||||
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 “Checkout” messaging placement.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
<a href={ PcpCheckoutPayLaterBlock.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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
