Feat/manager 15473

packages/manager/apps/procedures/src/App.tsx

@@ -10,36 +10,61 @@ import {
 import { RouterProvider, createHashRouter } from 'react-router-dom';
 import '@ovhcloud/ods-theme-blue-jeans';
 import queryClient from './query.client';
-import { Routes } from './routes/routes';
+import {
+  accountDisable2faRoute,
+  exercisingYourRightsRoute,
+  Routes,
+} from './routes/routes';
 import { decodeToken, extractToken } from '@/utils/token';
 import initI18n from './i18n';
 import initAuthenticationInterceptor from '@/data/authentication.interceptor';
 import initInterceptor from './data/invisible-challenge.interceptor';
 import UserProvider from '@/context/User/provider';
-import { getRedirectLoginUrl } from '@/utils/url-builder';
+import {
+  getRedirectLoginUrl,
+  getWebSiteRedirectUrl,
+} from '@/utils/url-builder';
 
 function getSubsidiary(subsidiary: string, locale: string) {
   if (subsidiary?.trim()?.length === 0)
     return locale?.trim()?.length === 0 ? 'IE' : locale.slice(-2);
   return subsidiary;
 }
 
+const activateAuthenticationInterceptorForPath = [accountDisable2faRoute];
+const routeRedirectMap: Record<string, string> = {
+  [accountDisable2faRoute]: getRedirectLoginUrl(undefined),
+  [exercisingYourRightsRoute]: getWebSiteRedirectUrl(),
+};
+
 const token = extractToken();
 const user = decodeToken(token);
 const { subsidiary } = user || {};
 
 if (!user) {
-  const redirectUrl = getRedirectLoginUrl(user);
-  window.location.assign(redirectUrl);
-} else {
-  useDefaultLanguage('en_GB');
-  const locale = findAvailableLocale(detectUserLocale());
+  const redirectRoute = Object.keys(routeRedirectMap).find((route) =>
+    window.location.href.includes(route),
+  );
 
-  initI18n(locale, getSubsidiary(subsidiary, locale));
-  initAuthenticationInterceptor(token);
-  initInterceptor();
+  if (redirectRoute) {
+    const redirectUrl = routeRedirectMap[redirectRoute];
+    window.location.assign(redirectUrl);
+  }
+}
+
+useDefaultLanguage('en_GB');
+const locale = findAvailableLocale(detectUserLocale());
 
-  odsSetup();
+initI18n(locale, getSubsidiary(subsidiary, locale));
+odsSetup();
+initInterceptor();
+
+if (
+  activateAuthenticationInterceptorForPath.some((path) =>
+    window.location.href.includes(path),
+  )
+) {
+  initAuthenticationInterceptor(token);
 }
 
 const router = createHashRouter(Routes);

packages/manager/apps/procedures/src/components/FileInput/FileInputList.tsx

@@ -1,5 +1,11 @@
 import React, { FunctionComponent, MouseEvent, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
+import { OsdsText } from '@ovhcloud/ods-components/react';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+  ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
 import { FileInputContext } from './FileInputContainer';
 import { FileInputListItem } from './FileInputListItem';
 
@@ -26,9 +32,14 @@ export const FileInputList: FunctionComponent<Props> = ({ className }) => {
   return value?.length ? (
     <div className={className}>
       {multiple && (
-        <label className="text-sky-900 text-xs font-semibold">
+        <OsdsText
+          className="font-semibold"
+          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
+          level={ODS_THEME_TYPOGRAPHY_LEVEL.caption}
+          color={ODS_THEME_COLOR_INTENT.text}
+        >
           {t('account-disable-2fa-file-input-attachments')}
-        </label>
+        </OsdsText>
       )}
       {value.map((file, index) => (
         <FileInputListItem

packages/manager/apps/procedures/src/components/FileInput/FileInputListItem.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, MouseEvent } from 'react';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
-import { OsdsIcon } from '@ovhcloud/ods-components/react';
+import { OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react';
 import { FileWithError } from './FileInputContainer';
 
 type FileInputListItemProps = {
@@ -37,21 +37,29 @@ export const FileInputListItem: FunctionComponent<FileInputListItemProps> = ({
     >
       <OsdsIcon
         name={ODS_ICON_NAME.FILE}
+        className="flex-shrink-0"
         color={
           hasError
             ? ODS_THEME_COLOR_INTENT.error
             : ODS_THEME_COLOR_INTENT.primary
         }
         size={ODS_ICON_SIZE.sm}
       />
-      <div className="text-sm">
+      <OsdsText
+        className="text-sm break-all"
+        color={
+          hasError
+            ? ODS_THEME_COLOR_INTENT.error
+            : ODS_THEME_COLOR_INTENT.primary
+        }
+      >
         {file.name} {`(${bytesToSize(file.size)})`}
         {file.errors.map((error, index) => (
           <span className="block" key={index}>
             {error}
           </span>
         ))}
-      </div>
+      </OsdsText>
 
       <OsdsIcon
         name={ODS_ICON_NAME.CLOSE}
@@ -60,7 +68,7 @@ export const FileInputListItem: FunctionComponent<FileInputListItemProps> = ({
             ? ODS_THEME_COLOR_INTENT.error
             : ODS_THEME_COLOR_INTENT.primary
         }
-        className="ml-auto cursor-pointer"
+        className="ml-auto cursor-pointer flex-shrink-0"
         size={ODS_ICON_SIZE.sm}
         onClick={(e) => {
           if (!disabled) deleteFile(e, file);

packages/manager/apps/procedures/src/components/PageLayout/PageLayout.component.tsx

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import ovhCloudLogo from '@/assets/logo-ovhcloud.png';
+
+type Props = {
+  children: JSX.Element | JSX.Element[];
+};
+
+export const PageLayout: FunctionComponent<Props> = ({ children }) => (
+  <div className="sm:container mx-auto px-6">
+    <div className="md:py-12 p-6">
+      <div className="inline-block pb-6 md:pb-12">
+        <img src={ovhCloudLogo} alt="ovh-cloud-logo" className="app-logo" />
+      </div>
+      <div className="flex justify-center app-content lg:w-8/12 mx-auto min-h-[500px] sm:shadow-[0_0_6px_0_rgba(40,89,192,0.2)] sm:border-none border-t-[1px] border-gray-300 px-6">
+        <div className="md:p-8 w-full">{children}</div>
+      </div>
+    </div>
+  </div>
+);

packages/manager/apps/procedures/src/pages/create/LegalInformations.tsx → packages/manager/apps/procedures/src/components/legalInformations/LegalInformations.component.tsx

@@ -1,20 +1,31 @@
-import React, { FunctionComponent } from 'react';
-import { OsdsText } from '@ovhcloud/ods-components/react';
-import { useTranslation } from 'react-i18next';
 import {
   ODS_THEME_COLOR_INTENT,
   ODS_THEME_TYPOGRAPHY_LEVEL,
 } from '@ovhcloud/ods-common-theming';
 import { ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
+import { OsdsText } from '@ovhcloud/ods-components/react';
+import React, { FunctionComponent } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { CanadianPolicyLinks } from '@/types/links.type';
 import useUser from '@/context/User/useUser';
 import { LegalPolicyLinkByLanguage } from '@/constants';
-import { CanadianPolicyLinks } from '@/types/links.type';
 
-export const LegalInformations: FunctionComponent = () => {
+type Props = {
+  translationNamespace: string;
+  informationTranslationKey: string;
+  policyTanslationKey: string;
+};
+
+export const LegalInformations: FunctionComponent<Props> = ({
+  translationNamespace,
+  informationTranslationKey,
+  policyTanslationKey,
+}) => {
   const {
     t,
     i18n: { language },
-  } = useTranslation('account-disable-2fa');
+  } = useTranslation(translationNamespace);
+
   const {
     user: { subsidiary },
   } = useUser();
@@ -26,27 +37,28 @@ export const LegalInformations: FunctionComponent = () => {
         LegalPolicyLinkByLanguage.CA.en
       : LegalPolicyLinkByLanguage[subsidiary] ||
         LegalPolicyLinkByLanguage.DEFAULT;
+
   return (
-    <div className="pt-6" data-testid="legal_information">
+    <div className="pt-6">
       <OsdsText
         color={ODS_THEME_COLOR_INTENT.text}
         level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
         className="block"
         size={ODS_TEXT_SIZE._100}
       >
-        {t('account-disable-2fa-create-form-legal-info')}
+        {t(informationTranslationKey)}
       </OsdsText>
 
       <OsdsText
         color={ODS_THEME_COLOR_INTENT.text}
         level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-        className="block"
+        className="block mt-3"
         size={ODS_TEXT_SIZE._100}
       >
         <span
-          data-testid="legal_information_content"
+          data-testid="legal_information_policy_content"
           dangerouslySetInnerHTML={{
-            __html: t('account-disable-2fa-create-form-legal-info-policy', {
+            __html: t(policyTanslationKey, {
               legalPolicyLink,
             }),
           }}

packages/manager/apps/procedures/src/components/legalInformations/LegalInformations.test.tsx

@@ -0,0 +1,76 @@
+import { render } from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+import React from 'react';
+import { LegalInformations } from './LegalInformations.component';
+import { LegalPolicyLinkByLanguage } from '@/constants';
+
+const faketTranslationNamespace = 'tkey';
+const faketpolicyTanslationKey = 'policyKey';
+const faketinformationTranslationKey = 'informationKey';
+
+const user = {
+  legalForm: 'other',
+  subsidiary: 'FR',
+  language: 'en_CA',
+};
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (translationKey: string, args: any) =>
+      args ? `${translationKey} ${JSON.stringify(args)}` : translationKey,
+    i18n: {
+      language: user.language,
+    },
+  }),
+}));
+
+vi.mock('@/context/User/useUser', () => ({
+  default: () => ({
+    user,
+  }),
+}));
+
+describe('LegalInformations.component', () => {
+  it('should renders the legal information', () => {
+    const { getByText } = render(
+      <LegalInformations
+        translationNamespace={faketTranslationNamespace}
+        policyTanslationKey={faketpolicyTanslationKey}
+        informationTranslationKey={faketinformationTranslationKey}
+      />,
+    );
+
+    const legalInfoElement = getByText(faketinformationTranslationKey);
+    expect(legalInfoElement).toBeInTheDocument();
+  });
+
+  it.each([
+    ['FR', 'anything', LegalPolicyLinkByLanguage.FR],
+    ['CA', 'en_CA', LegalPolicyLinkByLanguage.CA.en],
+    ['CA', 'fr_CA', LegalPolicyLinkByLanguage.CA.fr],
+    ['CA', 'fr_FR', LegalPolicyLinkByLanguage.CA.fr],
+    ['CA', 'en_IN', LegalPolicyLinkByLanguage.CA.en],
+    ['unknown', 'anything', LegalPolicyLinkByLanguage.DEFAULT],
+  ])(
+    'should have the correct link for %s user speaking %s',
+    async (sub, locale, result) => {
+      user.subsidiary = sub;
+      user.language = locale;
+
+      const { getByTestId } = render(
+        <LegalInformations
+          translationNamespace={faketTranslationNamespace}
+          policyTanslationKey={faketpolicyTanslationKey}
+          informationTranslationKey={faketinformationTranslationKey}
+        />,
+      );
+
+      const legalInformationPolicyContent = getByTestId(
+        'legal_information_policy_content',
+      );
+      expect(legalInformationPolicyContent.innerHTML.includes(result)).toBe(
+        true,
+      );
+    },
+  );
+});

packages/manager/apps/procedures/src/pages/create/form/Modal/ConfirmModal.tsx → packages/manager/apps/procedures/src/components/modals/confirmModal/ConfirmModal.component.tsx

@@ -22,23 +22,25 @@ type Props = {
   isPending: boolean;
   onClose: () => void;
   onValidate: () => void;
+  title: string;
+  descriptionInsure: string;
+  descriptionConfirm: string;
+  noButtonLabel: string;
+  yesButtonLabel: string;
 };
 
 export const ConfirmModal: FunctionComponent<Props> = ({
   onClose,
   onValidate,
   isPending,
+  title,
+  descriptionInsure,
+  descriptionConfirm,
+  noButtonLabel,
+  yesButtonLabel,
 }) => {
-  const { t } = useTranslation('account-disable-2fa');
-
   return (
-    <OsdsModal
-      dismissible={false}
-      onOdsModalClose={onClose}
-      headline={t(
-        'account-disable-2fa-create-form-confirm-modal-send-document-title',
-      )}
-    >
+    <OsdsModal dismissible={false} onOdsModalClose={onClose} headline={title}>
       <div className="flex items-center gap-x-6">
         <div className="rounded-full p-4 bg-[#bef1ff]">
           <OsdsIcon
@@ -56,9 +58,7 @@ export const ConfirmModal: FunctionComponent<Props> = ({
             className="block"
             hue={ODS_TEXT_COLOR_HUE._500}
           >
-            {t(
-              'account-disable-2fa-create-form-confirm-modal-send-document-description-insure',
-            )}
+            {descriptionInsure}
           </OsdsText>
           <OsdsText
             level={ODS_TEXT_LEVEL.caption}
@@ -67,9 +67,7 @@ export const ConfirmModal: FunctionComponent<Props> = ({
             className="block mt-2"
             hue={ODS_TEXT_COLOR_HUE._500}
           >
-            {t(
-              'account-disable-2fa-create-form-confirm-modal-send-document-description-confirm',
-            )}
+            {descriptionConfirm}
           </OsdsText>
         </div>
       </div>
@@ -84,7 +82,7 @@ export const ConfirmModal: FunctionComponent<Props> = ({
             color={ODS_THEME_COLOR_INTENT.primary}
             onClick={onClose}
           >
-            {t('account-disable-2fa-confirm-modal-no')}
+            {noButtonLabel}
           </OsdsButton>
           <OsdsButton
             slot="actions"
@@ -93,7 +91,7 @@ export const ConfirmModal: FunctionComponent<Props> = ({
             variant={ODS_BUTTON_VARIANT.flat}
             color={ODS_THEME_COLOR_INTENT.primary}
           >
-            {t('account-disable-2fa-confirm-modal-yes')}
+            {yesButtonLabel}
           </OsdsButton>
         </>
       )}