Auto-complete first and last name when using Link PM (#2457)

Author: dpaun1985

changelog.txt

@@ -6,6 +6,7 @@
 * Tweak - Remove remaining traces of old Stripe settings.
 * Add - Add Boleto expiration setting.
 * Add - Declare incompatibility with HPOS.
+* Add - Auto-complete first and last name on checkout form when using Link payment method.
 
 = 6.8.0 - 2022-09-28 =
 * Fix - Minor adjustments for Custom Order Tables compatibility.

client/blocks/upe/fields.js

@@ -85,6 +85,8 @@ const UPEField = ( {
 				state: 'components-form-token-input-1',
 				postal_code: 'shipping-postcode',
 				country: 'components-form-token-input-0',
+				first_name: 'shipping-first_name',
+				last_name: 'shipping-last_name',
 			};
 			const billingAddressFields = {
 				line1: 'billing-address_1',
@@ -93,6 +95,8 @@ const UPEField = ( {
 				state: 'components-form-token-input-3',
 				postal_code: 'billing-postcode',
 				country: 'components-form-token-input-2',
+				first_name: 'billing-first_name',
+				last_name: 'billing-last_name',
 			};
 
 			enableStripeLinkPaymentMethod( {

client/classic/upe/index.js

@@ -268,6 +268,8 @@ jQuery( function ( $ ) {
 							state: 'shipping_state',
 							postal_code: 'shipping_postcode',
 							country: 'shipping_country',
+							first_name: 'shipping_first_name',
+							last_name: 'shipping_last_name',
 						},
 						billing_fields: {
 							line1: 'billing_address_1',
@@ -276,6 +278,8 @@ jQuery( function ( $ ) {
 							state: 'billing_state',
 							postal_code: 'billing_postcode',
 							country: 'billing_country',
+							first_name: 'billing_first_name',
+							last_name: 'billing_last_name',
 						},
 					} );
 				}

client/stripe-link/index.js

@@ -52,39 +52,75 @@ const enableStripeLinkPaymentMethod = ( options ) => {
 			  };
 
 		if ( options.complete_shipping() ) {
+			const shippingNames = shippingAddress.name.split( / (.*)/s, 2 );
+			shippingAddress.address.last_name = shippingNames[ 1 ] ?? '';
+			shippingAddress.address.first_name = shippingNames[ 0 ];
+
 			fillWith( shippingAddress, options.shipping_fields.line1, 'line1' );
 			fillWith( shippingAddress, options.shipping_fields.line2, 'line2' );
 			fillWith( shippingAddress, options.shipping_fields.city, 'city' );
-			fillWith( shippingAddress, options.shipping_fields.state, 'state' );
 			fillWith(
 				shippingAddress,
-				options.shipping_fields.postal_code,
-				'postal_code'
+				options.shipping_fields.country,
+				'country'
 			);
 			fillWith(
 				shippingAddress,
-				options.shipping_fields.country,
-				'country'
+				options.shipping_fields.first_name,
+				'first_name'
+			);
+			fillWith(
+				shippingAddress,
+				options.shipping_fields.last_name,
+				'last_name'
+			);
+			jQuery(
+				'#billing_country, #billing_state, #shipping_country, #shipping_state'
+			).trigger( 'change' );
+			fillWith( shippingAddress, options.shipping_fields.state, 'state' );
+			fillWith(
+				shippingAddress,
+				options.shipping_fields.postal_code,
+				'postal_code'
 			);
 		}
 
 		if ( options.complete_billing() ) {
+			const billingNames = billingAddress.name.split( / (.*)/s, 2 );
+			billingAddress.address.last_name = billingNames[ 1 ] ?? '';
+			billingAddress.address.first_name = billingNames[ 0 ];
+
 			fillWith( billingAddress, options.billing_fields.line1, 'line1' );
 			fillWith( billingAddress, options.billing_fields.line2, 'line2' );
 			fillWith( billingAddress, options.billing_fields.city, 'city' );
-			fillWith( billingAddress, options.billing_fields.state, 'state' );
 			fillWith(
 				billingAddress,
-				options.billing_fields.postal_code,
-				'postal_code'
+				options.billing_fields.country,
+				'country'
 			);
 			fillWith(
 				billingAddress,
-				options.billing_fields.country,
-				'country'
+				options.billing_fields.first_name,
+				'first_name'
+			);
+			fillWith(
+				billingAddress,
+				options.billing_fields.last_name,
+				'last_name'
+			);
+			jQuery(
+				'#billing_country, #billing_state, #shipping_country, #shipping_state'
+			).trigger( 'change' );
+			fillWith( billingAddress, options.billing_fields.state, 'state' );
+			fillWith(
+				billingAddress,
+				options.billing_fields.postal_code,
+				'postal_code'
 			);
 		}
-		jQuery( 'select' ).trigger( 'change' );
+		jQuery(
+			'#billing_country, #billing_state, #shipping_country, #shipping_state'
+		).trigger( 'change' );
 	} );
 };
 

readme.txt

@@ -129,5 +129,6 @@ If you get stuck, you can ask for help in the Plugin Forum.
 == Changelog ==
 
 = 7.0.0 - 2022-xx-xx =
+* Add - Auto-complete first and last name on checkout form when using Link payment method.
 
 [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).