fix(network-ip): fix order button display and geolocation reset on quantity change

ref: #MANAGER-19813

Signed-off-by: Fleur Castel <fleur.castel.ext@corp.ovh.com>

Author: Fleur Castel

packages/manager/apps/ips/src/data/hooks/catalog/useAvailableGeolocationFromPlanCode.ts

@@ -14,19 +14,31 @@ export const useAvailableGeolocationFromPlanCode = ({
   planCode,
   serviceName,
   serviceType,
+  ipQuantity,
 }: {
   planCode?: string;
   serviceName?: string | null;
   serviceType?: ServiceType;
+  ipQuantity?: number;
 }) => {
   const { environment } = React.useContext(ShellContext);
+  const hasMultipleIps = (ipQuantity ?? 1) > 1;
   const { data, ...query } = useCatalogIps({
     subsidiary: environment.user.ovhSubsidiary,
     enabled:
       !!serviceType &&
-      ![ServiceType.dedicatedCloud, ServiceType.vps].includes(serviceType),
+      (![ServiceType.dedicatedCloud, ServiceType.vps].includes(serviceType) ||
+        hasMultipleIps),
   });
 
+  const catalogGeolocations =
+    data?.data?.plans
+      ?.find((plan: CatalogIpPlan) => plan.planCode === planCode)
+      ?.details.product.configurations.find(
+        (config: CatalogIpConfiguration) => config.name === 'country',
+      )
+      ?.values.map((v: string) => v.toLowerCase()) || [];
+
   const { data: dedicatedServerData, ...dedicatedServerQuery } =
     useDedicatedServerGeolocations({
       serviceName,
@@ -51,28 +63,28 @@ export const useAvailableGeolocationFromPlanCode = ({
     case ServiceType.server:
       return {
         ...dedicatedServerQuery,
-        geolocations: dedicatedServerData?.data || [],
+        geolocations: hasMultipleIps
+          ? catalogGeolocations
+          : dedicatedServerData?.data || [],
       };
     case ServiceType.dedicatedCloud:
       return {
         ...pccQuery,
-        geolocations: pccData?.data || [],
+        geolocations: hasMultipleIps
+          ? catalogGeolocations
+          : pccData?.data || [],
       };
     case ServiceType.vps:
       return {
         ...vpsQuery,
-        geolocations: vpsData?.data || [],
+        geolocations: hasMultipleIps
+          ? catalogGeolocations
+          : vpsData?.data || [],
       };
     default:
       return {
         ...query,
-        geolocations:
-          data?.data?.plans
-            ?.find((plan: CatalogIpPlan) => plan.planCode === planCode)
-            ?.details.product.configurations.find(
-              (config: CatalogIpConfiguration) => config.name === 'country',
-            )
-            ?.values.map((v: string) => v.toLowerCase()) || [],
+        geolocations: catalogGeolocations,
       };
   }
 };

packages/manager/apps/ips/src/pages/order/sections/GeolocationSection.component.tsx

@@ -27,19 +27,22 @@ export const GeolocationSection: React.FC = () => {
     selectedServiceType,
     setSelectedGeolocation,
     selectedOffer,
+    ipQuantity,
   } = React.useContext(OrderContext);
   const { t } = useTranslation(TRANSLATION_NAMESPACES.order);
   const { trackClick } = useOvhTracking();
   const { geolocations } = useAvailableGeolocationFromPlanCode({
     serviceName: selectedService,
     serviceType: selectedServiceType,
     planCode: selectedPlanCode,
+    ipQuantity,
   });
   const isDisabled =
     !geolocations ||
     geolocations.length < 2 ||
     (selectedOffer === IpOffer.additionalIp &&
-      ServiceType.ipParking === selectedServiceType);
+      ServiceType.ipParking === selectedServiceType &&
+      ipQuantity === 1);
 
   return (
     <OrderSection

packages/manager/apps/ips/src/pages/order/sections/OfferSelectionSection.component.tsx

@@ -103,12 +103,23 @@ export const OfferSelectionSection: React.FC = () => {
               });
             }}
           >
-            <div className="flex min-h-14 flex-col justify-center">
+            <div
+              className="flex min-h-14 flex-col justify-center"
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={(event) => event.stopPropagation()}
+              role="presentation"
+            >
               <OdsQuantity
                 name="additional_ip_quantity"
                 min={MIN_IP_QUANTITY}
                 max={MAX_IP_QUANTITY}
-                onOdsChange={(event) => setIpQuantity(event.target.value)}
+                onOdsChange={(event) => {
+                  if (selectedOffer !== IpOffer.additionalIp) {
+                    setSelectedOffer(IpOffer.additionalIp);
+                    setSelectedPlanCode(additionalIpPlanCode);
+                  }
+                  setIpQuantity(Number(event.target.value));
+                }}
                 value={ipQuantity}
               />
               <OdsText preset={ODS_TEXT_PRESET.heading4}>