diff --git a/packages/manager/apps/pci-block-storage/package.json b/packages/manager/apps/pci-block-storage/package.json index 6cf62df5c7cb..34c9921c975b 100644 --- a/packages/manager/apps/pci-block-storage/package.json +++ b/packages/manager/apps/pci-block-storage/package.json @@ -18,7 +18,7 @@ "@ovh-ux/manager-config": "^8.0.2", "@ovh-ux/manager-core-api": "^0.9.0", "@ovh-ux/manager-pci-common": "^0.14.2", - "@ovh-ux/manager-react-components": "^1.41.2", + "@ovh-ux/manager-react-components": "^1.43.0", "@ovh-ux/manager-react-core-application": "^0.11.5", "@ovh-ux/manager-react-shell-client": "^0.8.5", "@ovh-ux/manager-tailwind-config": "^0.2.1", diff --git a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_de_DE.json b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_de_DE.json index 2a3a02ffae06..38ba8146cc68 100644 --- a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_de_DE.json +++ b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_de_DE.json @@ -5,7 +5,6 @@ "pci_projects_project_storages_blocks_block_volume-edit_size_label": "Volume-Kapazität:", "pci_projects_project_storages_blocks_block_volume-edit_size_help": "Die maximale Größe ist von Ihrem verfügbaren Quota abhängig.", "pci_projects_project_storages_blocks_block_volume-edit_size_unit": "GB", - "pci_projects_project_storages_blocks_block_volume-edit_price_text": "Geschätzter Betrag: {{ price }} / Monat (zzgl. MwSt.)", "pci_projects_project_storages_blocks_block_volume-edit_bootable_label": "Bootfähig", "pci_projects_project_storages_blocks_block_volume-edit_bootable_help": "Indem Sie ein Volume als bootfähig definieren, kann es für den Start Ihrer Instanz verwendet werden.", "pci_projects_project_storages_blocks_block_volume-edit_cancel_label": "Abbrechen" diff --git a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_en_GB.json b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_en_GB.json index c410d531c3aa..67a7ef6baf4c 100644 --- a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_en_GB.json +++ b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_en_GB.json @@ -5,7 +5,6 @@ "pci_projects_project_storages_blocks_block_volume-edit_size_label": "Volume capacity", "pci_projects_project_storages_blocks_block_volume-edit_size_help": "The maximum size depends on your available quota.", "pci_projects_project_storages_blocks_block_volume-edit_size_unit": "GB", - "pci_projects_project_storages_blocks_block_volume-edit_price_text": "Estimated amount: {{price}} ex. VAT/month", "pci_projects_project_storages_blocks_block_volume-edit_bootable_label": "Bootable", "pci_projects_project_storages_blocks_block_volume-edit_bootable_help": "By defining a volume as bootable, you can use the volume when your instance is booted.", "pci_projects_project_storages_blocks_block_volume-edit_cancel_label": "Cancel" diff --git a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_es_ES.json b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_es_ES.json index a386c12214de..db234e385490 100644 --- a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_es_ES.json +++ b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_es_ES.json @@ -5,7 +5,6 @@ "pci_projects_project_storages_blocks_block_volume-edit_size_label": "Capacidad del volumen", "pci_projects_project_storages_blocks_block_volume-edit_size_help": "El tamaño máximo depende de la cuota de su proyecto.", "pci_projects_project_storages_blocks_block_volume-edit_size_unit": "GB", - "pci_projects_project_storages_blocks_block_volume-edit_price_text": "Importe estimado: {{ price }}/mes + IVA", "pci_projects_project_storages_blocks_block_volume-edit_bootable_label": "Vol. de arranque", "pci_projects_project_storages_blocks_block_volume-edit_bootable_help": "Definir un volumen como volumen de arranque permite utilizar dicho volumen al iniciar la instancia.", "pci_projects_project_storages_blocks_block_volume-edit_cancel_label": "Cancelar" diff --git a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_fr_CA.json b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_fr_CA.json index 4b50d9e4eb94..3f13720801d0 100644 --- a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_fr_CA.json +++ b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_fr_CA.json @@ -6,7 +6,6 @@ "pci_projects_project_storages_blocks_block_volume-edit_size_label": "Capacité du volume", "pci_projects_project_storages_blocks_block_volume-edit_size_help": "La taille maximale dépend de votre quota disponible.", "pci_projects_project_storages_blocks_block_volume-edit_size_unit": "Go", - "pci_projects_project_storages_blocks_block_volume-edit_price_text": "Montant estimé : {{ price }} HT/mois", "pci_projects_project_storages_blocks_block_volume-edit_bootable_label": "Amorçable", "pci_projects_project_storages_blocks_block_volume-edit_bootable_help": "Définir un volume comme amorçable permet d'utiliser ce volume au démarrage de votre instance.", diff --git a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_fr_FR.json b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_fr_FR.json index 4b50d9e4eb94..3f13720801d0 100644 --- a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_fr_FR.json +++ b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_fr_FR.json @@ -6,7 +6,6 @@ "pci_projects_project_storages_blocks_block_volume-edit_size_label": "Capacité du volume", "pci_projects_project_storages_blocks_block_volume-edit_size_help": "La taille maximale dépend de votre quota disponible.", "pci_projects_project_storages_blocks_block_volume-edit_size_unit": "Go", - "pci_projects_project_storages_blocks_block_volume-edit_price_text": "Montant estimé : {{ price }} HT/mois", "pci_projects_project_storages_blocks_block_volume-edit_bootable_label": "Amorçable", "pci_projects_project_storages_blocks_block_volume-edit_bootable_help": "Définir un volume comme amorçable permet d'utiliser ce volume au démarrage de votre instance.", diff --git a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_it_IT.json b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_it_IT.json index 0ed692b48515..d1f8d414171e 100644 --- a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_it_IT.json +++ b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_it_IT.json @@ -5,7 +5,6 @@ "pci_projects_project_storages_blocks_block_volume-edit_size_label": "Capacità del volume", "pci_projects_project_storages_blocks_block_volume-edit_size_help": "La dimensione massima dipende dalla quota disponibile.", "pci_projects_project_storages_blocks_block_volume-edit_size_unit": "GB", - "pci_projects_project_storages_blocks_block_volume-edit_price_text": "Importo stimato: {{ price }} +IVA/mese", "pci_projects_project_storages_blocks_block_volume-edit_bootable_label": "Boot", "pci_projects_project_storages_blocks_block_volume-edit_bootable_help": "Definire un volume come “boot” permette di utilizzare questo disco all’avvio della tua istanza.", "pci_projects_project_storages_blocks_block_volume-edit_cancel_label": "Annullare" diff --git a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_pl_PL.json b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_pl_PL.json index 0debf14f4fa0..183fc423dae3 100644 --- a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_pl_PL.json +++ b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_pl_PL.json @@ -5,7 +5,6 @@ "pci_projects_project_storages_blocks_block_volume-edit_size_label": "Rozmiar wolumenu", "pci_projects_project_storages_blocks_block_volume-edit_size_help": "Maksymalny rozmiar zależy od dostępnego limitu.", "pci_projects_project_storages_blocks_block_volume-edit_size_unit": "GB", - "pci_projects_project_storages_blocks_block_volume-edit_price_text": "Szacowana kwota: {{ price }} netto/m-c", "pci_projects_project_storages_blocks_block_volume-edit_bootable_label": "Bootowalny", "pci_projects_project_storages_blocks_block_volume-edit_bootable_help": "Zdefiniowanie wolumenu jako bootowalnego pozwala używać go przy uruchamianiu Twojej instancji.", "pci_projects_project_storages_blocks_block_volume-edit_cancel_label": "Anuluj" diff --git a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_pt_PT.json b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_pt_PT.json index 13b6e27588a2..658a1da80a1d 100644 --- a/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_pt_PT.json +++ b/packages/manager/apps/pci-block-storage/public/translations/volume-edit/Messages_pt_PT.json @@ -5,7 +5,6 @@ "pci_projects_project_storages_blocks_block_volume-edit_size_label": "Capacidade do volume", "pci_projects_project_storages_blocks_block_volume-edit_size_help": "O tamanho máximo depende do seu limite disponível.", "pci_projects_project_storages_blocks_block_volume-edit_size_unit": "GB", - "pci_projects_project_storages_blocks_block_volume-edit_price_text": "Montante estimado: {{ price }}/mês + IVA", "pci_projects_project_storages_blocks_block_volume-edit_bootable_label": "Volume de arranque", "pci_projects_project_storages_blocks_block_volume-edit_bootable_help": "Definir um volume como volume de arranque permite utilizar esse volume ao iniciar a instância.", "pci_projects_project_storages_blocks_block_volume-edit_cancel_label": "Anular" diff --git a/packages/manager/apps/pci-block-storage/src/api/hooks/useVolume.tsx b/packages/manager/apps/pci-block-storage/src/api/hooks/useVolume.tsx index 6094e5e629ea..b50220bf896f 100644 --- a/packages/manager/apps/pci-block-storage/src/api/hooks/useVolume.tsx +++ b/packages/manager/apps/pci-block-storage/src/api/hooks/useVolume.tsx @@ -1,12 +1,7 @@ import { useMemo } from 'react'; import { applyFilters, Filter } from '@ovh-ux/manager-core-api'; -import { - useCatalogPrice, - useTranslatedMicroRegions, -} from '@ovh-ux/manager-react-components'; +import { useTranslatedMicroRegions } from '@ovh-ux/manager-react-components'; import { useMutation, useQuery } from '@tanstack/react-query'; -import { useProject } from '@ovh-ux/manager-pci-common'; -import { TPricing } from '@/api/data/catalog'; import { addVolume, AddVolumeProps, @@ -23,7 +18,6 @@ import { updateVolume, VolumeOptions, } from '@/api/data/volume'; -import { useCatalog } from '@/api/hooks/useCatalog'; import { UCENTS_FACTOR } from '@/hooks/currency-constants'; import queryClient from '@/queryClient'; @@ -265,70 +259,6 @@ export const useUpdateVolume = ({ }; }; -export const usePriceTransformer = () => { - const { getFormattedCatalogPrice } = useCatalogPrice(); - return (price: TPricing, currencyCode: string) => ({ - ...price, - priceInUcents: price.price, - intervalUnit: price.interval, - price: { - currencyCode, - text: getFormattedCatalogPrice(price.price?.value), - value: convertUcentsToCurrency(price.price?.value), - }, - }); -}; - -export const useGetPrices = (projectId: string, volumeId: string) => { - const { data: project } = useProject(projectId); - const { data: catalog } = useCatalog(); - const { data: volume } = useVolume(projectId, volumeId); - - const priceFormatter = usePriceTransformer(); - - if (project && catalog) { - const projectPlan = catalog.plans.find( - (plan) => plan.planCode === project.planCode, - ); - - if (!projectPlan) { - throw new Error('Fail to get project plan'); - } - - const pricesMap = {}; - - projectPlan.addonFamilies.forEach((family) => { - family.addons.forEach((planCode) => { - const addon = catalog.addons.find( - (addonCatalog) => addonCatalog.planCode === planCode, - ); - - const pricing = - addon?.pricings.find( - ({ capacities }) => - capacities.includes('renew') || - capacities.includes('consumption'), - ) || ({} as TPricing); - - pricesMap[planCode] = priceFormatter( - pricing as TPricing, - catalog.locale.currencyCode, - ); - }); - }); - - if (volume) { - const relatedCatalog = - pricesMap[`volume.${volume.type}.consumption.${volume.region}`] || - pricesMap[`volume.${volume.type}.consumption`]; - - return relatedCatalog; - } - } - - return {}; -}; - type UseAddVolumeProps = AddVolumeProps & { onError: (cause: Error) => void; onSuccess: () => void; diff --git a/packages/manager/apps/pci-block-storage/src/pages/edit/Edit.page.tsx b/packages/manager/apps/pci-block-storage/src/pages/edit/Edit.page.tsx index 39dcb339fe35..617268f6c1c4 100644 --- a/packages/manager/apps/pci-block-storage/src/pages/edit/Edit.page.tsx +++ b/packages/manager/apps/pci-block-storage/src/pages/edit/Edit.page.tsx @@ -1,9 +1,8 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useHref, useNavigate, useParams } from 'react-router-dom'; import { Translation, useTranslation } from 'react-i18next'; import { Headers, - useCatalogPrice, useNotifications, useProjectLocalRegions, useProjectUrl, @@ -22,7 +21,6 @@ import { ODS_ICON_SIZE, ODS_INPUT_SIZE, ODS_INPUT_TYPE, - ODS_SKELETON_SIZE, ODS_SPINNER_SIZE, ODS_TEXT_LEVEL, } from '@ovhcloud/ods-components'; @@ -33,7 +31,6 @@ import { OsdsIcon, OsdsInput, OsdsQuantity, - OsdsSkeleton, OsdsSpinner, OsdsText, } from '@ovhcloud/ods-components/react'; @@ -41,14 +38,12 @@ import { useProject } from '@ovh-ux/manager-pci-common'; import { VOLUME_MIN_SIZE, VOLUME_UNLIMITED_QUOTA } from '@/constants'; import ChipRegion from '@/components/edit/ChipRegion.component'; import { TVolume } from '@/api/data/volume'; -import { - useGetPrices, - useUpdateVolume, - useVolume, -} from '@/api/hooks/useVolume'; +import { useUpdateVolume, useVolume } from '@/api/hooks/useVolume'; import HidePreloader from '@/core/HidePreloader'; import { useVolumeMaxSize } from '@/api/data/quota'; import { useRegionsQuota } from '@/api/hooks/useQuota'; +import { PriceEstimate } from '@/pages/new/components/PriceEstimate'; +import { useCatalog } from '@/api/hooks/useCatalog'; type TFormState = { name: string; @@ -82,16 +77,24 @@ export default function EditPage() { const projectUrl = useProjectUrl('public-cloud'); const { data: project } = useProject(projectId || ''); - const catalogPrice = useGetPrices(projectId, volumeId); const { translateMicroRegion } = useTranslatedMicroRegions(); - const { getTextPrice } = useCatalogPrice(3); - const { data: volume, isLoading: isLoadingVolume, isPending: isPendingVolume, } = useVolume(projectId, volumeId); + const { data: catalog } = useCatalog(); + + const catalogVolume = useMemo(() => { + if (!!catalog && !!volume) { + return ( + catalog.addons.find((addon) => addon.planCode === volume.planCode) || + null + ); + } + return null; + }, [catalog, volume]); const { volumeMaxSize } = useVolumeMaxSize(volume?.region); @@ -171,19 +174,6 @@ export default function EditPage() { return volumeMaxSize; }; - const getVolumePriceEstimationFromCatalog = ( - price: { priceInUcents: number }, - volumeSize: number, - ) => { - const hourlyEstimation = volumeSize * price.priceInUcents; - const monthlyEstimation = hourlyEstimation * 30 * 24; - - return { - hourly: hourlyEstimation, - monthly: monthlyEstimation, - }; - }; - const isLoading = isLoadingVolume || isPendingVolume || @@ -216,11 +206,6 @@ export default function EditPage() { updateVolume(); } }; - - const estimatedPrice = - catalogPrice && - formState.size.value >= 0 && - getVolumePriceEstimationFromCatalog(catalogPrice, formState.size.value); const hasError = errorState.isMinError || errorState.isMaxError; return ( @@ -438,22 +423,14 @@ export default function EditPage() { - {!hasError && - (estimatedPrice?.monthly !== undefined ? ( - - {tVolumeEdit( - 'pci_projects_project_storages_blocks_block_volume-edit_price_text', - { price: getTextPrice(estimatedPrice.monthly) }, - )} - - ) : ( - - ))} + {!hasError && !!catalogVolume && ( +
+ +
+ )} {errorState.isMinError && ( type === 'consumption') || {}; - const priceEstimate = price * volumeCapacity * ESTIMATE_MONTHLY_HOURS; + const priceEstimate = convertHourlyPriceToMonthly(price * volumeCapacity); return (