🌐 Add i18n-ally config and upgrade next-international

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "i18n-ally.localesPaths": ["apps/builder/src/locales"],
+  "i18n-ally.enabledFrameworks": ["next-international"],
+  "i18n-ally.enabledParsers": ["ts"],
+  "i18n-ally.keystyle": "flat"
+}

apps/builder/package.json

@@ -71,7 +71,7 @@
     "minio": "7.1.1",
     "next": "13.4.3",
     "next-auth": "4.22.1",
-    "next-international": "0.5.3",
+    "next-international": "0.9.5",
     "nextjs-cors": "^2.1.2",
     "nodemailer": "6.9.3",
     "nprogress": "0.2.0",

apps/builder/src/features/analytics/components/StatsCards.tsx

@@ -11,13 +11,12 @@ import {
 import { Stats } from '@typebot.io/schemas'
 import React from 'react'
 
-const computeCompletionRate = (
+const computeCompletionRate =
-  totalCompleted: number,
+  (notAvailableLabel: string) =>
-  totalStarts: number
+  (totalCompleted: number, totalStarts: number): string => {
-): string => {
+    if (totalStarts === 0) return notAvailableLabel
-  if (totalStarts === 0) return 'Not available'
+    return `${Math.round((totalCompleted / totalStarts) * 100)}%`
-  return `${Math.round((totalCompleted / totalStarts) * 100)}%`
+  }
-}
 
 export const StatsCards = ({
   stats,
@@ -48,7 +47,10 @@ export const StatsCards = ({
         <StatLabel>{scopedT('completionRateLabel')}</StatLabel>
         {stats ? (
           <StatNumber>
-            {computeCompletionRate(stats.totalCompleted, stats.totalStarts)}
+            {computeCompletionRate(scopedT('notAvailableLabel'))(
+              stats.totalCompleted,
+              stats.totalStarts
+            )}
           </StatNumber>
         ) : (
           <Skeleton w="50%" h="10px" mt="2" />

apps/builder/src/features/folders/components/TypebotButton.tsx

@@ -149,7 +149,7 @@ export const TypebotButton = ({
           top="27px"
           size="sm"
         >
-          Live
+          {scopedT('live')}
         </Tag>
       )}
       {!isReadOnly && (

apps/builder/src/locales/de.ts

@@ -1,4 +1,6 @@
-export default {
+import { defineLocale } from '.'
+
+export default defineLocale({
   back: 'Zurück',
   'confirmModal.defaultTitle': 'Bist du sicher?',
   'dashboard.header.settingsButton.label': 'Einstellungen & Mitglieder',
@@ -70,6 +72,7 @@ export default {
   'account.myAccount.nameInput.label': 'Name:',
   'analytics.viewsLabel': 'Ansichten',
   'analytics.startsLabel': 'Starts',
+  'analytics.notAvailableLabel': 'Nicht verfügbar',
   'analytics.completionRateLabel': 'Abschlussrate',
   'auth.signin.heading': 'Anmelden',
   'auth.signin.noAccountLabel.preLink': 'Noch kein Konto?',
@@ -119,7 +122,6 @@ export default {
     'Um {type} hinzuzufügen, musst du deinen Tarif aktualisieren',
   'billing.currentSubscription.heading': 'Abonnement',
   'billing.currentSubscription.subheading': 'Aktuelles Workspace-Abonnement:',
-  'billing.currentSubscription.cancelLink': 'Mein Abonnement kündigen',
   'billing.invoices.heading': 'Rechnungen',
   'billing.invoices.empty': 'Keine Rechnungen für diesen Workspace gefunden.',
   'billing.invoices.paidAt': 'Bezahlt am',
@@ -188,4 +190,4 @@ export default {
   'workspace.settings.modal.menu.version.label': 'Version: {version}',
   'workspace.dropdown.newButton.label': 'Neuer Workspace',
   'workspace.dropdown.logoutButton.label': 'Abmelden',
-} as const
+})

apps/builder/src/locales/en.ts

@@ -69,6 +69,7 @@ export default {
   'account.myAccount.nameInput.label': 'Name:',
   'analytics.viewsLabel': 'Views',
   'analytics.startsLabel': 'Starts',
+  'analytics.notAvailableLabel': 'Not available',
   'analytics.completionRateLabel': 'Completion rate',
   'auth.signin.heading': 'Sign In',
   'auth.signin.noAccountLabel.preLink': "Don't have an account?",
@@ -114,7 +115,6 @@ export default {
     'You need to upgrade your plan in order to {type}',
   'billing.currentSubscription.heading': 'Subscription',
   'billing.currentSubscription.subheading': 'Current workspace subscription:',
-  'billing.currentSubscription.cancelLink': 'Cancel my subscription',
   'billing.invoices.heading': 'Invoices',
   'billing.invoices.empty': 'No invoices found for this workspace.',
   'billing.invoices.paidAt': 'Paid at',

apps/builder/src/locales/fr.ts

@@ -1,4 +1,6 @@
-export default {
+import { defineLocale } from '.'
+
+export default defineLocale({
   back: 'Retour',
   'confirmModal.defaultTitle': 'Es-tu sûr ?',
   'dashboard.header.settingsButton.label': 'Paramètres & Membres',
@@ -69,6 +71,7 @@ export default {
   'account.myAccount.nameInput.label': 'Nom:',
   'analytics.viewsLabel': 'Vues',
   'analytics.startsLabel': 'Démarrés',
+  'analytics.notAvailableLabel': 'Non disponible',
   'analytics.completionRateLabel': 'Taux de complétion',
   'auth.signin.heading': 'Se connecter',
   'auth.signin.noAccountLabel.preLink': "Tu n'as pas de compte?",
@@ -116,7 +119,6 @@ export default {
     'Tu dois mettre à niveau ton abonnement pour {type}',
   'billing.currentSubscription.heading': 'Abonnement',
   'billing.currentSubscription.subheading': 'Abonnement actuel du workspace :',
-  'billing.currentSubscription.cancelLink': "Annuler l'abonnement",
   'billing.invoices.heading': 'Factures',
   'billing.invoices.empty': 'Aucune facture trouvée pour ce workspace.',
   'billing.invoices.paidAt': 'Payé le',
@@ -188,4 +190,4 @@ export default {
   'workspace.settings.modal.menu.version.label': 'Version : {version}',
   'workspace.dropdown.newButton.label': 'Nouveau workspace',
   'workspace.dropdown.logoutButton.label': 'Déconnexion',
-} as const
+})

apps/builder/src/locales/index.ts

@@ -7,6 +7,7 @@ export const {
   getLocaleProps,
   useCurrentLocale,
   useChangeLocale,
+  defineLocale,
 } = createI18n({
   en: () => import('./en'),
   fr: () => import('./fr'),

apps/builder/src/locales/pt.ts

@@ -1,4 +1,6 @@
-export default {
+import { defineLocale } from '.'
+
+export default defineLocale({
   back: 'Voltar',
   'confirmModal.defaultTitle': 'Tem certeza?',
   'dashboard.header.settingsButton.label': 'Configurações & Membros',
@@ -70,6 +72,7 @@ export default {
   'account.myAccount.nameInput.label': 'Nome:',
   'analytics.viewsLabel': 'Visualizações',
   'analytics.startsLabel': 'Inícios',
+  'analytics.notAvailableLabel': 'Não disponível',
   'analytics.completionRateLabel': 'Taxa de conclusão',
   'auth.signin.heading': 'Entrar',
   'auth.signin.noAccountLabel.preLink': 'Não tem uma conta?',
@@ -118,7 +121,6 @@ export default {
   'billing.currentSubscription.heading': 'Assinatura',
   'billing.currentSubscription.subheading':
     'Assinatura atual do espaço de trabalho:',
-  'billing.currentSubscription.cancelLink': 'Cancelar minha assinatura',
   'billing.invoices.heading': 'Faturas',
   'billing.invoices.empty':
     'Nenhuma fatura encontrada para este espaço de trabalho.',
@@ -190,4 +192,4 @@ export default {
   'workspace.settings.modal.menu.version.label': 'Versão: {version}',
   'workspace.dropdown.newButton.label': 'Novo espaço de trabalho',
   'workspace.dropdown.logoutButton.label': 'Sair',
-} as const
+})

apps/builder/src/pages/_app.tsx

@@ -19,6 +19,7 @@ import { I18nProvider } from '@/locales'
 import { TypebotProvider } from '@/features/editor/providers/TypebotProvider'
 import { WorkspaceProvider } from '@/features/workspace/WorkspaceProvider'
 import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
+import en from '@/locales/en'
 
 import { initPostHogIfEnabled } from '@/features/telemetry/posthog'
 initPostHogIfEnabled()
@@ -55,7 +56,7 @@ const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <ToastContainer />
-      <I18nProvider locale={pageProps.locale}>
+      <I18nProvider locale={pageProps.locale} fallbackLocale={en}>
         <ChakraProvider theme={customTheme}>
           <SessionProvider session={pageProps.session}>
             <UserProvider>

pnpm-lock.yaml

@@ -207,8 +207,8 @@ importers:
         specifier: 4.22.1
         version: 4.22.1(next@13.4.3)(nodemailer@6.9.3)(react-dom@18.2.0)(react@18.2.0)
       next-international:
-        specifier: 0.5.3
+        specifier: 0.9.5
-        version: 0.5.3(next@13.4.3)(react@18.2.0)
+        version: 0.9.5
       nextjs-cors:
         specifier: ^2.1.2
         version: 2.1.2(next@13.4.3)
@@ -15044,8 +15044,8 @@ packages:
       has: 1.0.3
       side-channel: 1.0.4
 
-  /international-types@0.5.3:
+  /international-types@0.8.0:
-    resolution: {integrity: sha512-itSEB3Ohnxd08OTTp8+y8irFJVOy1cKr1J6tfrhXnpDz9/Oa3dDAUrcbxiWM7jvGmF6+gdTwVCBVUoGG4E9vdg==}
+    resolution: {integrity: sha512-cJwagIBzMG0FTK81TABeSBU0eReIXWmvW18m/URn8ZA+GLoWIcdL43kfjArwHVmZJ1n+IFchsBj8tQLYUqmwnA==}
     dev: false
 
   /interpret@1.4.0:
@@ -17232,16 +17232,11 @@ packages:
       uuid: 8.3.2
     dev: false
 
-  /next-international@0.5.3(next@13.4.3)(react@18.2.0):
+  /next-international@0.9.5:
-    resolution: {integrity: sha512-Nvw0b+ZfXowC6zedqg2UsV0c23gQAmr00v4eSp+XMaT1j9FgH3jSovMk2nyQ51Q23iXVOGMP+Tiftbp4FpXuiw==}
+    resolution: {integrity: sha512-yS6DnuNAK+2EO5KWLgw2FPGwBkQ8gylrG0vNSeJD0/BAHSyIpPCn6E+1KPzawQffB5r6wVP6vHjDoSlUOxWWew==}
-    peerDependencies:
-      next: ^13.0.0 || ^12.0.0 || ^11.0.0
-      react: ^18.0.0 || ^17.0.0
     dependencies:
       client-only: 0.0.1
-      international-types: 0.5.3
+      international-types: 0.8.0
-      next: 13.4.3(@babel/core@7.22.9)(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
       server-only: 0.0.1
     dev: false