🚸 (chatwoot) Add close widget task

apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootBlockNodeLabel.tsx

@@ -6,7 +6,9 @@ type Props = {
 }
 
 export const ChatwootBlockNodeLabel = ({ block }: Props) =>
-  block.options.websiteToken.length === 0 ? (
+  block.options.task === 'Close widget' ? (
+    <Text>Close Chatwoot</Text>
+  ) : block.options.websiteToken.length === 0 ? (
     <Text color="gray.500">Configure...</Text>
   ) : (
     <Text>Open Chatwoot</Text>

apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettingsForm.tsx

@@ -1,3 +1,4 @@
+import { DropdownList } from '@/components/DropdownList'
 import { TextInput } from '@/components/inputs'
 import {
   Accordion,
@@ -7,7 +8,7 @@ import {
   AccordionPanel,
   Stack,
 } from '@chakra-ui/react'
-import { ChatwootOptions } from 'models'
+import { ChatwootOptions, chatwootTasks } from 'models'
 import React from 'react'
 
 type Props = {
@@ -16,83 +17,100 @@ type Props = {
 }
 
 export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
+  const updateTask = (task: (typeof chatwootTasks)[number]) => {
+    onOptionsChange({ ...options, task })
+  }
+
   return (
     <Stack spacing={4}>
-      <TextInput
+      <DropdownList
-        isRequired
+        currentItem={options.task ?? 'Show widget'}
-        label="Base URL"
+        onItemSelect={updateTask}
-        defaultValue={options.baseUrl}
+        items={chatwootTasks}
-        onChange={(baseUrl: string) => {
-          onOptionsChange({ ...options, baseUrl })
-        }}
-        withVariableButton={false}
       />
-      <TextInput
+      {!options.task ||
-        isRequired
+        (options.task === 'Show widget' && (
-        label="Website token"
+          <>
-        defaultValue={options.websiteToken}
-        onChange={(websiteToken) =>
-          onOptionsChange({ ...options, websiteToken })
-        }
-        moreInfoTooltip="Can be found in Chatwoot under Settings > Inboxes > Settings > Configuration, in the code snippet."
-      />
-      <Accordion allowMultiple>
-        <AccordionItem>
-          <AccordionButton justifyContent="space-between">
-            Set user details
-            <AccordionIcon />
-          </AccordionButton>
-          <AccordionPanel pb={4} as={Stack} spacing="4">
             <TextInput
-              label="ID"
+              isRequired
-              defaultValue={options.user?.id}
+              label="Base URL"
-              onChange={(id: string) => {
+              defaultValue={options.baseUrl}
-                onOptionsChange({ ...options, user: { ...options.user, id } })
+              onChange={(baseUrl: string) => {
+                onOptionsChange({ ...options, baseUrl })
               }}
+              withVariableButton={false}
             />
             <TextInput
-              label="Name"
+              isRequired
-              defaultValue={options.user?.name}
+              label="Website token"
-              onChange={(name: string) => {
+              defaultValue={options.websiteToken}
-                onOptionsChange({
+              onChange={(websiteToken) =>
-                  ...options,
+                onOptionsChange({ ...options, websiteToken })
-                  user: { ...options.user, name },
+              }
-                })
+              moreInfoTooltip="Can be found in Chatwoot under Settings > Inboxes > Settings > Configuration, in the code snippet."
-              }}
             />
-            <TextInput
+            <Accordion allowMultiple>
-              label="Email"
+              <AccordionItem>
-              defaultValue={options.user?.email}
+                <AccordionButton justifyContent="space-between">
-              onChange={(email: string) => {
+                  Set user details
-                onOptionsChange({
+                  <AccordionIcon />
-                  ...options,
+                </AccordionButton>
-                  user: { ...options.user, email },
+                <AccordionPanel pb={4} as={Stack} spacing="4">
-                })
+                  <TextInput
-              }}
+                    label="ID"
-            />
+                    defaultValue={options.user?.id}
-            <TextInput
+                    onChange={(id: string) => {
-              label="Avatar URL"
+                      onOptionsChange({
-              defaultValue={options.user?.avatarUrl}
+                        ...options,
-              onChange={(avatarUrl: string) => {
+                        user: { ...options.user, id },
-                onOptionsChange({
+                      })
-                  ...options,
+                    }}
-                  user: { ...options.user, avatarUrl },
+                  />
-                })
+                  <TextInput
-              }}
+                    label="Name"
-            />
+                    defaultValue={options.user?.name}
-            <TextInput
+                    onChange={(name: string) => {
-              label="Phone number"
+                      onOptionsChange({
-              defaultValue={options.user?.phoneNumber}
+                        ...options,
-              onChange={(phoneNumber: string) => {
+                        user: { ...options.user, name },
-                onOptionsChange({
+                      })
-                  ...options,
+                    }}
-                  user: { ...options.user, phoneNumber },
+                  />
-                })
+                  <TextInput
-              }}
+                    label="Email"
-            />
+                    defaultValue={options.user?.email}
-          </AccordionPanel>
+                    onChange={(email: string) => {
-        </AccordionItem>
+                      onOptionsChange({
-      </Accordion>
+                        ...options,
+                        user: { ...options.user, email },
+                      })
+                    }}
+                  />
+                  <TextInput
+                    label="Avatar URL"
+                    defaultValue={options.user?.avatarUrl}
+                    onChange={(avatarUrl: string) => {
+                      onOptionsChange({
+                        ...options,
+                        user: { ...options.user, avatarUrl },
+                      })
+                    }}
+                  />
+                  <TextInput
+                    label="Phone number"
+                    defaultValue={options.user?.phoneNumber}
+                    onChange={(phoneNumber: string) => {
+                      onOptionsChange({
+                        ...options,
+                        user: { ...options.user, phoneNumber },
+                      })
+                    }}
+                  />
+                </AccordionPanel>
+              </AccordionItem>
+            </Accordion>
+          </>
+        ))}
     </Stack>
   )
 }

apps/viewer/src/features/blocks/integrations/chatwoot/api/utils/executeChatwootBlock.ts

@@ -49,13 +49,25 @@ if (window.$chatwoot) {
   })(document, "script");
 }`
 
+const chatwootCloseCode = `
+if (window.$chatwoot) {
+  window.$chatwoot.toggle("close");
+  window.$chatwoot.toggleBubbleVisibility("hide");
+}
+`
+
 export const executeChatwootBlock = (
   { typebot: { variables }, result }: SessionState,
   block: ChatwootBlock,
   lastBubbleBlockId?: string
 ): ExecuteIntegrationResponse => {
   const isPreview = !result.id
-  const chatwootCode = parseChatwootOpenCode(block.options)
+  const chatwootCode =
+    block.options.task === 'Close widget'
+      ? chatwootCloseCode
+      : isPreview
+      ? ''
+      : parseChatwootOpenCode(block.options)
   return {
     outgoingEdgeId: block.outgoingEdgeId,
     clientSideActions: [
@@ -76,14 +88,15 @@ export const executeChatwootBlock = (
         },
       },
     ],
-    logs: isPreview
+    logs:
-      ? [
+      chatwootCode === ''
-          {
+        ? [
-            status: 'info',
+            {
-            description: 'Chatwoot block is not supported in preview',
+              status: 'info',
-            details: null,
+              description: 'Chatwoot block is not supported in preview',
-          },
+              details: null,
-        ]
+            },
-      : undefined,
+          ]
+        : undefined,
   }
 }

packages/models/features/blocks/integrations/chatwoot.ts

@@ -2,7 +2,10 @@ import { z } from 'zod'
 import { blockBaseSchema } from '../baseSchemas'
 import { IntegrationBlockType } from './enums'
 
+export const chatwootTasks = ['Show widget', 'Close widget'] as const
+
 export const chatwootOptionsSchema = z.object({
+  task: z.enum(chatwootTasks).optional(),
   baseUrl: z.string(),
   websiteToken: z.string(),
   user: z
@@ -24,6 +27,7 @@ export const chatwootBlockSchema = blockBaseSchema.and(
 )
 
 export const defaultChatwootOptions: ChatwootOptions = {
+  task: 'Show widget',
   baseUrl: 'https://app.chatwoot.com',
   websiteToken: '',
 }