Merge pull request #438 from commercelayer/fix-address-form-validation

Fix address form validation behaviors
commercelayer · Oct 24, 2023 · c237137 · c237137
2 parents 197656d + 04f027d
commit c237137
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 46 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "npmClient": "pnpm",
-  "version": "4.7.2",
+  "version": "4.7.3-beta.1",
   "command": {
     "version": {
       "preid": "beta"

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.7.2",
+  "version": "4.7.3-beta.1",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",

diff --git a/packages/react-components/src/components/addresses/AddressCountrySelector.tsx b/packages/react-components/src/components/addresses/AddressCountrySelector.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useMemo } from 'react'
 import BaseSelect from '../utils/BaseSelect'
 import { type BaseSelectComponentProps } from '#typings'
 import BillingAddressFormContext, {
@@ -26,7 +26,6 @@ export function AddressCountrySelector(props: Props): JSX.Element {
   const billingAddress = useContext(BillingAddressFormContext)
   const shippingAddress = useContext(ShippingAddressFormContext)
   const customerAddress = useContext(CustomerAddressFormContext)
-  const [hasError, setHasError] = useState(false)
   useEffect(() => {
     if (value && billingAddress?.setValue) {
       billingAddress.setValue(name, value)
@@ -37,24 +36,19 @@ export function AddressCountrySelector(props: Props): JSX.Element {
     if (value && customerAddress?.setValue) {
       customerAddress.setValue(name, value)
     }
+  }, [value])
 
-    if (billingAddress.errors && billingAddress?.errors?.[name]?.error) {
-      setHasError(true)
+  const hasError = useMemo(() => {
+    if (billingAddress?.errors?.[name]?.error) {
+      return true
     }
-    if (billingAddress?.errors?.[name] && hasError) setHasError(false)
-    if (customerAddress.errors && customerAddress?.errors?.[name]?.error) {
-      setHasError(true)
+    if (shippingAddress?.errors?.[name]?.error) {
+      return true
     }
-    if (customerAddress?.errors?.[name] && hasError) setHasError(false)
-
-    if (shippingAddress.errors && shippingAddress?.errors?.[name]?.error) {
-      setHasError(true)
-    }
-    if (shippingAddress?.errors?.[name] && hasError) setHasError(false)
-
-    return () => {
-      setHasError(false)
+    if (customerAddress?.errors?.[name]?.error) {
+      return true
     }
+    return false
   }, [
     value,
     billingAddress?.errors,

diff --git a/packages/react-components/src/components/addresses/AddressInput.tsx b/packages/react-components/src/components/addresses/AddressInput.tsx
@@ -1,11 +1,10 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useMemo } from 'react'
 import BaseInput from '#components/utils/BaseInput'
 import { type BaseInputComponentProps, type AddressInputName } from '#typings'
 import BillingAddressFormContext, {
   type AddressValuesKeys
 } from '#context/BillingAddressFormContext'
 import ShippingAddressFormContext from '#context/ShippingAddressFormContext'
-import isEmpty from 'lodash/isEmpty'
 import { businessMandatoryField } from '#utils/validateFormFields'
 import CustomerAddressFormContext from '#context/CustomerAddressFormContext'
 
@@ -20,7 +19,6 @@ export function AddressInput(props: Props): JSX.Element | null {
   const billingAddress = useContext(BillingAddressFormContext)
   const shippingAddress = useContext(ShippingAddressFormContext)
   const customerAddress = useContext(CustomerAddressFormContext)
-  const [hasError, setHasError] = useState(false)
   useEffect(() => {
     if (value && billingAddress?.setValue) {
       billingAddress.setValue(p.name, value)
@@ -31,33 +29,26 @@ export function AddressInput(props: Props): JSX.Element | null {
     if (value && customerAddress?.setValue) {
       customerAddress.setValue(p.name, value)
     }
+  }, [value])
 
-    if (billingAddress.errors && billingAddress?.errors?.[p.name]?.error) {
-      setHasError(true)
+  const hasError = useMemo(() => {
+    if (billingAddress?.errors?.[p.name]?.error) {
+      return true
     }
-    if (billingAddress && isEmpty(billingAddress?.errors?.[p.name]) && hasError)
-      setHasError(false)
-
-    if (customerAddress.errors && customerAddress?.errors?.[p.name]?.error) {
-      setHasError(true)
+    if (shippingAddress?.errors?.[p.name]?.error) {
+      return true
     }
-    if (isEmpty(customerAddress?.errors?.[p.name]) && hasError)
-      setHasError(false)
-
-    if (shippingAddress.errors && shippingAddress?.errors?.[p.name]?.error) {
-      setHasError(true)
+    if (customerAddress?.errors?.[p.name]?.error) {
+      return true
     }
-    if (
-      shippingAddress &&
-      isEmpty(shippingAddress?.errors?.[p.name]) &&
-      hasError
-    )
-      setHasError(false)
+    return false
+  }, [
+    value,
+    billingAddress?.errors,
+    shippingAddress?.errors,
+    customerAddress?.errors
+  ])
 
-    return () => {
-      setHasError(false)
-    }
-  }, [value, billingAddress?.errors, shippingAddress?.errors])
   const mandatoryField = billingAddress?.isBusiness
     ? businessMandatoryField(p.name, billingAddress.isBusiness)
     : businessMandatoryField(p.name, shippingAddress.isBusiness)

diff --git a/packages/react-components/src/components/errors/Errors.tsx b/packages/react-components/src/components/errors/Errors.tsx
@@ -81,7 +81,6 @@ export function Errors(props: Props): JSX.Element {
       ...(giftCardErrors || []),
       ...(orderErrors || []),
       ...(lineItemErrors || []),
-      ...(addressErrors || []),
       ...(customerErrors || []),
       ...(shipmentErrors || []),
       ...(inStockSubscriptionErrors || []),
@@ -95,15 +94,18 @@ export function Errors(props: Props): JSX.Element {
       giftCardErrors,
       orderErrors,
       lineItemErrors,
-      addressErrors,
       customerErrors,
       shipmentErrors,
       inStockSubscriptionErrors,
       paymentMethodErrors
     ]
   ).filter((v, k, a) => v?.code !== a[k - 1]?.code)
+  const addressesErrors = useMemo(
+    () => [...(addressErrors || [])],
+    [addressErrors]
+  )
   const msgErrors = getAllErrors({
-    allErrors,
+    allErrors: [...allErrors, ...addressesErrors],
     field,
     messages,
     props: p,