feat(campagne): affiche une sous-section -En savoir plus- placeholder

DNUM-SocialGouv · Oct 14, 2024 · 8e51237 · 8e51237
1 parent 7e44854
commit 8e51237
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 5 deletions.
diff --git a/...eApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx b/...eApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx
@@ -424,7 +424,7 @@ describe('CampagneApprentissageEntreprises', () => {
 		  });
 		});
 		describe('Section redirections externes sur l’embauche d’un apprenti', () => {
-			it('masque la sous section pour se renseigner', () => {
+			it('masque la sous-section pour se renseigner', () => {
 				// When
 				render(
 					<DependenciesProvider youtubeService={aVideoService()}>
@@ -436,14 +436,25 @@ describe('CampagneApprentissageEntreprises', () => {
 				const section = screen.queryByRole('region', { name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' });
 				expect(section).not.toBeInTheDocument();
 			});
-			it('masque la sous section pour l’aide financière', () => {
+			// eslint-disable-next-line jest/no-commented-out-tests
+			/* TODO Décommenter quand on aura les éléments pour la sous-section placeholder ci-dessous
+			it('masque la sous-section pour l’aide financière', () => {
 				// When
 				render(<CampagneApprentissageEntreprises videos={[]} />);
 
 				// Then
 				const section = screen.queryByRole('region', { name: 'Vous envisagez de recruter un apprenti\u00A0? Vous pouvez bénéficier d’une aide financière' });
 				expect(section).not.toBeInTheDocument();
 			});
+			*/
+			it('affiche une sous-section placeholder', () => {
+				// When
+				render(<CampagneApprentissageEntreprises videos={[]} />);
+
+				// Then
+				const section = screen.getByRole('region', { name: 'Vous envisagez de recruter un apprenti\u00A0? Vous pouvez bénéficier d’une aide financière' });
+				expect(section).toBeVisible();
+			});
 		});
 	});
 

diff --git a/...mpagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx b/...mpagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx
@@ -6,6 +6,9 @@ import EnSavoirPlusApprentissageEntreprises
 import {
 	InformationSurEmbaucheApprenti,
 } from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti';
+import {
+	NewInformationSurEmbaucheApprenti,
+} from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti';
 import {
 	Raisons,
 	RaisonsDeChoisirApprentissage,
@@ -153,9 +156,8 @@ export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissa
 					</Container>
 				</section>
 			)}
-			{(!campagneApprentissageEstEnCours &&
-				<InformationSurEmbaucheApprenti />
-			)}
+			{(campagneApprentissageEstEnCours ? <NewInformationSurEmbaucheApprenti /> :
+				<InformationSurEmbaucheApprenti />)}
 		</>
 	);
 }
diff --git a/...treprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss b/...treprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss
@@ -0,0 +1,47 @@
+@use '@styles/utilities-deprecated';
+
+.informationSurEmbauche {
+
+  & .aideFinanciere {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 1.75rem 1rem;
+
+    @include utilities-deprecated.media(large) {
+      gap: 2.5rem;
+      padding: 5rem 1rem
+    }
+
+    & span {
+      display: inline-block;
+    }
+  }
+
+  & h2 {
+    @extend %subheading;
+    color: utilities-deprecated.$color-primary;
+    flex-grow: 1;
+
+    @include utilities-deprecated.media(large) {
+      text-align: center;
+    }
+  }
+
+  & .description {
+    @include utilities-deprecated.media(large) {
+      text-align: center;
+    }
+  }
+
+  & .link {
+    max-width: 60ch;
+    width: 100%;
+    justify-content: center;
+    align-self: center;
+
+    @include utilities-deprecated.media(large) {
+      max-width: fit-content;
+    }
+  }
+}
diff --git a/...issageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.tsx b/...issageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import styles
+	from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss';
+import { Container } from '~/client/components/layouts/Container/Container';
+import { Link } from '~/client/components/ui/Link/Link';
+
+export function NewInformationSurEmbaucheApprenti() {
+	const enSavoirPlusSurAideLink = 'https://travail-emploi.gouv.fr/formation-professionnelle/entreprise-et-alternance/aides-au-recrutement-d-un-alternant/article/aide-2023-aux-employeurs-qui-recrutent-en-alternance';
+
+	return (
+		<Container className={styles.informationSurEmbauche}>
+			<section aria-labelledby={'titre-section-aide'} className={styles.aideFinanciere}>
+				<h2 id={'titre-section-aide'}>
+					Vous envisagez de recruter un apprenti&nbsp;? <span>Vous pouvez bénéficier d’une aide financière</span>
+				</h2>
+				<p className={styles.description}>
+						Cette aide de 6000 euros maximum est versée pour la première année de contrat, jusqu’au niveau master
+				</p>
+				<Link href={enSavoirPlusSurAideLink} appearance={'asSecondaryButton'} className={styles.link}>
+						En savoir plus
+					<Link.Icon />
+				</Link>
+			</section>
+		</Container>
+	);
+}