Broaden billing field queries from form-scoped to document-scoped (#1…

…0134)

Co-authored-by: Timur Karimov <[email protected]>

changelog/fix-scope-out-billing-fields-selectors

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Broaden billing field queries from form-scoped to document-scoped

client/checkout/classic/event-handlers.js

@@ -76,7 +76,7 @@ jQuery( function ( $ ) {
 	} );
 
 	$checkoutForm.on( generateCheckoutEventNames(), function () {
-		if ( isBillingInformationMissing( this ) ) {
+		if ( isBillingInformationMissing() ) {
 			return;
 		}
 

client/checkout/utils/test/upe.test.js

@@ -36,6 +36,7 @@ function buildForm( fields ) {
 		input.value = field.value;
 		form.appendChild( input );
 	} );
+	document.body.appendChild( form );
 	return form;
 }
 
@@ -57,6 +58,11 @@ describe( 'UPE checkout utils', () => {
 		} );
 
 		beforeEach( () => {
+			const existingCheckoutForm = document.querySelector( 'form' );
+			if ( existingCheckoutForm ) {
+				existingCheckoutForm.remove();
+			}
+
 			getUPEConfig.mockImplementation( ( argument ) => {
 				if ( argument === 'enabledBillingFields' ) {
 					return {
@@ -99,7 +105,7 @@ describe( 'UPE checkout utils', () => {
 		} );
 
 		it( 'should return false when the billing information is not missing', () => {
-			const form = buildForm( [
+			buildForm( [
 				{ id: 'billing_first_name', value: 'Test' },
 				{ id: 'billing_last_name', value: 'User' },
 				{ id: 'billing_email', value: '[email protected]' },
@@ -108,11 +114,11 @@ describe( 'UPE checkout utils', () => {
 				{ id: 'billing_city', value: 'Anytown' },
 				{ id: 'billing_postcode', value: '12345' },
 			] );
-			expect( isBillingInformationMissing( form ) ).toBe( false );
+			expect( isBillingInformationMissing() ).toBe( false );
 		} );
 
 		it( 'should return true when the billing information is missing', () => {
-			const form = buildForm( [
+			buildForm( [
 				{ id: 'billing_first_name', value: 'Test' },
 				{ id: 'billing_last_name', value: 'User' },
 				{ id: 'billing_email', value: '[email protected]' },
@@ -121,11 +127,11 @@ describe( 'UPE checkout utils', () => {
 				{ id: 'billing_city', value: 'Anytown' },
 				{ id: 'billing_postcode', value: '' },
 			] );
-			expect( isBillingInformationMissing( form ) ).toBe( true );
+			expect( isBillingInformationMissing() ).toBe( true );
 		} );
 
 		it( 'should use the defaults when there is no specific locale data for a country', () => {
-			const form = buildForm( [
+			buildForm( [
 				{ id: 'billing_first_name', value: 'Test' },
 				{ id: 'billing_last_name', value: 'User' },
 				{ id: 'billing_email', value: '[email protected]' },
@@ -134,11 +140,11 @@ describe( 'UPE checkout utils', () => {
 				{ id: 'billing_city', value: 'Anytown' },
 				{ id: 'billing_postcode', value: '' },
 			] );
-			expect( isBillingInformationMissing( form ) ).toBe( true );
+			expect( isBillingInformationMissing() ).toBe( true );
 		} );
 
 		it( 'should return false when the locale data for a country has no required fields', () => {
-			const form = buildForm( [
+			buildForm( [
 				{ id: 'billing_first_name', value: 'Test' },
 				{ id: 'billing_last_name', value: 'User' },
 				{ id: 'billing_email', value: '[email protected]' },
@@ -147,7 +153,7 @@ describe( 'UPE checkout utils', () => {
 				{ id: 'billing_city', value: 'Anytown' },
 				{ id: 'billing_postcode', value: '' },
 			] );
-			expect( isBillingInformationMissing( form ) ).toBe( true );
+			expect( isBillingInformationMissing() ).toBe( true );
 		} );
 	} );
 

client/checkout/utils/upe.js

@@ -404,17 +404,18 @@ function getParsedLocale() {
 	}
 }
 
-export const isBillingInformationMissing = ( form ) => {
+export const isBillingInformationMissing = () => {
 	const enabledBillingFields = getUPEConfig( 'enabledBillingFields' );
 
 	// first name and last name are kinda special - we just need one of them to be at checkout
 	const name = `${
-		form.querySelector(
+		document.querySelector(
 			`#${ SHORTCODE_BILLING_ADDRESS_FIELDS.first_name }`
 		)?.value || ''
 	} ${
-		form.querySelector( `#${ SHORTCODE_BILLING_ADDRESS_FIELDS.last_name }` )
-			?.value || ''
+		document.querySelector(
+			`#${ SHORTCODE_BILLING_ADDRESS_FIELDS.last_name }`
+		)?.value || ''
 	}`.trim();
 	if (
 		! name &&
@@ -435,14 +436,15 @@ export const isBillingInformationMissing = ( form ) => {
 	const country = billingFieldsToValidate.includes(
 		SHORTCODE_BILLING_ADDRESS_FIELDS.country
 	)
-		? form.querySelector( `#${ SHORTCODE_BILLING_ADDRESS_FIELDS.country }` )
-				?.value
+		? document.querySelector(
+				`#${ SHORTCODE_BILLING_ADDRESS_FIELDS.country }`
+		  )?.value
 		: null;
 
 	// We need to just find one field with missing information. If even only one is missing, just return early.
 	return Boolean(
 		billingFieldsToValidate.find( ( fieldName ) => {
-			const field = form.querySelector( `#${ fieldName }` );
+			const field = document.querySelector( `#${ fieldName }` );
 			let isRequired = enabledBillingFields[ fieldName ]?.required;
 			const locale = getParsedLocale();