feat(integrations): ✨ Add Pabbly block

apps/builder/assets/logos/PabblyConnectLogo.tsx

@@ -0,0 +1,27 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const PabblyConnectLogo = (props: IconProps) => (
+  <Icon
+    viewBox="0 0 258.753 258.753"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <switch>
+      <g>
+        <path
+          fill="#20B276"
+          d="M258.753 129.375c0 71.454-57.925 129.376-129.377 129.376-22.403 0-43.476-5.692-61.85-15.713C27.296 221.099 0 178.426 0 129.375 0 57.924 57.924 0 129.376 0c71.453 0 129.377 57.924 129.377 129.375z"
+        ></path>
+        <path
+          fill="#147F52"
+          d="M181.014 166.173c-13.69 14.108-30.304 21.167-49.838 21.167-11.923 0-22.999-2.018-33.383-7.88l-.125 75.124-.984-.266-.609-.156-.719-.391-.339-.613-.312-.693.346-.434-34.257-40.846.01-96.555c0-20.119 6.844-37.206 20.535-51.264 13.688-14.059 30.301-21.087 49.837-21.087 19.534 0 36.147 7.053 49.838 21.164 13.688 14.109 20.534 31.232 20.534 51.366 0 20.136-6.845 37.256-20.534 51.364zm-26.131-75.819c-6.5-6.705-14.402-10.056-23.707-10.056-9.308 0-17.21 3.351-23.707 10.056-6.5 6.705-9.75 14.855-9.75 24.457 0 9.599 3.249 17.749 9.75 24.454 6.497 6.706 14.399 10.059 23.707 10.059 9.305 0 17.207-3.353 23.707-10.059 6.499-6.705 9.749-14.855 9.749-24.454 0-9.602-3.25-17.753-9.749-24.457z"
+        ></path>
+        <path
+          fill="#FFF"
+          d="M178.321 163.506c-13.69 14.11-30.302 21.167-49.837 21.167-11.922 0-23.073-2.931-33.456-8.793l-.011 78.261s-2.527-.696-5.816-1.758a97.162 97.162 0 01-2.488-.846c-.408-.145-.607-.23-1.027-.351-1.076-.31-2.44-.908-3.491-1.317a132.106 132.106 0 01-6.463-2.718c-.069-.033-10.179-4.856-11.319-5.568-1.021-.638-1.93-1.138-2.709-1.697-.249-.178-.437-.305-.673-.467-1.852-1.273-2.887-2.004-2.887-2.004l-.031-125.45c0-20.12 6.844-37.207 20.535-51.264 13.689-14.06 30.301-21.087 49.837-21.087 19.535 0 36.146 7.053 49.837 21.164 13.688 14.109 20.536 31.232 20.536 51.365-.001 20.134-6.849 37.254-20.537 51.363zm-26.13-75.819c-6.5-6.705-14.402-10.056-23.707-10.056-9.307 0-17.209 3.351-23.707 10.056-6.5 6.705-9.749 14.855-9.749 24.456 0 9.6 3.249 17.75 9.749 24.454 6.498 6.708 14.4 10.06 23.707 10.06 9.305 0 17.207-3.352 23.707-10.06 6.498-6.704 9.749-14.854 9.749-24.454 0-9.601-3.251-17.751-9.749-24.456z"
+        ></path>
+      </g>
+    </switch>
+  </Icon>
+)

apps/builder/assets/logos/index.tsx

@@ -16,3 +16,4 @@ export * from './GoogleLogo'
 export * from './FacebookLogo'
 export * from './ZapierLogo'
 export * from './MakeComLogo'
+export * from './PabblyConnectLogo'

apps/builder/components/editor/StepsSideBar/StepIcon.tsx

