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(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) => { + 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 ( + +
+

+ {emoji('🎉')}{' '} + + Votre inscription est confirmée ! + +

+
+
+ ) } if (i18n.language !== 'fr' || userIsRegistered) { @@ -35,26 +78,23 @@ export default function NewsletterRegister() {
-
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 and access new features in advance.