(frontend) allow user register to beta feature

I've created a beta form, allowing interested visitors to
register to be a beta user.

This form is yet created with Grist, could be enhance. I'll
investigate using PostHog.
This commit is contained in:
lebaudantoine
2024-11-17 00:27:46 +01:00
committed by aleb_the_flash
parent 4434f0265d
commit 5c48ac100a
4 changed files with 31 additions and 1 deletions

View File

@@ -4,11 +4,15 @@ import thirdSlide from '@/assets/intro-slider/3_resume.png'
import { styled } from '@/styled-system/jsx' import { styled } from '@/styled-system/jsx'
import { css } from '@/styled-system/css' import { css } from '@/styled-system/css'
import { Button } from '@/primitives' import { Button, LinkButton } from '@/primitives'
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react' import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
import { useState } from 'react' import { useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
// todo - extract in a proper env variable
const BETA_USERS_FORM_URL =
'https://grist.numerique.gouv.fr/o/docs/forms/3fFfvJoTBEQ6ZiMi8zsQwX/17'
const Heading = styled('h2', { const Heading = styled('h2', {
base: { base: {
width: 'fit-content', width: 'fit-content',
@@ -116,6 +120,7 @@ const Slide = styled('div', {
const TextAnimation = styled('div', { const TextAnimation = styled('div', {
base: { base: {
display: 'flex', display: 'flex',
alignItems: 'center',
flexDirection: 'column', flexDirection: 'column',
gap: '0.5rem', gap: '0.5rem',
}, },
@@ -137,6 +142,7 @@ const TextAnimation = styled('div', {
type Slide = { type Slide = {
key: string key: string
img: string img: string
isAvailableInBeta?: boolean
} }
// todo - optimize how images are imported // todo - optimize how images are imported
@@ -152,6 +158,7 @@ const SLIDES: Slide[] = [
{ {
key: 'slide3', key: 'slide3',
img: thirdSlide, img: thirdSlide,
isAvailableInBeta: true,
}, },
] ]
@@ -190,6 +197,17 @@ export const IntroSlider = () => {
<TextAnimation visible={index == slideIndex}> <TextAnimation visible={index == slideIndex}>
<Heading>{t(`${slide.key}.title`)}</Heading> <Heading>{t(`${slide.key}.title`)}</Heading>
<Body>{t(`${slide.key}.body`)}</Body> <Body>{t(`${slide.key}.body`)}</Body>
{slide.isAvailableInBeta && (
<LinkButton
href={BETA_USERS_FORM_URL}
tooltip={t('beta.tooltip')}
variant={'primary'}
size={'sm'}
style={{ marginTop: '1rem', width: 'fit-content' }}
>
{t('beta.text')}
</LinkButton>
)}
</TextAnimation> </TextAnimation>
</Slide> </Slide>
))} ))}

View File

@@ -29,6 +29,10 @@
"label": "", "label": "",
"tooltip": "" "tooltip": ""
}, },
"beta": {
"text": "",
"tooltip": ""
},
"next": { "next": {
"label": "", "label": "",
"tooltip": "" "tooltip": ""

View File

@@ -33,6 +33,10 @@
"label": "next", "label": "next",
"tooltip": "next" "tooltip": "next"
}, },
"beta": {
"text": "Join the beta",
"tooltip": "Fill out the form"
},
"slide1": { "slide1": {
"title": "Try Visio to simplify your daily tasks", "title": "Try Visio to simplify your daily tasks",
"body": "Discover an intuitive and accessible solution, designed for all public agents, their partners, and much more.", "body": "Discover an intuitive and accessible solution, designed for all public agents, their partners, and much more.",

View File

@@ -33,6 +33,10 @@
"label": "suivant", "label": "suivant",
"tooltip": "suivant" "tooltip": "suivant"
}, },
"beta": {
"text": "Essayer la beta",
"tooltip": "Accéder au formulaire"
},
"slide1": { "slide1": {
"title": "Essayez Visio pour simplifier votre quotidien", "title": "Essayez Visio pour simplifier votre quotidien",
"body": "Découvrez une solution intuitive et accessible, conçue pour tous les agents publics et leurs partenaires, et bien plus encore.", "body": "Découvrez une solution intuitive et accessible, conçue pour tous les agents publics et leurs partenaires, et bien plus encore.",