Merge pull request #474 from commercelayer/fix/enable-save-addresses-…

…button

fix: Set value on address inputs.

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"

package.json

@@ -11,12 +11,15 @@
     "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",
     "husky": "^8.0.0",
     "lerna": "^7.2.0",
     "typescript": "^5.2.2"
   }
-}
+}

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",

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 ||

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
     }

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<JSX.IntrinsicElements['form'], 'onSubmit'> {
   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
     }

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<typeof saveAddresses>
   setCloneAddress: (id: string, resource: AddressResource) => void
-  setAddress: SetAddress
+  setAddress: typeof setAddress
   setAddressErrors: (errors: BaseError[], resource: AddressResource) => void
 } & AddressState
 

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<V extends AddressSchema> {
   dispatch?: Dispatch<AddressAction>
 }
 
-export type SetAddress = <V extends AddressSchema>(
-  params: SetAddressParams<V>
-) => 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<V extends AddressSchema>({
+  values,
+  resource,
+  dispatch
+}: SetAddressParams<V>): void {
+  const payload = {
+    [`${resource}`]: {
+      ...formCleaner(values)
+    }
+  }
   if (dispatch)
     dispatch({
       type: 'setAddress',
-      payload: {
-        [`${resource}`]: values
-      }
+      payload
     })
 }
 

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
+}