🌐 Introduce i18n

Only translate dashboard page for now

Closes #322

apps/builder/src/features/dashboard/components/AnnoucementBanner.tsx

@@ -1,37 +0,0 @@
-import { CloseButton, Flex, HStack, StackProps } from '@chakra-ui/react'
-import React, { useEffect, useState } from 'react'
-
-type VerifyEmailBannerProps = { id: string } & StackProps
-
-export const Banner = ({ id, ...props }: VerifyEmailBannerProps) => {
-  const [show, setShow] = useState(false)
-  const localStorageKey = `banner-${id}`
-
-  useEffect(() => {
-    if (!localStorage.getItem(localStorageKey)) setShow(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const handleCloseClick = () => {
-    localStorage.setItem(localStorageKey, 'hide')
-    setShow(false)
-  }
-
-  if (!show) return <></>
-  return (
-    <HStack
-      h="50px"
-      bgColor="blue.400"
-      color="white"
-      justifyContent="center"
-      align="center"
-      w="full"
-      {...props}
-    >
-      <Flex maxW="1000px" justifyContent="space-between" w="full">
-        <HStack>{props.children}</HStack>
-        <CloseButton rounded="full" onClick={handleCloseClick} />
-      </Flex>
-    </HStack>
-  )
-}

apps/builder/src/features/dashboard/components/AnnoucementModal.tsx

@@ -1,70 +0,0 @@
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
-  Text,
-  Stack,
-  Link,
-} from '@chakra-ui/react'
-import React, { useEffect, useState } from 'react'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-}
-
-const localStorageKey = 'typebot-20-modal'
-export const AnnoucementModal = ({ isOpen, onClose }: Props) => {
-  const [show, setShow] = useState(false)
-
-  useEffect(() => {
-    if (!localStorage.getItem(localStorageKey)) setShow(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const handleCloseClick = () => {
-    localStorage.setItem(localStorageKey, 'hide')
-    setShow(false)
-    onClose()
-  }
-
-  if (!show) return <></>
-  return (
-    <Modal isOpen={isOpen} onClose={handleCloseClick} size="2xl">
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>What&apos;s new in Typebot 2.0?</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody as={Stack} spacing="6" pb="10">
-          <Text>Typebo 2.0 has been launched February the 15th 🎉.</Text>
-          <iframe
-            width="620"
-            height="315"
-            src="https://www.youtube.com/embed/u8FZHvlYviw"
-            title="YouTube video player"
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-            style={{ borderRadius: '5px' }}
-          />
-          <Text>
-            Most questions are answered in this{' '}
-            <Link
-              href="https://docs.typebot.io"
-              color="blue.500"
-              textDecor="underline"
-            >
-              FAQ
-            </Link>
-            . If you have other questions, open up the bot on the bottom right
-            corner. 😃
-          </Text>
-          <Text>Baptiste.</Text>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  )
-}

apps/builder/src/features/dashboard/components/DashboardHeader.tsx

@@ -8,8 +8,10 @@ import { isNotDefined } from 'utils'
 import Link from 'next/link'
 import { WorkspaceSettingsModal } from '@/features/workspace'
 import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
+import { useScopedI18n } from '@/locales'
 
 export const DashboardHeader = () => {
+  const scopedT = useScopedI18n('dashboard.header')
   const { user } = useUser()
   const { workspace, switchWorkspace, createWorkspace } = useWorkspace()
 
@@ -52,7 +54,7 @@ export const DashboardHeader = () => {
             onClick={onOpen}
             isLoading={isNotDefined(workspace)}
           >
-            Settings & Members
+            {scopedT('settingsButton.label')}
           </Button>
           <WorkspaceDropdown
             currentWorkspace={workspace}

apps/builder/src/features/dashboard/components/DashboardPage.tsx

@@ -7,6 +7,7 @@ import {
 import { TypebotDndProvider, FolderContent } from '@/features/folders'
 import { ParentModalProvider } from '@/features/graph'
 import { useWorkspace } from '@/features/workspace'
+import { useScopedI18n } from '@/locales'
 import { Stack, VStack, Spinner, Text } from '@chakra-ui/react'
 import { Plan } from 'db'
 import { useRouter } from 'next/router'
@@ -15,6 +16,7 @@ import { guessIfUserIsEuropean } from 'utils/pricing'
 import { DashboardHeader } from './DashboardHeader'
 
 export const DashboardPage = () => {
+  const scopedT = useScopedI18n('dashboard')
   const [isLoading, setIsLoading] = useState(false)
   const { query } = useRouter()
   const { user } = useUser()
@@ -42,7 +44,7 @@ export const DashboardPage = () => {
 
   return (
     <Stack minH="100vh">
-      <Seo title={workspace?.name ?? 'My typebots'} />
+      <Seo title={workspace?.name ?? scopedT('title')} />
       <DashboardHeader />
       {!workspace?.stripeId && (
         <ParentModalProvider>
@@ -57,7 +59,7 @@ export const DashboardPage = () => {
       <TypebotDndProvider>
         {isLoading ? (
           <VStack w="full" justifyContent="center" pt="10" spacing={6}>
-            <Text>You are being redirected...</Text>
+            <Text>{scopedT('redirectionMessage')}</Text>
             <Spinner />
           </VStack>
         ) : (