feat(pci-file-storage): fix deployment mode pricing

aTurmo · aTurmo · commit 4b2dea695f9e · 2026-03-30T17:25:12.000+02:00
ref: #TAPC-6078

Signed-off-by: aTurmo &lt;adrien.turmo.ext@ovhcloud.com&gt;
diff --git a/packages/manager/apps/pci-file-storage/public/translations/create/Messages_de_DE.json b/packages/manager/apps/pci-file-storage/public/translations/create/Messages_de_DE.json
@@ -26,7 +26,8 @@
           "label": "3-AZ Region",
           "description": "Hochresiliente und hochverfügbare Bereitstellung in 3 Zonen."
         }
-      }
+      },
+      "leastPrice": "Ab {{price}} {{unit}}"
     },
     "macroRegion": {
       "title": "Standort auswählen"
diff --git a/packages/manager/apps/pci-file-storage/public/translations/create/Messages_en_GB.json b/packages/manager/apps/pci-file-storage/public/translations/create/Messages_en_GB.json
@@ -26,7 +26,8 @@
           "label": "3-AZ Region",
           "description": "High-resilience, high-availability deployment in 3 zones."
         }
-      }
+      },
+      "leastPrice": "From {{price}} {{unit}}"
     },
     "macroRegion": {
       "title": "Choose a location"
diff --git a/packages/manager/apps/pci-file-storage/public/translations/create/Messages_es_ES.json b/packages/manager/apps/pci-file-storage/public/translations/create/Messages_es_ES.json
@@ -26,7 +26,8 @@
           "label": "Región 3-AZ",
           "description": "Despliegue de alta resiliencia y alta disponibilidad en 3 zonas."
         }
-      }
+      },
+      "leastPrice": "Desde {{price}} {{unit}}"
     },
     "macroRegion": {
       "title": "Seleccione una localización"
diff --git a/packages/manager/apps/pci-file-storage/public/translations/create/Messages_fr_CA.json b/packages/manager/apps/pci-file-storage/public/translations/create/Messages_fr_CA.json
@@ -28,7 +28,8 @@
           "label": "Région 3-AZ",
           "description": "Déploiement haute résilience et haute disponibilité sur 3 zones."
         }
-      }
+      },
+      "leastPrice": "À partir de {{price}} {{unit}}"
     },
     "macroRegion": {
       "title": "Choisissez une localisation"
diff --git a/packages/manager/apps/pci-file-storage/public/translations/create/Messages_fr_FR.json b/packages/manager/apps/pci-file-storage/public/translations/create/Messages_fr_FR.json
@@ -28,7 +28,8 @@
           "label": "Région 3-AZ",
           "description": "Déploiement haute résilience et haute disponibilité sur 3 zones."
         }
-      }
+      },
+      "leastPrice": "À partir de {{price}} {{unit}}"
     },
     "macroRegion": {
       "title": "Choisissez une localisation"
diff --git a/packages/manager/apps/pci-file-storage/public/translations/create/Messages_it_IT.json b/packages/manager/apps/pci-file-storage/public/translations/create/Messages_it_IT.json
@@ -26,7 +26,8 @@
           "label": "Region 3-AZ",
           "description": "Deploy a resilienza elevata e alta disponibilità su 3 zone."
         }
-      }
+      },
+      "leastPrice": "A partire da {{price}} {{unit}}"
     },
     "macroRegion": {
       "title": "Scegli una localizzazione"
diff --git a/packages/manager/apps/pci-file-storage/public/translations/create/Messages_pl_PL.json b/packages/manager/apps/pci-file-storage/public/translations/create/Messages_pl_PL.json
@@ -26,7 +26,8 @@
           "label": "Region 3-AZ",
           "description": "Wdrożenia zapewniające odporność infrastruktury i wysoką dostępność w 3 strefach."
         }
-      }
+      },
+      "leastPrice": "Od {{price}} {{unit}}"
     },
     "macroRegion": {
       "title": "Wybierz lokalizację"
diff --git a/packages/manager/apps/pci-file-storage/public/translations/create/Messages_pt_PT.json b/packages/manager/apps/pci-file-storage/public/translations/create/Messages_pt_PT.json
@@ -26,7 +26,8 @@
           "label": "Região 3-AZ",
           "description": "Implementação de alta resiliência e alta disponibilidade em 3 zonas."
         }
