✨ Add new user onboarding template

Closes #325

apps/builder/src/features/templates/components/TemplatesModal.tsx

@@ -9,6 +9,8 @@ import {
   ModalContent,
   ModalOverlay,
   Stack,
+  Tag,
+  Text,
   Tooltip,
 } from '@chakra-ui/react'
 import { ExternalLinkIcon } from '@/components/icons'
@@ -120,10 +122,18 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                         }
                         isDisabled={template.isComingSoon}
                       >
-                        {template.emoji}{' '}
-                        <chakra.span minW="200px" textAlign="left" ml="3">
-                          {template.name}
-                        </chakra.span>
+                        <HStack justifyContent="space-between" w="full">
+                          <HStack>
+                            <Text>{template.emoji}</Text>
+                            <Text>{template.name}</Text>
+                          </HStack>
+
+                          {template.isNew && (
+                            <Tag colorScheme="orange" size="sm">
+                              New
+                            </Tag>
+                          )}
+                        </HStack>
                       </Button>
                     </span>
                   </Tooltip>

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

@@ -5,6 +5,7 @@ export const templates: TemplateProps[] = [
   { name: 'Customer Support', emoji: '😍', fileName: 'customer-support.json' },
   { name: 'Quiz', emoji: '🕹️', fileName: 'quiz.json' },
   { name: 'Lead Scoring', emoji: '🏆', fileName: 'lead-scoring.json' },
+
   {
     name: 'Digital Product Payment',
     emoji: '🖼️',
@@ -15,16 +16,16 @@ export const templates: TemplateProps[] = [
     emoji: '💬',
     fileName: 'faq.json',
   },
+  {
+    name: 'User Onboarding',
+    emoji: '🧑‍🚀',
+    fileName: 'onboarding.json',
+    isNew: true,
+  },
   {
     name: 'Conversational Resume',
     emoji: '👨‍💼',
     fileName: 'customer-support.json',
     isComingSoon: true,
   },
-  {
-    name: 'User Onboarding',
-    emoji: '🧑‍🚀',
-    fileName: 'customer-support.json',
-    isComingSoon: true,
-  },
 ]

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

@@ -3,4 +3,5 @@ export type TemplateProps = {
   emoji: string
   fileName: string
   isComingSoon?: boolean
+  isNew?: boolean
 }