feat(integration): ✨ Add webhooks

apps/builder/assets/icons.tsx

@@ -280,3 +280,9 @@ export const FilmIcon = (props: IconProps) => (
     <line x1="17" y1="7" x2="22" y2="7"></line>
   </Icon>
 )
+
+export const WebhookIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
+  </Icon>
+)

apps/builder/assets/styles/codeMirror.css

@@ -0,0 +1,9 @@
+.cm-editor {
+  height: 100%;
+  outline: 0px solid transparent !important;
+}
+
+.cm-scroller {
+  border-radius: 5px;
+  border: 1px solid #e5e7eb;
+}

apps/builder/components/board/StepTypesList/StepIcon.tsx

@@ -14,6 +14,7 @@ import {
   NumberIcon,
   PhoneIcon,
   TextIcon,
+  WebhookIcon,
 } from 'assets/icons'
 import { GoogleAnalyticsLogo, GoogleSheetsLogo } from 'assets/logos'
 import {
@@ -59,6 +60,8 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
       return <GoogleSheetsLogo {...props} />
     case IntegrationStepType.GOOGLE_ANALYTICS:
       return <GoogleAnalyticsLogo {...props} />
+    case IntegrationStepType.WEBHOOK:
+      return <WebhookIcon />
     case 'start':
       return <FlagIcon {...props} />
     default:

apps/builder/components/board/StepTypesList/StepTypeLabel.tsx

@@ -49,6 +49,8 @@ export const StepTypeLabel = ({ type }: Props) => {
           <Text>Analytics</Text>
         </Tooltip>
       )
+    case IntegrationStepType.WEBHOOK:
+      return <Text>Webhook</Text>
     default:
       return <></>
   }

apps/builder/components/board/graph/BlockNode/BlockNode.tsx

