blsmedia/bot
2
0
Fork 0
Code Activity

🚸 (typebotLink) Add icon in typebots dropdown

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-11-16 15:47:16 +01:00
parent 2bd7cee58e
commit 0c3dcc522e
11 changed files with 49 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/builder/src/components/SearchableDropdown.tsx
View File

@ -11,14 +11,14 @@ import {
HStack,
} from '@chakra-ui/react'
import { Variable } from 'models'
import { useState, useRef, useEffect, ChangeEvent } from 'react'
import { useState, useRef, useEffect, ChangeEvent, ReactNode } from 'react'
import { useDebouncedCallback } from 'use-debounce'
import { env, isDefined } from 'utils'
import { VariablesButton } from '@/features/variables'
type Props = {
selectedItem?: string
items: string[]
items: (string | { label: ReactNode; value: string })[]
debounceTimeout?: number
withVariableButton?: boolean
onValueChange?: (value: string) => void
@ -43,7 +43,9 @@ export const SearchableDropdown = ({
const [filteredItems, setFilteredItems] = useState([
...items
.filter((item) =>
item.toLowerCase().includes((selectedItem ?? '').toLowerCase())
(typeof item === 'string' ? item : item.value)
.toLowerCase()
.includes((selectedItem ?? '').toLowerCase())
)
.slice(0, 50),
])
@ -67,7 +69,9 @@ export const SearchableDropdown = ({
setFilteredItems([
...items
.filter((item) =>
item.toLowerCase().includes((selectedItem ?? '').toLowerCase())
(typeof item === 'string' ? item : item.value)
.toLowerCase()
.includes((selectedItem ?? '').toLowerCase())
)
.slice(0, 50),
])
@ -91,7 +95,9 @@ export const SearchableDropdown = ({
setFilteredItems([
...items
.filter((item) =>
item.toLowerCase().includes((inputValue ?? '').toLowerCase())
(typeof item === 'string' ? item : item.value)
.toLowerCase()
.includes((inputValue ?? '').toLowerCase())
)
.slice(0, 50),
])
@ -134,7 +140,8 @@ export const SearchableDropdown = ({
if (inputRef.current?.selectionStart)
setCarretPosition(inputRef.current.selectionStart)
if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
handleItemClick(filteredItems[keyboardFocusIndex])()
const item = filteredItems[keyboardFocusIndex]
handleItemClick(typeof item === 'string' ? item : item.value)()
return setKeyboardFocusIndex(undefined)
}
if (e.key === 'ArrowDown') {
@ -200,7 +207,9 @@ export const SearchableDropdown = ({
ref={(el) => (itemsRef.current[idx] = el)}
minH="40px"
key={idx}
onClick={handleItemClick(item)}
onClick={handleItemClick(
typeof item === 'string' ? item : item.value
)}
fontSize="16px"
fontWeight="normal"
rounded="none"
@ -212,7 +221,7 @@ export const SearchableDropdown = ({
}
justifyContent="flex-start"
>
{item}
{typeof item === 'string' ? item : item.label}
</Button>
)
})}

0
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/GroupsDropdown.tsx → apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/GroupsDropdown.tsx
View File

5
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/TypebotLinkSettingsForm.tsx → apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotLinkForm.tsx
View File

@ -10,10 +10,7 @@ type Props = {
onOptionsChange: (options: TypebotLinkOptions) => void
}
export const TypebotLinkSettingsForm = ({
options,
onOptionsChange,
}: Props) => {
export const TypebotLinkForm = ({ options, onOptionsChange }: Props) => {
const { linkedTypebots, typebot } = useTypebot()
const handleTypebotIdChange = (typebotId: string | 'current') =>

23
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/TypebotsDropdown.tsx → apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotsDropdown.tsx
View File

@ -1,4 +1,4 @@
import { HStack, IconButton, Input } from '@chakra-ui/react'
import { HStack, IconButton, Input, Text } from '@chakra-ui/react'
import { ExternalLinkIcon } from '@/components/icons'
import { useToast } from '@/hooks/useToast'
import Link from 'next/link'
@ -7,6 +7,7 @@ import { useMemo } from 'react'
import { byId } from 'utils'
import { useTypebots } from '@/features/dashboard'
import { SearchableDropdown } from '@/components/SearchableDropdown'
import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
type Props = {
typebotId?: string | 'current'
@ -46,7 +47,25 @@ export const TypebotsDropdown = ({
selectedItem={
typebotId === 'current' ? 'Current typebot' : currentTypebot?.name
}
items={['Current typebot', ...(typebots ?? []).map((t) => t.name)]}
items={[
{
label: 'Current typebot',
value: 'Current typebot',
},
...(typebots ?? []).map((typebot) => ({
value: typebot.name,
label: (
<HStack as="span" spacing="2">
<EmojiOrImageIcon
icon={typebot.icon}
boxSize="18px"
emojiFontSize="18px"
/>
<Text>{typebot.name}</Text>
</HStack>
),
})),
]}
onValueChange={handleTypebotSelect}
placeholder={'Select a typebot'}
/>

1
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/index.tsx Normal file
View File

@ -0,0 +1 @@
export { TypebotLinkForm } from './TypebotLinkForm'

2
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkContent.tsx → apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkNode.tsx
View File

@ -8,7 +8,7 @@ type Props = {
block: TypebotLinkBlock
}
export const TypebotLinkContent = ({ block }: Props) => {
export const TypebotLinkNode = ({ block }: Props) => {
const { linkedTypebots, typebot } = useTypebot()
const isCurrentTypebot =
typebot &&

1
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkSettingsForm/index.tsx
View File

@ -1 +0,0 @@
export { TypebotLinkSettingsForm } from './TypebotLinkSettingsForm'

3
apps/builder/src/features/blocks/logic/typebotLink/components/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './TypebotLinkNode'
export * from './TypebotLinkIcon'
export * from './TypebotLinkForm'

4
apps/builder/src/features/blocks/logic/typebotLink/index.ts
View File

@ -1,3 +1 @@
export { TypebotLinkSettingsForm } from './components/TypebotLinkSettingsForm'
export { TypebotLinkContent } from './components/TypebotLinkContent'
export { TypebotLinkIcon } from './components/TypebotLinkIcon'
export * from './components'

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

@ -29,7 +29,7 @@ import { WithVariableContent } from './WithVariableContent'
import { PaymentInputContent } from '@/features/blocks/inputs/payment'
import { RatingInputContent } from '@/features/blocks/inputs/rating'
import { FileInputContent } from '@/features/blocks/inputs/fileUpload'
import { TypebotLinkContent } from '@/features/blocks/logic/typebotLink'
import { TypebotLinkNode } from '@/features/blocks/logic/typebotLink'
import { GoogleSheetsNodeContent } from '@/features/blocks/integrations/googleSheets'
import { GoogleAnalyticsNodeContent } from '@/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsNodeContent'
import { ZapierContent } from '@/features/blocks/integrations/zapier'
@ -117,7 +117,7 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
)
}
case LogicBlockType.TYPEBOT_LINK:
return <TypebotLinkContent block={block} />
return <TypebotLinkNode block={block} />
case IntegrationBlockType.GOOGLE_SHEETS: {
return (

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

@ -34,7 +34,7 @@ import { ZapierSettings } from '@/features/blocks/integrations/zapier'
import { CodeSettings } from '@/features/blocks/logic/code'
import { RedirectSettings } from '@/features/blocks/logic/redirect'
import { SetVariableSettings } from '@/features/blocks/logic/setVariable'
import { TypebotLinkSettingsForm } from '@/features/blocks/logic/typebotLink'
import { TypebotLinkForm } from '@/features/blocks/logic/typebotLink'
import { ButtonsOptionsForm } from '@/features/blocks/inputs/buttons'
import { ChatwootSettingsForm } from '@/features/blocks/integrations/chatwoot'
@ -200,7 +200,7 @@ export const BlockSettings = ({
}
case LogicBlockType.TYPEBOT_LINK: {
return (
<TypebotLinkSettingsForm
<TypebotLinkForm
options={block.options}
onOptionsChange={handleOptionsChange}
/>