diff --git a/server/src/constants.ts b/server/src/constants.ts index b96fdc5d..7a046b22 100644 --- a/server/src/constants.ts +++ b/server/src/constants.ts @@ -190,3 +190,13 @@ export const QUESTION_LABELS_BY_QUESTION_KEY = { trouverEntrepriseConseil: "Comment as-tu vécu ta recherche d’entreprise ? As-tu des conseils ?", differenceCollegeCfaConseil: "À quoi ressemble une journée dans ton CFA ?", }; + +export const TROUVER_ENTREPRISE_LABEL_MATCHER = { + "En me débrouillant tout·e seul·e": "En toute autonomie", + "Une personne de ma famille ou de mon entourage m'a aidé·e": "Avec l’aide de l’entourage (famille, amis, etc)", + "Oui j’ai eu besoin de lui et il m’a aidé": "Avec l’aide du CFA", + Autrement: "Autrement (non précisé)", + "Un·e éducateur·ice ou une association m’a aidé·e": "Avec l’aide d’un éducateur ou d’une association", + "Lors d'un événement sur l’orientation": "Lors d'un événement sur l’orientation", + "Un·e membre de l’équipe pédagogique de mon ancien établissement m’a aidé·e": "Avec l’aide de l’ancien établissement", +}; diff --git a/server/src/services/temoignages.service.ts b/server/src/services/temoignages.service.ts index a3b5ce30..3f8afdbf 100644 --- a/server/src/services/temoignages.service.ts +++ b/server/src/services/temoignages.service.ts @@ -22,6 +22,7 @@ import { getFormattedResponses, getGemVerbatimsByWantedQuestionKey, getReponseRating, + getTrouverEntrepriseRating, matchCardTypeAndQuestions, matchIdAndQuestions, verbatimsAnOrderedThemeAnswersMatcher, @@ -209,7 +210,7 @@ export const getDatavisualisationFormation = async (intituleFormation, cfd, idCe const query = { campagneIds }; const temoignages = await temoignagesDao.findAll(query); - if (!temoignages.length) { + if (!temoignages.length || temoignages.length === 1) { return { success: true, body: { temoignagesCount: 0 } }; } @@ -217,6 +218,16 @@ export const getDatavisualisationFormation = async (intituleFormation, cfd, idCe .map((temoignage) => temoignage.reponses["commentVisTonExperienceEntreprise"]) .filter(Boolean); + const cfaAideTrouverEntreprise = temoignages + .map((temoignage) => temoignage.reponses["cfaAideTrouverEntreprise"]) + .filter(Boolean); + + const commentTrouverEntreprise = temoignages + .map((temoignage) => temoignage.reponses["commentTrouverEntreprise"]) + .filter(Boolean); + + const trouverEntrepriseRating = getTrouverEntrepriseRating(cfaAideTrouverEntreprise, commentTrouverEntreprise); + const commentVisTonExperienceEntrepriseRating = getCommentVisTonExperienceEntrepriseRating( commentVisTonExperienceEntreprise ); @@ -253,7 +264,7 @@ export const getDatavisualisationFormation = async (intituleFormation, cfd, idCe ); const allGems = getGemVerbatimsByWantedQuestionKey(verbatimsWithEtablissement); - const gems = getGemVerbatimsByWantedQuestionKey(verbatimsWithEtablissement.splice(0, 10)); + const gems = getGemVerbatimsByWantedQuestionKey(verbatimsWithEtablissement.splice(0, 5)); const etablissementsCount = temoignages.reduce((acc, temoignage) => { if (temoignage.etablissementFormateurEntrepriseRaisonSociale) { @@ -273,6 +284,7 @@ export const getDatavisualisationFormation = async (intituleFormation, cfd, idCe gems, verbatimsByQuestions: allGems, commentVisTonExperienceEntrepriseRating, + trouverEntrepriseRating, }; return { success: true, body: result }; diff --git a/server/src/utils/temoignages.utils.ts b/server/src/utils/temoignages.utils.ts index 0adc6f26..e64d43b5 100644 --- a/server/src/utils/temoignages.utils.ts +++ b/server/src/utils/temoignages.utils.ts @@ -5,6 +5,7 @@ import { NEW_ANSWER_LABELS_TO_FORMATION_VERBATIM_THEMES, QUESTION_LABELS_BY_QUESTION_KEY, QUESTION_LABELS_BY_QUESTION_KEY, + TROUVER_ENTREPRISE_LABEL_MATCHER, VERBATIM_STATUS, } from "../constants"; @@ -560,3 +561,41 @@ export const getCommentVisTonExperienceEntrepriseRating = (commentVisTonExperien return result; }; + +export const getTrouverEntrepriseRating = (cfaAideTrouverEntreprise, commentTrouverEntreprise) => { + const helpedFromCfa = cfaAideTrouverEntreprise.filter( + (response) => response === "Oui j’ai eu besoin de lui et il m’a aidé" + ); + + const mergedAndFlattenReponses = [...helpedFromCfa, ...commentTrouverEntreprise].flat(); + + const occurrences = mergedAndFlattenReponses.reduce((acc, str) => { + acc[str] = (acc[str] || 0) + 1; + return acc; + }, {}); + + const total = mergedAndFlattenReponses.length; + + let result = Object.entries(occurrences).map(([key, count]) => ({ + label: TROUVER_ENTREPRISE_LABEL_MATCHER[key] || key, + count, + percentage: (count / total) * 100, + })); + + result = result + .sort((a, b) => b.percentage - a.percentage) + .map((item) => { + item.percentage = Math.round(item.percentage); + return item; + }); + + const roundedTotal = result.reduce((sum, item) => sum + item.percentage, 0); + let diff = 100 - roundedTotal; + + for (let i = 0; diff !== 0; i++) { + result[i % result.length].percentage += diff > 0 ? 1 : -1; + diff += diff > 0 ? -1 : 1; + } + + return result; +}; diff --git a/ui/src/assets/images/didYouKnow.svg b/ui/src/assets/images/didYouKnow.svg new file mode 100644 index 00000000..33f05f2d --- /dev/null +++ b/ui/src/assets/images/didYouKnow.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/assets/images/house.svg b/ui/src/assets/images/house.svg new file mode 100644 index 00000000..4c4b1f3a --- /dev/null +++ b/ui/src/assets/images/house.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/src/assets/images/location-france.svg b/ui/src/assets/images/location-france.svg new file mode 100644 index 00000000..d2b47d1e --- /dev/null +++ b/ui/src/assets/images/location-france.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/assets/images/school-small.svg b/ui/src/assets/images/school-small.svg new file mode 100644 index 00000000..5057b0d7 --- /dev/null +++ b/ui/src/assets/images/school-small.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/assets/images/search.svg b/ui/src/assets/images/search.svg new file mode 100644 index 00000000..63c2860a --- /dev/null +++ b/ui/src/assets/images/search.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/ui/src/assets/images/self-training.svg b/ui/src/assets/images/self-training.svg new file mode 100644 index 00000000..109114f9 --- /dev/null +++ b/ui/src/assets/images/self-training.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js b/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js index e1a8568d..aa0638f1 100644 --- a/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js +++ b/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js @@ -53,15 +53,15 @@ const tooltipFormatter = (params, data) => { const getTopLabelPosition = (index, isMobile) => { switch (index) { case 0: - return isMobile ? "100px" : "140px"; + return isMobile ? "100px" : "100px"; case 1: - return isMobile ? "180px" : "210px"; + return isMobile ? "175px" : "160px"; case 2: - return isMobile ? "260px" : "270px"; + return isMobile ? "250px" : "215px"; case 3: - return isMobile ? "335px" : "335px"; + return isMobile ? "325px" : "270px"; case 4: - return isMobile ? "415px" : "395px"; + return isMobile ? "400px" : "320px"; } }; @@ -69,10 +69,25 @@ const chartOptions = (data, isMobile, onChartClick) => { const { labels, bienData, moyenData, malData } = processData(data); return { + title: { + text: "Thématiques", + padding: 0, + top: 0, + textStyle: { + fontFamily: "Marianne", + fontSize: "14px", + fontWeight: "700", + color: "#161616", + textAlign: "left", + }, + }, tooltip: { trigger: "axis", formatter: (params) => tooltipFormatter(params, data), show: isMobile ? false : true, + textStyle: { + fontFamily: "Marianne", + }, axisPointer: { type: "none", shadowStyle: { @@ -85,8 +100,8 @@ const chartOptions = (data, isMobile, onChartClick) => { legend: { data: ["Bien", "Moyen", "Mal"], orient: "horizontal", - right: "0%", - top: "2%", + ...(isMobile ? { left: "0%" } : { right: "0%" }), + top: isMobile ? 30 : 0, itemGap: isMobile ? 30 : 40, textStyle: { fontFamily: "Marianne", @@ -98,9 +113,9 @@ const chartOptions = (data, isMobile, onChartClick) => { grid: { left: isMobile ? 0 : "34%", right: 0, - top: 60, + top: isMobile ? 80 : 25, bottom: 0, - containLabel: isMobile ? false : true, + containLabel: false, }, xAxis: { type: "value", @@ -125,18 +140,18 @@ const chartOptions = (data, isMobile, onChartClick) => { { type: "group", left: 0, - top: isMobile ? 60 : 80, + top: isMobile ? 80 : 40, children: labels.map((label, index) => ({ type: "text", top: getTopLabelPosition(index, isMobile), onclick: () => onChartClick(label), style: { text: label, - fontSize: 16, + fontSize: 14, fontFamily: "Marianne", - fontWeight: isMobile ? "500" : "400", + fontWeight: "400", fill: "#161616", - width: isMobile ? 350 : 230, + width: isMobile ? "100%" : 230, textAlign: "left", cursor: "pointer", overflow: "break", @@ -149,7 +164,8 @@ const chartOptions = (data, isMobile, onChartClick) => { name: "Bien", type: "bar", stack: "total", - barCategoryGap: isMobile ? "40px" : "20px", + barCategoryGap: isMobile ? "40px" : 0, + barWidth: "40px", label: { show: true, position: "inside", @@ -157,9 +173,13 @@ const chartOptions = (data, isMobile, onChartClick) => { fontFamily: "Marianne", fontSize: 12, color: "#161616", + fontWeight: "700", }, itemStyle: { color: "#6FE49D", + borderRadius: [8, 8, 8, 8], + borderWidth: 6, + borderColor: "transparent", }, data: bienData, }, @@ -167,17 +187,22 @@ const chartOptions = (data, isMobile, onChartClick) => { name: "Moyen", type: "bar", stack: "total", - barCategoryGap: isMobile ? "40px" : "20px", + barCategoryGap: isMobile ? "40px" : 0, + barWidth: "40px", label: { show: true, position: "inside", formatter: (params) => (params.value < 8 ? "" : params.value + "%"), fontFamily: "Marianne", fontSize: 12, - color: "#161616", + color: "#FFFFFF", + fontWeight: "700", }, itemStyle: { - color: "#EFCB3A", + color: "#6A6AEC", + borderRadius: [8, 8, 8, 8], + borderWidth: 6, + borderColor: "transparent", }, data: moyenData, }, @@ -185,7 +210,8 @@ const chartOptions = (data, isMobile, onChartClick) => { name: "Mal", type: "bar", stack: "total", - barCategoryGap: isMobile ? "40px" : "20px", + barCategoryGap: isMobile ? "40px" : 0, + barWidth: "40px", label: { show: true, position: "inside", @@ -193,9 +219,13 @@ const chartOptions = (data, isMobile, onChartClick) => { fontFamily: "Marianne", fontSize: 12, color: "#161616", + fontWeight: "700", }, itemStyle: { color: "#FCC0B4", + borderRadius: [8, 8, 8, 8], + borderWidth: 6, + borderColor: "transparent", }, data: malData, }, @@ -213,9 +243,9 @@ const ExperienceEnEntrepriseRating = ({ data, etablissementsCount, setGoToThemat const temoignagesCount = Object.values(data[0].results).reduce((acc, item) => acc + item.count, 0); const tableData = data.map((item) => [ - setGoToThematic(item.label)} key={item.label}> + setGoToThematic(item.label)} key={item.label}> {item.label} - , + , <> {item.results.Bien.percentage}% ({item.results.Bien.count}) , @@ -276,7 +306,7 @@ const ExperienceEnEntrepriseRating = ({ data, etablissementsCount, setGoToThemat {viewType === DATAVIZ_VIEW_TYPES.GRAPHIC ? ( ) : null} {viewType === DATAVIZ_VIEW_TYPES.TABLE ? ( diff --git a/ui/src/iframes/Components/TrouverUneEntrepriseRating.js b/ui/src/iframes/Components/TrouverUneEntrepriseRating.js new file mode 100644 index 00000000..f625f563 --- /dev/null +++ b/ui/src/iframes/Components/TrouverUneEntrepriseRating.js @@ -0,0 +1,92 @@ +import { fr } from "@codegouvfr/react-dsfr"; +import { useState } from "react"; + +import community from "../../assets/images/community.svg"; +import didYouKnow from "../../assets/images/didYouKnow.svg"; +import house from "../../assets/images/house.svg"; +import locationFrance from "../../assets/images/location-france.svg"; +import school from "../../assets/images/school-small.svg"; +import search from "../../assets/images/search.svg"; +import selfTraining from "../../assets/images/self-training.svg"; +import useBreakpoints from "../../hooks/useBreakpoints"; +import { + CardsContainer, + DidYouKnowContainer, + Position, + TrouverEntrepriseCardContainer, + TrouverUneEntrepriseRatingContainer, +} from "./shared.style"; + +const getTrouverEntrepriseIcon = (label) => { + switch (label) { + case "En toute autonomie": + return ; + case "Avec l’aide de l’entourage (famille, amis, etc)": + return ; + case "Avec l’aide du CFA": + case "Avec l’aide de l’ancien établissement": + return ; + case "Autrement (non précisé)": + return ; + case "Avec l’aide d’un éducateur ou d’une association": + return ; + case "Lors d'un événement sur l’orientation": + return ; + } +}; + +const TrouverEntrepriseCard = ({ percentage, count, label, position, seeMore }) => { + const { isMobile } = useBreakpoints(); + const icon = getTrouverEntrepriseIcon(label); + if (position > 3 && !seeMore) return null; + return ( + + {position <= 3 && {position}} + {icon} +
+ {percentage}% ({count}) +
+

{label}

+ + ); +}; + +const TrouverUneEntrepriseRating = ({ data, etablissementsCount }) => { + const [seeMore, setSeeMore] = useState(false); + + return ( + +
+

Pour trouver une entreprise

+ + +
+
Le savais-tu ?
+

+ C’est le rôle du CFA de t’accompagner dans ton intégration et tes premiers pas dans le monde + professionnel. N’hésite pas à le contacter pour trouver une entreprise ! +

+

+ Les entreprises qui recrutent sont aussi sur{" "} + + La Bonne Alternance + +

+
+ +
+

Pour cette formation, les apprentis ont trouvé une entreprise :

+ + {data?.map((item, index) => ( + + ))} + +

setSeeMore((prevValue) => !prevValue)}> + {seeMore ? "Voir moins" : "Voir plus"}{" "} + +

+ + ); +}; + +export default TrouverUneEntrepriseRating; diff --git a/ui/src/iframes/Components/VerbatimsCarousel.js b/ui/src/iframes/Components/VerbatimsCarousel.js index f9c957b8..d19fe6f8 100644 --- a/ui/src/iframes/Components/VerbatimsCarousel.js +++ b/ui/src/iframes/Components/VerbatimsCarousel.js @@ -2,6 +2,7 @@ /* eslint-disable import/no-unresolved */ import "swiper/css"; +import { fr } from "@codegouvfr/react-dsfr"; import { Button } from "@codegouvfr/react-dsfr/Button"; import { useEffect, useState } from "react"; import { Controller, Keyboard } from "swiper/modules"; @@ -21,6 +22,7 @@ import { FeedbackContainer, NavigationContainer, PaginationContainer, + SeeMoreContainer, ThemeLabel, VerbatimContainer, VerbatimContent, @@ -39,7 +41,7 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => { const MAX_CHAR = isMobile ? 150 : 300; - const { mutate: patchVerbatimFeedback, patchedVerbatimFeedback } = usePatchVerbatimFeedback(); + const { mutate: patchVerbatimFeedback } = usePatchVerbatimFeedback(); useEffect(() => { localStorage.setItem("usefullFeedback", JSON.stringify(usefullFeedback)); @@ -63,32 +65,30 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => { return ( setSwiperControl(swiper)} onSlideChange={(swiper) => { - if (swiper.activeIndex > activeIndex) { - trackEvent(MATOMO_CATEGORY.IFRAME_FORMATION, MATOMO_ACTION.CLICK_CAROUSEL_NEXT); - } else if (swiper.activeIndex < activeIndex) { - trackEvent(MATOMO_CATEGORY.IFRAME_FORMATION, MATOMO_ACTION.CLICK_CAROUSEL_PREVIOUS); - } - setActiveIndex(swiperControl?.realIndex); - if (swiperControl?.realIndex !== activeIndex) { + const realIndex = swiper.realIndex; + setActiveIndex(realIndex); + trackEvent( + MATOMO_CATEGORY.IFRAME_FORMATION, + realIndex > activeIndex ? MATOMO_ACTION.CLICK_CAROUSEL_NEXT : MATOMO_ACTION.CLICK_CAROUSEL_PREVIOUS + ); + if (realIndex !== activeIndex) { setExpandedIndex(null); } }} > - + {verbatims.map((verbatim, index) => ( index !== activeIndex ? index > activeIndex @@ -96,13 +96,14 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => { : swiperControl.slidePrev() : null } + style={{ width: "80%" }} > - - - + + + {verbatim.questionLabel} - + {expandedIndex === index ? `« ${verbatim.content} »` : `« ${verbatim.content.substring(0, MAX_CHAR)}${verbatim.content.length > MAX_CHAR ? "..." : ""} »`} @@ -122,7 +123,10 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => { Apprenti·e du {etablissementLabelGetterFromFormation(verbatim)} -{" "} - {new Date(verbatim.createdAt).toLocaleDateString("fr", { month: "long", year: "numeric" })} + {new Date(verbatim.createdAt).toLocaleDateString("fr", { + month: "long", + year: "numeric", + })} { @@ -139,6 +143,22 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => { ))} + + { + setVerbatimsStep(3); + trackEvent(MATOMO_CATEGORY.IFRAME_FORMATION, MATOMO_ACTION.CLICK_CAROUSEL_SEE_MORE); + }} + > + +
Envie d'en lire davantage ?
+

Explorez les témoignages des apprentis classés selon différentes thématiques.

+
+ +
+ + @@ -147,26 +167,19 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => { iconId="fr-icon-arrow-left-s-line" priority="tertiary no outline" onClick={() => swiperControl.slidePrev()} + disabled={activeIndex === 0} />

- {activeIndex + 1} sur {verbatims.length} + {activeIndex + 1} sur {verbatims.length + 1}

); diff --git a/ui/src/iframes/Components/shared.style.js b/ui/src/iframes/Components/shared.style.js index ffa62abf..536b7c0d 100644 --- a/ui/src/iframes/Components/shared.style.js +++ b/ui/src/iframes/Components/shared.style.js @@ -13,17 +13,20 @@ export const NavigationContainer = styled.div` justify-content: center; align-items: center; gap: 1rem; + margin-top: 16px; `; export const VerbatimContainer = styled.div` display: flex; flex-direction: column; align-items: flex-start; - justify-content: flex-start; + justify-content: space-between; gap: 1rem; width: 100%; margin: 16px auto 0px auto; - padding: 0 16px; + padding: 24px 16px; + border: 1px solid var(--border-default-grey); + min-height: ${({ isMobile }) => (isMobile ? "400px;" : "260px")}; & p { margin-bottom: 0; @@ -31,8 +34,8 @@ export const VerbatimContainer = styled.div` `; export const VerbatimContent = styled.p` - font-weight: 500; - font-size: 16px; + font-weight: 400; + font-size: ${({ isMobile }) => (isMobile ? "14px" : "16px")}; line-height: 24px; color: #161616; @@ -41,7 +44,7 @@ export const VerbatimContent = styled.p` cursor: pointer; text-decoration: underline; font-weight: 400; - font-size: 14px; + font-size: ${({ isMobile }) => (isMobile ? "12px" : "14px")}; line-height: 20px; } `; @@ -99,6 +102,7 @@ export const ExperienceEnEntrepriseRatingContainer = styled.div` flex-direction: column; align-items: flex-start; gap: 1rem; + margin: 32px auto 32px auto; } & > div:first-of-type { @@ -138,11 +142,172 @@ export const FeedbackContainer = styled.div` export const ThemeLabel = styled.p` display: flex; - flex-direction: row; + flex-direction: ${({ isMobile }) => (isMobile ? "column" : "row")}; justify-content: flex-start; + align-items: ${({ isMobile }) => (isMobile ? "flex-start" : "center")}; + gap: 0.5rem; + font-size: 16px; + font-weight: 700; + color: var(--text-title-blue-france); +`; + +export const SeeMoreContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: ${({ isMobile }) => (isMobile ? "center" : "flex-start")}; + align-items: flex-start; + padding: 32px 32px 0 32px; + margin: 16px auto 0 auto; + border: 1px solid var(--border-default-grey); + cursor: pointer; + background-color: var(--background-alt-blue-france); + min-height: ${({ isMobile }) => (isMobile ? "calc(400px + 16px)" : "calc(260px + 16px)")}; + color: #161616; + + & span { + width: 26px; + margin-bottom: 8px; + } + + & h6 { + margin: 8px 0 4px 0; + } + + & div { + width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: flex-end; + margin-top: 64px; + + & span { + color: var(--text-title-blue-france); + } + } +`; + +export const TrouverUneEntrepriseRatingContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; align-items: center; gap: 0.5rem; - font-size: 14px; + width: 100%; + margin-top: 16px; + + ${fr.breakpoints.down("sm")} { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + margin: 32px auto 32px auto; + } + + & > div:first-of-type { + display: flex; + flex-direction: column; + } + + & h4 { + margin-bottom: 0; + } + + & p { + margin-bottom: 0; + font-size: 14px; + } + + & > p:first-of-type { + width: 100%; + margin: 16px auto; + } + + & > p:last-of-type { + display: flex; + flex-direction: row; + align-items: flex-start; + text-align: left; + font-weight: 700; + font-size: 14px; + color: var(--background-action-high-blue-france); + cursor: pointer; + } +`; + +export const DidYouKnowContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 1rem; + padding: 16px; + margin-top: 16px; + background-color: var(--background-alt-blue-france); + + ${fr.breakpoints.down("sm")} { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + & h6 { + color: var(--text-title-blue-france); + margin: 0 0 8px 0; + } + + & div p:last-of-type { + color: #000091; + font-weight: 700; + } +`; + +export const CardsContainer = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + margin: 0 0 16px 0; + gap: 16px; + width: 100%; +`; + +export const TrouverEntrepriseCardContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin: 0; + width: ${({ isMobile }) => (isMobile ? "100%" : "calc(33% - 8px)")}; + border: 1px solid var(--border-default-grey); + height: ${({ isMobile }) => (isMobile ? "100%" : "160px")}; + padding: 16px; + position: relative; + + & img { + width: 40px; + height: 40px; + } + + & h5 { + color: var(--text-title-blue-france); + margin: 0; + & span { + font-size: 14px; + font-weight: 400; + } + } +`; + +export const Position = styled.span` + font-size: 20px; font-weight: 700; color: var(--text-title-blue-france); + position: absolute; + top: 0; + right: 0; + color: white; + background-color: var(--background-action-high-blue-france); + width: 28px; + text-align: center; + padding: 2px 0; `; diff --git a/ui/src/iframes/IframeFormation.style.js b/ui/src/iframes/IframeFormation.style.js index d1c25b54..e139031c 100644 --- a/ui/src/iframes/IframeFormation.style.js +++ b/ui/src/iframes/IframeFormation.style.js @@ -10,6 +10,14 @@ export const IframeContainer = styled.main` line-height: 24px; margin-bottom: 16px; } + + & > p:last-child { + margin: 22px 0; + font-size: 12px; + color: var(--text-mention-grey); + width: 100%; + text-align: right; + } `; export const DatavisualisationContainer = styled.div` @@ -238,7 +246,7 @@ export const TitleContainer = styled.div` gap: 1rem; } - & h3 { + & h2 { margin: 0; } `; @@ -246,9 +254,9 @@ export const TitleContainer = styled.div` export const ConstructionNotice = styled.div` display: flex; flex-direction: row; - align-items: center; + align-items: flex-start; justify-content: flex-start; - background-color: var(--background-action-low-blue-france); + background-color: var(--background-alt-grey); padding: 12px; gap: 8px; border-radius: 4px; @@ -263,5 +271,6 @@ export const ConstructionNotice = styled.div` margin: 0; line-height: 24px; font-size: 14px; + color: var(--text-default-grey); } `; diff --git a/ui/src/iframes/IframeFormationPage.js b/ui/src/iframes/IframeFormationPage.js index 2705a955..8468dd1e 100644 --- a/ui/src/iframes/IframeFormationPage.js +++ b/ui/src/iframes/IframeFormationPage.js @@ -10,8 +10,8 @@ import BeatLoader from "react-spinners/BeatLoader"; import { LoaderContainer } from "../campagnes/styles/shared.style"; import useFetchDatavisualisationFormation from "../hooks/useFetchDatavisualisationFormation"; import useMatomoEvent from "../hooks/useMatomoEvent"; -import { MATOMO_ACTION, MATOMO_CATEGORY } from "../matomo"; import ExperienceEnEntrepriseRating from "./Components/ExperienceEnEntrepriseRating"; +import TrouverUneEntrepriseRating from "./Components/TrouverUneEntrepriseRating"; import { VerbatimsCarousel } from "./Components/VerbatimsCarousel"; import VerbatimsQuestions from "./Components/VerbatimsQuestions"; import VerbatimsThematics from "./Components/VerbatimsThematics"; @@ -22,7 +22,6 @@ const IframeFormationPage = () => { const [goToThematic, setGoToThematic] = useState(null); const scrollableRef = useRef(null); const { search } = useLocation(); - const trackEvent = useMatomoEvent(); const intituleFormation = new URLSearchParams(search).get("intitule"); const cfd = new URLSearchParams(search).get("cfd"); @@ -81,27 +80,19 @@ const IframeFormationPage = () => { -

Témoignages d'apprentis

+

Témoignages d'apprentis

Beta {verbatimsStep === 1 ? (

- Tu hésites entre la voie scolaire et l'apprentissage ? Grace au questionnaire{" "} - trackEvent(MATOMO_CATEGORY.IFRAME_FORMATION, MATOMO_ACTION.CLICK_SIRIUS_LINK)} - > - Sirius - - , les apprentis qui se forment en France te partagent leur expérience. + Tu hésites entre la voie scolaire et l'apprentissage ? Les apprentis qui se forment en France te partagent + leur expérience authentique.

) : null} - +

Ce service est en cours de construction. Les résultats ne sont pas encore représentatifs de l'ensemble des établissements et formations. @@ -127,11 +118,21 @@ const IframeFormationPage = () => { setVerbatimsStep={setVerbatimsStep} /> ) : null} + +

+ Données collectées avec le questionnaire{" "} + + Sirius + +

)