✨(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.
2024-11-17 00:27:46 +01:00
parent 4434f0265d
commit 5c48ac100a
4 changed files with 31 additions and 1 deletions
--- a/src/frontend/src/features/home/components/IntroSlider.tsx
+++ b/src/frontend/src/features/home/components/IntroSlider.tsx
@@ -4,11 +4,15 @@ import thirdSlide from '@/assets/intro-slider/3_resume.png'

 import { styled } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
-import { Button } from '@/primitives'
+import { Button, LinkButton } from '@/primitives'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useState } from 'react'
 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', {
  base: {
    width: 'fit-content',
@@ -116,6 +120,7 @@ const Slide = styled('div', {
 const TextAnimation = styled('div', {
  base: {
    display: 'flex',
+    alignItems: 'center',
    flexDirection: 'column',
    gap: '0.5rem',
  },
@@ -137,6 +142,7 @@ const TextAnimation = styled('div', {
 type Slide = {
  key: string
  img: string
+  isAvailableInBeta?: boolean
 }

 // todo - optimize how images are imported
@@ -152,6 +158,7 @@ const SLIDES: Slide[] = [
  {
    key: 'slide3',
    img: thirdSlide,
+    isAvailableInBeta: true,
  },
 ]

@@ -190,6 +197,17 @@ export const IntroSlider = () => {
              <TextAnimation visible={index == slideIndex}>
                <Heading>{t(`${slide.key}.title`)}</Heading>
                <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>
            </Slide>
          ))}
--- a/src/frontend/src/locales/de/home.json
+++ b/src/frontend/src/locales/de/home.json
@@ -29,6 +29,10 @@
      "label": "",
      "tooltip": ""
    },
+    "beta": {
+      "text": "",
+      "tooltip": ""
+    },
    "next": {
      "label": "",
      "tooltip": ""
--- a/src/frontend/src/locales/en/home.json
+++ b/src/frontend/src/locales/en/home.json
@@ -33,6 +33,10 @@
      "label": "next",
      "tooltip": "next"
    },
+    "beta": {
+      "text": "Join the beta",
+      "tooltip": "Fill out the form"
+    },
    "slide1": {
      "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.",
--- a/src/frontend/src/locales/fr/home.json
+++ b/src/frontend/src/locales/fr/home.json
@@ -33,6 +33,10 @@
      "label": "suivant",
      "tooltip": "suivant"
    },
+    "beta": {
+      "text": "Essayer la beta",
+      "tooltip": "Accéder au formulaire"
+    },
    "slide1": {
      "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.",