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

4
apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx
View File

@@ -51,9 +51,9 @@ export const GoogleSheetsSettingsBody = ({
)
const handleCredentialsIdChange = (credentialsId?: string) =>
onOptionsChange({ ...omit(options, 'credentialsId'), credentialsId })
const handleSpreadsheetIdChange = (spreadsheetId: string) =>
const handleSpreadsheetIdChange = (spreadsheetId: string | undefined) =>
onOptionsChange({ ...options, spreadsheetId })
const handleSheetIdChange = (sheetId: string) =>
const handleSheetIdChange = (sheetId: string | undefined) =>
onOptionsChange({ ...options, sheetId })
const handleActionChange = (action: GoogleSheetsAction) => {

2
apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/SheetsDropdown.tsx
View File

@@ -7,7 +7,7 @@ type Props = {
sheets: Sheet[]
isLoading: boolean
sheetId?: string
onSelectSheetId: (id: string) => void
onSelectSheetId: (id: string | undefined) => void
}
export const SheetsDropdown = ({

2
apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx
View File

@@ -5,7 +5,7 @@ import { useSpreadsheets } from '../../hooks/useSpreadsheets'
type Props = {
credentialsId: string
spreadsheetId?: string
onSelectSpreadsheetId: (id: string) => void
onSelectSpreadsheetId: (id: string | undefined) => void
}
export const SpreadsheetsDropdown = ({

10
apps/builder/src/features/blocks/logic/jump/components/JumpIcon.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { featherIconsBaseProps } from '@/components/icons'
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const JumpIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<polygon points="13 19 22 12 13 5 13 19"></polygon>
<polygon points="2 19 11 12 2 5 2 19"></polygon>
</Icon>
)

26
apps/builder/src/features/blocks/logic/jump/components/JumpNodeBody.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react'
import { Tag, Text } from '@chakra-ui/react'
import { useTypebot } from '@/features/editor'
import { byId, isDefined } from 'utils'
import { JumpBlock } from 'models/features/blocks/logic/jump'
type Props = {
options: JumpBlock['options']
}
export const JumpNodeBody = ({ options }: Props) => {
const { typebot } = useTypebot()
const selectedGroup = typebot?.groups.find(byId(options.groupId))
const blockIndex = selectedGroup?.blocks.findIndex(byId(options.blockId))
if (!selectedGroup) return <Text color="gray.500">Configure...</Text>
return (
<Text>
Jump to <Tag colorScheme="blue">{selectedGroup.title}</Tag>{' '}
{isDefined(blockIndex) && blockIndex >= 0 ? (
<>
at block <Tag colorScheme="blue">{blockIndex + 1}</Tag>
</>
) : null}
</Text>
)
}

55
apps/builder/src/features/blocks/logic/jump/components/JumpSettings.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { Select } from '@/components/inputs/Select'
import { useTypebot } from '@/features/editor'
import { Stack } from '@chakra-ui/react'
import { JumpBlock } from 'models/features/blocks/logic/jump'
import React from 'react'
import { byId } from 'utils'
type Props = {
groupId: string
options: JumpBlock['options']
onOptionsChange: (options: JumpBlock['options']) => void
}
export const JumpSettings = ({ groupId, options, onOptionsChange }: Props) => {
const { typebot } = useTypebot()
const handleGroupIdChange = (groupId?: string) =>
onOptionsChange({ ...options, groupId })
const handleBlockIdChange = (blockId?: string) =>
onOptionsChange({ ...options, blockId })
const currentGroupId = typebot?.groups.find(byId(groupId))?.id
const selectedGroup = typebot?.groups.find(byId(options.groupId))
if (!typebot) return null
return (
<Stack spacing={4}>
<Select
items={typebot.groups
.filter((group) => group.id !== currentGroupId)
.map((group) => ({
label: group.title,
value: group.id,
}))}
selectedItem={selectedGroup?.id}
onSelect={handleGroupIdChange}
placeholder="Select a group"
/>
{selectedGroup && selectedGroup.blocks.length > 1 && (
<Select
selectedItem={options.blockId}
items={selectedGroup.blocks.map((block, index) => ({
label: `Block #${(index + 1).toString()}`,
value: block.id,
}))}
onSelect={handleBlockIdChange}
placeholder="Select a block"
/>
)}
</Stack>
)
}

28
apps/builder/src/features/blocks/logic/jump/jump.spec.ts Normal file
View File

@@ -0,0 +1,28 @@
import test, { expect } from '@playwright/test'
import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
import { createId } from '@paralleldrive/cuid2'
import { getTestAsset } from '@/test/utils/playwright'
test('should work as expected', async ({ page }) => {
const typebotId = createId()
await importTypebotInDatabase(getTestAsset('typebots/logic/jump.json'), {
id: typebotId,
})
await page.goto(`/typebots/${typebotId}/edit`)
await page.getByText('Configure...').click()
await page.getByPlaceholder('Select a group').click()
await expect(page.getByRole('menuitem', { name: 'Group #2' })).toBeHidden()
await page.getByRole('menuitem', { name: 'Group #1' }).click()
await page.getByPlaceholder('Select a block').click()
await page.getByRole('menuitem', { name: 'Block #2' }).click()
await page.getByRole('button', { name: 'Preview' }).click()
await page.getByPlaceholder('Type your answer...').fill('Hi there!')
await page.getByRole('button', { name: 'Send' }).click()
await expect(
page.locator('typebot-standard').getByText('How are you?').nth(1)
).toBeVisible()
await expect(
page.locator('typebot-standard').getByText('Hello this is a test!').nth(1)
).toBeHidden()
})

2
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/GroupsDropdown.tsx
View File

@@ -5,7 +5,7 @@ import { Group } from 'models'
type Props = {
groups: Group[]
groupId?: string
onGroupIdSelected: (groupId: string) => void
onGroupIdSelected: (groupId: string | undefined) => void
isLoading?: boolean
}

4
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotLinkForm.tsx
View File

@@ -13,9 +13,9 @@ type Props = {
export const TypebotLinkForm = ({ options, onOptionsChange }: Props) => {
const { linkedTypebots, typebot } = useTypebot()
const handleTypebotIdChange = (typebotId: string | 'current') =>
const handleTypebotIdChange = (typebotId: string | 'current' | undefined) =>
onOptionsChange({ ...options, typebotId })
const handleGroupIdChange = (groupId: string) =>
const handleGroupIdChange = (groupId: string | undefined) =>
onOptionsChange({ ...options, groupId })
return (

2
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotsDropdown.tsx
View File

@@ -11,7 +11,7 @@ type Props = {
idsToExclude: string[]
typebotId?: string | 'current'
currentWorkspaceId: string
onSelect: (typebotId: string | 'current') => void
onSelect: (typebotId: string | 'current' | undefined) => void
}
export const TypebotsDropdown = ({

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:

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

@@ -224,6 +224,7 @@ export const BlockNode = ({
align="flex-start"
w="full"
transition="border-color 0.2s"
overflow="hidden"
>
<BlockIcon
type={block.type}

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

@@ -39,6 +39,7 @@ import { AudioBubbleNode } from '@/features/blocks/bubbles/audio'
import { WaitNodeContent } from '@/features/blocks/logic/wait/components/WaitNodeContent'
import { ScriptNodeContent } from '@/features/blocks/logic/script/components/ScriptNodeContent'
import { ButtonsBlockNode } from '@/features/blocks/inputs/buttons/components/ButtonsBlockNode'
import { JumpNodeBody } from '@/features/blocks/logic/jump/components/JumpNodeBody'
type Props = {
block: Block | StartBlock
@@ -125,6 +126,9 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
case LogicBlockType.WAIT: {
return <WaitNodeContent options={block.options} />
}
case LogicBlockType.JUMP: {
return <JumpNodeBody options={block.options} />
}
case LogicBlockType.TYPEBOT_LINK:
return <TypebotLinkNode block={block} />
case LogicBlockType.CONDITION:

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

@@ -42,6 +42,7 @@ import { MakeComSettings } from '@/features/blocks/integrations/makeCom'
import { HelpDocButton } from './HelpDocButton'
import { WaitSettings } from '@/features/blocks/logic/wait/components/WaitSettings'
import { ScriptSettings } from '@/features/blocks/logic/script/components/ScriptSettings'
import { JumpSettings } from '@/features/blocks/logic/jump/components/JumpSettings'
type Props = {
block: BlockWithOptions
@@ -220,6 +221,15 @@ export const BlockSettings = ({
/>
)
}
case LogicBlockType.JUMP: {
return (
<JumpSettings
groupId={block.groupId}
options={block.options}
onOptionsChange={handleOptionsChange}
/>
)
}
case IntegrationBlockType.GOOGLE_SHEETS: {
return (
<GoogleSheetsSettingsBody

1
apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx
View File

@@ -227,6 +227,7 @@ const NonMemoizedDraggableGroupNode = ({
bg: editableHoverBg,
}}
px="1"
noOfLines={2}
userSelect={'none'}
/>
<EditableInput minW="0" px="1" className="prevent-group-drag" />

2
apps/builder/src/features/graph/utils.ts
View File

@@ -409,6 +409,8 @@ const parseDefaultBlockOptions = (type: BlockWithOptionsType): BlockOptions => {
return defaultScriptOptions
case LogicBlockType.WAIT:
return defaultWaitOptions
case LogicBlockType.JUMP:
return {}
case LogicBlockType.TYPEBOT_LINK:
return {}
case IntegrationBlockType.GOOGLE_SHEETS: