✨ Allow user to share a flow publicly and make it duplicatable

Closes #360

apps/builder/src/features/theme/api/deleteThemeTemplate.ts

@@ -10,7 +10,7 @@ export const deleteThemeTemplate = authenticatedProcedure
   .meta({
     openapi: {
       method: 'DELETE',
-      path: '/themeTemplates/{themeTemplateId}',
+      path: '/v1/themeTemplates/{themeTemplateId}',
       protect: true,
       summary: 'Delete a theme template',
       tags: ['Theme template'],

apps/builder/src/features/theme/api/listThemeTemplates.ts

@@ -10,7 +10,7 @@ export const listThemeTemplates = authenticatedProcedure
   .meta({
     openapi: {
       method: 'GET',
-      path: '/themeTemplates',
+      path: '/v1/themeTemplates',
       protect: true,
       summary: 'List theme templates',
       tags: ['Theme template'],

apps/builder/src/features/theme/api/saveThemeTemplate.ts

@@ -10,7 +10,7 @@ export const saveThemeTemplate = authenticatedProcedure
   .meta({
     openapi: {
       method: 'PUT',
-      path: '/themeTemplates/{themeTemplateId}',
+      path: '/v1/themeTemplates/{themeTemplateId}',
       protect: true,
       summary: 'Save theme template',
       tags: ['Theme template'],

apps/builder/src/features/theme/components/ThemePage.tsx

@@ -4,10 +4,12 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Flex } from '@chakra-ui/react'
 import { Standard } from '@typebot.io/nextjs'
 import { ThemeSideMenu } from './ThemeSideMenu'
+import { TypebotNotFoundPage } from '@/features/editor/components/TypebotNotFoundPage'
 
 export const ThemePage = () => {
-  const { typebot } = useTypebot()
+  const { typebot, is404 } = useTypebot()
 
+  if (is404) return <TypebotNotFoundPage />
   return (
     <Flex overflow="hidden" h="100vh" flexDir="column">
       <Seo title={typebot?.name ? `${typebot.name} | Theme` : 'Theme'} />

apps/builder/src/features/theme/components/ThemeSideMenu.tsx

@@ -7,7 +7,6 @@ import {
   Heading,
   HStack,
   Stack,
-  Tag,
 } from '@chakra-ui/react'
 import { ChatIcon, CodeIcon, DropletIcon, TableIcon } from '@/components/icons'
 import { ChatTheme, GeneralTheme, ThemeTemplate } from '@typebot.io/schemas'
@@ -21,7 +20,7 @@ import { ThemeTemplates } from './ThemeTemplates'
 import { defaultSettings } from '@typebot.io/schemas/features/typebot/settings/constants'
 
 export const ThemeSideMenu = () => {
-  const { typebot, updateTypebot } = useTypebot()
+  const { typebot, updateTypebot, currentUserMode } = useTypebot()
 
   const updateChatTheme = (chat: ChatTheme) =>
     typebot && updateTypebot({ updates: { theme: { ...typebot.theme, chat } } })
@@ -71,31 +70,29 @@ export const ThemeSideMenu = () => {
         Customize the theme
       </Heading>
       <Accordion allowMultiple>
-        <AccordionItem>
-          <AccordionButton py={6}>
-            <HStack flex="1" pl={2}>
-              <TableIcon />
-              <Heading fontSize="lg">
-                <HStack>
-                  <span>Templates</span> <Tag colorScheme="orange">New!</Tag>
-                </HStack>
-              </Heading>
-            </HStack>
-            <AccordionIcon />
-          </AccordionButton>
-          <AccordionPanel pb={12}>
-            {typebot && (
-              <ThemeTemplates
-                selectedTemplateId={
-                  typebot.selectedThemeTemplateId ?? undefined
-                }
-                currentTheme={typebot.theme}
-                workspaceId={typebot.workspaceId}
-                onTemplateSelect={selectedTemplate}
-              />
-            )}
-          </AccordionPanel>
-        </AccordionItem>
+        {currentUserMode === 'write' && (
+          <AccordionItem>
+            <AccordionButton py={6}>
+              <HStack flex="1" pl={2}>
+                <TableIcon />
+                <Heading fontSize="lg">Templates</Heading>
+              </HStack>
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel pb={12}>
+              {typebot && (
+                <ThemeTemplates
+                  selectedTemplateId={
+                    typebot.selectedThemeTemplateId ?? undefined
+                  }
+                  currentTheme={typebot.theme}
+                  workspaceId={typebot.workspaceId}
+                  onTemplateSelect={selectedTemplate}
+                />
+              )}
+            </AccordionPanel>
+          </AccordionItem>
+        )}
         <AccordionItem>
           <AccordionButton py={6}>
             <HStack flex="1" pl={2}>

apps/builder/src/features/theme/theme.spec.ts

@@ -233,7 +233,7 @@ test.describe.parallel('Theme page', () => {
       })
       await page.goto(`/typebots/${typebotId}/theme`)
       await expect(page.getByRole('button', { name: 'Go' })).toBeVisible()
-      await page.getByRole('button', { name: 'Templates New!' }).click()
+      await page.getByRole('button', { name: 'Templates' }).click()
       await page.getByRole('button', { name: 'Save current theme' }).click()
       await page.getByPlaceholder('My template').fill('My awesome theme')
       await page.getByRole('button', { name: 'Save' }).click()