Skip to content

Commit

Permalink
feat(iframeFormation): add trouver une entreprise
Browse files Browse the repository at this point in the history
  • Loading branch information
yohanngab committed Nov 26, 2024
1 parent 3b0423f commit 53279ea
Show file tree
Hide file tree
Showing 5 changed files with 239 additions and 2 deletions.
3 changes: 3 additions & 0 deletions ui/src/iframes/Components/ExperienceEnEntrepriseRating.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,9 @@ const chartOptions = (data, isMobile, onChartClick) => {
trigger: "axis",
formatter: (params) => tooltipFormatter(params, data),
show: isMobile ? false : true,
textStyle: {
fontFamily: "Marianne",
},
axisPointer: {
type: "none",
shadowStyle: {
Expand Down
92 changes: 92 additions & 0 deletions ui/src/iframes/Components/TrouverUneEntrepriseRating.js
Original file line number Diff line number Diff line change
@@ -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 <img src={selfTraining} alt="" />;
case "Avec l’aide de l’entourage (famille, amis, etc)":
return <img src={house} alt="" />;
case "Avec l’aide du CFA":
case "Avec l’aide de l’ancien établissement":
return <img src={school} alt="" />;
case "Autrement (non précisé)":
return <img src={search} alt="" />;
case "Avec l’aide d’un éducateur ou d’une association":
return <img src={community} alt="" />;
case "Lors d'un événement sur l’orientation":
return <img src={locationFrance} alt="" />;
}
};

const TrouverEntrepriseCard = ({ percentage, count, label, position, seeMore }) => {
const { isMobile } = useBreakpoints();
const icon = getTrouverEntrepriseIcon(label);
if (position > 3 && !seeMore) return null;
return (
<TrouverEntrepriseCardContainer isMobile={isMobile}>
{position <= 3 && <Position>{position}</Position>}
{icon}
<h5>
{percentage}% <span>({count})</span>
</h5>
<p>{label}</p>
</TrouverEntrepriseCardContainer>
);
};

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

return (
<TrouverUneEntrepriseRatingContainer>
<div>
<h4>Pour trouver une entreprise</h4>
<DidYouKnowContainer>
<img src={didYouKnow} alt="" />
<div>
<h6>Le savais-tu ?</h6>
<p>
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 !
</p>
<p>
Les entreprises qui recrutent sont aussi sur{" "}
<a href="https://labonnealternance.apprentissage.beta.gouv.fr/" target="_blank" rel="noreferrer">
La Bonne Alternance
</a>
</p>
</div>
</DidYouKnowContainer>
</div>
<p>Pour cette formation, les apprentis ont trouvé une entreprise : </p>
<CardsContainer>
{data?.map((item, index) => (
<TrouverEntrepriseCard key={item.label} {...item} position={index + 1} seeMore={seeMore} />
))}
</CardsContainer>
<p onClick={() => setSeeMore((prevValue) => !prevValue)}>
{seeMore ? "Voir moins" : "Voir plus"}{" "}
<span className={fr.cx(seeMore ? "fr-icon-arrow-up-s-line" : "fr-icon-arrow-down-s-line")} />
</p>
</TrouverUneEntrepriseRatingContainer>
);
};

export default TrouverUneEntrepriseRating;
125 changes: 125 additions & 0 deletions ui/src/iframes/Components/shared.style.js
Original file line number Diff line number Diff line change
Expand Up @@ -186,3 +186,128 @@ export const SeeMoreContainer = styled.div`
}
}
`;

export const TrouverUneEntrepriseRatingContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
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;
`;
8 changes: 8 additions & 0 deletions ui/src/iframes/IframeFormation.style.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
13 changes: 11 additions & 2 deletions ui/src/iframes/IframeFormationPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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");
Expand Down Expand Up @@ -119,11 +118,21 @@ const IframeFormationPage = () => {
setVerbatimsStep={setVerbatimsStep}
/>
) : null}
<TrouverUneEntrepriseRating
data={datavisualisation?.trouverEntrepriseRating}
etablissementsCount={datavisualisation?.etablissementsCount}
/>
<ExperienceEnEntrepriseRating
data={datavisualisation?.commentVisTonExperienceEntrepriseRating}
etablissementsCount={datavisualisation?.etablissementsCount}
setGoToThematic={setGoToThematic}
/>
<p>
Données collectées avec le questionnaire{" "}
<a href="https://sirius.inserjeunes.beta.gouv.fr/" target="_blank" rel="noreferrer">
Sirius
</a>
</p>
</IframeContainer>
</>
)
Expand Down

0 comments on commit 53279ea

Please sign in to comment.