From 667d9a4152cd5772c6f508efc7fbe5c360803ef8 Mon Sep 17 00:00:00 2001
From: Lionel Bueno <lionel.bueno.ext@ovhcloud.com>
Date: Thu, 9 Jan 2025 14:27:36 +0100
Subject: [PATCH] fix: set quantity to 1 if exceed

ref: TAPC-2456

Signed-off-by: Lionel Bueno <lionel.bueno.ext@ovhcloud.com>
---
 .../src/components/Commitment/Commitment.tsx          | 11 ++++++-----
 .../src/components/CreatePlanForm/CreatePlanForm.tsx  | 10 ++++++++--
 .../src/components/SimpleTile/SimpleTile.tsx          |  2 +-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
index 8366cc6f028c..9ca90da6b1ed 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
@@ -7,6 +7,7 @@ import {
   CENTS_PRICE,
   convertHourlyPriceToMonthly,
 } from '../../utils/commercial-catalog/utils';
+import clsx from 'clsx';
 
 const Commitment = ({
   duration,
@@ -38,12 +39,12 @@ const Commitment = ({
 
   return (
     <OdsCard
-      className={`flex flex-row items-center mr-5 my-4 p-5 justify-between w-full cursor-pointer ${
-        isActive
-          ? 'bg-[--ods-color-primary-050] border-[--ods-color-primary-500] border-2'
-          : ''
-      }`}
+      className={clsx(
+        'flex flex-row items-center mr-5 my-4 p-5 justify-between w-full cursor-pointer',
+        { 'border-[--ods-color-primary-500] border-2': isActive },
+      )}
       onClick={onClick}
+      color="neutral"
     >
       <span className="flex flex-row items-center justify-center">
         <OdsText>{t('commitment_month', { value: duration })}</OdsText>
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 9cadb57534ec..8f627afeda6e 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
@@ -1,4 +1,4 @@
-import { usePciUrl } from '@ovh-ux/manager-pci-common';
+import { QuantitySelector, usePciUrl } from '@ovh-ux/manager-pci-common';
 import { Subtitle } from '@ovh-ux/manager-react-components';
 import {
   ODS_BUTTON_VARIANT,
@@ -7,6 +7,7 @@ import {
   ODS_SPINNER_SIZE,
   OdsInputChangeEvent,
 } from '@ovhcloud/ods-components';
+
 import {
   OdsButton,
   OdsCard,
@@ -317,12 +318,17 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
           <OdsQuantity
             onOdsChange={(event: OdsInputChangeEvent) => {
               const newValue = Number(event.detail.value);
-              if (newValue >= 1 && newValue <= 1000) onChangeQuantity(newValue);
+              if (newValue >= 1 && newValue <= 1000) {
+                onChangeQuantity(newValue);
+              } else {
+                onChangeQuantity(1);
+              }
             }}
             value={quantity}
             min={1}
             max={1000}
             name="quantity"
+            isRequired
           />
         </OdsCard>
         <OdsMessage className="my-4" isDismissible={false}>
diff --git a/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx b/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx
index e9f84a9b8311..1eb796de13cf 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx
@@ -17,7 +17,7 @@ const SimpleTile: React.FC<React.PropsWithChildren<{
       },
       className,
     )}
-    color={'neutral'}
+    color="neutral"
     onClick={onClick}
   >
     {children}