fix(pci-rancher): add vcpu unit in pricing (#14749)

ref: TAPC-2507 Signed-off-by: Pierre-Philippe <[email protected]> Co-authored-by: CDS Translator Agent <[email protected]>
ovh · Jan 17, 2025 · a06d01e · a06d01e
1 parent baf1b4e
commit a06d01e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 31 deletions.
diff --git a/...nager/apps/pci-rancher/src/components/layout-helpers/CreateRancher/CreateRancher.test.tsx b/...nager/apps/pci-rancher/src/components/layout-helpers/CreateRancher/CreateRancher.test.tsx
@@ -33,9 +33,8 @@ jest.mock('@ovh-ux/manager-react-components', () => ({
   ...jest.requireActual('@ovh-ux/manager-react-components'),
   Subtitle: jest.fn(),
   Title: jest.fn(),
-  useCatalogPrice: jest.fn(() => ({
-    getFormattedHourlyCatalogPrice: jest.fn(() => 0.0171),
-    getFormattedMonthlyCatalogPrice: jest.fn(() => 12.312),
+  useCatalogPrice: jest.fn((val) => ({
+    getFormattedCatalogPrice: jest.fn(() => parseFloat((0.0171).toFixed(val))),
   })),
 }));
 
@@ -64,20 +63,18 @@ jest.mock('@ovh-ux/manager-react-shell-client', () => ({
 }));
 
 const setupSpecTest = async (props?: Partial<CreateRancherProps>) =>
-  waitFor(() =>
-    render(
-      <CreateRancher
-        projectId="1234"
-        onCreateRancher={onCreateRancher}
-        plans={rancherPlan}
-        versions={rancherVersion}
-        hasRancherCreationError={false}
-        isProjectDiscoveryMode={false}
-        isCreateRancherLoading={false}
-        pricing={rancherPlansPricing}
-        {...props}
-      />,
-    ),
+  render(
+    <CreateRancher
+      projectId="1234"
+      onCreateRancher={onCreateRancher}
+      plans={rancherPlan}
+      versions={rancherVersion}
+      hasRancherCreationError={false}
+      isProjectDiscoveryMode={false}
+      isCreateRancherLoading={false}
+      pricing={rancherPlansPricing}
+      {...props}
+    />,
   );
 
 describe('CreateRancher', () => {
@@ -150,8 +147,8 @@ describe('CreateRancher', () => {
 
   it('Given that there is prices I should see rancher pricing', async () => {
     const screen = await setupSpecTest();
-    const rancherPricingHourly = screen.getAllByText('0.0171');
-    const rancherPricingMonthly = screen.getAllByText('~ 12.312');
+    const rancherPricingHourly = screen.getAllByText('0.0171 /vCPU/heure');
+    const rancherPricingMonthly = screen.getAllByText('~ 0.02 /vCPU/mois');
 
     expect(rancherPricingMonthly).not.toBeNull();
     expect(rancherPricingHourly).not.toBeNull();

diff --git a/packages/manager/apps/pci-rancher/src/data/hooks/useFormattedPrices/useFormattedPrices.tsx b/packages/manager/apps/pci-rancher/src/data/hooks/useFormattedPrices/useFormattedPrices.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useCatalogPrice } from '@ovh-ux/manager-react-components';
+import { useTranslation } from 'react-i18next';
 import {
   RancherPlan,
   TRancherPricing,
@@ -10,8 +11,9 @@ export const useFormattedRancherPrices = (
   plans: RancherPlan[],
   pricing?: TRancherPricing[],
 ) => {
-  const { getFormattedHourlyCatalogPrice } = useCatalogPrice(5);
-  const { getFormattedMonthlyCatalogPrice } = useCatalogPrice(2);
+  const { getFormattedCatalogPrice: hourly } = useCatalogPrice(5);
+  const { getFormattedCatalogPrice: monthly } = useCatalogPrice(2);
+  const { t } = useTranslation('order-price');
 
   return useMemo(() => {
     return plans?.reduce((acc, plan) => {
@@ -20,21 +22,18 @@ export const useFormattedRancherPrices = (
         ...acc,
         [plan.name]: pricingItem
           ? {
-              hourly: getFormattedHourlyCatalogPrice(pricingItem.hourlyPrice),
-              monthly: getFormattedMonthlyCatalogPrice(
-                pricingItem.monthlyPrice,
-              ),
+              hourly: `${hourly(pricingItem.hourlyPrice)} /vCPU/${t(
+                'order_catalog_price_interval_hour',
+              )}`,
+              monthly: `${monthly(pricingItem.monthlyPrice)} /vCPU/${t(
+                'order_catalog_price_interval_month',
+              )}`,
             }
           : null,
       };
     }, {}) as Record<
       RancherPlanName,
       { hourly: string; monthly: string | null }
     >;
-  }, [
-    plans,
-    pricing,
-    getFormattedHourlyCatalogPrice,
-    getFormattedMonthlyCatalogPrice,
-  ]);
+  }, [plans, pricing, hourly, monthly]);
 };
diff --git a/packages/manager/apps/pci-rancher/src/utils/test/test.provider.tsx b/packages/manager/apps/pci-rancher/src/utils/test/test.provider.tsx
@@ -8,6 +8,7 @@ import dashboardTranslation from '@translation/dashboard/Messages_fr_FR.json';
 import onboardingTranslation from '@translation/onboarding/Messages_fr_FR.json';
 import listingTranslation from '@translation/listing/Messages_fr_FR.json';
 import updateSoftwareTranslation from '@translation/updateSoftware/Messages_fr_FR.json';
+import orderPriceTranslation from '@translation/order-price/Messages_fr_FR.json';
 import queryClient from '@/queryClient';
 
 const ns = ['onboarding', 'listing', 'dashboard', 'updateSoftware'];
@@ -21,6 +22,7 @@ i18n.use(initReactI18next).init({
       onboarding: onboardingTranslation,
       listing: listingTranslation,
       updateSoftware: updateSoftwareTranslation,
+      'order-price': orderPriceTranslation,
     },
   },
   fallbackNS: ns,