Skip to content

Commit fa81b28

Browse files
aderghamovaderghamov
committed
feat(ips): reworking the appearance of the BYOIP page (#19977)
ref: #MANAGER-19852 Signed-off-by: aderghamov <[email protected]>
1 parent 44584e2 commit fa81b28

20 files changed

+349
-312
lines changed

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"description": "Importez vos propres adresses IP publiques et utilisez les sur les services OVHcloud éligibles.",
44
"rir_selection_title": "Sélectionnez votre RIR - Regional Internet Registry",
55
"rir_selection_description": "Sélectionnez le RIR qui gère vos adresses IP publiques.",
6+
"rir_selection_APNIC_description": "Registre Internet régional pour l'Asie-Pacifique",
7+
"rir_selection_ARIN_description": "Registre américain des numéros Internet",
8+
"rir_selection_RIPE_description": "Registre Internet régional pour l'Europe, le Moyen-Orient et l'Asie centrale",
69
"region_selection_title": "Séléctionnez votre campus",
710
"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.",
811
"region_token_title": "Token",
@@ -26,5 +29,22 @@
2629
"ip_byoip_disclaimer_description_point_3": "Avoir une réputation saine sur cette plage d'adresses IP",
2730
"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.",
2831
"ip_byoip_disclaimer_confirm_text": "Valider",
29-
"ip_byoip_disclaimer_cancel_text": "Annuler"
32+
"ip_byoip_disclaimer_cancel_text": "Annuler",
33+
"region_ERI": "Londres (ERI) - Angleterre",
34+
"region_BHS": "Beauharnois (BHS) - Canada",
35+
"region_DC": "Beauharnois (DC) - Canada",
36+
"region_GRA": "Gravelines (GRA) - France",
37+
"region_HIL": "Hillsboro (HIL) - États-Unis",
38+
"region_LIM": "Limburg (LIM) - Allemagne",
39+
"region_RBX": "Roubaix (RBX) - France",
40+
"region_SBG": "Strasbourg (SBG) - France",
41+
"region_SGP": "Singapour (SGP) - Asie",
42+
"region_SYD": "Sydney (SYD) - Australie",
43+
"region_VIN": "Vint Hill (VIN) - États-Unis",
44+
"region_WAW": "Varsovie (WAW) - Pologne",
45+
"region_RBX_HZ": "Roubaix (RBXHZ) - France",
46+
"region_GSW": "(GSW) - France",
47+
"region_YNM": "Mumbai (YNM) - Inde",
48+
"region_YYZ": "Toronto (YYZ) - Canada",
49+
"region_PAR": "Paris (PAR) - France"
3050
}

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

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
OdsDivider,
1010
OdsText,
1111
OdsSpinner,
12+
OdsRadio,
1213
} from '@ovhcloud/ods-components/react';
1314
import { handleClick } from '@ovh-ux/manager-react-components';
1415
import './option-card.scss';
@@ -18,6 +19,7 @@ export type OptionCardProps = React.PropsWithChildren<{
1819
isDisabled?: boolean;
1920
isSelected?: boolean;
2021
isLoading?: boolean;
22+
hasRadioButton?: boolean;
2123
onClick?: () => void;
2224
title: React.ReactNode;
2325
subtitle?: React.ReactNode;
@@ -29,6 +31,7 @@ export const OptionCard: React.FC<OptionCardProps> = ({
2931
isDisabled,
3032
isSelected,
3133
isLoading,
34+
hasRadioButton,
3235
onClick,
3336
title,
3437
description,
@@ -38,43 +41,59 @@ export const OptionCard: React.FC<OptionCardProps> = ({
3841
const stateStyle = isDisabled
3942
? 'cursor-not-allowed bg-neutral-100'
4043
: 'cursor-pointer hover:shadow-md';
41-
const borderStyle = isSelected ? 'option_card_selected' : 'm-[1px]';
44+
const borderStyle = isSelected
45+
? 'option_card_selected'
46+
: 'option_card m-[1px]';
47+
const justifyStyle = hasRadioButton ? 'justify-left' : 'justify-center';
4248
return (
4349
<OdsCard
4450
tabIndex={0}
45-
className={`flex flex-col p-3 transition-shadow ${stateStyle} ${borderStyle} ${className}`}
51+
className={`flex flex-col justify-between transition-shadow ${stateStyle} ${borderStyle} ${className}`}
4652
{...handleClick(() => !isDisabled && onClick?.())}
4753
color={ODS_CARD_COLOR.neutral}
4854
>
49-
<OdsText
50-
className="flex justify-center mb-2"
51-
preset={ODS_TEXT_PRESET.heading4}
52-
>
53-
{title}
54-
</OdsText>
55+
{hasRadioButton ? (
56+
<OdsText
57+
className="flex justify-left m-4"
58+
preset={ODS_TEXT_PRESET.heading4}
59+
>
60+
<span className="h-full align-middle mr-3">
61+
<OdsRadio name="" is-checked={isSelected}></OdsRadio>
62+
</span>
63+
<span>{title}</span>
64+
</OdsText>
65+
) : (
66+
<OdsText
67+
className="flex justify-center mb-2"
68+
preset={ODS_TEXT_PRESET.heading4}
69+
>
70+
{title}
71+
</OdsText>
72+
)}
5573
{subtitle && (
5674
<OdsText
5775
preset={ODS_TEXT_PRESET.paragraph}
58-
className="flex justify-center mb-4"
76+
className={`flex ${justifyStyle} m-4`}
5977
>
6078
{subtitle}
6179
</OdsText>
6280
)}
6381
{description && (
6482
<OdsText
65-
className="flex justify-center text-center"
83+
className={`flex ${justifyStyle} m-4 text-center`}
6684
preset={ODS_TEXT_PRESET.paragraph}
6785
>
6886
{description}
6987
</OdsText>
7088
)}
71-
{children && <OdsDivider className="block -ml-3 -mr-3 mt-auto mb-2" />}
7289
{isLoading ? (
7390
<div className="text-center">
7491
<OdsSpinner size={ODS_SPINNER_SIZE.xs} />
7592
</div>
7693
) : (
77-
children
94+
children && (
95+
<span className="card-children p-4 rounded-b-md">{children}</span>
96+
)
7897
)}
7998
</OdsCard>
8099
);

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
1+
.option_card {
2+
border-color: var(--ods-color-primary-100);
3+
.card-children {
4+
background-color: var(--ods-color-neutral-050);
5+
}
6+
}
7+
18
.option_card_selected {
2-
border: 2px solid #0050d7;
9+
border: 2px solid var(--ods-color-information-500);
10+
background-color: #f3fdff;
311
margin: 0;
12+
13+
.card-children {
14+
background-color: var(--ods-color-primary-050);
15+
}
416
}

‎packages/manager/apps/ips/src/components/RegionCard/RegionCard.component.tsx‎

Lines changed: 53 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,72 @@
11
import React from 'react';
22
import { ODS_CARD_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
3-
import { OdsCard, OdsDivider, OdsText } from '@ovhcloud/ods-components/react';
4-
import './option-card.scss';
5-
import { Region } from '@ovh-ux/manager-react-components';
3+
import {
4+
OdsCard,
5+
OdsPopover,
6+
OdsRadio,
7+
OdsText,
8+
} from '@ovhcloud/ods-components/react';
9+
import { useTranslation } from 'react-i18next';
10+
import './region-card.scss';
11+
import {
12+
getCityNameKey,
13+
getCountryKey,
14+
shadowColor,
15+
} from './region-card.utils';
16+
import { getCountryCode } from '@/utils';
617

718
export type RegionCardProps = React.PropsWithChildren<{
8-
className?: string;
9-
isDisabled?: boolean;
19+
region: string;
20+
disabledMessage?: string;
1021
isSelected?: boolean;
1122
onClick?: () => void;
12-
title: string;
13-
subtitle?: string;
14-
description?: string;
1523
}>;
1624

1725
export const RegionCard: React.FC<RegionCardProps> = ({
18-
className,
19-
isDisabled,
26+
region,
27+
disabledMessage,
2028
isSelected,
2129
onClick,
22-
title,
23-
description,
24-
subtitle,
25-
children,
2630
}) => {
27-
const stateStyle = isDisabled
31+
const stateStyle = disabledMessage
2832
? 'cursor-not-allowed bg-neutral-100'
2933
: 'cursor-pointer hover:shadow-md';
30-
const borderStyle = isSelected ? 'option_card_selected' : 'm-[1px]';
34+
const cardStyle = isSelected ? 'region_card_selected' : 'region_card m-[1px]';
35+
const { t } = useTranslation('region-selector');
36+
3137
return (
32-
<OdsCard
33-
className={`flex flex-col p-3 transition-shadow ${stateStyle} ${borderStyle} ${className}`}
34-
onClick={() => !isDisabled && onClick?.()}
35-
color={ODS_CARD_COLOR.neutral}
36-
>
37-
<OdsText
38-
className="flex justify-center mb-2"
39-
preset={ODS_TEXT_PRESET.heading6}
38+
<div>
39+
{disabledMessage && (
40+
<OdsPopover triggerId={region} withArrow className="max-w-sm">
41+
{disabledMessage}
42+
</OdsPopover>
43+
)}
44+
<OdsCard
45+
id={region}
46+
tabIndex={0}
47+
className={`flex p-3 transition-shadow cursor-pointer ${cardStyle} ${stateStyle} w-full sm:w-[311px] ${
48+
disabledMessage ? 'opacity-40' : ''
49+
}`}
50+
onClick={() => !disabledMessage && onClick?.()}
51+
color={ODS_CARD_COLOR.neutral}
4052
>
41-
<Region mode="datacenter" name={title} />
42-
</OdsText>
53+
<span className="flex h-full mr-3">
54+
<OdsRadio name="" is-checked={isSelected}></OdsRadio>
55+
</span>
56+
<span
57+
style={{
58+
backgroundImage: `url('flags/${getCountryCode(region)}.svg')`,
59+
}}
60+
className={`w-[24px] h-[17px] shadow-md shadow-[${shadowColor}] mr-3 bg-cover`}
61+
/>
62+
<div className="flex flex-col">
63+
<OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
64+
{t(getCountryKey(region))} - {t(getCityNameKey(region))}
65+
</OdsText>
4366

44-
{subtitle && (
45-
<OdsText
46-
preset={ODS_TEXT_PRESET.paragraph}
47-
className="flex justify-center mb-4"
48-
>
49-
{subtitle}
50-
</OdsText>
51-
)}
52-
{description && (
53-
<OdsText preset={ODS_TEXT_PRESET.paragraph}>{description}</OdsText>
54-
)}
55-
{children && <OdsDivider className="block -ml-3 -mr-3 mt-auto mb-2" />}
56-
{children}
57-
</OdsCard>
67+
<OdsText preset={ODS_TEXT_PRESET.span}>{region}</OdsText>
68+
</div>
69+
</OdsCard>
70+
</div>
5871
);
5972
};

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

Lines changed: 0 additions & 4 deletions
This file was deleted.

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.region_card {
2+
border: var(--ods-border-width-sm) solid var(--ods-color-primary-100);
3+
margin: 0;
4+
}
5+
.region_card_selected {
6+
border: var(--ods-border-width-md) solid var(--ods-color-primary-500);
7+
margin: 0;
8+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { getCountryCode } from '@/utils';
2+
3+
export const shadowColor = '#000E9C33';
4+
5+
export const getCountryKey = (region: string) =>
6+
`region-selector-country-name_${getCountryCode(region)?.toUpperCase()}`;
7+
8+
export const getCityNameKey = (region: string) =>
9+
`region-selector-city-name_${region}`;

0 commit comments

Comments
 (0)