👻 Ressuscite le bloc d'inscription à la newsletter

mon-entreprise/source/components/NewsletterRegister.tsx

@@ -0,0 +1,64 @@
+import { usePersistingState } from 'Components/utils/persistState'
+import { TrackerContext } from 'Components/utils/withTracker'
+import React, { useContext } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+
+export default function NewsletterRegister() {
+	const [userIsRegistered, setUserIsRegistered] = usePersistingState(
+		'app::newsletter::registered',
+		false
+	)
+	const { t, i18n } = useTranslation()
+	const tracker = useContext(TrackerContext)
+
+	const onSubmit = () => {
+		tracker.push(['trackEvent', 'Newsletter', 'registered'])
+		setTimeout(() => setUserIsRegistered(true), 0)
+	}
+
+	if (i18n.language !== 'fr' || userIsRegistered) {
+		return null
+	}
+
+	return (
+		<>
+			<h2>
+				<Trans i18nKey="newsletter.register.titre">Restez informé</Trans>
+			</h2>
+			<div className="footer__newsletterContainer">
+				<p>
+					<Trans i18nKey="newsletter.register.description">
+						Inscrivez-vous à notre newsletter pour être informés des nouveautés
+						accéder aux nouvelles fonctionnalités en avant-première.
+					</Trans>
+				</p>
+
+				<form
+					className="footer__registerContainer"
+					action="https://gouv.us13.list-manage.com/subscribe/post?u=732a4d1b0d2e8a1a1fd3d01db&amp;id=f146678e48"
+					method="post"
+					onSubmit={onSubmit}
+					id="mc-embedded-subscribe-form"
+					name="mc-embedded-subscribe-form"
+					target="_blank"
+				>
+					<div>
+						<label htmlFor="mce-EMAIL">
+							<Trans>Votre adresse e-mail</Trans>
+						</label>
+						<div className="footer__registerField">
+							<input type="email" name="EMAIL" id="mce-EMAIL" />
+							<input
+								className="ui__ plain small button"
+								type="submit"
+								value={t("S'inscrire")!}
+								name="subscribe"
+								id="mc-embedded-subscribe"
+							/>
+						</div>
+					</div>
+				</form>
+			</div>
+		</>
+	)
+}

mon-entreprise/source/components/ui/Button/button.css

@@ -169,6 +169,7 @@
 }
 
 .ui__.small.button {
+	width: inherit;
 	font-size: 90%;
 	line-height: 1.2rem;
 	transition: all 0.08s;

mon-entreprise/source/sites/mon-entreprise.fr/layout/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import PageFeedback from 'Components/Feedback/PageFeedback'
 import LegalNotice from 'Components/LegalNotice'
+import NewsletterRegister from 'Components/NewsletterRegister'
 import SocialIcon from 'Components/ui/SocialIcon'
 import { SitePathsContext } from 'Components/utils/SitePathsContext'
 import React, { useContext } from 'react'
@@ -33,7 +34,7 @@ const useShowFeedback = () => {
 		...Object.values(simulators).map(s => s.path)
 	].includes(currentPath)
 }
-const Footer = () => {
+export default function Footer() {
 	const sitePaths = useContext(SitePathsContext)
 	const showFeedback = useShowFeedback()
 	const hrefLink =
@@ -58,6 +59,10 @@ const Footer = () => {
 			</Helmet>
 			<footer className="footer">
 				{showFeedback && <PageFeedback />}
+				<div className="ui__ container">
+					<NewsletterRegister />
+					<hr className="footer__separator" />
+				</div>
 				{i18n.language === 'en' && (
 					<p className="ui__ notice" css="text-align: center">
 						This website is provided by the{' '}
@@ -123,4 +128,3 @@ const Footer = () => {
 		</div>
 	)
 }
-export default Footer