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