🌐 Add templates name and description translation keys (#1120)

## Summary by CodeRabbit - **New Features** - Templates now support multiple languages with the introduction of a translation function for template names, descriptions, and category tags. - **Enhancements** - Improved template naming consistency with capitalization adjustments for clarity.  --------- Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
baptisteArno · Dec 29, 2023 · 5124373 · 5124373 · vercel · Dec 29, 2023
1 parent a235a7a
commit 5124373
Show file tree

Hide file tree

Showing 8 changed files with 238 additions and 142 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "i18n-ally.localesPaths": ["apps/builder/public/locales"],
+  "i18n-ally.localesPaths": ["apps/builder/src/i18n"],
   "i18n-ally.keystyle": "flat",
   "i18n-ally.displayLanguage": "en",
   "i18n-ally.enabledFrameworks": ["custom"],

diff --git a/apps/builder/src/features/templates/components/TemplatesModal.tsx b/apps/builder/src/features/templates/components/TemplatesModal.tsx
@@ -15,7 +15,7 @@ import {
 import { Standard } from '@typebot.io/nextjs'
 import { Typebot } from '@typebot.io/schemas'
 import React, { useCallback, useEffect, useState } from 'react'
-import { templates } from '../data'
+import { useTemplates } from '../hooks/useTemplates'
 import { TemplateProps } from '../types'
 import { useToast } from '@/hooks/useToast'
 import { sendRequest } from '@typebot.io/lib'
@@ -37,6 +37,7 @@ export const TemplatesModal = ({
   const { t } = useTranslate()
   const templateCardBackgroundColor = useColorModeValue('white', 'gray.800')
   const [typebot, setTypebot] = useState<Typebot>()
+  const templates = useTemplates()
   const [selectedTemplate, setSelectedTemplate] = useState<TemplateProps>(
     templates[0]
   )
@@ -50,14 +51,15 @@ export const TemplatesModal = ({
       )
       if (error)
         return showToast({ title: error.name, description: error.message })
-      setTypebot(data as Typebot)
+      setTypebot({ ...(data as Typebot), name: template.name })
     },
     [showToast]
   )
 
   useEffect(() => {
+    if (typebot) return
     fetchTemplate(templates[0])
-  }, [fetchTemplate])
+  }, [fetchTemplate, typebot, templates])
 
   const onUseThisTemplateClick = async () => {
     if (!typebot) return

diff --git a/apps/builder/src/features/templates/data.ts b/apps/builder/src/features/templates/data.ts
diff --git a/apps/builder/src/features/templates/hooks/useTemplates.ts b/apps/builder/src/features/templates/hooks/useTemplates.ts
@@ -0,0 +1,127 @@
+import { TemplateProps } from '../types'
+import { useTranslate } from '@tolgee/react'
+
+export const useTemplates = (): TemplateProps[] => {
+  const { t } = useTranslate()
+
+  return [
+    {
+      name: t('templates.modal.marketing.leadGeneration.name'),
+      emoji: '🤝',
+      fileName: 'lead-gen.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.leadGeneration.description'),
+    },
+    {
+      name: t('templates.modal.product.customerSupport.name'),
+      emoji: '😍',
+      fileName: 'customer-support.json',
+      category: 'product',
+      description: t('templates.modal.product.customerSupport.description'),
+    },
+    {
+      name: t('templates.modal.marketing.quiz.name'),
+      emoji: '🕹️',
+      fileName: 'quiz.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.quiz.description'),
+    },
+    {
+      name: t('templates.modal.marketing.leadScoring.name'),
+      emoji: '🏆',
+      fileName: 'lead-scoring.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.leadScoring.description'),
+    },
+    {
+      name: t('templates.modal.marketing.leadMagnet.name'),
+      emoji: '🧲',
+      fileName: 'lead-magnet.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.leadMagnet.description'),
+    },
+    {
+      name: t('templates.modal.marketing.productRecommendation.name'),
+      emoji: '🍫',
+      fileName: 'product-recommendation.json',
+      category: 'marketing',
+      description: t(
+        'templates.modal.marketing.productRecommendation.description'
+      ),
+      backgroundColor: '#010000',
+    },
+    {
+      name: t('templates.modal.product.npsSurvey.name'),
+      emoji: '⭐',
+      fileName: 'nps.json',
+      category: 'product',
+      description: t('templates.modal.product.npsSurvey.description'),
+    },
+    {
+      name: t('templates.modal.product.userOnboarding.name'),
+      emoji: '🧑‍🚀',
+      fileName: 'onboarding.json',
+      category: 'product',
+      description: t('templates.modal.product.userOnboarding.description'),
+    },
+    {
+      name: t('templates.modal.other.digitalProductPayment.name'),
+      emoji: '🖼️',
+      fileName: 'digital-product-payment.json',
+      description: t('templates.modal.other.digitalProductPayment.description'),
+    },
+    {
+      name: t('templates.modal.product.faq.name'),
+      emoji: '💬',
+      fileName: 'faq.json',
+      category: 'product',
+      description: t('templates.modal.product.faq.description'),
+    },
+    {
+      name: t('templates.modal.other.movieRecommendation.name'),
+      emoji: '🍿',
+      fileName: 'movie-recommendation.json',
+      description: t('templates.modal.other.movieRecommendation.description'),
+    },
+    {
+      name: t('templates.modal.other.basicChatGpt.name'),
+      emoji: '🤖',
+      fileName: 'basic-chat-gpt.json',
+      description: t('templates.modal.other.basicChatGpt.description'),
+    },
+    {
+      name: t('templates.modal.other.audioChatGpt.name'),
+      emoji: '🤖',
+      fileName: 'audio-chat-gpt.json',
+      description: t('templates.modal.other.audioChatGpt.description'),
+      isNew: true,
+    },
+    {
+      name: t('templates.modal.other.chatGptPersonas.name'),
+      emoji: '🎭',
+      fileName: 'chat-gpt-personas.json',
+      description: t('templates.modal.other.chatGptPersonas.description'),
+    },
+    {
+      name: t('templates.modal.marketing.leadGenWithAi.name'),
+      emoji: '🦾',
+      fileName: 'lead-gen-ai.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.leadGenWithAi.description'),
+    },
+    {
+      name: t('templates.modal.marketing.insuranceOffer.name'),
+      emoji: '🐶',
+      fileName: 'dog-insurance-offer.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.insuranceOffer.description'),
+    },
+    {
+      name: t('templates.modal.other.openAiConditions.name'),
+      emoji: '🧠',
+      fileName: 'openai-conditions.json',
+      isNew: true,
+      description: t('templates.modal.other.openAiConditions.description'),
+    },
+  ]
+}
diff --git a/apps/builder/src/i18n/en.json b/apps/builder/src/i18n/en.json
@@ -271,11 +271,46 @@
   "templates.buttons.heading": "Create a new typebot",
   "templates.buttons.importFileButton.label": "Import a file",
   "templates.importFromFileButon.toastError.description": "Failed to parse the file. Are you sure it's a typebot?",
