feat(integrations): ✨ Add Pabbly block

2022-04-12 12:10:20 -05:00
parent a49d1cac03
commit 348055d68a
12 changed files with 62 additions and 4 deletions
--- a/apps/builder/assets/logos/PabblyConnectLogo.tsx
+++ b/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>
+)
--- a/apps/builder/assets/logos/index.tsx
+++ b/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'
--- a/apps/builder/components/editor/StepsSideBar/StepIcon.tsx
+++ b/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':
--- a/apps/builder/components/editor/StepsSideBar/StepTypeLabel.tsx
+++ b/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:
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
+++ b/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} />
--- 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
@ -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
 }
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx
+++ b/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
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx
+++ b/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
 }

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