woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

Add support for buttonAttributes API in the editor

Browse source
This commit is contained in:
Daniel Dudzic 2024-08-19 01:16:20 -05:00
parent c69c4ed0f3
commit 422b609b2c
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
4 changed files with 71 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

3
modules/ppcp-blocks/resources/css/gateway-editor.scss Normal file
View file

@ -0,0 +1,3 @@
li[id^="express-payment-method-ppcp-"] div[class^="ppc-button-container-"] {
display: flex;
}

61
modules/ppcp-blocks/resources/js/checkout-block.js
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from '@wordpress/element';
import { useEffect, useState, useMemo } from '@wordpress/element';
import {
registerExpressPaymentMethod,
registerPaymentMethod,
@ -587,6 +587,10 @@ const PayPalComponent = ( {
style.height = buttonAttributes?.height
? Number( buttonAttributes.height )
: style.height;
style.borderRadius = buttonAttributes?.borderRadius
? Number( buttonAttributes.borderRadius )
: style.borderRadius;
style.color = buttonAttributes?.darkMode ? 'white' : '';
}
if ( ! paypalScriptLoaded ) {
@ -660,19 +664,47 @@ const PayPalComponent = ( {
);
};
const BlockEditorPayPalComponent = () => {
const urlParams = {
clientId: 'test',
...config.scriptData.url_params,
dataNamespace: 'ppcp-blocks-editor-paypal-buttons',
components: 'buttons',
};
const BlockEditorPayPalComponent = ( { fundingSource, buttonAttributes } ) => {
const urlParams = useMemo(
() => ( {
clientId: 'test',
...config.scriptData.url_params,
dataNamespace: 'ppcp-blocks-editor-paypal-buttons',
components: 'buttons',
} ),
[]
);
const style = useMemo( () => {
const configStyle = normalizeStyleForFundingSource(
config.scriptData.button.style,
fundingSource
);
if ( buttonAttributes ) {
return {
...configStyle,
height: buttonAttributes.height
? Number( buttonAttributes.height )
: configStyle.height,
borderRadius: buttonAttributes.borderRadius
? Number( buttonAttributes.borderRadius )
: configStyle.borderRadius,
color: buttonAttributes.darkMode ? 'white' : configStyle.color,
};
}
return configStyle;
}, [ fundingSource, buttonAttributes ] );
return (
<PayPalScriptProvider options={ urlParams }>
<PayPalButtons
onClick={ ( data, actions ) => {
return false;
} }
className={ `ppc-button-container-${ fundingSource }` }
fundingSource={ fundingSource }
style={ style }
forceReRender={ [ buttonAttributes || {} ] }
onClick={ () => false }
/>
</PayPalScriptProvider>
);
@ -775,6 +807,7 @@ if ( block_enabled && config.enabled ) {
'paypal',
...config.enabledFundingSources,
] ) {
console.log( 'earlier fundingSource', fundingSource );
registerExpressPaymentMethod( {
name: `${ config.id }-${ fundingSource }`,
paymentMethodId: config.id,
@ -787,7 +820,11 @@ if ( block_enabled && config.enabled ) {
fundingSource={ fundingSource }
/>
),
edit: <BlockEditorPayPalComponent />,
edit: (
<BlockEditorPayPalComponent
fundingSource={ fundingSource }
/>
),
ariaLabel: config.title,
canMakePayment: async () => {
if ( ! paypalScriptPromise ) {