+  "templates.modal.marketing.insuranceOffer.description": "You are a dog insurance company. This bot allows you to collect information about the dog and provide a quote.",
+  "templates.modal.marketing.insuranceOffer.name": "Insurance Offer",
+  "templates.modal.marketing.leadGenWithAi.description": "You are a marketing agency and this bot allows you generate new leads interested in your services. An AI block is used to dig deeper into the user needs.",
+  "templates.modal.marketing.leadGenWithAi.name": "Lead Gen with AI",
+  "templates.modal.marketing.leadGeneration.description": "You are a marketing agency and this bot allows you generate new leads interested in your services.",
+  "templates.modal.marketing.leadGeneration.name": "Lead Generation",
+  "templates.modal.marketing.leadMagnet.description": "Provide a free content to your prospects in exchange for their contact information.",
+  "templates.modal.marketing.leadMagnet.name": "Lead Magnet",
+  "templates.modal.marketing.leadScoring.description": "Compute a score alongside lead qualification questions to rank your new prospects.",
+  "templates.modal.marketing.leadScoring.name": "Lead Scoring",
+  "templates.modal.marketing.productRecommendation.description": "Näak is a company that sells energy bars, hydration mix and recovery prodcuts. This bot helps a visitor choosing the right product. It helps you qualify your lead and provide a personalized recommendation.",
+  "templates.modal.marketing.productRecommendation.name": "Product Recommendation",
+  "templates.modal.marketing.quiz.description": "A fun quiz to engage with your users and collect their emails.",
+  "templates.modal.marketing.quiz.name": "Quiz",
   "templates.modal.menuHeading.marketing": "Marketing",
   "templates.modal.menuHeading.new.tag": "New",
   "templates.modal.menuHeading.other": "Other",
   "templates.modal.menuHeading.product": "Product",
