Checkout: Format postalCode in TaxFields (#52475)

* Run tryToGuessPostalCodeFormat on TaxFields postalCode * Fix theme errors in ContactDetailsContainer by using custom styled * Reformat the postal code if the country changes
Automattic · May 3, 2021 · 8708396 · 8708396
1 parent a1965e2
commit 8708396
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/client/my-sites/checkout/composite-checkout/components/contact-details-container.tsx b/client/my-sites/checkout/composite-checkout/components/contact-details-container.tsx
@@ -2,12 +2,11 @@
  * External dependencies
  */
 import React from 'react';
-import styled from '@emotion/styled';
 import { useSelect, useDispatch } from '@automattic/composite-checkout';
 import { useTranslate } from 'i18n-calypso';
 import { useShoppingCart } from '@automattic/shopping-cart';
 import type { ContactDetailsType, ManagedContactDetails } from '@automattic/wpcom-checkout';
-import { Field } from '@automattic/wpcom-checkout';
+import { Field, styled } from '@automattic/wpcom-checkout';
 
 /**
  * Internal dependencies

diff --git a/client/my-sites/checkout/composite-checkout/components/tax-fields.tsx b/client/my-sites/checkout/composite-checkout/components/tax-fields.tsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { useTranslate } from 'i18n-calypso';
 import type { ManagedContactDetails } from '@automattic/wpcom-checkout';
-import { Field } from '@automattic/wpcom-checkout';
+import { Field, tryToGuessPostalCodeFormat } from '@automattic/wpcom-checkout';
 
 /**
  * Internal dependencies
@@ -61,7 +61,11 @@ export default function TaxFields( {
 					label={ String( translate( 'Postal code' ) ) }
 					value={ postalCode?.value ?? '' }
 					disabled={ isDisabled }
-					onChange={ updatePostalCode }
+					onChange={ ( newValue ) =>
+						updatePostalCode(
+							tryToGuessPostalCodeFormat( newValue.toUpperCase(), countryCode?.value )
+						)
+					}
 					autoComplete={ section + ' postal-code' }
 					isError={ postalCode?.isTouched && ! isValid( postalCode ) }
 					errorMessage={ String( translate( 'This field is required.' ) ) }
@@ -73,6 +77,12 @@ export default function TaxFields( {
 					translate={ translate }
 					onChange={ ( event: React.ChangeEvent< HTMLInputElement > ) => {
 						updateCountryCode( event.target.value );
+						// Reformat the postal code if the country changes
+						if ( postalCode ) {
+							updatePostalCode(
+								tryToGuessPostalCodeFormat( postalCode?.value, event.target.value )
+							);
+						}
 					} }
 					isError={ countryCode?.isTouched && ! isValid( countryCode ) }
 					isDisabled={ isDisabled }