diff --git a/package.json b/package.json index 4b878193d..6d9236215 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "linkedout-front", - "version": "2.13.1", + "version": "2.13.2", "description": "", "main": "index.js", "engines": { diff --git a/src/components/backoffice/parametres/ParametresLayout/ParametresHelpCard/ParametresHelpCard.tsx b/src/components/backoffice/parametres/ParametresLayout/ParametresHelpCard/ParametresHelpCard.tsx index 8a3b9c0d4..12b69bf7a 100644 --- a/src/components/backoffice/parametres/ParametresLayout/ParametresHelpCard/ParametresHelpCard.tsx +++ b/src/components/backoffice/parametres/ParametresLayout/ParametresHelpCard/ParametresHelpCard.tsx @@ -1,8 +1,9 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import PlaceholderIllu from 'assets/icons/illu-coeur-mains-ouvertes.svg'; -import { useHelpField, helpFields } from '../../useUpdateProfile'; +import { helpFields, useHelpField } from '../../useUpdateProfile'; import { ParametresPlaceholder } from '../ParametresPlaceholder'; import { ProfileHelpList } from 'src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpList'; +import { useContextualRole } from 'src/components/backoffice/useContextualRole'; import { openModal } from 'src/components/modals/Modal'; import { Card } from 'src/components/utils'; import { ParametresHelpCardTitles } from 'src/constants/helps'; @@ -30,16 +31,13 @@ export const ParametresHelpCard = () => { const helpField = useHelpField(user.role); - const [contextualRole, setContextualRole] = useState(role); - useEffect(() => { - setContextualRole(role === 'Candidat externe' ? 'Candidat' : role); - }, [role]); + const { contextualRole } = useContextualRole(role); const openHelpEditModal = () => { openModal( ); }; @@ -48,7 +46,7 @@ export const ParametresHelpCard = () => { return ( name) : [] } - options={ParametresHelpCardContents[role.toLowerCase()].map( + options={ParametresHelpCardContents[role].map( ({ value, title: titleH6, description, icon }) => ({ value, component: ( diff --git a/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpInformationCard.tsx b/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpInformationCard.tsx index 05b3de61b..8c1dc19f3 100644 --- a/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpInformationCard.tsx +++ b/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpInformationCard.tsx @@ -3,16 +3,24 @@ import PlaceholderIllu from 'assets/icons/illu-coeur-mains-ouvertes.svg'; import { ProfilePlaceHolder } from '../ProfilePlaceholder'; import { useSelectedProfile } from '../useSelectedProfile'; import { useHelpField } from 'src/components/backoffice/parametres/useUpdateProfile'; +import { useContextualRole } from 'src/components/backoffice/useContextualRole'; import { Card } from 'src/components/utils'; -import { CANDIDATE_USER_ROLES } from 'src/constants/users'; +import { CANDIDATE_USER_ROLES, USER_ROLES } from 'src/constants/users'; import { isRoleIncluded } from 'src/utils'; import { ProfileHelpList } from './ProfileHelpList'; export const ProfileHelpInformationCard = () => { const { selectedProfile } = useSelectedProfile(); + const helpField = useHelpField(selectedProfile?.role); + const { contextualRole } = useContextualRole( + // TODO remove check because selectedProfile always exists + selectedProfile ? selectedProfile.role : USER_ROLES.CANDIDATE + ); + if (!selectedProfile || !helpField) return null; + return ( { {selectedProfile[helpField].length > 0 ? ( ) : ( { return ( - {PARAMETRES_HELP_CARD_CONTENTS[role.toLowerCase()].map( - ({ icon, title, value }, index) => { - if (!helpList.some((help) => help.name === value)) { - return null; - } - return ( -
  • - {icon} - {title} -
    • - ); + {ParametresHelpCardContents[role].map(({ icon, title, value }, index) => { + if (!helpList.some((help) => help.name === value)) { + return null; } - )} + return ( +
  • + {icon} + {title} +
    • + ); + })}     ); }; diff --git a/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpList/ProfileHelpList.utils.tsx b/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpList/ProfileHelpList.utils.tsx deleted file mode 100644 index 47e88bd51..000000000 --- a/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpList/ProfileHelpList.utils.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react'; -import CVIllu from 'assets/icons/illu-CV.svg'; -import ConversationIllu from 'assets/icons/illu-conversation.svg'; -import MaletteIllu from 'assets/icons/illu-malette.svg'; -import TipsIllu from 'assets/icons/illu-poignee-de-main.svg'; -import RSIllu from 'assets/icons/illu-reseaux-sociaux.svg'; - -export const PARAMETRES_HELP_CARD_CONTENTS = { - candidat: [ - { - icon: , - value: 'tips', - title: 'Demander des conseils aux membre de la communauté', - description: - 'Recevez des conseils personnalisés et un accompagnement de la part de nos coachs pour vous guider dans votre parcours professionnel.', - }, - { - icon: , - value: 'interview', - title: 'Se préparer aux entretien d’embauche', - description: - "Profitez de l'expertise de nos coachs pour créer des CV et lettres de motivation qui mettent en avant vos atouts et compétences.", - }, - { - icon: , - value: 'cv', - title: 'M’aider à réaliser mon CV et mes lettres de motivation', - description: - "Préparez-vous à réussir vos entretiens avec l'aide de nos coachs, qui vous apporteront des conseils pratiques et un soutien moral.", - }, - { - icon: , - value: 'event', - title: 'Se rencontrer et échanger avec les membres de la communautés', - description: - "Rejoignez notre communauté lors d'événements pour partager vos expériences, apprendre des autres et tisser des liens professionnels précieux.", - }, - { - icon: , - value: 'network', - title: 'Avoir plus de réseau professionnel', - description: - "Multipliez vos opportunités professionnelles en vous connectant avec des professionnels qui peuvent vous soutenir et vous ouvrir des portes sur le marché de l'emploi.", - }, - ], - coach: [ - { - icon: , - value: 'tips', - title: 'Donner des conseils aux membres de la communauté', - description: - 'Partagez votre savoir-faire et vos conseils pour aider les candidats à naviguer sur le marché du travail et à trouver des opportunités adaptées à leurs compétences.', - }, - { - icon: , - value: 'interview', - title: 'Aider à préparer les entretiens d’embauche', - description: - "Mettez à profit votre expertise pour coacher les candidats, les aider à anticiper les questions d'entretiens et à communiquer efficacement leur motivation.", - }, - { - icon: , - value: 'cv', - title: 'Aider à réaliser un CV et une lettre de motivation', - description: - 'Utilisez votre expérience pour guider les candidats dans la création de documents professionnels qui reflètent leur potentiel et leurs expériences.', - }, - { - icon: , - value: 'event', - title: - 'Se rencontrer lors d’événements avec les membres de la communautés', - description: - "Participer à des événements qui encouragent l'entraide, le partage d'expériences et le développement de réseaux professionnels enrichissants pour les candidats.", - }, - { - icon: , - value: 'network', - title: 'Partager votre réseau professionnel', - description: - 'Mettez en relation les candidats avec des contacts pertinents et intégez-les dans des réseaux qui peuvent favoriser leur insertion professionnelle.', - }, - ], -} as const; diff --git a/src/components/backoffice/useContextualRole.ts b/src/components/backoffice/useContextualRole.ts new file mode 100644 index 000000000..3bd36d356 --- /dev/null +++ b/src/components/backoffice/useContextualRole.ts @@ -0,0 +1,25 @@ +import { useEffect, useState } from 'react'; +import { + CANDIDATE_USER_ROLES, + USER_ROLES, + UserRole, +} from 'src/constants/users'; +import { isRoleIncluded } from 'src/utils'; + +export function useContextualRole(role: UserRole) { + const [contextualRole, setContextualRole] = useState< + typeof USER_ROLES.CANDIDATE | typeof USER_ROLES.COACH + >(USER_ROLES.CANDIDATE); + + useEffect(() => { + setContextualRole( + isRoleIncluded(CANDIDATE_USER_ROLES, role) + ? USER_ROLES.CANDIDATE + : USER_ROLES.COACH + ); + }, [role]); + + return { + contextualRole, + }; +} diff --git a/src/components/utils/Inputs/SelectList/SelectList.stories.tsx b/src/components/utils/Inputs/SelectList/SelectList.stories.tsx index 318b0e652..11864eda9 100644 --- a/src/components/utils/Inputs/SelectList/SelectList.stories.tsx +++ b/src/components/utils/Inputs/SelectList/SelectList.stories.tsx @@ -4,6 +4,7 @@ import { StyledHelpModalSelectOption } from 'src/components/backoffice/parametre import { Card } from 'src/components/utils/Card'; import { H6 } from 'src/components/utils/Headings'; import { ParametresHelpCardContents } from 'src/constants/helps'; +import { USER_ROLES } from 'src/constants/users'; import { SelectList as SelectListComponent } from './SelectList'; const meta = { @@ -23,7 +24,7 @@ const meta = { args: { id: 'select-list-stories', onChange: () => {}, - options: ParametresHelpCardContents.candidat.map( + options: ParametresHelpCardContents[USER_ROLES.CANDIDATE].map( ({ value, title, description, icon }) => ({ value, component: ( diff --git a/src/constants/helps.tsx b/src/constants/helps.tsx index 56255c33f..c154c39e1 100644 --- a/src/constants/helps.tsx +++ b/src/constants/helps.tsx @@ -5,6 +5,7 @@ import MaletteIllu from 'assets/icons/illu-malette.svg'; import TipsIllu from 'assets/icons/illu-poignee-de-main.svg'; import RSIllu from 'assets/icons/illu-reseaux-sociaux.svg'; import { HelpNames } from 'src/api/types'; +import { USER_ROLES } from './users'; import { FilterConstant } from './utils'; export const ProfileCardHelps: (FilterConstant & { @@ -36,21 +37,32 @@ export const ProfileCardHelps: (FilterConstant & { label: 'Partage', }, ]; -export const ParametresHelpCardTitles = { +export const ParametresHelpCardTitles: { + [K in 'card' | 'modal']: { + [R in typeof USER_ROLES.CANDIDATE | typeof USER_ROLES.COACH]: string; + }; +} = { card: { - coach: 'Vos propositions de coup de pouce', - candidat: "Vos demandes d'aide", + [USER_ROLES.COACH]: 'Vos propositions de coup de pouce', + [USER_ROLES.CANDIDATE]: "Vos demandes d'aide", }, modal: { - coach: + [USER_ROLES.COACH]: 'Sélectionnez les coups de pouce que vous souhaitez apporter aux candidats', - candidat: + [USER_ROLES.CANDIDATE]: 'Sélectionnez les coups de pouce que vous souhaitez avoir auprès des coachs', }, } as const; -export const ParametresHelpCardContents = { - candidat: [ +export const ParametresHelpCardContents: { + [K in typeof USER_ROLES.CANDIDATE | typeof USER_ROLES.COACH]: { + icon: React.ReactNode; + value: string; + title: string; + description: string; + }[]; +} = { + [USER_ROLES.CANDIDATE]: [ { icon: , value: 'tips', @@ -87,7 +99,7 @@ export const ParametresHelpCardContents = { "Multipliez vos opportunités professionnelles en vous connectant avec des professionnels qui peuvent vous soutenir et vous ouvrir des portes sur le marché de l'emploi.", }, ], - coach: [ + [USER_ROLES.COACH]: [ { icon: , value: 'tips', @@ -125,4 +137,4 @@ export const ParametresHelpCardContents = { 'Mettez en relation les candidats avec des contacts pertinents et intégez-les dans des réseaux qui peuvent favoriser leur insertion professionnelle.', }, ], -} as const; +};