-
+
diff --git a/packages/manager/apps/pci-block-storage/src/pages/new/components/VolumeTypeStep.component.tsx b/packages/manager/apps/pci-block-storage/src/pages/new/components/VolumeTypeStep.component.tsx
index 0b9a11cb0b18..bbb954854d89 100644
--- a/packages/manager/apps/pci-block-storage/src/pages/new/components/VolumeTypeStep.component.tsx
+++ b/packages/manager/apps/pci-block-storage/src/pages/new/components/VolumeTypeStep.component.tsx
@@ -1,37 +1,123 @@
-import {
- OsdsButton,
- OsdsSpinner,
- OsdsText,
- OsdsChip,
-} from '@ovhcloud/ods-components/react';
+import { OsdsButton, OsdsText, OsdsChip } from '@ovhcloud/ods-components/react';
import {
ODS_THEME_COLOR_INTENT,
ODS_THEME_TYPOGRAPHY_LEVEL,
ODS_THEME_TYPOGRAPHY_SIZE,
} from '@ovhcloud/ods-common-theming';
-import {
- ODS_CHIP_SIZE,
- ODS_BUTTON_SIZE,
- ODS_SPINNER_SIZE,
-} from '@ovhcloud/ods-components';
+import { ODS_CHIP_SIZE, ODS_BUTTON_SIZE } from '@ovhcloud/ods-components';
import {
TilesInputComponent,
useCatalogPrice,
} from '@ovh-ux/manager-react-components';
import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
-import { TAddon, TCatalog } from '@ovh-ux/manager-pci-common';
+import { useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
import { useTranslateBytes } from '@/pages/new/hooks/useTranslateBytes';
-import { useConsumptionVolumesAddon } from '@/api/hooks/useConsumptionVolumesAddon';
import { StepState } from '@/pages/new/hooks/useStep';
-import { TLocalisation } from '@/api/hooks/useRegions';
+import { useVolumeCatalog } from '@/api/hooks/useCatalog';
+import { TVolumeAddon } from '@/api/data/catalog';
+import { TRegion } from '@/api/data/regions';
+
+const BETA_TAG = 'is_new';
+
+function VolumeTypeTile({
+ volumeType,
+ currentRegion,
+}: Readonly<{ volumeType: TVolumeAddon; currentRegion: TRegion }>) {
+ const { t } = useTranslation(['add', 'common']);
+ const { projectId } = useParams();
+ const {
+ data: { filters },
+ } = useVolumeCatalog(projectId);
+ const tBytes = useTranslateBytes();
+ const { getFormattedCatalogPrice } = useCatalogPrice(6, {
+ hideTaxLabel: true,
+ });
+
+ const pricing = volumeType.pricings[0];
+
+ const isNew = useMemo(
+ () =>
+ volumeType.tags.includes(BETA_TAG) ||
+ filters.deployment.some(
+ (deployment) =>
+ currentRegion.filters.deployment.includes(deployment.name) &&
+ deployment.tags.includes(BETA_TAG),
+ ),
+ [filters, volumeType],
+ );
+
+ return (
+
+
+
+ {volumeType.name}
+
+ {isNew && (
+
+ {t('common:pci_projects_project_storages_blocks_new')}
+
+ )}
+
+
+
+ {pricing.specs.volume.iops.guaranteed
+ ? t(
+ 'pci_projects_project_storages_blocks_add_type_addon_iops_guaranteed',
+ {
+ iops: pricing.specs.volume.iops.level,
+ separator: ', ',
+ },
+ )
+ : t(
+ 'pci_projects_project_storages_blocks_add_type_addon_iops_not_guaranteed',
+ {
+ iops:
+ pricing.specs.volume.iops.max ||
+ pricing.specs.volume.iops.level,
+ separator: ', ',
+ },
+ )}
+ {t(
+ 'pci_projects_project_storages_blocks_add_type_addon_capacity_max',
+ {
+ capacity: tBytes(
+ pricing.specs.volume.capacity.max,
+ 0,
+ false,
+ 'GB',
+ false,
+ ),
+ },
+ )}{' '}
+
+ {t('pci_projects_project_storages_blocks_add_type_addon_price', {
+ price: getFormattedCatalogPrice(volumeType.pricings[0]?.price),
+ })}
+
+
+
+ );
+}
export interface VolumeTypeStepProps {
projectId: string;
- region: TLocalisation;
+ region: TRegion;
step: StepState;
- onSubmit: (volumeType: TAddon) => void;
+ onSubmit: (volumeType: TVolumeAddon) => void;
}
export function VolumeTypeStep({
@@ -40,97 +126,32 @@ export function VolumeTypeStep({
step,
onSubmit,
}: Readonly
) {
- const { t } = useTranslation('add');
- const { t: tStepper } = useTranslation('stepper');
- const { t: tCommon } = useTranslation('common');
- const [volumeType, setVolumeType] = useState(undefined);
- const tBytes = useTranslateBytes();
- const { getFormattedCatalogPrice } = useCatalogPrice(6, {
- hideTaxLabel: true,
- });
+ const { t } = useTranslation('stepper');
+ const { data } = useVolumeCatalog(projectId);
- const { volumeTypes, isPending } = useConsumptionVolumesAddon(
- projectId,
- region,
+ const [volumeType, setVolumeType] = useState(undefined);
+
+ const volumeTypes = useMemo(
+ () =>
+ data?.models
+ .map((m) => ({
+ ...m,
+ pricings: m.pricings.filter((p) => p.regions.includes(region.name)),
+ }))
+ .filter((m) => m.pricings.length > 0) || [],
+ [data, region],
);
const displayedTypes =
volumeType && step.isLocked ? [volumeType] : volumeTypes;
- if (isPending) {
- return ;
- }
-
return (
<>
-
+
value={volumeType}
items={displayedTypes || []}
- label={(vType: TCatalog['addons'][0]) => (
-
-
-
- {vType.blobs.technical.name}
-
- {vType.blobs.tags.includes('is_new') && (
-
- {tCommon('pci_projects_project_storages_blocks_new')}
-
- )}
-
-
-
- {vType.blobs.technical.volume.iops.guaranteed
- ? t(
- 'pci_projects_project_storages_blocks_add_type_addon_iops_guaranteed',
- {
- iops: vType.blobs.technical.volume.iops.level,
- separator: ', ',
- },
- )
- : t(
- 'pci_projects_project_storages_blocks_add_type_addon_iops_not_guaranteed',
- {
- iops:
- vType.blobs.technical.volume.iops.max ||
- vType.blobs.technical.volume.iops.level,
- separator: ', ',
- },
- )}
- {t(
- 'pci_projects_project_storages_blocks_add_type_addon_capacity_max',
- {
- capacity: tBytes(
- vType.blobs.technical.volume.capacity.max,
- 0,
- false,
- 'GB',
- false,
- ),
- },
- )}{' '}
-
- {t(
- 'pci_projects_project_storages_blocks_add_type_addon_price',
- {
- price: getFormattedCatalogPrice(vType.pricings[0]?.price),
- },
- )}
-
-
-