blsmedia/bot
2
0
Fork 0
Code Activity

feat(integration): ✨ Add Make.com block

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-04-10 17:02:01 -05:00
parent a5491dc7a8
commit 38c53fbbbc
12 changed files with 156 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
View File

@ -212,6 +212,18 @@ export const StepSettings = ({
case IntegrationStepType.ZAPIER: {
return <ZapierSettings step={step} />
}
case IntegrationStepType.MAKE_COM: {
return (
<WebhookSettings
step={step}
onOptionsChange={handleOptionsChange}
provider={{
name: 'Make.com',
url: 'https://eu1.make.com/app/invite/43fa76a621f67ea27f96cffc3a2477e1',
}}
/>
)
}
case IntegrationStepType.WEBHOOK: {
return (
<WebhookSettings step={step} onOptionsChange={handleOptionsChange} />

45
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
View File

@ -11,6 +11,9 @@ import {
Stack,
useToast,
Text,
Alert,
AlertIcon,
Link,
} from '@chakra-ui/react'
import { Input } from 'components/shared/Textbox'
import { useTypebot } from 'contexts/TypebotContext'
@ -23,6 +26,7 @@ import {
WebhookStep,
defaultWebhookAttributes,
Webhook,
MakeComStep,
} from 'models'
import { DropdownList } from 'components/shared/DropdownList'
import { TableList, TableListItemProps } from 'components/shared/TableList'
@ -37,15 +41,22 @@ import { VariableForTestInputs } from './VariableForTestInputs'
import { DataVariableInputs } from './ResponseMappingInputs'
import { byId } from 'utils'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { ExternalLinkIcon } from 'assets/icons'
type Provider = {
name: 'Make.com'
url: string
}
type Props = {
step: WebhookStep
step: WebhookStep | MakeComStep
onOptionsChange: (options: WebhookOptions) => void
provider?: Provider
}
export const WebhookSettings = ({
step: { options, blockId, id: stepId, webhookId },
onOptionsChange,
provider,
}: Props) => {
const { typebot, save, webhooks, updateWebhook } = useTypebot()
const [isTestResponseLoading, setIsTestResponseLoading] = useState(false)
@ -143,11 +154,23 @@ export const WebhookSettings = ({
if (!localWebhook) return <Spinner />
return (
<Stack spacing={4}>
{provider && (
<Alert status={'info'} bgColor={'blue.50'} rounded="md">
<AlertIcon />
<Stack>
<Text>Head up to {provider.name} to configure this block:</Text>
<Button as={Link} href={provider.url} isExternal colorScheme="blue">
<Text mr="2">{provider.name}</Text> <ExternalLinkIcon />
</Button>
</Stack>
</Alert>
)}
<Input
placeholder="Your Webhook URL..."
placeholder="Paste webhook URL..."
defaultValue={localWebhook.url ?? ''}
onChange={handleUrlChange}
debounceTimeout={0}
withVariableButton={!provider}
/>
<SwitchWithLabel
id={'easy-config'}
@ -239,17 +262,19 @@ export const WebhookSettings = ({
</Stack>
)}
<Stack>
<Button
onClick={handleTestRequestClick}
colorScheme="blue"
isLoading={isTestResponseLoading}
>
Test the request
</Button>
{localWebhook.url && (
<Button
onClick={handleTestRequestClick}
colorScheme="blue"
isLoading={isTestResponseLoading}
>
Test the request
</Button>
)}
{testResponse && (
<CodeEditor isReadOnly lang="json" value={testResponse} />
)}
{(testResponse || options?.responseVariableMapping) && (
{(testResponse || options?.responseVariableMapping.length > 0) && (
<Accordion allowToggle allowMultiple>
<AccordionItem>
<AccordionButton justifyContent="space-between">

14
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx
View File

@ -23,7 +23,7 @@ import { ImageBubbleContent } from './contents/ImageBubbleContent'
import { PlaceholderContent } from './contents/PlaceholderContent'
import { SendEmailContent } from './contents/SendEmailContent'
import { TypebotLinkContent } from './contents/TypebotLinkContent'
import { ZapierContent } from './contents/ZapierContent'
import { ProviderWebhookContent } from './contents/ZapierContent'
type Props = {
step: Step | StartStep
@ -121,7 +121,17 @@ export const StepNodeContent = ({ step, indices }: Props) => {
return <WebhookContent step={step} />
}
case IntegrationStepType.ZAPIER: {
return <ZapierContent step={step} />
return (
<ProviderWebhookContent step={step} configuredLabel="Trigger zap" />
)
}
case IntegrationStepType.MAKE_COM: {
return (
<ProviderWebhookContent
step={step}
configuredLabel="Trigger scenario"
/>
)
}
case IntegrationStepType.EMAIL: {
return <SendEmailContent step={step} />

14
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx
View File

@ -1,14 +1,20 @@
import { Text } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import { defaultWebhookAttributes, Webhook, ZapierStep } from 'models'
import {
defaultWebhookAttributes,
MakeComStep,
Webhook,
ZapierStep,
} from 'models'
import { useEffect } from 'react'
import { byId, isNotDefined } from 'utils'
type Props = {
step: ZapierStep
step: ZapierStep | MakeComStep
configuredLabel: string
}
export const ZapierContent = ({ step }: Props) => {
export const ProviderWebhookContent = ({ step, configuredLabel }: Props) => {
const { webhooks, typebot, updateWebhook } = useTypebot()
const webhook = webhooks.find(byId(step.webhookId))
@ -30,7 +36,7 @@ export const ZapierContent = ({ step }: Props) => {
return <Text color="gray.500">Configure...</Text>
return (
<Text isTruncated pr="6">
{webhook?.url ? 'Enabled' : 'Disabled'}
{webhook?.url ? configuredLabel : 'Disabled'}
</Text>
)
}