+  "templates.modal.other.audioChatGpt.description": "An audio AI bot that uses the OpenAI block to generate responses based on the user input.",
+  "templates.modal.other.audioChatGpt.name": "Audio ChatGPT",
+  "templates.modal.other.basicChatGpt.description": "A bot that uses the ChatGPT model to generate responses based on the user input.",
+  "templates.modal.other.basicChatGpt.name": "Basic ChatGPT",
+  "templates.modal.other.chatGptPersonas.description": "A bot that uses the ChatGPT model to generate responses based on the user input and the selected persona.",
+  "templates.modal.other.chatGptPersonas.name": "ChatGPT Personas",
+  "templates.modal.other.digitalProductPayment.description": "A bot that allows you to sell digital products (ebooks, courses, etc.) and only provide the content after the payment is confirmed.",
+  "templates.modal.other.digitalProductPayment.name": "Digital Product Payment",
+  "templates.modal.other.movieRecommendation.description": "A bot that recommends movies based on the user preferences.",
+  "templates.modal.other.movieRecommendation.name": "Movie Recommendation",
+  "templates.modal.other.openAiConditions.description": "This is an example of how you can use the OpenAI block to take smart decisions based on the user input and redirect the conversation to the right path.",
+  "templates.modal.other.openAiConditions.name": "OpenAI Conditions",
+  "templates.modal.product.customerSupport.description": "A bot whose job is to collect user feedback: questions, bugs and feature requests.",
+  "templates.modal.product.customerSupport.name": "Customer Support",
+  "templates.modal.product.faq.description": "A bot that answers frequently asked questions about your product or service.",
+  "templates.modal.product.faq.name": "FAQ",
+  "templates.modal.product.npsSurvey.description": "A simple NPS survey to measure your customer satisfaction and improve your product.",
+  "templates.modal.product.npsSurvey.name": "NPS Survey",
+  "templates.modal.product.userOnboarding.description": "A bot that asks for new user information before he start using your product.",
+  "templates.modal.product.userOnboarding.name": "User Onboarding",
   "templates.modal.useTemplateButton.label": "Use this template",
+  "templates.modal.useTemplateButton.labelt": "Use this templatet",
   "timeSince.days": "{count}d ago",
   "timeSince.hours": "{count}h ago",
   "timeSince.minutes": "{count}m ago",

diff --git a/apps/builder/src/i18n/fr.json b/apps/builder/src/i18n/fr.json
@@ -261,10 +261,44 @@
   "templates.buttons.heading": "Créer un nouveau typebot",
   "templates.buttons.importFileButton.label": "Importer un fichier",
   "templates.importFromFileButon.toastError.description": "Échec de l'analyse du fichier. Es-tu sûr que c'est un typebot ?",
