🧑‍💻 Migrate to Tolgee

.gitignore

@@ -37,4 +37,4 @@ typebotsToFix.json
 snapshots
 
 .env
-.typebot-build
+.typebot-build

.tolgeerc

@@ -0,0 +1,5 @@
+{
+  "apiUrl": "https://tolgee.server.baptistearno.com",
+  "projectId": "1",
+  "delimiter": null
+}

.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,27 @@
+# An array of strings which contain Language Ids defined by VS Code
+# You can check avaliable language ids here: https://code.visualstudio.com/docs/languages/overview#_language-id
+languageIds:
+  - javascript
+  - typescript
+  - javascriptreact
+  - typescriptreact
+
+# An array of RegExes to find the key usage. **The key should be captured in the first match group**.
+# You should unescape RegEx strings in order to fit in the YAML file
+# To help with this, you can use https://www.freeformatter.com/json-escape.html
+usageMatchRegex:
+  # The following example shows how to detect `t("your.i18n.keys")`
+  # the `{key}` will be placed by a proper keypath matching regex,
+  # you can ignore it and use your own matching rules as well
+  - "[^\\w\\d]t\\([\\s\\n]*'({key})'"
+  - 'keyName="({key})"'
+
+# An array of strings containing refactor templates.
+# The "$1" will be replaced by the keypath specified.
+# Optional: uncomment the following two lines to use
+
+# refactorTemplates:
+#  - i18n.get("$1")
+
+# If set to true, only enables this custom framework (will disable all built-in frameworks)
+monopoly: true

.vscode/settings.json

@@ -1,9 +1,9 @@
 {
-  "i18n-ally.localesPaths": ["apps/builder/src/locales"],
-  "i18n-ally.enabledFrameworks": ["next-international"],
-  "i18n-ally.enabledParsers": ["ts"],
+  "i18n-ally.localesPaths": ["apps/builder/public/locales"],
   "i18n-ally.keystyle": "flat",
   "i18n-ally.displayLanguage": "en",
+  "i18n-ally.enabledFrameworks": ["custom"],
+  "i18n-ally.sortKeys": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },

apps/builder/package.json

@@ -29,6 +29,8 @@
     "@sentry/nextjs": "7.73.0",
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-table": "8.9.3",
+    "@tolgee/format-icu": "^5.13.3",
+    "@tolgee/react": "^5.13.3",
     "@trpc/client": "10.40.0",
     "@trpc/next": "10.40.0",
     "@trpc/react-query": "10.40.0",
@@ -68,7 +70,6 @@
     "micro-cors": "0.1.1",
     "next": "13.5.4",
     "next-auth": "4.22.1",
-    "next-international": "0.9.5",
     "nextjs-cors": "^2.1.2",
     "nodemailer": "6.9.3",
     "nprogress": "0.2.0",

apps/builder/src/components/ConfirmModal.tsx

@@ -8,7 +8,7 @@ import {
   AlertDialogOverlay,
   Button,
 } from '@chakra-ui/react'
