From d75eceb23f1fe737a8f2104b2bc6d318d3c6a471 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Mon, 5 Dec 2022 14:39:58 +0100 Subject: [PATCH] :sparkles: Add back Make.com and implement help doc buttons --- ...eComNodeContent.tsx => MakeComContent.tsx} | 5 +- .../makeCom/components/MakeComSettings.tsx | 51 ++++++++++++ .../integrations/makeCom/components/index.ts | 3 + .../blocks/integrations/makeCom/index.ts | 3 +- ...deContent.tsx => PabblyConnectContent.tsx} | 5 +- .../integrations/pabbly/components/index.ts | 2 + .../blocks/integrations/pabbly/index.ts | 3 +- .../zapier/components/ZapierContent.tsx | 3 +- .../BlocksSideBar/BlocksSideBar.tsx | 13 +-- .../BlockNodeContent/BlockNodeContent.tsx | 8 +- .../SettingsPopoverContent/HelpDocButton.tsx | 80 +++++++++++++++++++ .../SettingsPopoverContent.tsx | 39 +++++---- 12 files changed, 168 insertions(+), 47 deletions(-) rename apps/builder/src/features/blocks/integrations/makeCom/components/{MakeComNodeContent.tsx => MakeComContent.tsx} (87%) create mode 100644 apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx create mode 100644 apps/builder/src/features/blocks/integrations/makeCom/components/index.ts rename apps/builder/src/features/blocks/integrations/pabbly/components/{PabblyConnectNodeContent.tsx => PabblyConnectContent.tsx} (87%) create mode 100644 apps/builder/src/features/blocks/integrations/pabbly/components/index.ts create mode 100644 apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/HelpDocButton.tsx 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 ( + + ) +} + +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 (