feat(ips): reworking the appearance of the BYOIP page

ref: #MANAGER-19852

Signed-off-by: aderghamov <[email protected]>

Author: aderghamov

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

@@ -3,6 +3,9 @@
   "description": "Importez vos propres adresses IP publiques et utilisez les sur les services OVHcloud éligibles.",
   "rir_selection_title": "Sélectionnez votre RIR - Regional Internet Registry",
   "rir_selection_description": "Sélectionnez le RIR qui gère vos adresses IP publiques.",
+  "rir_selection_APNIC_description": "Registre Internet régional pour l'Asie-Pacifique",
+  "rir_selection_ARIN_description": "Registre américain des numéros Internet",
+  "rir_selection_RIPE_description": "Registre Internet régional pour l'Europe, le Moyen-Orient et l'Asie centrale",
   "region_selection_title": "Séléctionnez votre campus",
   "region_selection_description": "Un campus est l'ensemble de datacentres sur lesquels vous pourrez déplacer vos adresses IP. La liste des datacentres composant un campus est affichée ci-dessous. Vous devez sélectionner le campus ou seront situés vos services.",
   "region_token_title": "Token",
@@ -26,5 +29,22 @@
   "ip_byoip_disclaimer_description_point_3": "Avoir une réputation saine sur cette plage d'adresses IP",
   "ip_byoip_disclaimer_ordering_delay_message": "Veuillez noter que ce processus peut prendre approximativement 3 semaines. Nous vous prions de nous excuser pour ce désagrément.",
   "ip_byoip_disclaimer_confirm_text": "Valider",
-  "ip_byoip_disclaimer_cancel_text": "Annuler"
+  "ip_byoip_disclaimer_cancel_text": "Annuler",
+  "region_ERI": "Londres (ERI) - Angleterre",
+  "region_BHS": "Beauharnois (BHS) - Canada",
+  "region_DC": "Beauharnois (DC) - Canada",
+  "region_GRA": "Gravelines (GRA) - France",
+  "region_HIL": "Hillsboro (HIL) - États-Unis",
+  "region_LIM": "Limburg (LIM) - Allemagne",
+  "region_RBX": "Roubaix (RBX) - France",
+  "region_SBG": "Strasbourg (SBG) - France",
+  "region_SGP": "Singapour (SGP) - Asie",
+  "region_SYD": "Sydney (SYD) - Australie",
+  "region_VIN": "Vint Hill (VIN) - États-Unis",
+  "region_WAW": "Varsovie (WAW) - Pologne",
+  "region_RBX_HZ": "Roubaix (RBXHZ) - France",
+  "region_GSW": "(GSW) - France",
+  "region_YNM": "Mumbai (YNM) - Inde",
+  "region_YYZ": "Toronto (YYZ) - Canada",
+  "region_PAR": "Paris (PAR) - France"
 }

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

@@ -9,6 +9,7 @@ import {
   OdsDivider,
   OdsText,
   OdsSpinner,
+  OdsRadio,
 } from '@ovhcloud/ods-components/react';
 import { handleClick } from '@ovh-ux/manager-react-components';
 import './option-card.scss';
