fix(instance): display backup price correctly (#17307)

ref: #TAPC-4173

Signed-off-by: Lionel Bueno <[email protected]>

Author: lionel95200x

packages/manager/apps/pci-instances/public/translations/actions/Messages_fr_FR.json

@@ -34,7 +34,7 @@
   "pci_instances_actions_reinstall_instance_success_message": "La réinstallation de l'instance {{ name }} est en cours. Merci de patienter, cela peut prendre quelques minutes.",
   "pci_instances_actions_backup_instance_title": "Création d'un backup",
   "pci_instances_actions_backup_instance_name_label": "Saisissez le nom de votre backup :",
-  "pci_instances_actions_backup_instance_price": "Prix : ~{{price}} HT/mois/Go",
+  "pci_instances_actions_backup_instance_price": "Prix : ~{{price}}/mois/Go",
   "pci_instances_actions_backup_instance_warning_message": "Votre instance sera suspendue pendant quelques secondes, puis les performances en lecture/écriture du disque pourront être affectées jusqu'à la finalisation du backup",
   "pci_instances_actions_backup_instance_error_message": "Une erreur est survenue lors de la sauvegarde de l'instance {{ name }} : {{ error }}",
   "pci_instances_actions_backup_instance_success_message": "Le backup {{ name }} est en cours de création.",

packages/manager/apps/pci-instances/src/data/hooks/instance/action/useInstanceBackupPrice.ts

@@ -1,7 +1,4 @@
-import {
-  convertHourlyPriceToMonthly,
-  priceFromUcent,
-} from '@ovh-ux/manager-react-components';
+import { convertHourlyPriceToMonthly } from '@ovh-ux/manager-react-components';
 import { useProductAvailability, useCatalog } from '@ovh-ux/manager-pci-common';
 import { useTranslation } from 'react-i18next';
 import { useMemo } from 'react';
@@ -38,11 +35,7 @@ export const useInstanceBackupPrice = (projectId: string, region: string) => {
   const price = useMemo(() => {
     if (!pricing) return null;
 
-    return convertHourlyPriceToMonthly(
-      priceFromUcent(pricing.price),
-    ).toLocaleString(locale, {
-      maximumFractionDigits: 3,
-    });
+    return convertHourlyPriceToMonthly(pricing.price);
   }, [pricing, locale]);
 
   return {

packages/manager/apps/pci-instances/src/pages/instances/action/BackupActionPage.tsx

@@ -35,10 +35,10 @@ const BackupActionPage = ({
 
   const [snapshotName, setSnapshotName] = useState(defaultSnapshotName);
 
-  const { price, isLoading: isBackupLoading } = useInstanceBackupPrice(
-    projectId,
-    instance?.region ?? '',
-  );
+  const {
+    price: backupPrice,
+    isLoading: isBackupLoading,
+  } = useInstanceBackupPrice(projectId, instance?.region ?? '');
 
   const { mutationHandler, isPending } = useInstanceBackupAction(projectId, {
     onError,
@@ -51,6 +51,7 @@ const BackupActionPage = ({
 
   const { getFormattedCatalogPrice } = useCatalogPrice(3);
 
+  const price = backupPrice ? getFormattedCatalogPrice(backupPrice) : null;
   return (
     <ActionModal
       title={title}
@@ -76,7 +77,7 @@ const BackupActionPage = ({
         {!!price && !isBackupLoading && (
           <p className="text-sm font-medium">
             {t('pci_instances_actions_backup_instance_price', {
-              price: getFormattedCatalogPrice(Number(price)),
+              price,
             })}
           </p>
         )}