Fix save_to_customer_book into save address request and update deps

package.json

@@ -20,7 +20,7 @@
   "devDependencies": {
     "@commercelayer/eslint-config-ts-react": "^1.4.5",
     "husky": "^9.1.6",
-    "lerna": "^8.1.3",
+    "lerna": "^8.1.9",
     "typescript": "^5.6.3"
   },
   "pnpm": {

packages/react-components/package.json

@@ -180,46 +180,46 @@
   "dependencies": {
     "@adyen/adyen-web": "^5.66.1",
     "@commercelayer/organization-config": "^1.4.8",
-    "@commercelayer/sdk": "^6.13.0",
+    "@commercelayer/sdk": "^6.25.0",
     "@stripe/react-stripe-js": "^2.8.0",
     "@stripe/stripe-js": "^4.3.0",
     "@tanstack/react-table": "^8.17.3",
     "@types/iframe-resizer": "^3.5.13",
-    "braintree-web": "^3.106.0",
+    "braintree-web": "^3.111.1",
     "frames-react": "^1.1.2",
     "iframe-resizer": "^4.4.5",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "rapid-form": "^2.1.0"
   },
   "devDependencies": {
-    "@commercelayer/js-auth": "^6.3.1",
-    "@faker-js/faker": "^8.4.0",
-    "@playwright/test": "^1.46.1",
+    "@commercelayer/js-auth": "^6.7.0",
+    "@faker-js/faker": "^9.2.0",
+    "@playwright/test": "^1.48.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
     "@types/braintree-web": "^3.96.12",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "^22.5.0",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.9.0",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.3.4",
     "@types/react-test-renderer": "^18.0.7",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^2.0.5",
-    "eslint": "~8.57.0",
-    "jsdom": "^24.1.1",
+    "@vitest/coverage-v8": "^2.1.4",
+    "eslint": "~9.14.0",
+    "jsdom": "^25.0.1",
     "minimize-js": "^1.4.0",
-    "msw": "^2.3.5",
+    "msw": "^2.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tsc-alias": "^1.8.8",
     "tslib": "^2.6.3",
     "typescript": "^5.5.4",
     "vite": "^5.4.2",
-    "vite-tsconfig-paths": "^5.0.1",
-    "vitest": "^2.0.5"
+    "vite-tsconfig-paths": "^5.1.0",
+    "vitest": "^2.1.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0"

packages/react-components/src/components/addresses/AddressesContainer.tsx

@@ -5,7 +5,6 @@ import { type ReactNode, useContext, useEffect, useReducer } from 'react'
 import addressReducer, {
   addressInitialState,
   type AddressResource,
-  type AddressSchema,
   setAddressErrors,
   type SetAddressParams,
   setCloneAddress,
@@ -16,6 +15,7 @@ import { type BaseError } from '#typings/errors'
 import OrderContext from '#context/OrderContext'
 import CommerceLayerContext from '#context/CommerceLayerContext'
 import { setCustomerOrderParam } from '#utils/localStorage'
+import { type TCustomerAddress } from '#reducers/CustomerReducer'
 
 interface Props {
   children: ReactNode
@@ -101,7 +101,7 @@ export function AddressesContainer(props: Props): JSX.Element {
         currentErrors: state.errors
       })
     },
-    setAddress: (params: SetAddressParams<AddressSchema>) => {
+    setAddress: (params: SetAddressParams<TCustomerAddress>) => {
       defaultAddressContext.setAddress({ ...params, dispatch })
     },
     saveAddresses: async (params: {

packages/react-components/src/components/addresses/SaveAddressesButton.tsx

@@ -12,6 +12,7 @@ import isFunction from 'lodash/isFunction'
 import { type TCustomerAddress } from '#reducers/CustomerReducer'
 import type { Order } from '@commercelayer/sdk'
 import { validateValue } from '#utils/validateFormFields'
+import { formCleaner } from '#utils/formCleaner'
 
 interface TOnClick {
   success: boolean
@@ -146,8 +147,8 @@ export function SaveAddressesButton(props: Props): JSX.Element {
         }
         case createCustomerAddress != null: {
           const address = invertAddresses
-            ? { ...shippingAddress }
-            : { ...billingAddress }
+            ? { ...formCleaner(shippingAddress) }
+            : { ...formCleaner(billingAddress) }
           if (addressId) address.id = addressId
           void createCustomerAddress(address as TCustomerAddress)
           response = {

packages/react-components/src/components/customers/CustomerAddressForm.tsx

@@ -7,7 +7,7 @@ import { type AddressField } from '#reducers/AddressReducer'
 import { type AddressCountrySelectName, type AddressInputName } from '#typings'
 import OrderContext from '#context/OrderContext'
 import { isEmptyStates } from '#utils/countryStateCity'
-import type { Address } from '@commercelayer/sdk'
+import { type TCustomerAddress } from '#reducers/CustomerReducer'
 
 interface Props extends Omit<JSX.IntrinsicElements['form'], 'onSubmit'> {
   children: ReactNode
@@ -85,7 +85,10 @@ export function CustomerAddressForm(props: Props): JSX.Element {
           }
         }
       }
-      setAddress({ values: values as Address, resource: 'billing_address' })
+      setAddress({
+        values: values as TCustomerAddress,
+        resource: 'billing_address'
+      })
     }
     if (
       reset &&
@@ -109,7 +112,7 @@ export function CustomerAddressForm(props: Props): JSX.Element {
       [name.replace('billing_address_', '')]: value
     }
     setAddress({
-      values: { ...(values as Address), ...field },
+      values: { ...(values as TCustomerAddress), ...field },
       resource: 'billing_address'
     })
   }

packages/react-components/src/context/AddressContext.ts

@@ -4,13 +4,13 @@ import {
   setAddress,
   type AddressResource,
   type saveAddresses,
-  ICustomerAddress
+  type ICustomerAddress
 } from '#reducers/AddressReducer'
 import { type BaseError } from '#typings/errors'
 
 type DefaultContext = {
   saveAddresses?: (params: {
-    customerEmail?: string,
+    customerEmail?: string
     customerAddress?: ICustomerAddress
   }) => ReturnType<typeof saveAddresses>
   setCloneAddress: (id: string, resource: AddressResource) => void

packages/react-components/src/reducers/AddressReducer.ts

@@ -2,12 +2,7 @@ import baseReducer from '#utils/baseReducer'
 import { type Dispatch } from 'react'
 import { type CodeErrorType, type BaseError } from '#typings/errors'
 import { type CommerceLayerConfig } from '#context/CommerceLayerContext'
-import {
-  type OrderUpdate,
-  type Address,
-  type AddressCreate,
-  type Order
-} from '@commercelayer/sdk'
+import { type OrderUpdate, type Address, type Order } from '@commercelayer/sdk'
 import getSdk from '#utils/getSdk'
 import { type updateOrder } from './OrderReducer'
 import camelCase from 'lodash/camelCase'
@@ -86,7 +81,7 @@ export type AddressSchema = Omit<
 export interface AddressActionPayload {
   errors: BaseError[]
   billing_address: TCustomerAddress
-  shipping_address: AddressCreate & Record<string, string | null | undefined>
+  shipping_address: TCustomerAddress
   shipToDifferentAddress: boolean
   billingAddressId: string
   shippingAddressId: string
@@ -112,7 +107,7 @@ export type SetAddressErrors = <V extends BaseError[]>(args: {
   currentErrors?: V
 }) => void
 
-export interface SetAddressParams<V extends AddressSchema> {
+export interface SetAddressParams<V extends TCustomerAddress> {
   values: V
   resource: AddressResource
   dispatch?: Dispatch<AddressAction>
@@ -142,7 +137,7 @@ export const setAddressErrors: SetAddressErrors = ({
     })
 }
 
-export function setAddress<V extends AddressSchema>({
+export function setAddress<V extends TCustomerAddress>({
   values,
   resource,
   dispatch
@@ -206,13 +201,15 @@ export async function saveAddresses({
   const {
     shipToDifferentAddress,
     invertAddresses,
-    billing_address: billingAddress,
-    shipping_address: shippingAddress,
+    billing_address: billingAddressForm,
+    shipping_address: shippingAddressForm,
     billingAddressId,
     shippingAddressId
   } = state
   try {
     const sdk = getSdk(config)
+    const billingAddress = formCleaner(billingAddressForm)
+    const shippingAddress = formCleaner(shippingAddressForm)
     if (order) {
       let orderAttributes: OrderUpdate | null = null
       const billingAddressCloneId =

packages/react-components/src/utils/formCleaner.ts

@@ -1,22 +1,24 @@
 /* eslint-disable @typescript-eslint/no-dynamic-delete */
-import { type AddressSchema } from '#reducers/AddressReducer'
+import { type TCustomerAddress } from '#reducers/CustomerReducer'
 
-export function formCleaner(address: AddressSchema): AddressSchema {
+type CombinedAddressType = TCustomerAddress | undefined
+
+export function formCleaner(address: CombinedAddressType): CombinedAddressType {
+  if (!address) {
+    return address
+  }
   Object.keys(address).forEach((key) => {
     const keyCleaned = key
       .replace('shipping_address_', '')
       .replace('billing_address_', '')
     const isNotCleaned =
       key.startsWith('shipping_address_') || key.startsWith('billing_address_')
     if (isNotCleaned) {
-      // @ts-expect-error type error
       address[keyCleaned] = address[key]
-      // @ts-expect-error type error
       delete address[key]
-      if (keyCleaned === 'save_to_customer_book') {
-        // @ts-expect-error type error
-        delete address[keyCleaned]
-      }
+    }
+    if (keyCleaned === 'save_to_customer_book') {
+      delete address[keyCleaned]
     }
   })
   return address