feat(integration): ✨ Add Make.com block

baptisteArno · Apr 10, 2022 · 38c53fb · 38c53fb · vercel · Apr 10, 2022
1 parent a5491dc
commit 38c53fb
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 18 deletions.
diff --git a/apps/builder/assets/logos/MakeComLogo.tsx b/apps/builder/assets/logos/MakeComLogo.tsx
@@ -0,0 +1,65 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const MakeComLogo = (props: IconProps) => (
+  <Icon
+    viewBox="0 0 195 139"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M189.89 136.77H156C154.759 136.77 153.569 136.277 152.691 135.399C151.813 134.522 151.32 133.331 151.32 132.09V7.0001C151.328 5.76317 151.824 4.57945 152.701 3.70666C153.578 2.83388 154.763 2.34271 156 2.3401H189.88C191.12 2.33744 192.31 2.82659 193.189 3.70023C194.068 4.57386 194.565 5.76062 194.57 7.0001V132.09C194.572 132.705 194.451 133.314 194.217 133.883C193.982 134.451 193.637 134.967 193.202 135.402C192.768 135.837 192.251 136.182 191.683 136.417C191.114 136.651 190.505 136.771 189.89 136.77V136.77Z"
+      fill="url(#paint0_linear_132_18)"
+    />
+    <path
+      d="M32.8198 137.24L2.54979 122C1.4416 121.443 0.600022 120.468 0.210001 119.29C-0.18002 118.113 -0.0865786 116.829 0.469792 115.72L56.6298 3.99999C57.1872 2.89179 58.1617 2.05022 59.3393 1.6602C60.5169 1.27018 61.8011 1.36362 62.9098 1.91999L93.1898 17.13C94.298 17.6874 95.1396 18.6619 95.5296 19.8395C95.9196 21.017 95.8262 22.3013 95.2698 23.41L39.0998 135.16C38.5424 136.268 37.5679 137.11 36.3903 137.5C35.2127 137.89 33.9285 137.796 32.8198 137.24V137.24Z"
+      fill="url(#paint1_linear_132_18)"
+    />
+    <path
+      d="M122.23 134.72L146.23 12.9099C146.468 11.697 146.217 10.4388 145.532 9.41022C144.846 8.38162 143.781 7.66611 142.57 7.41994L109.36 0.709944C108.756 0.588979 108.134 0.588219 107.529 0.707709C106.925 0.827198 106.35 1.06459 105.837 1.40634C105.325 1.74808 104.884 2.18747 104.542 2.69941C104.199 3.21135 103.96 3.7858 103.84 4.38994L79.8397 126.21C79.6012 127.424 79.8535 128.684 80.5413 129.713C81.229 130.741 82.2964 131.456 83.5097 131.7L116.71 138.4C117.314 138.524 117.937 138.526 118.542 138.408C119.148 138.29 119.723 138.053 120.237 137.71C120.75 137.368 121.19 136.928 121.532 136.415C121.874 135.901 122.111 135.325 122.23 134.72V134.72Z"
+      fill="url(#paint2_linear_132_18)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_132_18"
+        x1="110.22"
+        y1="92.6901"
+        x2="201.65"
+        y2="58.9801"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.02" stopColor="#B02DE9" />
+        <stop offset="0.8" stopColor="#6D00CC" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_132_18"
+        x1="29.9698"
+        y1="77.31"
+        x2="128.26"
+        y2="34.81"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FF00FF" />
+        <stop offset="0.18" stopColor="#E80DF9" />
+        <stop offset="0.54" stopColor="#C024ED" />
+        <stop offset="0.73" stopColor="#B02DE9" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_132_18"
+        x1="7.03968"
+        y1="108.59"
+        x2="208.52"
+        y2="34.4099"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.02" stopColor="#FF00FF" />
+        <stop offset="0.09" stopColor="#E80DF9" />
+        <stop offset="0.23" stopColor="#C024ED" />
+        <stop offset="0.3" stopColor="#B02DE9" />
+        <stop offset="0.42" stopColor="#A42BE3" />
+        <stop offset="0.63" stopColor="#8527D5" />
+        <stop offset="0.85" stopColor="#6021C3" />
+      </linearGradient>
+    </defs>
+  </Icon>
+)
diff --git 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
@@ -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 <WebhookIcon {...props} />
     case IntegrationStepType.ZAPIER:
       return <ZapierLogo {...props} />
+    case IntegrationStepType.MAKE_COM:
+      return <MakeComLogo {...props} />
     case IntegrationStepType.EMAIL:
       return <SendEmailIcon {...props} />
     case 'start':

diff --git 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 <Text>Webhook</Text>
     case IntegrationStepType.ZAPIER:
       return <Text>Zapier</Text>
+    case IntegrationStepType.MAKE_COM:
+      return <Text>Make.com</Text>
     case IntegrationStepType.EMAIL:
       return <Text>Email</Text>
     default:

diff --git a/.../components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx b/.../components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
@@ -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} />

diff --git a/...ed/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx b/...ed/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 <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">

diff --git 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 <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} />

diff --git a/...builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx b/...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 <Text color="gray.500">Configure...</Text>
   return (
     <Text isTruncated pr="6">
-      {webhook?.url ? 'Enabled' : 'Disabled'}
+      {webhook?.url ? configuredLabel : 'Disabled'}
     </Text>
   )
 }
diff --git 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
@@ -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
@@ -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<WebhookStep, 'type'> & {
   type: IntegrationStepType.ZAPIER
 }
 
+export type MakeComStep = Omit<WebhookStep, 'type'> & {
+  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
@@ -115,6 +115,7 @@ export const stepTypeHasWebhook = (
   Object.values([
     IntegrationStepType.WEBHOOK,
     IntegrationStepType.ZAPIER,
+    IntegrationStepType.MAKE_COM,
   ] as string[]).includes(type)
 
 export const stepTypeHasItems = (