diff --git a/lerna.json b/lerna.json index 53171ca7..54274caf 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.8.5", + "version": "4.8.6-beta.2", "command": { "version": { "preid": "beta" diff --git a/package.json b/package.json index 952f03ac..037bc3d1 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,10 @@ "prepare": "husky install", "test": "pnpm -r test", "docs:dev": "pnpm --filter docs storybook", - "docs:build": "pnpm --filter docs build-storybook" + "docs:build": "pnpm --filter docs build-storybook", + "components:build:dev": "pnpm --filter react-components build:dev", + "make:version": "lerna version --no-private", + "make:version:force": "lerna version --no-private --force-publish" }, "devDependencies": { "@commercelayer/eslint-config-ts-react": "^1.1.0", @@ -19,4 +22,4 @@ "lerna": "^7.2.0", "typescript": "^5.2.2" } -} +} \ No newline at end of file diff --git a/packages/react-components/package.json b/packages/react-components/package.json index cfa4ca89..7a823b5d 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@commercelayer/react-components", - "version": "4.8.5", + "version": "4.8.6-beta.2", "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/AddressStateSelector.tsx b/packages/react-components/src/components/addresses/AddressStateSelector.tsx index 21da04be..63abf23f 100644 --- a/packages/react-components/src/components/addresses/AddressStateSelector.tsx +++ b/packages/react-components/src/components/addresses/AddressStateSelector.tsx @@ -100,6 +100,12 @@ export function AddressStateSelector(props: Props): JSX.Element { billingCountryCode, countryCode !== billingCountryCode ].every(Boolean) + if (!changeBillingCountry && value != null && value !== val) { + if (billingAddress.setValue != null) { + billingAddress?.setValue(name, value) + } + setVal(value) + } if ( changeBillingCountry && billingCountryCode && @@ -118,6 +124,12 @@ export function AddressStateSelector(props: Props): JSX.Element { shippingCountryCode, countryCode !== shippingCountryCode ].every(Boolean) + if (!changeShippingCountry && value != null && value !== val) { + if (shippingAddress.setValue != null) { + shippingAddress?.setValue(name, value) + } + setVal(value) + } if ( changeShippingCountry && shippingCountryCode && @@ -149,7 +161,13 @@ export function AddressStateSelector(props: Props): JSX.Element { return () => { setHasError(false) } - }, [value, billingAddress, shippingAddress, addressErrors, customerAddress]) + }, [ + value, + billingAddress?.values?.billing_address_country_code, + shippingAddress?.values?.shipping_address_country_code, + addressErrors, + customerAddress + ]) const errorClassName = billingAddress?.errorClassName || shippingAddress?.errorClassName || diff --git a/packages/react-components/src/components/addresses/BillingAddressForm.tsx b/packages/react-components/src/components/addresses/BillingAddressForm.tsx index 3e29d4be..6de022ae 100644 --- a/packages/react-components/src/components/addresses/BillingAddressForm.tsx +++ b/packages/react-components/src/components/addresses/BillingAddressForm.tsx @@ -44,7 +44,13 @@ export function BillingAddressForm(props: Props): JSX.Element { reset = false, ...p } = props - const { validation, values, errors, reset: resetForm } = useRapidForm() + const { + validation, + values, + errors, + reset: resetForm, + setValue: setValueForm + } = useRapidForm() const { setAddressErrors, setAddress, isBusiness } = useContext(AddressesContext) const { @@ -147,6 +153,7 @@ export function BillingAddressForm(props: Props): JSX.Element { name: AddressValuesKeys, value: string | number | readonly string[] ): void => { + setValueForm(name, value as string) const field: any = { [name.replace('billing_address_', '')]: value } diff --git a/packages/react-components/src/components/addresses/ShippingAddressForm.tsx b/packages/react-components/src/components/addresses/ShippingAddressForm.tsx index d189657b..2403f0f5 100644 --- a/packages/react-components/src/components/addresses/ShippingAddressForm.tsx +++ b/packages/react-components/src/components/addresses/ShippingAddressForm.tsx @@ -6,6 +6,7 @@ import isEmpty from 'lodash/isEmpty' import { type BaseError, type CodeErrorType } from '#typings/errors' import OrderContext from '#context/OrderContext' import { getSaveShippingAddressToAddressBook } from '#utils/localStorage' +import { type AddressValuesKeys } from '#context/BillingAddressFormContext' interface Props extends Omit { children: ReactNode @@ -38,7 +39,13 @@ export function ShippingAddressForm(props: Props): JSX.Element { reset = false, ...p } = props - const { validation, values, errors, reset: resetForm } = useRapidForm() + const { + validation, + values, + errors, + reset: resetForm, + setValue: setValueForm + } = useRapidForm() const { setAddressErrors, setAddress, @@ -154,7 +161,11 @@ export function ShippingAddressForm(props: Props): JSX.Element { includeLoaded, isBusiness ]) - const setValue = (name: any, value: any): void => { + const setValue = ( + name: AddressValuesKeys, + value: string | number | readonly string[] + ): void => { + setValueForm(name, value as string) const field: any = { [name.replace('shipping_address_', '')]: value } diff --git a/packages/react-components/src/context/AddressContext.ts b/packages/react-components/src/context/AddressContext.ts index d415f9e2..382dca23 100644 --- a/packages/react-components/src/context/AddressContext.ts +++ b/packages/react-components/src/context/AddressContext.ts @@ -1,7 +1,6 @@ import { createContext } from 'react' import { type AddressState, - type SetAddress, setAddress, type AddressResource, type saveAddresses @@ -11,7 +10,7 @@ import { type BaseError } from '#typings/errors' type DefaultContext = { saveAddresses?: (customerEmail?: string) => ReturnType setCloneAddress: (id: string, resource: AddressResource) => void - setAddress: SetAddress + setAddress: typeof setAddress setAddressErrors: (errors: BaseError[], resource: AddressResource) => void } & AddressState diff --git a/packages/react-components/src/reducers/AddressReducer.ts b/packages/react-components/src/reducers/AddressReducer.ts index 7c9f1b67..542df9c0 100644 --- a/packages/react-components/src/reducers/AddressReducer.ts +++ b/packages/react-components/src/reducers/AddressReducer.ts @@ -14,6 +14,7 @@ import camelCase from 'lodash/camelCase' import { type TCustomerAddress } from './CustomerReducer' import { type TResourceError } from '#components/errors/Errors' import { invertedAddressesHandler } from '#utils/addressesManager' +import { formCleaner } from '#utils/formCleaner' export type AddressActionType = | 'setErrors' @@ -95,10 +96,6 @@ export interface SetAddressParams { dispatch?: Dispatch } -export type SetAddress = ( - params: SetAddressParams -) => void - export const setAddressErrors: SetAddressErrors = ({ errors, dispatch, @@ -123,13 +120,20 @@ export const setAddressErrors: SetAddressErrors = ({ }) } -export const setAddress: SetAddress = ({ values, resource, dispatch }) => { +export function setAddress({ + values, + resource, + dispatch +}: SetAddressParams): void { + const payload = { + [`${resource}`]: { + ...formCleaner(values) + } + } if (dispatch) dispatch({ type: 'setAddress', - payload: { - [`${resource}`]: values - } + payload }) } diff --git a/packages/react-components/src/utils/formCleaner.ts b/packages/react-components/src/utils/formCleaner.ts new file mode 100644 index 00000000..8da5f978 --- /dev/null +++ b/packages/react-components/src/utils/formCleaner.ts @@ -0,0 +1,14 @@ +/* eslint-disable @typescript-eslint/no-dynamic-delete */ +import { type AddressSchema } from '#reducers/AddressReducer' + +export function formCleaner(address: AddressSchema): AddressSchema { + Object.keys(address).forEach((key) => { + const isNotCleaned = + key.startsWith('shipping_address_') || key.startsWith('billing_address_') + if (isNotCleaned) { + // @ts-expect-error type error + delete address[key] + } + }) + return address +}