✨ (template) Add FAQ bot template

apps/builder/components/shared/hooks/useToast.tsx

@@ -1,22 +1,21 @@
 import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/react'
+import { useCallback } from 'react'
 
 export const useToast = () => {
   const toast = useChakraToast()
 
-  const showToast = ({
-    title,
-    description,
-    status = 'error',
-    ...props
-  }: UseToastOptions) => {
-    toast({
-      position: 'bottom-right',
-      description,
-      title,
-      status,
-      ...props,
-    })
-  }
+  const showToast = useCallback(
+    ({ title, description, status = 'error', ...props }: UseToastOptions) => {
+      toast({
+        position: 'bottom-right',
+        description,
+        title,
+        status,
+        ...props,
+      })
+    },
+    [toast]
+  )
 
   return { showToast }
 }

apps/builder/components/templates/TemplatesModal.tsx

@@ -15,7 +15,7 @@ import { ExternalLinkIcon } from 'assets/icons'
 import { TypebotViewer } from 'bot-engine'
 import { useToast } from 'components/shared/hooks/useToast'
 import { Typebot } from 'models'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 import { getViewerUrl, sendRequest } from 'utils'
 import { TemplateProps, templates } from './data'
@@ -35,18 +35,22 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
 
   const { showToast } = useToast()
 
+  const fetchTemplate = useCallback(
+    async (template: TemplateProps) => {
+      setSelectedTemplate(template)
+      const { data, error } = await sendRequest(
+        `/templates/${template.fileName}`
+      )
+      if (error)
+        return showToast({ title: error.name, description: error.message })
+      setTypebot(data as Typebot)
+    },
+    [showToast]
+  )
+
   useEffect(() => {
     fetchTemplate(templates[0])
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const fetchTemplate = async (template: TemplateProps) => {
-    setSelectedTemplate(template)
-    const { data, error } = await sendRequest(`/templates/${template.fileName}`)
-    if (error)
-      return showToast({ title: error.name, description: error.message })
-    setTypebot(data as Typebot)
-  }
+  }, [fetchTemplate])
 
   const onUseThisTemplateClick = () => {
     if (!typebot) return

apps/builder/components/templates/data.ts

@@ -18,8 +18,7 @@ export const templates: TemplateProps[] = [
   {
     name: 'FAQ',
     emoji: '💬',
-    fileName: 'customer-support.json',
-    isComingSoon: true,
+    fileName: 'faq.json',
   },
   {
     name: 'Conversational Resume',