💌 Modifie l'inscription à la newsletter

Suite à la migration vers SendInBlue.

Je n'ai pas trouvé d'API documentée sur la manière de créer son propre
formulaire, donc j'ai simplement repris l'URL POST de l'iframe proposée
(ce que l'on faisait déjà avec MailChimp me semble-t-il).

mon-entreprise/source/components/NewsletterRegister.tsx

@@ -1,19 +1,62 @@
 import { usePersistingState } from 'Components/utils/persistState'
 import { TrackerContext } from 'Components/utils/withTracker'
-import React, { useContext } from 'react'
+import React, { useContext, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import emoji from 'react-easy-emoji'
+import * as animate from 'Components/ui/animate'
+
+// We don't want to load the full sendinblue iframe, so we reimplement a simple
+// logic to the a HTTP Post request to their URL with the email data.
+const formInfos = {
+	method: 'post',
+	action:
+		'https://b713d5c4.sibforms.com/serve/MUIEAEJui5ynU5AtcKQfxhATKzruDK8yC3YO4M56ltHV6LXHnZPESWHRjwK6Dtp3GgPqu49TljpGSa4Iy-BbaqLArDYDt5mEYtvOkrPD2b5siSNsthqi9kDz8wbljxKSDRbOQztsjyp3InDR1EUrTZJvyAk9YEkXtANb5upeHfN2VTF2m6lRiyOMF9B5VfD6jWGyxJaSNR8gsVQo?isAjax=1'
+}
 
 export default function NewsletterRegister() {
 	const [userIsRegistered, setUserIsRegistered] = usePersistingState(
 		'app::newsletter::registered',
 		false
 	)
+	const formElement = useRef<HTMLFormElement>(null)
+	const [userJustRegistered, setUserJustRegistered] = useState(false)
 	const { t, i18n } = useTranslation()
 	const tracker = useContext(TrackerContext)
 
-	const onSubmit = () => {
-		tracker.push(['trackEvent', 'Newsletter', 'registered'])
-		setTimeout(() => setUserIsRegistered(true), 0)
+	const onSubmit = (evt: React.FormEvent<HTMLFormElement>) => {
+		evt.preventDefault()
+		if (!formElement.current) {
+			return
+		}
+		fetch(formInfos.action, {
+			method: formInfos.method,
+			body: new FormData(formElement.current)
+		}).then(() => {
+			tracker.push(['trackEvent', 'Newsletter', 'registered'])
+			setUserIsRegistered(true)
+			setUserJustRegistered(true)
+		})
+	}
+
+	if (userJustRegistered) {
+		return (
+			<animate.fromBottom>
+				<div
+					className="ui__ light-border"
+					css={`
+						text-align: center;
+						background: var(--lighterColor);
+					`}
+				>
+					<h4>
+						{emoji('🎉')}{' '}
+						<Trans i18nKey="newsletter.register.confirmation">
+							Votre inscription est confirmée !
+						</Trans>
+					</h4>
+				</div>
+			</animate.fromBottom>
+		)
 	}
 
 	if (i18n.language !== 'fr' || userIsRegistered) {
@@ -35,26 +78,23 @@ export default function NewsletterRegister() {
 
 				<form
 					className="footer__registerContainer"
-					action="https://gouv.us13.list-manage.com/subscribe/post?u=732a4d1b0d2e8a1a1fd3d01db&amp;id=f146678e48"
-					method="post"
+					ref={formElement}
 					onSubmit={onSubmit}
-					id="mc-embedded-subscribe-form"
-					name="mc-embedded-subscribe-form"
-					target="_blank"
+					id="sib-form"
 				>
 					<div>
-						<label htmlFor="mce-EMAIL">
+						<label htmlFor="EMAIL">
 							<Trans>Votre adresse e-mail</Trans>
 						</label>
 						<div className="footer__registerField">
-							<input type="email" name="EMAIL" id="mce-EMAIL" />
+							<input type="email" name="EMAIL" id="EMAIL" />
 							<input
 								className="ui__ plain small button"
 								type="submit"
 								value={t("S'inscrire")!}
 								name="subscribe"
-								id="mc-embedded-subscribe"
 							/>
+							<input type="hidden" name="locale" value={i18n.language} />
 						</div>
 					</div>
 				</form>

mon-entreprise/source/locales/ui-en.yaml

@@ -806,6 +806,7 @@ montant à atteindre: minimum value
 multiplicateur: multiplier
 newsletter:
   register:
+    confirmation: Your registration is confirmed!
     description: >
       Subscribe to our monthly newsletter to receive <2>official advice on
       starting a business</2> and access new features in advance.