diff --git a/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComNodeContent.tsx b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx
similarity index 87%
rename from apps/builder/src/features/blocks/integrations/makeCom/components/MakeComNodeContent.tsx
rename to apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx
index 384d0c1b2..e3256091e 100644
--- a/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComNodeContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx
@@ -8,7 +8,7 @@ type Props = {
block: MakeComBlock
}
-export const MakeComNodeContent = ({ block }: Props) => {
+export const MakeComContent = ({ block }: Props) => {
const { webhooks, typebot, updateWebhook } = useTypebot()
const webhook = webhooks.find(byId(block.webhookId))
@@ -23,8 +23,7 @@ export const MakeComNodeContent = ({ block }: Props) => {
} as Webhook
updateWebhook(webhookId, newWebhook)
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
+ }, [block, typebot, updateWebhook, webhook])
if (isNotDefined(webhook?.body))
return Configure...
diff --git a/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx
new file mode 100644
index 000000000..0cea15008
--- /dev/null
+++ b/apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.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 { MakeComBlock } from 'models'
+import React from 'react'
+import { byId } from 'utils'
+
+type Props = {
+ block: MakeComBlock
+}
+
+export const MakeComSettings = ({ block }: Props) => {
+ const { webhooks } = useTypebot()
+ const webhook = webhooks.find(byId(block.webhookId))
+
+ return (
+
+
+
+ {webhook?.url ? (
+ <>Your scenario is correctly configured 🚀>
+ ) : (
+
+ Head up to Make.com to configure this block:
+
+
+ )}
+
+ {webhook?.url && }
+
+ )
+}
diff --git a/apps/builder/src/features/blocks/integrations/makeCom/components/index.ts b/apps/builder/src/features/blocks/integrations/makeCom/components/index.ts
new file mode 100644
index 000000000..a8050acfe
--- /dev/null
+++ b/apps/builder/src/features/blocks/integrations/makeCom/components/index.ts
@@ -0,0 +1,3 @@
+export * from './MakeComLogo'
+export * from './MakeComContent'
+export * from './MakeComSettings'
diff --git a/apps/builder/src/features/blocks/integrations/makeCom/index.ts b/apps/builder/src/features/blocks/integrations/makeCom/index.ts
index 43ad5fbfb..cb64ac1b5 100644
--- a/apps/builder/src/features/blocks/integrations/makeCom/index.ts
+++ b/apps/builder/src/features/blocks/integrations/makeCom/index.ts
@@ -1,2 +1 @@
-export { MakeComLogo } from './components/MakeComLogo'
-export { MakeComNodeContent } from './components/MakeComNodeContent'
+export * from './components'
diff --git a/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectNodeContent.tsx b/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectContent.tsx
similarity index 87%
rename from apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectNodeContent.tsx
rename to apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectContent.tsx
index 4e008ca15..7babcc1ea 100644
--- a/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectNodeContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectContent.tsx
@@ -8,7 +8,7 @@ type Props = {
block: PabblyConnectBlock
}
-export const PabblyConnectNodeContent = ({ block }: Props) => {
+export const PabblyConnectContent = ({ block }: Props) => {
const { webhooks, typebot, updateWebhook } = useTypebot()
const webhook = webhooks.find(byId(block.webhookId))
@@ -23,8 +23,7 @@ export const PabblyConnectNodeContent = ({ block }: Props) => {
} as Webhook
updateWebhook(webhookId, newWebhook)
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
+ }, [block, typebot, updateWebhook, webhook])
if (isNotDefined(webhook?.body))
return Configure...
diff --git a/apps/builder/src/features/blocks/integrations/pabbly/components/index.ts b/apps/builder/src/features/blocks/integrations/pabbly/components/index.ts
new file mode 100644
index 000000000..da0f85f62
--- /dev/null
+++ b/apps/builder/src/features/blocks/integrations/pabbly/components/index.ts
@@ -0,0 +1,2 @@
+export * from './PabblyConnectContent'
+export * from './PabblyConnectLogo'
diff --git a/apps/builder/src/features/blocks/integrations/pabbly/index.ts b/apps/builder/src/features/blocks/integrations/pabbly/index.ts
index 153833040..cb64ac1b5 100644
--- a/apps/builder/src/features/blocks/integrations/pabbly/index.ts
+++ b/apps/builder/src/features/blocks/integrations/pabbly/index.ts
@@ -1,2 +1 @@
-export { PabblyConnectLogo } from './components/PabblyConnectLogo'
-export { PabblyConnectNodeContent } from './components/PabblyConnectNodeContent'
+export * from './components'
diff --git a/apps/builder/src/features/blocks/integrations/zapier/components/ZapierContent.tsx b/apps/builder/src/features/blocks/integrations/zapier/components/ZapierContent.tsx
index 63e72a068..c95346c70 100644
--- a/apps/builder/src/features/blocks/integrations/zapier/components/ZapierContent.tsx
+++ b/apps/builder/src/features/blocks/integrations/zapier/components/ZapierContent.tsx
@@ -23,8 +23,7 @@ export const ZapierContent = ({ block }: Props) => {
} as Webhook
updateWebhook(webhookId, newWebhook)
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
+ }, [block, typebot, updateWebhook, webhook])
if (isNotDefined(webhook?.body))
return Configure...
diff --git a/apps/builder/src/features/editor/components/BlocksSideBar/BlocksSideBar.tsx b/apps/builder/src/features/editor/components/BlocksSideBar/BlocksSideBar.tsx
index 2721bef05..cba9d8114 100644
--- a/apps/builder/src/features/editor/components/BlocksSideBar/BlocksSideBar.tsx
+++ b/apps/builder/src/features/editor/components/BlocksSideBar/BlocksSideBar.tsx
@@ -149,16 +149,9 @@ export const BlocksSideBar = () => {
Integrations
- {Object.values(IntegrationBlockType)
- .filter((type) => type !== IntegrationBlockType.MAKE_COM)
- .map((type) => (
-
- ))}
+ {Object.values(IntegrationBlockType).map((type) => (
+
+ ))}
diff --git a/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx b/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx
index 4c283799c..1f2a9b8c5 100644
--- a/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx
+++ b/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx
@@ -24,7 +24,7 @@ import { WebhookContent } from '@/features/blocks/integrations/webhook'
import { ChatwootBlockNodeLabel } from '@/features/blocks/integrations/chatwoot'
import { RedirectNodeContent } from '@/features/blocks/logic/redirect'
import { CodeNodeContent } from '@/features/blocks/logic/code'
-import { PabblyConnectNodeContent } from '@/features/blocks/integrations/pabbly'
+import { PabblyConnectContent } from '@/features/blocks/integrations/pabbly'
import { WithVariableContent } from './WithVariableContent'
import { PaymentInputContent } from '@/features/blocks/inputs/payment'
import { RatingInputContent } from '@/features/blocks/inputs/rating'
@@ -35,7 +35,7 @@ import { GoogleAnalyticsNodeContent } from '@/features/blocks/integrations/googl
import { ZapierContent } from '@/features/blocks/integrations/zapier'
import { SendEmailContent } from '@/features/blocks/integrations/sendEmail'
import { isInputBlock, isChoiceInput, blockHasItems } from 'utils'
-import { MakeComNodeContent } from '@/features/blocks/integrations/makeCom'
+import { MakeComContent } from '@/features/blocks/integrations/makeCom'
import { AudioBubbleNode } from '@/features/blocks/bubbles/audio'
type Props = {
@@ -148,10 +148,10 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
return
}
case IntegrationBlockType.PABBLY_CONNECT: {
- return
+ return
}
case IntegrationBlockType.MAKE_COM: {
- return
+ return
}
case IntegrationBlockType.EMAIL: {
return
diff --git a/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/HelpDocButton.tsx b/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/HelpDocButton.tsx
new file mode 100644
index 000000000..d8c7f0467
--- /dev/null
+++ b/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/HelpDocButton.tsx
@@ -0,0 +1,80 @@
+import { BuoyIcon } from '@/components/icons'
+import { Button, Link } from '@chakra-ui/react'
+import {
+ BlockWithOptions,
+ InputBlockType,
+ IntegrationBlockType,
+ LogicBlockType,
+} from 'models'
+import React from 'react'
+
+type HelpDocButtonProps = {
+ blockType: BlockWithOptions['type']
+}
+
+export const HelpDocButton = ({ blockType }: HelpDocButtonProps) => {
+ const helpDocUrl = getHelpDocUrl(blockType)
+
+ if (helpDocUrl === null) return null
+
+ return (
+ }
+ size="xs"
+ href={helpDocUrl}
+ isExternal
+ >
+ Help
+
+ )
+}
+
+const getHelpDocUrl = (blockType: BlockWithOptions['type']): string | null => {
+ switch (blockType) {
+ case LogicBlockType.TYPEBOT_LINK:
+ return 'https://docs.typebot.io/editor/blocks/logic/typebot-link'
+ case LogicBlockType.SET_VARIABLE:
+ return 'https://docs.typebot.io/editor/blocks/logic/set-variable'
+ case LogicBlockType.REDIRECT:
+ return 'https://docs.typebot.io/editor/blocks/logic/redirect'
+ case LogicBlockType.CODE:
+ return 'https://docs.typebot.io/editor/blocks/logic/code'
+ case InputBlockType.TEXT:
+ return 'https://docs.typebot.io/editor/blocks/inputs/text'
+ case InputBlockType.NUMBER:
+ return 'https://docs.typebot.io/editor/blocks/inputs/number'
+ case InputBlockType.EMAIL:
+ return 'https://docs.typebot.io/editor/blocks/inputs/email'
+ case InputBlockType.URL:
+ return 'https://docs.typebot.io/editor/blocks/inputs/website'
+ case InputBlockType.DATE:
+ return 'https://docs.typebot.io/editor/blocks/inputs/date'
+ case InputBlockType.PHONE:
+ return 'https://docs.typebot.io/editor/blocks/inputs/phone-number'
+ case InputBlockType.CHOICE:
+ return 'https://docs.typebot.io/editor/blocks/inputs/buttons'
+ case InputBlockType.PAYMENT:
+ return 'https://docs.typebot.io/editor/blocks/inputs/payment'
+ case InputBlockType.RATING:
+ return 'https://docs.typebot.io/editor/blocks/inputs/rating'
+ case InputBlockType.FILE:
+ return 'https://docs.typebot.io/editor/blocks/inputs/file-upload'
+ case IntegrationBlockType.EMAIL:
+ return 'https://docs.typebot.io/editor/blocks/integrations/email'
+ case IntegrationBlockType.CHATWOOT:
+ return 'https://docs.typebot.io/editor/blocks/integrations/chatwoot'
+ case IntegrationBlockType.GOOGLE_ANALYTICS:
+ return 'https://docs.typebot.io/editor/blocks/integrations/ga'
+ case IntegrationBlockType.GOOGLE_SHEETS:
+ return 'https://docs.typebot.io/editor/blocks/integrations/google-sheets'
+ case IntegrationBlockType.ZAPIER:
+ return 'https://docs.typebot.io/editor/blocks/integrations/zapier'
+ case IntegrationBlockType.PABBLY_CONNECT:
+ return 'https://docs.typebot.io/editor/blocks/integrations/pabbly'
+ case IntegrationBlockType.WEBHOOK:
+ return 'https://docs.typebot.io/editor/blocks/integrations/webhook'
+ default:
+ return null
+ }
+}
diff --git a/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx b/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx
index 03a7e8e74..e49c348cd 100644
--- a/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx
+++ b/apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx
@@ -5,6 +5,8 @@ import {
useEventListener,
Portal,
IconButton,
+ HStack,
+ Stack,
} from '@chakra-ui/react'
import { ExpandIcon } from '@/components/icons'
import {
@@ -37,6 +39,8 @@ import { SetVariableSettings } from '@/features/blocks/logic/setVariable'
import { TypebotLinkForm } from '@/features/blocks/logic/typebotLink'
import { ButtonsOptionsForm } from '@/features/blocks/inputs/buttons'
import { ChatwootSettingsForm } from '@/features/blocks/integrations/chatwoot'
+import { MakeComSettings } from '@/features/blocks/integrations/makeCom'
+import { HelpDocButton } from './HelpDocButton'
type Props = {
block: BlockWithOptions
@@ -58,24 +62,26 @@ export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
-
+
+
+
+ }
+ size="xs"
+ onClick={onExpandClick}
+ />
+
+
+
- }
- size="xs"
- onClick={onExpandClick}
- />
)
@@ -227,16 +233,7 @@ export const BlockSettings = ({
return
}
case IntegrationBlockType.MAKE_COM: {
- return (
-
- )
+ return
}
case IntegrationBlockType.PABBLY_CONNECT: {
return (