Merge branch 'feature/EN-7744-ga-event-member-profile' of https://git…

…hub.com/ReseauEntourage/entourage-job-front into feature/EN-7744-ga-event-member-profile

.env.dist

@@ -4,7 +4,8 @@ HEROKU_RELEASE_VERSION="v100"
 ##SENTRY
 SENTRY_AUTH_TOKEN=
 SENTRY_DSN=
-##GOOGLE
+
+##ENTOURAGE-PRO
 WEBINAR_URL=""
 TOOLBOX_URL=""
 TOOLBOX_COACH_URL=""

.nvmrc

@@ -1 +1 @@
-v16.17.0
+v18.20.3

assets/custom/entourage.less

@@ -24,6 +24,13 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src: url('/static/fonts/Poppins-SemiBold.ttf') format('truetype');
+  font-display: swap;
+}
+
 
 @media print {
   * {
@@ -295,10 +302,6 @@ mark, .mark-animated > * > * > * > * {
 .ent-subnav {
   margin-bottom: 30px !important;
 
-  li.uk-active {
-    font-weight: 500;
-  }
-
   > * {
     padding-left: 40px;
   }

assets/custom/entourage.print.less

@@ -23,6 +23,13 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src: url('/static/fonts/Poppins-SemiBold.ttf') format('truetype');
+  font-display: swap;
+}
+
 //Font families
 @global-font-family: Poppins, sans-serif;
 @global-font-weight: normal;

package.json

@@ -6,6 +6,7 @@
   "engines": {
     "node": "18.x"
   },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "scripts": {
     "dev": "node -r dotenv/config server-next.js",
     "next": "next",

public/static/css/uikit.entourage.print.css

@@ -12611,6 +12611,12 @@ iframe.uk-cover {
   src: url('/static/fonts/Poppins-Light.ttf') format('truetype');
   font-display: swap;
 }
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src: url('/static/fonts/Poppins-SemiBold.ttf') format('truetype');
+  font-display: swap;
+}
 * {
   -webkit-print-color-adjust: exact !important;
 }

src/api/axiosErrors.ts

@@ -51,6 +51,15 @@ export function isEmailAlreadyVerifiedError(error: unknown) {
   );
 }
 
+export function isMessagingDailyConversationLimitReachedError(error: unknown) {
+  return (
+    isAxiosError(error) &&
+    error.response?.status === 429 &&
+    (error.response?.data as { message?: string })?.message ===
+      'DAILY_CONVERSATION_LIMIT_REACHED'
+  );
+}
+
 export function isTokenExpiredError(error: unknown) {
   return (
     isAxiosError(error) &&

src/components/backoffice/dashboard/Dashboard.tsx

@@ -20,11 +20,10 @@ import { DashboardAlertWhatsappCoach } from './DashboardAlertWhatsappCoach/Dashb
 import { DashboardAvailabilityCard } from './DashboardAvailabilityCard';
 import { DashboardLinkedUserCard } from './DashboardLinkedUserCard';
 import { DashboardMessagingConversation } from './DashboardMessagingConversation';
+import { DashboardNextSteps } from './DashboardNextSteps/DashboardNextSteps';
 import { DashboardProfileCard } from './DashboardProfileCard';
-import { DashboardReadDocumentsCard } from './DashboardReadDocumentsCard';
 import { DashboardRecommendationsCard } from './DashboardRecommendationsCard';
 import { DashboardReferentCard } from './DashboardReferentCard';
-import { DashboardStepsCard } from './DashboardStepsCard';
 import { DashboardToolboxCard } from './DashboardToolboxCard';
 
 export const Dashboard = () => {
@@ -51,12 +50,7 @@ export const Dashboard = () => {
           <StyledDashboardRightColumn
             className={`${isDesktop ? '' : 'mobile'}`}
           >
-            {isNormalUser && (
-              <>
-                <DashboardReadDocumentsCard />
-                <DashboardStepsCard />
-              </>
-            )}
+            {isNormalUser && <DashboardNextSteps />}
             <DashboardMessagingConversation />
             {isNormalUser && <DashboardRecommendationsCard />}
             {isReferer && <DashboardInviteToReferCandidate />}

src/components/backoffice/dashboard/DashboardNextSteps/DashboardNextSteps.styles.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const StyledStepsContainer = styled.div`
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  justify-content: center;
+  gap: 40px;
+`;

src/components/backoffice/dashboard/DashboardNextSteps/DashboardNextSteps.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { v4 as uuid } from 'uuid';
+import {
+  IlluBulleQuestion,
+  IlluCoeurMainsOuvertesBleu,
+  IlluCV,
+} from 'assets/icons/icons';
+import { Card } from 'src/components/utils/Cards/Card/Card';
+import { USER_ROLES } from 'src/constants/users';
+import { useCandidateId } from 'src/hooks/queryParams/useCandidateId';
+import { selectCurrentUser } from 'src/use-cases/current-user';
+import { StyledStepsContainer } from './DashboardNextSteps.styles';
+import { Step } from './Step/Step';
+
+export const DashboardNextSteps = () => {
+  const iconSizeProps = { width: 90, height: 90 };
+  const candidateId = useCandidateId();
+  const currentUser = useSelector(selectCurrentUser);
+
+  const webinarStep = {
+    title: "S'inscrire au webinaire d'information",
+    icon: <IlluBulleQuestion {...iconSizeProps} />,
+    content:
+      'Envie d’en savoir plus sur la plateforme Entourage pro. Inscrivez-vous au prochain webinaire d’information',
+    cta: {
+      label: "S'inscrire",
+      href: process.env.WEBINAR_URL,
+    },
+  };
+
+  const stepsByRole = {
+    [USER_ROLES.CANDIDATE]: [
+      webinarStep,
+      {
+        title: 'Faire mon CV Entourage pro',
+        icon: <IlluCV {...iconSizeProps} />,
+        content:
+          'L’objectif du CV Entourage Pro est de rendre visible et valoriser votre projet professionnel',
+        cta: {
+          label: 'Créer mon CV',
+          href: `/backoffice/candidat/${candidateId}/cv`,
+        },
+      },
+      {
+        title: 'Découvrir le réseau d’entraide ',
+        icon: <IlluCoeurMainsOuvertesBleu {...iconSizeProps} />,
+        content:
+          'Retrouvez tous les coachs de la communauté et contactez-les pour leur demander de l’aide et des conseils',
+        cta: {
+          label: 'Découvrir',
+          href: '/backoffice/annuaire?role=Coach',
+        },
+      },
+    ],
+    [USER_ROLES.COACH]: [
+      webinarStep,
+      {
+        title: 'Découvrir le réseau d’entraide ',
+        icon: <IlluCoeurMainsOuvertesBleu {...iconSizeProps} />,
+        content:
+          'Retrouvez tous les candidats de la communauté et contactez-les pour leur proposer de l’aide et des conseils',
+        cta: {
+          label: 'Découvrir',
+          href: '/backoffice/annuaire?role=Candidat',
+        },
+      },
+    ],
+  };
+
+  if (!currentUser || !currentUser.role) {
+    return null;
+  }
+
+  const steps = stepsByRole[currentUser.role] || [];
+
+  return (
+    <Card title="Les prochaines étapes" centerTitle>
+      <StyledStepsContainer>
+        {steps.map((step) => {
+          const uuidValue = uuid();
+          return <Step step={step} key={uuidValue} />;
+        })}
+      </StyledStepsContainer>
+    </Card>
+  );
+};

src/components/backoffice/dashboard/DashboardNextSteps/Step/Step.style.ts

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { COLORS } from 'src/constants/styles';
+
+export const StyledStepContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  justify-content: space-between;
+  padding: 20px;
+  border: ${COLORS.gray} 1px solid;
+  border-radius: 20px;
+`;
+
+export const StyledStepImage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 103px;
+`;
+
+export const StyledStepBtnContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;

src/components/backoffice/dashboard/DashboardNextSteps/Step/Step.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button } from 'src/components/utils/Button/Button';
+import { H5 } from 'src/components/utils/Headings';
+import { Text } from 'src/components/utils/Text/Text';
+import { COLORS } from 'src/constants/styles';
+import {
+  StyledStepBtnContainer,
+  StyledStepContainer,
+  StyledStepImage,
+} from './Step.style';
+
+export interface Step {
+  title: string;
+  content: string;
+  icon: React.ReactElement;
+  cta: {
+    label: string;
+    href: string;
+  };
+}
+
+export interface StepProps {
+  step: Step;
+}
+
+export const Step = ({ step }: StepProps) => {
+  return (
+    <StyledStepContainer>
+      <StyledStepImage>{step.icon}</StyledStepImage>
+      <H5
+        title={step.title}
+        center
+        color={COLORS.primaryBlue}
+        weight="semibold"
+      />
+      <Text center>{step.content}</Text>
+      <StyledStepBtnContainer>
+        <Button
+          style="custom-primary-inverted"
+          href={step.cta.href}
+          isExternal
+          newTab
+        >
+          {step.cta.label}
+        </Button>
+      </StyledStepBtnContainer>
+    </StyledStepContainer>
+  );
+};

src/components/backoffice/dashboard/DashboardRecommendationsCard/useDashboardRecommendations.ts

@@ -45,7 +45,7 @@ export function useDashboardRecommendations() {
         notificationsActions.addNotification({
           type: 'danger',
           message:
-            'Une erreur est survenue lors de la récupération des recommendations',
+            'Une erreur est survenue lors de la récupération des recommandations',
         })
       );
     }

src/components/backoffice/messaging/MessagingConversation/MessagingConversation.tsx

@@ -1,11 +1,21 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { MessagingEmptyState } from '../MessagingEmptyState';
 import { Button } from 'src/components/utils';
 import { LucidIcon } from 'src/components/utils/Icons/LucidIcon';
 import { DELAY_REFRESH_CONVERSATIONS } from 'src/constants';
+import { USER_ROLES } from 'src/constants/users';
 import { useIsMobile } from 'src/hooks/utils';
-import { selectCurrentUserId } from 'src/use-cases/current-user';
+import {
+  selectCurrentUser,
+  selectCurrentUserId,
+} from 'src/use-cases/current-user';
 import {
   messagingActions,
   selectSelectedConversation,
@@ -23,10 +33,12 @@ import {
 import { MessagingConversationHeader } from './MessagingConversationHeader/MessagingConversationHeader';
 import { MessagingMessage } from './MessagingMessage/MessagingMessage';
 import { MessagingPinnedInfo } from './MessagingPinnedInfo/MessagingPinnedInfo';
+import { MessagingSuggestions } from './MessagingSuggestions/MessagingSuggestions';
 
 export const MessagingConversation = () => {
   const dispatch = useDispatch();
   const isMobile = useIsMobile();
+  const currentUser = useSelector(selectCurrentUser);
   const currentUserId = useSelector(selectCurrentUserId);
   const selectedConversationId = useSelector(selectSelectedConversationId);
   const selectedConversation = useSelector(selectSelectedConversation);
@@ -38,6 +50,13 @@ export const MessagingConversation = () => {
   const [scrollBehavior, setScrollBehavior] = useState<ScrollBehavior>(
     'instant' as ScrollBehavior
   );
+  const displaySuggestions = useMemo(() => {
+    return (
+      selectedConversationId === 'new' &&
+      currentUser &&
+      currentUser.role === USER_ROLES.CANDIDATE
+    );
+  }, [currentUser, selectedConversationId]);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const messageInputRef = useRef<HTMLTextAreaElement>(null);
@@ -54,6 +73,7 @@ export const MessagingConversation = () => {
 
   useEffect(() => {
     setScrollBehavior('instant' as ScrollBehavior);
+    setNewMessage('');
   }, [selectedConversationId]);
 
   const scrollToBottom = () => {
@@ -63,6 +83,10 @@ export const MessagingConversation = () => {
     }, 1000);
   };
 
+  const onSuggestionClick = (suggestion) => {
+    setNewMessage(suggestion.message);
+  };
+
   const sendNewMessage = () => {
     if (selectedConversation === null) {
       return;
@@ -146,14 +170,23 @@ export const MessagingConversation = () => {
         <>
           <MessagingConversationHeader />
           {pinnedInfo && <MessagingPinnedInfo pinnedInfo={pinnedInfo} />}
-          <MessagingMessagesContainer className={isMobile ? 'mobile' : ''}>
-            {selectedConversation &&
-              selectedConversation.messages &&
-              selectedConversation.messages.map((message) => (
-                <MessagingMessage key={message.id} message={message} />
-              ))}
-            <div ref={messagesEndRef} />
-          </MessagingMessagesContainer>
+
+          {displaySuggestions ? (
+            <MessagingSuggestions
+              onSuggestionClick={onSuggestionClick}
+              newMessage={newMessage}
+            />
+          ) : (
+            <MessagingMessagesContainer className={isMobile ? 'mobile' : ''}>
+              {selectedConversation &&
+                selectedConversation.messages &&
+                selectedConversation.messages.map((message) => (
+                  <MessagingMessage key={message.id} message={message} />
+                ))}
+              <div ref={messagesEndRef} />
+            </MessagingMessagesContainer>
+          )}
+
           {/* Bloc de rédaction d'un message */}
           <MessagingMessageForm className={isMobile ? 'mobile' : ''}>
             <MessagingInputContainer>