✨ remplace le champs d'inscription à la newsletter par la possibilité de devenir beta testeur
Johan Girod
parent
801a81360d
commit
587119585a
|
|
@ -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<boolean>(
|
||||
'app::newsletter::registered',
|
||||
false
|
||||
)
|
||||
const formElement = useRef<HTMLFormElement>(null)
|
||||
const [userJustRegistered, setUserJustRegistered] = useState(false)
|
||||
const { i18n } = useTranslation()
|
||||
|
||||
const onSubmit = (evt: React.FormEvent<HTMLFormElement>) => {
|
||||
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 (
|
||||
<FromBottom>
|
||||
<div
|
||||
className="ui__ light-border"
|
||||
css={`
|
||||
text-align: center;
|
||||
background: var(--lighterColor);
|
||||
`}
|
||||
>
|
||||
<h4>
|
||||
<Emoji emoji="🎉" />{' '}
|
||||
<Trans i18nKey="newsletter.register.confirmation">
|
||||
Votre inscription est confirmée !
|
||||
</Trans>
|
||||
</h4>
|
||||
</div>
|
||||
</FromBottom>
|
||||
)
|
||||
}
|
||||
|
||||
if (i18n.language !== 'fr' || userIsRegistered) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ui__ print-display-none">
|
||||
<h2>
|
||||
<Trans i18nKey="newsletter.register.titre">Restez au courant</Trans>
|
||||
</h2>
|
||||
<div className="footer__newsletterContainer">
|
||||
<p>
|
||||
<Trans i18nKey="newsletter.register.description">
|
||||
Inscrivez-vous à notre newsletter pour être informé des nouveautés
|
||||
et accéder aux nouvelles fonctionnalités en avant-première.
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
<form
|
||||
className="footer__registerContainer"
|
||||
ref={formElement}
|
||||
onSubmit={onSubmit}
|
||||
id="sib-form"
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="EMAIL">
|
||||
<Trans>Votre adresse e-mail</Trans>
|
||||
</label>
|
||||
<div className="footer__registerField">
|
||||
<input type="email" name="EMAIL" id="EMAIL" />
|
||||
<button
|
||||
type="submit"
|
||||
name="subscribe"
|
||||
className="ui__ plain small button"
|
||||
>
|
||||
<Trans>S'inscrire</Trans>
|
||||
</button>
|
||||
<input type="hidden" name="locale" value={i18n.language} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="ui__ container">
|
||||
<NewsletterRegister />
|
||||
<hr className="footer__separator" />
|
||||
</div>
|
||||
{language === 'en' && (
|
||||
<p className="ui__ notice" css="text-align: center">
|
||||
This website is provided by the{' '}
|
||||
|
|
@ -113,6 +109,11 @@ export default function Footer() {
|
|||
<Trans>Intégrer nos simulateurs</Trans>
|
||||
</Link>
|
||||
</li>
|
||||
{language === 'fr' && (
|
||||
<li>
|
||||
<InscriptionBetaTesteur />
|
||||
</li>
|
||||
)}
|
||||
{hrefLink.map(({ hrefLang, href }) => (
|
||||
<li key={hrefLang}>
|
||||
<a href={href} style={{ textDecoration: 'underline' }}>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
|
|
@ -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 (
|
||||
<>
|
||||
<button onClick={handleOpen} className="ui__ link-button">
|
||||
Devenir beta-testeur
|
||||
</button>
|
||||
{opened && (
|
||||
<Overlay onClose={handleClose} style={{ textAlign: 'left' }}>
|
||||
<img
|
||||
src={FeedbackSvg}
|
||||
css={`
|
||||
height: auto !important;
|
||||
max-width: 25rem;
|
||||
padding-top: 2rem;
|
||||
`}
|
||||
/>
|
||||
<h2>Votre avis nous intéresse</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p className="ui__ notice">
|
||||
Fréquence : moins d'un email tous les mois
|
||||
</p>
|
||||
<a
|
||||
className="ui__ plain button cta"
|
||||
target="_blank"
|
||||
href="https://b713d5c4.sibforms.com/serve/MUIEACTpgg9LvLVG7P4mkAbGA91OHsC2kuCsR3VlW9bV2m0vliZ31_DvZbtg8R5Lhqzd1Mc1iwuIsBw3FHBDG8Mbr4pjpVSbTzq6SLdox3f41GzWuIsT2IPSZ6x7-wh3ohDNDmHE7wbrenXUnqyPnH8Dm0cP2Hxnrq7T72GzINJR9DWwZd-LsqY2XZrvElFcRz6TlR6l36wGik3X"
|
||||
>
|
||||
S'inscrire sur la liste
|
||||
</a>
|
||||
</Overlay>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -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</2> and access new features in advance.
|
||||
titre: Stay informed
|
||||
|
||||
nextSteps:
|
||||
integration-iframe: <0><0></0> Integrate the web module</0><1>Add this simulator
|
||||
to your website in one click with a simple script.</1>
|
||||
|
|
|
|||
|
|
@ -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></0> Intégrer le module web</0><1>Ajouter ce
|
||||
simulateur sur votre site internet en un clic via un script clé en main.</1>
|
||||
|
|
|
|||
Loading…
Reference in New Issue