fix(pci-instances): move hook usage into useFlavorCommon

Signed-off-by: Lauren Olivier <[email protected]>

Author: lolottetheclash

packages/manager/apps/pci-instances/src/pages/instances/create/components/continentSelection/ContinentSelection.component.tsx

@@ -50,7 +50,7 @@ export const ContinentSelection = () => {
             </FormFieldLabel>
             <Select
               items={continentOptions}
-              value={[field.value]}
+              value={field.value ? [...field.value] : []}
               onValueChange={handleContinentChange}
             >
               <SelectControl />

packages/manager/apps/pci-instances/src/pages/instances/create/components/deploymentMode/DeploymentModeSelection.component.tsx

@@ -36,11 +36,12 @@ export const DeploymentModeSelection = () => {
     field: ControllerRenderProps<TDeploymentModeSelection, 'deploymentModes'>,
     selectedMode: TDeploymentMode,
   ) => () => {
-    const isSelected = field.value.includes(selectedMode);
+    const values = field.value ?? [];
+    const isSelected = values.includes(selectedMode);
 
     const selection = isSelected
-      ? field.value.filter((value) => value !== selectedMode)
-      : [...field.value, selectedMode];
+      ? values.filter((value) => value !== selectedMode)
+      : [...values, selectedMode];
 
     field.onChange(selection);
 
@@ -69,15 +70,15 @@ export const DeploymentModeSelection = () => {
             {deploymentModes.map(({ mode, title, description, Image }) => (
               <PciCard
                 selectable
-                selected={field.value.includes(mode)}
+                selected={(field.value ?? []).includes(mode)}
                 className="h-full"
                 key={mode}
                 onClick={handleSelect(field, mode)}
               >
                 <PciCard.Header>
                   <Checkbox
                     className="w-full"
-                    checked={field.value.includes(mode)}
+                    checked={(field.value ?? []).includes(mode)}
                   >
                     <CheckboxControl />
                     <CheckboxLabel className="font-bold text-lg text-[--ods-color-heading]">

packages/manager/apps/pci-instances/src/pages/instances/create/components/flavor/FlavorRowUtils.tsx

@@ -13,9 +13,11 @@ import {
 } from '@ovhcloud/ods-react';
 import { useTranslation } from 'react-i18next';
 import { ReactNode } from 'react';
+import { useCatalogPrice } from '@ovh-ux/manager-react-components';
 
 export function useFlavorCommon() {
   const { t } = useTranslation('creation');
+  const { getTextPrice } = useCatalogPrice(4);
 
   const renderName = (flavor: {
     name: string;
@@ -68,5 +70,31 @@ export function useFlavorCommon() {
     </Radio>
   );
 
-  return { renderName, renderRadio };
+  const renderHourlyPrice = (value: number | null) => {
+    const minimumHourlyPrice = value !== null ? getTextPrice(value) : '-';
+    return (
+      <Text preset={TEXT_PRESET.span} className="font-semibold">
+        {minimumHourlyPrice}
+      </Text>
+    );
+  };
+
+  const renderMonthlyPrice = (
+    realMinimumMonthlyPrice: number | null,
+    estimatedMinimumMonthlyPrice: number | null,
+  ) => {
+    const minimumMonthlyPrice =
+      realMinimumMonthlyPrice !== null
+        ? getTextPrice(realMinimumMonthlyPrice)
+        : estimatedMinimumMonthlyPrice !== null
+        ? `~ ${getTextPrice(estimatedMinimumMonthlyPrice)}`
+        : '-';
+    return (
+      <Text preset={TEXT_PRESET.span} className="font-semibold">
+        {minimumMonthlyPrice}
+      </Text>
+    );
+  };
+
+  return { renderName, renderRadio, renderHourlyPrice, renderMonthlyPrice };
 }

packages/manager/apps/pci-instances/src/pages/instances/create/components/flavor/FlavorRowsBuilder.tsx

@@ -3,36 +3,33 @@ import { TableRow } from '@/components/flavorsTable/FlavorsTable.component';
 import { DeploymentModeBadge } from '@/components/deploymentModeBadge/DeploymentModeBadge.component';
 import { TFlavorDataForTable } from '@/pages/instances/create/view-models/flavorsViewModel';
 import { ReactNode } from 'react';
-import { useCatalogPrice } from '@ovh-ux/manager-react-components';
 
 type FlavorRenderers = {
   renderName: (flavor: TFlavorDataForTable) => ReactNode;
   renderRadio: (id: string, disabled?: boolean) => ReactNode;
+  renderHourlyPrice: (value: number | null) => ReactNode;
+  renderMonthlyPrice: (
+    realMinimumMonthlyPrice: number | null,
+    estimatedMinimumMonthlyPrice: number | null,
+  ) => ReactNode;
 };
 
-export function FlavorRowsBuilder(
+export const FlavorRowsBuilder = (
   flavors: TFlavorDataForTable[],
-  { renderName, renderRadio }: FlavorRenderers,
+  {
+    renderName,
+    renderRadio,
+    renderHourlyPrice,
+    renderMonthlyPrice,
+  }: FlavorRenderers,
   withUnavailable: boolean,
-): TableRow[] {
-  const { getTextPrice } = useCatalogPrice(4);
-
+): TableRow[] => {
   return flavors
     .filter(
       ({ unavailable, unavailableQuota }) =>
         withUnavailable || !(unavailable || unavailableQuota),
     )
     .map((flavor) => {
-      const minimumHourlyPrice = flavor.realMinimumHourlyPrice
-        ? getTextPrice(flavor.realMinimumHourlyPrice)
-        : '-';
-
-      const minimumMonthlyPrice = flavor.realMinimumMonthlyPrice
-        ? getTextPrice(flavor.realMinimumMonthlyPrice)
-        : flavor.estimatedMinimumMonthlyPrice
-        ? `~ ${getTextPrice(flavor.estimatedMinimumMonthlyPrice)}`
-        : '-';
-
       return {
         id: flavor.id,
         disabled: flavor.unavailableQuota,
@@ -48,16 +45,11 @@ export function FlavorRowsBuilder(
             -
           </Text>
         ),
-        hourlyPrice: (
-          <Text preset={TEXT_PRESET.span} className="font-semibold">
-            {minimumHourlyPrice}
-          </Text>
-        ),
-        monthlyPrice: (
-          <Text preset={TEXT_PRESET.span} className="font-semibold">
-            {minimumMonthlyPrice}
-          </Text>
+        hourlyPrice: renderHourlyPrice(flavor.realMinimumHourlyPrice),
+        monthlyPrice: renderMonthlyPrice(
+          flavor.realMinimumMonthlyPrice,
+          flavor.estimatedMinimumMonthlyPrice,
         ),
       };
     });
-}
+};

packages/manager/apps/pci-instances/src/pages/instances/create/components/flavor/FlavorSelection.component.tsx

@@ -43,7 +43,12 @@ export const FlavorSelection: FC<{ withUnavailable: boolean }> = ({
     name: ['flavorCategory', 'flavorType', 'microRegion', 'flavorId'],
   });
 
-  const { renderName, renderRadio } = useFlavorCommon();
+  const {
+    renderName,
+    renderRadio,
+    renderHourlyPrice,
+    renderMonthlyPrice,
+  } = useFlavorCommon();
   const [unavailableFlavor, setUnavailableFlavor] = useState<string | null>(
     null,
   );
@@ -78,11 +83,20 @@ export const FlavorSelection: FC<{ withUnavailable: boolean }> = ({
       columns: FlavorColumnsBuilder(t),
       rows: FlavorRowsBuilder(
         flavors,
-        { renderName, renderRadio },
+        { renderName, renderRadio, renderHourlyPrice, renderMonthlyPrice },
         withUnavailable,
       ),
     };
-  }, [flavorCategory, flavors, renderName, renderRadio, t, withUnavailable]);
+  }, [
+    flavorCategory,
+    flavors,
+    renderName,
+    renderRadio,
+    renderHourlyPrice,
+    renderMonthlyPrice,
+    t,
+    withUnavailable,
+  ]);
 
   const availableRegions = useMemo(
     () =>