From 587119585a9778311c1e127b4f16733067c18c5c Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Mon, 4 Oct 2021 18:03:51 +0200 Subject: [PATCH] =?UTF-8?q?:sparkles:=20remplace=20le=20champs=20d'inscrip?= =?UTF-8?q?tion=20=C3=A0=20la=20newsletter=20par=20la=20possibilit=C3=A9?= =?UTF-8?q?=20de=20devenir=20beta=20testeur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../source/components/NewsletterRegister.tsx | 102 ------------------ .../components/layout/Footer/Footer.css | 50 --------- .../components/layout/Footer/Footer.tsx | 11 +- .../InscriptionBetaTesteur/feedback.svg | 1 + .../Footer/InscriptionBetaTesteur/index.tsx | 54 ++++++++++ mon-entreprise/source/locales/ui-en.yaml | 8 +- mon-entreprise/source/locales/ui-fr.yaml | 7 +- 7 files changed, 63 insertions(+), 170 deletions(-) delete mode 100644 mon-entreprise/source/components/NewsletterRegister.tsx create mode 100644 mon-entreprise/source/components/layout/Footer/InscriptionBetaTesteur/feedback.svg create mode 100644 mon-entreprise/source/components/layout/Footer/InscriptionBetaTesteur/index.tsx diff --git a/mon-entreprise/source/components/NewsletterRegister.tsx b/mon-entreprise/source/components/NewsletterRegister.tsx deleted file mode 100644 index 46d3ff5c9..000000000 --- a/mon-entreprise/source/components/NewsletterRegister.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { usePersistingState } from 'Components/utils/persistState' -import { useRef, useState } from 'react' -import { Trans, useTranslation } from 'react-i18next' -import { FromBottom } from './ui/animate' -import Emoji from './utils/Emoji' - -// 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 { i18n } = useTranslation() - - const onSubmit = (evt: React.FormEvent) => { - evt.preventDefault() - if (!formElement.current) { - return - } - fetch(formInfos.action, { - method: formInfos.method, - body: new FormData(formElement.current), - }).then(() => { - setUserIsRegistered(true) - setUserJustRegistered(true) - }) - } - - if (userJustRegistered) { - return ( - -
-

- {' '} - - Votre inscription est confirmée ! - -