@@ -24,6 +24,7 @@ import {
   GoogleAnalyticsLogo,
   GoogleSheetsLogo,
   MakeComLogo,
+  PabblyConnectLogo,
   ZapierLogo,
 } from 'assets/logos'
 import {
@@ -81,6 +82,8 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
       return <ZapierLogo {...props} />
     case IntegrationStepType.MAKE_COM:
       return <MakeComLogo {...props} />
+    case IntegrationStepType.PABBLY_CONNECT:
+      return <PabblyConnectLogo {...props} />
     case IntegrationStepType.EMAIL:
       return <SendEmailIcon {...props} />
     case 'start':

apps/builder/components/editor/StepsSideBar/StepTypeLabel.tsx

@@ -73,6 +73,8 @@ export const StepTypeLabel = ({ type }: Props) => {
       return <Text>Zapier</Text>
     case IntegrationStepType.MAKE_COM:
       return <Text>Make.com</Text>
+    case IntegrationStepType.PABBLY_CONNECT:
+      return <Text>Pabbly</Text>
     case IntegrationStepType.EMAIL:
       return <Text>Email</Text>
     default:

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -224,6 +224,18 @@ export const StepSettings = ({
         />
       )
     }
+    case IntegrationStepType.PABBLY_CONNECT: {
+      return (
+        <WebhookSettings
+          step={step}
+          onOptionsChange={handleOptionsChange}
+          provider={{
+            name: 'Pabbly Connect',
+            url: 'https://www.pabbly.com/connect/integrations/typebot/',
+          }}
+        />
+      )
+    }
     case IntegrationStepType.WEBHOOK: {
       return (
         <WebhookSettings step={step} onOptionsChange={handleOptionsChange} />

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

@@ -27,6 +27,7 @@ import {
   defaultWebhookAttributes,
   Webhook,
   MakeComStep,
+  PabblyConnectStep,
 } from 'models'
 import { DropdownList } from 'components/shared/DropdownList'
 import { TableList, TableListItemProps } from 'components/shared/TableList'
@@ -44,11 +45,11 @@ import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
 import { ExternalLinkIcon } from 'assets/icons'
 
 type Provider = {
-  name: 'Make.com'
+  name: 'Make.com' | 'Pabbly Connect'
   url: string
 }
 type Props = {
-  step: WebhookStep | MakeComStep
+  step: WebhookStep | MakeComStep | PabblyConnectStep
   onOptionsChange: (options: WebhookOptions) => void
   provider?: Provider
 }

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx

@@ -125,6 +125,7 @@ export const StepNodeContent = ({ step, indices }: Props) => {
         <ProviderWebhookContent step={step} configuredLabel="Trigger zap" />
       )
     }
+    case IntegrationStepType.PABBLY_CONNECT:
     case IntegrationStepType.MAKE_COM: {
       return (
         <ProviderWebhookContent

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

@@ -3,6 +3,7 @@ import { useTypebot } from 'contexts/TypebotContext'
 import {
   defaultWebhookAttributes,
   MakeComStep,
+  PabblyConnectStep,
   Webhook,
   ZapierStep,
 } from 'models'
@@ -10,7 +11,7 @@ import { useEffect } from 'react'
 import { byId, isNotDefined } from 'utils'
 
 type Props = {
-  step: ZapierStep | MakeComStep
+  step: ZapierStep | MakeComStep | PabblyConnectStep
   configuredLabel: string
 }
 

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.PABBLY_CONNECT:
     case IntegrationStepType.MAKE_COM:
     case IntegrationStepType.WEBHOOK:
       return defaultWebhookOptions

packages/bot-engine/src/services/integration.ts

@@ -17,6 +17,7 @@ import {
   Block,
   VariableWithValue,
   MakeComStep,
+  PabblyConnectStep,
 } from 'models'
 import { stringify } from 'qs'
 import { byId, sendRequest } from 'utils'
@@ -51,6 +52,7 @@ export const executeIntegration = ({
       return executeGoogleAnalyticsIntegration(step, context)
     case IntegrationStepType.ZAPIER:
     case IntegrationStepType.MAKE_COM:
+    case IntegrationStepType.PABBLY_CONNECT:
     case IntegrationStepType.WEBHOOK:
       return executeWebhook(step, context)
     case IntegrationStepType.EMAIL:
@@ -209,7 +211,7 @@ const parseCellValues = (
   }, {})
 
 const executeWebhook = async (
-  step: WebhookStep | ZapierStep | MakeComStep,
+  step: WebhookStep | ZapierStep | MakeComStep | PabblyConnectStep,
   {
     blockId,
     stepId,

packages/models/src/typebot/steps/integration.ts

@@ -7,6 +7,7 @@ export type IntegrationStep =
   | SendEmailStep
   | ZapierStep
   | MakeComStep
+  | PabblyConnectStep
 
 export type IntegrationStepOptions =
   | GoogleSheetsOptions
@@ -21,6 +22,7 @@ export enum IntegrationStepType {
   EMAIL = 'Email',
   ZAPIER = 'Zapier',
   MAKE_COM = 'Make.com',
+  PABBLY_CONNECT = 'Pabbly',
 }
 
 export type GoogleSheetsStep = StepBase & {
@@ -47,6 +49,10 @@ export type MakeComStep = Omit<WebhookStep, 'type'> & {
   type: IntegrationStepType.MAKE_COM
 }
 
+export type PabblyConnectStep = Omit<WebhookStep, 'type'> & {
+  type: IntegrationStepType.PABBLY_CONNECT
+}
+
 export type SendEmailStep = StepBase & {
   type: IntegrationStepType.EMAIL
   options: SendEmailOptions

packages/utils/src/utils.ts

@@ -116,6 +116,7 @@ export const stepTypeHasWebhook = (
     IntegrationStepType.WEBHOOK,
     IntegrationStepType.ZAPIER,
     IntegrationStepType.MAKE_COM,
+    IntegrationStepType.PABBLY_CONNECT,
   ] as string[]).includes(type)
 
 export const stepTypeHasItems = (