♻️ (builder) Change to features-centric folder structure

apps/builder/src/features/blocks/integrations/zapier/components/ZapierContent.tsx

@@ -0,0 +1,36 @@
+import { Text } from '@chakra-ui/react'
+import { useTypebot } from '@/features/editor'
+import { defaultWebhookAttributes, Webhook, ZapierBlock } from 'models'
+import { useEffect } from 'react'
+import { byId, isNotDefined } from 'utils'
+
+type Props = {
+  block: ZapierBlock
+}
+
+export const ZapierContent = ({ block }: Props) => {
+  const { webhooks, typebot, updateWebhook } = useTypebot()
+  const webhook = webhooks.find(byId(block.webhookId))
+
+  useEffect(() => {
+    if (!typebot) return
+    if (!webhook) {
+      const { webhookId } = block
+      const newWebhook = {
+        id: webhookId,
+        ...defaultWebhookAttributes,
+        typebotId: typebot.id,
+      } as Webhook
+      updateWebhook(webhookId, newWebhook)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  if (isNotDefined(webhook?.body))
+    return <Text color="gray.500">Configure...</Text>
+  return (
+    <Text noOfLines={1} pr="6">
+      {webhook?.url ? 'Trigger zap' : 'Disabled'}
+    </Text>
+  )
+}

apps/builder/src/features/blocks/integrations/zapier/components/ZapierLogo.tsx

@@ -0,0 +1,15 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const ZapierLogo = (props: IconProps) => (
+  <Icon
+    viewBox="0 0 256 256"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M159.999 128.056a76.55 76.55 0 0 1-4.915 27.024 76.745 76.745 0 0 1-27.032 4.923h-.108c-9.508-.012-18.618-1.75-27.024-4.919A76.557 76.557 0 0 1 96 128.056v-.112a76.598 76.598 0 0 1 4.91-27.02A76.492 76.492 0 0 1 127.945 96h.108a76.475 76.475 0 0 1 27.032 4.923 76.51 76.51 0 0 1 4.915 27.02v.112zm94.223-21.389h-74.716l52.829-52.833a128.518 128.518 0 0 0-13.828-16.349v-.004a129 129 0 0 0-16.345-13.816l-52.833 52.833V1.782A128.606 128.606 0 0 0 128.064 0h-.132c-7.248.004-14.347.62-21.265 1.782v74.716L53.834 23.665A127.82 127.82 0 0 0 37.497 37.49l-.028.02A128.803 128.803 0 0 0 23.66 53.834l52.837 52.833H1.782S0 120.7 0 127.956v.088c0 7.256.615 14.367 1.782 21.289h74.716l-52.837 52.833a128.91 128.91 0 0 0 30.173 30.173l52.833-52.837v74.72a129.3 129.3 0 0 0 21.24 1.778h.181a129.15 129.15 0 0 0 21.24-1.778v-74.72l52.838 52.837a128.994 128.994 0 0 0 16.341-13.82l.012-.012a129.245 129.245 0 0 0 13.816-16.341l-52.837-52.833h74.724c1.163-6.91 1.77-14 1.778-21.24v-.186c-.008-7.24-.615-14.33-1.778-21.24z"
+      fill="#FF4A00"
+    />
+  </Icon>
+)

apps/builder/src/features/blocks/integrations/zapier/components/ZapierSettings.tsx

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