orienteed · ggalota · Aug 18, 2023
diff --git a/app/package.json b/app/package.json
@@ -40,13 +40,14 @@
         "@react-google-maps/api": "^2.18.1",
         "@tippyjs/react": "~4.2.5",
         "emoji-picker-react": "~4.4.5",
-        "react-geocode": "^0.2.3",
         "papaparse": "~5.3.2",
+        "postcode-validator": "~3.8.14",
         "react-cookie-consent": "~8.0.1",
         "react-csv": "~2.2.2",
         "react-datepicker": "~4.8.0",
         "react-dropzone": "~14.2.3",
         "react-ga": "~3.3.1",
+        "react-geocode": "^0.2.3",
         "react-html-parser": "~2.0.2",
         "react-image-zoom": "~1.3.1",
         "react-to-print": "~2.14.10",

diff --git a/app/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress.js b/app/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress.js
@@ -9,6 +9,7 @@ import DEFAULT_OPERATIONS from './billingAddress.gql';
 import ADDRESS_BOOK_OPERATIONS from '../../AddressBookPage/addressBookPage.gql';
 import SHIPPING_INFORMATION_OPERATIONS from '../ShippingInformation/shippingInformation.gql';
 
+import { validatePostcode } from '@magento/venia-ui/lib/util/formValidators';
 import { AlertCircle as AlertCircleIcon } from 'react-feather';
 import { FormattedMessage } from 'react-intl';
 import { useToasts } from '@magento/peregrine';
@@ -269,7 +270,9 @@ export const useBillingAddress = props => {
             postcode,
             phoneNumber
         } = formState.values;
