Merge pull request #2872 from woocommerce/PCP-3939-cannot-be-zero-or-…

…negative-with-express-checkout-for-free-trial-subscriptions-on-block-checkout "CANNOT_BE_ZERO_OR_NEGATIVE" with Express Checkout for Free Trial Subscriptions on Block checkout (3939)
woocommerce · Dec 23, 2024 · 9af375b · 9af375b
2 parents 6115ffb + 83b637c
commit 9af375b
Show file tree

Hide file tree

Showing 8 changed files with 952 additions and 774 deletions.
diff --git a/modules/ppcp-blocks/resources/js/Components/block-editor-paypal.js b/modules/ppcp-blocks/resources/js/Components/block-editor-paypal.js
@@ -0,0 +1,52 @@
+import { useMemo } from '@wordpress/element';
+import { normalizeStyleForFundingSource } from '../../../../ppcp-button/resources/js/modules/Helper/Style';
+import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
+
+export const BlockEditorPayPalComponent = ( {
+	config,
+	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,
+			};
+		}
+
+		return configStyle;
+	}, [ fundingSource, buttonAttributes ] );
+
+	return (
+		<PayPalScriptProvider options={ urlParams }>
+			<PayPalButtons
+				className={ `ppc-button-container-${ fundingSource }` }
+				fundingSource={ fundingSource }
+				style={ style }
+				forceReRender={ [ buttonAttributes || {} ] }
+				onClick={ () => false }
+			/>
+		</PayPalScriptProvider>
+	);
+};
diff --git a/modules/ppcp-blocks/resources/js/Components/card-fields.js b/modules/ppcp-blocks/resources/js/Components/card-fields.js
@@ -3,10 +3,10 @@ import { useEffect, useState } from '@wordpress/element';
 import {
 	PayPalScriptProvider,
 	PayPalCardFieldsProvider,
-    PayPalNameField,
-    PayPalNumberField,
-    PayPalExpiryField,
-    PayPalCVVField,
+	PayPalNameField,
+	PayPalNumberField,
+	PayPalExpiryField,
+	PayPalCVVField,
 } from '@paypal/react-paypal-js';
 
 import { CheckoutHandler } from './checkout-handler';
@@ -19,11 +19,7 @@ import {
 import { cartHasSubscriptionProducts } from '../Helper/Subscription';
 import { __ } from '@wordpress/i18n';
 
-export function CardFields( {
-	config,
-	eventRegistration,
-	emitResponse,
-} ) {
+export function CardFields( { config, eventRegistration, emitResponse } ) {
 	const { onPaymentSetup } = eventRegistration;
 	const { responseTypes } = emitResponse;
 
@@ -96,16 +92,36 @@ export function CardFields( {
 						console.error( err );
 					} }
 				>
-                    <PayPalNameField placeholder={ __( 'Cardholder Name (optional)', 'woocommerce-paypal-payments' ) }/>
-                    <PayPalNumberField placeholder={ __( 'Card number', 'woocommerce-paypal-payments' ) }/>
-                    <div style={ { display: "flex", width: "100%" } }>
-                        <div style={ { width: "100%" } }>
-                            <PayPalExpiryField placeholder={ __( 'MM / YY', 'woocommerce-paypal-payments' ) }/>
-                        </div>
-                        <div style={ { width: "100%" } }>
-                            <PayPalCVVField placeholder={ __( 'CVV', 'woocommerce-paypal-payments' ) }/>
-                        </div>
-                    </div>
+					<PayPalNameField
+						placeholder={ __(
+							'Cardholder Name (optional)',
+							'woocommerce-paypal-payments'
+						) }
+					/>
+					<PayPalNumberField
+						placeholder={ __(
+							'Card number',
+							'woocommerce-paypal-payments'
+						) }
+					/>
+					<div style={ { display: 'flex', width: '100%' } }>
+						<div style={ { width: '100%' } }>
+							<PayPalExpiryField
+								placeholder={ __(
+									'MM / YY',
+									'woocommerce-paypal-payments'
+								) }
+							/>
+						</div>
+						<div style={ { width: '100%' } }>
+							<PayPalCVVField
+								placeholder={ __(
+									'CVV',
+									'woocommerce-paypal-payments'
+								) }
+							/>
+						</div>
+					</div>
 					<CheckoutHandler
 						getCardFieldsForm={ getCardFieldsForm }
 						getSavePayment={ getSavePayment }

diff --git a/modules/ppcp-blocks/resources/js/Components/paypal-label.js b/modules/ppcp-blocks/resources/js/Components/paypal-label.js
@@ -0,0 +1,14 @@
+export const PaypalLabel = ( { components, config } ) => {
+	const { PaymentMethodIcons } = components;
+
+	return (
+		<>
+			<span
+				dangerouslySetInnerHTML={ {
+					__html: config.title,
+				} }
+			/>
+			<PaymentMethodIcons icons={ config.icon } align="right" />
+		</>
+	);
+};