From 9af3fdfb86707051e57668387575df5b3c223e65 Mon Sep 17 00:00:00 2001 From: Pier Francesco Ferrari Date: Mon, 23 Oct 2023 08:45:27 +0200 Subject: [PATCH 1/5] fix: fix address form validation --- .../src/components/addresses/AddressInput.tsx | 41 ++++++++----------- .../src/components/errors/Errors.tsx | 8 ++-- 2 files changed, 21 insertions(+), 28 deletions(-) diff --git a/packages/react-components/src/components/addresses/AddressInput.tsx b/packages/react-components/src/components/addresses/AddressInput.tsx index 08012195..e8f654a0 100644 --- 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, billingAddress, shippingAddress, customerAddress]) - 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 index e0fc5931..5547a28d 100644 --- 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, From 9cf076fd2b319fb949ffcc98145d0d9eb96198ef Mon Sep 17 00:00:00 2001 From: Pier Francesco Ferrari Date: Mon, 23 Oct 2023 08:59:24 +0200 Subject: [PATCH 2/5] v4.7.3-beta.0 --- lerna.json | 2 +- packages/react-components/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lerna.json b/lerna.json index 54124605..cb068777 100644 --- 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.0", "command": { "version": { "preid": "beta" diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 86fe27e6..c1890cf6 100644 --- 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.0", "description": "The Official Commerce Layer React Components", "main": "lib/cjs/index.js", "module": "lib/esm/index.js", From 1cae15a519ef40a86176eae5484ec049310b1509 Mon Sep 17 00:00:00 2001 From: Pier Francesco Ferrari Date: Mon, 23 Oct 2023 17:56:59 +0200 Subject: [PATCH 3/5] fix: remove unwanted deps in useEffect --- .../react-components/src/components/addresses/AddressInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/src/components/addresses/AddressInput.tsx b/packages/react-components/src/components/addresses/AddressInput.tsx index e8f654a0..758d16d6 100644 --- a/packages/react-components/src/components/addresses/AddressInput.tsx +++ b/packages/react-components/src/components/addresses/AddressInput.tsx @@ -29,7 +29,7 @@ export function AddressInput(props: Props): JSX.Element | null { if (value && customerAddress?.setValue) { customerAddress.setValue(p.name, value) } - }, [value, billingAddress, shippingAddress, customerAddress]) + }, [value]) const hasError = useMemo(() => { if (billingAddress?.errors?.[p.name]?.error) { From ee7495ba5b4b0a8c7ce7eff0ae5b9e4c5380b6b8 Mon Sep 17 00:00:00 2001 From: Pier Francesco Ferrari Date: Mon, 23 Oct 2023 17:58:38 +0200 Subject: [PATCH 4/5] chore: apply same approach of AddressInput --- .../addresses/AddressCountrySelector.tsx | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/packages/react-components/src/components/addresses/AddressCountrySelector.tsx b/packages/react-components/src/components/addresses/AddressCountrySelector.tsx index 6230d89a..34a6a09f 100644 --- 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, From 04f027d77d0893a6011ed33b9dce01be2d1ad8fd Mon Sep 17 00:00:00 2001 From: Pier Francesco Ferrari Date: Mon, 23 Oct 2023 18:00:15 +0200 Subject: [PATCH 5/5] v4.7.3-beta.1 --- lerna.json | 2 +- packages/react-components/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lerna.json b/lerna.json index cb068777..59b10665 100644 --- 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.3-beta.0", + "version": "4.7.3-beta.1", "command": { "version": { "preid": "beta" diff --git a/packages/react-components/package.json b/packages/react-components/package.json index c1890cf6..bb473af9 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@commercelayer/react-components", - "version": "4.7.3-beta.0", + "version": "4.7.3-beta.1", "description": "The Official Commerce Layer React Components", "main": "lib/cjs/index.js", "module": "lib/esm/index.js",