Merge branch 'release/v2.18.2'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "entourage-pro-front",
-  "version": "2.18.1",
+  "version": "2.18.2",
   "description": "",
   "main": "index.js",
   "engines": {

src/api/api.ts

@@ -15,6 +15,7 @@ import {
   ContactContactUs,
   ContactNewsletter,
   CV,
+  ExternalCv,
   ExternalMessage,
   ExternalOpportunityDto,
   InternalMessage,
@@ -158,6 +159,23 @@ export class APIHandler {
     return this.put(`/cv/read/${candidateId}`);
   }
 
+  /// //////////////
+  /// external cv //
+  /// //////////////
+  postExternalCv(form: FormData): Promise<AxiosResponse<ExternalCv>> {
+    return this.post('/external-cv', form, {
+      'Content-Type': 'multipart/form-data',
+    });
+  }
+
+  getExternalCvByUser(userId: string): Promise<AxiosResponse<ExternalCv>> {
+    return this.get(`/external-cv/${userId}`);
+  }
+
+  deleteExternalCv(): Promise<AxiosResponse> {
+    return this.delete(`/external-cv`);
+  }
+
   /// //////
   // user //
   /// //////

src/api/types.ts

@@ -41,6 +41,7 @@ export const APIRoutes = {
   ORGANIZATIONS: 'organization',
   MESSAGE: 'message',
   READ_DOCUMENTS: 'readDocuments',
+  EXTERNAL_CVS: 'external-cv',
 } as const;
 
 export type APIRoute = (typeof APIRoutes)[keyof typeof APIRoutes];
@@ -109,8 +110,15 @@ export type UserProfile = {
   lastSendMessage: string | null;
   lastReceivedMessage: string | null;
   linkedinUrl: string | null;
+  hasExternalCv: boolean;
 };
 
+export interface WhatsappJoinUrl {
+  name: string;
+  qrCodePath: string;
+  url: string;
+}
+
 export type User = {
   coach: User;
   id: string;
@@ -128,6 +136,7 @@ export type User = {
   hashReset: string;
   saltReset: string;
   zone: AdminZone;
+  whatsappJoinUrl: WhatsappJoinUrl;
   organization: Organization;
   deletedAt?: string;
   userProfile: UserProfile;
@@ -621,6 +630,7 @@ export type PublicProfile = {
   lastSentMessage: string;
   lastReceivedMessage: string;
   cvUrl?: string;
+  hasExternalCv: boolean;
 };
 
 export type ProfilesFilters = {
@@ -643,3 +653,7 @@ export type PostAuthSendVerifyEmailParams = {
   token?: string;
   email?: string;
 };
+
+export type ExternalCv = {
+  url: string;
+};

src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVEdit/CVEdit.styles.ts

@@ -2,26 +2,24 @@ import styled from 'styled-components';
 import { COLORS } from 'src/constants/styles';
 
 export const StyledEditPictureContainer = styled.div`
-  height: 400px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: black;
   position: relative;
-  &.mobile {
-    height: 270px;
-  }
+  border: 1px solid #d9d9d9;
+  border-radius: 20px;
+  padding: 20px;
 `;
 
 export const StyledEditPicture = styled.div`
-  height: 400px;
-  width: 270px !important;
-  border-radius: 859px 909px 729px 909px;
-  background-position: 66% 39%;
+  height: 360px;
+  width: 360px;
+  border-radius: 50%;
+  background-position: center;
   background-size: cover;
   &.mobile {
-    width: 190px !important;
-    height: 270px;
+    width: 190px;
+    height: 190px;
   }
 `;
 

src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVEdit/CVEditPicture.tsx

@@ -59,7 +59,6 @@ export const CVEditPicture = ({
           )}
         </StyledEditPictureButton>
       )}
-      ;
     </StyledEditPictureContainer>
   );
 };

src/components/backoffice/dashboard/DahsboardAlertWhatsappCoach/DashboardAlertWhatsappCoach.styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const StyledAlertContent = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+`;

src/components/backoffice/dashboard/DahsboardAlertWhatsappCoach/DashboardAlertWhatsappCoach.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { DashboardJoinWhatsappCoachModal } from '../DashboardJoinWhatsappCoachModal/DashboardJoinWhatsappCoachModal';
+import { openModal } from 'src/components/modals/Modal';
+import { Button } from 'src/components/utils';
+import { Alert } from 'src/components/utils/Alert';
+import { StyledAlertContent } from './DashboardAlertWhatsappCoach.styles';
+
+export const DashboardAlertWhatsappCoach = () => {
+  const [alertVisible, setAlertVisible] = useState(true);
+  const openJoinWhatsappModal = () => {
+    openModal(<DashboardJoinWhatsappCoachModal />);
+  };
+
+  return (
+    <Alert
+      closable
+      visible={alertVisible}
+      onClose={() => {
+        setAlertVisible(false);
+      }}
+    >
+      <StyledAlertContent>
+        Pour recevoir des actualités et échanger avec les coachs de votre
+        région, rejoignez le groupe Whatsapp
+        <Button
+          color="primaryBlue"
+          style="custom-secondary"
+          size="small"
+          onClick={openJoinWhatsappModal}
+        >
+          Rejoindre le groupe Whatsapp
+        </Button>
+      </StyledAlertContent>
+    </Alert>
+  );
+};

src/components/backoffice/dashboard/Dashboard.tsx

@@ -5,10 +5,15 @@ import {
 } from '../Backoffice.styles';
 import { Section } from 'src/components/utils';
 import { H1 } from 'src/components/utils/Headings';
-import { CANDIDATE_USER_ROLES, USER_ROLES } from 'src/constants/users';
+import {
+  CANDIDATE_USER_ROLES,
+  COACH_USER_ROLES,
+  USER_ROLES,
+} from 'src/constants/users';
 import { useAuthenticatedUser } from 'src/hooks/authentication/useAuthenticatedUser';
 import { useIsDesktop } from 'src/hooks/utils';
 import { isRoleIncluded } from 'src/utils';
+import { DashboardAlertWhatsappCoach } from './DahsboardAlertWhatsappCoach/DashboardAlertWhatsappCoach';
 import {
   StyledDashboardLeftColumn,
   StyledDashboardRightColumn,
@@ -38,6 +43,9 @@ export const Dashboard = () => {
       <Section className="custom-page">
         <StyledDashboardTitleContainer>
           <H1 title="Bienvenue sur votre espace personnel" color="black" />
+          {isRoleIncluded(COACH_USER_ROLES, user.role) && (
+            <DashboardAlertWhatsappCoach />
+          )}
         </StyledDashboardTitleContainer>
         <StyledBackofficeGrid className={`${isDesktop ? '' : 'mobile'}`}>
           <StyledDashboardLeftColumn className={`${isDesktop ? '' : 'mobile'}`}>

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const StyledImageContainer = styled.div`
+  text-align: center;
+`;

src/components/backoffice/dashboard/DashboardJoinWhatsappCoachModal/DashboardJoinWhatsappCoachModal.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { useModalContext } from 'src/components/modals/Modal';
+import { ModalGeneric } from 'src/components/modals/Modal/ModalGeneric';
+import { Button, Img, SimpleLink } from 'src/components/utils';
+import { useAuthenticatedUser } from 'src/hooks/authentication/useAuthenticatedUser';
+import { StyledImageContainer } from './DashboardJoinWhatsappCoachModal.styles';
+
+export const DashboardJoinWhatsappCoachModal = () => {
+  const { onClose } = useModalContext();
+  const user = useAuthenticatedUser();
+
+  return (
+    <ModalGeneric title="Rejoindre note groupe Whatsapp">
+      Pour recevoir des actualités et échanger avec les coachs de votre région,
+      scannez le QR code
+      <StyledImageContainer>
+        <SimpleLink href={user.whatsappJoinUrl.url} target="_blank">
+          <Img
+            src={user.whatsappJoinUrl.qrCodePath}
+            alt="QR code Whatsapp"
+            width={250}
+            height={250}
+          />
+        </SimpleLink>
+        <p>{user.whatsappJoinUrl.name}</p>
+      </StyledImageContainer>
+      <div className="uk-modal-footer uk-padding-remove-horizontal uk-padding-remove-bottom uk-margin-medium-top">
+        <Button onClick={onClose} style="default">
+          Fermer
+        </Button>
+      </div>
+    </ModalGeneric>
+  );
+};

src/components/backoffice/onboarding/Onboarding.utils.ts

@@ -5,7 +5,7 @@ import {
 } from 'src/utils';
 import { FlattenedOnboardingFormData } from './Onboarding.types';
 
-export const parseOnboadingFields = (
+export const parseOnboadingProfileFields = (
   fields: Partial<FlattenedOnboardingFormData>
 ): Partial<UserProfile> => {
   return {

src/components/backoffice/onboarding/Onboarding/forms/schemas/formOnboardingCandidateProfile.ts

@@ -2,6 +2,7 @@ import { FormSchema } from 'src/components/forms/FormSchema';
 
 export const formOnboardingCandidateProfile: FormSchema<{
   description: string;
+  optinNewsletter: boolean;
 }> = {
   id: 'form-onboarding-profile',
   fields: [
@@ -16,5 +17,13 @@ export const formOnboardingCandidateProfile: FormSchema<{
       rows: 14,
       maxLines: { lines: 5, width: 655 },
     },
+    {
+      id: 'optinNewsletter',
+      name: 'optinNewsletter',
+      component: 'checkbox-alert',
+      title:
+        'En cochant cette case, j’accepte de recevoir des informations et des actualités sur le programme entourage pro',
+      showLabel: true,
+    },
   ],
 };

src/components/backoffice/onboarding/Onboarding/forms/schemas/formOnboardingCoachProfile.ts

@@ -1,6 +1,9 @@
 import { FormSchema } from 'src/components/forms/FormSchema';
 
-export const formOnboardingCoachProfile: FormSchema<{ description: string }> = {
+export const formOnboardingCoachProfile: FormSchema<{
+  description: string;
+  optinNewsletter: boolean;
+}> = {
   id: 'form-onboarding-profile',
   fields: [
     {
@@ -14,5 +17,13 @@ export const formOnboardingCoachProfile: FormSchema<{ description: string }> = {
       rows: 14,
       maxLines: { lines: 5, width: 655 },
     },
+    {
+      id: 'optinNewsletter',
+      name: 'optinNewsletter',
+      component: 'checkbox-alert',
+      title:
+        'En cochant cette case, j’accepte de recevoir des informations et des actualités sur le programme entourage pro',
+      showLabel: true,
+    },
   ],
 };

src/components/backoffice/onboarding/useOnboarding.ts

@@ -8,7 +8,7 @@ import {
   validateLastStepOnboardingSelectors,
 } from 'src/use-cases/onboarding';
 import { FlattenedOnboardingFormData } from './Onboarding.types';
-import { parseOnboadingFields } from './Onboarding.utils';
+import { parseOnboadingProfileFields } from './Onboarding.utils';
 
 export const useOnboarding = () => {
   const dispatch = useDispatch();
@@ -21,17 +21,20 @@ export const useOnboarding = () => {
 
   const onSubmitLastStepOnboarding = useCallback(
     (fields: Partial<FlattenedOnboardingFormData>) => {
-      const fieldsToSend = parseOnboadingFields(fields);
+      const profileFieldsToSend = parseOnboadingProfileFields(fields);
       dispatch(
-        onboardingActions.validateLastStepOnboardingRequested(fieldsToSend)
+        onboardingActions.validateLastStepOnboardingRequested({
+          userProfile: profileFieldsToSend,
+          optinNewsletter: fields.optinNewsletter || false,
+        })
       );
     },
     [dispatch]
   );
 
   const onSubmitFirstSecondStepOnboarding = useCallback(
     (fields: Partial<FlattenedOnboardingFormData>) => {
-      const fieldsToSend = parseOnboadingFields(fields);
+      const fieldsToSend = parseOnboadingProfileFields(fields);
       dispatch(
         onboardingActions.validateFirstSecondStepOnboardingRequested(
           fieldsToSend

src/components/backoffice/parametres/ParametresLayout/ExternalCVCard/Content.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { Close } from 'assets/icons/icons';
+import { ButtonIcon } from 'src/components/utils';
+import { useAuthenticatedUser } from 'src/hooks/authentication/useAuthenticatedUser';
+import { useCurrentUserExternalCv } from 'src/hooks/useCurrentUserExternalCv';
+import { currentUserActions } from 'src/use-cases/current-user';
+import {
+  StyledCvUploadInfosText,
+  StyledDeleteIconContainer,
+  StyledFilename,
+} from './ExternalCVCard.styles';
+
+interface ContentProps {
+  dataTestId?: string;
+}
+
+export const Content = ({ dataTestId }: ContentProps) => {
+  const user = useAuthenticatedUser();
+  const externalCv = useCurrentUserExternalCv();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (user.userProfile.hasExternalCv) {
+      dispatch(currentUserActions.getExternalCvRequested());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user.userProfile.hasExternalCv]);
+
+  const removeCallback = () => {
+    dispatch(currentUserActions.deleteExternalCvRequested());
+  };
+
+  const openExternalCV = () => {
+    if (externalCv === null) return;
+    window.open(externalCv, '_blank');
+  };
+
+  if (user.userProfile.hasExternalCv) {
+    return (
+      <>
+        <StyledFilename onClick={openExternalCV}>Votre CV</StyledFilename>
+        <StyledDeleteIconContainer onClick={removeCallback}>
+          <ButtonIcon
+            icon={<Close width={10} height={10} />}
+            dataTestId={`${dataTestId}-button-edit`}
+          />
+        </StyledDeleteIconContainer>
+      </>
+    );
+  }
+  return (
+    <StyledCvUploadInfosText>
+      Vous n&apos;avez pas encore de CV Entourage Pro. Téléchargez votre propre
+      CV.
+    </StyledCvUploadInfosText>
+  );
+};