fix(hycu): contact list by locale and tests

  ref: MANAGER-14504

Signed-off-by: Thibaud Crespin <[email protected]>

packages/manager/apps/hycu/src/components/Description/Description.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  ODS_THEME_COLOR_HUE,
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+  ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
+import { OsdsText } from '@ovhcloud/ods-components/react';
+
+export interface CustomDescriptionProps {
+  children?: any;
+  className?: string;
+}
+
+/**
+ * Copy of ODS <Description> component to pass i18n with components, not only strings
+ */
+export const CustomDescription: React.FC<CustomDescriptionProps> = ({
+  children,
+  className,
+}: CustomDescriptionProps) => {
+  return (
+    <OsdsText
+      className={`block ${className}`}
+      level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+      size={ODS_THEME_TYPOGRAPHY_SIZE._400}
+      color={ODS_THEME_COLOR_INTENT.text}
+      hue={ODS_THEME_COLOR_HUE._500}
+    >
+      {children}
+    </OsdsText>
+  );
+};
+
+export default CustomDescription;

packages/manager/apps/hycu/src/components/Loading/Loading.component.tsx

@@ -4,7 +4,9 @@ import { OsdsSpinner } from '@ovhcloud/ods-components/react';
 export default function Loading() {
   return (
     <div className="flex justify-center">
-      <OsdsSpinner />
+      <div>
+        <OsdsSpinner />
+      </div>
     </div>
   );
 }

packages/manager/apps/hycu/src/components/Order/PackSelection.tsx

@@ -16,17 +16,19 @@ import {
   OsdsLink,
 } from '@ovhcloud/ods-components/react';
 import {
-  Description,
   OvhSubsidiary,
   Price,
   Subtitle,
 } from '@ovh-ux/manager-react-components';
 
+import CustomDescription from '@/components/Description/Description.component';
+import Error from '@/components/Error/Error';
 import Loading from '@/components/Loading/Loading.component';
 import { useOrderCatalogHYCU } from '@/hooks/order/useOrderCatalogHYCU';
 import { urls } from '@/routes/routes.constant';
 import { sortPacksByPrice } from '@/utils/sortPacks';
 import { getRenewPrice } from '@/utils/getRenewPrice';
+import { CONTACT_URL_BY_SUBSIDIARY } from '@/utils/contactList';
 
 type PackSelectionProps = {
   selectPack: Dispatch<SetStateAction<string>>;
@@ -46,26 +48,30 @@ const PackSelection = ({
   const { t } = useTranslation('order');
   const navigate = useNavigate();
 
-  const { data: orderCatalogHYCU, isLoading } = useOrderCatalogHYCU(subsidiary);
+  const { data: orderCatalogHYCU, isLoading, error } = useOrderCatalogHYCU(
+    subsidiary,
+  );
+
+  if (!isLoading && error) return <Error error={error} />;
 
   return (
     <>
       <Subtitle className="block mb-6">{t('hycu_order_subtitle')}</Subtitle>
-      <Description className="mb-8">
+      <CustomDescription className="mb-8">
         <Trans
           t={t}
           i18nKey="hycu_order_subtitle_description"
           components={{
             contact: (
               <OsdsLink
                 color={ODS_THEME_COLOR_INTENT.primary}
-                href={'https://www.ovhcloud.com/fr/contact/'}
+                href={CONTACT_URL_BY_SUBSIDIARY[subsidiary as string]}
                 target={OdsHTMLAnchorElementTarget._blank}
               ></OsdsLink>
             ),
           }}
         ></Trans>
-      </Description>
+      </CustomDescription>
       {isLoading && <Loading />}
       {orderCatalogHYCU && !isLoading && (
         <div className="grid gap-8 xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 mb-8">

packages/manager/apps/hycu/src/hooks/order/useOrderCatalogHYCU.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { OvhSubsidiary } from '@ovh-ux/manager-react-components';
-import { ErrorResponse } from '@/types/api.type';
+import { ApiError } from '@ovh-ux/manager-core-api';
 import { getOrderCatalogHYCU } from '../../data/api/orderCatalogHYCU';
 import { HYCUCatalog } from '@/types/orderCatalogHYCU.type';
 
@@ -13,7 +13,7 @@ export const useOrderCatalogHYCU = (ovhSubsidiary: OvhSubsidiary) => {
     refetchOnWindowFocus: false,
     keepPreviousData: true,
   };
-  return useQuery<HYCUCatalog, ErrorResponse>({
+  return useQuery<HYCUCatalog, ApiError>({
     queryKey: ['order/catalog/public/licenseHycu', ovhSubsidiary],
     queryFn: () => getOrderCatalogHYCU(ovhSubsidiary),
     ...options,

packages/manager/apps/hycu/src/index.tsx

@@ -28,7 +28,7 @@ const init = async (appName: string) => {
     context,
     reloadOnLocaleChange: true,
     defaultNS: appName,
-    ns: ['listing', 'dashboard', 'onboarding', 'order'],
+    ns: ['listing', 'dashboard', 'onboarding'],
   });
 
   const region = context.environment.getRegion();

packages/manager/apps/hycu/src/utils/contactList.ts

@@ -0,0 +1,23 @@
+export const CONTACT_URL_BY_SUBSIDIARY = {
+  ASIA: 'https://www.ovhcloud.com/asia/contact/',
+  DE: 'https://www.ovhcloud.com/de/contact/',
+  ES: 'https://www.ovhcloud.com/es-es/contact/',
+  WS: 'https://www.ovhcloud.com/es/contact/',
+  IE: 'https://www.ovhcloud.com/en-ie/contact/',
+  IT: 'https://www.ovhcloud.com/it/contact/',
+  PL: 'https://www.ovhcloud.com/pl/contact/',
+  PT: 'https://www.ovhcloud.com/pt/contact/',
+  FR: 'https://www.ovhcloud.com/fr/contact/',
+  GB: 'https://www.ovhcloud.com/en-gb/contact/',
+  CA: 'https://www.ovhcloud.com/en-ca/contact/',
+  QC: 'https://www.ovhcloud.com/fr-ca/contact/',
+  US: 'https://www.ovhcloud.com/en/contact/',
+  AU: 'https://www.ovhcloud.com/en-au/contact/',
+  SG: 'https://www.ovhcloud.com/en-sg/contact/',
+  MA: 'https://www.ovhcloud.com/fr-ma/contact/',
+  SN: 'https://www.ovhcloud.com/fr-sn/contact/',
+  TN: 'https://www.ovhcloud.com/fr-tn/contact/',
+  NL: 'https://www.ovhcloud.com/nl/contact/',
+  IN: 'https://www.ovhcloud.com/en-in/contact/',
+  WE: 'https://www.ovhcloud.com/en/contact/',
+};