diff --git a/front/public/locales/fr/stdcm-help-section.json b/front/public/locales/fr/stdcm-help-section.json index 36bce505fcd..a6e98252c30 100644 --- 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 index 1ad0016ec78..c8019cb48ac 100644 --- 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) => ( ))} - {currentSection.subSections?.map((subSection, index) => ( + {currentSection.subSections?.map((subSection) => ( <>

{subSection.title}

{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 index b11677d27b5..7aafedebfaf 100644 --- 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; const sections = Object.keys(t('sections', { returnObjects: true })); return (
@@ -48,6 +49,23 @@ const StdcmHelpModule = ({ toggleHelpModule, showHelpModule }: StdcmHelpSectionP ))}
+
+ {Array.isArray(support) && + support.map((item, index) => ( + <> +
+
{item.title}
+
{item.value}
+
+ {index !== support.length - 1 &&
} + + ))} +
+ + {t('asuLink')} + +
+
{sections.map((section, index) => ( []; // Tableau des sous-sections + id: string; + title: string; + content?: Content[]; + subSections?: Omit[]; }; -// 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[]; // Tableau des éléments de la liste + type: 'list'; + items: Record[]; }; -// 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 index eb34039e8d5..fcc5a1187a9 100644 --- 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; + } + } }