@@ -89,7 +89,7 @@ export const BlockNode = ({ block }: Props) => {
           borderColor={
             isConnecting || isOpened || isPreviewing ? 'blue.400' : 'white'
           }
-          minW="300px"
+          w="300px"
           transition="border 300ms, box-shadow 200ms"
           pos="absolute"
           style={{

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -16,6 +16,8 @@ import {
   Step,
   StepOptions,
   TextBubbleStep,
+  Webhook,
+  WebhookStep,
 } from 'models'
 import { useRef } from 'react'
 import {
@@ -32,6 +34,7 @@ import { GoogleSheetsSettingsBody } from './bodies/GoogleSheetsSettingsBody'
 import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
 import { RedirectSettings } from './bodies/RedirectSettings'
 import { SetVariableSettingsBody } from './bodies/SetVariableSettingsBody'
+import { WebhookSettings } from './bodies/WebhookSettings'
 
 type Props = {
   step: Exclude<Step, TextBubbleStep>
@@ -51,7 +54,7 @@ export const SettingsPopoverContent = ({ step, onExpandClick }: Props) => {
       <PopoverContent onMouseDown={handleMouseDown} pos="relative">
         <PopoverArrow />
         <PopoverBody
-          p="6"
+          py="6"
           overflowY="scroll"
           maxH="400px"
           ref={ref}
@@ -74,9 +77,16 @@ export const SettingsPopoverContent = ({ step, onExpandClick }: Props) => {
 }
 
 export const StepSettings = ({ step }: { step: Step }) => {
-  const { updateStep } = useTypebot()
-  const handleOptionsChange = (options: StepOptions) =>
+  const { updateStep, updateWebhook, typebot } = useTypebot()
+  const handleOptionsChange = (options: StepOptions) => {
     updateStep(step.id, { options } as Partial<InputStep>)
+  }
+
+  const handleWebhookChange = (webhook: Partial<Webhook>) => {
+    const webhookId = (step as WebhookStep).options?.webhookId
+    if (!webhookId) return
+    updateWebhook(webhookId, webhook)
+  }
 
   switch (step.type) {
     case InputStepType.TEXT: {
@@ -176,6 +186,17 @@ export const StepSettings = ({ step }: { step: Step }) => {
         />
       )
     }
+    case IntegrationStepType.WEBHOOK: {
+      return (
+        <WebhookSettings
+          key={step.options?.webhookId}
+          options={step.options}
+          webhook={typebot?.webhooks.byId[step.options?.webhookId ?? '']}
+          onOptionsChange={handleOptionsChange}
+          onWebhookChange={handleWebhookChange}
+        />
+      )
+    }
     default: {
       return <></>
     }

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx

@@ -18,8 +18,8 @@ export const ChoiceInputSettingsBody = ({
     options && onOptionsChange({ ...options, isMultipleChoice })
   const handleButtonLabelChange = (buttonLabel: string) =>
     options && onOptionsChange({ ...options, buttonLabel })
-  const handleVariableChange = (variable: Variable) =>
-    options && onOptionsChange({ ...options, variableId: variable.id })
+  const handleVariableChange = (variable?: Variable) =>
+    options && onOptionsChange({ ...options, variableId: variable?.id })
 
   return (
     <Stack spacing={4}>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx

@@ -0,0 +1,51 @@
+import { Stack } from '@chakra-ui/react'
+import { DropdownList } from 'components/shared/DropdownList'
+import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
+import { TableListItemProps } from 'components/shared/TableList'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { Comparison, Variable, ComparisonOperators } from 'models'
+
+export const ComparisonItem = ({
+  item,
+  onItemChange,
+}: TableListItemProps<Comparison>) => {
+  const handleSelectVariable = (variable?: Variable) => {
+    if (variable?.id === item.variableId) return
+    onItemChange({ ...item, variableId: variable?.id })
+  }
+
+  const handleSelectComparisonOperator = (
+    comparisonOperator: ComparisonOperators
+  ) => {
+    if (comparisonOperator === item.comparisonOperator) return
+    onItemChange({ ...item, comparisonOperator })
+  }
+  const handleChangeValue = (value: string) => {
+    if (value === item.value) return
+    onItemChange({ ...item, value })
+  }
+
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <VariableSearchInput
+        initialVariableId={item.variableId}
+        onSelectVariable={handleSelectVariable}
+        placeholder="Search for a variable"
+      />
+      <DropdownList<ComparisonOperators>
+        currentItem={item.comparisonOperator}
+        onItemSelect={handleSelectComparisonOperator}
+        items={Object.values(ComparisonOperators)}
+        placeholder="Select an operator"
+      />
+      {item.comparisonOperator !== ComparisonOperators.IS_SET && (
+        <InputWithVariableButton
+          delay={100}
+          initialValue={item.value ?? ''}
+          onChange={handleChangeValue}
+          placeholder="Type a value..."
+        />
+      )}
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ConditonSettingsBody.tsx

@@ -1,6 +1,9 @@
+import { Flex } from '@chakra-ui/react'
+import { DropdownList } from 'components/shared/DropdownList'
+import { TableList } from 'components/shared/TableList'
 import { Comparison, ConditionOptions, LogicalOperator, Table } from 'models'
 import React from 'react'
-import { ComparisonsList } from './ComparisonsList'
+import { ComparisonItem } from './ComparisonsItem'
 
 type ConditionSettingsBodyProps = {
   options: ConditionOptions
@@ -17,11 +20,19 @@ export const ConditionSettingsBody = ({
     onOptionsChange({ ...options, logicalOperator })
 
   return (
-    <ComparisonsList
-      initialComparisons={options.comparisons}
-      logicalOperator={options.logicalOperator ?? LogicalOperator.AND}
-      onLogicalOperatorChange={handleLogicalOperatorChange}
-      onComparisonsChange={handleComparisonsChange}
+    <TableList<Comparison>
+      onItemsChange={handleComparisonsChange}
+      Item={ComparisonItem}
+      ComponentBetweenItems={() => (
+        <Flex justify="center">
+          <DropdownList<LogicalOperator>
+            currentItem={options.logicalOperator}
+            onItemSelect={handleLogicalOperatorChange}
+            items={Object.values(LogicalOperator)}
+          />
+        </Flex>
+      )}
+      addLabel="Add a comparison"
     />
   )
 }

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx

@@ -24,8 +24,8 @@ export const DateInputSettingsBody = ({
     onOptionsChange({ ...options, isRange })
   const handleHasTimeChange = (hasTime: boolean) =>
     onOptionsChange({ ...options, hasTime })
-  const handleVariableChange = (variable: Variable) =>
-    onOptionsChange({ ...options, variableId: variable.id })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
 
   return (
     <Stack spacing={4}>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx

@@ -17,8 +17,8 @@ export const EmailInputSettingsBody = ({
     onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>
     onOptionsChange({ ...options, labels: { ...options?.labels, button } })
-  const handleVariableChange = (variable: Variable) =>
-    onOptionsChange({ ...options, variableId: variable.id })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
 
   return (
     <Stack spacing={4}>