♻️ Improve PayerData module

modules/ppcp-button/resources/js/modules/Helper/PayerData.js

@@ -2,38 +2,38 @@
  * Name details.
  *
  * @typedef {Object} NameDetails
- * @property {?string} given_name - First name, e.g. "John".
+ * @property {string} [given_name] - First name, e.g. "John".
- * @property {?string} surname    - Last name, e.g. "Doe".
+ * @property {string} [surname]    - Last name, e.g. "Doe".
  */
 
 /**
  * Postal address details.
  *
  * @typedef {Object} AddressDetails
- * @property {undefined|string} country_code   - Country code (2-letter).
+ * @property {string} [country_code]   - Country code (2-letter).
- * @property {undefined|string} address_line_1 - Address details, line 1 (street, house number).
+ * @property {string} [address_line_1] - Address details, line 1 (street, house number).
- * @property {undefined|string} address_line_2 - Address details, line 2.
+ * @property {string} [address_line_2] - Address details, line 2.
- * @property {undefined|string} admin_area_1   - State or region.
+ * @property {string} [admin_area_1]   - State or region.
- * @property {undefined|string} admin_area_2   - State or region.
+ * @property {string} [admin_area_2]   - State or region.
- * @property {undefined|string} postal_code    - Zip code.
+ * @property {string} [postal_code]    - Zip code.
  */
 
 /**
  * Phone details.
  *
  * @typedef {Object} PhoneDetails
- * @property {undefined|string}                    phone_type   - Type, usually 'HOME'
+ * @property {string}                    [phone_type]   - Type, usually 'HOME'
- * @property {undefined|{national_number: string}} phone_number - Phone number details.
+ * @property {{national_number: string}} [phone_number] - Phone number details.
  */
 
 /**
  * Payer details.
  *
  * @typedef {Object} PayerDetails
- * @property {undefined|string}         email_address - Email address for billing communication.
+ * @property {string}         [email_address] - Email address for billing communication.
- * @property {undefined|PhoneDetails}   phone         - Phone number for billing communication.
+ * @property {PhoneDetails}   [phone]         - Phone number for billing communication.
- * @property {undefined|NameDetails}    name          - Payer's name.
+ * @property {NameDetails}    [name]          - Payer's name.
- * @property {undefined|AddressDetails} address       - Postal billing address.
+ * @property {AddressDetails} [address]       - Postal billing address.
  */
 
 // Map checkout fields to PayerData object properties.
@@ -50,123 +50,147 @@ const FIELD_MAP = {
 	'#billing_phone': [ 'phone' ],
 };
 
-/**
+function normalizePayerDetails( details ) {
- * Returns billing details from the checkout form or global JS object.
+	return {
- *
+		email_address: details.email_address,
- * @return {?PayerDetails} Full billing details, or null on failure.
+		phone: details.phone,
- */
+		name: {
-export function payerData() {
+			surname: details.name?.surname,
-	/**
+			given_name: details.name?.given_name,
-	 * PayPalCommerceGateway.payer can be set from server-side or via JS:
+		},
-	 * - Server-side: Set by PHP when a WC customer is known.
+		address: {
-	 * - Dynamic JS: When a payment method provided billing data.
+			country_code: details.address?.country_code,
-	 *
+			address_line_1: details.address?.address_line_1,
-	 * @see {setPayerData}
+			address_line_2: details.address?.address_line_2,
-	 */
+			admin_area_1: details.address?.admin_area_1,
-	const payer = window.PayPalCommerceGateway?.payer;
+			admin_area_2: details.address?.admin_area_2,
-	if ( ! payer ) {
+			postal_code: details.address?.postal_code,
-		return null;
+		},
-	}
+	};
+}
 
