🌐 Add i18n-ally config and upgrade next-international

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 = (
-  totalCompleted: number,
-  totalStarts: number
-): string => {
-  if (totalStarts === 0) return 'Not available'
-  return `${Math.round((totalCompleted / totalStarts) * 100)}%`
-}
+const computeCompletionRate =
+  (notAvailableLabel: string) =>
+  (totalCompleted: number, totalStarts: number): string => {
+    if (totalStarts === 0) return notAvailableLabel
+    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>