-      }
+      },
+      "leastPrice": "A partir de {{price}} {{unit}}"
     },
     "macroRegion": {
       "title": "Escolha uma localização"
diff --git a/packages/manager/apps/pci-file-storage/src/__mocks__/dto/catalog.dto.mocks.ts b/packages/manager/apps/pci-file-storage/src/__mocks__/dto/catalog.dto.mocks.ts
@@ -87,12 +87,7 @@ export const CATALOG_SHARE = {
   },
   pricings: [
     {
-      regions: [
-        'RBX-A',
-        'SGP1',
-        'BHS5',
-        'DE1',
-      ],
+      regions: ['RBX-A', 'SGP1', 'BHS5', 'DE1'],
       price: 11900,
       interval: 'hour',
       specs: {
@@ -121,13 +116,7 @@ export const CATALOG_SHARE = {
       },
     },
     {
-      regions: [
-        'GRA7',
-        'GRA9',
-        'GRA11',
-        'SBG7',
-        'SBG5',
-      ],
+      regions: ['GRA7', 'GRA9', 'GRA11', 'SBG7', 'SBG5'],
       price: 22900,
       interval: 'hour',
       specs: {
@@ -147,7 +136,7 @@ export const CATALOG_SHARE = {
         },
         bandwidth: {
           guaranteed: false,
-          level: 0.30,
+          level: 0.3,
           min: 30,
           max: 1000,
           maxUnit: 'MB/s',
diff --git a/packages/manager/apps/pci-file-storage/src/adapters/catalog/right/__tests__/mapper.spec.ts b/packages/manager/apps/pci-file-storage/src/adapters/catalog/right/__tests__/mapper.spec.ts
@@ -191,12 +191,26 @@ describe('mapCatalogDTOToCatalog', () => {
     const standard1azVariantRBX = {
       capacity: { min: 150, max: 10240 },
       iops: { guaranteed: false, level: 24, max: 16_000, maxUnit: 'IOPS', unit: 'IOPS/GB' },
-      bandwidth: { guaranteed: false, level: 0.25, min: 25, max: 128, maxUnit: 'MB/s', unit: 'MB/s/GB' },
+      bandwidth: {
+        guaranteed: false,
+        level: 0.25,
+        min: 25,
+        max: 128,
+        maxUnit: 'MB/s',
+        unit: 'MB/s/GB',
+      },
     };
     const standard1azVariantGRA = {
       capacity: { min: 150, max: 20480 },
       iops: { guaranteed: false, level: 48, max: 20_000, maxUnit: 'IOPS', unit: 'IOPS/GB' },
-      bandwidth: { guaranteed: false, level: 0.3, min: 30, max: 1000, maxUnit: 'MB/s', unit: 'MB/s/GB' },
+      bandwidth: {
+        guaranteed: false,
+        level: 0.3,
+        min: 30,
+        max: 1000,
+        maxUnit: 'MB/s',
+        unit: 'MB/s/GB',
+      },
     };
     const standard2VariantData = { ...standard1azVariantRBX };
 
@@ -220,8 +234,12 @@ describe('mapCatalogDTOToCatalog', () => {
     expect(result.entities.shareSpecs.byId.get('publiccloud-share-standard2')).toEqual({
       name: 'publiccloud-share-standard2',
       microRegionIds: [
-        'EU-WEST-LZ-MRS-A', 'EU-CENTRAL-LZ-BUH-A', 'EU-SOUTH-LZ-MIL-A',
-        'EU-NORTH-LZ-CPH-A', 'EU-WEST-PAR', 'EU-SOUTH-MIL',
+        'EU-WEST-LZ-MRS-A',
+        'EU-CENTRAL-LZ-BUH-A',
+        'EU-SOUTH-LZ-MIL-A',
+        'EU-NORTH-LZ-CPH-A',
+        'EU-WEST-PAR',
+        'EU-SOUTH-MIL',
       ],
     });
 
@@ -259,7 +277,9 @@ describe('mapCatalogDTOToCatalog', () => {
       ...standard1azVariantGRA,
       pricing: { price: 22900, interval: 'hour' },
     });
-    expect(result.relations.shareSpecVariants.get('publiccloud-share-standard2::EU-WEST-LZ-MRS-A')).toEqual({
+    expect(
+      result.relations.shareSpecVariants.get('publiccloud-share-standard2::EU-WEST-LZ-MRS-A'),
+    ).toEqual({
       ...standard2VariantData,
       pricing: { price: 22900, interval: 'hour' },
     });
diff --git a/packages/manager/apps/pci-file-storage/src/domain/services/__tests__/catalog.service.spec.ts b/packages/manager/apps/pci-file-storage/src/domain/services/__tests__/catalog.service.spec.ts
@@ -1,10 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import {
-  TMacroRegion,
-  TMicroRegion,
-  TShareSpecVariant,
-} from '@/domain/entities/catalog.entity';
+import { TMacroRegion, TMicroRegion, TShareSpecVariant } from '@/domain/entities/catalog.entity';
 
 import {
   getMicroRegions,
diff --git a/packages/manager/apps/pci-file-storage/src/domain/services/catalog.service.ts b/packages/manager/apps/pci-file-storage/src/domain/services/catalog.service.ts
@@ -1,8 +1,4 @@
-import {
-  TMacroRegion,
-  TMicroRegion,
-  TShareSpecVariant,
-} from '@/domain/entities/catalog.entity';
+import { TMacroRegion, TMicroRegion, TShareSpecVariant } from '@/domain/entities/catalog.entity';
 import { isSizeValid } from '@/domain/services/share.service';
 
 export const isMicroRegionAvailable = (microRegion: TMicroRegion): boolean =>
diff --git a/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/ContinentSelection.component.spec.tsx b/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/ContinentSelection.component.spec.tsx
@@ -18,36 +18,40 @@ vi.mock('react-router-dom', () => ({
   useParams: () => ({ projectId: 'test-project-id' }),
 }));
 
-vi.mock('@ovhcloud/ods-react', () => ({
-  FormField: ({ children }: PropsWithChildren) => <div>{children}</div>,
-  FormFieldLabel: ({ children }: PropsWithChildren) => <label>{children}</label>,
-  Select: ({
-    onValueChange,
-    value,
-  }: {
-    onValueChange: ({ value }: { value: string[] }) => void;
-    value: string[];
-  }) => (
-    <div
-      role="combobox"
-      aria-label="continent-select"
-      data-value={JSON.stringify(value)}
-      onClick={() => onValueChange && onValueChange({ value: ['Europe'] })}
-    />
-  ),
-  SelectControl: () => <div />,
-  SelectContent: () => <div />,
-  Controller: ({ render, name }: FieldValues) => {
-    const formContext = useFormContext();
-    const field = {
-      value: formContext.watch(name) || null,
-      onChange: (value: string) => {
-        formContext.setValue(name, value);
-      },
-    };
-    return render({ field });
-  },
-}));
+vi.mock('@ovhcloud/ods-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@ovhcloud/ods-react')>();
+  return {
+    ...actual,
+    FormField: ({ children }: PropsWithChildren) => <div>{children}</div>,
+    FormFieldLabel: ({ children }: PropsWithChildren) => <label>{children}</label>,
+    Select: ({
+      onValueChange,
+      value,
+    }: {
+      onValueChange: ({ value }: { value: string[] }) => void;
+      value: string[];
+    }) => (
+      <div
+        role="combobox"
+        aria-label="continent-select"
+        data-value={JSON.stringify(value)}
+        onClick={() => onValueChange && onValueChange({ value: ['Europe'] })}
+      />
+    ),
+    SelectControl: () => <div />,
+    SelectContent: () => <div />,
+    Controller: ({ render, name }: FieldValues) => {
+      const formContext = useFormContext();
+      const field = {
+        value: formContext.watch(name) || null,
+        onChange: (value: string) => {
+          formContext.setValue(name, value);
+        },
+      };
+      return render({ field });
+    },
+  };
+});
 
 const mockUseShareCatalog = vi.mocked(useShareCatalog);
 
diff --git a/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/DeploymentModeCardPrice.component.spec.tsx b/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/DeploymentModeCardPrice.component.spec.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { DeploymentModeCardPrice } from '@/pages/create/components/localisation/deploymentMode/DeploymentModeCardPrice.component';
+import { TDeploymentModePrice } from '@/pages/create/view-model/shareCatalog.view-model';
+
+vi.mock('@ovh-ux/muk', () => ({
+  useCatalogPrice: () => ({
+    getFormattedMonthlyCatalogPrice: (price: number) => `€${price}`,
+  }),
+}));
+
+vi.mock('@ovhcloud/ods-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@ovhcloud/ods-react')>();
+  return {
+    ...actual,
+    Text: ({ children, className }: React.PropsWithChildren<{ className?: string }>) => (
+      <span className={className}>{children}</span>
+    ),
+  };
+});
+
+describe('DeploymentModeCardPrice', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render nothing when monthlyPrice is null', () => {
+    const { container } = render(<DeploymentModeCardPrice monthlyPrice={null} />);
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should render leastPrice translation key when monthlyPrice is provided', () => {
+    const monthlyPrice: TDeploymentModePrice = {
+      value: 72000,
+      isLeastPrice: true,
+    };
+
+    render(<DeploymentModeCardPrice monthlyPrice={monthlyPrice} />);
+
+    expect(screen.getByText(/create:localisation\.deploymentMode\.leastPrice/)).toBeVisible();
+  });
+
+  it('should apply primary-700 color class', () => {
+    const monthlyPrice: TDeploymentModePrice = {
+      value: 36000,
+      isLeastPrice: false,
+    };
+
+    render(<DeploymentModeCardPrice monthlyPrice={monthlyPrice} />);
+
+    const el = screen.getByText(/create:localisation\.deploymentMode\.leastPrice/);
+    expect(el.className).toContain('text-[--ods-color-primary-700]');
+  });
+});
diff --git a/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/DeploymentModeSelection.component.spec.tsx b/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/DeploymentModeSelection.component.spec.tsx
@@ -13,6 +13,12 @@ import { renderWithMockedForm } from '@/test-helpers/renderWithMockedForm';
 
 vi.mock('@/data/hooks/catalog/useShareCatalog');
 
+vi.mock('@ovh-ux/muk', () => ({
+  useCatalogPrice: () => ({
+    getFormattedMonthlyCatalogPrice: (price: number) => `€${(price / 100000000).toFixed(4)}`,
+  }),
+}));
+
 vi.mock('@ovh-ux/manager-react-shell-client', () => ({
   useOvhTracking: () => ({
     trackClick: vi.fn(),
@@ -37,18 +43,21 @@ const mockDeploymentModes: TDeploymentModeDataForCard[] = [
     labelKey: 'localisation.deploymentMode.modes.region-3-az.label',
     descriptionKey: 'localisation.deploymentMode.modes.region-3-az.description',
     Image: () => <div data-testid="region-3-az-image">Region 3AZ Image</div>,
+    monthlyPrice: { value: 72000, isLeastPrice: true },
   },
   {
     mode: 'region',
     labelKey: 'localisation.deploymentMode.modes.region.label',
     descriptionKey: 'localisation.deploymentMode.modes.region.description',
     Image: () => <div data-testid="region-image">Region Image</div>,
+    monthlyPrice: { value: 36000, isLeastPrice: false },
   },
   {
     mode: 'localzone',
     labelKey: 'localisation.deploymentMode.modes.localzone.label',
     descriptionKey: 'localisation.deploymentMode.modes.localzone.description',
     Image: () => <div data-testid="localzone-image">Localzone Image</div>,
+    monthlyPrice: null,
   },
 ];
 
diff --git a/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/MacroRegionSelection.component.spec.tsx b/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/MacroRegionSelection.component.spec.tsx
@@ -54,19 +54,23 @@ vi.mock('@/pages/create/components/localisation/macroRegion/ContinentSelection.c
   ),
 }));
 
-vi.mock('@ovhcloud/ods-react', () => ({
-  RadioGroup: ({
-    children,
-    value,
-  }: PropsWithChildren<{
-    value: string;
-  }>) => (
-    <div role="radiogroup" data-value={value}>
-      {children}
-    </div>
-  ),
-  Text: ({ children }: PropsWithChildren) => <div>{children}</div>,
-}));
+vi.mock('@ovhcloud/ods-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@ovhcloud/ods-react')>();
+  return {
+    ...actual,
+    RadioGroup: ({
+      children,
+      value,
+    }: PropsWithChildren<{
+      value: string;
+    }>) => (
+      <div role="radiogroup" data-value={value}>
+        {children}
+      </div>
+    ),
+    Text: ({ children }: PropsWithChildren) => <div>{children}</div>,
+  };
+});
 
 const mockUseShareCatalog = vi.mocked(useShareCatalog);
 
diff --git a/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/MicroRegionSelection.component.spec.tsx b/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/__tests__/MicroRegionSelection.component.spec.tsx
diff --git a/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/deploymentMode/DeploymentModeCardPrice.component.tsx b/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/deploymentMode/DeploymentModeCardPrice.component.tsx
diff --git a/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/deploymentMode/DeploymentModeSelection.component.tsx b/packages/manager/apps/pci-file-storage/src/pages/create/components/localisation/deploymentMode/DeploymentModeSelection.component.tsx
diff --git a/packages/manager/apps/pci-file-storage/src/pages/create/view-model/__tests__/shareCatalog.view-model.spec.ts b/packages/manager/apps/pci-file-storage/src/pages/create/view-model/__tests__/shareCatalog.view-model.spec.ts
diff --git a/packages/manager/apps/pci-file-storage/src/pages/create/view-model/shareCatalog.view-model.ts b/packages/manager/apps/pci-file-storage/src/pages/create/view-model/shareCatalog.view-model.ts
