From 23fe49f6d344af2d1836d92aa7c16efeb39f33b6 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Thu, 5 Nov 2020 23:45:24 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=8C=20Modifie=20l'inscription=20=C3=A0?=
 =?UTF-8?q?=20la=20newsletter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 .../source/components/NewsletterRegister.tsx  | 64 +++++++++++++++----
 mon-entreprise/source/locales/ui-en.yaml      |  1 +
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/mon-entreprise/source/components/NewsletterRegister.tsx b/mon-entreprise/source/components/NewsletterRegister.tsx
index 177a3ae2a..8a7af806a 100644
--- a/mon-entreprise/source/components/NewsletterRegister.tsx
+++ b/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>
diff --git a/mon-entreprise/source/locales/ui-en.yaml b/mon-entreprise/source/locales/ui-en.yaml
index 94ce58447..009ddf5cb 100644
--- a/mon-entreprise/source/locales/ui-en.yaml
+++ b/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.