diff --git a/lerna.json b/lerna.json index 54124605..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.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 index 86fe27e6..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.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 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, diff --git a/packages/react-components/src/components/addresses/AddressInput.tsx b/packages/react-components/src/components/addresses/AddressInput.tsx index 08012195..758d16d6 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]) - 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,