diff --git a/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVFicheEdition.tsx b/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVFicheEdition.tsx index 8b4cff09c..b0a73c6b7 100644 --- a/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVFicheEdition.tsx +++ b/src/components/backoffice/cv/CVEditPage/CVFicheEdition/CVFicheEdition.tsx @@ -1,8 +1,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { CV } from 'src/api/types'; -import { Grid, Img } from 'src/components/utils'; +import { Grid } from 'src/components/utils'; -import { CV_STATUS } from 'src/constants'; import { AdminZone } from 'src/constants/departements'; import { useMount, usePrevious } from 'src/hooks/utils'; import { @@ -48,8 +47,6 @@ export const CVFicheEdition = ({ address, userZone, }: CVFicheEditionProps) => { - const [previewUrl, setPreviewUrl] = useState(); - const [imageUrl, setImageUrl] = useState(); const prevPreviewGenerating = usePrevious(previewGenerating); @@ -58,7 +55,6 @@ export const CVFicheEdition = ({ // Use hash to reload image if an update is done const previewHash = Date.now(); const baseUrl = `${process.env.AWSS3_URL}${process.env.AWSS3_IMAGE_DIRECTORY}${cv.UserId}.${cv.status}`; - setPreviewUrl(`${baseUrl}.preview.jpg?${previewHash}`); setImageUrl(`${baseUrl}.jpg?${previewHash}`); }, [cv.UserId, cv.status]); @@ -81,49 +77,6 @@ export const CVFicheEdition = ({ onChange={onChange} disablePicture={disablePicture} /> - {cv.urlImg && ( -
-
-

- Photo de partage -

-
-
-
- {previewUrl ? ( - Preview - ) : ( -
- )} - - {(cv.status === CV_STATUS.Draft.value || - previewGenerating) && ( - <> -
-
- {previewGenerating ? ( -
- Génération de la prévisualisation en cours  -
-
- ) : ( -

Veuillez sauvegarder ou publier le CV

- )} -
- - )} -
-
-
- )} diff --git a/src/components/cards/CandidatCard.styles.tsx b/src/components/cards/CandidatCard.styles.tsx index b21e06481..14ffe9d8d 100644 --- a/src/components/cards/CandidatCard.styles.tsx +++ b/src/components/cards/CandidatCard.styles.tsx @@ -2,20 +2,43 @@ import styled from 'styled-components'; import { COLORS } from 'src/constants/styles'; export const CandidatCardStyled = styled.div` - height: 550px; display: flex; flex-direction: column; + height: 400px; background: ${COLORS.white}; border-radius: 20px; overflow: hidden; - border: 3px solid #f3f3f3; + border: 3px solid ${COLORS.lightgray}; `; export const CandidatCardPictureContainerStyled = styled.div` - flex: 1; position: relative; width: 100%; cursor: pointer; + height: 245px; + background: ${COLORS.lightgray}; +`; + +export const CandidatCardContentStyled = styled.div` + flex: auto; + padding: 20px; + font-size: 13px; + font-weight: 400; + color: ${COLORS.darkGrayFont}; + align-items: space-between; + cursor: pointer; + h1 { + color: ${COLORS.black}; + font-size: 16px; + font-weight: 600; + margin-bottom: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + p { + margin: 0; + } `; export const CandidatCardPictureOverlay = styled.div` @@ -34,59 +57,25 @@ export const CandidatCardPictureOverlay = styled.div` justify-content: flex-end; items-center: end; font-weight: 400; - font-size: 16px; + font-size: 14px; padding: 20px; box-sizing: border-box; gap: 10px; > p { margin: 0; &.name { - font-size: 28px; - font-weight: 600; + font-size: 25px; + font-weight: 500; } } `; -export const CandidatCardContentStyled = styled.div` - padding: 20px; - font-size: 14px; - font-weight: 400; - color: ${COLORS.darkGrayFont}; - cursor: pointer; - > h1 { - color: ${COLORS.black}; - font-size: 18px; - font-weight: 700; - margin-bottom: 10px; - } - > p { - margin: 0; - } -`; - export const CandidateCardBusinessLinesStyled = styled.div` - margin-left: 10px; + display: flex; + flex-direction: column; + align-items: flex-start; color: ${COLORS.primaryBlue}; > * { margin-top: 10px; } `; - -export const CandidatCardFooterStyled = styled.div` - border-top: 1px solid #f3f3f3; - font-size: 14px; - display: flex; - justify-content: space-between; - align-items: center; - > a { - text-decoration: underline; - } - padding: 10px 20px 10px 20px; - box-sizing: border-box; -`; - -export const CandidatCardSharerStyled = styled.div` - display: flex; - align-items: center; - gap: 10px; -`; diff --git a/src/components/cards/CandidatCard.tsx b/src/components/cards/CandidatCard.tsx index b741f2001..5a49b870a 100644 --- a/src/components/cards/CandidatCard.tsx +++ b/src/components/cards/CandidatCard.tsx @@ -3,39 +3,19 @@ import _ from 'lodash'; import { useRouter } from 'next/router'; import PropTypes from 'prop-types'; import React from 'react'; - -import { - FacebookShareButton, - LinkedinShareButton, - TwitterShareButton, -} from 'react-share'; - -import FacebookIcon from 'assets/icons/facebook.svg'; -import LinkedInIcon from 'assets/icons/linked-in.svg'; -import TwitterIcon from 'assets/icons/twitter.svg'; import { CandidatCardContentStyled, - CandidatCardFooterStyled, CandidatCardPictureContainerStyled, CandidatCardPictureOverlay, - CandidatCardSharerStyled, CandidatCardStyled, CandidateCardBusinessLinesStyled, } from 'src/components/cards/CandidatCard.styles'; -import { updateSharesCount } from 'src/components/cv/updateSharesCount'; -import { openModal } from 'src/components/modals/Modal'; -import { ModalShareCV } from 'src/components/modals/Modal/ModalGeneric/StepperModal/ModalShareCV'; -import { Img, SimpleLink, Tag } from 'src/components/utils'; +import { Img, Tag } from 'src/components/utils'; import { AMBITIONS_PREFIXES, BUSINESS_LINES } from 'src/constants'; -import { FB_TAGS, GA_TAGS } from 'src/constants/tags'; -import { fbEvent } from 'src/lib/fb'; +import { GA_TAGS } from 'src/constants/tags'; import { gaEvent } from 'src/lib/gtag'; -import { - buildBusinessLineForSentence, - findConstantFromValue, - sortByOrder, -} from 'src/utils'; +import { findConstantFromValue, sortByOrder } from 'src/utils'; export const CandidatCard = ({ url, @@ -44,11 +24,6 @@ export const CandidatCard = ({ ambitions, businessLines, locations, - // skills, - // catchphrase, - // employed, - // endOfContract, - id, }) => { const { asPath, push } = useRouter(); @@ -60,16 +35,8 @@ export const CandidatCard = ({ const showShareOptions = !asPath.includes('/entreprises'); - const link = encodeURI(`${process.env.SERVER_URL}/cv/${url}`); - const hashtags = ['Entourage Pro']; - const sharedDescription = `La précarité n'exclut pas les compétences\xa0! Avec Entourage Pro, aidons ${firstName} à retrouver un emploi en lui proposant un job ou en diffusant son CV\xa0!`; - const title = `Entourage Pro\xa0: Aidez ${firstName} à retrouver un emploi`; const linkToCV = `/cv/${url}?hideShareOptions=${!showShareOptions}`; - const openNewsletterModal = () => { - openModal(); - }; - const onCardClicked = () => { gaEvent(onCvClickEvent); push(linkToCV); @@ -96,176 +63,52 @@ export const CandidatCard = ({ {firstName}

{firstName}

-

{sortedLocations?.length > 0 ? sortedLocations[0].name : ''}

+ {sortedLocations?.length > 0 &&

{sortedLocations[0].name}

} - {sortedAmbitions?.length > 0 &&

{sortedAmbitions[0].name}

} -

Je recherche un emploi dans

- - {isNewCareerPath - ? _.uniqWith(sortedBusinessLines.slice(0, 2), (a, b) => { - // @ts-expect-error after enable TS strict mode. Please, try to fix it - return a.name === b.name; - // @ts-expect-error after enable TS strict mode. Please, try to fix it - }).map(({ name }, index) => { - return ( - - ); - }) - : sortedAmbitions?.slice(0, 2).map(({ name }, index) => { - return ( - - ); - })} - +

+ {sortedAmbitions?.length > 0 + ? sortedAmbitions[0].name + : "A l'écoute de toutes les opportunités"} +

+ {sortedBusinessLines?.length > 0 && ( + <> +

Je recherche un emploi dans :

+ + {isNewCareerPath + ? _.uniqWith(sortedBusinessLines.slice(0, 2), (a, b) => { + // @ts-expect-error after enable TS strict mode. Please, try to fix it + return a.name === b.name; + // @ts-expect-error after enable TS strict mode. Please, try to fix it + }).map(({ name }, index) => { + return ( + + ); + }) + : sortedAmbitions?.slice(0, 2).map(({ name }, index) => { + return ( + + ); + })} + + + )} - - { - gaEvent(onCvClickEvent); - }} - > - Voir le CV - - - Partager -
    -
  • - { - gaEvent( - isCandidatsPage - ? GA_TAGS.PAGE_GALERIE_PARTAGE_CV_LINKEDIN_CLIC - : GA_TAGS.HOME_PARTAGE_CV_LINKEDIN_CLIC - ); - fbEvent(FB_TAGS.SHARE_CV_SEND); - await updateSharesCount(id, 'linkedin'); - openNewsletterModal(); - }} - onClick={() => { - fbEvent(FB_TAGS.SHARE_CV_OPEN); - }} - url={link} - title={title} - summary={sharedDescription} - style={{ cursor: 'pointer' }} - className="uk-icon-button light-icon-button" - > - - -
    • -
  • - { - gaEvent( - isCandidatsPage - ? GA_TAGS.PAGE_GALERIE_PARTAGE_CV_FACEBOOK_CLIC - : GA_TAGS.HOME_PARTAGE_CV_FACEBOOK_CLIC - ); - fbEvent(FB_TAGS.SHARE_CV_SEND); - await updateSharesCount(id, 'facebook'); - openNewsletterModal(); - }} - onClick={() => { - fbEvent(FB_TAGS.SHARE_CV_OPEN); - }} - url={link} - quote={sharedDescription} - hashtags={hashtags} - style={{ cursor: 'pointer' }} - className="uk-icon-button light-icon-button" - > - - -
    • -
  • - { - gaEvent( - isCandidatsPage - ? GA_TAGS.PAGE_GALERIE_PARTAGE_CV_TWITTER_CLIC - : GA_TAGS.HOME_PARTAGE_CV_TWITTER_CLIC - ); - fbEvent(FB_TAGS.SHARE_CV_SEND); - await updateSharesCount(id, 'twitter'); - openNewsletterModal(); - }} - onClick={() => { - fbEvent(FB_TAGS.SHARE_CV_OPEN); - }} - url={link} - title={title} - hashtags={hashtags} - via="R_Entourage" - style={{ cursor: 'pointer' }} - className="uk-icon-button light-icon-button" - > - - -
    • -
- - ); - - // TODO : Determine if we need to display the employed status - // {employed && ( - //
- //
- // logo entourage - //

- // {endOfContract - // ? `en emploi jusqu'au ${moment(endOfContract).format( - // 'DD/MM/YYYY' - // )}` - // : 'a retrouvé un emploi'} - //

- //
- //
- // )} }; CandidatCard.propTypes = { url: PropTypes.string.isRequired, @@ -301,7 +144,6 @@ CandidatCard.propTypes = { // catchphrase: PropTypes.string, // employed: PropTypes.bool, // endOfContract: PropTypes.string, - id: PropTypes.string.isRequired, }; CandidatCard.defaultProps = { diff --git a/src/components/partials/CV/CVDiscover/CVDiscover.tsx b/src/components/partials/CV/CVDiscover/CVDiscover.tsx index 16fd76b03..b2cae30de 100644 --- a/src/components/partials/CV/CVDiscover/CVDiscover.tsx +++ b/src/components/partials/CV/CVDiscover/CVDiscover.tsx @@ -44,7 +44,6 @@ export const CVDiscover = () => { } firstName={cv.user && cv.user.candidat.firstName} ambitions={cv.ambitions} - id={cv.user.candidat.id} locations={cv.locations} /> ); diff --git a/src/components/partials/CV/CVList/CVList.tsx b/src/components/partials/CV/CVList/CVList.tsx index 0adc7b739..1ff1492f0 100644 --- a/src/components/partials/CV/CVList/CVList.tsx +++ b/src/components/partials/CV/CVList/CVList.tsx @@ -143,7 +143,6 @@ export const CVList = ({ firstName={cv.user.candidat.firstName} ambitions={cv.ambitions} locations={cv.locations} - id={cv.user.candidat.id} /> ); })} diff --git a/src/components/utils/Icons/Icons.styles.ts b/src/components/utils/Icons/Icons.styles.ts index f491997f0..fd1e7e68f 100644 --- a/src/components/utils/Icons/Icons.styles.ts +++ b/src/components/utils/Icons/Icons.styles.ts @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { COLORS } from 'src/constants/styles'; export const StyledIconsContainer = styled.div` display: flex; @@ -16,7 +17,7 @@ export const StyledIconContainer = styled.div` height: 150px; width: 150px; text-align: center; - border: 1px solid #f5f5f5; + border: 1px solid ${COLORS.lightgray}; padding: 10px; box-sizing: border-box; svg { diff --git a/src/pages/cv/[url].tsx b/src/pages/cv/[url].tsx index 741e26eb8..68c0317a6 100644 --- a/src/pages/cv/[url].tsx +++ b/src/pages/cv/[url].tsx @@ -11,7 +11,7 @@ import { PageCVContent } from 'src/components/partials/CV/PageCVContent'; import { StyledCVPage } from 'src/components/partials/CV/PageCVContent/PageCVContent.styles'; import { NewsletterPartial } from 'src/components/partials/common/NewsletterPartial'; import { Grid, Section, SimpleLink, Button } from 'src/components/utils'; -import { CV_FILTERS_DATA } from 'src/constants'; +import { CV_FILTERS_DATA, CV_STATUS } from 'src/constants'; import { GA_TAGS } from 'src/constants/tags'; interface CVPageProps { @@ -29,6 +29,7 @@ const CVPage = ({ cv, exists = false, router }: CVPageProps) => { const title = candidateExists ? `Entourage Pro\xa0: Aidez ${cv.user.candidat.firstName} à retrouver un emploi` : ''; + const urlImg = `${process.env.AWSS3_URL}${process.env.AWSS3_IMAGE_DIRECTORY}${cv.user.candidat.id}.${CV_STATUS.Published.value}.jpg`; useEffect(() => { if (cv) { @@ -113,14 +114,7 @@ const CVPage = ({ cv, exists = false, router }: CVPageProps) => { metaTitle={title} metaUrl={link} metaDescription={sharedDescription} - metaImage={ - cv.urlImg - ? `${process.env.AWSS3_CDN_URL}/${cv.urlImg.replace( - '.jpg', - '.preview.jpg' - )}` - : `${process.env.SERVER_URL}/static/img/entourage-pro-preview.jpg` - } + metaImage={urlImg} metaType="profile" > diff --git a/src/pages/cv/pdf/[id].tsx b/src/pages/cv/pdf/[id].tsx index 46567a8c5..d693a3966 100644 --- a/src/pages/cv/pdf/[id].tsx +++ b/src/pages/cv/pdf/[id].tsx @@ -5,6 +5,7 @@ import { CV } from 'src/api/types'; import { Layout } from 'src/components/Layout'; import { CVPDF } from 'src/components/cv'; import { Section } from 'src/components/utils'; +import { CV_STATUS } from 'src/constants'; interface CVPDFPageProps { cv: CV; @@ -13,6 +14,8 @@ interface CVPDFPageProps { } const CVPDFPage = ({ cv, page, router }: CVPDFPageProps) => { + const urlImg = `${process.env.AWSS3_URL}${process.env.AWSS3_IMAGE_DIRECTORY}${cv.user.candidat.id}.${CV_STATUS.Published.value}.jpg`; + if (!cv) { return ( @@ -33,14 +36,7 @@ const CVPDFPage = ({ cv, page, router }: CVPDFPageProps) => { metaTitle={`Aidez ${cv.user.candidat.firstName} en partageant son CV.`} metaUrl={`${process.env.SERVER_URL}${router.asPath}`} metaDescription={cv.story} - metaImage={ - cv.urlImg - ? `${process.env.AWSS3_URL}/${cv.urlImg.replace( - '.jpg', - '.preview.jpg' - )}` - : `${process.env.SERVER_URL}/static/img/entourage-pro-preview.jpg` - } + metaImage={urlImg} metaType="profile" >