PWA-3139::Region is required in PWA although this option is disabled …

…in Magento , and is not required on normal storefront
magento · May 16, 2023 · e3a97e2 · e3a97e2
1 parent 99925fa
commit e3a97e2
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 12 deletions.
diff --git a/...outPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap b/...outPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap
@@ -351,8 +351,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -827,8 +827,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1364,8 +1364,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"

diff --git a/...eckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap b/...eckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
@@ -333,8 +333,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -800,8 +800,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1255,8 +1255,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1736,8 +1736,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"

diff --git a/...ages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js b/...ages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js
@@ -134,6 +134,18 @@ const CustomerForm = props => {
         <Text type="hidden" field="default_shipping" initialValue={true} />
     );
 
+    const createErrorMessage = JSON.stringify(
+        errors.get('createCustomerAddressMutation')
+    );
+    const updateErrorMessage = JSON.stringify(
+        errors.get('updateCustomerAddressMutation')
+    );
+    const errorMessage = 'region_id is required for the specified country code';
+    const regionError =
+        createErrorMessage?.includes(errorMessage) ||
+        updateErrorMessage?.includes(errorMessage);
+
+    // errors
     return (
         <Fragment>
             <FormError errors={Array.from(errors.values())} />
@@ -257,9 +269,10 @@ const CustomerForm = props => {
                         />
                     </Field>
                 </div>
+
                 <div className={classes.region}>
                     <Region
-                        validate={isRequired}
+                        regionError={regionError}
                         data-cy="CustomerForm-region"
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
@@ -269,7 +282,20 @@ const CustomerForm = props => {
                             defaultMessage: 'State Required'
                         })}
                     />
+                    {regionError ? (
+                        <Message>
+                            <div className={classes.regionError}>
+                                <FormattedMessage
+                                    id={'validation.isRequired'}
+                                    defaultMessage={'isRequired'}
+                                />
+                            </div>
+                        </Message>
+                    ) : (
+                        ''
+                    )}
                 </div>
+
                 <div className={classes.postcode}>
                     <Postcode
                         validate={isRequired}

diff --git a/...ia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css b/...ia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css
@@ -42,6 +42,11 @@
     composes: p-xs from global;
 }
 
+.regionError {
+    color: brown;
+    font-weight: 600;
+}
+
 @media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;

diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
@@ -126,6 +126,17 @@ const GuestForm = props => {
         }
     }, [addToast, formatMessage, showSignInToast, handleToastAction]);
 
+    const createErrorMessage = JSON.stringify(
+        errors.get('createCustomerAddressMutation')
+    );
+    const updateErrorMessage = JSON.stringify(
+        errors.get('updateCustomerAddressMutation')
+    );
+    const errorMessage = 'region_id is required for the specified country code';
+    const regionError =
+        createErrorMessage?.includes(errorMessage) ||
+        updateErrorMessage?.includes(errorMessage);
+
     return (
         <Fragment>
             <FormError errors={Array.from(errors.values())} />
@@ -308,7 +319,6 @@ const GuestForm = props => {
                             id: 'region.label',
                             defaultMessage: 'State'
                         })}
-                        validate={isRequired}
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
                         optionValueKey={'id'}
@@ -318,6 +328,18 @@ const GuestForm = props => {
                             defaultMessage: 'State Required'
                         })}
                     />
+                    {regionError ? (
+                        <Message>
+                            <div className={classes.regionError}>
+                                <FormattedMessage
+                                    id={'validation.isRequired'}
+                                    defaultMessage={'isRequired'}
+                                />
+                            </div>
+                        </Message>
+                    ) : (
+                        ''
+                    )}
                 </div>
                 <div className={classes.postcode}>
                     <Postcode

diff --git a/...venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css b/...venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css
@@ -36,6 +36,11 @@
     composes: p-xs from global;
 }
 
+.regionError {
+    color: brown;
+    font-weight: 600;
+}
+
 @media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;

diff --git a/packages/venia-ui/lib/components/Region/region.js b/packages/venia-ui/lib/components/Region/region.js
@@ -18,6 +18,7 @@ import { GET_REGIONS_QUERY } from './region.gql';
 const Region = props => {
     const {
         classes: propClasses,
+        regionError,
         countryCodeField,
         fieldInput,
         fieldSelect,
@@ -47,13 +48,19 @@ const Region = props => {
     const regionField =
         regions.length || loading ? (
             <Select
+                regionError={regionError}
                 {...regionProps}
                 field={fieldSelect}
                 id={classes.root}
                 items={regions}
             />
         ) : (
-            <TextInput {...regionProps} field={fieldInput} id={classes.root} />
+            <TextInput
+                {...regionProps}
+                field={fieldInput}
+                id={classes.root}
+                regionError={regionError}
+            />
         );
 
     return (

diff --git a/packages/venia-ui/lib/components/Select/select.js b/packages/venia-ui/lib/components/Select/select.js
@@ -18,14 +18,16 @@ const Select = props => {
     const {
         before,
         classes: propClasses,
+        regionError,
         field,
         items,
         message,
         ...rest
     } = props;
     const fieldState = useFieldState(field);
     const classes = useStyle(defaultClasses, propClasses);
-    const inputClass = fieldState.error ? classes.input_error : classes.input;
+    const inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
 
     const options = items.map(
         ({ disabled = null, hidden = null, label, value, key = value }) => (

diff --git a/packages/venia-ui/lib/components/TextInput/textInput.js b/packages/venia-ui/lib/components/TextInput/textInput.js
@@ -12,13 +12,15 @@ const TextInput = props => {
         after,
         before,
         classes: propClasses,
+        regionError,
         field,
         message,
         ...rest
     } = props;
     const fieldState = useFieldState(field);
     const classes = useStyle(defaultClasses, propClasses);
-    const inputClass = fieldState.error ? classes.input_error : classes.input;
+    var inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
 
     return (
         <Fragment>