From 38c53fbbbce328d56763ee1fa8f092ec64e7b593 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Sun, 10 Apr 2022 17:02:01 -0500 Subject: [PATCH] =?UTF-8?q?feat(integration):=20=E2=9C=A8=20Add=20Make.com?= =?UTF-8?q?=20block?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/builder/assets/logos/MakeComLogo.tsx | 65 +++++++++++++++++++ apps/builder/assets/logos/index.tsx | 1 + .../editor/StepsSideBar/StepIcon.tsx | 9 ++- .../editor/StepsSideBar/StepTypeLabel.tsx | 2 + .../SettingsPopoverContent.tsx | 12 ++++ .../WebhookSettings/WebhookSettings.tsx | 45 ++++++++++--- .../StepNodeContent/StepNodeContent.tsx | 14 +++- .../contents/ZapierContent.tsx | 14 ++-- apps/builder/services/typebots/typebots.ts | 1 + .../bot-engine/src/services/integration.ts | 4 +- .../models/src/typebot/steps/integration.ts | 6 ++ packages/utils/src/utils.ts | 1 + 12 files changed, 156 insertions(+), 18 deletions(-) create mode 100644 apps/builder/assets/logos/MakeComLogo.tsx diff --git a/apps/builder/assets/logos/MakeComLogo.tsx b/apps/builder/assets/logos/MakeComLogo.tsx new file mode 100644 index 0000000000..dbb9156f9c --- /dev/null +++ b/apps/builder/assets/logos/MakeComLogo.tsx @@ -0,0 +1,65 @@ +import { Icon, IconProps } from '@chakra-ui/react' + +export const MakeComLogo = (props: IconProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + +) diff --git a/apps/builder/assets/logos/index.tsx b/apps/builder/assets/logos/index.tsx index c72f19a62b..b1bc69e3b4 100644 --- a/apps/builder/assets/logos/index.tsx +++ b/apps/builder/assets/logos/index.tsx @@ -15,3 +15,4 @@ export * from './WixLogo' export * from './GoogleLogo' export * from './FacebookLogo' export * from './ZapierLogo' +export * from './MakeComLogo' diff --git a/apps/builder/components/editor/StepsSideBar/StepIcon.tsx b/apps/builder/components/editor/StepsSideBar/StepIcon.tsx index c726365636..9ece6b859f 100644 --- a/apps/builder/components/editor/StepsSideBar/StepIcon.tsx +++ b/apps/builder/components/editor/StepsSideBar/StepIcon.tsx @@ -20,7 +20,12 @@ import { TextIcon, WebhookIcon, } from 'assets/icons' -import { GoogleAnalyticsLogo, GoogleSheetsLogo, ZapierLogo } from 'assets/logos' +import { + GoogleAnalyticsLogo, + GoogleSheetsLogo, + MakeComLogo, + ZapierLogo, +} from 'assets/logos' import { BubbleStepType, InputStepType, @@ -74,6 +79,8 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => { return case IntegrationStepType.ZAPIER: return + case IntegrationStepType.MAKE_COM: + return case IntegrationStepType.EMAIL: return case 'start': diff --git a/apps/builder/components/editor/StepsSideBar/StepTypeLabel.tsx b/apps/builder/components/editor/StepsSideBar/StepTypeLabel.tsx index 0743bb0d96..027d4aac52 100644 --- a/apps/builder/components/editor/StepsSideBar/StepTypeLabel.tsx +++ b/apps/builder/components/editor/StepsSideBar/StepTypeLabel.tsx @@ -71,6 +71,8 @@ export const StepTypeLabel = ({ type }: Props) => { return Webhook case IntegrationStepType.ZAPIER: return Zapier + case IntegrationStepType.MAKE_COM: + return Make.com case IntegrationStepType.EMAIL: return Email default: diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx index 21f290452d..bd4d726bfc 100644 --- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx +++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx @@ -212,6 +212,18 @@ export const StepSettings = ({ case IntegrationStepType.ZAPIER: { return } + case IntegrationStepType.MAKE_COM: { + return ( + + ) + } case IntegrationStepType.WEBHOOK: { return ( diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx index 4ab7f51732..e8346878c9 100644 --- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx +++ b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx @@ -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 return ( + {provider && ( + + + + Head up to {provider.name} to configure this block: + + + + )} )} - + {localWebhook.url && ( + + )} {testResponse && ( )} - {(testResponse || options?.responseVariableMapping) && ( + {(testResponse || options?.responseVariableMapping.length > 0) && ( diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx index 43bb6f395b..68035a7054 100644 --- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx +++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx @@ -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 } case IntegrationStepType.ZAPIER: { - return + return ( + + ) + } + case IntegrationStepType.MAKE_COM: { + return ( + + ) } case IntegrationStepType.EMAIL: { return diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx index da01e5d60a..48465caf2d 100644 --- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx +++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx @@ -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 Configure... return ( - {webhook?.url ? 'Enabled' : 'Disabled'} + {webhook?.url ? configuredLabel : 'Disabled'} ) } diff --git a/apps/builder/services/typebots/typebots.ts b/apps/builder/services/typebots/typebots.ts index 5e946403ef..6762cac149 100644 --- a/apps/builder/services/typebots/typebots.ts +++ b/apps/builder/services/typebots/typebots.ts @@ -305,6 +305,7 @@ const parseDefaultStepOptions = (type: StepWithOptionsType): StepOptions => { case IntegrationStepType.GOOGLE_ANALYTICS: return defaultGoogleAnalyticsOptions case IntegrationStepType.ZAPIER: + case IntegrationStepType.MAKE_COM: case IntegrationStepType.WEBHOOK: return defaultWebhookOptions case IntegrationStepType.EMAIL: diff --git a/packages/bot-engine/src/services/integration.ts b/packages/bot-engine/src/services/integration.ts index 78af0575b2..fc6fe18794 100644 --- a/packages/bot-engine/src/services/integration.ts +++ b/packages/bot-engine/src/services/integration.ts @@ -16,6 +16,7 @@ import { ResultValues, Block, VariableWithValue, + MakeComStep, } from 'models' import { stringify } from 'qs' import { byId, sendRequest } from 'utils' @@ -49,6 +50,7 @@ export const executeIntegration = ({ case IntegrationStepType.GOOGLE_ANALYTICS: return executeGoogleAnalyticsIntegration(step, context) case IntegrationStepType.ZAPIER: + case IntegrationStepType.MAKE_COM: case IntegrationStepType.WEBHOOK: return executeWebhook(step, context) case IntegrationStepType.EMAIL: @@ -207,7 +209,7 @@ const parseCellValues = ( }, {}) const executeWebhook = async ( - step: WebhookStep | ZapierStep, + step: WebhookStep | ZapierStep | MakeComStep, { blockId, stepId, diff --git a/packages/models/src/typebot/steps/integration.ts b/packages/models/src/typebot/steps/integration.ts index abf9a04688..ab258c7b17 100644 --- a/packages/models/src/typebot/steps/integration.ts +++ b/packages/models/src/typebot/steps/integration.ts @@ -6,6 +6,7 @@ export type IntegrationStep = | WebhookStep | SendEmailStep | ZapierStep + | MakeComStep export type IntegrationStepOptions = | GoogleSheetsOptions @@ -19,6 +20,7 @@ export enum IntegrationStepType { WEBHOOK = 'Webhook', EMAIL = 'Email', ZAPIER = 'Zapier', + MAKE_COM = 'Make.com', } export type GoogleSheetsStep = StepBase & { @@ -41,6 +43,10 @@ export type ZapierStep = Omit & { type: IntegrationStepType.ZAPIER } +export type MakeComStep = Omit & { + type: IntegrationStepType.MAKE_COM +} + export type SendEmailStep = StepBase & { type: IntegrationStepType.EMAIL options: SendEmailOptions diff --git a/packages/utils/src/utils.ts b/packages/utils/src/utils.ts index 0c64274449..9a4673e183 100644 --- a/packages/utils/src/utils.ts +++ b/packages/utils/src/utils.ts @@ -115,6 +115,7 @@ export const stepTypeHasWebhook = ( Object.values([ IntegrationStepType.WEBHOOK, IntegrationStepType.ZAPIER, + IntegrationStepType.MAKE_COM, ] as string[]).includes(type) export const stepTypeHasItems = (