Repository: ovh/manager
Pull request #15910: feat(pci-gateway): Reverse location and size step
Author: login: Tsiorifamonjena
Labels: name: feature
description: New feature
name: translation required
name: universe-public-cloud
Created: 2025-03-11T09:04:16Z | Merged: 2025-03-17T08:53:13Z

<!--
Hello 👋 Thank you for submitting a Pull Request.

Have any questions? Check out the contributing docs at https://github.com/ovh/manager/blob/master/CONTRIBUTING.md

Please read the following before submitting:

- Keep your PR as small as possible to make easy reviews.
- Commits are signed-off.
- Update only Messages_fr_FR.json locales for any content changes.
- Lint has passed locally.
- Standalone app was ran and tested locally.
- Ticket reference is mentioned in linked commits (internal only).
- Breaking change is mentioned in relevant commits.
- Limit your PR to one type (build, ci, docs, feat, fix, perf, refactor, revert, style, test or release)
-->

## Description

<!-- Write a brief description of the changes introduced by this PR -->


<!-- Provide Jira ticket or Github issue -->
Ticket Reference: #TAPC-2990

This PR reverse the location and size step

## Additional Information

<!-- 
Mention any other information relevant to the PRs. It can be,

- link dependencies of PR
- Translations ticket reference
- Screenshots to better explain the change
 -->



Diff:
diff --git a/packages/manager/apps/pci-gateway/public/translations/catalog-selector/Messages_fr_FR.json b/packages/manager/apps/pci-gateway/public/translations/catalog-selector/Messages_fr_FR.json
index 3ccdb408d5a1..0fc227c44f85 100644
--- a/packages/manager/apps/pci-gateway/public/translations/catalog-selector/Messages_fr_FR.json
+++ b/packages/manager/apps/pci-gateway/public/translations/catalog-selector/Messages_fr_FR.json
@@ -5,6 +5,6 @@
   "pci_projects_project_gateways_model_selector_size": "Taille",
   "pci_projects_project_gateways_model_selector_bandwidth": "Jusqu'à {{bandwidth}}",
   "pci_projects_project_gateways_model_selector_catalog_price": "Prix :",
-  "pci_projects_project_gateways_model_selector_bandwidth_unit_size_mbps": " Mbps",
-  "pci_projects_project_gateways_model_selector_bandwidth_unit_size_gbps": " Gbps"
+  "pci_projects_project_gateways_model_selector_bandwidth_unit_size_mbps": "Jusqu'à {{bandwidth}} Mbps",
+  "pci_projects_project_gateways_model_selector_bandwidth_unit_size_gbps": "Jusqu'à {{bandwidth}} Gbps"
 }
diff --git a/packages/manager/apps/pci-gateway/src/pages/add/AddGateway.page.tsx b/packages/manager/apps/pci-gateway/src/pages/add/AddGateway.page.tsx
index ef3fa6d25b7c..4facda705d30 100644
--- a/packages/manager/apps/pci-gateway/src/pages/add/AddGateway.page.tsx
+++ b/packages/manager/apps/pci-gateway/src/pages/add/AddGateway.page.tsx
@@ -3,10 +3,11 @@ import {
   OsdsDivider,
   OsdsIcon,
   OsdsLink,
+  OsdsSpinner,
   OsdsText,
 } from '@ovhcloud/ods-components/react';
 import { useHref, useParams } from 'react-router-dom';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   ODS_THEME_COLOR_INTENT,
@@ -35,6 +36,7 @@ import { useNewGatewayStore } from '@/pages/add/useStore';
 import { PUBLIC_GATEWAYS_READ_MORE_GUIDE } from '@/constants';
 import { ACTION_PREFIX } from '@/tracking.constants';
 import HidePreloader from '@/core/HidePreloader';
