front: add asu support in lmr's help module

OpenRailAssociation · Dec 8, 2024 · 32ce707 · 32ce707
1 parent bedd0af
commit 32ce707
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 43 deletions.
diff --git a/front/public/locales/fr/stdcm-help-section.json b/front/public/locales/fr/stdcm-help-section.json
@@ -1,6 +1,25 @@
 {
   "help": "Aide",
   "backToIndex": "Retour à l'index",
+  "asu": [
+    {
+      "title": "Nom de l'application",
+      "value": "OSRD"
+    },
+    {
+      "title": "Assistance",
+      "value": "Support applicatif ASU"
+    },
+    {
+      "title": "Téléphone",
+      "value": "70 70 70 (ou 09 72 72 12 70)"
+    },
+    {
+      "title": "Code Application (AVAYA)",
+      "value": "176"
+    }
+  ],
+  "asuLink": "Lien vers le support ASU",
   "sections": {
     "application": {
       "title": "L'application",

diff --git a/front/src/applications/stdcm/components/StdcmHelpModule/HelpSection.tsx b/front/src/applications/stdcm/components/StdcmHelpModule/HelpSection.tsx
@@ -2,8 +2,8 @@ import { ArrowLeft } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 
-import type { Section } from './types';
 import SectionContentManager from './SectionContentManager';
+import type { Section } from './types';
 
 type HelpSectionProps = {
   section: string;
@@ -37,7 +37,7 @@ const HelpSection = ({ section, isActive, closeHelpSection }: HelpSectionProps)
           currentSection.content.map((content, index) => (
             <SectionContentManager key={index} content={content} />
           ))}
-        {currentSection.subSections?.map((subSection, index) => (
+        {currentSection.subSections?.map((subSection) => (
           <>
             <h2 className="stdcm__help-section__subtitle">{subSection.title}</h2>
             {subSection.content?.map((content, idx) => (

diff --git a/front/src/applications/stdcm/components/StdcmHelpModule/StdcmHelpModule.tsx b/front/src/applications/stdcm/components/StdcmHelpModule/StdcmHelpModule.tsx
@@ -21,6 +21,7 @@ const StdcmHelpModule = ({ toggleHelpModule, showHelpModule }: StdcmHelpSectionP
     toggleHelpModule();
   };
   const closeHelpSection = () => setActiveSection(null);
+  const support = t('asu', { returnObjects: true }) as Array<any>;
   const sections = Object.keys(t('sections', { returnObjects: true }));
   return (
     <div className={cx('stdcm__help-module', { active: showHelpModule })}>
@@ -48,6 +49,23 @@ const StdcmHelpModule = ({ toggleHelpModule, showHelpModule }: StdcmHelpSectionP
             ))}
         </div>
       </div>
+      <footer>
+        {Array.isArray(support) &&
+          support.map((item, index) => (
+            <>
+              <div className="support-info">
+                <div className="support-info__title">{item.title}</div>
+                <div className="support-info__content">{item.value}</div>
+              </div>
+              {index !== support.length - 1 && <hr />}
+            </>
+          ))}
+        <div className="support-asu__link">
+          <a href="https://asu.osrd.fr/" target="_blank" rel="noreferrer">
+            {t('asuLink')}
+          </a>
+        </div>
+      </footer>
       {sections.map((section, index) => (
         <HelpSection
           section={section}

diff --git a/front/src/applications/stdcm/components/StdcmHelpModule/types.ts b/front/src/applications/stdcm/components/StdcmHelpModule/types.ts
@@ -1,42 +1,38 @@
 export type Section = {
-  id: string; // Identifiant unique de la section
-  title: string; // Titre de la section
-  content?: Content[]; // Tableau des contenus de la section,
-  subSections?: Omit<Section, 'subSection'>[]; // Tableau des sous-sections
+  id: string;
+  title: string;
+  content?: Content[];
+  subSections?: Omit<Section, 'subSection'>[];
 };
 
-// Définition des différents types de contenu qu'une section peut avoir
 export type Content = ListContent | TextContent | FAQContent | GlossaryContent;
 
-// Contenu sous forme de liste
 export type ListContent = {
-  type: 'list'; // Indique qu'il s'agit d'une liste
-  items: Record<string, string>[]; // Tableau des éléments de la liste
+  type: 'list';
+  items: Record<string, string>[];
 };
 
-// Contenu sous forme de texte
 export type TextContent = {
-  type: 'text'; // Indique qu'il s'agit d'un texte
-  value: string; // Texte contenant éventuellement du HTML
+  type: 'text';
+  value: string;
 };
 
 export type FAQItem = {
-  question: string; // La question
-  answer: string; // La réponse
+  question: string;
+  answer: string;
 };
 
 export type FAQContent = {
-  type: 'faq'; // Indique qu'il s'agit d'une FAQ
-  questions: FAQItem[]; // La question
+  type: 'faq';
+  questions: FAQItem[];
 };
 
-// Contenu sous forme de glossaire (clé/valeur)
 export type GlossaryContent = {
-  type: 'definitions'; // Indique qu'il s'agit d'un glossaire
-  definitions: GlossaryItem[]; // Dictionnaire terme -> définition
+  type: 'definitions';
+  definitions: GlossaryItem[];
 };
 
 export type GlossaryItem = {
-  term: string; // Terme du glossaire
-  definition: string; // Définition du terme
+  term: string;
+  definition: string;
 };
diff --git a/front/src/styles/scss/applications/stdcm/_helpModule.scss b/front/src/styles/scss/applications/stdcm/_helpModule.scss
@@ -61,24 +61,24 @@
       right: 0;
     }
     &__header {
-        margin-bottom: 75px;
+      margin-bottom: 75px;
     }
-    &__back-button{
-        color: var(--grey50);
-        font-size: 18px;
-        font-weight: 600;
+    &__back-button {
+      color: var(--grey50);
+      font-size: 18px;
+      font-weight: 600;
     }
     &__title {
-        font-size:32px;
-        height: 40px;
-        font-weight: 600;
-        margin-bottom: 46px;
-        color: var(--black100);
+      font-size: 32px;
+      height: 40px;
+      font-weight: 600;
+      margin-bottom: 46px;
+      color: var(--black100);
     }
     &__subtitle {
-        font-size: 24px;
-        font-weight: 600;
-        height: 32px;
+      font-size: 24px;
+      font-weight: 600;
+      height: 32px;
     }
     &__content {
       padding-right: 56px;
@@ -87,17 +87,50 @@
       height: calc(100% - 40px);
       .section__content {
         ul {
-            list-style-type: disc;
-            list-style-position: outside;
-            padding-left: 15px;
+          list-style-type: disc;
+          list-style-position: outside;
+          padding-left: 15px;
         }
-        code{
-            padding-left: 2px;
-            padding-right: 2px;
-            background-color: var(--grey10);
-            color: var(--grey60);
+        code {
+          padding-left: 2px;
+          padding-right: 2px;
+          background-color: var(--grey10);
+          color: var(--grey60);
         }
       }
     }
   }
+  footer {
+    margin-top: auto;
+
+    .support-info {
+      width: inherit;
+      display: flex;
+      justify-content: space-between;
+      &__title {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+        color: var(--black100);
+      }
+      &__content {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        color: var(--black100);
+      }
+    }
+    hr {
+      opacity: 1;
+      background-color: rgba(211, 209, 207, 1);
+      margin: 2px 0px;
+    }
+    .support-asu__link {
+      margin-top: 31px;
+      text-align: right;
+      color: var(--primary60);
+      font-size: 18px;
+      font-weight: 600;
+    }
+  }
 }