-import { useScopedI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 
 type ConfirmDeleteModalProps = {
   isOpen: boolean
@@ -29,7 +29,7 @@ export const ConfirmModal = ({
   onConfirm,
   confirmButtonColor = 'red',
 }: ConfirmDeleteModalProps) => {
-  const scopedT = useScopedI18n('confirmModal')
+  const { t } = useTranslate()
   const [confirmLoading, setConfirmLoading] = useState(false)
   const cancelRef = useRef(null)
 
@@ -54,7 +54,7 @@ export const ConfirmModal = ({
       <AlertDialogOverlay>
         <AlertDialogContent>
           <AlertDialogHeader fontSize="lg" fontWeight="bold">
-            {title ?? scopedT('defaultTitle')}
+            {title ?? t('confirmModal.defaultTitle')}
           </AlertDialogHeader>
 
           <AlertDialogBody>{message}</AlertDialogBody>

apps/builder/src/components/UnlockPlanAlertInfo.tsx

@@ -12,7 +12,7 @@ import {
   ChangePlanModal,
   ChangePlanModalProps,
 } from '@/features/billing/components/ChangePlanModal'
-import { useI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 
 type Props = {
   buttonLabel?: string
@@ -25,7 +25,7 @@ export const UnlockPlanAlertInfo = ({
   excludedPlans,
   ...props
 }: Props) => {
-  const t = useI18n()
+  const { t } = useTranslate()
   const { isOpen, onOpen, onClose } = useDisclosure()
   return (
     <Alert

apps/builder/src/components/logos/WhatsAppLogo.tsx

@@ -5,8 +5,8 @@ export const whatsAppBrandColor = '#25D366'
 export const WhatsAppLogo = (props: IconProps) => (
   <Icon viewBox="0 0 510 513" {...props}>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M435.689 74.468C387.754 26.471 324 0.025 256.071 0C116.098 0 2.18 113.906 2.131 253.916C2.107 298.674 13.808 342.361 36.029 380.862L0 512.459L134.617 477.148C171.704 497.386 213.467 508.039 255.962 508.051H256.071C396.02 508.051 509.951 394.134 509.999 254.123C510.023 186.268 483.638 122.478 435.689 74.48V74.468ZM256.071 465.168H255.986C218.118 465.157 180.97 454.976 148.558 435.751L140.851 431.174L60.965 452.127L82.285 374.238L77.268 366.251C56.143 332.646 44.978 293.804 45.002 253.929C45.051 137.563 139.731 42.883 256.157 42.883C312.53 42.908 365.521 64.886 405.371 104.786C445.224 144.674 467.152 197.713 467.128 254.099C467.078 370.476 372.4 465.157 256.071 465.157V465.168ZM371.839 307.101C365.495 303.923 334.302 288.581 328.481 286.462C322.661 284.343 318.437 283.285 314.211 289.64C309.986 295.997 297.823 310.291 294.121 314.515C290.419 318.753 286.718 319.277 280.374 316.098C274.031 312.92 253.587 306.224 229.345 284.611C210.485 267.784 197.748 247.013 194.048 240.656C190.346 234.301 193.658 230.867 196.823 227.713C199.672 224.865 203.167 220.299 206.345 216.597C209.523 212.895 210.57 210.242 212.688 206.016C214.808 201.778 213.748 198.079 212.166 194.899C210.582 191.722 197.895 160.49 192.598 147.791C187.447 135.421 182.213 137.101 178.329 136.894C174.626 136.711 170.402 136.675 166.165 136.675C161.928 136.675 155.06 138.257 149.24 144.614C143.42 150.968 127.031 166.323 127.031 197.541C127.031 228.761 149.764 258.946 152.942 263.183C156.119 267.42 197.687 331.501 261.331 358.995C276.466 365.533 288.288 369.441 297.506 372.363C312.702 377.197 326.533 376.516 337.466 374.883C349.656 373.058 375.006 359.53 380.29 344.711C385.573 329.893 385.573 317.182 383.991 314.539C382.409 311.898 378.172 310.302 371.828 307.125L371.839 307.101Z"
       fill="currentColor"
     />

apps/builder/src/features/account/components/ApiTokensList.tsx

@@ -25,12 +25,12 @@ import { useApiTokens } from '../hooks/useApiTokens'
 import { ApiTokenFromServer } from '../types'
 import { parseTimeSince } from '@/helpers/parseTimeSince'
 import { deleteApiTokenQuery } from '../queries/deleteApiTokenQuery'
-import { useScopedI18n } from '@/locales'
+import { T, useTranslate } from '@tolgee/react'
 
 type Props = { user: User }
 
 export const ApiTokensList = ({ user }: Props) => {
-  const scopedT = useScopedI18n('account.apiTokens')
+  const { t } = useTranslate()
   const { showToast } = useToast()
   const { apiTokens, isLoading, mutate } = useApiTokens({
     userId: user.id,
@@ -57,10 +57,12 @@ export const ApiTokensList = ({ user }: Props) => {
 
   return (
     <Stack spacing={4}>
-      <Heading fontSize="2xl">{scopedT('heading')}</Heading>
-      <Text>{scopedT('description')}</Text>
+      <Heading fontSize="2xl">{t('account.apiTokens.heading')}</Heading>
+      <Text>{t('account.apiTokens.description')}</Text>
       <Flex justifyContent="flex-end">
-        <Button onClick={onCreateOpen}>{scopedT('createButton.label')}</Button>
+        <Button onClick={onCreateOpen}>
+          {t('account.apiTokens.createButton.label')}
+        </Button>
         <CreateTokenModal
           userId={user.id}
           isOpen={isCreateOpen}
@@ -73,8 +75,8 @@ export const ApiTokensList = ({ user }: Props) => {
         <Table>
           <Thead>
             <Tr>
-              <Th>{scopedT('table.nameHeader')}</Th>
-              <Th w="130px">{scopedT('table.createdHeader')}</Th>
+              <Th>{t('account.apiTokens.table.nameHeader')}</Th>
+              <Th w="130px">{t('account.apiTokens.table.createdHeader')}</Th>
               <Th w="0" />
             </Tr>
           </Thead>
@@ -90,7 +92,7 @@ export const ApiTokensList = ({ user }: Props) => {
                     variant="outline"
                     onClick={() => setDeletingId(token.id)}
                   >
-                    {scopedT('deleteButton.label')}
+                    {t('account.apiTokens.deleteButton.label')}
                   </Button>
                 </Td>
               </Tr>
@@ -118,14 +120,17 @@ export const ApiTokensList = ({ user }: Props) => {
         onClose={() => setDeletingId(undefined)}
         message={
           <Text>
-            {scopedT('deleteConfirmationMessage', {
-              tokenName: (
-                <strong>{apiTokens?.find(byId(deletingId))?.name}</strong>
-              ),
-            })}
+            <T
+              keyName="account.apiTokens.deleteConfirmationMessage"
+              params={{
+                strong: (
+                  <strong>{apiTokens?.find(byId(deletingId))?.name}</strong>
+                ),
+              }}
+            />
           </Text>
         }
-        confirmButtonLabel={scopedT('deleteButton.label')}
+        confirmButtonLabel={t('account.apiTokens.deleteButton.label')}
       />
     </Stack>
   )

apps/builder/src/features/account/components/AppearanceRadioGroup.tsx

@@ -10,30 +10,30 @@ import Image from 'next/image'
 import lightModeIllustration from 'public/images/light-mode.png'
 import darkModeIllustration from 'public/images/dark-mode.png'
 import systemModeIllustration from 'public/images/system-mode.png'
-import { useScopedI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 
 type Props = {
   defaultValue: string
   onChange: (value: string) => void
 }
 
 export const AppearanceRadioGroup = ({ defaultValue, onChange }: Props) => {
-  const scopedT = useScopedI18n('account.preferences.appearance')
+  const { t } = useTranslate()
 
   const appearanceData = [
     {
       value: 'light',
-      label: scopedT('lightLabel'),
+      label: t('account.preferences.appearance.lightLabel'),
       image: lightModeIllustration,
     },
     {
       value: 'dark',
-      label: scopedT('darkLabel'),
+      label: t('account.preferences.appearance.darkLabel'),
       image: darkModeIllustration,
     },
     {
       value: 'system',
-      label: scopedT('systemLabel'),
+      label: t('account.preferences.appearance.systemLabel'),
       image: systemModeIllustration,
     },
   ]

apps/builder/src/features/account/components/CreateTokenModal.tsx

@@ -1,5 +1,5 @@
 import { CopyButton } from '@/components/CopyButton'
-import { useScopedI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 import {
   Modal,
   ModalOverlay,
@@ -33,7 +33,7 @@ export const CreateTokenModal = ({
   onNewToken,
 }: Props) => {
   const inputRef = useRef<HTMLInputElement>(null)
-  const scopedT = useScopedI18n('account.apiTokens.createModal')
+  const { t } = useTranslate()
   const [name, setName] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [newTokenValue, setNewTokenValue] = useState<string>()
@@ -54,14 +54,18 @@ export const CreateTokenModal = ({
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>
-          {newTokenValue ? scopedT('createdHeading') : scopedT('createHeading')}
+          {newTokenValue
+            ? t('account.apiTokens.createModal.createdHeading')
+            : t('account.apiTokens.createModal.createHeading')}
         </ModalHeader>
         <ModalCloseButton />
         {newTokenValue ? (
           <ModalBody as={Stack} spacing="4">
             <Text>
-              {scopedT('copyInstruction')}{' '}
-              <strong>{scopedT('securityWarning')}</strong>
+              {t('account.apiTokens.createModal.copyInstruction')}{' '}
+              <strong>
+                {t('account.apiTokens.createModal.securityWarning')}
+              </strong>
             </Text>
             <InputGroup size="md">
               <Input readOnly pr="4.5rem" value={newTokenValue} />
@@ -72,10 +76,14 @@ export const CreateTokenModal = ({
           </ModalBody>
         ) : (
           <ModalBody as="form" onSubmit={createToken}>
-            <Text mb="4">{scopedT('nameInput.label')}</Text>
+            <Text mb="4">
+              {t('account.apiTokens.createModal.nameInput.label')}
+            </Text>
             <Input
               ref={inputRef}
-              placeholder={scopedT('nameInput.placeholder')}
+              placeholder={t(
+                'account.apiTokens.createModal.nameInput.placeholder'
+              )}
               onChange={(e) => setName(e.target.value)}
             />
           </ModalBody>
@@ -84,7 +92,7 @@ export const CreateTokenModal = ({
         <ModalFooter>
           {newTokenValue ? (
             <Button onClick={onClose} colorScheme="blue">
-              {scopedT('doneButton.label')}
+              {t('account.apiTokens.createModal.doneButton.label')}
             </Button>
           ) : (
             <Button
@@ -93,7 +101,7 @@ export const CreateTokenModal = ({
               isLoading={isSubmitting}
               onClick={createToken}
             >
-              {scopedT('createButton.label')}
+              {t('account.apiTokens.createModal.createButton.label')}
             </Button>
           )}
         </ModalFooter>

apps/builder/src/features/account/components/GraphNavigationRadioGroup.tsx

@@ -1,5 +1,5 @@
 import { MouseIcon, LaptopIcon } from '@/components/icons'
-import { useScopedI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 import {
   HStack,
   Radio,
@@ -18,18 +18,20 @@ export const GraphNavigationRadioGroup = ({
   defaultValue,
   onChange,
 }: Props) => {
-  const scopedT = useScopedI18n('account.preferences.graphNavigation')
+  const { t } = useTranslate()
   const graphNavigationData = [
     {
       value: GraphNavigation.MOUSE,
-      label: scopedT('mouse.label'),
-      description: scopedT('mouse.description'),
+      label: t('account.preferences.graphNavigation.mouse.label'),
+      description: t('account.preferences.graphNavigation.mouse.description'),
       icon: <MouseIcon boxSize="35px" />,
     },
     {
       value: GraphNavigation.TRACKPAD,
-      label: scopedT('trackpad.label'),
-      description: scopedT('trackpad.description'),
+      label: t('account.preferences.graphNavigation.trackpad.label'),
+      description: t(
+        'account.preferences.graphNavigation.trackpad.description'
+      ),
       icon: <LaptopIcon boxSize="35px" />,
     },
   ]

apps/builder/src/features/account/components/MyAccountForm.tsx

@@ -5,10 +5,10 @@ import { ApiTokensList } from './ApiTokensList'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
 import { useUser } from '../hooks/useUser'
 import { TextInput } from '@/components/inputs/TextInput'
-import { useScopedI18n } from '@/locales'
+import { useTranslate } from '@tolgee/react'
 
 export const MyAccountForm = () => {
-  const scopedT = useScopedI18n('account.myAccount')
+  const { t } = useTranslate()
   const { user, updateUser } = useUser()
   const [name, setName] = useState(user?.name ?? '')
   const [email, setEmail] = useState(user?.email ?? '')
@@ -47,29 +47,29 @@ export const MyAccountForm = () => {
               leftIcon={<UploadIcon />}
               onFileUploaded={handleFileUploaded}
             >
-              {scopedT('changePhotoButton.label')}
+              {t('account.myAccount.changePhotoButton.label')}
             </UploadButton>
           )}
           <Text color="gray.500" fontSize="sm">
-            {scopedT('changePhotoButton.specification')}
+            {t('account.myAccount.changePhotoButton.specification')}
           </Text>
         </Stack>
       </HStack>
 
       <TextInput
         defaultValue={name}
         onChange={handleNameChange}
-        label={scopedT('nameInput.label')}
+        label={t('account.myAccount.nameInput.label')}
         withVariableButton={false}
         debounceTimeout={0}
       />
-      <Tooltip label={scopedT('emailInput.disabledTooltip')}>
+      <Tooltip label={t('account.myAccount.emailInput.disabledTooltip')}>
         <span>
           <TextInput
             type="email"
             defaultValue={email}
             onChange={handleEmailChange}
-            label={scopedT('emailInput.label')}
+            label={t('account.myAccount.emailInput.label')}
             withVariableButton={false}
             debounceTimeout={0}
             isDisabled