From 8e51237e81605f427539272e53dd612a027e06a0 Mon Sep 17 00:00:00 2001
From: Sonny Klotz <sonny.klotz@octo.com>
Date: Fri, 11 Oct 2024 10:32:09 +0200
Subject: [PATCH] feat(campagne): affiche une sous-section -En savoir plus-
 placeholder

---
 .../CampagneApprentissageEntreprises.test.tsx | 15 +++++-
 .../CampagneApprentissageEntreprises.tsx      |  8 ++--
 ...InformationSurEmbaucheApprenti.module.scss | 47 +++++++++++++++++++
 .../NewInformationSurEmbaucheApprenti.tsx     | 27 +++++++++++
 4 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss
 create mode 100644 src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.tsx

diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx
index 76197c5d6a..99c68fb57d 100644
--- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx
+++ b/src/client/components/features/CampagneApprentissage/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,7 +436,9 @@ 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={[]} />);
 
@@ -444,6 +446,15 @@ describe('CampagneApprentissageEntreprises', () => {
 				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/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx
index 239e7401dd..5ad088a693 100644
--- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx
+++ b/src/client/components/features/CampagneApprentissage/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/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss
new file mode 100644
index 0000000000..8c7cdfaeab
--- /dev/null
+++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/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/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.tsx
new file mode 100644
index 0000000000..33c1e7c47b
--- /dev/null
+++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/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>
+	);
+}