-
+        if (!validatePostcode(postcode, country)) {
+            throw new Error("Invalid postcode")
+        }
         updateBillingAddress({
             variables: {
                 cartId,

diff --git a/...ages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useCustomerForm.js b/...ages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useCustomerForm.js
@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
+import { validatePostcode } from '@magento/venia-ui/lib/util/formValidators';
 
 import { useEventingContext } from '../../../../context/eventing';
 
@@ -108,15 +109,16 @@ export const useCustomerForm = props => {
     const handleSubmit = useCallback(
         async formValues => {
             // eslint-disable-next-line no-unused-vars
-            const { country, email, ...address } = formValues;
+            const { country, email, postcode, ...address } = formValues;
             try {
                 const customerAddress = {
                     ...address,
                     // Cleans up the street array when values are null or undefined
                     street: address.street.filter(e => e),
-                    country_code: country
+                    country_code: country,
+                    postcode: postcode
                 };
-
+                if(!validatePostcode(postcode, country)) return
                 if (isUpdate) {
                     const { id: addressId } = shippingData;
                     await updateCustomerAddress({

diff --git a/...ackages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js b/...ackages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState, useEffect } from 'react';
 import { useMutation, useLazyQuery } from '@apollo/client';
 import DEFAULT_OPERATIONS from './guestForm.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { validatePostcode } from '@magento/venia-ui/lib/util/formValidators';
 
 import { useCartContext } from '../../../../context/cart';
 import { useEventingContext } from '../../../../context/eventing';
@@ -50,7 +51,8 @@ export const useGuestForm = props => {
 
     const handleSubmit = useCallback(
         async formValues => {
-            const { country, email, region, ...address } = formValues;
+            const { country, email, region, postcode, ...address } = formValues;
+            if(!validatePostcode(postcode, country)) return; 
             try {
                 await setGuestShipping({
                     variables: {
@@ -62,7 +64,8 @@ export const useGuestForm = props => {
                             street: address.street.filter(e => e),
                             // region_id is used for field select and region is used for field input
                             region: region.region_id || region.region,
-                            country_code: country
+                            country_code: country,
+                            postcode: postcode
                         }
                     }
                 });

diff --git a/app/packages/peregrine/lib/talons/Postcode/usePostcode.js b/app/packages/peregrine/lib/talons/Postcode/usePostcode.js
@@ -1,6 +1,7 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useFieldApi } from 'informed';
 import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import { validatePostcode } from '@magento/venia-ui/lib/util/formValidators';
 
 /**
  * The usePostcode talon handles logic for resetting the postcode field value when the country changes.
@@ -13,12 +14,20 @@ import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInforme
  */
 export const usePostcode = props => {
     const { countryCodeField = 'country', fieldInput = 'postcode' } = props;
-
+    const [warning, setWarning] = useState('');
     const hasInitialized = useRef(false);
     const countryFieldState = useFieldState(countryCodeField);
     const { value: country } = countryFieldState;
 
     const postcodeInputFieldApi = useFieldApi(fieldInput);
+    const postcodeFieldState = useFieldState(fieldInput);
+    const { value: postcode } = postcodeFieldState;
+
+    useEffect(() => {
+        if (postcode && country) {
+            validatePostcode(postcode, country) ? setWarning('') : setWarning('Invalid postcode for the selected country.');
+        }
+    }, [postcode, country]);
 
     // Reset postcode when country changes. Because of how Informed sets
     // initialValues, we want to skip the first state change of the value being
@@ -33,11 +42,14 @@ export const usePostcode = props => {
         }
     }, [country, postcodeInputFieldApi]);
 
-    return {};
+    return {
+        warning,
+    };
 };
 
 /** JSDocs type definitions */
 
 /**
  * @typedef {Object} PostcodeTalonProps
  */
+
diff --git a/app/packages/venia-ui/i18n/en_US.json b/app/packages/venia-ui/i18n/en_US.json
@@ -723,6 +723,7 @@
     "pagination.prevPage": "move to the previous page",
     "personalPrices": "Personal Prices",
     "postcode.label": "ZIP / Postal Code",
+    "postcode.invalid": "Invalid postcode for the selected country",
     "priceAdjustments.couponCode": "Enter Coupon Code",
     "priceAdjustments.giftOptions": "See Gift Options",
     "priceAdjustments.shippingMethod": "Estimate your Shipping",

diff --git a/app/packages/venia-ui/i18n/es_ES.json b/app/packages/venia-ui/i18n/es_ES.json
@@ -723,6 +723,7 @@
     "pagination.prevPage": "Página anterior",
     "personalPrices": "Precios personales",
     "postcode.label": "Código Postal",
+    "postcode.invalid": "Código postal no válido para el país seleccionado",
     "priceAdjustments.couponCode": "Introduce código promocional",
     "priceAdjustments.giftOptions": "Ver las opciones de regalo",
     "priceAdjustments.shippingMethod": "Calcular su envío",

diff --git a/app/packages/venia-ui/i18n/fr_FR.json b/app/packages/venia-ui/i18n/fr_FR.json
@@ -722,6 +722,7 @@
     "pagination.prevPage": "passer à la page précédente",
     "personalPrices": "Tarifs personnels",
     "postcode.label": "ZIP / Code Postal",
+    "postcode.invalid": "Code postal non valide pour le pays sélectionné",
     "priceAdjustments.couponCode": "Entrer le code promotionnel",
     "priceAdjustments.giftOptions": "Voir les options de cadeaux",
     "priceAdjustments.shippingMethod": "Estimez votre expédition",

diff --git a/app/packages/venia-ui/i18n/pt_PT.json b/app/packages/venia-ui/i18n/pt_PT.json
@@ -721,6 +721,7 @@
     "pagination.prevPage": "Ir a pagina anterior",
     "personalPrices": "Preços pessoais",
     "postcode.label": "Codigo Postal",
+    "postcode.invalid": "Código postal inválido para o país selecionado",
     "priceAdjustments.couponCode": "Introduzir o codigo promocional",
     "priceAdjustments.giftOptions": "Ver opções de prenda",
     "priceAdjustments.shippingMethod": "Simular o envio",

diff --git a/app/packages/venia-ui/lib/components/Postcode/postcode.js b/app/packages/venia-ui/lib/components/Postcode/postcode.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
-import { usePostcode } from '@magento/peregrine/lib/talons/Postcode/usePostcode';
+import { usePostcode } from '../../../../peregrine/lib/talons/Postcode/usePostcode';
 
 import { useStyle } from '../../classify';
 import Field from '../Field';
@@ -26,20 +26,27 @@ const Postcode = props => {
             defaultMessage: 'ZIP / Postal Code'
         });
 
-    usePostcode({ fieldInput });
+      const errorMessage = formatMessage({
+        id: 'postcode.invalid',
+      })
+
+    const { warning } = usePostcode({ fieldInput });
 
     return (
+      <>
         <Field
-            id={classes.root}
-            label={fieldLabel}
-            classes={{ root: classes.root }}
+          id={classes.root}
+          label={fieldLabel}
+          classes={{ root: classes.root }}
         >
-            <TextInput
-                {...postcodeProps}
-                field={fieldInput}
-                id={classes.root}
-            />
+          <TextInput
+            {...postcodeProps}
+            field={fieldInput}
+            id={classes.root}
+          />
         </Field>
+        {warning && <div className={classes.warning}>{errorMessage}</div>}
+      </>
     );
 };
 
@@ -56,3 +63,4 @@ Postcode.propTypes = {
     fieldInput: string,
     label: string
 };
+
diff --git a/app/packages/venia-ui/lib/components/Postcode/postcode.module.css b/app/packages/venia-ui/lib/components/Postcode/postcode.module.css
@@ -1,2 +1,8 @@
 .root {
 }
+
+.warning {
+  margin-top: 2px;
+  color: #D8000C;
+  font-size: 0.9rem;
+}
diff --git a/app/packages/venia-ui/lib/util/formValidators.js b/app/packages/venia-ui/lib/util/formValidators.js
@@ -1,3 +1,5 @@
+import { postcodeValidator } from "postcode-validator";
+
 /**
  * @fileoverview This file houses functions that can be used for
  * validation of form fields.
@@ -161,3 +163,10 @@ export const isNotEqualToField = (value, values, fieldKey) => {
     };
     return value !== values[fieldKey] ? SUCCESS : message;
 };
+
+export const validatePostcode = (postcode, countryCode) => {
+    if (!postcodeValidator(postcode, countryCode)) {
+        return false;
+    }
+    return true;
+};