+  "templates.modal.marketing.insuranceOffer.description": "Tu représentes une compagnie d'assurance pour chiens. Ce bot te permet de collecter des informations sur le chien et de fournir un devis.",
+  "templates.modal.marketing.insuranceOffer.name": "Offre d'Assurance",
+  "templates.modal.marketing.leadGenWithAi.description": "Tu représentes une agence de marketing et ce bot te permet de générer de nouveaux leads intéressés par tes services. Un bloc IA est utilisé pour approfondir les besoins de l'utilisateur.",
+  "templates.modal.marketing.leadGenWithAi.name": "Lead gen avec IA",
+  "templates.modal.marketing.leadGeneration.description": "Tu représentes une agence de marketing et ce bot te permet de générer de nouveaux leads intéressés par tes services.",
+  "templates.modal.marketing.leadGeneration.name": "Génération de Leads",
+  "templates.modal.marketing.leadMagnet.description": "Fournis un contenu gratuit à tes prospects en échange de leurs contact.",
+  "templates.modal.marketing.leadMagnet.name": "Lead magnet",
+  "templates.modal.marketing.leadScoring.description": "Calcule un score en fonction de questions de qualification des leads pour automatiquement classer tes prospects.",
+  "templates.modal.marketing.leadScoring.name": "Scoring de Leads",
+  "templates.modal.marketing.productRecommendation.description": "Näak est une entreprise qui vend des barres énergétiques, des mélanges d'hydratation et des produits de récupération. Ce bot aide un visiteur à choisir le bon produit. Il t'aide à qualifier votre lead et à fournir une recommandation personnalisée.",
+  "templates.modal.marketing.productRecommendation.name": "Recommandation de Produit",
+  "templates.modal.marketing.quiz.description": "Un quiz amusant pour interagir avec tes utilisateurs et collecter leurs e-mails.",
+  "templates.modal.marketing.quiz.name": "Quiz",
   "templates.modal.menuHeading.marketing": "Marketing",
   "templates.modal.menuHeading.new.tag": "Nouveau",
   "templates.modal.menuHeading.other": "Autre",
   "templates.modal.menuHeading.product": "Produit",
+  "templates.modal.other.audioChatGpt.description": "Un bot audio IA qui utilise le bloc OpenAI pour générer des réponses basées sur les entrées de l'utilisateur.",
+  "templates.modal.other.audioChatGpt.name": "ChatGPT Audio",
+  "templates.modal.other.basicChatGpt.description": "Un bot qui utilise le modèle ChatGPT pour générer des réponses basées sur les entrées de l'utilisateur.",
+  "templates.modal.other.basicChatGpt.name": "ChatGPT Basique",
+  "templates.modal.other.chatGptPersonas.description": "Un bot qui utilise le modèle ChatGPT pour générer des réponses basées sur les entrées de l'utilisateur et la persona sélectionnée.",
+  "templates.modal.other.chatGptPersonas.name": "Personas ChatGPT",
+  "templates.modal.other.digitalProductPayment.description": "Un bot qui te permet de vendre des produits numériques (ebooks, cours, etc.) et de fournir le contenu uniquement après la confirmation du paiement.",
+  "templates.modal.other.digitalProductPayment.name": "Paiement Produit Numérique",
+  "templates.modal.other.movieRecommendation.description": "Un bot qui recommande des films en fonction des préférences de l'utilisateur.",
+  "templates.modal.other.movieRecommendation.name": "Recommandation de Film",
+  "templates.modal.other.openAiConditions.description": "Ceci est un exemple de comment tu peux utiliser le bloc OpenAI pour prendre des décisions intelligentes basées sur les entrées de l'utilisateur et rediriger la conversation dans la bonne direction.",
+  "templates.modal.other.openAiConditions.name": "Conditions OpenAI",
+  "templates.modal.product.customerSupport.description": "Un bot dont le travail est de collecter les retours des utilisateurs : questions, bugs et demandes de fonctionnalités.",
+  "templates.modal.product.customerSupport.name": "Support Client",
+  "templates.modal.product.faq.description": "Un bot qui répond aux questions fréquemment posées sur ton produit ou service.",
+  "templates.modal.product.faq.name": "FAQ",
+  "templates.modal.product.npsSurvey.description": "Une simple enquête NPS pour mesurer la satisfaction de tes clients et améliorer ton produit.",
+  "templates.modal.product.npsSurvey.name": "Enquête NPS",
+  "templates.modal.product.userOnboarding.description": "Un bot qui demande des informations sur les nouveaux utilisateurs avant qu'ils commencent à utiliser ton produit.",
+  "templates.modal.product.userOnboarding.name": "Intégration Utilisateur",
   "templates.modal.useTemplateButton.label": "Utiliser ce modèle",
   "typebots.defaultName": "Mon typebot",
   "upgrade": "Upgrade",