commercelayer · gciotola · May 23, 2024 · May 23, 2024
diff --git a/packages/cart/specs/e2e/out-of-stock.spec.ts b/packages/cart/specs/e2e/out-of-stock.spec.ts
@@ -13,14 +13,24 @@ test.describe("Quantity not available", () => {
     },
   })
 
-  test("should see an error when selecting non available quantity", async ({
+  test("should not be able to update a quantity not available", async ({
     CartPage,
   }) => {
     await CartPage.checkItemQuantity(2)
-    await CartPage.quantitySelectorInput.fill("10")
-    await CartPage.checkItemQuantity(2)
+    await CartPage.quantitySelectorInput.fill("5") // max available quantity is 5
+    await CartPage.checkItemQuantity(5)
+
+    await CartPage.quantitySelectorInput.fill("6")
+
+    await CartPage.checkItemQuantity(5)
+
+    await expect(
+      CartPage.page.locator("[data-test-id=input-spinner-btn-increment]")
+    ).toBeDisabled()
+
+    await CartPage.quantitySelectorInput.fill("3")
     await expect(
-      CartPage.page.locator("text=The selected quantity is not available")
-    ).toBeVisible()
+      CartPage.page.locator("[data-test-id=input-spinner-btn-increment]")
+    ).toBeEnabled()
   })
 })
diff --git a/packages/cart/src/components/Cart/Summary/QuantitySelector.tsx b/packages/cart/src/components/Cart/Summary/QuantitySelector.tsx
@@ -1,6 +1,6 @@
-import { Errors, LineItemQuantity } from "@commercelayer/react-components"
+import { LineItemQuantity } from "@commercelayer/react-components"
+import { LineItem } from "@commercelayer/sdk"
 import { FC } from "react"
-import { useTranslation } from "react-i18next"
 
 import { InputSpinner } from "#components/atoms/InputSpinner"
 
@@ -9,35 +9,34 @@ type Props = {
 }
 
 export const QuantitySelector: FC<Props> = () => {
-  const { t } = useTranslation()
-
  
8000
 return (
     <div className="relative w-full">
       <LineItemQuantity>
-        {({ quantity, handleChange }) => {
+        {({ quantity, handleChange, lineItem }) => {
           return (
             <InputSpinner
               data-test-id="quantity-selector"
               quantity={quantity}
               handleChange={handleChange}
               debounceMs={600}
+              availability={getItemInventoryQuantity(lineItem)}
             />
           )
         }}
       </LineItemQuantity>
-
-      <Errors
-        resource="line_items"
-        className="absolute top-[100%] block text-xs text-red-400"
-        messages={[
-          {
-            code: "VALIDATION_ERROR",
-            resource: "line_items",
-            field: "quantity",
-            message: t("general.quantityNotAvailable"),
-          },
-        ]}
-      />
     </div>
   )
 }
+
+function getItemInventoryQuantity(lineItem?: LineItem): number | undefined {
+  const item = lineItem?.item
+  if (item == null) {
+    return undefined
+  }
+
+  if ("inventory" in item && item.inventory?.quantity != null) {
+    return item.inventory.quantity
+  }
+
+  return undefined
+}
diff --git a/packages/cart/src/components/Cart/Totals/ButtonCheckout.tsx b/packages/cart/src/components/Cart/Totals/ButtonCheckout.tsx
@@ -5,6 +5,7 @@ import {
   PaymentMethodsContainer,
   PaymentSource,
   useOrderContainer,
+  Errors,
 } from "@commercelayer/react-components"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
@@ -26,6 +27,20 @@ export const ButtonCheckout: FC = () => {
           </PaymentMethod>
         </PaymentMethodsContainer>
       </div>
+
+      <Errors
+        resource="line_items"
+        className="block text-xs text-red-400 mb-4"
+        messages={[
+          {
+            code: "VALIDATION_ERROR",
+            resource: "line_items",
+            field: "quantity",
+            message: t("general.quantityNotAvailable"),
+          },
+        ]}
+      />
+
       <LineItemsCount>
         {({ quantity }) =>
           quantity ? (

diff --git a/packages/cart/src/components/atoms/InputSpinner.tsx b/packages/cart/src/components/atoms/InputSpinner.tsx
@@ -22,20 +22,26 @@ interface Props {
    * input is disabled
    */
   disabled?: boolean
+  /*
+   * availability value returned from current item inventory
+   */
+  availability?: number
 }
 
 export function InputSpinner({
   quantity,
   handleChange,
   debounceMs = 0,
   disabled = false,
+  availability,
   ...rest
 }: Props): JSX.Element {
   const [internalValue, setInternalValue] = useState<number>(quantity)
   const [internalDisabled, setInternalDisabled] = useState(disabled)
   const { debouncedValue } = useDebounce(internalValue, debounceMs)
   const inputEl = useRef<HTMLInputElement | null>(null)
   const isDisabled = disabled || internalDisabled
+  const canIncrease = availability == null || internalValue < availability
   const isInternalValueSynched = quantity === internalValue
 
   const handleButtonClick = useCallback((action: "increment" | "decrement") => {
@@ -112,19 +118,21 @@ export function InputSpinner({
         value={internalValue}
          => {
           const value = parseInt(event.currentTarget.value, 10)
-          if (value >= 1) {
+          if (value >= 1 && (availability == null || value <= availability)) {
             setInternalValue(value)
           }
         }}
         disabled={isDisabled}
       />
       <button
         data-test-id="input-spinner-btn-increment"
-        className="button-base bg-primary text-contrast px-3"
+        className={cn("button-base bg-primary text-contrast px-3", {
+          "!opacity-50": !canIncrease,
+        })}
          => {
           handleButtonClick("increment")
         }}
-        disabled={isDisabled}
+        disabled={isDisabled || !canIncrease}
       >
         +
       </button>