🧑‍💻 Migrate to Tolgee (#976)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

### Summary by CodeRabbit

- Refactor: Transitioned to a new translation library (`@tolgee/react`)
across the application, enhancing the localization capabilities and
consistency.
- New Feature: Introduced a JSON configuration file for application
settings, improving customization and flexibility.
- Refactor: Updated SVG attribute naming convention in the
`WhatsAppLogo` component to align with React standards.
- Chore: Adjusted the `.gitignore` file and added a new line at the end.
- Documentation: Added instructions for setting up environment variables
for the Tolgee i18n contribution dev tool, improving the self-hosting
configuration guide.
- Style: Updated the `CollaborationMenuButton` to hide the
`PopoverContent` component by scaling it down to zero.
- Refactor: Simplified error handling logic for fetching and updating
typebots in `TypebotProvider.tsx`, improving code readability and
maintenance.
- Refactor: Removed the dependency on the `parseGroupTitle` function,
simplifying the code in several components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/builder/src/features/auth/components/OnboardingPage.tsx

@@ -13,13 +13,13 @@ import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
 import confetti from 'canvas-confetti'
 import { useUser } from '@/features/account/hooks/useUser'
-import { useI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 import { env } from '@typebot.io/env'
 
 const totalSteps = 5
 
 export const OnboardingPage = () => {
-  const t = useI18n()
+  const { t } = useTranslate()
   const { push, replace } = useRouter()
   const confettiCanvaContainer = useRef<HTMLCanvasElement | null>(null)
   const confettiCanon = useRef<confetti.CreateTypes>()

apps/builder/src/features/auth/components/SignInError.tsx

@@ -1,4 +1,4 @@
-import { useScopedI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 import { Alert } from '@chakra-ui/react'
 
 type Props = {
@@ -6,16 +6,16 @@ type Props = {
 }
 
 export const SignInError = ({ error }: Props) => {
-  const scopedT = useScopedI18n('auth.error')
+  const { t } = useTranslate()
   const errors: Record<string, string> = {
-    Signin: scopedT('default'),
-    OAuthSignin: scopedT('default'),
-    OAuthCallback: scopedT('default'),
-    OAuthCreateAccount: scopedT('email'),
-    EmailCreateAccount: scopedT('default'),
-    Callback: scopedT('default'),
-    OAuthAccountNotLinked: scopedT('oauthNotLinked'),
-    default: scopedT('unknown'),
+    Signin: t('auth.error.default'),
+    OAuthSignin: t('auth.error.default'),
+    OAuthCallback: t('auth.error.default'),
+    OAuthCreateAccount: t('auth.error.email'),
+    EmailCreateAccount: t('auth.error.default'),
+    Callback: t('auth.error.default'),
+    OAuthAccountNotLinked: t('auth.error.oauthNotLinked'),
+    default: t('auth.error.unknown'),
   }
   return (
     <Alert status="error" variant="solid" rounded="md">

apps/builder/src/features/auth/components/SignInForm.tsx

@@ -27,7 +27,7 @@ import { BuiltInProviderType } from 'next-auth/providers'
 import { useToast } from '@/hooks/useToast'
 import { TextLink } from '@/components/TextLink'
 import { SignInError } from './SignInError'
-import { useScopedI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 
 type Props = {
   defaultEmail?: string
@@ -35,7 +35,7 @@ type Props = {
 export const SignInForm = ({
   defaultEmail,
 }: Props & HTMLChakraProps<'form'>) => {
-  const scopedT = useScopedI18n('auth')
+  const { t } = useTranslate()
   const router = useRouter()
   const { status } = useSession()
   const [authLoading, setAuthLoading] = useState(false)
@@ -79,8 +79,8 @@ export const SignInForm = ({
       })
       if (response?.error) {
         showToast({
-          title: scopedT('signinErrorToast.title'),
-          description: scopedT('signinErrorToast.description'),
+          title: t('auth.signinErrorToast.title'),
+          description: t('auth.signinErrorToast.description'),
         })
       } else {
         setIsMagicLinkSent(true)
@@ -88,7 +88,7 @@ export const SignInForm = ({
     } catch {
       showToast({
         status: 'info',
-        description: scopedT('signinErrorToast.tooManyRequests'),
+        description: t('auth.signinErrorToast.tooManyRequests'),
       })
     }
     setAuthLoading(false)
@@ -98,12 +98,12 @@ export const SignInForm = ({
   if (hasNoAuthProvider)
     return (
       <Text>
-        {scopedT('noProvider.preLink')}{' '}
+        {t('auth.noProvider.preLink')}{' '}
         <TextLink
           href="https://docs.typebot.io/self-hosting/configuration"
           isExternal
         >
-          {scopedT('noProvider.link')}
+          {t('auth.noProvider.link')}
         </TextLink>
       </Text>
     )
@@ -114,9 +114,7 @@ export const SignInForm = ({
           <SocialLoginButtons providers={providers} />
           {providers?.email && (
             <>
-              <DividerWithText mt="6">
-                {scopedT('orEmailLabel')}
-              </DividerWithText>
+              <DividerWithText mt="6">{t('auth.orEmailLabel')}</DividerWithText>
               <HStack as="form" onSubmit={handleEmailSubmit}>
                 <Input
                   name="email"
@@ -134,7 +132,7 @@ export const SignInForm = ({
                   }
                   isDisabled={isMagicLinkSent}
                 >
-                  {scopedT('emailSubmitButton.label')}
+                  {t('auth.emailSubmitButton.label')}
                 </Button>
               </HStack>
             </>
@@ -150,8 +148,8 @@ export const SignInForm = ({
             <HStack>
               <AlertIcon />
               <Stack spacing={1}>
-                <Text fontWeight="semibold">{scopedT('magicLink.title')}</Text>
-                <Text fontSize="sm">{scopedT('magicLink.description')}</Text>
+                <Text fontWeight="semibold">{t('auth.magicLink.title')}</Text>
+                <Text fontSize="sm">{t('auth.magicLink.description')}</Text>
               </Stack>
             </HStack>
           </Alert>

apps/builder/src/features/auth/components/SignInPage.tsx

@@ -1,6 +1,6 @@
 import { Seo } from '@/components/Seo'
 import { TextLink } from '@/components/TextLink'
-import { useScopedI18n } from '@/locales'
+import { T, useTranslate } from '@tolgee/react'
 import { VStack, Heading, Text } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import { SignInForm } from './SignInForm'
@@ -11,7 +11,7 @@ type Props = {
 }
 
 export const SignInPage = ({ type }: Props) => {
-  const scopedT = useScopedI18n('auth')
+  const { t } = useTranslate()
   const { query } = useRouter()
 
   return (
@@ -19,8 +19,8 @@ export const SignInPage = ({ type }: Props) => {
       <Seo
         title={
           type === 'signin'
-            ? scopedT('signin.heading')
-            : scopedT('register.heading')
+            ? t('auth.signin.heading')
+            : t('auth.register.heading')
         }
       />
       <Heading
@@ -29,39 +29,36 @@ export const SignInPage = ({ type }: Props) => {
         }}
       >
         {type === 'signin'
-          ? scopedT('signin.heading')
-          : scopedT('register.heading')}
+          ? t('auth.signin.heading')
+          : t('auth.register.heading')}
       </Heading>
       {type === 'signin' ? (
         <Text>
-          {scopedT('signin.noAccountLabel.preLink')}{' '}
+          {t('auth.signin.noAccountLabel.preLink')}{' '}
           <TextLink href="/register">
-            {scopedT('signin.noAccountLabel.link')}
+            {t('auth.signin.noAccountLabel.link')}
           </TextLink>
         </Text>
       ) : (
         <Text>
-          {scopedT('register.alreadyHaveAccountLabel.preLink')}{' '}
+          {t('auth.register.alreadyHaveAccountLabel.preLink')}{' '}
           <TextLink href="/signin">
-            {scopedT('register.alreadyHaveAccountLabel.link')}
+            {t('auth.register.alreadyHaveAccountLabel.link')}
           </TextLink>
         </Text>
       )}
       <SignInForm defaultEmail={query.g?.toString()} />
       {type === 'signup' ? (
         <Text fontSize="sm" maxW="400px" textAlign="center">
-          {scopedT('register.aggreeToTerms', {
-            termsOfService: (
-              <TextLink href={'https://typebot.io/terms-of-service'}>
-                {scopedT('register.termsOfService')}
-              </TextLink>
-            ),
-            privacyPolicy: (
-              <TextLink href={'https://typebot.io/privacy-policies'}>
-                {scopedT('register.privacyPolicy')}
-              </TextLink>
-            ),
-          })}
+          <T
+            keyName="auth.register.aggreeToTerms"
+            params={{
+              terms: <TextLink href={'https://typebot.io/terms-of-service'} />,
+              privacy: (
+                <TextLink href={'https://typebot.io/privacy-policies'} />
+              ),
+            }}
+          />
         </Text>
       ) : null}
     </VStack>

apps/builder/src/features/auth/components/SocialLoginButtons.tsx

@@ -15,7 +15,7 @@ import { omit } from '@typebot.io/lib'
 import { AzureAdLogo } from '@/components/logos/AzureAdLogo'
 import { FacebookLogo } from '@/components/logos/FacebookLogo'
 import { GitlabLogo } from '@/components/logos/GitlabLogo'
-import { useScopedI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 
 type Props = {
   providers:
@@ -24,7 +24,7 @@ type Props = {
 }
 
 export const SocialLoginButtons = ({ providers }: Props) => {
-  const scopedT = useScopedI18n('auth.socialLogin')
+  const { t } = useTranslate()
   const { query } = useRouter()
   const { status } = useSession()
   const [authLoading, setAuthLoading] =
@@ -65,7 +65,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('githubButton.label')}
+          {t('auth.socialLogin.githubButton.label')}
         </Button>
       )}
       {providers?.google && (
@@ -79,7 +79,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('googleButton.label')}
+          {t('auth.socialLogin.googleButton.label')}
         </Button>
       )}
       {providers?.facebook && (
@@ -93,7 +93,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('facebookButton.label')}
+          {t('auth.socialLogin.facebookButton.label')}
         </Button>
       )}
       {providers?.gitlab && (
@@ -107,7 +107,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('gitlabButton.label', {
+          {t('auth.socialLogin.gitlabButton.label', {
             gitlabProviderName: providers.gitlab.name,
           })}
         </Button>
@@ -123,7 +123,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('azureButton.label', {
+          {t('auth.socialLogin.azureButton.label', {
             azureProviderName: providers['azure-ad'].name,
           })}
         </Button>
@@ -137,7 +137,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('customButton.label', {
+          {t('auth.socialLogin.customButton.label', {
             customProviderName: providers['custom-oauth'].name,
           })}
         </Button>