fix(svp): add max quantity (#13915)

ref: TAPC-1697 Signed-off-by: Lionel Bueno <[email protected]>
ovh · Nov 5, 2024 · 6eda286 · 6eda286
1 parent 6b9b3f6
commit 6eda286
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 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
@@ -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
@@ -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;