feat(pci.public-ip): select default gatway by region and lowest price

ref: TAPC-2602
Signed-off-by: tsiorifamonjena <[email protected]>

packages/manager/apps/pci-public-ip/public/translations/order/Messages_fr_FR.json

@@ -28,7 +28,7 @@
   "pci_additional_ip_create_step_select_region_description_floating_ip": "Vous ne trouvez pas la région que vous désirez dans la liste ? Pour en savoir plus sur la disponibilité des produits par région, <a href=\"{{ guideLink }}\" target=\"_blank\" data-track-name=\"{{ trackLabel }}\" data-track-on=\"click\" data-track-type=\"action\">cliquez ici.</a>",
   "pci_additional_ip_create_step_attach_instance_description_floating_ip": "Seules les instances avec des réseaux privés sont affichées",
   "pci_additional_ip_create_no_instance_message_floating_ip": "Aucune instance avec réseau privé n'a été trouvée dans la région sélectionnée. Veuillez en créer un avant d'attacher une floating IP.",
-  "pci_additional_ip_create_summary_step_missing_components_description": "Nous avons détecté des composants manquants.",
+  "pci_additional_ip_create_summary_step_missing_components_description": "Nous avons détecté des composants manquants",
   "pci_additional_ip_create_summary_step_gateway_name": "Une nouvelle instance Gateway est en cours de création dans le datacenter {{ region }}.",
   "pci_additional_ip_create_summary_step_gateway_size_and_price": "La taille sélectionnée est : {{ size }}",
   "pci_additional_ip_create_summary_step_price": "au prix de",

packages/manager/apps/pci-public-ip/src/api/hooks/useDefaultAvailableGateway.ts

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { TCatalog } from '@ovh-ux/manager-pci-common';
+import { useCloudCatalog } from './catalog/useCloudCatalog';
+import { useAvailableHourlyPlansRegion } from './useRegions';
+
+const getGatewayWithLowestPrice = (catalog: TCatalog, plans: string[]) => {
+  const gatewayProducts = (catalog.addons || [])
+    .filter((addon) => plans.includes(addon.planCode))
+    .sort(
+      ({ pricings: [{ price: priceA }] }, { pricings: [{ price: priceB }] }) =>
+        Number(priceA) - Number(priceB),
+    )
+    .filter(
+      ({ product }, _index: number, arr: { product: string }[]) =>
+        product === arr[0].product,
+    );
+  const [monthlyPriceObj] =
+    (gatewayProducts || [])?.find(({ planCode }) => planCode?.includes('month'))
+      ?.pricings || [];
+  const [hourlyPriceObj] =
+    (gatewayProducts || []).find(({ planCode }) => planCode.includes('hour'))
+      ?.pricings || [];
+
+  const size = gatewayProducts[0]?.product
+    .split('-')
+    .slice(-1)
+    .join();
+  const pricePerMonth = monthlyPriceObj?.price;
+  const pricePerHour = hourlyPriceObj?.price;
+
+  return {
+    size,
+    price: { hour: Number(pricePerHour), month: Number(pricePerMonth) },
+  };
+};
+
+// TODO: similar use case in network and compute, think to move it to pci-common
+export const useDefaultAvailableGateway = (region: string) => {
+  const { data } = useCloudCatalog();
+
+  const plans = useAvailableHourlyPlansRegion(region);
+
+  return useMemo(() => (data ? getGatewayWithLowestPrice(data, plans) : null), [
+    data,
+    plans,
+  ]);
+};

packages/manager/apps/pci-public-ip/src/api/hooks/useRegions.ts

@@ -1,4 +1,6 @@
+import { useMemo } from 'react';
 import { fetchIcebergV6 } from '@ovh-ux/manager-core-api';
+import { useProductAvailability, useProject } from '@ovh-ux/manager-pci-common';
 import { useQuery } from '@tanstack/react-query';
 
 export interface Region {
@@ -22,3 +24,20 @@ export const getRegionsQuery = (projectId: string) => ({
 
 export const useRegions = (projectId: string) =>
   useQuery(getRegionsQuery(projectId));
+
+export const useAvailableHourlyPlansRegion = (regionName: string) => {
+  const { data: project } = useProject();
+  const { data } = useProductAvailability(project.project_id, {
+    addonFamily: 'gateway',
+  });
+
+  return useMemo(() => {
+    const plans = data?.plans.filter(({ code }) => code.includes('hour')) || [];
+    const plansRegion =
+      plans.filter((plan) =>
+        plan.regions.some((region) => region.name === regionName),
+      ) || [];
+
+    return plansRegion.map((item) => item.code);
+  }, [data, regionName]);
+};

packages/manager/apps/pci-public-ip/src/pages/order/steps/FloatingIpSummary.tsx

@@ -16,7 +16,7 @@ import { useMe } from '@/api/hooks/useMe';
 import { useSubnets } from '@/api/hooks/useSubnets';
 import { useGateways } from '@/api/hooks/useGateways';
 import { TGateway } from '@/api/data/gateways';
-import { useSelectedGateway } from '@/api/hooks/useSelectedGateway';
+import { useDefaultAvailableGateway } from '@/api/hooks/useDefaultAvailableGateway';
 import { CatalogPriceComponent } from '@/components/CatalogPrice.component';
 
 export const FloatingIpSummary = ({
@@ -41,7 +41,7 @@ export const FloatingIpSummary = ({
     projectId,
     networkId,
   );
-  const { state: selectedGateway } = useSelectedGateway();
+  const selectedGateway = useDefaultAvailableGateway(ipRegion);
 
   const { t: tOrder } = useTranslation('order');
 
@@ -96,20 +96,8 @@ export const FloatingIpSummary = ({
                   >
                     {tOrder(
                       'pci_additional_ip_create_summary_step_missing_components_description',
-                    )}
-                  </OsdsText>
-                </p>
-                <p>
-                  <OsdsText
-                    color={ODS_THEME_COLOR_INTENT.text}
-                    className="font-sans"
-                  >
-                    {tOrder(
-                      'pci_additional_ip_create_summary_step_gateway_name',
-                      {
-                        region: ipRegion,
-                      },
-                    )}
+                    )}{' '}
+                    : <b> Gateway.</b>
                   </OsdsText>
                 </p>
                 {selectedGateway && (
@@ -125,22 +113,14 @@ export const FloatingIpSummary = ({
                       {tOrder(
                         'pci_additional_ip_create_summary_step_price',
                       )}{' '}
-                      <CatalogPriceComponent
-                        price={selectedGateway.price.month}
-                        user={me}
-                        interval="month"
-                        maximumFractionDigits={4}
-                        locale={context.environment.getUserLocale()}
-                      />{' '}
-                      {tOrder('pci_additional_ip_create_summary_step_that_is')}{' '}
                       <CatalogPriceComponent
                         price={selectedGateway.price.hour}
                         user={me}
                         maximumFractionDigits={4}
                         interval="hour"
                         locale={context.environment.getUserLocale()}
                       />
-                      <span>)*.</span>
+                      <span>).</span>
                     </OsdsText>
                   </p>
                 )}