✨ (editor) Add unpublish and close typebot options

Introducing more menu items on the "Publised" button in the editor. You can now unpublish a typebot and close it to new responses
baptisteArno · Oct 6, 2022 · bfed599 · bfed599 · vercel · Oct 6, 2022
1 parent 7ca97d4
commit bfed599
Show file tree

Hide file tree

Showing 80 changed files with 1,111 additions and 960 deletions.
diff --git a/apps/builder/assets/icons.tsx b/apps/builder/assets/icons.tsx
@@ -489,3 +489,10 @@ export const AlertIcon = (props: IconProps) => (
     <line x1="12" y1="17" x2="12.01" y2="17"></line>
   </Icon>
 )
+
+export const CloudOffIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3"></path>
+    <line x1="1" y1="1" x2="23" y2="23"></line>
+  </Icon>
+)
diff --git a/apps/builder/components/shared/buttons/PublishButton.tsx b/apps/builder/components/shared/buttons/PublishButton.tsx
@@ -12,7 +12,12 @@ import {
   useDisclosure,
   ButtonProps,
 } from '@chakra-ui/react'
-import { ChevronLeftIcon } from 'assets/icons'
+import {
+  ChevronLeftIcon,
+  CloudOffIcon,
+  LockedIcon,
+  UnlockedIcon,
+} from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { InputBlockType } from 'models'
@@ -34,6 +39,9 @@ export const PublishButton = (props: ButtonProps) => {
     restorePublishedTypebot,
     typebot,
     isSavingLoading,
+    updateTypebot,
+    unpublishTypebot,
+    save,
   } = useTypebot()
 
   const hasInputFile = typebot?.groups
@@ -46,6 +54,16 @@ export const PublishButton = (props: ButtonProps) => {
     if (!publishedTypebot) push(`/typebots/${query.typebotId}/share`)
   }
 
+  const closeTypebot = async () => {
+    updateTypebot({ isClosed: true })
+    await save()
+  }
+
+  const openTypebot = async () => {
+    updateTypebot({ isClosed: false })
+    await save()
+  }
+
   return (
     <HStack spacing="1px">
       <ChangePlanModal
@@ -68,33 +86,52 @@ export const PublishButton = (props: ButtonProps) => {
             </Text>
           </Stack>
         }
-        isDisabled={isNotDefined(publishedTypebot)}
+        isDisabled={isNotDefined(publishedTypebot) || isPublished}
       >
         <Button
           colorScheme="blue"
           isLoading={isPublishing || isSavingLoading}
           isDisabled={isPublished}
           onClick={handlePublishClick}
-          borderRightRadius={publishedTypebot && !isPublished ? 0 : undefined}
+          borderRightRadius={publishedTypebot ? 0 : undefined}
           {...props}
         >
-          {isPublished ? 'Published' : 'Publish'}
+          {isPublished
+            ? typebot?.isClosed
+              ? 'Closed'
+              : 'Published'
+            : 'Publish'}
         </Button>
       </Tooltip>
 
-      {publishedTypebot && !isPublished && (
+      {publishedTypebot && (
         <Menu>
           <MenuButton
             as={IconButton}
-            colorScheme="blue"
+            colorScheme={'blue'}
             borderLeftRadius={0}
             icon={<ChevronLeftIcon transform="rotate(-90deg)" />}
-            aria-label="Show published version"
+            aria-label="Show published typebot menu"
             size="sm"
+            isDisabled={isPublishing || isSavingLoading}
           />
           <MenuList>
-            <MenuItem onClick={restorePublishedTypebot}>
-              Restore published version
+            {!isPublished && (
+              <MenuItem onClick={restorePublishedTypebot}>
+                Restore published version
+              </MenuItem>
+            )}
+            {!typebot?.isClosed ? (
+              <MenuItem onClick={closeTypebot} icon={<LockedIcon />}>
+                Close typebot to new responses
+              </MenuItem>
+            ) : (
+              <MenuItem onClick={openTypebot} icon={<UnlockedIcon />}>
+                Reopen typebot to new responses
+              </MenuItem>
+            )}
+            <MenuItem onClick={unpublishTypebot} icon={<CloudOffIcon />}>
+              Unpublish typebot
             </MenuItem>
           </MenuList>
         </Menu>

diff --git a/apps/builder/contexts/TypebotContext/TypebotContext.tsx b/apps/builder/contexts/TypebotContext/TypebotContext.tsx
@@ -44,6 +44,7 @@ import { saveWebhook } from 'services/webhook'
 import { stringify } from 'qs'
 import cuid from 'cuid'
 import { useToast } from 'components/shared/hooks/useToast'
+import { deletePublishedTypebotQuery } from 'services/typebots/deletePublishedTypebotQuery'
 const autoSaveTimeout = 10000
 
 type UpdateTypebotPayload = Partial<{
@@ -55,6 +56,7 @@ type UpdateTypebotPayload = Partial<{
   icon: string
   customDomain: string
   resultsTablePreferences: ResultsTablePreferences
+  isClosed: boolean
 }>
 
 export type SetTypebot = (
@@ -81,6 +83,7 @@ const typebotContext = createContext<
     ) => Promise<void>
     updateTypebot: (updates: UpdateTypebotPayload) => void
     publishTypebot: () => void
+    unpublishTypebot: () => void
     restorePublishedTypebot: () => void
   } & GroupsActions &
     BlocksActions &
@@ -314,6 +317,21 @@ export const TypebotContext = ({
     }
   }
 
+  const unpublishTypebot = async () => {
+    if (!publishedTypebot || !localTypebot) return
+    setIsPublishing(true)
+    const { error } = await deletePublishedTypebotQuery({
+      publishedTypebotId: publishedTypebot.id,
+      typebotId: localTypebot.id,
+    })
+    setIsPublishing(false)
+    if (error) showToast({ description: error.message })
+    mutate({
+      typebot: localTypebot,
+      webhooks: webhooks ?? [],
+    })
+  }
+
   const restorePublishedTypebot = () => {
     if (!publishedTypebot || !localTypebot) return
     setLocalTypebot(parsePublicTypebotToTypebot(publishedTypebot, localTypebot))
@@ -351,6 +369,7 @@ export const TypebotContext = ({
         canUndo,
         canRedo,
         publishTypebot,
+        unpublishTypebot,
         isPublishing,
         isPublished,
         updateTypebot: updateLocalTypebot,

diff --git a/apps/builder/pages/api/publicTypebots/[id].ts b/apps/builder/pages/api/publicTypebots/[id].ts
@@ -2,7 +2,7 @@ import { withSentry } from '@sentry/nextjs'
 import prisma from 'libs/prisma'
 import { InputBlockType, PublicTypebot } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { canPublishFileInput } from 'services/api/dbRules'
+import { canPublishFileInput, canWriteTypebot } from 'services/api/dbRules'
 import { getAuthenticatedUser } from 'services/api/utils'
 import { badRequest, methodNotAllowed, notAuthenticated } from 'utils/api'
 
@@ -32,6 +32,18 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     })
     return res.send({ typebots })
   }
+  if (req.method === 'DELETE') {
+    const publishedTypebotId = req.query.id as string
+    const typebotId = req.query.typebotId as string | undefined
+    if (!typebotId) return badRequest(res, 'typebotId is required')
+    await prisma.publicTypebot.deleteMany({
+      where: {
+        id: publishedTypebotId,
+        typebot: canWriteTypebot(typebotId, user),
+      },
+    })
+    return res.send({ success: true })
+  }
   return methodNotAllowed(res)
 }
 

diff --git a/apps/builder/pages/api/typebots/[typebotId].ts b/apps/builder/pages/api/typebots/[typebotId].ts
@@ -38,15 +38,18 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
 
   if (req.method === 'DELETE') {
-    const typebots = await prisma.typebot.updateMany({
-      where: canWriteTypebot(typebotId, user),
-      data: { isArchived: true },
-    })
     await archiveResults(res)({
       typebotId,
       user,
       resultsFilter: { typebotId },
     })
+    await prisma.publicTypebot.deleteMany({
+      where: { typebot: canWriteTypebot(typebotId, user) },
+    })
+    const typebots = await prisma.typebot.updateMany({
+      where: canWriteTypebot(typebotId, user),
+      data: { isArchived: true },
+    })
     return res.send({ typebots })
   }
   if (req.method === 'PUT') {

diff --git a/apps/builder/playwright/global-setup.ts b/apps/builder/playwright/global-setup.ts
@@ -1,5 +1,5 @@
 import { FullConfig } from '@playwright/test'
-import { setupDatabase, teardownDatabase } from './services/database'
+import { setupDatabase, teardownDatabase } from 'utils/playwright/databaseSetup'
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 require('dotenv').config({ path: '.env' })

diff --git a/apps/builder/playwright/services/browser.ts b/apps/builder/playwright/services/browser.ts
@@ -1,18 +1,5 @@
-import { Page } from '@playwright/test'
-
 export const refreshUser = async () => {
   await fetch('/api/auth/session?update')
   const event = new Event('visibilitychange')
   document.dispatchEvent(event)
 }
-
-export const mockSessionResponsesToOtherUser = async (page: Page) =>
-  page.route('/api/auth/session', (route) => {
-    if (route.request().method() === 'GET') {
-      return route.fulfill({
-        status: 200,
-        body: '{"user":{"id":"otherUserId","name":"James Doe","email":"other-user@email.com","emailVerified":null,"image":"https://avatars.githubusercontent.com/u/16015833?v=4","stripeId":null,"graphNavigation": "TRACKPAD"}}',
-      })
-    }
-    return route.continue()
-  })