From 2dac090605611e9e12e4fd4f09142f96033be035 Mon Sep 17 00:00:00 2001
From: Lio B <lionel95200x@users.noreply.github.com>
Date: Tue, 5 Nov 2024 10:58:38 +0100
Subject: [PATCH] fix(svp): add max quantity (#13915)

ref: TAPC-1697

Signed-off-by: Lionel Bueno <lionel.bueno.ext@ovhcloud.com>
---
 .../CreatePlanForm/CreatePlanForm.tsx         |   6 +-
 .../QuantitySelector/QuantitySelector.tsx     | 105 ++++++++++--------
 2 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx b/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx
index 0f280316afe0..4ab6d9b049d0 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx
@@ -336,10 +336,10 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
           <span slot="end">
             <QuantitySelector
               quantity={quantity}
-              onMinusClick={() => setQuantity((prevQ) => prevQ - 1)}
+              onMinusClick={() => setQuantity(quantity - 1)}
               onPlusClick={() => {
-                if (quantity <= MAX_QUANTITY) {
-                  setQuantity((prevQ) => prevQ + 1);
+                if (quantity < MAX_QUANTITY) {
+                  setQuantity(quantity + 1);
                 }
               }}
               onChangeQuantity={onChangeQuantity}
diff --git a/packages/manager/apps/pci-savings-plan/src/components/QuantitySelector/QuantitySelector.tsx b/packages/manager/apps/pci-savings-plan/src/components/QuantitySelector/QuantitySelector.tsx
index 34f15da06893..f5bee8c1093c 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/QuantitySelector/QuantitySelector.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/QuantitySelector/QuantitySelector.tsx
@@ -24,58 +24,67 @@ type QuantitySelectorProps = {
 };
 
 export const MAX_QUANTITY = 1000;
-
 const QuantitySelector: React.FC<QuantitySelectorProps> = ({
   quantity,
   onMinusClick,
   onPlusClick,
   onChangeQuantity,
-}) => (
-  <OsdsQuantity>
-    <OsdsButton
-      data-testid="minus-button"
-      onClick={onMinusClick}
-      slot="minus"
-      size={ODS_BUTTON_SIZE.sm}
-      color={ODS_THEME_COLOR_INTENT.primary}
-      type={ODS_BUTTON_TYPE.button}
-      variant={ODS_BUTTON_VARIANT.flat}
-      text-align="center"
-    >
-      <OsdsIcon size={ODS_ICON_SIZE.sm} name={ODS_ICON_NAME.MINUS} contrasted />
-    </OsdsButton>
-    <OsdsInput
-      data-testid="input-quantity"
-      type={ODS_INPUT_TYPE.number}
-      color={ODS_THEME_COLOR_INTENT.primary}
-      min={1}
-      step={1}
-      value={quantity}
-      onOdsValueChange={(e) => {
-        const value = Number(e.detail.value);
-        if (value > 0 && value <= MAX_QUANTITY) {
-          onChangeQuantity(value);
-        }
-      }}
-      size={ODS_INPUT_SIZE.md}
-    ></OsdsInput>
-    <OsdsButton
-      data-testid="plus-button"
-      onClick={onPlusClick}
-      slot="plus"
-      size={ODS_BUTTON_SIZE.sm}
-      color={ODS_THEME_COLOR_INTENT.primary}
-      type={ODS_BUTTON_TYPE.button}
-      variant={ODS_BUTTON_VARIANT.flat}
-      text-align="center"
-    >
-      <OsdsIcon
-        size={ODS_ICON_SIZE.sm}
-        name={ODS_ICON_NAME.PLUS}
-        contrasted
-      ></OsdsIcon>
-    </OsdsButton>
-  </OsdsQuantity>
-);
+}) => {
+  const isDisabledPlus = quantity >= MAX_QUANTITY;
+
+  return (
+    <OsdsQuantity>
+      <OsdsButton
+        data-testid="minus-button"
+        onClick={onMinusClick}
+        slot="minus"
+        size={ODS_BUTTON_SIZE.sm}
+        color={ODS_THEME_COLOR_INTENT.primary}
+        type={ODS_BUTTON_TYPE.button}
+        variant={ODS_BUTTON_VARIANT.flat}
+        text-align="center"
+      >
+        <OsdsIcon
+          size={ODS_ICON_SIZE.sm}
+          name={ODS_ICON_NAME.MINUS}
+          contrasted
+        />
+      </OsdsButton>
+      <OsdsInput
+        data-testid="input-quantity"
+        type={ODS_INPUT_TYPE.number}
+        color={ODS_THEME_COLOR_INTENT.primary}
+        min={1}
+        max={MAX_QUANTITY}
+        step={1}
+        value={quantity}
+        onOdsValueChange={(e) => {
+          const value = Number(e.detail.value);
+          if (value > 0 && value <= MAX_QUANTITY) {
+            onChangeQuantity(value);
+          }
+        }}
+        size={ODS_INPUT_SIZE.md}
+      ></OsdsInput>
+      <OsdsButton
+        disabled={isDisabledPlus || null}
+        data-testid="plus-button"
+        onClick={!isDisabledPlus ? onPlusClick : null}
+        slot="plus"
+        size={ODS_BUTTON_SIZE.sm}
+        color={ODS_THEME_COLOR_INTENT.primary}
+        type={ODS_BUTTON_TYPE.button}
+        variant={ODS_BUTTON_VARIANT.flat}
+        text-align="center"
+      >
+        <OsdsIcon
+          size={ODS_ICON_SIZE.sm}
+          name={ODS_ICON_NAME.PLUS}
+          contrasted
+        ></OsdsIcon>
+      </OsdsButton>
+    </OsdsQuantity>
+  );
+};
 
 export default QuantitySelector;