Merge branch 'fastlane' of github.com:woocommerce/woocommerce-paypal-payments into axo-blocks-additional-minor-code-cleanup-refactor

modules/ppcp-axo-block/resources/js/components/Card/CardChangeButton.js

@@ -1,4 +1,5 @@
 import { createElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 const CardChangeButton = ( { onChangeButtonClick } ) =>
 	createElement(
@@ -12,7 +13,7 @@ const CardChangeButton = ( { onChangeButtonClick } ) =>
 				onChangeButtonClick();
 			},
 		},
-		'Choose a different card'
+		__( 'Choose a different card', 'woocommerce-paypal-payments' )
 	);
 
 export default CardChangeButton;

modules/ppcp-axo-block/resources/js/components/EmailButton/EmailButton.js

@@ -1,5 +1,6 @@
 import { STORE_NAME } from '../../stores/axoStore';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 const EmailButton = ( { handleSubmit } ) => {
 	const { isGuest, isAxoActive, isEmailSubmitted } = useSelect(
@@ -29,7 +30,7 @@ const EmailButton = ( { handleSubmit } ) => {
 					visibility: isEmailSubmitted ? 'hidden' : 'visible',
 				} }
 			>
-				Continue
+				{ __( 'Continue', 'woocommerce-paypal-payments' ) }
 			</span>
 			{ isEmailSubmitted && (
 				<span

modules/ppcp-axo-block/resources/js/components/Payment/Payment.js

@@ -1,9 +1,11 @@
-import { useEffect, useCallback } from '@wordpress/element';
+import { useEffect, useCallback, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 import { Card } from '../Card';
 import { STORE_NAME } from '../../stores/axoStore';
 
 export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
+	const [ isCardElementReady, setIsCardElementReady ] = useState( false );
 	const { isGuest, isEmailLookupCompleted } = useSelect(
 		( select ) => ( {
 			isGuest: select( STORE_NAME ).getIsGuest(),
@@ -14,14 +16,26 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
 	);
 
 	const loadPaymentComponent = useCallback( async () => {
-		if ( isGuest && isEmailLookupCompleted ) {
+		if ( isGuest && isEmailLookupCompleted && isCardElementReady ) {
 			const paymentComponent = await fastlaneSdk.FastlaneCardComponent(
 				{}
 			);
 			paymentComponent.render( `#fastlane-card` );
 			onPaymentLoad( paymentComponent );
 		}
-	}, [ isGuest, isEmailLookupCompleted, fastlaneSdk, onPaymentLoad ] );
+	}, [
+		isGuest,
+		isEmailLookupCompleted,
+		isCardElementReady,
+		fastlaneSdk,
+		onPaymentLoad,
+	] );
+
+	useEffect( () => {
+		if ( isGuest && isEmailLookupCompleted ) {
+			setIsCardElementReady( true );
+		}
+	}, [ isGuest, isEmailLookupCompleted ] );
 
 	useEffect( () => {
 		loadPaymentComponent();
@@ -33,7 +47,10 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
 		}
 		return (
 			<div id="ppcp-axo-block-radio-content">
-				Enter your email address above to continue.
+				{ __(
+					'Enter your email address above to continue.',
+					'woocommerce-paypal-payments'
+				) }
 			</div>
 		);
 	}

modules/ppcp-axo-block/resources/js/components/Shipping/ShippingChangeButton.js

@@ -1,3 +1,5 @@
+import { __ } from '@wordpress/i18n';
+
 const ShippingChangeButton = ( { onChangeShippingAddressClick } ) => (
 	<a
 		className="wc-block-axo-change-link"
@@ -7,7 +9,10 @@ const ShippingChangeButton = ( { onChangeShippingAddressClick } ) => (
 			onChangeShippingAddressClick();
 		} }
 	>
-		Choose a different shipping address
+		{ __(
+			'Choose a different shipping address',
+			'woocommerce-paypal-payments'
+		) }
 	</a>
 );
 

modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js

@@ -83,10 +83,16 @@ export const populateWooFields = (
 		profileData
 	);
 
-	// Disable the 'Use same address for billing' checkbox
+	const checkoutDispatch = dispatch( CHECKOUT_STORE_KEY );
-	dispatch( CHECKOUT_STORE_KEY ).__internalSetUseShippingAsBilling( false );
 
-	// Save shipping address
+	// Uncheck the 'Use same address for billing' checkbox if the method exists.
+	if (
+		typeof checkoutDispatch.__internalSetUseShippingAsBilling === 'function'
+	) {
+		checkoutDispatch.__internalSetUseShippingAsBilling( false );
+	}
+
+	// Save shipping address.
 	const { address, name, phoneNumber } = profileData.shippingAddress;
 
 	const shippingAddress = {
@@ -104,7 +110,7 @@ export const populateWooFields = (
 	console.log( 'Setting WooCommerce shipping address:', shippingAddress );
 	setWooShippingAddress( shippingAddress );
 
-	// Save billing address
+	// Save billing address.
 	const billingData = profileData.card.paymentSource.card.billingAddress;
 
 	const billingAddress = {
@@ -121,6 +127,13 @@ export const populateWooFields = (
 	console.log( 'Setting WooCommerce billing address:', billingAddress );
 	setWooBillingAddress( billingAddress );
 
-	dispatch( CHECKOUT_STORE_KEY ).setEditingShippingAddress( false );
+	// Collapse shipping address input fields into the card view.
-	dispatch( CHECKOUT_STORE_KEY ).setEditingBillingAddress( false );
+	if ( typeof checkoutDispatch.setEditingShippingAddress === 'function' ) {
+		checkoutDispatch.setEditingShippingAddress( false );
+	}
+
+	// Collapse billing address input fields into the card view.
+	if ( typeof checkoutDispatch.setEditingBillingAddress === 'function' ) {
+		checkoutDispatch.setEditingBillingAddress( false );
+	}
 };

modules/ppcp-axo-block/resources/js/hooks/useAddressEditing.js

@@ -24,14 +24,18 @@ export const useAddressEditing = () => {
 
 	const setShippingAddressEditing = useCallback(
 		( isEditing ) => {
+			if ( typeof setEditingShippingAddress === 'function' ) {
 				setEditingShippingAddress( isEditing );
+			}
 		},
 		[ setEditingShippingAddress ]
 	);
 
 	const setBillingAddressEditing = useCallback(
 		( isEditing ) => {
+			if ( typeof setEditingBillingAddress === 'function' ) {
 				setEditingBillingAddress( isEditing );
+			}
 		},
 		[ setEditingBillingAddress ]
 	);

modules/ppcp-axo-block/resources/js/hooks/useDeleteEmptyKeys.js

@@ -0,0 +1,27 @@
+import { useCallback } from '@wordpress/element';
+
+const isObject = ( value ) => typeof value === 'object' && value !== null;
+const isNonEmptyString = ( value ) => value !== '';
+
+const removeEmptyValues = ( obj ) => {
+	if ( ! isObject( obj ) ) {
+		return obj;
+	}
+
+	return Object.fromEntries(
+		Object.entries( obj )
+			.map( ( [ key, value ] ) => [
+				key,
+				isObject( value ) ? removeEmptyValues( value ) : value,
+			] )
+			.filter( ( [ _, value ] ) =>
+				isObject( value )
+					? Object.keys( value ).length > 0
+					: isNonEmptyString( value )
+			)
+	);
+};
+
+export const useDeleteEmptyKeys = () => {
+	return useCallback( removeEmptyValues, [] );
+};

modules/ppcp-axo-block/resources/js/hooks/useFastlaneSdk.js

@@ -1,11 +1,17 @@
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
 import Fastlane from '../../../../ppcp-axo/resources/js/Connection/Fastlane';
 import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
+import { useDeleteEmptyKeys } from './useDeleteEmptyKeys';
 
 const useFastlaneSdk = ( axoConfig, ppcpConfig ) => {
 	const [ fastlaneSdk, setFastlaneSdk ] = useState( null );
 	const initializingRef = useRef( false );
 	const configRef = useRef( { axoConfig, ppcpConfig } );
+	const deleteEmptyKeys = useDeleteEmptyKeys();
+
+	const styleOptions = useMemo( () => {
+		return deleteEmptyKeys( configRef.current.axoConfig.style_options );
+	}, [ deleteEmptyKeys ] );
 
 	useEffect( () => {
 		const initFastlane = async () => {
@@ -25,7 +31,7 @@ const useFastlaneSdk = ( axoConfig, ppcpConfig ) => {
 
 				await fastlane.connect( {
 					locale: configRef.current.ppcpConfig.locale,
-					styles: configRef.current.ppcpConfig.styles,
+					styles: styleOptions,
 				} );
 
 				fastlane.setLocale( 'en_us' );
@@ -39,7 +45,7 @@ const useFastlaneSdk = ( axoConfig, ppcpConfig ) => {
 		};
 
 		initFastlane();
-	}, [] );
+	}, [ fastlaneSdk, styleOptions ] );
 
 	useEffect( () => {
 		configRef.current = { axoConfig, ppcpConfig };

modules/ppcp-axo-block/resources/js/index.js

@@ -1,4 +1,5 @@
-import { useState } from '@wordpress/element';
+import { useState, createElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { registerPaymentMethod } from '@woocommerce/blocks-registry';
 
 // Hooks
@@ -50,7 +51,7 @@ const Axo = ( props ) => {
 			onPaymentLoad={ handlePaymentLoad }
 		/>
 	) : (
-		<div>Loading Fastlane...</div>
+		<>{ __( 'Loading Fastlane…', 'woocommerce-paypal-payments' ) }</>
 	);
 };
 
@@ -63,7 +64,7 @@ registerPaymentMethod( {
 		/>
 	),
 	content: <Axo />,
-	edit: <h1>This is Axo Blocks in the editor</h1>,
+	edit: createElement( ppcpConfig.title ),
 	ariaLabel: ppcpConfig.title,
 	canMakePayment: () => true,
 	supports: {

modules/ppcp-axo-block/src/AxoBlockPaymentMethod.php

@@ -243,7 +243,6 @@ class AxoBlockPaymentMethod extends AbstractPaymentMethodType {
 			),
 			'logging_enabled'           => $this->settings->has( 'logging_enabled' ) ? $this->settings->get( 'logging_enabled' ) : '',
 			'wp_debug'                  => defined( 'WP_DEBUG' ) && WP_DEBUG,
-			'billing_email_button_text' => __( 'Continue', 'woocommerce-paypal-payments' ),
 		);
 	}
 }