-
+
Ce lien ne semble pas valide. Veuillez contacter l'équipe
LinkedOut.
diff --git a/src/use-cases/profiles/profiles.saga.ts b/src/use-cases/profiles/profiles.saga.ts
index ba713f5ef..4b74c4660 100644
--- a/src/use-cases/profiles/profiles.saga.ts
+++ b/src/use-cases/profiles/profiles.saga.ts
@@ -13,14 +13,20 @@ const {
fetchProfilesRequested,
fetchProfilesSucceeded,
fetchProfilesFailed,
+ setProfilesFilters,
+ setProfilesSearchFilter,
setProfilesRoleFilter,
+ setProfilesHelpsFilter,
+ setProfilesBusinessLinesFilter,
+ setProfilesDepartmentsFilter,
incrementProfilesOffset,
+ resetProfilesOffset,
postInternalMessageRequested,
postInternalMessageSucceeded,
postInternalMessageFailed,
} = slice.actions;
-function* fetchProfilesSagaRequested() {
+function* fetchProfilesNextPageSaga() {
const hasFetchedAll = yield* select(selectProfilesHasFetchedAll);
if (!hasFetchedAll) {
@@ -28,6 +34,11 @@ function* fetchProfilesSagaRequested() {
}
}
+function* fetchProfilesUpdatedFiltersSaga() {
+ yield* put(resetProfilesOffset());
+ yield* put(fetchProfilesRequested());
+}
+
function* fetchProfilesSaga() {
try {
const filters = yield* select(selectProfilesFilters);
@@ -69,8 +80,19 @@ function* postInternalMessageSaga(
export function* saga() {
yield* takeLatest(fetchProfilesRequested, fetchProfilesSaga);
- yield* takeLatest(setProfilesRoleFilter, fetchProfilesSagaRequested);
- yield* takeLatest(incrementProfilesOffset, fetchProfilesSagaRequested);
+ yield* takeLatest(setProfilesFilters, fetchProfilesUpdatedFiltersSaga);
+ yield* takeLatest(setProfilesSearchFilter, fetchProfilesUpdatedFiltersSaga);
+ yield* takeLatest(setProfilesRoleFilter, fetchProfilesUpdatedFiltersSaga);
+ yield* takeLatest(setProfilesHelpsFilter, fetchProfilesUpdatedFiltersSaga);
+ yield* takeLatest(
+ setProfilesBusinessLinesFilter,
+ fetchProfilesUpdatedFiltersSaga
+ );
+ yield* takeLatest(
+ setProfilesDepartmentsFilter,
+ fetchProfilesUpdatedFiltersSaga
+ );
+ yield* takeLatest(incrementProfilesOffset, fetchProfilesNextPageSaga);
yield* takeLatest(fetchSelectedProfileRequested, fetchSelectedProfileSaga);
yield* takeLatest(postInternalMessageRequested, postInternalMessageSaga);
}
diff --git a/src/use-cases/profiles/profiles.selectors.ts b/src/use-cases/profiles/profiles.selectors.ts
index 82b8699de..2adaef0c0 100644
--- a/src/use-cases/profiles/profiles.selectors.ts
+++ b/src/use-cases/profiles/profiles.selectors.ts
@@ -24,14 +24,34 @@ export function selectProfiles(state: RootState) {
return state.profiles.profiles;
}
+export function selectProfilesIsResetFilters(state: RootState) {
+ return state.profiles.profilesIsResetFilters;
+}
+
export function selectProfilesFilters(state: RootState) {
return state.profiles.profilesFilters;
}
+export function selectProfilesSearchFilter(state: RootState) {
+ return state.profiles.profilesFilters.search;
+}
+
export function selectProfilesRoleFilter(state: RootState) {
return state.profiles.profilesFilters.role;
}
+export function selectProfilesHelpsFilters(state: RootState) {
+ return state.profiles.profilesFilters.helps;
+}
+
+export function selectProfilesDepartmentsFilters(state: RootState) {
+ return state.profiles.profilesFilters.departments;
+}
+
+export function selectProfilesBusinessLinesFilters(state: RootState) {
+ return state.profiles.profilesFilters.businessLines;
+}
+
export function selectProfilesHasFetchedAll(state: RootState) {
return state.profiles.profilesHasFetchedAll;
}
diff --git a/src/use-cases/profiles/profiles.slice.ts b/src/use-cases/profiles/profiles.slice.ts
index db335147d..395c8a32e 100644
--- a/src/use-cases/profiles/profiles.slice.ts
+++ b/src/use-cases/profiles/profiles.slice.ts
@@ -1,7 +1,11 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { PublicProfile } from 'src/api/types';
-import { UserRole } from 'src/constants/users';
+import { BusinessLineValue } from 'src/constants';
+import { Department } from 'src/constants/departements';
+import { HelpNames } from 'src/constants/helps';
+import { CANDIDATE_USER_ROLES, UserRole } from 'src/constants/users';
import { RequestState, SliceRootState } from 'src/store/utils';
+import { mutateToArray } from 'src/utils';
import {
fetchProfilesAdapter,
fetchSelectedProfileAdapter,
@@ -15,8 +19,17 @@ export interface State {
fetchSelectedProfile: RequestState;
postInternalMessage: RequestState;
profiles: PublicProfile[];
- profilesFilters: { role?: UserRole[]; offset: number; limit: typeof LIMIT };
+ profilesFilters: {
+ role: UserRole[];
+ offset: number;
+ limit: typeof LIMIT;
+ search: string | null;
+ helps: HelpNames[];
+ departments: Department[];
+ businessLines: BusinessLineValue[];
+ };
profilesHasFetchedAll: boolean;
+ profilesIsResetFilters: boolean;
selectedProfile: PublicProfile | null;
}
@@ -25,8 +38,17 @@ const initialState: State = {
fetchSelectedProfile: fetchSelectedProfileAdapter.getInitialState(),
postInternalMessage: fetchProfilesAdapter.getInitialState(),
profiles: [],
- profilesFilters: { offset: 0, limit: LIMIT },
+ profilesFilters: {
+ role: CANDIDATE_USER_ROLES,
+ offset: 0,
+ limit: LIMIT,
+ search: null,
+ helps: [],
+ departments: [],
+ businessLines: [],
+ },
profilesHasFetchedAll: false,
+ profilesIsResetFilters: false,
selectedProfile: null,
};
@@ -41,6 +63,7 @@ export const slice = createSlice({
? action.payload
: [...state.profiles, ...action.payload];
state.profilesHasFetchedAll = action.payload.length < LIMIT;
+ state.profilesIsResetFilters = false;
},
}),
...fetchSelectedProfileAdapter.getReducers(
@@ -55,10 +78,66 @@ export const slice = createSlice({
(state) => state.postInternalMessage,
{}
),
+ setProfilesFilters(
+ state,
+ action: PayloadAction<{
+ role: UserRole[];
+ search: string | null;
+ helps: HelpNames | HelpNames[];
+ departments: Department | Department[];
+ businessLines: BusinessLineValue | BusinessLineValue[];
+ }>
+ ) {
+ state.profilesFilters = {
+ ...state.profilesFilters,
+ ...action.payload,
+ departments: mutateToArray(action.payload.departments),
+ businessLines: mutateToArray(action.payload.businessLines),
+ helps: mutateToArray(action.payload.helps),
+ };
+ },
+ setProfilesHelpsFilter(
+ state,
+ action: PayloadAction
+ ) {
+ state.profilesFilters = {
+ ...state.profilesFilters,
+ helps: mutateToArray(action.payload),
+ };
+ },
+ setProfilesBusinessLinesFilter(
+ state,
+ action: PayloadAction
+ ) {
+ state.profilesFilters = {
+ ...state.profilesFilters,
+ businessLines: mutateToArray(action.payload),
+ };
+ },
+ setProfilesDepartmentsFilter(
+ state,
+ action: PayloadAction
+ ) {
+ state.profilesFilters = {
+ ...state.profilesFilters,
+ departments: mutateToArray(action.payload),
+ };
+ },
setProfilesRoleFilter(state, action: PayloadAction) {
state.profilesFilters = {
...state.profilesFilters,
role: action.payload,
+ };
+ },
+ setProfilesSearchFilter(state, action: PayloadAction) {
+ state.profilesFilters = {
+ ...state.profilesFilters,
+ search: action.payload,
+ };
+ },
+ resetProfilesOffset(state) {
+ state.profilesFilters = {
+ ...state.profilesFilters,
offset: 0,
};
state.profilesHasFetchedAll = false;
@@ -72,6 +151,9 @@ export const slice = createSlice({
: state.profilesFilters.offset + LIMIT,
};
},
+ resetProfilesFilters(state) {
+ state.profilesIsResetFilters = true;
+ },
},
});
diff --git a/src/utils/Filters.ts b/src/utils/Filters.ts
index e6ee4d264..a10a2b66b 100644
--- a/src/utils/Filters.ts
+++ b/src/utils/Filters.ts
@@ -1,21 +1,22 @@
import _ from 'lodash';
-import { MEMBER_FILTERS_DATA, MEMBER_FILTERS_CONSTANT } from 'src/constants';
+import { MEMBER_FILTERS_DATA } from 'src/constants';
import {
CANDIDATE_USER_ROLES,
COACH_USER_ROLES,
UserRole,
} from 'src/constants/users';
+import { Filter } from 'src/constants/utils';
import { isRoleIncluded } from './Finding';
const filterMemberTypeConstantsByRole = (
roles: typeof CANDIDATE_USER_ROLES | typeof COACH_USER_ROLES
-): MEMBER_FILTERS_CONSTANT => {
+): Filter => {
return {
...MEMBER_FILTERS_DATA[0],
constants: MEMBER_FILTERS_DATA[0].constants.filter(({ value }) => {
- return isRoleIncluded(roles, value);
- }) as MEMBER_FILTERS_CONSTANT['constants'],
- } as MEMBER_FILTERS_CONSTANT;
+ return isRoleIncluded(roles, value as UserRole);
+ }),
+ };
};
export const mutateTypeFilterDependingOnRole = (
diff --git a/src/utils/Mutating.ts b/src/utils/Mutating.ts
index af78ece81..2ff374926 100644
--- a/src/utils/Mutating.ts
+++ b/src/utils/Mutating.ts
@@ -1,6 +1,7 @@
import { Opportunity, OpportunityUser } from 'src/api/types';
import { OFFER_STATUS } from 'src/constants';
import { findOfferStatus } from 'src/utils/Finding';
+import { AnyCantFix } from './Types';
const getAlternateDefaultOfferStatus = (
offer: Opportunity = {} as Opportunity,
@@ -22,3 +23,15 @@ export const mutateDefaultOfferStatus = (offer, opportunityUser) => {
...OFFER_STATUS.slice(1),
];
};
+
+export function mutateToArray(
+ value: T | null | undefined
+): T extends AnyCantFix[] | null | undefined ? T : T[] {
+ if (value === null || value === undefined) {
+ return value as T extends AnyCantFix[] | null | undefined ? T : never;
+ }
+ if (Array.isArray(value)) {
+ return value as T extends AnyCantFix[] | null | undefined ? T : never;
+ }
+ return [value] as T extends AnyCantFix[] | null | undefined ? never : T[];
+}
From 23245962d66ca3ddd9537615d322287010824923 Mon Sep 17 00:00:00 2001
From: Emile Bex
Date: Mon, 5 Feb 2024 17:33:38 +0100
Subject: [PATCH 07/21] [EN-6724] feat(availability): add availability card on
dashboard (#199)
* [EN-6723] feat(lko2-dashboard): layout and profile card
* fix(directory): fix directory when click on external candidate
* [EN-6724] feat(availability): add availability tag on profile card
* [EN-6724] feat(availability): add availability tag profile
* [EN-6724] feat(availability): add role to header
* [EN-6724] feat(availability): refacto profile header
* [EN-6724] feat(availability): add availability card on dashboard
* [EN-6724] test(availability): fix test features with isAvailable field
* [EN-6724] feat(availability): add ga tag on toggle availability
---------
Co-authored-by: PaulEntourage
---
.gitignore | 1 +
cypress/e2e/candidat.cy.js | 8 +-
cypress/fixtures/public-profile-res.json | 3 +-
src/api/types.ts | 2 +
.../backoffice/Backoffice.styles.tsx | 81 +--------
.../backoffice/LayoutBackOffice.tsx | 6 +-
.../backoffice/dashboard/Dashboard.styles.tsx | 4 +-
.../backoffice/dashboard/Dashboard.tsx | 12 ++
.../DashboardAvailabilityCard.tsx | 69 ++++++++
.../DashboardAvailabilityCard/index.ts | 1 +
.../DashboardProfileCard.tsx | 2 +
.../directory/DirectoryItem/DirectoryItem.tsx | 3 +
.../directory/DirectoryList/DirectoryList.tsx | 1 +
.../HeaderParametres.styles.tsx | 26 ---
.../HeaderParametres/HeaderParametres.tsx | 158 ------------------
.../ParametresDescription.styles.tsx | 22 ---
.../ParametresDescription.tsx | 42 -----
.../ParametresDescription/index.ts | 1 -
.../HeaderParametres/index.ts | 1 -
.../ParametresLayout.styles.tsx | 4 +-
.../ParametresLayout/ParametresLayout.tsx | 15 +-
.../parametres/useUpdateProfile.tsx | 8 +-
.../backoffice/parametres/useUpdateUser.tsx | 8 +-
.../HeaderProfile/HeaderProfile.styles.tsx | 5 -
.../profile/HeaderProfile/HeaderProfile.tsx | 95 -----------
.../backoffice/profile/HeaderProfile/index.ts | 1 -
.../backoffice/profile/Profile.styles.tsx | 4 +-
src/components/backoffice/profile/Profile.tsx | 17 +-
.../ProfileContactCard.styles.tsx | 4 +-
.../ProfileContactCard/ProfileContactCard.tsx | 61 ++++---
.../ProfileHelpInformationCard.tsx | 1 +
.../HeaderProfile/HeaderProfile.desktop.tsx | 113 +++++++++++++
.../HeaderProfile/HeaderProfile.mobile.tsx | 114 +++++++++++++
.../HeaderProfile/HeaderProfile.styles.tsx | 117 +++++++++++++
.../HeaderProfile/HeaderProfile.types.ts | 13 ++
.../ModalEditProfileDescription.tsx | 0
.../ModalEditProfileDescription/index.ts | 0
.../ProfileDescription.styles.tsx | 28 ++++
.../ProfileDescription/ProfileDescription.tsx | 49 ++++++
.../HeaderProfile/ProfileDescription/index.ts | 1 +
src/components/headers/HeaderProfile/index.ts | 8 +
.../headers/HeaderProfile/useHeaderProfile.ts | 32 ++++
.../HeaderProfile/useUploadProfileImage.ts | 20 +++
.../NewsletterPartial.styles.ts | 2 +-
.../AvailabilityTag.stories.tsx | 22 +++
.../AvailabilityTag/AvailabilityTag.styles.ts | 23 +++
.../utils/AvailabilityTag/AvailabilityTag.tsx | 18 ++
src/components/utils/AvailabilityTag/index.ts | 1 +
.../utils/CardList/CardList.stories.tsx | 4 +
.../utils/Cards/Card/Card.styles.tsx | 8 +-
src/components/utils/Cards/Card/Card.tsx | 9 -
.../Cards/ProfileCard/ProfileCard.stories.tsx | 4 +-
.../Cards/ProfileCard/ProfileCard.styles.ts | 9 +
.../utils/Cards/ProfileCard/ProfileCard.tsx | 9 +-
.../utils/ImgProfile/ImgProfile.tsx | 24 +--
.../ToggleWithModal.styles.tsx | 1 +
.../ToggleWithModal/ToggleWithModal.tsx | 6 +-
src/components/utils/Tag/Tag.styles.tsx | 1 +
src/constants/tags.ts | 3 +
src/hooks/useImageFallback.ts | 4 +-
src/pages/login.tsx | 4 +-
61 files changed, 788 insertions(+), 525 deletions(-)
create mode 100644 src/components/backoffice/dashboard/DashboardAvailabilityCard/DashboardAvailabilityCard.tsx
create mode 100644 src/components/backoffice/dashboard/DashboardAvailabilityCard/index.ts
delete mode 100644 src/components/backoffice/parametres/ParametresLayout/HeaderParametres/HeaderParametres.styles.tsx
delete mode 100644 src/components/backoffice/parametres/ParametresLayout/HeaderParametres/HeaderParametres.tsx
delete mode 100644 src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ParametresDescription.styles.tsx
delete mode 100644 src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ParametresDescription.tsx
delete mode 100644 src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/index.ts
delete mode 100644 src/components/backoffice/parametres/ParametresLayout/HeaderParametres/index.ts
delete mode 100644 src/components/backoffice/profile/HeaderProfile/HeaderProfile.styles.tsx
delete mode 100644 src/components/backoffice/profile/HeaderProfile/HeaderProfile.tsx
delete mode 100644 src/components/backoffice/profile/HeaderProfile/index.ts
create mode 100644 src/components/headers/HeaderProfile/HeaderProfile.desktop.tsx
create mode 100644 src/components/headers/HeaderProfile/HeaderProfile.mobile.tsx
create mode 100644 src/components/headers/HeaderProfile/HeaderProfile.styles.tsx
create mode 100644 src/components/headers/HeaderProfile/HeaderProfile.types.ts
rename src/components/{backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription => headers/HeaderProfile/ProfileDescription}/ModalEditProfileDescription/ModalEditProfileDescription.tsx (100%)
rename src/components/{backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription => headers/HeaderProfile/ProfileDescription}/ModalEditProfileDescription/index.ts (100%)
create mode 100644 src/components/headers/HeaderProfile/ProfileDescription/ProfileDescription.styles.tsx
create mode 100644 src/components/headers/HeaderProfile/ProfileDescription/ProfileDescription.tsx
create mode 100644 src/components/headers/HeaderProfile/ProfileDescription/index.ts
create mode 100644 src/components/headers/HeaderProfile/index.ts
create mode 100644 src/components/headers/HeaderProfile/useHeaderProfile.ts
create mode 100644 src/components/headers/HeaderProfile/useUploadProfileImage.ts
create mode 100644 src/components/utils/AvailabilityTag/AvailabilityTag.stories.tsx
create mode 100644 src/components/utils/AvailabilityTag/AvailabilityTag.styles.ts
create mode 100644 src/components/utils/AvailabilityTag/AvailabilityTag.tsx
create mode 100644 src/components/utils/AvailabilityTag/index.ts
diff --git a/.gitignore b/.gitignore
index 6d7e43e13..8446ea4c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@ coverage/
/cypress/support
/cypress/videos
/tsconfig.tsbuildinfo
+/storybook-static
diff --git a/cypress/e2e/candidat.cy.js b/cypress/e2e/candidat.cy.js
index 0b28ee4f2..b26c737e8 100644
--- a/cypress/e2e/candidat.cy.js
+++ b/cypress/e2e/candidat.cy.js
@@ -107,11 +107,11 @@ describe('Candidat', () => {
cy.get('[data-testid="form-contact-internal-message-subject"]')
.scrollIntoView()
.type('test');
-
+
cy.get('[data-testid="form-contact-internal-message-message"]')
.scrollIntoView()
.type('test');
-
+
cy.get('[data-testid="form-confirm-form-contact-internal-message"]')
.scrollIntoView()
@@ -392,10 +392,10 @@ describe('Candidat', () => {
cy.fixture('auth-current-candidat-res').then((user) => {
cy.intercept('PUT', `/user/profile/${user.id}`, {fixture: "user-profile-candidate-description-modified"}).as('putUserProfile');
})
- cy.get(`[data-testid="parametres-description-placeholder"]`).scrollIntoView().click();
+ cy.get(`[data-testid="profile-description-placeholder"]`).scrollIntoView().click();
cy.get(`[data-testid="form-profile-description-description"]`).scrollIntoView().type('hello');
cy.get(`[data-testid="form-confirm-form-profile-description"]`).scrollIntoView().click();
- cy.get(`[data-testid="parametres-description"]`).should('contain', "hello");
+ cy.get(`[data-testid="profile-description"]`).should('contain', "hello");
// change profile picture
cy.get(`[data-testid="profile-picture-upload-desktop"]`).selectFile('assets/image-fixture.jpg', {force: true});
diff --git a/cypress/fixtures/public-profile-res.json b/cypress/fixtures/public-profile-res.json
index c2f9613a2..4fe3fdb9f 100644
--- a/cypress/fixtures/public-profile-res.json
+++ b/cypress/fixtures/public-profile-res.json
@@ -5,6 +5,7 @@
"role": "Candidat",
"zone": "LILLE",
"currentJob": null,
+ "isAvailable": true,
"helpOffers": [],
"helpNeeds": [
{
@@ -86,4 +87,4 @@
],
"lastSentMessage": "2024-01-24T13:16:50.332Z",
"lastReceivedMessage": "2024-01-24T13:16:50.332Z"
-}
\ No newline at end of file
+}
diff --git a/src/api/types.ts b/src/api/types.ts
index 178d04cff..c328321c2 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -74,6 +74,7 @@ export type UserProfile = {
currentJob: string;
description: string;
department: Department;
+ isAvailable: boolean;
helpNeeds: { name: HelpNames }[];
helpOffers: { name: HelpNames }[];
networkBusinessLines: {
@@ -531,6 +532,7 @@ export type PublicProfile = {
department: Department;
currentJob: string;
description: string;
+ isAvailable: boolean;
helpNeeds: { name: HelpNames }[];
helpOffers: { name: HelpNames }[];
networkBusinessLines: {
diff --git a/src/components/backoffice/Backoffice.styles.tsx b/src/components/backoffice/Backoffice.styles.tsx
index f78a237b6..853a0ffb2 100644
--- a/src/components/backoffice/Backoffice.styles.tsx
+++ b/src/components/backoffice/Backoffice.styles.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
import { COLORS } from 'src/constants/styles';
export const StyledBackofficeBackground = styled.div`
@@ -11,6 +11,7 @@ export const StyledBackofficeGrid = styled.div`
gap: 40px;
align-items: flex-start;
width: 100%;
+
&.mobile {
margin-top: 30px;
flex-direction: column;
@@ -18,84 +19,6 @@ export const StyledBackofficeGrid = styled.div`
}
`;
-export const StyledHeaderProfile = styled.div`
- min-height: 275px;
- background-color: white;
-
- &.mobile {
- min-height: unset;
- }
-`;
-
-export const StyledHeaderProfilePictureContainer = styled.div`
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- align-items: center;
- margin-right: 50px;
- position: relative;
- .button-mock-image-input {
- margin-top: 20px;
- }
-
- &.mobile {
- margin-right: 10px;
- }
-`;
-
-export const StyledHeaderProfilePicture = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- width: 146px;
- height: 146px;
- border-radius: 50%;
- background-color: ${COLORS.primaryOrange};
- overflow: hidden;
- ${({ size }) => {
- return css`
- width: ${size}px;
- height: ${size}px;
- `;
- }}
-`;
-
-export const StyledHeaderProfileContent = styled.div`
- display: flex;
- flex-direction: row;
- align-items: flex-start;
-`;
-
-export const StyledMobileHeaderProfileTitlesContainer = styled.div`
- display: flex;
- flex-direction: column;
- > h2 {
- margin-bottom: 10px;
- }
-
- > h6 {
- margin-top: 0;
- }
- > h5,
- > h6 {
- margin-bottom: 0;
- }
-`;
-
-export const StyledHeaderProfileTextContainer = styled.div`
- display: flex;
- flex-direction: column;
-
- > h5,
- > h6 {
- margin-bottom: 0;
- }
-
- > a {
- line-height: 24px;
- }
-`;
-
export const StyledNoResult = styled.div`
flex: 1;
display: flex;
diff --git a/src/components/backoffice/LayoutBackOffice.tsx b/src/components/backoffice/LayoutBackOffice.tsx
index 56bbacf52..6dba73b46 100644
--- a/src/components/backoffice/LayoutBackOffice.tsx
+++ b/src/components/backoffice/LayoutBackOffice.tsx
@@ -3,7 +3,7 @@ import { Layout } from 'src/components/Layout';
export const LayoutBackOffice = ({
children,
- title,
+ title = 'Espace personnel',
}: {
children: React.ReactNode;
title?: string;
@@ -14,7 +14,3 @@ export const LayoutBackOffice = ({
);
};
-
-LayoutBackOffice.defaultProps = {
- title: 'Espace perso',
-};
diff --git a/src/components/backoffice/dashboard/Dashboard.styles.tsx b/src/components/backoffice/dashboard/Dashboard.styles.tsx
index c064ac0d4..3cb434473 100644
--- a/src/components/backoffice/dashboard/Dashboard.styles.tsx
+++ b/src/components/backoffice/dashboard/Dashboard.styles.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
export const StyledDashboardLeftColumn = styled.div`
display: flex;
flex-direction: column;
- flex-grow: 1;
+ flex: 1;
gap: 40px;
min-width: 400px;
max-width: 400px;
@@ -17,7 +17,7 @@ export const StyledDashboardLeftColumn = styled.div`
export const StyledParametresRightColumn = styled.div`
display: flex;
flex-direction: column;
- flex-grow: 2;
+ flex: 2;
gap: 40px;
&.mobile {
width: 100%;
diff --git a/src/components/backoffice/dashboard/Dashboard.tsx b/src/components/backoffice/dashboard/Dashboard.tsx
index eea35aebe..4a1165826 100644
--- a/src/components/backoffice/dashboard/Dashboard.tsx
+++ b/src/components/backoffice/dashboard/Dashboard.tsx
@@ -5,15 +5,26 @@ 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 { useAuthenticatedUser } from 'src/hooks/authentication/useAuthenticatedUser';
import { useIsDesktop } from 'src/hooks/utils';
+import { isRoleIncluded } from 'src/utils';
import {
StyledDashboardLeftColumn,
StyledParametresRightColumn,
} from './Dashboard.styles';
+import { DashboardAvailabilityCard } from './DashboardAvailabilityCard';
import { DashboardProfileCard } from './DashboardProfileCard';
export const Dashboard = () => {
const isDesktop = useIsDesktop();
+ const user = useAuthenticatedUser();
+
+ const shouldShowAllProfile = isRoleIncluded(
+ [...CANDIDATE_USER_ROLES, USER_ROLES.COACH],
+ user.role
+ );
+
return (
@@ -23,6 +34,7 @@ export const Dashboard = () => {
+ {shouldShowAllProfile && }
{
+ const user = useAuthenticatedUser();
+ const dispatch = useDispatch();
+ const updateProfileStatus = useSelector(
+ updateProfileSelectors.selectUpdateProfileStatus
+ );
+ const prevUpdateProfileStatus = usePrevious(updateProfileStatus);
+
+ const { updateUserProfile } = useUpdateProfile(user);
+
+ useEffect(() => {
+ if (prevUpdateProfileStatus === ReduxRequestEvents.REQUESTED) {
+ if (updateProfileStatus === ReduxRequestEvents.SUCCEEDED) {
+ UIkit.notification(
+ `La modification de votre disponibilité a bien été enregistrée`,
+ 'success'
+ );
+ } else if (updateProfileStatus === ReduxRequestEvents.FAILED) {
+ UIkit.notification(
+ `Une erreur est survenue lors de la modification de votre disponibilité`,
+ 'danger'
+ );
+ }
+ dispatch(authenticationActions.updateProfileReset());
+ }
+ }, [updateProfileStatus, prevUpdateProfileStatus, dispatch]);
+
+ return (
+
+ {
+ updateUserProfile({ isAvailable });
+ gaEvent(GA_TAGS.PAGE_DASHBOARD_DISPONIBILITE_CLIC);
+ }}
+ />
+
+ );
+};
diff --git a/src/components/backoffice/dashboard/DashboardAvailabilityCard/index.ts b/src/components/backoffice/dashboard/DashboardAvailabilityCard/index.ts
new file mode 100644
index 000000000..1c0740fd6
--- /dev/null
+++ b/src/components/backoffice/dashboard/DashboardAvailabilityCard/index.ts
@@ -0,0 +1 @@
+export * from './DashboardAvailabilityCard';
diff --git a/src/components/backoffice/dashboard/DashboardProfileCard/DashboardProfileCard.tsx b/src/components/backoffice/dashboard/DashboardProfileCard/DashboardProfileCard.tsx
index 2b99c7932..3f00d91f1 100644
--- a/src/components/backoffice/dashboard/DashboardProfileCard/DashboardProfileCard.tsx
+++ b/src/components/backoffice/dashboard/DashboardProfileCard/DashboardProfileCard.tsx
@@ -18,7 +18,9 @@ export const DashboardProfileCard = () => {
const user = useAuthenticatedUser();
const helpField = useHelpField(user.role);
const { contextualRole } = useContextualRole(user.role);
+
if (!helpField || !contextualRole) return null;
+
return (
diff --git a/src/components/backoffice/directory/DirectoryItem/DirectoryItem.tsx b/src/components/backoffice/directory/DirectoryItem/DirectoryItem.tsx
index 00a973a50..9b660c66b 100644
--- a/src/components/backoffice/directory/DirectoryItem/DirectoryItem.tsx
+++ b/src/components/backoffice/directory/DirectoryItem/DirectoryItem.tsx
@@ -24,6 +24,7 @@ interface DirectoryItemProps {
}[];
department: Department;
job?: string;
+ isAvailable: boolean;
}
export function DirectoryItem({
@@ -36,6 +37,7 @@ export function DirectoryItem({
businessLines,
ambitions,
job,
+ isAvailable,
}: DirectoryItemProps) {
return (
@@ -49,6 +51,7 @@ export function DirectoryItem({
helps={helps}
ambitions={ambitions}
job={job}
+ isAvailable={isAvailable}
/>
);
diff --git a/src/components/backoffice/directory/DirectoryList/DirectoryList.tsx b/src/components/backoffice/directory/DirectoryList/DirectoryList.tsx
index 5b8e139fe..019d8e16f 100644
--- a/src/components/backoffice/directory/DirectoryList/DirectoryList.tsx
+++ b/src/components/backoffice/directory/DirectoryList/DirectoryList.tsx
@@ -47,6 +47,7 @@ export function DirectoryList() {
businessLines={businessLines}
ambitions={profile.searchAmbitions}
job={profile.currentJob}
+ isAvailable={profile.isAvailable}
/>
);
});
diff --git a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/HeaderParametres.styles.tsx b/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/HeaderParametres.styles.tsx
deleted file mode 100644
index afdcfb902..000000000
--- a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/HeaderParametres.styles.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import styled, { css } from 'styled-components';
-import { COLORS } from 'src/constants/styles';
-
-export const StyledParametresPlaceholder = styled.a`
- color: ${COLORS.primaryOrange};
- text-decoration: underline;
- font-style: italic;
-
- &:hover {
- text-decoration: underline;
- }
-`;
-
-export const StyledEditPictureIconContainer = styled.div`
- position: absolute;
- ${({ isMobile }) => {
- return css`
- bottom: ${isMobile ? 0 : '5%'};
- right: ${isMobile ? 0 : '5%'};
- `;
- }}
- border-radius: 50%;
- background-color: white;
- border: 1px solid ${COLORS.primaryOrange};
- padding: 5px;
-`;
diff --git a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/HeaderParametres.tsx b/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/HeaderParametres.tsx
deleted file mode 100644
index 2e1509535..000000000
--- a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/HeaderParametres.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React, { useState } from 'react';
-import EditIcon from 'assets/icons/editIcon.svg';
-import { useOpenCorrespondingModal } from '../UserInformationCard/useOpenModal';
-import { Api } from 'src/api';
-import {
- StyledHeaderProfile,
- StyledHeaderProfileContent,
- StyledMobileHeaderProfileTitlesContainer,
- StyledHeaderProfilePicture,
- StyledHeaderProfilePictureContainer,
- StyledHeaderProfileTextContainer,
-} from 'src/components/backoffice/Backoffice.styles';
-import {
- ButtonIcon,
- ButtonMock,
- ImgProfile,
- Section,
-} from 'src/components/utils';
-import { H1, H2, H5, H6 } from 'src/components/utils/Headings';
-import { ImageInput } from 'src/components/utils/Inputs';
-import { Spinner } from 'src/components/utils/Spinner';
-import { COLORS } from 'src/constants/styles';
-import { 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 {
- StyledEditPictureIconContainer,
- StyledParametresPlaceholder,
-} from './HeaderParametres.styles';
-import { ParametresDescription } from './ParametresDescription';
-
-export const HeaderParametres = () => {
- const isDesktop = useIsDesktop();
- const [imageUploading, setImageUploading] = useState(false);
- const size = isDesktop ? 146 : 64;
- const user = useAuthenticatedUser();
-
- const { openCorrespondingModal } = useOpenCorrespondingModal(user);
-
- const shouldShowAllProfile = isRoleIncluded(
- [USER_ROLES.COACH, USER_ROLES.CANDIDATE, USER_ROLES.CANDIDATE_EXTERNAL],
- user.role
- );
-
- return (
-
-
-
-
-
- {imageUploading ? (
-
- ) : (
-
- )}
-
- {isDesktop ? (
- {
- setImageUploading(true);
- const formData = new FormData();
- formData.append('profileImage', profileImage);
-
- await Api.postProfileImage(user.id, formData);
- setImageUploading(false);
- }}
- id="profile-picture-upload-desktop"
- name="profile-picture-upload-desktop"
- >
-
- Modifier
-
-
- ) : (
-
- {
- setImageUploading(true);
- const formData = new FormData();
- formData.append('profileImage', profileImage);
-
- await Api.postProfileImage(user.id, formData);
- setImageUploading(false);
- }}
- id="profile-picture-upload-mobile"
- name="profile-picture-upload-mobile"
- >
- } />
-
-
- )}
-
- {isDesktop ? (
-
-
- {user.firstName} {user.lastName}
-
- }
- color="black"
- />
- {shouldShowAllProfile && (
- <>
- {user.userProfile.department ? (
-
- ) : (
-
- Ajouter votre département
-
- )}
-
-
- )}
-
- ) : (
-
-
- {user.firstName} {user.lastName}
-
- }
- color="black"
- />
- {shouldShowAllProfile && (
- <>
- {user.userProfile.department ? (
-
- ) : (
-
- Ajouter votre département
-
- )}
-
- )}
-
- )}
-
- {!isDesktop && shouldShowAllProfile && }
-
-
- );
-};
diff --git a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ParametresDescription.styles.tsx b/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ParametresDescription.styles.tsx
deleted file mode 100644
index dbbcb8651..000000000
--- a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ParametresDescription.styles.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-import { COLORS } from 'src/constants/styles';
-
-export const StyledParametresDescriptionContainer = styled.div`
- margin-top: 20px;
-`;
-
-export const StyledParametresDescriptionParagraphe = styled.div`
- white-space: pre-line;
-`;
-
-export const StyledParametresDescriptionEditText = styled.a`
- color: #979797;
- text-decoration: underline;
- font-style: italic;
- margin-top: 20px;
- display: block;
- &:hover {
- text-decoration: underline;
- color: ${COLORS.darkGrayFont};
- }
-`;
diff --git a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ParametresDescription.tsx b/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ParametresDescription.tsx
deleted file mode 100644
index 8df4d7471..000000000
--- a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ParametresDescription.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { StyledParametresPlaceholder } from '../HeaderParametres.styles';
-import { openModal } from 'src/components/modals/Modal';
-import { useAuthenticatedUser } from 'src/hooks/authentication/useAuthenticatedUser';
-import { ModalEditProfileDescription } from './ModalEditProfileDescription';
-import {
- StyledParametresDescriptionContainer,
- StyledParametresDescriptionEditText,
- StyledParametresDescriptionParagraphe,
-} from './ParametresDescription.styles';
-
-export const ParametresDescription = () => {
- const user = useAuthenticatedUser();
- const { userProfile } = user;
-
- const openDescriptionModal = () => {
- openModal();
- };
-
- return (
-
- {userProfile?.description ? (
-
- {userProfile.description}
-
- openDescriptionModal()}
- >
- Modifier la description
-
-
- ) : (
- openDescriptionModal()}
- data-testid="parametres-description-placeholder"
- >
- Ajouter une description pour vous présenter à la communauté
-
- )}
-
- );
-};
diff --git a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/index.ts b/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/index.ts
deleted file mode 100644
index 686a258c7..000000000
--- a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ParametresDescription';
diff --git a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/index.ts b/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/index.ts
deleted file mode 100644
index 7dbe22705..000000000
--- a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './HeaderParametres';
diff --git a/src/components/backoffice/parametres/ParametresLayout/ParametresLayout.styles.tsx b/src/components/backoffice/parametres/ParametresLayout/ParametresLayout.styles.tsx
index 85e209a8a..0362bf71e 100644
--- a/src/components/backoffice/parametres/ParametresLayout/ParametresLayout.styles.tsx
+++ b/src/components/backoffice/parametres/ParametresLayout/ParametresLayout.styles.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
export const StyledParametresLeftColumn = styled.div`
display: flex;
flex-direction: column;
- flex-grow: 1;
+ flex: 1;
gap: 40px;
min-width: 400px;
&.mobile {
@@ -16,7 +16,7 @@ export const StyledParametresLeftColumn = styled.div`
export const StyledParametresRightColumn = styled.div`
display: flex;
flex-direction: column;
- flex-grow: 2;
+ flex: 2;
gap: 40px;
&.mobile {
width: 100%;
diff --git a/src/components/backoffice/parametres/ParametresLayout/ParametresLayout.tsx b/src/components/backoffice/parametres/ParametresLayout/ParametresLayout.tsx
index a331f1b31..0bb7326e3 100644
--- a/src/components/backoffice/parametres/ParametresLayout/ParametresLayout.tsx
+++ b/src/components/backoffice/parametres/ParametresLayout/ParametresLayout.tsx
@@ -1,9 +1,10 @@
import React from 'react';
import {
- StyledBackofficeGrid,
StyledBackofficeBackground,
+ StyledBackofficeGrid,
} from '../../Backoffice.styles';
import { useConfirmationToaster } from '../useConfirmationToaster';
+import { HeaderProfile } from 'src/components/headers/HeaderProfile';
import { Card, Section } from 'src/components/utils';
import { CANDIDATE_USER_ROLES, USER_ROLES } from 'src/constants/users';
import { useAuthenticatedUser } from 'src/hooks/authentication/useAuthenticatedUser';
@@ -11,7 +12,6 @@ import { useIsDesktop } from 'src/hooks/utils';
import { isRoleIncluded } from 'src/utils';
import { CVPreferences } from './CVPreferences';
import { ChangePasswordCard } from './ChangePasswordCard';
-import { HeaderParametres } from './HeaderParametres';
import { ParametresHelpCard } from './ParametresHelpCard';
import {
StyledParametresLeftColumn,
@@ -31,7 +31,16 @@ export const ParametresLayout = () => {
return (
-
+
{
return helpField;
};
-export const useUpdateProfile = (
- user: UserWithUserCandidate,
- onClose?: () => void
-) => {
+export const useUpdateProfile = (user: UserWithUserCandidate) => {
const dispatch = useDispatch();
const [closeModal, setCloseModal] = useState(false);
@@ -48,10 +45,9 @@ export const useUpdateProfile = (
useEffect(() => {
if (updateProfileStatus === ReduxRequestEvents.SUCCEEDED) {
- if (onClose) onClose();
setCloseModal(true);
}
- }, [updateProfileStatus, onClose]);
+ }, [updateProfileStatus]);
const updateUserProfile = useCallback(
(newProfileData: Partial): void => {
diff --git a/src/components/backoffice/parametres/useUpdateUser.tsx b/src/components/backoffice/parametres/useUpdateUser.tsx
index f756a3932..d8258c010 100644
--- a/src/components/backoffice/parametres/useUpdateUser.tsx
+++ b/src/components/backoffice/parametres/useUpdateUser.tsx
@@ -8,10 +8,7 @@ import {
updateUserSelectors,
} from 'src/use-cases/authentication';
-export const useUpdateUser = (
- user: UserWithUserCandidate,
- onClose?: () => void
-) => {
+export const useUpdateUser = (user: UserWithUserCandidate) => {
const dispatch = useDispatch();
const [closeModal, setCloseModal] = useState(false);
@@ -22,10 +19,9 @@ export const useUpdateUser = (
useEffect(() => {
if (updateUserStatus === ReduxRequestEvents.SUCCEEDED) {
- if (onClose) onClose();
setCloseModal(true);
}
- }, [updateUserStatus, onClose]);
+ }, [updateUserStatus]);
const updateUser = useCallback(
(newUserData: Partial) => {
diff --git a/src/components/backoffice/profile/HeaderProfile/HeaderProfile.styles.tsx b/src/components/backoffice/profile/HeaderProfile/HeaderProfile.styles.tsx
deleted file mode 100644
index 9e2155168..000000000
--- a/src/components/backoffice/profile/HeaderProfile/HeaderProfile.styles.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledHeaderProfileDescriptionParagraphe = styled.p`
- white-space: pre-line;
-`;
diff --git a/src/components/backoffice/profile/HeaderProfile/HeaderProfile.tsx b/src/components/backoffice/profile/HeaderProfile/HeaderProfile.tsx
deleted file mode 100644
index 15baa341c..000000000
--- a/src/components/backoffice/profile/HeaderProfile/HeaderProfile.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import {
- StyledHeaderProfile,
- StyledHeaderProfileContent,
- StyledHeaderProfilePicture,
- StyledHeaderProfilePictureContainer,
- StyledHeaderProfileTextContainer,
- StyledMobileHeaderProfileTitlesContainer,
-} from '../../Backoffice.styles';
-import { useSelectSelectedProfile } from '../useSelectedProfile';
-import { ImgProfile, Section } from 'src/components/utils';
-import { H1, H2, H5, H6 } from 'src/components/utils/Headings';
-import { useIsDesktop } from 'src/hooks/utils';
-import { StyledHeaderProfileDescriptionParagraphe } from './HeaderProfile.styles';
-
-export const HeaderProfile = () => {
- const isDesktop = useIsDesktop();
- const size = isDesktop ? 146 : 64;
- const profile = useSelectSelectedProfile();
- if (!profile) return null;
- return (
-
-
-
-
-
-
-
-
- {isDesktop ? (
-
-
- {profile.firstName} {profile.lastName}
-
- }
- color="black"
- />
- {profile.department && (
-
- )}
-
- {profile.description}
-
-
- ) : (
-
-
- {profile.firstName} {profile.lastName}
-
- }
- color="black"
- />
- {profile.department && (
-
- )}
-
- )}
-
- {!isDesktop && (
-
- {profile.description}
-
- )}
-
-
- );
-};
diff --git a/src/components/backoffice/profile/HeaderProfile/index.ts b/src/components/backoffice/profile/HeaderProfile/index.ts
deleted file mode 100644
index 86e0cc0ca..000000000
--- a/src/components/backoffice/profile/HeaderProfile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './HeaderProfile';
diff --git a/src/components/backoffice/profile/Profile.styles.tsx b/src/components/backoffice/profile/Profile.styles.tsx
index 161609053..71eb3a284 100644
--- a/src/components/backoffice/profile/Profile.styles.tsx
+++ b/src/components/backoffice/profile/Profile.styles.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
export const StyledProfileLeftColumn = styled.div`
display: flex;
flex-direction: column;
- flex-grow: 3;
+ flex: 2;
gap: 40px;
&.mobile {
min-width: unset;
@@ -15,7 +15,7 @@ export const StyledProfileLeftColumn = styled.div`
export const StyledProfileRightColumn = styled.div`
display: flex;
flex-direction: column;
- flex-grow: 1;
+ flex: 1;
gap: 40px;
min-width: 400px;
&.mobile {
diff --git a/src/components/backoffice/profile/Profile.tsx b/src/components/backoffice/profile/Profile.tsx
index 090270176..8af2ddccc 100644
--- a/src/components/backoffice/profile/Profile.tsx
+++ b/src/components/backoffice/profile/Profile.tsx
@@ -1,11 +1,11 @@
import React from 'react';
import {
- StyledBackofficeGrid,
StyledBackofficeBackground,
+ StyledBackofficeGrid,
} from '../Backoffice.styles';
+import { HeaderProfile } from 'src/components/headers/HeaderProfile';
import { Section } from 'src/components/utils';
import { useIsDesktop } from 'src/hooks/utils';
-import { HeaderProfile } from './HeaderProfile';
import {
StyledProfileLeftColumn,
StyledProfileRightColumn,
@@ -13,13 +13,24 @@ import {
import { ProfileContactCard } from './ProfileContactCard';
import { ProfileHelpInformationCard } from './ProfileHelpInformationCard';
import { ProfileProfessionalInformationCard } from './ProfileProfessionalInformationCard';
+import { useSelectSelectedProfile } from './useSelectedProfile';
export const Profile = () => {
const isDesktop = useIsDesktop();
+ const selectedProfile = useSelectSelectedProfile();
return (
-
+
diff --git a/src/components/backoffice/profile/ProfileContactCard/ProfileContactCard.styles.tsx b/src/components/backoffice/profile/ProfileContactCard/ProfileContactCard.styles.tsx
index fb3464520..f976dde61 100644
--- a/src/components/backoffice/profile/ProfileContactCard/ProfileContactCard.styles.tsx
+++ b/src/components/backoffice/profile/ProfileContactCard/ProfileContactCard.styles.tsx
@@ -33,7 +33,9 @@ export const StyledContactMessage = styled.div`
background-color: ${COLORS.hoverOrange};
border-radius: 10px;
padding: 10px;
- margin-bottom: 20px;
+ &:not(:last-child) {
+ margin-bottom: 20px;
+ }
font-size: 13px;
svg {
margin-right: 10px;
diff --git a/src/components/backoffice/profile/ProfileContactCard/ProfileContactCard.tsx b/src/components/backoffice/profile/ProfileContactCard/ProfileContactCard.tsx
index adfc9da85..fc2cfb51b 100644
--- a/src/components/backoffice/profile/ProfileContactCard/ProfileContactCard.tsx
+++ b/src/components/backoffice/profile/ProfileContactCard/ProfileContactCard.tsx
@@ -60,35 +60,44 @@ export const ProfileContactCard = () => {
isLoading={loadingSending}
>
- {isFormSent ? (
-
-
-
-
- Votre message a été envoyé
-
- ) : (
+ {selectedProfile.isAvailable ? (
<>
- {existingContactMessage && (
-
-
- {existingContactMessage}
-
+ {isFormSent ? (
+
+
+
+
+ Votre message a été envoyé
+
+ ) : (
+ <>
+ {existingContactMessage && (
+
+
+ {existingContactMessage}
+
+ )}
+ {
+ gaEvent(GA_TAGS.PROFILE_DETAILS_CONTACT_SEND_CLIC);
+ dispatch(
+ profilesActions.postInternalMessageRequested({
+ ...values,
+ addresseeUserId: selectedProfile?.id,
+ })
+ );
+ }}
+ noCompulsory
+ />
+
)}
- {
- gaEvent(GA_TAGS.PROFILE_DETAILS_CONTACT_SEND_CLIC);
- dispatch(
- profilesActions.postInternalMessageRequested({
- ...values,
- addresseeUserId: selectedProfile?.id,
- })
- );
- }}
- noCompulsory
- />
+ ) : (
+
+ {selectedProfile.firstName} n'est pas disponible pour le moment
+ pour recevoir des demandes de contact
+
)}
diff --git a/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpInformationCard.tsx b/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpInformationCard.tsx
index 1ee0cdf90..1dbd5e363 100644
--- a/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpInformationCard.tsx
+++ b/src/components/backoffice/profile/ProfileHelpInformationCard/ProfileHelpInformationCard.tsx
@@ -16,6 +16,7 @@ export const ProfileHelpInformationCard = () => {
const { contextualRole } = useContextualRole(selectedProfile.role);
if (!helpField) return null;
+
return (
{
+ const {
+ openCorrespondingModal,
+ imageUploading,
+ uploadProfileImage,
+ shouldShowAllProfile,
+ contextualRole,
+ } = useHeaderProfile(id, role);
+
+ return (
+
+
+
+
+
+ {imageUploading ? (
+
+ ) : (
+
+ )}
+
+ {isEditable && (
+
+
+ Modifier
+
+
+ )}
+
+
+
+
+
+ {firstName} {lastName}
+
+ }
+ color="black"
+ />
+
+
+ {shouldShowAllProfile && (
+
+ )}
+
+ {shouldShowAllProfile && (
+ <>
+ {department && }
+ {!department && isEditable && (
+
+ Ajouter votre département
+
+ )}
+
+
+ )}
+
+
+
+
+ );
+};
diff --git a/src/components/headers/HeaderProfile/HeaderProfile.mobile.tsx b/src/components/headers/HeaderProfile/HeaderProfile.mobile.tsx
new file mode 100644
index 000000000..90b44494d
--- /dev/null
+++ b/src/components/headers/HeaderProfile/HeaderProfile.mobile.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import EditIcon from 'assets/icons/editIcon.svg';
+import { ButtonIcon, ImgProfile, Section, Tag } from 'src/components/utils';
+import { AvailabilityTag } from 'src/components/utils/AvailabilityTag/AvailabilityTag';
+import { H2, H6 } from 'src/components/utils/Headings';
+import { ImageInput } from 'src/components/utils/Inputs';
+import { Spinner } from 'src/components/utils/Spinner';
+import { COLORS } from 'src/constants/styles';
+import { USER_ROLES } from 'src/constants/users';
+import {
+ StyledEditPictureIconContainer,
+ StyledHeaderNameAndRoleMobile,
+ StyledHeaderProfile,
+ StyledHeaderProfileContent,
+ StyledHeaderProfileDescription,
+ StyledHeaderProfileInfoContainer,
+ StyledHeaderProfileNameContainer,
+ StyledHeaderProfilePicture,
+ StyledHeaderProfilePictureContainerMobile,
+ StyledProfilePlaceholder,
+} from './HeaderProfile.styles';
+import { HeaderProfileProps } from './HeaderProfile.types';
+import { ProfileDescription } from './ProfileDescription';
+import { useHeaderProfile } from './useHeaderProfile';
+
+const SIZE = 64;
+export const HeaderProfileMobile = ({
+ id,
+ firstName,
+ lastName,
+ role,
+ department,
+ description,
+ isAvailable,
+ isEditable,
+}: HeaderProfileProps) => {
+ const {
+ openCorrespondingModal,
+ imageUploading,
+ uploadProfileImage,
+ shouldShowAllProfile,
+ contextualRole,
+ } = useHeaderProfile(id, role);
+
+ return (
+
+
+
+
+
+ {imageUploading ? (
+
+ ) : (
+
+ )}
+
+ {isEditable && (
+
+
+ } />
+
+
+ )}
+
+
+
+
+
+ {firstName} {lastName}
+
+ }
+ color="black"
+ />
+
+
+
+ {shouldShowAllProfile && (
+ <>
+ {department && }
+ {!department && isEditable && (
+
+ Ajouter votre département
+
+ )}
+
+ )}
+
+
+ {shouldShowAllProfile && (
+
+
+
+
+ )}
+
+
+ );
+};
diff --git a/src/components/headers/HeaderProfile/HeaderProfile.styles.tsx b/src/components/headers/HeaderProfile/HeaderProfile.styles.tsx
new file mode 100644
index 000000000..2d98ed831
--- /dev/null
+++ b/src/components/headers/HeaderProfile/HeaderProfile.styles.tsx
@@ -0,0 +1,117 @@
+import styled, { css } from 'styled-components';
+import { COLORS } from 'src/constants/styles';
+
+export const StyledProfilePlaceholder = styled.a`
+ color: ${COLORS.primaryOrange};
+ text-decoration: underline;
+ font-style: italic;
+ font-size: 14px;
+
+ &:hover {
+ text-decoration: underline;
+ }
+`;
+
+export const StyledEditPictureIconContainer = styled.div`
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ border-radius: 50%;
+ background-color: white;
+ border: 1px solid ${COLORS.primaryOrange};
+ padding: 5px;
+`;
+
+export const StyledHeaderProfile = styled.div`
+ background-color: ${COLORS.white};
+`;
+
+export const StyledHeaderProfilePictureContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ align-items: center;
+ margin-right: 50px;
+ position: relative;
+
+ .button-mock-image-input {
+ margin-top: 20px;
+ }
+`;
+
+export const StyledHeaderProfilePictureContainerMobile = styled(
+ StyledHeaderProfilePictureContainer
+)`
+ margin-right: 10px;
+`;
+
+export const StyledHeaderProfilePicture = styled.div<{ size: number }>`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ background-color: ${COLORS.primaryOrange};
+ overflow: hidden;
+ ${({ size }) => {
+ return css`
+ width: ${size}px;
+ height: ${size}px;
+ `;
+ }}
+`;
+
+export const StyledHeaderProfileContent = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+`;
+
+export const StyledHeaderProfileInfoContainer = styled.div`
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+
+ h1,
+ h2,
+ h3,
+ h5,
+ h6 {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+
+ a {
+ line-height: 24px;
+ }
+`;
+
+export const StyledHeaderProfileNameContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-start;
+ flex: 1;
+`;
+
+export const StyledHeaderNameAndRole = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: 20px;
+
+ h1,
+ h2 {
+ margin-right: 16px;
+ }
+`;
+
+export const StyledHeaderNameAndRoleMobile = styled(StyledHeaderNameAndRole)`
+ margin-bottom: 10px;
+`;
+
+export const StyledHeaderProfileDescription = styled.div`
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+`;
diff --git a/src/components/headers/HeaderProfile/HeaderProfile.types.ts b/src/components/headers/HeaderProfile/HeaderProfile.types.ts
new file mode 100644
index 000000000..e11fc85b0
--- /dev/null
+++ b/src/components/headers/HeaderProfile/HeaderProfile.types.ts
@@ -0,0 +1,13 @@
+import { Department } from 'src/constants/departements';
+import { UserRole } from 'src/constants/users';
+
+export interface HeaderProfileProps {
+ id: string;
+ firstName: string;
+ lastName: string;
+ role: UserRole;
+ department: Department;
+ description: string;
+ isAvailable: boolean;
+ isEditable?: boolean;
+}
diff --git a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ModalEditProfileDescription/ModalEditProfileDescription.tsx b/src/components/headers/HeaderProfile/ProfileDescription/ModalEditProfileDescription/ModalEditProfileDescription.tsx
similarity index 100%
rename from src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ModalEditProfileDescription/ModalEditProfileDescription.tsx
rename to src/components/headers/HeaderProfile/ProfileDescription/ModalEditProfileDescription/ModalEditProfileDescription.tsx
diff --git a/src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ModalEditProfileDescription/index.ts b/src/components/headers/HeaderProfile/ProfileDescription/ModalEditProfileDescription/index.ts
similarity index 100%
rename from src/components/backoffice/parametres/ParametresLayout/HeaderParametres/ParametresDescription/ModalEditProfileDescription/index.ts
rename to src/components/headers/HeaderProfile/ProfileDescription/ModalEditProfileDescription/index.ts
diff --git a/src/components/headers/HeaderProfile/ProfileDescription/ProfileDescription.styles.tsx b/src/components/headers/HeaderProfile/ProfileDescription/ProfileDescription.styles.tsx
new file mode 100644
index 000000000..f2e5cf732
--- /dev/null
+++ b/src/components/headers/HeaderProfile/ProfileDescription/ProfileDescription.styles.tsx
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { COLORS } from 'src/constants/styles';
+
+export const StyledDescriptionContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+`;
+
+export const StyledDescriptionParagraphe = styled.div`
+ white-space: pre-line;
+ color: ${COLORS.black};
+ font-style: italic;
+ font-size: 16px;
+ line-height: 24px;
+`;
+
+export const StyledDescriptionEditText = styled.a`
+ color: ${COLORS.darkGray};
+ text-decoration: underline;
+ margin-top: 20px;
+ margin-left: 8px;
+ font-size: 14px;
+ &:hover {
+ text-decoration: underline;
+ color: ${COLORS.darkGrayFont};
+ }
+`;
diff --git a/src/components/headers/HeaderProfile/ProfileDescription/ProfileDescription.tsx b/src/components/headers/HeaderProfile/ProfileDescription/ProfileDescription.tsx
new file mode 100644
index 000000000..fc0f38e7f
--- /dev/null
+++ b/src/components/headers/HeaderProfile/ProfileDescription/ProfileDescription.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyledProfilePlaceholder } from '../HeaderProfile.styles';
+import { openModal } from 'src/components/modals/Modal';
+import { useAuthenticatedUser } from 'src/hooks/authentication/useAuthenticatedUser';
+import { ModalEditProfileDescription } from './ModalEditProfileDescription';
+import {
+ StyledDescriptionContainer,
+ StyledDescriptionEditText,
+ StyledDescriptionParagraphe,
+} from './ProfileDescription.styles';
+
+interface ProfileDescriptionProps {
+ isEditable?: boolean;
+ description: string;
+}
+
+export const ProfileDescription = ({
+ isEditable = false,
+ description,
+}: ProfileDescriptionProps) => {
+ const user = useAuthenticatedUser();
+
+ const openDescriptionModal = () => {
+ openModal();
+ };
+
+ return (
+
+ {description && (
+
+ “{description}”
+ {isEditable && (
+ openDescriptionModal()}>
+ Modifier la description
+
+ )}
+
+ )}
+ {isEditable && !description && (
+ openDescriptionModal()}
+ data-testid="profile-description-placeholder"
+ >
+ Ajouter une description pour vous présenter à la communauté
+
+ )}
+
+ );
+};
diff --git a/src/components/headers/HeaderProfile/ProfileDescription/index.ts b/src/components/headers/HeaderProfile/ProfileDescription/index.ts
new file mode 100644
index 000000000..7d6a733e5
--- /dev/null
+++ b/src/components/headers/HeaderProfile/ProfileDescription/index.ts
@@ -0,0 +1 @@
+export * from './ProfileDescription';
diff --git a/src/components/headers/HeaderProfile/index.ts b/src/components/headers/HeaderProfile/index.ts
new file mode 100644
index 000000000..ea5298c32
--- /dev/null
+++ b/src/components/headers/HeaderProfile/index.ts
@@ -0,0 +1,8 @@
+import { plateform } from 'src/utils/Device';
+import { HeaderProfileDesktop } from './HeaderProfile.desktop';
+import { HeaderProfileMobile } from './HeaderProfile.mobile';
+
+export const HeaderProfile = plateform({
+ Desktop: HeaderProfileDesktop,
+ Mobile: HeaderProfileMobile,
+});
diff --git a/src/components/headers/HeaderProfile/useHeaderProfile.ts b/src/components/headers/HeaderProfile/useHeaderProfile.ts
new file mode 100644
index 000000000..8844dca29
--- /dev/null
+++ b/src/components/headers/HeaderProfile/useHeaderProfile.ts
@@ -0,0 +1,32 @@
+import { useOpenCorrespondingModal } from 'src/components/backoffice/parametres/ParametresLayout/UserInformationCard/useOpenModal';
+import { useContextualRole } from 'src/components/backoffice/useContextualRole';
+import {
+ CANDIDATE_USER_ROLES,
+ USER_ROLES,
+ UserRole,
+} from 'src/constants/users';
+import { useAuthenticatedUser } from 'src/hooks/authentication/useAuthenticatedUser';
+import { isRoleIncluded } from 'src/utils';
+import { useUploadProfileImage } from './useUploadProfileImage';
+
+export function useHeaderProfile(userId: string, role: UserRole) {
+ const user = useAuthenticatedUser();
+ const { openCorrespondingModal } = useOpenCorrespondingModal(user);
+
+ const { imageUploading, uploadProfileImage } = useUploadProfileImage(userId);
+
+ const shouldShowAllProfile = isRoleIncluded(
+ [...CANDIDATE_USER_ROLES, USER_ROLES.COACH],
+ role
+ );
+
+ const { contextualRole } = useContextualRole(role);
+
+ return {
+ openCorrespondingModal,
+ imageUploading,
+ uploadProfileImage,
+ shouldShowAllProfile,
+ contextualRole,
+ };
+}
diff --git a/src/components/headers/HeaderProfile/useUploadProfileImage.ts b/src/components/headers/HeaderProfile/useUploadProfileImage.ts
new file mode 100644
index 000000000..20c5a766f
--- /dev/null
+++ b/src/components/headers/HeaderProfile/useUploadProfileImage.ts
@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+import { Api } from 'src/api';
+
+export function useUploadProfileImage(userId: string) {
+ const [imageUploading, setImageUploading] = useState(false);
+
+ const uploadProfileImage = useCallback(
+ async ({ profileImage }: { profileImage: Blob }) => {
+ setImageUploading(true);
+ const formData = new FormData();
+ formData.append('profileImage', profileImage);
+
+ await Api.postProfileImage(userId, formData);
+ setImageUploading(false);
+ },
+ [userId]
+ );
+
+ return { imageUploading, uploadProfileImage };
+}
diff --git a/src/components/partials/NewsletterPartial/NewsletterPartial.styles.ts b/src/components/partials/NewsletterPartial/NewsletterPartial.styles.ts
index d9599a9aa..896b3cd65 100644
--- a/src/components/partials/NewsletterPartial/NewsletterPartial.styles.ts
+++ b/src/components/partials/NewsletterPartial/NewsletterPartial.styles.ts
@@ -33,7 +33,7 @@ export const StyledNLForm = styled.div`
.input-label {
display: flex;
flex-direction: row;
- flex-grow: 1;
+ flex: 1;
margin-bottom: 16px;
}
}
diff --git a/src/components/utils/AvailabilityTag/AvailabilityTag.stories.tsx b/src/components/utils/AvailabilityTag/AvailabilityTag.stories.tsx
new file mode 100644
index 000000000..c28a5e5b3
--- /dev/null
+++ b/src/components/utils/AvailabilityTag/AvailabilityTag.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AvailabilityTag } from '.';
+
+const meta = {
+ title: 'Availability Tag',
+ component: AvailabilityTag,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const NotAvailable = {
+ args: {
+ isAvailable: false,
+ },
+} satisfies Story;
+
+export const Available = {
+ args: {
+ isAvailable: true,
+ },
+} satisfies Story;
diff --git a/src/components/utils/AvailabilityTag/AvailabilityTag.styles.ts b/src/components/utils/AvailabilityTag/AvailabilityTag.styles.ts
new file mode 100644
index 000000000..e97731fe8
--- /dev/null
+++ b/src/components/utils/AvailabilityTag/AvailabilityTag.styles.ts
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { COLORS } from 'src/constants/styles';
+
+export const StyledAvailabilityTagContainer = styled.div`
+ display: flex;
+ align-items: center;
+ border-radius: 40px;
+ background-color: ${COLORS.white};
+ padding: 2px 8px;
+ font-size: 12px;
+ border: 1px solid ${COLORS.gray};
+ overflow-wrap: normal;
+`;
+
+export const StyledAvailabilityTagDot = styled.div<{ isAvailable: boolean }>`
+ height: 10px;
+ width: 10px;
+ background-color: ${({ isAvailable }) => {
+ return isAvailable ? COLORS.yesGreen : COLORS.noRed;
+ }};
+ border-radius: 50%;
+ margin-right: 8px;
+`;
diff --git a/src/components/utils/AvailabilityTag/AvailabilityTag.tsx b/src/components/utils/AvailabilityTag/AvailabilityTag.tsx
new file mode 100644
index 000000000..1e15997cd
--- /dev/null
+++ b/src/components/utils/AvailabilityTag/AvailabilityTag.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+ StyledAvailabilityTagContainer,
+ StyledAvailabilityTagDot,
+} from './AvailabilityTag.styles';
+
+interface AvailabilityTagProps {
+ isAvailable: boolean;
+}
+
+export function AvailabilityTag({ isAvailable }: AvailabilityTagProps) {
+ return (
+
+
+ {isAvailable ? 'Disponible' : 'Indisponible'}
+
+ );
+}
diff --git a/src/components/utils/AvailabilityTag/index.ts b/src/components/utils/AvailabilityTag/index.ts
new file mode 100644
index 000000000..d22bca44e
--- /dev/null
+++ b/src/components/utils/AvailabilityTag/index.ts
@@ -0,0 +1 @@
+export * from './AvailabilityTag';
diff --git a/src/components/utils/CardList/CardList.stories.tsx b/src/components/utils/CardList/CardList.stories.tsx
index 0a9119498..24b543ef3 100644
--- a/src/components/utils/CardList/CardList.stories.tsx
+++ b/src/components/utils/CardList/CardList.stories.tsx
@@ -38,6 +38,7 @@ const cards: ProfileCardProps[] = new Array(50)
{ name: 'ouvrier', order: 1 },
],
department: 'Paris (75)',
+ isAvailable: false,
},
{
userId: uuid(),
@@ -51,6 +52,7 @@ const cards: ProfileCardProps[] = new Array(50)
],
ambitions: [{ name: 'développeur', order: 0 }],
department: 'Paris (75)',
+ isAvailable: true,
},
])
.reduce((acc, val) => [...acc, ...val], []);
@@ -65,6 +67,7 @@ const list = cards.map(
businessLines,
ambitions,
department,
+ isAvailable,
}) => (
)
diff --git a/src/components/utils/Cards/Card/Card.styles.tsx b/src/components/utils/Cards/Card/Card.styles.tsx
index bbbcfe984..245b6ffe7 100644
--- a/src/components/utils/Cards/Card/Card.styles.tsx
+++ b/src/components/utils/Cards/Card/Card.styles.tsx
@@ -25,18 +25,18 @@ export const StyledCardTitleContainer = styled.div`
margin-right: 25px;
margin-left: 25px;
padding-bottom: 25px;
- margin-bottom: 0px;
+ margin-bottom: 0;
h5 {
- margin-bottom: 0px;
+ margin-bottom: 0;
}
&.no-border {
border-bottom: none;
- margin-bottom: 0px;
+ margin-bottom: 0;
> h5 {
- margin-bottom: 0px;
+ margin-bottom: 0;
}
}
`;
diff --git a/src/components/utils/Cards/Card/Card.tsx b/src/components/utils/Cards/Card/Card.tsx
index 6c662f9aa..a56d316b7 100644
--- a/src/components/utils/Cards/Card/Card.tsx
+++ b/src/components/utils/Cards/Card/Card.tsx
@@ -20,12 +20,7 @@ import {
interface CardProps {
children: React.ReactNode;
- // badge?: React.ReactNode;
- // style?: 'default' | 'primary' | 'secondary';
title?: React.ReactNode;
- // body?: boolean;
- // hover?: boolean;
- // size?: 'small' | 'large' | 'default';
onClick?: () => void;
editCallback?: () => void;
isLoading?: boolean;
@@ -37,10 +32,6 @@ interface CardProps {
export const Card = ({
title,
- // style = 'default',
- // body = true,
- // hover = false,
- // size,
onClick,
children,
editCallback,
diff --git a/src/components/utils/Cards/ProfileCard/ProfileCard.stories.tsx b/src/components/utils/Cards/ProfileCard/ProfileCard.stories.tsx
index 130896db2..065b77dc9 100644
--- a/src/components/utils/Cards/ProfileCard/ProfileCard.stories.tsx
+++ b/src/components/utils/Cards/ProfileCard/ProfileCard.stories.tsx
@@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { v4 as uuid } from 'uuid';
import { USER_ROLES } from 'src/constants/users';
-import { ProfileCard } from './ProfileCard';
+import { ProfileCard } from '.';
const meta = {
title: 'Profile Card',
@@ -18,6 +18,7 @@ export const Candidate = {
lastName: 'Doe',
role: USER_ROLES.CANDIDATE,
helps: [{ name: 'network' }, { name: 'cv' }],
+ isAvailable: true,
businessLines: [
{ name: 'id', order: 0 },
{ name: 'bat', order: 1 },
@@ -36,6 +37,7 @@ export const Coach = {
firstName: 'John',
lastName: 'Doe',
role: USER_ROLES.COACH,
+ isAvailable: true,
helps: [
{ name: 'network' },
{ name: 'cv' },
diff --git a/src/components/utils/Cards/ProfileCard/ProfileCard.styles.ts b/src/components/utils/Cards/ProfileCard/ProfileCard.styles.ts
index a756b643c..8647a44b3 100644
--- a/src/components/utils/Cards/ProfileCard/ProfileCard.styles.ts
+++ b/src/components/utils/Cards/ProfileCard/ProfileCard.styles.ts
@@ -38,6 +38,15 @@ export const StyledProfileCardInfoContainer = styled.div`
bottom: 24px;
`;
+export const StyledProfileCardAvailability = styled.div`
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ top: 10px;
+ right: 10px;
+`;
+
export const StyledProfileCardName = styled.div`
text-overflow: ellipsis;
overflow: hidden;
diff --git a/src/components/utils/Cards/ProfileCard/ProfileCard.tsx b/src/components/utils/Cards/ProfileCard/ProfileCard.tsx
index 1e5a16019..ef328dbaf 100644
--- a/src/components/utils/Cards/ProfileCard/ProfileCard.tsx
+++ b/src/components/utils/Cards/ProfileCard/ProfileCard.tsx
@@ -4,6 +4,7 @@ import React, { useMemo } from 'react';
import HandsIcon from 'assets/icons/illu-coeur-mains-ouvertes.svg';
import CaseIcon from 'assets/icons/illu-malette.svg';
import { UserCandidateWithUsers } from 'src/api/types';
+import { AvailabilityTag } from 'src/components/utils/AvailabilityTag';
import { H3, H4, H5 } from 'src/components/utils/Headings';
import { Img } from 'src/components/utils/Img';
import { Tag } from 'src/components/utils/Tag';
@@ -22,6 +23,7 @@ import { gaEvent } from 'src/lib/gtag';
import { findConstantFromValue, isRoleIncluded, sortByOrder } from 'src/utils';
import {
StyledProfileCard,
+ StyledProfileCardAvailability,
StyledProfileCardBusinessLines,
StyledProfileCardContent,
StyledProfileCardDepartment,
@@ -63,9 +65,10 @@ interface ProfileCardProps {
userCandidate?: UserCandidateWithUsers;
department?: Department;
job?: string;
+ isAvailable: boolean;
}
-const getLabelsDependingOnRole = (role) => {
+const getLabelsDependingOnRole = (role: UserRole) => {
if (isRoleIncluded(CANDIDATE_USER_ROLES, role)) {
return {
businessLines: 'Je recherche un emploi dans\xa0:',
@@ -97,6 +100,7 @@ export function ProfileCard({
ambitions,
userCandidate,
job,
+ isAvailable,
}: ProfileCardProps) {
const { urlImg, fallbackToCVImage } = useImageFallback({
userId,
@@ -144,6 +148,9 @@ export function ProfileCard({
)}
+
+
+
;
+ user: {
+ id: string;
+ firstName: string;
+ role: UserRole;
+ candidat?: UserCandidateWithUsers;
+ };
size?: number;
}
export const ImgProfile = ({ user, size = 40 }: ImgProfileProps) => {
- const connectedUser = useAuthenticatedUser();
-
- const myUser: Partial = user || connectedUser;
const [hash, setHash] = useState(Date.now());
const { urlImg, fallbackToCVImage } = useImageFallback({
- userId: myUser.id,
- role: myUser.role,
- userCandidate: myUser.candidat,
+ userId: user.id,
+ role: user.role,
+ userCandidate: user.candidat,
});
useEffect(() => {
@@ -40,7 +42,7 @@ export const ImgProfile = ({ user, size = 40 }: ImgProfileProps) => {
cover
onError={fallbackToCVImage}
src={`${urlImg}?${hash}`}
- alt={`photo de ${myUser.firstName}`}
+ alt={`photo de ${user.firstName}`}
id="parametres-profile-picture"
/>