+function mergePayerDetails( firstPayer, secondPayer ) {
+	const mergeNestedObjects = ( target, source ) => {
+		for ( const [ key, value ] of Object.entries( source ) ) {
+			if ( null !== value && undefined !== value ) {
+				if ( 'object' === typeof value ) {
+					target[ key ] = mergeNestedObjects(
+						target[ key ] || {},
+						value
+					);
+				} else {
+					target[ key ] = value;
+				}
+			}
+		}
+		return target;
+	};
+
+	return mergeNestedObjects(
+		normalizePayerDetails( firstPayer ),
+		normalizePayerDetails( secondPayer )
+	);
+}
+
+function getCheckoutBillingDetails() {
 	const getElementValue = ( selector ) =>
 		document.querySelector( selector )?.value;
 
-	// Initialize data with existing payer values.
+	const setNestedValue = ( obj, path, value ) => {
-	const data = {
+		let current = obj;
-		email_address: payer.email_address,
+		for ( let i = 0; i < path.length - 1; i++ ) {
-		phone: payer.phone,
+			current = current[ path[ i ] ] = current[ path[ i ] ] || {};
-		name: {
+		}
-			surname: payer.name?.surname,
+		current[ path[ path.length - 1 ] ] = value;
-			given_name: payer.name?.given_name,
-		},
-		address: {
-			country_code: payer.address?.country_code,
-			address_line_1: payer.address?.address_line_1,
-			address_line_2: payer.address?.address_line_2,
-			admin_area_1: payer.address?.admin_area_1,
-			admin_area_2: payer.address?.admin_area_2,
-			postal_code: payer.address?.postal_code,
-		},
 	};
 
-	// Update data with DOM values where they exist.
+	const data = {};
+
 	Object.entries( FIELD_MAP ).forEach( ( [ selector, path ] ) => {
 		const value = getElementValue( selector );
 		if ( value ) {
-			let current = data;
+			setNestedValue( data, path, value );
-			path.slice( 0, -1 ).forEach( ( key ) => {
-				current = current[ key ] = current[ key ] || {};
-			} );
-			current[ path[ path.length - 1 ] ] = value;
 		}
 	} );
 
-	// Handle phone separately due to its nested structure.
+	if ( data.phone && 'string' === typeof data.phone ) {
-	const phoneNumber = data.phone;
-	if ( phoneNumber && typeof phoneNumber === 'string' ) {
 		data.phone = {
 			phone_type: 'HOME',
-			phone_number: { national_number: phoneNumber },
+			phone_number: { national_number: data.phone },
 		};
 	}
 
 	return data;
 }
 
-/**
+function setCheckoutBillingDetails( payer ) {
- * Updates the DOM with specific payer details.
- *
- * Used by payment method callbacks that provide dedicated billing details, like Google Pay.
- * Note: This code only works on classic checkout
- *
- * @param {PayerDetails} newData                   - New payer details.
- * @param {boolean}      [overwriteExisting=false] - If set to true, all provided values will
- *                                                 replace existing details. If false, or omitted,
- *                                                 only undefined fields are updated.
- */
-export function setPayerData( newData, overwriteExisting = false ) {
 	const setValue = ( path, field, value ) => {
 		if ( null === value || undefined === value || ! field ) {
 			return;
 		}
 
-		if ( path[ 0 ] === 'phone' && typeof value === 'object' ) {
+		if ( 'phone' === path[ 0 ] && 'object' === typeof value ) {
 			value = value.phone_number?.national_number;
 		}
 
-		if ( overwriteExisting || ! field.value ) {
+		field.value = value;
-			field.value = value;
-		}
 	};
 
+	const getNestedValue = ( obj, path ) =>
+		path.reduce( ( current, key ) => current?.[ key ], obj );
+
 	Object.entries( FIELD_MAP ).forEach( ( [ selector, path ] ) => {
-		const value = path.reduce( ( obj, key ) => obj?.[ key ], newData );
+		const value = getNestedValue( payer, path );
 		const element = document.querySelector( selector );
 
 		setValue( path, element, value );
 	} );
+}
 
-	/*
+export function getWooCommerceCustomerDetails() {
-	 * Persist the payer details to the global JS object, to make it available in other modules
+	// Populated on server-side with details about the current WooCommerce customer.
-	 * via tha `payerData()` accessor.
+	return window.PayPalCommerceGateway?.payer ?? null;
-	 */
+}
-	window.PayPalCommerceGateway.payer =
-		window.PayPalCommerceGateway.payer || {};
-	const currentPayerData = payerData();
 
-	if ( currentPayerData ) {
+export function getSessionCustomerDetails() {
-		Object.entries( newData ).forEach( ( [ key, value ] ) => {
+	// Populated by JS via `setSessionCustomerDetails()`
-			if (
+	return window.PayPalCommerceGateway?.sessionPayer ?? null;
-				overwriteExisting ||
+}
-				null !== currentPayerData[ key ] ||
-				undefined !== currentPayerData[ key ]
-			) {
-				currentPayerData[ key ] = value;
-			}
-		} );
 
-		window.PayPalCommerceGateway.payer = currentPayerData;
+/**
-	} else {
+ * Stores customer details in the current JS context for use in the same request.
-		window.PayPalCommerceGateway.payer = newData;
+ * Details that are set are not persisted during navigation.
+ *
+ * @param {unknown} details - New payer details
+ */
+export function setSessionCustomerDetails( details ) {
+	if ( details && 'object' === typeof details ) {
+		window.PayPalCommerceGateway.sessionPayer =
+			normalizePayerDetails( details );
+	}
+}
+
+export function payerData() {
+	const payer =
+		getWooCommerceCustomerDetails() ?? getSessionCustomerDetails();
+
+	if ( ! payer ) {
+		return null;
+	}
+
+	const formData = getCheckoutBillingDetails();
+
+	if ( formData ) {
+		return mergePayerDetails( payer, formData );
+	}
+
+	return normalizePayerDetails( payer );
+}
+
+export function setPayerData( newData, updateCheckout = false ) {
+	setSessionCustomerDetails( newData );
+
+	if ( updateCheckout ) {
+		setCheckoutBillingDetails( newData );
 	}
 }