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

🚧 First implementation of button preview

Browse source
This commit is contained in:
Philipp Stracker 2025-01-17 15:52:51 +01:00
parent fd8feafd46
commit 0ecba128fb
No known key found for this signature in database
2 changed files with 42 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss
View file

@ -90,6 +90,10 @@
padding: 24px;
height: calc(100vh - var(--preview-height-reduction));
top: var(--sticky-offset-top);
// Disable interactions with the preview.
pointer-events: none;
user-select: none;
}
}
}

48
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/PreviewPanel.js
View file

@ -1,22 +1,50 @@
import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
import { STYLING_PAYMENT_METHODS, StylingHooks } from '../../../../../data';
import { useMemo } from '@wordpress/element';
const PREVIEW_CLIENT_ID = 'test';
const PREVIEW_MERCHANT_ID = 'QTQX5NP6N9WZU';
const PreviewPanel = ( { location } ) => {
// TODO: Make those props dynamic based on location style settings.
const style = {};
const components = [ 'buttons', 'googlepay' ];
const { paymentMethods } = StylingHooks.usePaymentMethodProps( location );
const { layout } = StylingHooks.useLayoutProps( location );
const { shape } = StylingHooks.useShapeProps( location );
const { label } = StylingHooks.useLabelProps( location );
const { color } = StylingHooks.useColorProps( location );
const { tagline } = StylingHooks.useTaglineProps( location );
const providerOptions = {
clientId: PREVIEW_CLIENT_ID,
merchantId: PREVIEW_MERCHANT_ID,
components: components.join( ',' ),
'disable-funding': 'card',
'buyer-country': 'US',
currency: 'USD',
const style = {
layout,
shape,
label,
color,
tagline,
};
const disableFunding = useMemo( () => {
const disabled = [ 'card' ];
Object.values( STYLING_PAYMENT_METHODS )
.filter( ( method ) => method.isFunding )
.filter( ( method ) => ! paymentMethods.includes( method.value ) )
.forEach( ( method ) => {
disabled.push( method.value );
} );
return disabled;
}, [ paymentMethods ] );
// TODO: Changes in the providerOptions are not reflected on the page.
const providerOptions = useMemo(
() => ( {
clientId: PREVIEW_CLIENT_ID,
merchantId: PREVIEW_MERCHANT_ID,
components: 'buttons',
'disable-funding': disableFunding.join( ',' ),
'buyer-country': 'US', // Todo: simulate shop country here?
currency: 'USD',
} ),
[ disableFunding ]
);
return (
<div className="preview-panel">
<div className="preview-panel-inner">