feat(ips): parking order

ref: MANAGER-15843

Signed-off-by: Nicolas Pierre-charles <[email protected]>

packages/manager-react-components/src/components/content/index.ts

@@ -1,4 +1,5 @@
 export * from './headers/headers.component';
 export * from './price/price.component';
+export * from './price/price.utils';
 export * from './dashboard-tile/dashboard-tile.component';
 export * from './dashboard-tile/tile-block.component';

packages/manager/apps/ips/package.json

@@ -23,13 +23,13 @@
     "@ovh-ux/manager-config": "*",
     "@ovh-ux/manager-core-api": "*",
     "@ovh-ux/manager-core-utils": "*",
+    "@ovh-ux/manager-module-order": "0.9.3",
     "@ovh-ux/manager-react-components": "^2.6.2",
     "@ovh-ux/manager-react-core-application": "*",
     "@ovh-ux/manager-react-shell-client": "^0.8.5",
-    "@ovh-ux/manager-module-order": "0.9.3",
     "@ovh-ux/request-tagger": "^0.4.0",
-    "@ovhcloud/ods-components": "18.4.1",
-    "@ovhcloud/ods-themes": "^18.4.1",
+    "@ovhcloud/ods-components": "18.5.0",
+    "@ovhcloud/ods-themes": "^18.5.0",
     "i18next": "^23.8.2",
     "i18next-http-backend": "^2.4.2",
     "jsurl": "0.1.5",

packages/manager/apps/ips/public/translations/ips/Messages_fr_FR.json

@@ -1,6 +1,4 @@
 {
-  "per_ip": "/IP",
-  "per_ip_full": "par adresse IP",
   "breadcrumb_root_label": "Toutes les IPs",
   "order": "Commander une IP"
 }

packages/manager/apps/ips/public/translations/order/Messages_fr_FR.json

