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

Closes #360

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}>