blsmedia/bot
2
0
Fork 0
Code Issues Activity

✨ Add new Jump block

Browse Source 
Also improve Select input with a clear button

Closes #186
This commit is contained in:
Baptiste Arnaud
2023-03-03 15:03:31 +01:00
parent f1a9a1ce8b
commit 022c5a5738
32 changed files with 598 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,102 @@
import { Flex, HStack, Tooltip, useColorModeValue } from '@chakra-ui/react'
import { DraggableBlockType } from 'models'
import {
BubbleBlockType,
DraggableBlockType,
InputBlockType,
IntegrationBlockType,
LogicBlockType,
} from 'models'
import { useBlockDnd } from '@/features/graph'
import React, { useEffect, useState } from 'react'
import { BlockIcon } from './BlockIcon'
import { BlockTypeLabel } from './BlockTypeLabel'
import { isFreePlan, LockTag } from '@/features/billing'
import { Plan } from 'db'
import { useWorkspace } from '@/features/workspace'
import { BlockLabel } from './BlockLabel'
export const BlockCard = ({
type,
onMouseDown,
isDisabled = false,
}: {
type Props = {
type: DraggableBlockType
tooltip?: string
isDisabled?: boolean
children: React.ReactNode
onMouseDown: (e: React.MouseEvent, type: DraggableBlockType) => void
}) => {
}
export const BlockCard = (
props: Pick<Props, 'type' | 'onMouseDown'>
): JSX.Element => {
const { workspace } = useWorkspace()
switch (props.type) {
case BubbleBlockType.EMBED:
return (
<BlockCardLayout
{...props}
tooltip="Embed a pdf, an iframe, a website..."
>
<BlockIcon type={props.type} />
<BlockLabel type={props.type} />
</BlockCardLayout>
)
case InputBlockType.FILE:
return (
<BlockCardLayout {...props} tooltip="Upload Files">
<BlockIcon type={props.type} />
<HStack>
<BlockLabel type={props.type} />
{isFreePlan(workspace) && <LockTag plan={Plan.STARTER} />}
</HStack>
</BlockCardLayout>
)
case LogicBlockType.SCRIPT:
return (
<BlockCardLayout {...props} tooltip="Execute Javascript code">
<BlockIcon type={props.type} />
<BlockLabel type={props.type} />
</BlockCardLayout>
)
case LogicBlockType.TYPEBOT_LINK:
return (
<BlockCardLayout {...props} tooltip="Link and jump to another typebot">
<BlockIcon type={props.type} />
<BlockLabel type={props.type} />
</BlockCardLayout>
)
case LogicBlockType.JUMP:
return (
<BlockCardLayout
{...props}
tooltip="Fast forward the flow to another group"
>
<BlockIcon type={props.type} />
<BlockLabel type={props.type} />
</BlockCardLayout>
)
case IntegrationBlockType.GOOGLE_SHEETS:
return (
<BlockCardLayout {...props} tooltip="Google Sheets">
<BlockIcon type={props.type} />
<BlockLabel type={props.type} />
</BlockCardLayout>
)
case IntegrationBlockType.GOOGLE_ANALYTICS:
return (
<BlockCardLayout {...props} tooltip="Google Analytics">
<BlockIcon type={props.type} />
<BlockLabel type={props.type} />
</BlockCardLayout>
)
default:
return (
<BlockCardLayout {...props}>
<BlockIcon type={props.type} />
<BlockLabel type={props.type} />
</BlockCardLayout>
)
}
}
const BlockCardLayout = ({ type, onMouseDown, tooltip, children }: Props) => {
const { draggedBlockType } = useBlockDnd()
const [isMouseDown, setIsMouseDown] = useState(false)
@@ -24,7 +107,7 @@ export const BlockCard = ({
const handleMouseDown = (e: React.MouseEvent) => onMouseDown(e, type)
return (
<Tooltip label="Coming soon!" isDisabled={!isDisabled}>
<Tooltip label={tooltip}>
<Flex pos="relative">
<HStack
borderWidth="1px"
@@ -32,21 +115,15 @@ export const BlockCard = ({
rounded="lg"
flex="1"
cursor={'grab'}
opacity={isMouseDown || isDisabled ? '0.4' : '1'}
opacity={isMouseDown ? '0.4' : '1'}
onMouseDown={handleMouseDown}
bgColor={useColorModeValue('gray.50', 'gray.850')}
px="4"
py="2"
_hover={useColorModeValue({ shadow: 'md' }, { bgColor: 'gray.800' })}
transition="box-shadow 200ms, background-color 200ms"
pointerEvents={isDisabled ? 'none' : 'auto'}
>
{!isMouseDown ? (
<>
<BlockIcon type={type} />
<BlockTypeLabel type={type} />
</>
) : null}
{!isMouseDown ? children : null}
</HStack>
</Flex>
</Tooltip>

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

@@ -1,7 +1,7 @@
import { StackProps, HStack, useColorModeValue } from '@chakra-ui/react'
import { BlockType } from 'models'
import { BlockIcon } from './BlockIcon'
import { BlockTypeLabel } from './BlockTypeLabel'
import { BlockLabel } from './BlockLabel'
export const BlockCardOverlay = ({
type,
@@ -24,7 +24,7 @@ export const BlockCardOverlay = ({
{...props}
>
<BlockIcon type={type} />
<BlockTypeLabel type={type} />
<BlockLabel type={type} />
</HStack>
)
}

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

@@ -37,10 +37,11 @@ import { GoogleAnalyticsLogo } from '@/features/blocks/integrations/googleAnalyt
import { AudioBubbleIcon } from '@/features/blocks/bubbles/audio'
import { WaitIcon } from '@/features/blocks/logic/wait/components/WaitIcon'
import { ScriptIcon } from '@/features/blocks/logic/script/components/ScriptIcon'
import { JumpIcon } from '@/features/blocks/logic/jump/components/JumpIcon'
type BlockIconProps = { type: BlockType } & IconProps
export const BlockIcon = ({ type, ...props }: BlockIconProps) => {
export const BlockIcon = ({ type, ...props }: BlockIconProps): JSX.Element => {
const blue = useColorModeValue('blue.500', 'blue.300')
const orange = useColorModeValue('orange.500', 'orange.300')
const purple = useColorModeValue('purple.500', 'purple.300')
@@ -85,6 +86,8 @@ export const BlockIcon = ({ type, ...props }: BlockIconProps) => {
return <ScriptIcon {...props} />
case LogicBlockType.WAIT:
return <WaitIcon color={purple} {...props} />
case LogicBlockType.JUMP:
return <JumpIcon color={purple} {...props} />
case LogicBlockType.TYPEBOT_LINK:
return <TypebotLinkIcon color={purple} {...props} />
case IntegrationBlockType.GOOGLE_SHEETS:

50
apps/builder/src/features/editor/components/BlocksSideBar/BlockTypeLabel.tsx → apps/builder/src/features/editor/components/BlocksSideBar/BlockLabel.tsx
View File

@@ -1,6 +1,4 @@
import { HStack, Text, Tooltip } from '@chakra-ui/react'
import { useWorkspace } from '@/features/workspace'
import { Plan } from 'db'
import { Text } from '@chakra-ui/react'
import {
BubbleBlockType,
InputBlockType,
@@ -9,13 +7,10 @@ import {
BlockType,
} from 'models'
import React from 'react'
import { isFreePlan, LockTag } from '@/features/billing'
type Props = { type: BlockType }
export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
const { workspace } = useWorkspace()
export const BlockLabel = ({ type }: Props): JSX.Element => {
switch (type) {
case 'start':
return <Text>Start</Text>
@@ -27,11 +22,7 @@ export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
case BubbleBlockType.VIDEO:
return <Text>Video</Text>
case BubbleBlockType.EMBED:
return (
<Tooltip label="Embed a pdf, an iframe, a website...">
<Text>Embed</Text>
</Tooltip>
)
return <Text>Embed</Text>
case BubbleBlockType.AUDIO:
return <Text>Audio</Text>
case InputBlockType.NUMBER:
@@ -51,14 +42,7 @@ export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
case InputBlockType.RATING:
return <Text>Rating</Text>
case InputBlockType.FILE:
return (
<Tooltip label="Upload Files">
<HStack>
<Text>File</Text>
{isFreePlan(workspace) && <LockTag plan={Plan.STARTER} />}
</HStack>
</Tooltip>
)
return <Text>File</Text>
case LogicBlockType.SET_VARIABLE:
return <Text>Set variable</Text>
case LogicBlockType.CONDITION:
@@ -66,31 +50,17 @@ export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
case LogicBlockType.REDIRECT:
return <Text>Redirect</Text>
case LogicBlockType.SCRIPT:
return (
<Tooltip label="Run Javascript code">
<Text>Script</Text>
</Tooltip>
)
return <Text>Script</Text>
case LogicBlockType.TYPEBOT_LINK:
return (
<Tooltip label="Link to another of your typebots">
<Text>Typebot</Text>
</Tooltip>
)
return <Text>Typebot</Text>
case LogicBlockType.WAIT:
return <Text>Wait</Text>
case LogicBlockType.JUMP:
return <Text>Jump</Text>
case IntegrationBlockType.GOOGLE_SHEETS:
return (
<Tooltip label="Google Sheets">
<Text>Sheets</Text>
</Tooltip>
)
return <Text>Sheets</Text>
case IntegrationBlockType.GOOGLE_ANALYTICS:
return (
<Tooltip label="Google Analytics">
<Text>Analytics</Text>
</Tooltip>
)
return <Text>Analytics</Text>
case IntegrationBlockType.WEBHOOK:
return <Text>Webhook</Text>
case IntegrationBlockType.ZAPIER: