blsmedia/bot
2
0
Fork 0
Code Activity

🚸 (chatwoot) Add close widget task

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-03-10 11:56:27 +01:00
parent 26c80f064f
commit 9785a0df5c
4 changed files with 118 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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
isRequired
label="Base URL"
defaultValue={options.baseUrl}
onChange={(baseUrl: string) => {
onOptionsChange({ ...options, baseUrl })
}}
withVariableButton={false}
<DropdownList
currentItem={options.task ?? 'Show widget'}
onItemSelect={updateTask}
items={chatwootTasks}
/>
<TextInput
isRequired
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">
{!options.task ||
(options.task === 'Show widget' && (
<>
<TextInput
label="ID"
defaultValue={options.user?.id}
onChange={(id: string) => {
onOptionsChange({ ...options, user: { ...options.user, id } })
isRequired
label="Base URL"
defaultValue={options.baseUrl}
onChange={(baseUrl: string) => {
onOptionsChange({ ...options, baseUrl })
}}
withVariableButton={false}
/>
<TextInput
label="Name"
defaultValue={options.user?.name}
onChange={(name: string) => {
onOptionsChange({
...options,
user: { ...options.user, name },
})
}}
isRequired
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."
/>
<TextInput
label="Email"
defaultValue={options.user?.email}
onChange={(email: string) => {
onOptionsChange({
...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>
<Accordion allowMultiple>
<AccordionItem>
<AccordionButton justifyContent="space-between">
Set user details
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4} as={Stack} spacing="4">
<TextInput
label="ID"
defaultValue={options.user?.id}
onChange={(id: string) => {
onOptionsChange({
...options,
user: { ...options.user, id },
})
}}
/>
<TextInput
label="Name"
defaultValue={options.user?.name}
onChange={(name: string) => {
onOptionsChange({
...options,
user: { ...options.user, name },
})
}}
/>
<TextInput
label="Email"
defaultValue={options.user?.email}
onChange={(email: string) => {
onOptionsChange({
...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>
)
}

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

@ -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
? [
{
status: 'info',
description: 'Chatwoot block is not supported in preview',
details: null,
},
]
: undefined,
logs:
chatwootCode === ''
? [
{
status: 'info',
description: 'Chatwoot block is not supported in preview',
details: null,
},
]
: undefined,
}
}

4
packages/models/features/blocks/integrations/chatwoot.ts
View File

@ -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: '',
}