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

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>

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

apps/builder/src/features/templates/data.ts

@@ -1,136 +0,0 @@
-import { TemplateProps } from './types'
-
-export const templates: TemplateProps[] = [
-  {
-    name: 'Lead Generation',
-    emoji: '🤝',
-    fileName: 'lead-gen.json',
-    category: 'marketing',
-    description:
-      'You are a marketing agency and this bot allows you generate new leads interested in your services',
-  },
-  {
-    name: 'Customer Support',
-    emoji: '😍',
-    fileName: 'customer-support.json',
-    category: 'product',
-    description:
-      'A bot whose job is to collect user feedback: questions, bugs and feature requests.',
-  },
-  {
-    name: 'Quiz',
-    emoji: '🕹️',
-    fileName: 'quiz.json',
-    category: 'marketing',
-    description:
-      'A fun quizz to engage with your users and collect their emails',
-  },
-  {
-    name: 'Lead Scoring',
-    emoji: '🏆',
-    fileName: 'lead-scoring.json',
-    category: 'marketing',
-    description:
-      'Compute a score alongside lead qualification questions to rank your new prospects',
-  },
-  {
-    name: 'Lead magnet',
-    emoji: '🧲',
-    fileName: 'lead-magnet.json',
-    category: 'marketing',
-    description:
-      'Provide a free content to your prospects in exchange for their contact information.',
-  },
-  {
-    name: 'Product recommendation',
-    emoji: '🍫',
-    fileName: 'product-recommendation.json',
-    category: 'marketing',
-    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.',
-    backgroundColor: '#010000',
-  },
-  {
-    name: 'NPS Survey',
-    emoji: '⭐',
-    fileName: 'nps.json',
-    category: 'product',
-    description:
-      'A simple NPS survey to measure your customer satisfaction and improve your product',
-  },
-  {
-    name: 'User Onboarding',
-    emoji: '🧑‍🚀',
-    fileName: 'onboarding.json',
-    category: 'product',
-    description:
-      'A bot that asks for new user information before he start using your product',
-  },
-  {
-    name: 'Digital Product Payment',
-    emoji: '🖼️',
-    fileName: 'digital-product-payment.json',
-    description:
-      'A bot that allows you to sell digital products (ebooks, courses, etc.) and only provide the content after the payment is confirmed',
-  },
-  {
-    name: 'FAQ',
-    emoji: '💬',
-    fileName: 'faq.json',
-    category: 'product',
-    description:
-      'A bot that answers frequently asked questions about your product or service',
-  },
-  {
-    name: 'Movie Recommendation',
-    emoji: '🍿',
-    fileName: 'movie-recommendation.json',
-    description: 'A bot that recommends movies based on the user preferences',
-  },
-  {
-    name: 'Basic ChatGPT',
-    emoji: '🤖',
-    fileName: 'basic-chat-gpt.json',
-    description:
-      'A bot that uses the ChatGPT model to generate responses based on the user input',
-  },
-  {
-    name: 'Audio ChatGPT',
-    emoji: '🤖',
-    fileName: 'audio-chat-gpt.json',
-    description:
-      'An audio AI bot that uses the OpenAI block to generate responses based on the user input',
-    isNew: true,
-  },
-  {
-    name: 'ChatGPT personas',
-    emoji: '🎭',
-    fileName: 'chat-gpt-personas.json',
-    description:
-      'A bot that uses the ChatGPT model to generate responses based on the user input and the selected persona',
-  },
-  {
-    name: 'Lead Gen with AI',
-    emoji: '🦾',
-    fileName: 'lead-gen-ai.json',
-    category: 'marketing',
-    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.',
-  },
-  {
-    name: 'Insurance offer',
-    emoji: '🐶',
-    fileName: 'dog-insurance-offer.json',
-    category: 'marketing',
-    description:
-      'You are a dog insurance company. This bot allows you to collect information about the dog and provide a quote.',
-  },
-  {
-    name: 'OpenAI conditions',
-    emoji: '🧠',
-    fileName: 'openai-conditions.json',
-    isNew: true,
-    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.',
-  },
-]

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'),
+    },
+  ]
+}