@@ -18,6 +19,7 @@ export type OptionCardProps = React.PropsWithChildren<{
   isDisabled?: boolean;
   isSelected?: boolean;
   isLoading?: boolean;
+  hasRadioButton?: boolean;
   onClick?: () => void;
   title: React.ReactNode;
   subtitle?: React.ReactNode;
@@ -29,6 +31,7 @@ export const OptionCard: React.FC<OptionCardProps> = ({
   isDisabled,
   isSelected,
   isLoading,
+  hasRadioButton,
   onClick,
   title,
   description,
@@ -38,43 +41,59 @@ export const OptionCard: React.FC<OptionCardProps> = ({
   const stateStyle = isDisabled
     ? 'cursor-not-allowed bg-neutral-100'
     : 'cursor-pointer hover:shadow-md';
-  const borderStyle = isSelected ? 'option_card_selected' : 'm-[1px]';
+  const borderStyle = isSelected
+    ? 'option_card_selected'
+    : 'option_card m-[1px]';
+  const justifyStyle = hasRadioButton ? 'justify-left' : 'justify-center';
   return (
     <OdsCard
       tabIndex={0}
-      className={`flex flex-col p-3 transition-shadow ${stateStyle} ${borderStyle} ${className}`}
+      className={`flex flex-col justify-between transition-shadow ${stateStyle} ${borderStyle} ${className}`}
       {...handleClick(() => !isDisabled && onClick?.())}
       color={ODS_CARD_COLOR.neutral}
     >
-      <OdsText
-        className="flex justify-center mb-2"
-        preset={ODS_TEXT_PRESET.heading4}
-      >
-        {title}
-      </OdsText>
+      {hasRadioButton ? (
+        <OdsText
+          className="flex justify-left m-4"
+          preset={ODS_TEXT_PRESET.heading4}
+        >
+          <span className="h-full align-middle mr-3">
+            <OdsRadio name="" is-checked={isSelected}></OdsRadio>
+          </span>
+          <span>{title}</span>
+        </OdsText>
+      ) : (
+        <OdsText
+          className="flex justify-center mb-2"
+          preset={ODS_TEXT_PRESET.heading4}
+        >
+          {title}
+        </OdsText>
+      )}
       {subtitle && (
         <OdsText
           preset={ODS_TEXT_PRESET.paragraph}
-          className="flex justify-center mb-4"
+          className={`flex ${justifyStyle} m-4`}
         >
           {subtitle}
         </OdsText>
       )}
       {description && (
         <OdsText
-          className="flex justify-center text-center"
+          className={`flex ${justifyStyle} m-4 text-center`}
           preset={ODS_TEXT_PRESET.paragraph}
         >
           {description}
         </OdsText>
       )}
-      {children && <OdsDivider className="block -ml-3 -mr-3 mt-auto mb-2" />}
       {isLoading ? (
         <div className="text-center">
           <OdsSpinner size={ODS_SPINNER_SIZE.xs} />
         </div>
       ) : (
-        children
+        children && (
+          <span className="card-children p-4 rounded-b-md">{children}</span>
+        )
       )}
     </OdsCard>
   );

packages/manager/apps/ips/src/components/OptionCard/option-card.scss

@@ -1,4 +1,16 @@
+.option_card {
+  border-color: var(--ods-color-primary-100);
+  .card-children {
+    background-color: var(--ods-color-neutral-050);
+  }
+}
+
 .option_card_selected {
-  border: 2px solid #0050d7;
+  border: 2px solid var(--ods-color-information-500);
+  background-color: #f3fdff;
   margin: 0;
+
+  .card-children {
+    background-color: var(--ods-color-primary-050);
+  }
 }

packages/manager/apps/ips/src/pages/byoip/sections/AsOwnTypeSelectionSection.component.tsx

@@ -37,11 +37,12 @@ export const AsOwnTypeSelectionSection: React.FC = () => {
   }
   return (
     <OrderSection title={t('ip_byoip_as_rir_title')}>
-      <div className="grid grid-rows-2 gap-3">
+      <div className="grid grid-cols-3 gap-3">
         {campusValues.map((value) => (
           <OptionCard
             key={value}
             title={value}
+            hasRadioButton={true}
             isSelected={asOwnRirType === value}
             onClick={() => setAsOwnRirType(value)}
           />

packages/manager/apps/ips/src/pages/byoip/sections/AsTypeSelectionSection.component.tsx

@@ -20,10 +20,11 @@ export const AsTypeSelectionSection: React.FC = () => {
       title={t('ip_byoip_as_system_title')}
       description={t('ip_byoip_as_system_description')}
     >
-      <div className="grid grid-rows-2 gap-3">
+      <div className="grid grid-cols-2 gap-3">
         {AS_OPTIONS.map((value) => (
           <OptionCard
             key={value}
+            hasRadioButton={true}
             title={t(`ip_byoip_as_type_${value}`)}
             isSelected={asType === value}
             onClick={() => handleAsTypeChange(value)}

packages/manager/apps/ips/src/pages/byoip/sections/RegionSelectionSection.component.tsx

@@ -7,14 +7,15 @@ import { RegionCard } from '@/components/RegionCard/RegionCard.component';
 import { useGetCatalog, CONFIG_NAME } from '@/data/hooks/catalog/useGetCatalog';
 import { getConfigValues } from '../Byoip.utils';
 import { ByoipContext } from '../Byoip.context';
+import { OptionCard } from '@/components/OptionCard/OptionCard.component';
 
 type CampusType = {
   name: string;
   planCode: string;
 };
 
 export const RegionSelectionSection: React.FC = () => {
-  const { t } = useTranslation('byoip');
+  const { t } = useTranslation(['byoip']);
   const { data: catalog, isLoading } = useGetCatalog();
   const { selectedRegion, setSelectedRegion } = React.useContext(ByoipContext);
 
@@ -38,6 +39,14 @@ export const RegionSelectionSection: React.FC = () => {
     >
       <div className="grid grid-cols-3 gap-2">
         {campusValues.map((value) => (
+          <OptionCard
+            key={value.name}
+            title={t(`region_${value.name}`)}
+            hasRadioButton={true}
+            isSelected={selectedRegion === value.name}
+            onClick={() => setSelectedRegion(value.name)}
+          />
+          /*
           <RegionCard
             key={value.name}
             title={value.name}
@@ -48,6 +57,7 @@ export const RegionSelectionSection: React.FC = () => {
           >
             <OdsText preset={ODS_TEXT_PRESET.paragraph}>{value.name}</OdsText>
           </RegionCard>
+          */
         ))}
       </div>
     </OrderSection>

packages/manager/apps/ips/src/pages/byoip/sections/RirSelectionSection.component.tsx

@@ -31,11 +31,13 @@ export const RirSelectionSection: React.FC = () => {
       title={t('rir_selection_title')}
       description={t('rir_selection_description')}
     >
-      <div className="grid grid-rows-2 gap-3">
+      <div className="grid grid-cols-3 gap-3">
         {ipRirValues.map((value) => (
           <OptionCard
             key={value}
             title={value}
+            subtitle={t(`rir_selection_${value}_description`)}
+            hasRadioButton={true}
             isSelected={ipRir === value}
             onClick={() => setIpRir(value)}
           />