+import { useGatewayHourlyAddons } from '@/api/hooks/useGateways/useGateways';
 
 export default function AddGatewayPage(): JSX.Element {
   const { t } = useTranslation('common');
@@ -52,6 +54,16 @@ export default function AddGatewayPage(): JSX.Element {
     PUBLIC_GATEWAYS_READ_MORE_GUIDE.ALL_GUIDE[ovhSubsidiary] ||
     PUBLIC_GATEWAYS_READ_MORE_GUIDE.ALL_GUIDE.DEFAULT;
 
+  const { addons, isFetching: isAddonsFetching } = useGatewayHourlyAddons(
+    ovhSubsidiary,
+    projectId,
+  );
+
+  const regions = useMemo(
+    () => addons.flatMap((addon) => addon.regions || []),
+    [addons],
+  );
+
   // reset form on page load
   useEffect(() => {
     store.reset();
@@ -164,11 +176,17 @@ export default function AddGatewayPage(): JSX.Element {
         <PciDiscoveryBanner project={project} />
       </div>
 
-      <div className="grid grid-cols-1 gap-4">
-        <SizeStep />
-        <LocationStep />
-        <NetworkStep />
-      </div>
+      {isAddonsFetching ? (
+        <div className="text-center">
+          <OsdsSpinner inline />
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4">
+          <LocationStep regions={regions} />
+          <SizeStep />
+          <NetworkStep />
+        </div>
+      )}
     </>
   );
 }
diff --git a/packages/manager/apps/pci-gateway/src/pages/add/LocationStep.tsx b/packages/manager/apps/pci-gateway/src/pages/add/LocationStep.tsx
index 71ac12c7d8a4..a52b4b796c0e 100644
--- a/packages/manager/apps/pci-gateway/src/pages/add/LocationStep.tsx
+++ b/packages/manager/apps/pci-gateway/src/pages/add/LocationStep.tsx
@@ -5,8 +5,8 @@ import {
   PCICommonContext,
 } from '@ovh-ux/manager-pci-common';
 import { useTranslation } from 'react-i18next';
-import { useContext, useEffect, useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useContext, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import { OsdsIcon, OsdsLink, OsdsText } from '@ovhcloud/ods-components/react';
 import {
   ODS_THEME_COLOR_INTENT,
@@ -17,16 +17,9 @@ import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
 import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { StepsEnum, useNewGatewayStore } from '@/pages/add/useStore';
-import { TAvailableRegion, useData } from '@/api/hooks/data';
-import { RegionType } from '@/types/region';
+import { RegionType, TProductAvailabilityRegion } from '@/types/region';
 
-type IState = {
-  regions: TAvailableRegion[];
-  region: TAvailableRegion;
-  regionsLink: string;
-};
-
-const isRegionWith3AZ = (regions: TAvailableRegion[]) =>
+const isRegionWith3AZ = (regions: TProductAvailabilityRegion[]) =>
   regions.some((region) => region.type === RegionType['3AZ']);
 
 /**
@@ -36,67 +29,24 @@ const isRegionWith3AZ = (regions: TAvailableRegion[]) =>
  * Not in migration scope
  * TODO : move groups(continent) from translation files
  */
-export const LocationStep = () => {
+export const LocationStep = ({
+  regions,
+}: {
+  regions: TProductAvailabilityRegion[];
+}) => {
   const { t } = useTranslation(['stepper', 'add']);
   const { projectId } = useParams();
-  const [searchParams] = useSearchParams();
   const { tracking } = useContext(ShellContext).shell;
   const store = useNewGatewayStore();
 
-  const sizes = useData(projectId);
-
-  const [state, setState] = useState<IState>({
-    region: undefined,
-    regions: [],
-    regionsLink: '',
-  });
-
-  useEffect(() => {
-    setState((prev) => ({
-      ...prev,
-      regions:
-        sizes.find((size) => size.payload === store.form.size)
-          ?.availableRegions || [],
-    }));
-  }, [sizes, store.form.size]);
-
-  useEffect(() => {
-    setState((prev) => ({ ...prev, regionsLink: `${projectId}/regions` }));
-  }, [projectId]);
-
-  useEffect(() => {
-    setState((prev) => ({
-      ...prev,
-      region: state.regions.find(
-        (region) => region.name === store.form.regionName,
-      ),
-    }));
-  }, [store.form.regionName]);
-
-  useEffect(() => {
-    const regionName = searchParams.get('region');
-    if (regionName) {
-      const targetRegion = state.regions.find(
-        (region) => region.name === regionName,
-      );
-      if (targetRegion) {
-        setState((prev) => ({
-          ...prev,
-          region: targetRegion,
-        }));
-        store.updateForm.regionName(targetRegion.name);
-      }
-    }
-  }, [searchParams, state.regions]);
-
-  const has3AZ = useMemo(() => isRegionWith3AZ(state.regions), [state.regions]);
+  const has3AZ = useMemo(() => isRegionWith3AZ(regions), [regions]);
 
   const metaProps = usePCICommonContextFactory({ has3AZ });
 
   return (
     <StepComponent
       id={StepsEnum.LOCATION}
-      order={2}
+      order={1}
       isOpen={store.steps.get(StepsEnum.LOCATION).isOpen}
       isChecked={store.steps.get(StepsEnum.LOCATION).isChecked}
       isLocked={store.steps.get(StepsEnum.LOCATION).isLocked}
@@ -122,29 +72,31 @@ export const LocationStep = () => {
         </OsdsText>
       }
       next={{
-        action: store.form.regionName
-          ? (id) => {
-              store.updateStep.check(id as StepsEnum);
-              store.updateStep.lock(id as StepsEnum);
-              store.updateStep.open(StepsEnum.NETWORK);
-              tracking.trackClick({
-                name: 'public-gateway_add_select-region',
-                type: 'action',
-              });
-            }
-          : undefined,
-        label: t('stepper:Next'),
-        isDisabled: !state.region?.enabled,
+        action: (id) => {
+          store.updateStep.check(id as StepsEnum);
+          store.updateStep.lock(id as StepsEnum);
+          store.updateStep.open(StepsEnum.SIZE);
+          tracking.trackClick({
+            name: 'public-gateway_add_select-region',
+            type: 'action',
+          });
+        },
+        label: t('stepper:common_stepper_next_button_label'),
+        isDisabled: !store.form.regionName,
       }}
       edit={{
         action: (id) => {
           store.updateStep.unCheck(id as StepsEnum);
           store.updateStep.unlock(id as StepsEnum);
 
-          store.updateStep.close(StepsEnum.NETWORK);
+          store.updateForm.regionName(undefined);
+          store.updateStep.close(StepsEnum.SIZE);
+          store.updateStep.unCheck(StepsEnum.SIZE);
+          store.updateStep.unlock(StepsEnum.SIZE);
 
           store.updateForm.name(undefined);
           store.updateForm.network(undefined, undefined);
+          store.updateStep.close(StepsEnum.NETWORK);
         },
         label: t('stepper:common_stepper_modify_this_step'),
         isDisabled: false,
@@ -155,7 +107,7 @@ export const LocationStep = () => {
           projectId={projectId}
           onSelectRegion={(region) => store.updateForm.regionName(region?.name)}
           regionFilter={(r) =>
-            r.isMacro || state.regions.some(({ name }) => name === r.name)
+            r.isMacro || regions.some(({ name }) => name === r.name)
           }
         />
       </PCICommonContext.Provider>
diff --git a/packages/manager/apps/pci-gateway/src/pages/add/SizeStep.tsx b/packages/manager/apps/pci-gateway/src/pages/add/SizeStep.tsx
index 6d6b91f450c7..9095a3e29d8c 100644
--- a/packages/manager/apps/pci-gateway/src/pages/add/SizeStep.tsx
+++ b/packages/manager/apps/pci-gateway/src/pages/add/SizeStep.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
 import { OsdsText } from '@ovhcloud/ods-components/react';
 import {
   StepComponent,
@@ -15,90 +15,87 @@ import {
 import { useParams } from 'react-router-dom';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { StepsEnum, useNewGatewayStore } from '@/pages/add/useStore';
-import { TSizeItem, useData } from '@/api/hooks/data';
+import { useRegionGatewayAddons } from '@/api/hooks/useGateways/useGateways';
+import { TProductAddonDetail } from '@/types/addon.type';
 
 export const SizeStep = (): JSX.Element => {
   const { projectId } = useParams();
 
-  const { t: tAdd } = useTranslation('add');
-  const { t: tStepper } = useTranslation('stepper');
+  const {
+    environment,
+    shell: { tracking },
+  } = useContext(ShellContext);
+
+  const { ovhSubsidiary } = environment.getUser();
 
-  const sizes = useData(projectId);
-  const [size, setSize] = useState<TSizeItem>(undefined);
+  const { t } = useTranslation(['add', 'stepper', 'catalog-selector']);
 
-  const { tracking } = useContext(ShellContext).shell;
+  const [size, setSize] = useState<TProductAddonDetail>();
   const store = useNewGatewayStore();
 
+  const addons = useRegionGatewayAddons(
+    ovhSubsidiary,
+    projectId,
+    store.form.regionName,
+  );
+
   const {
     getFormattedHourlyCatalogPrice,
     getFormattedMonthlyCatalogPrice,
   } = useCatalogPrice(4);
 
-  useEffect(() => {
-    if (sizes.length) {
-      store.updateForm.size(sizes[0].payload);
-    }
-  }, [sizes]);
-
-  useEffect(() => {
-    setSize(sizes.find(($size) => $size.payload === store.form.size));
-  }, [store.form.size, sizes]);
-
   return (
     <StepComponent
       id={StepsEnum.SIZE}
-      order={1}
+      order={2}
       isOpen={store.steps.get(StepsEnum.SIZE).isOpen}
       isChecked={store.steps.get(StepsEnum.SIZE).isChecked}
       isLocked={store.steps.get(StepsEnum.SIZE).isLocked}
-      title={tAdd('pci_projects_project_public_gateways_add_size_sub_title')}
+      title={t('pci_projects_project_public_gateways_add_size_sub_title')}
       subtitle={
         <OsdsText
           level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
           size={ODS_THEME_TYPOGRAPHY_SIZE._400}
           color={ODS_THEME_COLOR_INTENT.text}
         >
-          {tAdd('pci_projects_project_public_gateways_add_size_info')}
+          {t('pci_projects_project_public_gateways_add_size_info')}
         </OsdsText>
       }
       next={{
-        action: store.form.size
-          ? (id) => {
-              store.updateStep.check(id as StepsEnum);
-              store.updateStep.lock(id as StepsEnum);
-              store.updateStep.open(StepsEnum.LOCATION);
-              tracking.trackClick({
-                name: 'public-gateway_add_select-type',
-                type: 'action',
-              });
-            }
-          : undefined,
-        label: tStepper('common_stepper_next_button_label'),
-        isDisabled: false,
+        action: (id) => {
+          store.updateStep.check(id as StepsEnum);
+          store.updateStep.lock(id as StepsEnum);
+          store.updateStep.open(StepsEnum.NETWORK);
+          tracking.trackClick({
+            name: 'public-gateway_add_select-type',
+            type: 'action',
+          });
+        },
+        label: t('stepper:common_stepper_next_button_label'),
+        isDisabled: !store.form.size,
       }}
       edit={{
         action: (id) => {
           store.updateStep.unCheck(id as StepsEnum);
           store.updateStep.unlock(id as StepsEnum);
 
-          store.updateForm.regionName(undefined);
-          store.updateStep.close(StepsEnum.LOCATION);
-          store.updateStep.unCheck(StepsEnum.LOCATION);
-          store.updateStep.unlock(StepsEnum.LOCATION);
+          store.updateStep.unCheck(id as StepsEnum);
+          store.updateStep.unlock(id as StepsEnum);
+
+          store.updateStep.close(StepsEnum.NETWORK);
 
           store.updateForm.name(undefined);
           store.updateForm.network(undefined, undefined);
-          store.updateStep.close(StepsEnum.NETWORK);
         },
-        label: tStepper('common_stepper_modify_this_step'),
+        label: t('stepper:common_stepper_modify_this_step'),
         isDisabled: false,
       }}
     >
-      <TilesInputComponent<TSizeItem, string, string>
+      <TilesInputComponent<TProductAddonDetail, string, string>
         id="gateway-size-input"
         value={size}
-        items={sizes}
-        label={(item: TSizeItem) => (
+        items={addons}
+        label={(item: TProductAddonDetail) => (
           <div className="grid grid-cols-1 gap-2 text-left text w-full">
             <div className="">
               <OsdsText
@@ -106,7 +103,10 @@ export const SizeStep = (): JSX.Element => {
                 size={ODS_THEME_TYPOGRAPHY_SIZE._200}
                 color={ODS_THEME_COLOR_INTENT.text}
               >
-                {item.label}
+                {t(
+                  'catalog-selector:pci_projects_project_gateways_model_selector_size',
+                )}{' '}
+                {item.size.toUpperCase()}
               </OsdsText>
             </div>
             <div className="text-sm font-normal">
@@ -115,7 +115,15 @@ export const SizeStep = (): JSX.Element => {
                 size={ODS_THEME_TYPOGRAPHY_SIZE._200}
                 color={ODS_THEME_COLOR_INTENT.text}
               >
-                {item.bandwidthLabel}
+                {item.bandwidth > 1000
+                  ? t(
+                      'catalog-selector:pci_projects_project_gateways_model_selector_bandwidth_unit_size_gbps',
+                      { bandwidth: item.bandwidth / 1000 },
+                    )
+                  : t(
+                      'catalog-selector:pci_projects_project_gateways_model_selector_bandwidth_unit_size_mbps',
+                      { bandwidth: item.bandwidth },
+                    )}
               </OsdsText>
             </div>
             <hr className="w-full border-solid border-0 border-b border-[--ods-color-blue-200]" />
@@ -125,7 +133,7 @@ export const SizeStep = (): JSX.Element => {
                 size={ODS_THEME_TYPOGRAPHY_SIZE._200}
                 color={ODS_THEME_COLOR_INTENT.text}
               >
-                {getFormattedHourlyCatalogPrice(item.hourlyPrice)}
+                {getFormattedHourlyCatalogPrice(item.price)}
               </OsdsText>
             </div>
             <div className="text-sm text-center font-normal">
@@ -136,14 +144,15 @@ export const SizeStep = (): JSX.Element => {
               >
                 ~{' '}
                 {getFormattedMonthlyCatalogPrice(
-                  convertHourlyPriceToMonthly(item.hourlyPrice),
+                  convertHourlyPriceToMonthly(item.price),
                 )}
               </OsdsText>
             </div>
           </div>
         )}
         onInput={(item) => {
-          store.updateForm.size(item.payload);
+          store.updateForm.size(item.size);
+          setSize(addons.find((addon) => addon.size === item.size));
         }}
       />
     </StepComponent>
diff --git a/packages/manager/apps/pci-gateway/src/pages/add/useStore.ts b/packages/manager/apps/pci-gateway/src/pages/add/useStore.ts
index 075fd996bd45..06d129bd2ce4 100644
--- a/packages/manager/apps/pci-gateway/src/pages/add/useStore.ts
+++ b/packages/manager/apps/pci-gateway/src/pages/add/useStore.ts
@@ -56,7 +56,7 @@ type TStore = {
 const getInitialSteps = () =>
   new Map([
     [
-      StepsEnum.SIZE,
+      StepsEnum.LOCATION,
       {
         isOpen: true,
         isChecked: false,
@@ -64,7 +64,7 @@ const getInitialSteps = () =>
       },
     ],
     [
-      StepsEnum.LOCATION,
+      StepsEnum.SIZE,
       {
         isOpen: false,
         isChecked: false,
@@ -86,7 +86,7 @@ const initialState = {
   form: {
     name: undefined,
     size: undefined,
-    regionName: undefined,
+    regionName: '',
     network: {
       id: undefined,
       subnetId: undefined,
diff --git a/packages/manager/apps/pci-gateway/src/types/region.ts b/packages/manager/apps/pci-gateway/src/types/region.ts
index 3de16cbeb600..77e9ae3eb9d8 100644
--- a/packages/manager/apps/pci-gateway/src/types/region.ts
+++ b/packages/manager/apps/pci-gateway/src/types/region.ts
@@ -3,3 +3,11 @@ export enum RegionType {
   '3AZ' = 'region-3-az',
   LZ = 'localzone',
 }
+
+export type TProductAvailabilityRegion = {
+  continentCode: string;
+  datacenter: string;
+  enabled: boolean;
+  name: string;
+  type: 'localzone' | 'region' | 'region-3-az';
+};


Reviews:
user: login: SimonChaumet
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T16:16:38Z
user: login: Tsiorifamonjena
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T16:37:12Z
user: login: fredericvilcot
body: 👍🏻
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T17:06:08Z

Review comments:
diff_hunk: @@ -165,9 +177,17 @@ export default function AddGatewayPage(): JSX.Element {
       </div>
 
       <div className="grid grid-cols-1 gap-4">
-        <SizeStep />
-        <LocationStep />
-        <NetworkStep />
+        {isAddonsFetching ? (
+          <div className="text-center">
+            <OsdsSpinner inline />
+          </div>
+        ) : (
+          <>
path: packages/manager/apps/pci-gateway/src/pages/add/AddGateway.page.tsx
user: login: SimonChaumet
body: Try to avoid fragments when you can use a div or span
created_at: 2025-03-12T16:13:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -15,20 +15,31 @@ import {
 import { useParams } from 'react-router-dom';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { StepsEnum, useNewGatewayStore } from '@/pages/add/useStore';
-import { TSizeItem, useData } from '@/api/hooks/data';
+import { useData } from '@/api/hooks/data';
+import { useRegionGatewayAddons } from '@/api/hooks/useGateways/useGateways';
+import { TProductAddonDetail } from '@/types/addon.type';
 
-export const SizeStep = (): JSX.Element => {
+export const SizeStep = ({
+  ovhSubsidiary,
path: packages/manager/apps/pci-gateway/src/pages/add/SizeStep.tsx
user: login: SimonChaumet
body: I think using the hook directly would be more readable
created_at: 2025-03-12T16:14:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -15,20 +15,31 @@ import {
 import { useParams } from 'react-router-dom';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { StepsEnum, useNewGatewayStore } from '@/pages/add/useStore';
-import { TSizeItem, useData } from '@/api/hooks/data';
+import { useData } from '@/api/hooks/data';
+import { useRegionGatewayAddons } from '@/api/hooks/useGateways/useGateways';
+import { TProductAddonDetail } from '@/types/addon.type';
 
-export const SizeStep = (): JSX.Element => {
+export const SizeStep = ({
+  ovhSubsidiary,
+}: {
+  ovhSubsidiary: string;
+}): JSX.Element => {
   const { projectId } = useParams();
 
-  const { t: tAdd } = useTranslation('add');
-  const { t: tStepper } = useTranslation('stepper');
+  const { t } = useTranslation(['add', 'stepper', 'catalog-selector']);
 
   const sizes = useData(projectId);
-  const [size, setSize] = useState<TSizeItem>(undefined);
+  const [size, setSize] = useState<TProductAddonDetail>();
 
   const { tracking } = useContext(ShellContext).shell;
   const store = useNewGatewayStore();
 
+  const addons = useRegionGatewayAddons(
+    ovhSubsidiary,
+    projectId,
+    store.form.regionName || '',
path: packages/manager/apps/pci-gateway/src/pages/add/SizeStep.tsx
user: login: SimonChaumet
body: is it possible that regionName is null at this step ?
created_at: 2025-03-12T16:15:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -15,20 +15,31 @@ import {
 import { useParams } from 'react-router-dom';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { StepsEnum, useNewGatewayStore } from '@/pages/add/useStore';
-import { TSizeItem, useData } from '@/api/hooks/data';
+import { useData } from '@/api/hooks/data';
+import { useRegionGatewayAddons } from '@/api/hooks/useGateways/useGateways';
+import { TProductAddonDetail } from '@/types/addon.type';
 
-export const SizeStep = (): JSX.Element => {
+export const SizeStep = ({
+  ovhSubsidiary,
+}: {
+  ovhSubsidiary: string;
+}): JSX.Element => {
   const { projectId } = useParams();
 
-  const { t: tAdd } = useTranslation('add');
-  const { t: tStepper } = useTranslation('stepper');
+  const { t } = useTranslation(['add', 'stepper', 'catalog-selector']);
 
   const sizes = useData(projectId);
-  const [size, setSize] = useState<TSizeItem>(undefined);
+  const [size, setSize] = useState<TProductAddonDetail>();
 
   const { tracking } = useContext(ShellContext).shell;
   const store = useNewGatewayStore();
 
+  const addons = useRegionGatewayAddons(
+    ovhSubsidiary,
+    projectId,
+    store.form.regionName || '',
path: packages/manager/apps/pci-gateway/src/pages/add/SizeStep.tsx
user: login: Tsiorifamonjena
body: I change the default value directly from store. It will empty until user select a region
created_at: 2025-03-14T16:37:12Z
author_association: CONTRIBUTOR

PR comments:
user: login: SimonChaumet
created_at: 2025-03-12T16:16:53Z
body: Good work !
author_association: CONTRIBUTOR
user: login: sonarqubecloud[bot]
created_at: 2025-03-14T16:38:26Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=ovh_manager&pullRequest=15910) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [1 New issue](https://sonarcloud.io/project/issues?id=ovh_manager&pullRequest=15910&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=ovh_manager&pullRequest=15910&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=ovh_manager&pullRequest=15910&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=ovh_manager&pullRequest=15910&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=ovh_manager&pullRequest=15910&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=ovh_manager&pullRequest=15910)


author_association: NONE