-
- - ) - } - - if (i18n.language !== 'fr' || userIsRegistered) { - return null - } - - return ( -
-

- Restez au courant -

-
-

- - Inscrivez-vous à notre newsletter pour être informé des nouveautés - et accéder aux nouvelles fonctionnalités en avant-première. - -

- -
-
- -
- - - -
-
-
-
-
- ) -} diff --git a/mon-entreprise/source/components/layout/Footer/Footer.css b/mon-entreprise/source/components/layout/Footer/Footer.css index b1aefdc1b..97960bfe7 100644 --- a/mon-entreprise/source/components/layout/Footer/Footer.css +++ b/mon-entreprise/source/components/layout/Footer/Footer.css @@ -13,53 +13,3 @@ #footerIcons a::after { display: none; } -.footer__newsletterContainer { - display: flex; - - justify-content: center; -} -@media (max-width: 800px) { - .footer__newsletterContainer { - flex-wrap: wrap; - } - .footer__registerContainer { - margin-left: 0rem; - margin-top: 1rem; - } -} - -.footer__registerContainer { - display: flex; - margin-left: 1rem; -} -.footer__registerContainer label { - text-transform: uppercase; - font-size: 85%; - color: var(--darkColor); - font-weight: 600; -} -.footer__registerField { - display: flex; - margin: 0.3rem 0; - background: white; - border: 1px solid var(--lightColor); - overflow: hidden; - border-radius: 0.3rem; - align-self: center; -} -.footer__separator { - margin: 1.5rem 0; - border-top: 1px solid var(--lighterColor); - border-bottom: none; -} -.footer__registerField > button[type='submit'] { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; - margin: -1px !important; -} -.footer__registerField > input[type='email'] { - width: 15rem; - padding: 0.3rem 0.6rem; - font-family: inherit; - border: none; -} diff --git a/mon-entreprise/source/components/layout/Footer/Footer.tsx b/mon-entreprise/source/components/layout/Footer/Footer.tsx index 85fbaa534..14239de2f 100644 --- a/mon-entreprise/source/components/layout/Footer/Footer.tsx +++ b/mon-entreprise/source/components/layout/Footer/Footer.tsx @@ -1,6 +1,5 @@ import PageFeedback from 'Components/Feedback' import LegalNotice from 'Components/LegalNotice' -import NewsletterRegister from 'Components/NewsletterRegister' import SocialIcon from 'Components/ui/SocialIcon' import Emoji from 'Components/utils/Emoji' import { SitePathsContext } from 'Components/utils/SitePathsContext' @@ -12,6 +11,7 @@ import styled from 'styled-components' import useSimulatorsData from '../../../pages/Simulateurs/metadata' import { hrefLangLink } from '../../../sitePaths' import './Footer.css' +import InscriptionBetaTesteur from './InscriptionBetaTesteur' import Privacy from './Privacy' const useShowFeedback = () => { @@ -76,10 +76,6 @@ export default function Footer() { )} -
- -
-
{language === 'en' && (

This website is provided by the{' '} @@ -113,6 +109,11 @@ export default function Footer() { Intégrer nos simulateurs + {language === 'fr' && ( +

  • + +
    • + )} {hrefLink.map(({ hrefLang, href }) => (
  • diff --git a/mon-entreprise/source/components/layout/Footer/InscriptionBetaTesteur/feedback.svg b/mon-entreprise/source/components/layout/Footer/InscriptionBetaTesteur/feedback.svg new file mode 100644 index 000000000..50c476ade --- /dev/null +++ b/mon-entreprise/source/components/layout/Footer/InscriptionBetaTesteur/feedback.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/mon-entreprise/source/components/layout/Footer/InscriptionBetaTesteur/index.tsx b/mon-entreprise/source/components/layout/Footer/InscriptionBetaTesteur/index.tsx new file mode 100644 index 000000000..509358d32 --- /dev/null +++ b/mon-entreprise/source/components/layout/Footer/InscriptionBetaTesteur/index.tsx @@ -0,0 +1,54 @@ +import Overlay from 'Components/Overlay' +import { useState } from 'react' +import FeedbackSvg from './feedback.svg' + +export default function InscriptionBetaTesteur() { + const [opened, setOpened] = useState(false) + const handleClose = () => { + setOpened(false) + } + const handleOpen = () => { + setOpened(true) + } + + return ( + <> + + {opened && ( + + +

    Votre avis nous intéresse

    +

    + Inscrivez-vous pour accéder aux nouveautés en avant-première et + donner votre avis sur les évolutions du site et des outils + mon-entreprise. +

    +

    + Vous recevrez des informations sur des ateliers de tests + utilisateurs, des sondages pour donner votre avis, ou encore des + liens pour tester de nouvelles fonctionnalités. +

    +

    + Fréquence : moins d'un email tous les mois +

    +     + S'inscrire sur la liste + + + )} + + ) +} diff --git a/mon-entreprise/source/locales/ui-en.yaml b/mon-entreprise/source/locales/ui-en.yaml index e53f65259..8f6dfa32e 100644 --- a/mon-entreprise/source/locales/ui-en.yaml +++ b/mon-entreprise/source/locales/ui-en.yaml @@ -847,13 +847,7 @@ mensuel: monthly mois: month 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. - titre: Stay informed + nextSteps: integration-iframe: <0><0> Integrate the web module<1>Add this simulator to your website in one click with a simple script. diff --git a/mon-entreprise/source/locales/ui-fr.yaml b/mon-entreprise/source/locales/ui-fr.yaml index 0d8532385..1e2b867ca 100644 --- a/mon-entreprise/source/locales/ui-fr.yaml +++ b/mon-entreprise/source/locales/ui-fr.yaml @@ -576,12 +576,7 @@ listeformejuridique: page: titre: Liste des statuts juridiques pour la création de votre entreprise mensuel: mensuel -newsletter: - register: - confirmation: Votre inscription est confirmée ! - description: Inscrivez-vous à notre newsletter pour être informé des nouveautés - et accéder aux nouvelles fonctionnalités en avant-première. - titre: Restez au courant + nextSteps: integration-iframe: <0><0> Intégrer le module web<1>Ajouter ce simulateur sur votre site internet en un clic via un script clé en main.