From fcd562ded5d95431f010e4f41ce5c9e7f0ab7be5 Mon Sep 17 00:00:00 2001
From: tsiorifamonjena <tsiorifamonjena.tianjanahary.ext@corp.ovh.com>
Date: Tue, 28 Jan 2025 14:26:58 +0100
Subject: [PATCH] feat(pci.load-balancer): display monthly price with mrc
 common function

ref: TAPC-2046
Signed-off-by: tsiorifamonjena <tsiorifamonjena.tianjanahary.ext@corp.ovh.com>
---
 .../steps/size/input/Label.component.tsx      | 45 ++++++++++++++-----
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/packages/manager/apps/pci-load-balancer/src/pages/create/steps/size/input/Label.component.tsx b/packages/manager/apps/pci-load-balancer/src/pages/create/steps/size/input/Label.component.tsx
index d645f26bd6cd..d00744d081ee 100644
--- a/packages/manager/apps/pci-load-balancer/src/pages/create/steps/size/input/Label.component.tsx
+++ b/packages/manager/apps/pci-load-balancer/src/pages/create/steps/size/input/Label.component.tsx
@@ -1,32 +1,46 @@
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OsdsText } from '@ovhcloud/ods-components/react';
 import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { useCatalogPrice } from '@ovh-ux/manager-react-components';
+import {
+  useCatalogPrice,
+  convertHourlyPriceToMonthly,
+} from '@ovh-ux/manager-react-components';
 import { TAddon } from '@/pages/create/store';
 
+const DIGIT_AFTER_DECIMAL = 4;
+
 export const LabelComponent = ({
   item,
-  isItemSelected,
 }: Readonly<{
   item: TAddon;
-  isItemSelected: boolean;
 }>) => {
   const { t: tCreate } = useTranslation('load-balancer/create');
 
-  const { getFormattedHourlyCatalogPrice } = useCatalogPrice();
+  const {
+    getFormattedHourlyCatalogPrice,
+    getFormattedMonthlyCatalogPrice,
+  } = useCatalogPrice(DIGIT_AFTER_DECIMAL);
 
-  const [priceValue, priceUnit] = getFormattedHourlyCatalogPrice(
-    item.price,
-  ).split('/');
+  const [priceValue, monthlyPrice] = useMemo(
+    () => [
+      getFormattedHourlyCatalogPrice(item.price),
+      getFormattedMonthlyCatalogPrice(convertHourlyPriceToMonthly(item.price)),
+    ],
+    [
+      getFormattedHourlyCatalogPrice,
+      getFormattedMonthlyCatalogPrice,
+      item.price,
+    ],
+  );
 
   return (
     <div className="p-4">
       <OsdsText
-        size={ODS_TEXT_SIZE._400}
-        level={ODS_TEXT_LEVEL.body}
+        size={ODS_TEXT_SIZE._200}
+        level={ODS_TEXT_LEVEL.heading}
         color={ODS_THEME_COLOR_INTENT.text}
-        className={isItemSelected ? 'font-bold' : 'font-normal'}
       >
         {tCreate('octavia_load_balancer_create_size_flavour_title', {
           sizeCode: item.label,
@@ -49,7 +63,16 @@ export const LabelComponent = ({
           level={ODS_TEXT_LEVEL.body}
           color={ODS_THEME_COLOR_INTENT.text}
         >
-          <span className="font-bold">{priceValue}</span>/{priceUnit}
+          <span className="font-bold">{priceValue}</span>
+        </OsdsText>
+      </div>
+      <div className="text-center mt-2">
+        <OsdsText
+          size={ODS_TEXT_SIZE._400}
+          level={ODS_TEXT_LEVEL.body}
+          color={ODS_THEME_COLOR_INTENT.text}
+        >
+          ~ <span>{monthlyPrice}</span>
         </OsdsText>
       </div>
     </div>