From edde4240fc79cf0f8f316033e5b34b571c4a5218 Mon Sep 17 00:00:00 2001
From: Florian Renaut <florian.renaut@corp.ovh.com>
Date: Tue, 17 Dec 2024 17:12:06 +0100
Subject: [PATCH] fix(pci-object-storage): add container type step

ref: DTCORE-2884
Signed-off-by: Florian Renaut <florian.renaut@corp.ovh.com>
---
 .../apps/pci-object-storage/src/constants.ts  | 11 +++
 .../new/step/ContainerTypeStep.component.tsx  | 25 ++++++-
 .../new/step/ContainerTypeTile.component.tsx  | 69 +++++++++++++++++++
 .../new/useContainerCreationStore.ts          |  1 -
 .../TilesInputChoice.component.tsx            |  2 +-
 5 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerTypeTile.component.tsx

diff --git a/packages/manager/apps/pci-object-storage/src/constants.ts b/packages/manager/apps/pci-object-storage/src/constants.ts
index c583f55162ce..45322d9bdaef 100644
--- a/packages/manager/apps/pci-object-storage/src/constants.ts
+++ b/packages/manager/apps/pci-object-storage/src/constants.ts
@@ -233,6 +233,17 @@ export const OBJECT_CONTAINER_OFFERS_LABELS = {
   },
 };
 
+export const OBJECT_CONTAINER_TYPE_STATIC = 'static';
+export const OBJECT_CONTAINER_TYPE_PRIVATE = 'private';
+export const OBJECT_CONTAINER_TYPE_PUBLIC = 'public';
+export const OBJECT_CONTAINER_TYPES = [
+  OBJECT_CONTAINER_TYPE_STATIC,
+  OBJECT_CONTAINER_TYPE_PRIVATE,
+  OBJECT_CONTAINER_TYPE_PUBLIC,
+];
+
+export const CONTAINER_COMMERCIAL_NAME = 'storage-replicated';
+
 export const STORAGE_ASYNC_REPLICATION_LINK = {
   DEFAULT:
     'https://help.ovhcloud.com/csm/en-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062417',
diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerTypeStep.component.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerTypeStep.component.tsx
index 4b4e08f86005..7f3efc66453c 100644
--- a/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerTypeStep.component.tsx
+++ b/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerTypeStep.component.tsx
@@ -1,14 +1,27 @@
 import { useTranslation } from 'react-i18next';
 import { StepComponent } from '@ovh-ux/manager-react-components';
+import { TileInputChoice } from '@ovh-ux/manager-pci-common';
+
+import { OBJECT_CONTAINER_TYPES } from '@/constants';
+import { useColumnsCount } from '@/hooks/useColumnsCount';
+import { ContainerTypeTile } from './ContainerTypeTile.component';
 import { useContainerCreationStore } from '../useContainerCreationStore';
 
 export function ContainerType() {
   const { t } = useTranslation(['containers/add', 'pci-common']);
+  const columnsCount = useColumnsCount();
   const {
+    form,
     stepper,
     submitContainerType,
+    setContainerType,
     editContainerType,
   } = useContainerCreationStore();
+
+  const items = OBJECT_CONTAINER_TYPES.map((type) => ({
+    id: type,
+  }));
+
   return (
     <StepComponent
       title={t('pci_projects_project_storages_containers_add_type_title')}
@@ -26,7 +39,17 @@ export function ContainerType() {
         label: t('pci-common:common_stepper_modify_this_step'),
       }}
     >
-      <span>TODO container type</span>
+      <TileInputChoice
+        items={items}
+        columnsCount={columnsCount}
+        selectedItem={items.find(({ id }) => id === form.containerType)}
+        onSelectItem={(item) => setContainerType(item.id)}
+        isSubmitted={stepper.containerType.isLocked}
+      >
+        {(item, isSelected) => (
+          <ContainerTypeTile type={item.id} isSelected={isSelected} />
+        )}
+      </TileInputChoice>
     </StepComponent>
   );
 }
diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerTypeTile.component.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerTypeTile.component.tsx
new file mode 100644
index 000000000000..7a4c4b80f25e
--- /dev/null
+++ b/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerTypeTile.component.tsx
@@ -0,0 +1,69 @@
+import { clsx } from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { useCatalogPrice } from '@ovh-ux/manager-react-components';
+import { useCatalog } from '@ovh-ux/manager-pci-common';
+import { OsdsSkeleton, OsdsText } from '@ovhcloud/ods-components/react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
+import { CONTAINER_COMMERCIAL_NAME } from '@/constants';
+
+export interface ContainerTypeTileProps {
+  type: string;
+  isSelected: boolean;
+}
+
+export function ContainerTypeTile({
+  type,
+  isSelected,
+}: Readonly<ContainerTypeTileProps>) {
+  const { t } = useTranslation(['containers/add', 'pci-common']);
+  const { getTextPrice } = useCatalogPrice();
+  const { data: catalog, isPending } = useCatalog('cloud');
+  const addons = catalog?.addons?.filter(
+    (addon) => addon?.blobs?.commercial?.name === CONTAINER_COMMERCIAL_NAME,
+  );
+  const [pricing] = addons.map((addon) =>
+    addon.pricings?.find((addonPricing) =>
+      addonPricing?.capacities?.includes('renew'),
+    ),
+  );
+
+  return (
+    <>
+      <OsdsText
+        size={ODS_TEXT_SIZE._400}
+        level={ODS_TEXT_LEVEL.body}
+        color={ODS_THEME_COLOR_INTENT.text}
+        className={clsx('leading-8', isSelected && 'font-bold')}
+      >
+        {t(`pci_projects_project_storages_containers_add_type_${type}_label`)}
+      </OsdsText>
+      <p>
+        <OsdsText
+          size={ODS_TEXT_SIZE._100}
+          level={ODS_TEXT_LEVEL.body}
+          color={ODS_THEME_COLOR_INTENT.text}
+        >
+          {t(
+            `pci_projects_project_storages_containers_add_type_${type}_description`,
+          )}
+        </OsdsText>
+      </p>
+      <p>
+        {isPending && <OsdsSkeleton />}
+        {!isPending && pricing && (
+          <OsdsText
+            size={ODS_TEXT_SIZE._100}
+            level={ODS_TEXT_LEVEL.body}
+            color={ODS_THEME_COLOR_INTENT.text}
+            className="font-bold"
+          >
+            {t('pci_projects_project_storages_containers_add_type_price', {
+              price: getTextPrice(pricing.price),
+            })}
+          </OsdsText>
+        )}
+      </p>
+    </>
+  );
+}
diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/useContainerCreationStore.ts b/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/useContainerCreationStore.ts
index bcd9fa867e1c..e7b9e620ac69 100644
--- a/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/useContainerCreationStore.ts
+++ b/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/useContainerCreationStore.ts
@@ -282,7 +282,6 @@ export const useContainerCreationStore = create<ContainerStore>()(
           form: {
             ...state.form,
             containerName,
-            containerType: undefined,
           },
         })),
       editContainerName: () => editStep('containerName', []),
diff --git a/packages/manager/modules/manager-pci-common/src/components/tiles-input-choice/TilesInputChoice.component.tsx b/packages/manager/modules/manager-pci-common/src/components/tiles-input-choice/TilesInputChoice.component.tsx
index 881e144c823a..5ffe2379e25a 100644
--- a/packages/manager/modules/manager-pci-common/src/components/tiles-input-choice/TilesInputChoice.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/tiles-input-choice/TilesInputChoice.component.tsx
@@ -30,7 +30,7 @@ export function TileInputChoice<T extends Item>({
         gridTemplateColumns: `repeat(${columnsCount || 3}, minmax(0, 1fr))`,
       }}
     >
-      {isSubmitted && (
+      {isSubmitted && selectedItem && (
         <li key={selectedItem?.id}>
           <TileChoice isSelected isDisabled>
             {renderItem(selectedItem, true)}