Update item quantity

components/cart/CartItem/CartItem.module.css

@@ -0,0 +1,9 @@
+.quantity {
+  appearance: textfield;
+  @apply w-6 border-gray-300 border mx-3 rounded text-center text-sm;
+}
+
+.quantity::-webkit-outer-spin-button,
+.quantity::-webkit-inner-spin-button {
+  @apply appearance-none m-0;
+}

components/cart/CartItem/CartItem.tsx

@@ -1,6 +1,9 @@
 import { Trash } from '@components/icon'
 import { useCommerce } from '@lib/bigcommerce'
+import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
+import { useEffect, useState } from 'react'
 import formatVariantPrice from 'utils/format-item-price'
+import styles from './CartItem.module.css'
 
 const CartItem = ({
   item,
@@ -10,12 +13,35 @@ const CartItem = ({
   currencyCode: string
 }) => {
   const { locale } = useCommerce()
+  const updateItem = useUpdateItem()
+  const [quantity, setQuantity] = useState(item.quantity)
   const { price } = formatVariantPrice({
     listPrice: item.extended_list_price,
     salePrice: item.extended_sale_price,
     currencyCode,
     locale,
   })
+  const handleBlur = async () => {
+    const val = Number(quantity)
+
+    if (val !== item.quantity) {
+      const data = await updateItem({
+        itemId: item.id,
+        item: {
+          productId: item.product_id,
+          variantId: item.variant_id,
+          quantity: val,
+        },
+      })
+    }
+  }
+
+  useEffect(() => {
+    // Reset the quantity state if the item quantity changes
+    if (item.quantity !== quantity) {
+      setQuantity(item.quantity)
+    }
+  }, [item.quantity])
 
   console.log('ITEM', item)
 
@@ -27,8 +53,17 @@ const CartItem = ({
         <div className="py-2">
           <span>-</span>
           <input
-            className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
+            type="number"
-            defaultValue="1"
+            className={styles.quantity}
+            value={quantity}
+            onChange={(e) => {
+              const val = Number(e.target.value)
+
+              if (Number.isInteger(val) && val >= 0) {
+                setQuantity(e.target.value)
+              }
+            }}
+            onBlur={handleBlur}
           />
           <span>+</span>
         </div>

lib/bigcommerce/api/cart.ts

@@ -117,7 +117,7 @@ const cartApi: BigcommerceApiHandler<Cart> = async (req, res, config) => {
         {
           method: 'PUT',
           body: JSON.stringify({
-            line_items: [parseItem(item)],
+            line_item: parseItem(item),
           }),
         }
       )

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

@@ -27,7 +27,7 @@ export default function useUpdateItem() {
   const fn = useCartUpdateItem<Cart, UpdateItemBody>(fetcher)
   const updateItem: typeof fn = async (input) => {
     const data = await fn(input)
-    mutate(data)
+    await mutate(data)
     return data
   }