feat(editor): ✨ Add Zapier step

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

@@ -17,7 +17,7 @@ import {
   TextIcon,
   WebhookIcon,
 } from 'assets/icons'
-import { GoogleAnalyticsLogo, GoogleSheetsLogo } from 'assets/logos'
+import { GoogleAnalyticsLogo, GoogleSheetsLogo, ZapierLogo } from 'assets/logos'
 import {
   BubbleStepType,
   InputStepType,
@@ -63,6 +63,8 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
       return <GoogleAnalyticsLogo {...props} />
     case IntegrationStepType.WEBHOOK:
       return <WebhookIcon {...props} />
+    case IntegrationStepType.ZAPIER:
+      return <ZapierLogo {...props} />
     case IntegrationStepType.EMAIL:
       return <SendEmailIcon {...props} />
     case 'start':

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

@@ -51,6 +51,8 @@ export const StepTypeLabel = ({ type }: Props) => {
       )
     case IntegrationStepType.WEBHOOK:
       return <Text>Webhook</Text>
+    case IntegrationStepType.ZAPIER:
+      return <Text>Zapier</Text>
     case IntegrationStepType.EMAIL:
       return <Text>Email</Text>
     default:

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

@@ -36,6 +36,7 @@ import { RedirectSettings } from './bodies/RedirectSettings'
 import { SendEmailSettings } from './bodies/SendEmailSettings/SendEmailSettings'
 import { SetVariableSettings } from './bodies/SetVariableSettings'
 import { WebhookSettings } from './bodies/WebhookSettings'
+import { ZapierSettings } from './bodies/ZapierSettings'
 
 type Props = {
   step: Exclude<Step, TextBubbleStep>
@@ -199,6 +200,9 @@ export const StepSettings = ({
         />
       )
     }
+    case IntegrationStepType.ZAPIER: {
+      return <ZapierSettings step={step} />
+    }
     case IntegrationStepType.WEBHOOK: {
       return (
         <WebhookSettings

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

@@ -0,0 +1,46 @@
+import {
+  Alert,
+  AlertIcon,
+  Button,
+  Input,
+  Link,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+import { ExternalLinkIcon } from 'assets/icons'
+import { ZapierStep } from 'models'
+import React from 'react'
+
+type Props = {
+  step: ZapierStep
+}
+
+export const ZapierSettings = ({ step }: Props) => {
+  return (
+    <Stack spacing={4}>
+      <Alert
+        status={step.webhook.url ? 'success' : 'info'}
+        bgColor={step.webhook.url ? undefined : 'blue.50'}
+        rounded="md"
+      >
+        <AlertIcon />
+        {step.webhook.url ? (
+          <>Your zap is correctly configured 🚀</>
+        ) : (
+          <Stack>
+            <Text>Head up to Zapier to configure this step:</Text>
+            <Button
+              as={Link}
+              href="https://zapier.com/apps/typebot/integrations"
+              isExternal
+              colorScheme="blue"
+            >
+              <Text mr="2">Zapier</Text> <ExternalLinkIcon />
+            </Button>
+          </Stack>
+        )}
+      </Alert>
+      {step.webhook.url && <Input value={step.webhook.url} isDisabled />}
+    </Stack>
+  )
+}

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

@@ -21,6 +21,7 @@ import { ConfigureContent } from './contents/ConfigureContent'
 import { ImageBubbleContent } from './contents/ImageBubbleContent'
 import { PlaceholderContent } from './contents/PlaceholderContent'
 import { SendEmailContent } from './contents/SendEmailContent'
+import { ZapierContent } from './contents/ZapierContent'
 
 type Props = {
   step: Step | StartStep
@@ -102,6 +103,9 @@ export const StepNodeContent = ({ step, indices }: Props) => {
     case IntegrationStepType.WEBHOOK: {
       return <WebhookContent step={step} />
     }
+    case IntegrationStepType.ZAPIER: {
+      return <ZapierContent step={step} />
+    }
     case IntegrationStepType.EMAIL: {
       return <SendEmailContent step={step} />
     }

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

@@ -0,0 +1,17 @@
+import { Text } from '@chakra-ui/react'
+import { ZapierStep } from 'models'
+import { isNotDefined } from 'utils'
+
+type Props = {
+  step: ZapierStep
+}
+
+export const ZapierContent = ({ step }: Props) => {
+  if (isNotDefined(step.webhook.body))
+    return <Text color="gray.500">Configure...</Text>
+  return (
+    <Text isTruncated pr="6">
+      {step.webhook.url ? 'Enabled' : 'Disabled'}
+    </Text>
+  )
+}