blsmedia/bot
2
0
Fork 0
Code Activity

✨ Add back Make.com and implement help doc buttons

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-12-05 14:39:58 +01:00
parent cfcecaaa17
commit d75eceb23f
12 changed files with 168 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/builder/src/features/blocks/integrations/makeCom/components/MakeComNodeContent.tsx → apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx
View File

@ -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>

51
apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx Normal file
View File

@ -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>
)
}

3
apps/builder/src/features/blocks/integrations/makeCom/components/index.ts Normal file
View File

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

3
apps/builder/src/features/blocks/integrations/makeCom/index.ts
View File

@ -1,2 +1 @@
export { MakeComLogo } from './components/MakeComLogo'
export { MakeComNodeContent } from './components/MakeComNodeContent'
export * from './components'

5
apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectNodeContent.tsx → apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectContent.tsx
View File

@ -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>

2
apps/builder/src/features/blocks/integrations/pabbly/components/index.ts Normal file
View File

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

3
apps/builder/src/features/blocks/integrations/pabbly/index.ts
View File

@ -1,2 +1 @@
export { PabblyConnectLogo } from './components/PabblyConnectLogo'
export { PabblyConnectNodeContent } from './components/PabblyConnectNodeContent'
export * from './components'

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

@ -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>

13
apps/builder/src/features/editor/components/BlocksSideBar/BlocksSideBar.tsx
View File

@ -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>

8
apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx
View File

@ -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} />

80
apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/HelpDocButton.tsx Normal file
View File

@ -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
}
}

39
apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx
View File

@ -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 (