@@ -1,6 +1,8 @@
 {
   "title": "Commander des Additional IP",
   "back_link": "Retour à la page précédente",
+  "per_ip": "/IP",
+  "per_ip_full": "par adresse IP",
   "ip_version_title": "Sélectionner la version de l'adresse IP",
   "ip_version_description": "Pour un certain nombre de cas, vous aurez peut-être besoin d'une IPv4 standard, la plus utilisée, ou d'une nouvelle version du protocole - l'IPv6. Veuillez noter que la liste des produits compatibles peut varier.",
   "ipv4_card_title": "IPv4",
@@ -12,11 +14,15 @@
   "service_selection_select_label": "Service",
   "service_selection_select_placeholder": "Sélectionnez...",
   "service_selection_select_vrack_option_group_label": "Réseau Privé vRack",
+  "service_selection_select_ip_parking_option_group_label": "IP Parking",
+  "service_selection_select_ip_parking_option_label": "IP Parking",
   "region_selection_title": "Sélectionnez une région pour votre nouvelle Additional IP",
   "offer_selection_title": "Choisissez votre offre",
   "additional_ip_block_card_title": "Block Additional IP",
   "additional_ip_block_card_description": "Bloc d'adresse IPv4. Les tailles de bloc disponibles varient en fonction du service associé.",
   "additional_ip_card_title": "Additional IP",
+  "additional_ip_card_ripe_description": "Additional IPv4 RIPE - {{price}}",
+  "additional_ip_card_arin_description": "Additional IPv4 ARIN - {{price}}",
   "geolocation_selection_title": "Géolocalisation de l'adresse IP",
   "geolocation_selection_description": "Veuillez choisir l'un des emplacements disponibles pour votre nouveau bloc d'adresses IPv4 supplémentaire.",
   "organisation_selection_title": "Associer une organisation",

packages/manager/apps/ips/src/components/OptionCard/OptionCard.component.tsx

@@ -13,21 +13,22 @@ import {
 import {
   OdsCard,
   OdsDivider,
+  OdsSkeleton,
   OdsSpinner,
   OdsText,
 } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import './option-card.scss';
 
-export type OptionCardProps = {
+export type OptionCardProps = React.PropsWithChildren<{
   className?: string;
   isDisabled?: boolean;
   isSelected?: boolean;
   onClick?: () => void;
   title: React.ReactNode;
-  description: string;
-  price: number;
-};
+  subtitle?: React.ReactNode;
+  description?: string;
+}>;
 
 export const OptionCard: React.FC<OptionCardProps> = ({
   className,
@@ -36,10 +37,9 @@ export const OptionCard: React.FC<OptionCardProps> = ({
   onClick,
   title,
   description,
-  price,
+  subtitle,
+  children,
 }) => {
-  const { environment } = React.useContext(ShellContext);
-  const { t, i18n } = useTranslation();
   const stateStyle = isDisabled
     ? 'cursor-not-allowed bg-neutral-100'
     : 'cursor-pointer hover:shadow-md';
@@ -56,26 +56,52 @@ export const OptionCard: React.FC<OptionCardProps> = ({
       >
         {title}
       </OdsText>
-      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{description}</OdsText>
+      {subtitle && (
+        <OdsText
+          preset={ODS_TEXT_PRESET.paragraph}
+          className="flex justify-center mb-4"
+        >
+          {subtitle}
+        </OdsText>
+      )}
+      {description && (
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>{description}</OdsText>
+      )}
       <OdsDivider className="block -ml-3 -mr-3 mt-auto mb-2" />
-      <OdsText
-        preset={ODS_TEXT_PRESET.paragraph}
-        className="flex justify-center"
-      >
-        {price === null ? (
-          <OdsSpinner size={ODS_SPINNER_SIZE.xs} />
-        ) : (
-          <Price
-            isStartingPrice
-            suffix={t('per_ip')}
-            value={price}
-            tax={0}
-            intervalUnit={IntervalUnitType.month}
-            ovhSubsidiary={environment.user.ovhSubsidiary as OvhSubsidiary}
-            locale={i18n.language}
-          />
-        )}
-      </OdsText>
+      {children}
     </OdsCard>
   );
 };
+
+export type PriceFooterProps = {
+  price: number | null;
+  suffix?: string;
+  isStartingPrice?: boolean;
+};
+
+export const PriceDescription: React.FC<PriceFooterProps> = ({
+  price,
+  suffix,
+  isStartingPrice,
+}) => {
+  const { i18n } = useTranslation();
+  const { environment } = React.useContext(ShellContext);
+
+  return (
+    <OdsText preset={ODS_TEXT_PRESET.paragraph} className="flex justify-center">
+      {price === null ? (
+        <OdsSpinner size={ODS_SPINNER_SIZE.xs} />
+      ) : (
+        <Price
+          isStartingPrice={isStartingPrice}
+          suffix={suffix}
+          value={price}
+          tax={0}
+          intervalUnit={IntervalUnitType.month}
+          ovhSubsidiary={environment.user.ovhSubsidiary as OvhSubsidiary}
+          locale={i18n.language}
+        />
+      )}
+    </OdsText>
+  );
+};

packages/manager/apps/ips/src/data/hooks/catalog/catalog.utils.ts

@@ -1,5 +1,16 @@
+import {
+  isRegionInEu,
+  isRegionInUs,
+} from '@/components/RegionSelector/region-selector.utils';
 import { CatalogIpPlan } from '../../api/catalog';
 
+export const getContinentKeyFromRegion = (region: string) => {
+  if (isRegionInEu(region)) {
+    return 'EU';
+  }
+  return isRegionInUs(region) ? 'US' : 'CA';
+};
+
 export const IP_FAILOVER_PLANCODE = {
   EU: 'ip-failover-ripe',
   CA: 'ip-failover-arin',

packages/manager/apps/ips/src/data/hooks/useServiceList.ts

@@ -0,0 +1,66 @@
+import { useQueries } from '@tanstack/react-query';
+import { getVrackList } from '../api/vrack';
+
+export enum ServiceType {
+  vrack = 'vrack',
+  vps = 'vps',
+  dedicatedCloud = 'dedicatedCloud',
+  ipParking = 'ipParking',
+  server = 'server',
+  unknown = 'unknown',
+}
+
+export const ipParkingOptionValue = 'parking';
+
+/**
+ * Fetch the list of available services to order an additional IP
+ */
+export const useServiceList = () => {
+  const queries = useQueries({
+    queries: [
+      {
+        queryKey: ['dedicatedCloud'],
+        queryFn: () => [],
+      },
+      {
+        queryKey: ['server'],
+        queryFn: () => [],
+      },
+      {
+        queryKey: ['vps'],
+        queryFn: () => [],
+      },
+      {
+        queryKey: ['vrack'],
+        queryFn: getVrackList,
+      },
+    ],
+  });
+
+  return {
+    getServiceType: (serviceId: string) => {
+      if (serviceId === ipParkingOptionValue) {
+        return ServiceType.ipParking;
+      }
+      if (queries[0]?.data?.includes(serviceId)) {
+        return ServiceType.dedicatedCloud;
+      }
+      if (queries[1]?.data?.includes(serviceId)) {
+        return ServiceType.server;
+      }
+      if (queries[2]?.data?.includes(serviceId)) {
+        return ServiceType.vps;
+      }
+      return queries[3]?.data?.data?.includes(serviceId)
+        ? ServiceType.vrack
+        : ServiceType.unknown;
+    },
+    dedicatedCloud: queries[0]?.data,
+    server: queries[1],
+    vps: queries[2],
+    vrack: queries[3]?.data?.data,
+    isError: queries.some((query) => query.isError),
+    error: queries.find((query) => query.error),
+    isLoading: queries.some((query) => query.isLoading),
+  };
+};