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

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/components/RegionCard/RegionCard.component.tsx

@@ -1,59 +1,72 @@
 import React from 'react';
 import { ODS_CARD_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
-import { OdsCard, OdsDivider, OdsText } from '@ovhcloud/ods-components/react';
-import './option-card.scss';
-import { Region } from '@ovh-ux/manager-react-components';
+import {
+  OdsCard,
+  OdsPopover,
+  OdsRadio,
+  OdsText,
+} from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import './region-card.scss';
+import {
+  getCityNameKey,
+  getCountryKey,
+  shadowColor,
+} from './region-card.utils';
+import { getCountryCode } from '@/utils';
 
 export type RegionCardProps = React.PropsWithChildren<{
-  className?: string;
-  isDisabled?: boolean;
+  region: string;
+  disabledMessage?: string;
   isSelected?: boolean;
   onClick?: () => void;
-  title: string;
-  subtitle?: string;
-  description?: string;
 }>;
 
 export const RegionCard: React.FC<RegionCardProps> = ({
-  className,
-  isDisabled,
+  region,
+  disabledMessage,
   isSelected,
   onClick,
-  title,
-  description,
-  subtitle,
-  children,
 }) => {
-  const stateStyle = isDisabled
+  const stateStyle = disabledMessage
     ? 'cursor-not-allowed bg-neutral-100'
     : 'cursor-pointer hover:shadow-md';
-  const borderStyle = isSelected ? 'option_card_selected' : 'm-[1px]';
+  const cardStyle = isSelected ? 'region_card_selected' : 'region_card m-[1px]';
+  const { t } = useTranslation('region-selector');
+
   return (
-    <OdsCard
-      className={`flex flex-col p-3 transition-shadow ${stateStyle} ${borderStyle} ${className}`}
-      onClick={() => !isDisabled && onClick?.()}
-      color={ODS_CARD_COLOR.neutral}
-    >
-      <OdsText
-        className="flex justify-center mb-2"
-        preset={ODS_TEXT_PRESET.heading6}
+    <div>
+      {disabledMessage && (
+        <OdsPopover triggerId={region} withArrow className="max-w-sm">
+          {disabledMessage}
+        </OdsPopover>
+      )}
+      <OdsCard
+        id={region}
+        tabIndex={0}
+        className={`flex p-3 transition-shadow cursor-pointer ${cardStyle} ${stateStyle} w-full sm:w-[311px] ${
+          disabledMessage ? 'opacity-40' : ''
+        }`}
+        onClick={() => !disabledMessage && onClick?.()}
+        color={ODS_CARD_COLOR.neutral}
       >
-        <Region mode="datacenter" name={title} />
-      </OdsText>
+        <span className="flex h-full mr-3">
+          <OdsRadio name="" is-checked={isSelected}></OdsRadio>
+        </span>
+        <span
+          style={{
+            backgroundImage: `url('flags/${getCountryCode(region)}.svg')`,
+          }}
+          className={`w-[24px] h-[17px] shadow-md shadow-[${shadowColor}] mr-3 bg-cover`}
+        />
+        <div className="flex flex-col">
+          <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+            {t(getCountryKey(region))} - {t(getCityNameKey(region))}
+          </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>
-      )}
-      {children && <OdsDivider className="block -ml-3 -mr-3 mt-auto mb-2" />}
-      {children}
-    </OdsCard>
+          <OdsText preset={ODS_TEXT_PRESET.span}>{region}</OdsText>
+        </div>
+      </OdsCard>
+    </div>
   );
 };

packages/manager/apps/ips/src/components/RegionCard/region-card.scss

@@ -0,0 +1,8 @@
+.region_card {
+  border: var(--ods-border-width-sm) solid var(--ods-color-primary-100);
+  margin: 0;
+}
+.region_card_selected {
+  border: var(--ods-border-width-md) solid var(--ods-color-primary-500);
+  margin: 0;
+}

packages/manager/apps/ips/src/components/RegionCard/region-card.utils.ts

@@ -0,0 +1,9 @@
+import { getCountryCode } from '@/utils';
+
+export const shadowColor = '#000E9C33';
+
+export const getCountryKey = (region: string) =>
+  `region-selector-country-name_${getCountryCode(region)?.toUpperCase()}`;
+
+export const getCityNameKey = (region: string) =>
+  `region-selector-city-name_${region}`;