Skip to content

Commit 8708396

Browse files
authored
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
1 parent a1965e2 commit 8708396

File tree

2 files changed

+13
-4
lines changed

2 files changed

+13
-4
lines changed

client/my-sites/checkout/composite-checkout/components/contact-details-container.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22
* External dependencies
33
*/
44
import React from 'react';
5-
import styled from '@emotion/styled';
65
import { useSelect, useDispatch } from '@automattic/composite-checkout';
76
import { useTranslate } from 'i18n-calypso';
87
import { useShoppingCart } from '@automattic/shopping-cart';
98
import type { ContactDetailsType, ManagedContactDetails } from '@automattic/wpcom-checkout';
10-
import { Field } from '@automattic/wpcom-checkout';
9+
import { Field, styled } from '@automattic/wpcom-checkout';
1110

1211
/**
1312
* Internal dependencies

client/my-sites/checkout/composite-checkout/components/tax-fields.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
66
import styled from '@emotion/styled';
77
import { useTranslate } from 'i18n-calypso';
88
import type { ManagedContactDetails } from '@automattic/wpcom-checkout';
9-
import { Field } from '@automattic/wpcom-checkout';
9+
import { Field, tryToGuessPostalCodeFormat } from '@automattic/wpcom-checkout';
1010

1111
/**
1212
* Internal dependencies
@@ -61,7 +61,11 @@ export default function TaxFields( {
6161
label={ String( translate( 'Postal code' ) ) }
6262
value={ postalCode?.value ?? '' }
6363
disabled={ isDisabled }
64-
onChange={ updatePostalCode }
64+
onChange={ ( newValue ) =>
65+
updatePostalCode(
66+
tryToGuessPostalCodeFormat( newValue.toUpperCase(), countryCode?.value )
67+
)
68+
}
6569
autoComplete={ section + ' postal-code' }
6670
isError={ postalCode?.isTouched && ! isValid( postalCode ) }
6771
errorMessage={ String( translate( 'This field is required.' ) ) }
@@ -73,6 +77,12 @@ export default function TaxFields( {
7377
translate={ translate }
7478
onChange={ ( event: React.ChangeEvent< HTMLInputElement > ) => {
7579
updateCountryCode( event.target.value );
80+
// Reformat the postal code if the country changes
81+
if ( postalCode ) {
82+
updatePostalCode(
83+
tryToGuessPostalCodeFormat( postalCode?.value, event.target.value )
84+
);
85+
}
7686
} }
7787
isError={ countryCode?.isTouched && ! isValid( countryCode ) }
7888
isDisabled={ isDisabled }

0 commit comments

Comments
 (0)