Making multiple changes

framework/bigcommerce/api/cart/handlers/update-item.ts

@@ -14,6 +14,9 @@ const updateItem: CartHandlers['updateItem'] = async ({
     })
   }
 
+  console.log('ITEM', item)
+  console.log('AFTER', parseCartItem(item))
+
   const { data } = await config.storeApiFetch(
     `/v3/carts/${cartId}/items/${itemId}`,
     {

framework/bigcommerce/api/cart/index.ts

@@ -8,6 +8,7 @@ import getCart from './handlers/get-cart'
 import addItem from './handlers/add-item'
 import updateItem from './handlers/update-item'
 import removeItem from './handlers/remove-item'
+import type { Cart, UpdateCartItemHandlerBody } from '../../types'
 
 type OptionSelections = {
   option_id: Number
@@ -23,37 +24,12 @@ export type ItemBody = {
 
 export type AddItemBody = { item: ItemBody }
 
-export type UpdateItemBody = { itemId: string; item: ItemBody }
-
 export type RemoveItemBody = { itemId: string }
 
-// TODO: this type should match:
-// https://developer.bigcommerce.com/api-reference/cart-checkout/server-server-cart-api/cart/getacart#responses
-export type Cart = {
-  id: string
-  parent_id?: string
-  customer_id: number
-  email: string
-  currency: { code: string }
-  tax_included: boolean
-  base_amount: number
-  discount_amount: number
-  cart_amount: number
-  line_items: {
-    custom_items: any[]
-    digital_items: any[]
-    gift_certificates: any[]
-    physical_items: any[]
-  }
-  created_time: string
-  discounts?: { id: number; discounted_amount: number }[]
-  // TODO: add missing fields
-}
-
 export type CartHandlers = {
   getCart: BigcommerceHandler<Cart, { cartId?: string }>
   addItem: BigcommerceHandler<Cart, { cartId?: string } & Partial<AddItemBody>>
-  updateItem: BigcommerceHandler<Cart, UpdateItemBody>
+  updateItem: BigcommerceHandler<Cart, UpdateCartItemHandlerBody>
   removeItem: BigcommerceHandler<
     Cart,
     { cartId?: string } & Partial<RemoveItemBody>

framework/bigcommerce/api/utils/parse-item.ts

@@ -1,14 +1,21 @@
 import type { ItemBody as WishlistItemBody } from '../wishlist'
-import type { ItemBody } from '../cart'
+import type { CartItemBody, OptionSelections } from '../../types'
+
+type BCCartItemBody = {
+  product_id: number
+  variant_id: number
+  quantity?: number
+  option_selections?: OptionSelections
+}
 
 export const parseWishlistItem = (item: WishlistItemBody) => ({
   product_id: item.productId,
   variant_id: item.variantId,
 })
 
-export const parseCartItem = (item: ItemBody) => ({
+export const parseCartItem = (item: CartItemBody): BCCartItemBody => ({
   quantity: item.quantity,
-  product_id: item.productId,
+  product_id: Number(item.productId),
-  variant_id: item.variantId,
+  variant_id: Number(item.variantId),
   option_selections: item.optionSelections,
 })

framework/bigcommerce/cart/use-update-item.tsx

@@ -5,10 +5,11 @@ import { CommerceError } from '@commerce/utils/errors'
 import useCartUpdateItem from '@commerce/cart/use-update-item'
 import { normalizeCart } from '../lib/normalize'
 import type {
-  ItemBody,
+  Cart,
-  UpdateItemBody,
+  BigcommerceCart,
-  Cart as BigcommerceCart,
+  UpdateCartItemBody,
-} from '../api/cart'
+  UpdateCartItemInput,
+} from '../types'
 import { fetcher as removeFetcher } from './use-remove-item'
 import useCart from './use-cart'
 
@@ -17,9 +18,7 @@ const defaultOpts = {
   method: 'PUT',
 }
 
-export type UpdateItemInput = Partial<{ id: string } & ItemBody>
+export const fetcher: HookFetcher<Cart | null, UpdateCartItemBody> = async (
-
-export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = async (
   options,
   { itemId, item },
   fetch
@@ -47,13 +46,21 @@ export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = async (
 function extendHook(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
   const useUpdateItem = (item?: any) => {
     const { mutate } = useCart()
-    const fn = useCartUpdateItem<Cart | null, UpdateItemBody>(
+    const fn = useCartUpdateItem<Cart | null, UpdateCartItemBody>(
       defaultOpts,
       customFetcher
     )
 
     return useCallback(
-      debounce(async (input: UpdateItemInput) => {
+      debounce(async (input: UpdateCartItemInput) => {
+        console.log('INPUT', input, {
+          itemId: input.id ?? item?.id,
+          item: {
+            productId: input.productId ?? item?.product_id,
+            variantId: input.productId ?? item?.variant_id,
+            quantity: input.quantity,
+          },
+        })
         const data = await fn({
           itemId: input.id ?? item?.id,
           item: {

framework/bigcommerce/types.ts

@@ -1,11 +1,52 @@
 import * as Core from '@commerce/types'
 
+// TODO: this type should match:
+// https://developer.bigcommerce.com/api-reference/cart-checkout/server-server-cart-api/cart/getacart#responses
+export type BigcommerceCart = {
+  id: string
+  parent_id?: string
+  customer_id: number
+  email: string
+  currency: { code: string }
+  tax_included: boolean
+  base_amount: number
+  discount_amount: number
+  cart_amount: number
+  line_items: {
+    custom_items: any[]
+    digital_items: any[]
+    gift_certificates: any[]
+    physical_items: any[]
+  }
+  created_time: string
+  discounts?: { id: number; discounted_amount: number }[]
+  // TODO: add missing fields
+}
+
 export interface Cart extends Core.Cart {
   lineItems: LineItem[]
 }
 
 export interface LineItem extends Core.LineItem {}
 
-export interface UpdateLineItemBody extends Core.UpdateLineItemBody {}
+/**
+ * Cart mutations
+ */
 
-export interface UpdateLineItem extends Core.UpdateItemBody {}
+export type OptionSelections = {
+  option_id: number
+  option_value: number | string
+}
+
+export interface CartItemBody extends Core.CartItemBody {
+  optionSelections?: OptionSelections
+}
+
+export interface UpdateCartItemBody extends Core.UpdateCartItemBody {
+  item: CartItemBody
+}
+
+export interface UpdateCartItemInput extends Core.UpdateCartItemInput {}
+
+export interface UpdateCartItemHandlerBody
+  extends Core.UpdateCartItemHandlerBody {}

framework/commerce/types.ts

@@ -86,23 +86,25 @@ export interface Cart {
   discounts?: Discount[]
 }
 
-// interface OptionSelections {
+// Base cart item body used for cart mutations
-//   option_id: number
+export interface CartItemBody {
-//   option_value: number | string
-// }
-
-export interface LineItemBody {
   productId: string
   variantId: string
   quantity?: number
-  // optionSelections?: OptionSelections
 }
 
-export interface UpdateLineItemBody {
+// Body by the update operation
+export interface UpdateCartItemBody {
   itemId: string
-  item: LineItemBody
+  item: CartItemBody
 }
 
-export interface UpdateItemBody extends Partial<UpdateLineItemBody> {
+// Input expected by the `useUpdateItem` hook
+export interface UpdateCartItemInput extends Partial<CartItemBody> {
+  id?: string
+}
+
+// Body expected by the update operation handler
+export interface UpdateCartItemHandlerBody extends Partial<UpdateCartItemBody> {
   cartId?: string
 }