✨ Add back Make.com and implement help doc buttons

apps/builder/src/features/blocks/integrations/makeCom/components/MakeComNodeContent.tsx → 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 <Text color="gray.500">Configure...</Text>

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 (
+    <Stack spacing={4}>
+      <Alert
+        status={webhook?.url ? 'success' : 'info'}
+        bgColor={webhook?.url ? undefined : 'blue.50'}
+        rounded="md"
+      >
+        <AlertIcon />
+        {webhook?.url ? (
+          <>Your scenario is correctly configured 🚀</>
+        ) : (
+          <Stack>
+            <Text>Head up to Make.com to configure this block:</Text>
+            <Button
+              as={Link}
+              href="https://www.make.com/en/integrations/typebot"
+              isExternal
+              colorScheme="blue"
+            >
+              <Text mr="2">Make.com</Text> <ExternalLinkIcon />
+            </Button>
+          </Stack>
+        )}
+      </Alert>
+      {webhook?.url && <Input value={webhook?.url} isDisabled />}
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/integrations/makeCom/components/index.ts

@@ -0,0 +1,3 @@
+export * from './MakeComLogo'
+export * from './MakeComContent'
+export * from './MakeComSettings'

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'

apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectNodeContent.tsx → 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 <Text color="gray.500">Configure...</Text>

apps/builder/src/features/blocks/integrations/pabbly/components/index.ts

@@ -0,0 +1,2 @@
+export * from './PabblyConnectContent'
+export * from './PabblyConnectLogo'

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'

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 <Text color="gray.500">Configure...</Text>

apps/builder/src/features/editor/components/BlocksSideBar/BlocksSideBar.tsx

@@ -149,16 +149,9 @@ export const BlocksSideBar = () => {
             Integrations
           </Text>
           <SimpleGrid columns={2} spacing="3">
-            {Object.values(IntegrationBlockType)
-              .filter((type) => type !== IntegrationBlockType.MAKE_COM)
-              .map((type) => (
-                <BlockCard
-                  key={type}
-                  type={type}
-                  onMouseDown={handleMouseDown}
-                  isDisabled={type === IntegrationBlockType.MAKE_COM}
-                />
-              ))}
+            {Object.values(IntegrationBlockType).map((type) => (
+              <BlockCard key={type} type={type} onMouseDown={handleMouseDown} />
+            ))}
           </SimpleGrid>
         </Stack>
 

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 <ZapierContent block={block} />
     }
     case IntegrationBlockType.PABBLY_CONNECT: {
-      return <PabblyConnectNodeContent block={block} />
+      return <PabblyConnectContent block={block} />
     }
     case IntegrationBlockType.MAKE_COM: {
-      return <MakeComNodeContent block={block} />
+      return <MakeComContent block={block} />
     }
     case IntegrationBlockType.EMAIL: {
       return <SendEmailContent block={block} />

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 (
+    <Button
+      as={Link}
+      leftIcon={<BuoyIcon />}
+      size="xs"
+      href={helpDocUrl}
+      isExternal
+    >
+      Help
+    </Button>
+  )
+}
+
+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
+  }
+}

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) => {
       <PopoverContent onMouseDown={handleMouseDown} pos="relative">
         <PopoverArrow />
         <PopoverBody
-          pt="10"
+          pt="3"
           pb="6"
           overflowY="scroll"
           maxH="400px"
           ref={ref}
           shadow="lg"
         >
-          <BlockSettings {...props} />
+          <Stack spacing={3}>
+            <HStack justifyContent="flex-end">
+              <HelpDocButton blockType={props.block.type} />
+              <IconButton
+                aria-label="expand"
+                icon={<ExpandIcon />}
+                size="xs"
+                onClick={onExpandClick}
+              />
+            </HStack>
+            <BlockSettings {...props} />
+          </Stack>
         </PopoverBody>
-        <IconButton
-          pos="absolute"
-          top="5px"
-          right="5px"
-          aria-label="expand"
-          icon={<ExpandIcon />}
-          size="xs"
-          onClick={onExpandClick}
-        />
       </PopoverContent>
     </Portal>
   )
@@ -227,16 +233,7 @@ export const BlockSettings = ({
       return <ZapierSettings block={block} />
     }
     case IntegrationBlockType.MAKE_COM: {
-      return (
-        <WebhookSettings
-          block={block}
-          onOptionsChange={handleOptionsChange}
-          provider={{
-            name: 'Make.com',
-            url: 'https://eu1.make.com/app/invite/43fa76a621f67ea27f96cffc3a2477e1',
-          }}
-        />
-      )
+      return <MakeComSettings block={block} />
     }
     case IntegrationBlockType.PABBLY_CONNECT: {
       return (