blsmedia/bot
2
0
Fork 0
Code Activity

refactor(♻️ Add defaults everywhere (+ settings page)):

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-25 18:19:37 +01:00
parent 21448bcc8a
commit c5aaa323d1
115 changed files with 1436 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/ContentPopover.tsx
View File

@ -8,10 +8,11 @@ import { ImageUploadContent } from 'components/shared/ImageUploadContent'
import { useTypebot } from 'contexts/TypebotContext'
import {
BubbleStep,
BubbleStepContent,
BubbleStepType,
ImageBubbleStep,
TextBubbleStep,
VideoBubbleContent,
VideoBubbleStep,
} from 'models'
import { useRef } from 'react'
import { VideoUploadContent } from './VideoUploadContent'
@ -39,14 +40,17 @@ export const ContentPopover = ({ step }: Props) => {
export const StepContent = ({ step }: Props) => {
const { updateStep } = useTypebot()
const handleContentChange = (content: BubbleStepContent) =>
updateStep(step.id, { content } as Partial<ImageBubbleStep>)
const handleContentChange = (url: string) =>
updateStep(step.id, { content: { url } } as Partial<ImageBubbleStep>)
const handleVideoContentChange = (content: VideoBubbleContent) =>
updateStep(step.id, { content } as Partial<VideoBubbleStep>)
switch (step.type) {
case BubbleStepType.IMAGE: {
return (
<ImageUploadContent
content={step.content}
url={step.content?.url}
onSubmit={handleContentChange}
/>
)
@ -55,7 +59,7 @@ export const StepContent = ({ step }: Props) => {
return (
<VideoUploadContent
content={step.content}
onSubmit={handleContentChange}
onSubmit={handleVideoContentChange}
/>
)
}

2
apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/VideoUploadContent.tsx
View File

@ -1,5 +1,5 @@
import { Stack, Text } from '@chakra-ui/react'
import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { VideoBubbleContent, VideoBubbleContentType } from 'models'
import urlParser from 'js-video-url-parser/lib/base'
import 'js-video-url-parser/lib/provider/vimeo'

2
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx
View File

@ -1,6 +1,6 @@
import { Stack } from '@chakra-ui/react'
import { DropdownList } from 'components/shared/DropdownList'
import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { TableListItemProps } from 'components/shared/TableList'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { Comparison, Variable, ComparisonOperators } from 'models'

16
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
View File

@ -6,7 +6,7 @@ import { DateInputOptions, Variable } from 'models'
import React from 'react'
type DateInputSettingsBodyProps = {
options?: DateInputOptions
options: DateInputOptions
onOptionsChange: (options: DateInputOptions) => void
}
@ -32,23 +32,23 @@ export const DateInputSettingsBody = ({
<SwitchWithLabel
id="is-range"
label={'Is range?'}
initialValue={options?.isRange ?? false}
initialValue={options.isRange}
onCheckChange={handleIsRangeChange}
/>
<SwitchWithLabel
id="with-time"
label={'With time?'}
initialValue={options?.isRange ?? false}
initialValue={options.isRange}
onCheckChange={handleHasTimeChange}
/>
{options?.isRange && (
{options.isRange && (
<Stack>
<FormLabel mb="0" htmlFor="from">
From label:
</FormLabel>
<DebouncedInput
id="from"
initialValue={options?.labels?.from ?? 'From:'}
initialValue={options.labels.from}
delay={100}
onChange={handleFromChange}
/>
@ -61,7 +61,7 @@ export const DateInputSettingsBody = ({
</FormLabel>
<DebouncedInput
id="to"
initialValue={options?.labels?.to ?? 'To:'}
initialValue={options.labels.to}
delay={100}
onChange={handleToChange}
/>
@ -73,7 +73,7 @@ export const DateInputSettingsBody = ({
</FormLabel>
<DebouncedInput
id="button"
initialValue={options?.labels?.button ?? 'Send'}
initialValue={options.labels.button}
delay={100}
onChange={handleButtonLabelChange}
/>
@ -83,7 +83,7 @@ export const DateInputSettingsBody = ({
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
initialVariableId={options.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>

12
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
View File

@ -5,7 +5,7 @@ import { EmailInputOptions, Variable } from 'models'
import React from 'react'
type EmailInputSettingsBodyProps = {
options?: EmailInputOptions
options: EmailInputOptions
onOptionsChange: (options: EmailInputOptions) => void
}
@ -14,9 +14,9 @@ export const EmailInputSettingsBody = ({
onOptionsChange,
}: EmailInputSettingsBodyProps) => {
const handlePlaceholderChange = (placeholder: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
onOptionsChange({ ...options, labels: { ...options.labels, button } })
const handleVariableChange = (variable?: Variable) =>
onOptionsChange({ ...options, variableId: variable?.id })
@ -28,7 +28,7 @@ export const EmailInputSettingsBody = ({
</FormLabel>
<DebouncedInput
id="placeholder"
initialValue={options?.labels?.placeholder ?? 'Type your email...'}
initialValue={options.labels.placeholder}
delay={100}
onChange={handlePlaceholderChange}
/>
@ -39,7 +39,7 @@ export const EmailInputSettingsBody = ({
</FormLabel>
<DebouncedInput
id="button"
initialValue={options?.labels?.button ?? 'Send'}
initialValue={options.labels.button}
delay={100}
onChange={handleButtonLabelChange}
/>
@ -49,7 +49,7 @@ export const EmailInputSettingsBody = ({
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
initialVariableId={options.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>

2
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx
View File

@ -10,7 +10,7 @@ import {
Tag,
} from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { GoogleAnalyticsOptions } from 'models'
import React from 'react'

2
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx
View File

@ -1,6 +1,6 @@
import { Stack } from '@chakra-ui/react'
import { DropdownList } from 'components/shared/DropdownList'
import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { TableListItemProps } from 'components/shared/TableList'
import { Cell } from 'models'

18
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
View File

@ -1,5 +1,5 @@
import { FormLabel, HStack, Stack } from '@chakra-ui/react'
import { SmartNumberInput } from 'components/settings/SmartNumberInput'
import { SmartNumberInput } from 'components/shared/SmartNumberInput'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { NumberInputOptions, Variable } from 'models'
@ -7,7 +7,7 @@ import React from 'react'
import { removeUndefinedFields } from 'services/utils'
type NumberInputSettingsBodyProps = {
options?: NumberInputOptions
options: NumberInputOptions
onOptionsChange: (options: NumberInputOptions) => void
}
@ -16,9 +16,9 @@ export const NumberInputSettingsBody = ({
onOptionsChange,
}: NumberInputSettingsBodyProps) => {
const handlePlaceholderChange = (placeholder: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
onOptionsChange({ ...options, labels: { ...options.labels, button } })
const handleMinChange = (min?: number) =>
onOptionsChange(removeUndefinedFields({ ...options, min }))
const handleMaxChange = (max?: number) =>
@ -36,7 +36,7 @@ export const NumberInputSettingsBody = ({
</FormLabel>
<DebouncedInput
id="placeholder"
initialValue={options?.labels?.placeholder ?? 'Type your answer...'}
initialValue={options.labels.placeholder}
delay={100}
onChange={handlePlaceholderChange}
/>
@ -58,7 +58,7 @@ export const NumberInputSettingsBody = ({
</FormLabel>
<SmartNumberInput
id="min"
initialValue={options?.min}
value={options.min}
onValueChange={handleMinChange}
/>
</HStack>
@ -68,7 +68,7 @@ export const NumberInputSettingsBody = ({
</FormLabel>
<SmartNumberInput
id="max"
initialValue={options?.max}
value={options.max}
onValueChange={handleMaxChange}
/>
</HStack>
@ -78,7 +78,7 @@ export const NumberInputSettingsBody = ({
</FormLabel>
<SmartNumberInput
id="step"
initialValue={options?.step}
value={options.step}
onValueChange={handleStepChange}
/>
</HStack>
@ -87,7 +87,7 @@ export const NumberInputSettingsBody = ({
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
initialVariableId={options.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>

12
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx
View File

@ -5,7 +5,7 @@ import { EmailInputOptions, Variable } from 'models'
import React from 'react'
type PhoneNumberSettingsBodyProps = {
options?: EmailInputOptions
options: EmailInputOptions
onOptionsChange: (options: EmailInputOptions) => void
}
@ -14,9 +14,9 @@ export const PhoneNumberSettingsBody = ({
onOptionsChange,
}: PhoneNumberSettingsBodyProps) => {
const handlePlaceholderChange = (placeholder: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
onOptionsChange({ ...options, labels: { ...options.labels, button } })
const handleVariableChange = (variable?: Variable) =>
onOptionsChange({ ...options, variableId: variable?.id })
@ -28,7 +28,7 @@ export const PhoneNumberSettingsBody = ({
</FormLabel>
<DebouncedInput
id="placeholder"
initialValue={options?.labels?.placeholder ?? 'Your phone number...'}
initialValue={options.labels.placeholder}
delay={100}
onChange={handlePlaceholderChange}
/>
@ -39,7 +39,7 @@ export const PhoneNumberSettingsBody = ({
</FormLabel>
<DebouncedInput
id="button"
initialValue={options?.labels?.button ?? 'Send'}
initialValue={options.labels.button}
delay={100}
onChange={handleButtonLabelChange}
/>
@ -49,7 +49,7 @@ export const PhoneNumberSettingsBody = ({
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
initialVariableId={options.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>

8
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
View File

@ -5,14 +5,14 @@ import { RedirectOptions } from 'models'
import React from 'react'
type Props = {
options?: RedirectOptions
options: RedirectOptions
onOptionsChange: (options: RedirectOptions) => void
}
export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
const handleUrlChange = (url?: string) => onOptionsChange({ ...options, url })
const handleIsNewTabChange = (isNewTab?: boolean) =>
const handleIsNewTabChange = (isNewTab: boolean) =>
onOptionsChange({ ...options, isNewTab })
return (
@ -23,7 +23,7 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
</FormLabel>
<DebouncedInput
id="tracking-id"
initialValue={options?.url ?? ''}
initialValue={options.url ?? ''}
placeholder="Type a URL..."
delay={100}
onChange={handleUrlChange}
@ -32,7 +32,7 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
<SwitchWithLabel
id="new-tab"
label="Open in new tab?"
initialValue={options?.isNewTab ?? false}
initialValue={options.isNewTab}
onCheckChange={handleIsNewTabChange}
/>
</Stack>

6
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/SetVariableSettingsBody.tsx
View File

@ -5,7 +5,7 @@ import { SetVariableOptions, Variable } from 'models'
import React from 'react'
type Props = {
options?: SetVariableOptions
options: SetVariableOptions
onOptionsChange: (options: SetVariableOptions) => void
}
@ -26,7 +26,7 @@ export const SetVariableSettingsBody = ({
</FormLabel>
<VariableSearchInput
onSelectVariable={handleVariableChange}
initialVariableId={options?.variableId}
initialVariableId={options.variableId}
id="variable-search"
/>
</Stack>
@ -36,7 +36,7 @@ export const SetVariableSettingsBody = ({
</FormLabel>
<DebouncedTextarea
id="expression"
initialValue={options?.expressionToEvaluate ?? ''}
initialValue={options.expressionToEvaluate ?? ''}
delay={100}
onChange={handleExpressionChange}
/>

12
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
View File

@ -6,7 +6,7 @@ import { TextInputOptions, Variable } from 'models'
import React from 'react'
type TextInputSettingsBodyProps = {
options?: TextInputOptions
options: TextInputOptions
onOptionsChange: (options: TextInputOptions) => void
}
@ -15,9 +15,9 @@ export const TextInputSettingsBody = ({
onOptionsChange,
}: TextInputSettingsBodyProps) => {
const handlePlaceholderChange = (placeholder: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
onOptionsChange({ ...options, labels: { ...options.labels, button } })
const handleLongChange = (isLong: boolean) =>
onOptionsChange({ ...options, isLong })
const handleVariableChange = (variable?: Variable) =>
@ -37,7 +37,7 @@ export const TextInputSettingsBody = ({
</FormLabel>
<DebouncedInput
id="placeholder"
initialValue={options?.labels?.placeholder ?? 'Type your answer...'}
initialValue={options.labels.placeholder}
delay={100}
onChange={handlePlaceholderChange}
/>
@ -48,7 +48,7 @@ export const TextInputSettingsBody = ({
</FormLabel>
<DebouncedInput
id="button"
initialValue={options?.labels?.button ?? 'Send'}
initialValue={options.labels.button}
delay={100}
onChange={handleButtonLabelChange}
/>
@ -58,7 +58,7 @@ export const TextInputSettingsBody = ({
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
initialVariableId={options.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>

12
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx
View File

@ -5,7 +5,7 @@ import { UrlInputOptions, Variable } from 'models'
import React from 'react'
type UrlInputSettingsBodyProps = {
options?: UrlInputOptions
options: UrlInputOptions
onOptionsChange: (options: UrlInputOptions) => void
}
@ -14,9 +14,9 @@ export const UrlInputSettingsBody = ({
onOptionsChange,
}: UrlInputSettingsBodyProps) => {
const handlePlaceholderChange = (placeholder: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
onOptionsChange({ ...options, labels: { ...options.labels, button } })
const handleVariableChange = (variable?: Variable) =>
onOptionsChange({ ...options, variableId: variable?.id })
@ -28,7 +28,7 @@ export const UrlInputSettingsBody = ({
</FormLabel>
<DebouncedInput
id="placeholder"
initialValue={options?.labels?.placeholder ?? 'Type your URL...'}
initialValue={options.labels.placeholder}
delay={100}
onChange={handlePlaceholderChange}
/>
@ -39,7 +39,7 @@ export const UrlInputSettingsBody = ({
</FormLabel>
<DebouncedInput
id="button"
initialValue={options?.labels?.button ?? 'Send'}
initialValue={options.labels.button}
delay={100}
onChange={handleButtonLabelChange}
/>
@ -49,7 +49,7 @@ export const UrlInputSettingsBody = ({
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
initialVariableId={options.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>

2
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/WebhookSettings/KeyValueInputs.tsx
View File

@ -1,5 +1,5 @@
import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { TableListItemProps } from 'components/shared/TableList'
import { KeyValue } from 'models'

2
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
View File

@ -10,7 +10,7 @@ import {
Stack,
useToast,
} from '@chakra-ui/react'
import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { useTypebot } from 'contexts/TypebotContext'
import {
HttpMethod,

2
apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/StepNodeContent.tsx
View File

@ -103,7 +103,7 @@ export const StepNodeContent = ({ step }: Props) => {
return <ConditionNodeContent step={step} />
}
case LogicStepType.REDIRECT: {
if (!step.options) return <Text color={'gray.500'}>Configure...</Text>
if (!step.options.url) return <Text color={'gray.500'}>Configure...</Text>
return <Text isTruncated>Redirect to {step.options?.url}</Text>
}
case IntegrationStepType.GOOGLE_SHEETS: {

33
apps/builder/components/settings/GeneralSettingsForm.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Flex, FormLabel, Stack, Switch, Text } from '@chakra-ui/react'
import { GeneralSettings } from 'models'
import React from 'react'
type Props = {
generalSettings: GeneralSettings
onGeneralSettingsChange: (generalSettings: GeneralSettings) => void
}
export const GeneralSettingsForm = ({
generalSettings,
onGeneralSettingsChange,
}: Props) => {
const handleSwitchChange = () =>
onGeneralSettingsChange({
isBrandingEnabled: !generalSettings?.isBrandingEnabled,
})
return (
<Stack spacing={6}>
<Flex justifyContent="space-between" align="center">
<FormLabel htmlFor="branding" mb="0">
Typebot.io branding
</FormLabel>
<Switch
id="branding"
isChecked={generalSettings.isBrandingEnabled}
onChange={handleSwitchChange}
/>
</Flex>
</Stack>
)
}

112
apps/builder/components/settings/MetadataForm.tsx Normal file
View File

@ -0,0 +1,112 @@
import React from 'react'
import { Metadata } from 'models'
import {
FormLabel,
Popover,
PopoverTrigger,
Stack,
Image,
PopoverContent,
} from '@chakra-ui/react'
import { ImageUploadContent } from 'components/shared/ImageUploadContent'
import {
InputWithVariableButton,
TextareaWithVariableButton,
} from 'components/shared/TextboxWithVariableButton'
type Props = {
typebotName: string
metadata: Metadata
onMetadataChange: (metadata: Metadata) => void
}
export const MetadataForm = ({
typebotName,
metadata,
onMetadataChange,
}: Props) => {
const handleTitleChange = (title: string) =>
onMetadataChange({ ...metadata, title })
const handleDescriptionChange = (description: string) =>
onMetadataChange({ ...metadata, description })
const handleFavIconSubmit = (favIconUrl: string) =>
onMetadataChange({ ...metadata, favIconUrl })
const handleImageSubmit = (imageUrl: string) =>
onMetadataChange({ ...metadata, imageUrl })
return (
<Stack spacing="6">
<Stack>
<FormLabel mb="0" htmlFor="icon">
Icon:
</FormLabel>
<Popover isLazy>
<PopoverTrigger>
<Image
src={metadata.favIconUrl ?? '/favicon.png'}
w="20px"
alt="Fav icon"
cursor="pointer"
_hover={{ filter: 'brightness(.9)' }}
transition="filter 200ms"
rounded="md"
/>
</PopoverTrigger>
<PopoverContent p="4">
<ImageUploadContent
url={metadata.favIconUrl ?? ''}
onSubmit={handleFavIconSubmit}
isGiphyEnabled={false}
/>
</PopoverContent>
</Popover>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="image">
Image:
</FormLabel>
<Popover isLazy>
<PopoverTrigger>
<Image
src={metadata.imageUrl ?? '/viewer-preview.png'}
alt="Website image"
cursor="pointer"
_hover={{ filter: 'brightness(.9)' }}
transition="filter 200ms"
rounded="md"
/>
</PopoverTrigger>
<PopoverContent p="4">
<ImageUploadContent
url={metadata.imageUrl}
onSubmit={handleImageSubmit}
isGiphyEnabled={false}
/>
</PopoverContent>
</Popover>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="title">
Title:
</FormLabel>
<InputWithVariableButton
id="title"
initialValue={metadata.title ?? typebotName}
delay={100}
onChange={handleTitleChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="description">
Description:
</FormLabel>
<TextareaWithVariableButton
id="description"
initialValue={metadata.description}
delay={100}
onChange={handleDescriptionChange}
/>
</Stack>
</Stack>
)
}

26
apps/builder/components/settings/SettingsContent.tsx
View File

@ -1,26 +0,0 @@
import { Flex, Stack } from '@chakra-ui/react'
import { TypingEmulationSettings } from 'models'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React from 'react'
import { TypingEmulation } from './TypingEmulation'
export const SettingsContent = () => {
const { typebot, updateTypebot } = useTypebot()
const handleTypingEmulationUpdate = (
typingEmulation: TypingEmulationSettings
) => {
if (!typebot) return
updateTypebot({ settings: { ...typebot.settings, typingEmulation } })
}
return (
<Flex h="full" w="full" justifyContent="center" align="flex-start">
<Stack p="6" rounded="md" borderWidth={1} w="600px" minH="500px" mt={10}>
<TypingEmulation
typingEmulation={typebot?.settings?.typingEmulation}
onUpdate={handleTypingEmulationUpdate}
/>
</Stack>
</Flex>
)
}

103
apps/builder/components/settings/SettingsSideMenu.tsx Normal file
View File

@ -0,0 +1,103 @@
import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Heading,
HStack,
Stack,
} from '@chakra-ui/react'
import { ChatIcon, CodeIcon, MoreVerticalIcon } from 'assets/icons'
import { headerHeight } from 'components/shared/TypebotHeader'
import { useTypebot } from 'contexts/TypebotContext'
import { GeneralSettings, Metadata, TypingEmulation } from 'models'
import React from 'react'
import { GeneralSettingsForm } from './GeneralSettingsForm'
import { MetadataForm } from './MetadataForm'
import { TypingEmulationForm } from './TypingEmulationForm'
export const SettingsSideMenu = () => {
const { typebot, updateTypebot } = useTypebot()
const handleTypingEmulationChange = (typingEmulation: TypingEmulation) =>
typebot &&
updateTypebot({ settings: { ...typebot.settings, typingEmulation } })
const handleGeneralSettingsChange = (general: GeneralSettings) =>
typebot && updateTypebot({ settings: { ...typebot.settings, general } })
const handleMetadataChange = (metadata: Metadata) =>
typebot && updateTypebot({ settings: { ...typebot.settings, metadata } })
return (
<Stack
flex="1"
maxW="400px"
height={`calc(100vh - ${headerHeight}px)`}
borderRightWidth={1}
pt={10}
spacing={10}
overflowY="scroll"
pb="20"
>
<Heading fontSize="xl" textAlign="center">
Settings
</Heading>
<Accordion allowMultiple allowToggle>
<AccordionItem>
<AccordionButton py={6}>
<HStack flex="1" pl={2}>
<MoreVerticalIcon transform={'rotate(90deg)'} />
<Heading fontSize="lg">General</Heading>
</HStack>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4} px="6">
{typebot && (
<GeneralSettingsForm
generalSettings={typebot.settings.general}
onGeneralSettingsChange={handleGeneralSettingsChange}
/>
)}
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<AccordionButton py={6}>
<HStack flex="1" pl={2}>
<ChatIcon />
<Heading fontSize="lg">Typing emulation</Heading>
</HStack>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4} px="6">
{typebot && (
<TypingEmulationForm
typingEmulation={typebot.settings.typingEmulation}
onUpdate={handleTypingEmulationChange}
/>
)}
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<AccordionButton py={6}>
<HStack flex="1" pl={2}>
<CodeIcon />
<Heading fontSize="lg">Metadata</Heading>
</HStack>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4} px="6">
{typebot && (
<MetadataForm
typebotName={typebot.name}
metadata={typebot.settings.metadata}
onMetadataChange={handleMetadataChange}
/>
)}
</AccordionPanel>
</AccordionItem>
</Accordion>
</Stack>
)
}

63
apps/builder/components/settings/TypingEmulation.tsx
View File

@ -1,63 +0,0 @@
import { Flex, Stack, Switch, Text } from '@chakra-ui/react'
import { TypingEmulationSettings } from 'models'
import React from 'react'
import { SmartNumberInput } from './SmartNumberInput'
type TypingEmulationProps = {
typingEmulation?: TypingEmulationSettings
onUpdate: (typingEmulation: TypingEmulationSettings) => void
}
export const TypingEmulation = ({
typingEmulation,
onUpdate,
}: TypingEmulationProps) => {
const handleSwitchChange = () => {
if (!typingEmulation) return
onUpdate({ ...typingEmulation, enabled: !typingEmulation.enabled })
}
const handleSpeedChange = (speed?: number) => {
if (!typingEmulation) return
onUpdate({ ...typingEmulation, speed: speed ?? 0 })
}
const handleMaxDelayChange = (maxDelay?: number) => {
if (!typingEmulation) return
onUpdate({ ...typingEmulation, maxDelay: maxDelay ?? 0 })
}
return (
<Stack spacing={4}>
<Flex justifyContent="space-between" align="center">
<Text>Typing emulation</Text>
<Switch
isChecked={typingEmulation?.enabled}
onChange={handleSwitchChange}
/>
</Flex>
{typingEmulation?.enabled && (
<Stack pl={10}>
<Flex justify="space-between" align="center">
<Text>Words per minutes:</Text>
<SmartNumberInput
initialValue={typingEmulation.speed}
onValueChange={handleSpeedChange}
maxW="100px"
step={30}
/>
</Flex>
<Flex justify="space-between" align="center">
<Text>Max delay (in seconds):</Text>
<SmartNumberInput
initialValue={typingEmulation.maxDelay}
onValueChange={handleMaxDelayChange}
maxW="100px"
step={0.1}
/>
</Flex>
</Stack>
)}
</Stack>
)
}

69
apps/builder/components/settings/TypingEmulationForm.tsx Normal file
View File

@ -0,0 +1,69 @@
import { Flex, FormLabel, Stack, Switch, Text } from '@chakra-ui/react'
import { TypingEmulation } from 'models'
import React from 'react'
import { isDefined } from 'utils'
import { SmartNumberInput } from '../shared/SmartNumberInput'
type Props = {
typingEmulation: TypingEmulation
onUpdate: (typingEmulation: TypingEmulation) => void
}
export const TypingEmulationForm = ({ typingEmulation, onUpdate }: Props) => {
const handleSwitchChange = () =>
onUpdate({
...typingEmulation,
enabled: !typingEmulation.enabled,
})
const handleSpeedChange = (speed?: number) =>
isDefined(speed) && onUpdate({ ...typingEmulation, speed })
const handleMaxDelayChange = (maxDelay?: number) =>
isDefined(maxDelay) && onUpdate({ ...typingEmulation, maxDelay })
return (
<Stack spacing={6}>
<Flex justifyContent="space-between" align="center">
<FormLabel htmlFor="typing-emulation" mb="0">
Typing emulation
</FormLabel>
<Switch
id="typing-emulation"
isChecked={typingEmulation.enabled}
onChange={handleSwitchChange}
/>
</Flex>
{typingEmulation.enabled && (
<Stack pl={10}>
<Flex justify="space-between" align="center">
<FormLabel htmlFor="speed" mb="0">
Words per minutes:
</FormLabel>
<SmartNumberInput
id="speed"
data-testid="speed"
value={typingEmulation.speed}
onValueChange={handleSpeedChange}
maxW="100px"
step={30}
/>
</Flex>
<Flex justify="space-between" align="center">
<FormLabel htmlFor="max-delay" mb="0">
Max delay (in seconds):
</FormLabel>
<SmartNumberInput
id="max-delay"
data-testid="max-delay"
value={typingEmulation.maxDelay}
onValueChange={handleMaxDelayChange}
maxW="100px"
step={0.1}
/>
</Flex>
</Stack>
)}
</Stack>
)
}

52
apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
View File

@ -1,22 +1,27 @@
import { ChangeEvent, FormEvent, useState } from 'react'
import { ChangeEvent, FormEvent, useEffect, useState } from 'react'
import { Button, HStack, Input, Stack } from '@chakra-ui/react'
import { SearchContextManager } from '@giphy/react-components'
import { UploadButton } from '../buttons/UploadButton'
import { GiphySearch } from './GiphySearch'
import { useTypebot } from 'contexts/TypebotContext'
import { ImageBubbleContent } from 'models'
import { useDebounce } from 'use-debounce'
type Props = {
content?: ImageBubbleContent
onSubmit: (content: ImageBubbleContent) => void
url?: string
onSubmit: (url: string) => void
isGiphyEnabled?: boolean
}
export const ImageUploadContent = ({ content, onSubmit }: Props) => {
export const ImageUploadContent = ({
url,
onSubmit,
isGiphyEnabled = true,
}: Props) => {
const [currentTab, setCurrentTab] = useState<'link' | 'upload' | 'giphy'>(
'upload'
)
const handleSubmit = (url: string) => onSubmit({ url })
const handleSubmit = (url: string) => onSubmit(url)
return (
<Stack>
<HStack>
@ -34,7 +39,7 @@ export const ImageUploadContent = ({ content, onSubmit }: Props) => {
>
Embed link
</Button>
{process.env.NEXT_PUBLIC_GIPHY_API_KEY && (
{process.env.NEXT_PUBLIC_GIPHY_API_KEY && isGiphyEnabled && (
<Button
variant={currentTab === 'giphy' ? 'solid' : 'ghost'}
onClick={() => setCurrentTab('giphy')}
@ -45,11 +50,7 @@ export const ImageUploadContent = ({ content, onSubmit }: Props) => {
)}
</HStack>
<BodyContent
tab={currentTab}
onSubmit={handleSubmit}
url={content?.url}
/>
<BodyContent tab={currentTab} onSubmit={handleSubmit} url={url} />
</Stack>
)
}
@ -93,26 +94,23 @@ const UploadFileContent = ({ onNewUrl }: ContentProps) => {
const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
const [imageUrl, setImageUrl] = useState(initialUrl ?? '')
const [debouncedImageUrl] = useDebounce(imageUrl, 100)
useEffect(() => {
if (initialUrl === debouncedImageUrl) return
onNewUrl(imageUrl)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedImageUrl])
const handleImageUrlChange = (e: ChangeEvent<HTMLInputElement>) =>
setImageUrl(e.target.value)
const handleUrlSubmit = (e: FormEvent) => {
e.preventDefault()
onNewUrl(imageUrl)
}
return (
<Stack as="form" onSubmit={handleUrlSubmit}>
<Input
placeholder={'Paste the image link...'}
onChange={handleImageUrlChange}
value={imageUrl}
/>
<Button type="submit" disabled={imageUrl === ''} colorScheme="blue">
Embed image
</Button>
</Stack>
<Input
placeholder={'Paste the image link...'}
onChange={handleImageUrlChange}
value={imageUrl}
/>
)
}

9
apps/builder/components/shared/Info.tsx Normal file
View File

@ -0,0 +1,9 @@
import { Alert, AlertIcon, AlertProps } from '@chakra-ui/react'
import React from 'react'
export const Info = (props: AlertProps) => (
<Alert status="info" bgColor={'blue.50'} rounded="md" {...props}>
<AlertIcon />
{props.children}
</Alert>
)

18
apps/builder/components/settings/SmartNumberInput.tsx → apps/builder/components/shared/SmartNumberInput.tsx
View File

@ -6,29 +6,29 @@ import {
NumberIncrementStepper,
NumberDecrementStepper,
} from '@chakra-ui/react'
import { useState, useEffect } from 'react'
import { useState } from 'react'
export const SmartNumberInput = ({
initialValue,
value,
onValueChange,
...props
}: {
initialValue?: number
value?: number
onValueChange: (value?: number) => void
} & NumberInputProps) => {
const [value, setValue] = useState(initialValue?.toString() ?? '')
const [currentValue, setCurrentValue] = useState(value?.toString() ?? '')
useEffect(() => {
const handleValueChange = (value: string) => {
setCurrentValue(value)
if (value.endsWith('.') || value.endsWith(',')) return
if (value === '') onValueChange(undefined)
if (value === '') return onValueChange(undefined)
const newValue = parseFloat(value)
if (isNaN(newValue)) return
onValueChange(newValue)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value])
}
return (
<NumberInput onChange={setValue} value={value} {...props}>
<NumberInput onChange={handleValueChange} value={currentValue} {...props}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />

10
apps/builder/components/shared/TextboxWithVariableButton/InputWithVariableButton.tsx Normal file
View File

@ -0,0 +1,10 @@
import { Input } from '@chakra-ui/react'
import React from 'react'
import {
TextBoxWithVariableButton,
TextBoxWithVariableButtonProps,
} from './TextboxWithVariableButton'
export const InputWithVariableButton = (
props: Omit<TextBoxWithVariableButtonProps, 'TextBox'>
) => <TextBoxWithVariableButton TextBox={Input} {...props} />

10
apps/builder/components/shared/TextboxWithVariableButton/TextareaWithVariableButton.tsx Normal file
View File

@ -0,0 +1,10 @@
import { Textarea } from '@chakra-ui/react'
import React from 'react'
import {
TextBoxWithVariableButton,
TextBoxWithVariableButtonProps,
} from './TextboxWithVariableButton'
export const TextareaWithVariableButton = (
props: Omit<TextBoxWithVariableButtonProps, 'TextBox'>
) => <TextBoxWithVariableButton TextBox={Textarea} {...props} />

62
apps/builder/components/shared/InputWithVariableButton.tsx → apps/builder/components/shared/TextboxWithVariableButton/TextboxWithVariableButton.tsx
View File

@ -1,31 +1,40 @@
import {
ComponentWithAs,
Flex,
HStack,
IconButton,
Input,
InputProps,
Popover,
PopoverContent,
PopoverTrigger,
TextareaProps,
Tooltip,
} from '@chakra-ui/react'
import { UserIcon } from 'assets/icons'
import { Variable } from 'models'
import React, { useEffect, useRef, useState } from 'react'
import { useDebounce } from 'use-debounce'
import { VariableSearchInput } from './VariableSearchInput'
import { VariableSearchInput } from '../VariableSearchInput'
export const InputWithVariableButton = ({
initialValue,
onChange,
delay,
...props
}: {
export type TextBoxWithVariableButtonProps = {
initialValue: string
onChange: (value: string) => void
delay?: number
} & Omit<InputProps, 'onChange'>) => {
const inputRef = useRef<HTMLInputElement | null>(null)
TextBox:
| ComponentWithAs<'textarea', TextareaProps>
| ComponentWithAs<'input', InputProps>
} & Omit<InputProps & TextareaProps, 'onChange'>
export const TextBoxWithVariableButton = ({
initialValue,
onChange,
delay,
TextBox,
...props
}: TextBoxWithVariableButtonProps) => {
const textBoxRef = useRef<(HTMLInputElement & HTMLTextAreaElement) | null>(
null
)
const [value, setValue] = useState(initialValue)
const [debouncedValue] = useDebounce(value, delay ?? 100)
const [carretPosition, setCarretPosition] = useState<number>(0)
@ -36,48 +45,49 @@ export const InputWithVariableButton = ({
}, [debouncedValue])
const handleVariableSelected = (variable?: Variable) => {
if (!inputRef.current || !variable) return
if (!textBoxRef.current || !variable) return
const cursorPosition = carretPosition
const textBeforeCursorPosition = inputRef.current.value.substring(
const textBeforeCursorPosition = textBoxRef.current.value.substring(
0,
cursorPosition
)
const textAfterCursorPosition = inputRef.current.value.substring(
const textAfterCursorPosition = textBoxRef.current.value.substring(
cursorPosition,
inputRef.current.value.length
textBoxRef.current.value.length
)
setValue(
textBeforeCursorPosition +
`{{${variable.name}}}` +
textAfterCursorPosition
)
inputRef.current.focus()
textBoxRef.current.focus()
setTimeout(() => {
if (!inputRef.current) return
inputRef.current.selectionStart = inputRef.current.selectionEnd =
if (!textBoxRef.current) return
textBoxRef.current.selectionStart = textBoxRef.current.selectionEnd =
carretPosition + `{{${variable.name}}}`.length
setCarretPosition(inputRef.current.selectionStart)
setCarretPosition(textBoxRef.current.selectionStart)
}, 100)
}
const handleKeyUp = () => {
if (!inputRef.current?.selectionStart) return
setCarretPosition(inputRef.current.selectionStart)
if (!textBoxRef.current?.selectionStart) return
setCarretPosition(textBoxRef.current.selectionStart)
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
setValue(e.target.value)
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => setValue(e.target.value)
return (
<HStack spacing={0}>
<Input
ref={inputRef}
<HStack spacing={0} align={'flex-end'}>
<TextBox
ref={textBoxRef}
onKeyUp={handleKeyUp}
onClick={handleKeyUp}
value={value}
onChange={handleChange}
{...props}
bgColor={'white'}
{...props}
/>
<Popover matchWidth isLazy>
<PopoverTrigger>

2
apps/builder/components/shared/TextboxWithVariableButton/index.tsx Normal file
View File

@ -0,0 +1,2 @@
export { InputWithVariableButton } from './InputWithVariableButton'
export { TextareaWithVariableButton } from './TextareaWithVariableButton'

9
apps/builder/components/theme/ChatSettings/ButtonsTheme.tsx
View File

@ -4,13 +4,10 @@ import React from 'react'
import { ColorPicker } from '../GeneralSettings/ColorPicker'
type Props = {
buttons?: ContainerColors
buttons: ContainerColors
onButtonsChange: (buttons: ContainerColors) => void
}
const defaultBackgroundColor = '#0042da'
const defaultTextColor = '#ffffff'
export const ButtonsTheme = ({ buttons, onButtonsChange }: Props) => {
const handleBackgroundChange = (backgroundColor: string) =>
onButtonsChange({ ...buttons, backgroundColor })
@ -22,14 +19,14 @@ export const ButtonsTheme = ({ buttons, onButtonsChange }: Props) => {
<Flex justify="space-between" align="center">
<Text>Background:</Text>
<ColorPicker
initialColor={buttons?.backgroundColor ?? defaultBackgroundColor}
initialColor={buttons.backgroundColor}
onColorChange={handleBackgroundChange}
/>
</Flex>
<Flex justify="space-between" align="center">
<Text>Text:</Text>
<ColorPicker
initialColor={buttons?.color ?? defaultTextColor}
initialColor={buttons.color}
onColorChange={handleTextChange}
/>
</Flex>

10
apps/builder/components/theme/ChatSettings/ChatThemeSettings.tsx
View File

@ -7,7 +7,7 @@ import { HostBubbles } from './HostBubbles'
import { InputsTheme } from './InputsTheme'
type Props = {
chatTheme?: ChatTheme
chatTheme: ChatTheme
onChatThemeChange: (chatTheme: ChatTheme) => void
}
@ -26,28 +26,28 @@ export const ChatThemeSettings = ({ chatTheme, onChatThemeChange }: Props) => {
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
<Heading fontSize="lg">Bot bubbles</Heading>
<HostBubbles
hostBubbles={chatTheme?.hostBubbles}
hostBubbles={chatTheme.hostBubbles}
onHostBubblesChange={handleHostBubblesChange}
/>
</Stack>
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
<Heading fontSize="lg">User bubbles</Heading>
<GuestBubbles
guestBubbles={chatTheme?.guestBubbles}
guestBubbles={chatTheme.guestBubbles}
onGuestBubblesChange={handleGuestBubblesChange}
/>
</Stack>
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
<Heading fontSize="lg">Buttons</Heading>
<ButtonsTheme
buttons={chatTheme?.buttons}
buttons={chatTheme.buttons}
onButtonsChange={handleButtonsChange}
/>
</Stack>
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
<Heading fontSize="lg">Inputs</Heading>
<InputsTheme
inputs={chatTheme?.inputs}
inputs={chatTheme.inputs}
onInputsChange={handleInputsChange}
/>
</Stack>

8
apps/builder/components/theme/ChatSettings/GuestBubbles.tsx
View File

@ -4,12 +4,10 @@ import React from 'react'
import { ColorPicker } from '../GeneralSettings/ColorPicker'
type Props = {
guestBubbles?: ContainerColors
guestBubbles: ContainerColors
onGuestBubblesChange: (hostBubbles: ContainerColors) => void
}
const defaultBackgroundColor = '#ff8e21'
const defaultTextColor = '#ffffff'
export const GuestBubbles = ({ guestBubbles, onGuestBubblesChange }: Props) => {
const handleBackgroundChange = (backgroundColor: string) =>
onGuestBubblesChange({ ...guestBubbles, backgroundColor })
@ -21,14 +19,14 @@ export const GuestBubbles = ({ guestBubbles, onGuestBubblesChange }: Props) => {
<Flex justify="space-between" align="center">
<Text>Background:</Text>
<ColorPicker
initialColor={guestBubbles?.backgroundColor ?? defaultBackgroundColor}
initialColor={guestBubbles.backgroundColor}
onColorChange={handleBackgroundChange}
/>
</Flex>
<Flex justify="space-between" align="center">
<Text>Text:</Text>
<ColorPicker
initialColor={guestBubbles?.color ?? defaultTextColor}
initialColor={guestBubbles.color}
onColorChange={handleTextChange}
/>
</Flex>

9
apps/builder/components/theme/ChatSettings/HostBubbles.tsx
View File

@ -4,13 +4,10 @@ import React from 'react'
import { ColorPicker } from '../GeneralSettings/ColorPicker'
type Props = {
hostBubbles?: ContainerColors
hostBubbles: ContainerColors
onHostBubblesChange: (hostBubbles: ContainerColors) => void
}
const defaultBackgroundColor = '#f7f8ff'
const defaultTextColor = '#303235'
export const HostBubbles = ({ hostBubbles, onHostBubblesChange }: Props) => {
const handleBackgroundChange = (backgroundColor: string) =>
onHostBubblesChange({ ...hostBubbles, backgroundColor })
@ -22,14 +19,14 @@ export const HostBubbles = ({ hostBubbles, onHostBubblesChange }: Props) => {
<Flex justify="space-between" align="center">
<Text>Background:</Text>
<ColorPicker
initialColor={hostBubbles?.backgroundColor ?? defaultBackgroundColor}
initialColor={hostBubbles.backgroundColor}
onColorChange={handleBackgroundChange}
/>
</Flex>
<Flex justify="space-between" align="center">
<Text>Text:</Text>
<ColorPicker
initialColor={hostBubbles?.color ?? defaultTextColor}
initialColor={hostBubbles.color}
onColorChange={handleTextChange}
/>
</Flex>

12
apps/builder/components/theme/ChatSettings/InputsTheme.tsx
View File

@ -4,14 +4,10 @@ import React from 'react'
import { ColorPicker } from '../GeneralSettings/ColorPicker'
type Props = {
inputs?: InputColors
inputs: InputColors
onInputsChange: (buttons: InputColors) => void
}
const defaultBackgroundColor = '#ffffff'
const defaultTextColor = '#303235'
const defaultPlaceholderColor = '#9095A0'
export const InputsTheme = ({ inputs, onInputsChange }: Props) => {
const handleBackgroundChange = (backgroundColor: string) =>
onInputsChange({ ...inputs, backgroundColor })
@ -25,21 +21,21 @@ export const InputsTheme = ({ inputs, onInputsChange }: Props) => {
<Flex justify="space-between" align="center">
<Text>Background:</Text>
<ColorPicker
initialColor={inputs?.backgroundColor ?? defaultBackgroundColor}
initialColor={inputs.backgroundColor}
onColorChange={handleBackgroundChange}
/>
</Flex>
<Flex justify="space-between" align="center">
<Text>Text:</Text>
<ColorPicker
initialColor={inputs?.color ?? defaultTextColor}
initialColor={inputs.color}
onColorChange={handleTextChange}
/>
</Flex>
<Flex justify="space-between" align="center">
<Text>Placeholder text:</Text>
<ColorPicker
initialColor={inputs?.placeholderColor ?? defaultPlaceholderColor}
initialColor={inputs.placeholderColor}
onColorChange={handlePlaceholderChange}
/>
</Flex>

9
apps/builder/components/theme/GeneralSettings/ColorPicker.tsx
View File

@ -11,7 +11,7 @@ import {
Input,
Button,
} from '@chakra-ui/react'
import React, { useEffect, useState } from 'react'
import React, { ChangeEvent, useEffect, useState } from 'react'
const colorsSelection: `#${string}`[] = [
'#264653',
@ -38,6 +38,9 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [color])
const handleColorChange = (e: ChangeEvent<HTMLInputElement>) =>
setColor(e.target.value)
return (
<Popover variant="picker">
<PopoverTrigger>
@ -89,9 +92,7 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
aria-label="Color value"
size="sm"
value={color}
onChange={(e) => {
setColor(e.target.value)
}}
onChange={handleColorChange}
/>
</PopoverBody>
</PopoverContent>

10
apps/builder/components/theme/GeneralSettings/GeneralSettings.tsx
View File

@ -1,16 +1,14 @@
import { Stack } from '@chakra-ui/react'
import { Background, BackgroundType, GeneralTheme } from 'models'
import { Background, GeneralTheme } from 'models'
import React from 'react'
import { BackgroundSelector } from './BackgroundSelector'
import { FontSelector } from './FontSelector'
type Props = {
generalTheme?: GeneralTheme
generalTheme: GeneralTheme
onGeneralThemeChange: (general: GeneralTheme) => void
}
const defaultFont = 'Open Sans'
export const GeneralSettings = ({
generalTheme,
onGeneralThemeChange,
@ -24,11 +22,11 @@ export const GeneralSettings = ({
return (
<Stack spacing={6}>
<FontSelector
activeFont={generalTheme?.font ?? defaultFont}
activeFont={generalTheme.font}
onSelectFont={handleSelectFont}
/>
<BackgroundSelector
background={generalTheme?.background ?? { type: BackgroundType.NONE }}
background={generalTheme.background}
onBackgroundChange={handleBackgroundChange}
/>
</Stack>

38
apps/builder/components/theme/SideMenu.tsx → apps/builder/components/theme/ThemeSideMenu.tsx
View File

@ -17,17 +17,17 @@ import { ChatThemeSettings } from './ChatSettings'
import { CustomCssSettings } from './CustomCssSettings/CustomCssSettings'
import { GeneralSettings } from './GeneralSettings'
export const SideMenu = () => {
export const ThemeSideMenu = () => {
const { typebot, updateTypebot } = useTypebot()
const handleChatThemeChange = (chat: ChatTheme) =>
updateTypebot({ theme: { ...typebot?.theme, chat } })
typebot && updateTypebot({ theme: { ...typebot.theme, chat } })
const handleGeneralThemeChange = (general: GeneralTheme) =>
updateTypebot({ theme: { ...typebot?.theme, general } })
typebot && updateTypebot({ theme: { ...typebot.theme, general } })
const handleCustomCssChange = (customCss: string) =>
updateTypebot({ theme: { ...typebot?.theme, customCss } })
typebot && updateTypebot({ theme: { ...typebot.theme, customCss } })
return (
<Stack
@ -53,10 +53,12 @@ export const SideMenu = () => {
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4}>
<GeneralSettings
generalTheme={typebot?.theme?.general}
onGeneralThemeChange={handleGeneralThemeChange}
/>
{typebot && (
<GeneralSettings
generalTheme={typebot.theme.general}
onGeneralThemeChange={handleGeneralThemeChange}
/>
)}
</AccordionPanel>
</AccordionItem>
<AccordionItem>
@ -68,10 +70,12 @@ export const SideMenu = () => {
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4}>
<ChatThemeSettings
chatTheme={typebot?.theme?.chat}
onChatThemeChange={handleChatThemeChange}
/>
{typebot && (
<ChatThemeSettings
chatTheme={typebot.theme.chat}
onChatThemeChange={handleChatThemeChange}
/>
)}
</AccordionPanel>
</AccordionItem>
<AccordionItem>
@ -83,10 +87,12 @@ export const SideMenu = () => {
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4}>
<CustomCssSettings
customCss={typebot?.theme?.customCss}
onCustomCssChange={handleCustomCssChange}
/>
{typebot && (
<CustomCssSettings
customCss={typebot.theme.customCss}
onCustomCssChange={handleCustomCssChange}
/>
)}
</AccordionPanel>
</AccordionItem>
</Accordion>

5
apps/builder/contexts/UserContext.tsx
View File

@ -62,9 +62,12 @@ export const UserContext = ({ children }: { children: ReactNode }) => {
useEffect(() => {
if (!router.isReady) return
if (status === 'loading') return
if (status === 'unauthenticated') router.replace('/signin')
if (status === 'unauthenticated' && !isSigningIn())
router.replace('/signin')
}, [status, router])
const isSigningIn = () => ['/signin', '/register'].includes(router.pathname)
const updateUser = (newUser: Partial<User>) => {
if (!isDefined(user)) return
setUser({ ...user, ...newUser })

19
apps/builder/cypress/fixtures/typebots/integrations/googleSheets.json
View File

@ -94,12 +94,23 @@
"allIds": ["benDCcLMUWNvi6Fg6CXE9H", "6Tax9rw7L8kmRn9JRD2Mrg"]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": { "isBrandingEnabled": true },
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null

19
apps/builder/cypress/fixtures/typebots/integrations/googleSheetsGet.json
View File

@ -132,12 +132,23 @@
]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": { "isBrandingEnabled": true },
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null

19
apps/builder/cypress/fixtures/typebots/integrations/webhook.json
View File

@ -138,12 +138,23 @@
"allIds": ["25yX9DnQgdafpdAjfAu5Fp", "oxEEtym3NfDf34NCipzjRQ"]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": { "isBrandingEnabled": true },
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null

19
apps/builder/cypress/fixtures/typebots/integrations/webhookPreview.json
View File

@ -252,12 +252,23 @@
]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": { "isBrandingEnabled": true },
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null

19
apps/builder/cypress/fixtures/typebots/logic/condition.json
View File

@ -235,12 +235,23 @@
]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": { "isBrandingEnabled": true },
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null

22
apps/builder/cypress/fixtures/typebots/logic/redirect.json
View File

@ -52,7 +52,8 @@
"sqNGop2aYkXRvJqb9nGtFbD": {
"id": "sqNGop2aYkXRvJqb9nGtFbD",
"blockId": "bnsxmer7DD2R9DogoXTsvHJ",
"type": "Redirect"
"type": "Redirect",
"options": { "isNewTab": false }
}
},
"allIds": [
@ -96,12 +97,23 @@
"allIds": ["totLsWG6AQfcFT39CsZwDy", "7KgqWB88ufzhDwzvwHuEbN"]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": { "isBrandingEnabled": true },
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null

32
apps/builder/cypress/fixtures/typebots/logic/setVariable.json
View File

@ -54,7 +54,12 @@
"id": "s8n3nJajsBaYqrFeRYVvcf6",
"blockId": "bwWRAaX5m6NZyZ9jjpXmWSb",
"type": "number input",
"edgeId": "dcJedLC7qsLtsmm1wbiFFc"
"edgeId": "dcJedLC7qsLtsmm1wbiFFc",
"options": {
"labels": {
"placeholder": "Type a number..."
}
}
},
"sqMVMXeRYp4inLcRqej2Wac": {
"id": "sqMVMXeRYp4inLcRqej2Wac",
@ -71,13 +76,15 @@
"shfL5ueQDuj2RPcJPWZGArT": {
"id": "shfL5ueQDuj2RPcJPWZGArT",
"blockId": "baUyUnNBxZzPe1z5PqE4NkD",
"type": "Set variable"
"type": "Set variable",
"options": {}
},
"sugJ6xN3jFys1CjWfsxGhiJ": {
"id": "sugJ6xN3jFys1CjWfsxGhiJ",
"blockId": "baUyUnNBxZzPe1z5PqE4NkD",
"type": "Set variable",
"edgeId": "sA5gvCVVBVYdGsdeSGF5ei"
"edgeId": "sA5gvCVVBVYdGsdeSGF5ei",
"options": {}
},
"shR7ae3iNEvB6arCSu7wVFF": {
"id": "shR7ae3iNEvB6arCSu7wVFF",
@ -141,12 +148,23 @@
]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": { "isBrandingEnabled": true },
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null

19
apps/builder/cypress/fixtures/typebots/singleChoiceTarget.json
View File

@ -154,12 +154,23 @@
]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": { "isBrandingEnabled": true },
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null

19
apps/builder/cypress/fixtures/typebots/theme/theme.json
View File

@ -136,12 +136,23 @@
"allIds": ["25yX9DnQgdafpdAjfAu5Fp", "6e4Sbp8pGTvBQYtCk2qXbN"]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": { "isBrandingEnabled": true },
"metadata": {
"description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null

30
apps/builder/cypress/plugins/data.ts
View File

@ -1,7 +1,10 @@
import { Step, InputStepType } from 'models'
import { Step } from 'models'
import { parseTestTypebot } from './utils'
export const userIds = ['user1', 'user2']
export const users = [
{ id: 'user1', email: 'test1@gmail.com' },
{ id: 'user2', email: 'test2@gmail.com' },
]
export const createTypebotWithStep = (step: Omit<Step, 'id' | 'blockId'>) => {
cy.task(
@ -9,21 +12,15 @@ export const createTypebotWithStep = (step: Omit<Step, 'id' | 'blockId'>) => {
parseTestTypebot({
id: 'typebot3',
name: 'Typebot #3',
ownerId: userIds[1],
ownerId: users[1].id,
steps: {
byId: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
step1: {
...step,
id: 'step1',
blockId: 'block1',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
options:
step.type === InputStepType.CHOICE
? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
{ itemIds: ['item1'] }
: undefined,
},
},
allIds: ['step1'],
@ -39,13 +36,10 @@ export const createTypebotWithStep = (step: Omit<Step, 'id' | 'blockId'>) => {
},
allIds: ['block1'],
},
choiceItems:
step.type === InputStepType.CHOICE
? {
byId: { item1: { stepId: 'step1', id: 'item1' } },
allIds: ['item1'],
}
: undefined,
choiceItems: {
byId: { item1: { stepId: 'step1', id: 'item1' } },
allIds: ['item1'],
},
})
)
}

29
apps/builder/cypress/plugins/database.ts
View File

@ -1,7 +1,13 @@
import { InputStepType, PublicTypebot, Typebot } from 'models'
import {
defaultTextInputOptions,
InputStepType,
PublicTypebot,
TextInputStep,
Typebot,
} from 'models'
import { CredentialsType, Plan, PrismaClient } from 'db'
import { parseTestTypebot } from './utils'
import { userIds } from './data'
import { users } from './data'
const prisma = new PrismaClient()
@ -23,10 +29,9 @@ export const createTypebot = (typebot: Typebot) =>
const createUsers = () =>
prisma.user.createMany({
data: [
{ id: userIds[0], email: 'test1@gmail.com', emailVerified: new Date() },
{ ...users[0], emailVerified: new Date() },
{
id: userIds[1],
email: 'test2@gmail.com',
...users[1],
emailVerified: new Date(),
plan: Plan.PRO,
stripeId: 'stripe-test2',
@ -39,7 +44,7 @@ const createCredentials = (refresh_token: string) =>
data: [
{
name: 'test2@gmail.com',
ownerId: userIds[1],
ownerId: users[1].id,
type: CredentialsType.GOOGLE_SHEETS,
data: {
expiry_date: 1642441058842,
@ -53,7 +58,7 @@ const createCredentials = (refresh_token: string) =>
const createFolders = () =>
prisma.dashboardFolder.createMany({
data: [{ ownerId: userIds[1], name: 'Folder #1', id: 'folder1' }],
data: [{ ownerId: users[1].id, name: 'Folder #1', id: 'folder1' }],
})
const createTypebots = async () => {
@ -61,7 +66,7 @@ const createTypebots = async () => {
...parseTestTypebot({
id: 'typebot2',
name: 'Typebot #2',
ownerId: userIds[1],
ownerId: users[1].id,
blocks: {
byId: {
block1: {
@ -79,7 +84,8 @@ const createTypebots = async () => {
id: 'step1',
type: InputStepType.TEXT,
blockId: 'block1',
},
options: defaultTextInputOptions,
} as TextInputStep,
},
allIds: ['step1'],
},
@ -91,7 +97,7 @@ const createTypebots = async () => {
...parseTestTypebot({
id: 'typebot1',
name: 'Typebot #1',
ownerId: userIds[1],
ownerId: users[1].id,
blocks: { byId: {}, allIds: [] },
steps: { byId: {}, allIds: [] },
}),
@ -115,6 +121,7 @@ const createResults = () => {
createdAt: new Date(
today.setTime(today.getTime() + 1000 * 60 * 60 * 24 * idx)
),
isCompleted: false,
}
}),
],
@ -153,5 +160,5 @@ const parseTypebotToPublicTypebot = (
export const loadRawTypebotInDatabase = (typebot: Typebot) =>
prisma.typebot.create({
data: { ...typebot, id: 'typebot4', ownerId: userIds[1] } as any,
data: { ...typebot, id: 'typebot4', ownerId: users[1].id } as any,
})

22
apps/builder/cypress/plugins/utils.ts
View File

@ -1,12 +1,11 @@
import {
Block,
Theme,
BackgroundType,
Settings,
Typebot,
Table,
Step,
ChoiceItem,
defaultTheme,
defaultSettings,
} from 'models'
export const parseTestTypebot = ({
@ -24,26 +23,13 @@ export const parseTestTypebot = ({
steps: Table<Step>
choiceItems?: Table<ChoiceItem>
}): Typebot => {
const theme: Theme = {
general: {
font: 'Open Sans',
background: { type: BackgroundType.NONE, content: '#ffffff' },
},
}
const settings: Settings = {
typingEmulation: {
enabled: true,
speed: 300,
maxDelay: 1.5,
},
}
return {
id,
folderId: null,
name,
ownerId,
theme,
settings,
theme: defaultTheme,
settings: defaultSettings,
createdAt: new Date(),
blocks: {
byId: {

17
apps/builder/cypress/support/index.ts
View File

@ -40,12 +40,25 @@ declare global {
}
}
const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
Cypress.on('uncaught:exception', (err) => {
if (err.message.includes('ResizeObserver loop limit exceeded')) {
if (resizeObserverLoopErrRe.test(err.message)) {
return false
}
})
export const prepareDbAndSignIn = () => {
cy.signOut()
cy.task('seed')
cy.signIn(users[1].email)
}
export const removePreventReload = () => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
}
export const getIframeBody = () => {
return cy
.get('#typebot-iframe')
@ -57,6 +70,8 @@ export const getIframeBody = () => {
// Import commands.js using ES2015 syntax:
import '@testing-library/cypress/add-commands'
import 'cypress-file-upload'
import { users } from 'cypress/plugins/data'
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import './commands'
// Alternatively you can use CommonJS syntax:

30
apps/builder/cypress/tests/account.ts
View File

@ -1,4 +1,5 @@
import { userIds } from 'cypress/plugins/data'
import { users } from 'cypress/plugins/data'
import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
describe('Account page', () => {
before(() => {
@ -11,13 +12,12 @@ describe('Account page', () => {
)
})
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(removePreventReload)
it('should edit user info properly', () => {
cy.signIn('test1@gmail.com')
cy.signIn(users[0].email)
cy.visit('/account')
cy.findByRole('button', { name: 'Save' }).should('not.exist')
cy.findByRole('textbox', { name: 'Email address' }).should(
@ -35,23 +35,19 @@ describe('Account page', () => {
.should('have.attr', 'src')
.should(
'include',
`https://s3.eu-west-3.amazonaws.com/typebot/users/${userIds[0]}/avatar`
`https://s3.eu-west-3.amazonaws.com/typebot/users/${users[0].id}/avatar`
)
cy.findByRole('button', { name: 'Save' }).should('exist').click()
cy.wait('@getUpdatedSession')
cy.reload()
cy.findByRole('textbox', { name: 'Name' }).should('have.value', 'John Doe')
cy.findByRole('img')
.should('have.attr', 'src')
.should(
'include',
`https://s3.eu-west-3.amazonaws.com/typebot/users/${userIds[0]}/avatar`
)
.then((interception) => {
return interception.response?.statusCode
})
.should('eq', 200)
cy.findByRole('button', { name: 'Save' }).should('not.exist')
})
it('should display valid plans', () => {
cy.signIn('test1@gmail.com')
cy.signIn(users[0].email)
cy.visit('/account')
cy.findByText('Free plan').should('exist')
cy.findByRole('link', { name: 'Manage my subscription' }).should(
@ -59,7 +55,7 @@ describe('Account page', () => {
)
cy.findByRole('button', { name: 'Upgrade' }).should('exist')
cy.signOut()
cy.signIn('test2@gmail.com')
cy.signIn(users[1].email)
cy.visit('/account')
cy.findByText('Pro plan').should('exist')
cy.findByRole('link', { name: 'Manage my subscription' })

31
apps/builder/cypress/tests/bubbles/image.ts
View File

@ -1,7 +1,10 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
import { BubbleStepType, Step } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import { BubbleStepType, defaultImageBubbleContent, Step } from 'models'
const unsplashImageSrc =
'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
@ -13,19 +16,14 @@ describe('Image bubbles', () => {
method: 'POST',
}).as('postImage')
})
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
})
describe('Content settings', () => {
beforeEach(() => {
cy.task('seed')
prepareDbAndSignIn()
createTypebotWithStep({
type: BubbleStepType.IMAGE,
} as Omit<Step, 'id' | 'blockId'>)
cy.signOut()
cy.signIn('test2@gmail.com')
content: defaultImageBubbleContent,
} as Step)
cy.visit('/typebots/typebot3/edit')
cy.findByText('Click to edit...').click()
})
@ -46,7 +44,6 @@ describe('Image bubbles', () => {
cy.findByPlaceholderText('Paste the image link...')
.clear()
.type(unsplashImageSrc)
cy.findByRole('button', { name: 'Embed image' }).click()
cy.findByRole('img')
.should('have.attr', 'src')
.should('include', unsplashImageSrc)
@ -62,20 +59,18 @@ describe('Image bubbles', () => {
})
})
describe('Preview', () => {
beforeEach(() => {
cy.task('seed')
before(() => {
prepareDbAndSignIn()
createTypebotWithStep({
type: BubbleStepType.IMAGE,
content: {
url: unsplashImageSrc,
},
} as Omit<Step, 'id' | 'blockId'>)
cy.signOut()
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
})
it('should display correctly', () => {
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
.findByRole('img')

24
apps/builder/cypress/tests/bubbles/text.ts
View File

@ -1,27 +1,23 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
import { BubbleStepType, Step } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import { BubbleStepType, defaultTextBubbleContent, Step } from 'models'
describe('Text bubbles', () => {
beforeEach(() => {
cy.task('seed')
prepareDbAndSignIn()
createTypebotWithStep({
type: BubbleStepType.TEXT,
content: { html: '', plainText: '', richText: [] },
content: defaultTextBubbleContent,
} as Omit<Step, 'id' | 'blockId'>)
cy.signOut()
})
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
cy.visit('/typebots/typebot3/edit')
})
afterEach(removePreventReload)
it('rich text features should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByTestId('bold-button').click()
cy.findByRole('textbox', { name: 'Text editor' }).type('Bold text{enter}')
cy.findByTestId('bold-button').click()

34
apps/builder/cypress/tests/bubbles/video.ts
View File

@ -1,7 +1,15 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
import { BubbleStepType, Step, VideoBubbleContentType } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import {
BubbleStepType,
defaultVideoBubbleContent,
Step,
VideoBubbleContentType,
} from 'models'
const videoSrc =
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
@ -9,22 +17,17 @@ const youtubeVideoSrc = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
const vimeoVideoSrc = 'https://vimeo.com/649301125'
describe('Video bubbles', () => {
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
})
describe('Content settings', () => {
beforeEach(() => {
cy.task('seed')
prepareDbAndSignIn()
createTypebotWithStep({
type: BubbleStepType.VIDEO,
content: defaultVideoBubbleContent,
} as Omit<Step, 'id' | 'blockId'>)
cy.signOut()
})
afterEach(removePreventReload)
it('upload image file correctly', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByText('Click to edit...').click()
cy.findByPlaceholderText('Paste the video link...').type(videoSrc, {
@ -53,10 +56,8 @@ describe('Video bubbles', () => {
})
describe('Preview', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(removePreventReload)
it('should display video correctly', () => {
createTypebotWithStep({
@ -66,7 +67,6 @@ describe('Video bubbles', () => {
url: videoSrc,
},
} as Omit<Step, 'id' | 'blockId'>)
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
@ -84,7 +84,6 @@ describe('Video bubbles', () => {
id: 'dQw4w9WgXcQ',
},
} as Omit<Step, 'id' | 'blockId'>)
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
@ -103,7 +102,6 @@ describe('Video bubbles', () => {
id: '649301125',
},
} as Omit<Step, 'id' | 'blockId'>)
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()

14
apps/builder/cypress/tests/dashboard.ts
View File

@ -1,11 +1,13 @@
import { users } from 'cypress/plugins/data'
import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
describe('Dashboard page', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(removePreventReload)
it('folders navigation should work', () => {
cy.signIn('test1@gmail.com')
cy.signIn(users[0].email)
cy.visit('/typebots')
createFolder('My folder #1')
cy.findByTestId('folder-button').click()
@ -27,7 +29,6 @@ describe('Dashboard page', () => {
})
it('folders and typebots should be deletable', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots')
cy.findByText('Folder #1').should('exist')
cy.findAllByRole('button', { name: 'Show folder menu' }).first().click()
@ -42,7 +43,6 @@ describe('Dashboard page', () => {
})
it('folders should be draggable and droppable', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots')
cy.findByTestId('typebot-button-typebot1').mouseMoveBy(-100, 0, {
delay: 120,

19
apps/builder/cypress/tests/inputs/button.ts
View File

@ -1,16 +1,22 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { getIframeBody } from 'cypress/support'
import { InputStepType } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import { defaultChoiceInputOptions, InputStepType, Step } from 'models'
describe('Button input', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.CHOICE })
cy.signOut()
prepareDbAndSignIn()
createTypebotWithStep({
type: InputStepType.CHOICE,
options: { ...defaultChoiceInputOptions, itemIds: ['item1'] },
} as Step)
})
afterEach(removePreventReload)
it('Can edit choice items', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByDisplayValue('Click to edit').type('Item 1{enter}')
cy.findByText('Item 1').trigger('mouseover')
@ -46,7 +52,6 @@ describe('Button input', () => {
it('Single choice targets should work', () => {
cy.loadTypebotFixtureInDatabase('typebots/singleChoiceTarget.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody().findByRole('button', { name: 'Burgers' }).click()

18
apps/builder/cypress/tests/inputs/date.ts
View File

@ -1,16 +1,22 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { getIframeBody } from 'cypress/support'
import { InputStepType } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import { defaultDateInputOptions, InputStepType, Step } from 'models'
describe('Date input', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.DATE })
cy.signOut()
prepareDbAndSignIn()
createTypebotWithStep({
type: InputStepType.DATE,
options: defaultDateInputOptions,
} as Step)
})
afterEach(removePreventReload)
it('options should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()

22
apps/builder/cypress/tests/inputs/email.ts
View File

@ -1,16 +1,22 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { getIframeBody } from 'cypress/support'
import { InputStepType } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import { defaultEmailInputOptions, InputStepType, Step } from 'models'
describe('Email input', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.EMAIL })
cy.signOut()
prepareDbAndSignIn()
createTypebotWithStep({
type: InputStepType.EMAIL,
options: defaultEmailInputOptions,
} as Step)
})
afterEach(removePreventReload)
it('options should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
@ -18,7 +24,9 @@ describe('Email input', () => {
.should('have.attr', 'type')
.should('equal', 'email')
getIframeBody().findByRole('button', { name: 'Send' })
getIframeBody().findByPlaceholderText('Type your email...').should('exist')
getIframeBody()
.findByPlaceholderText(defaultEmailInputOptions.labels.placeholder)
.should('exist')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
cy.findByTestId('step-step1').click({ force: true })
cy.findByRole('textbox', { name: 'Placeholder:' })

20
apps/builder/cypress/tests/inputs/number.ts
View File

@ -1,20 +1,26 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { getIframeBody } from 'cypress/support'
import { InputStepType } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import { defaultNumberInputOptions, InputStepType, Step } from 'models'
describe('Number input', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.NUMBER })
cy.signOut()
prepareDbAndSignIn()
createTypebotWithStep({
type: InputStepType.NUMBER,
options: defaultNumberInputOptions,
} as Step)
})
afterEach(removePreventReload)
it('options should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
.findByPlaceholderText('Type your answer...')
.findByPlaceholderText(defaultNumberInputOptions.labels.placeholder)
.should('have.attr', 'type')
.should('equal', 'number')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')

20
apps/builder/cypress/tests/inputs/phone.ts
View File

@ -1,20 +1,26 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { getIframeBody } from 'cypress/support'
import { InputStepType } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import { defaultPhoneInputOptions, InputStepType, Step } from 'models'
describe('Phone number input', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.PHONE })
cy.signOut()
prepareDbAndSignIn()
createTypebotWithStep({
type: InputStepType.PHONE,
options: defaultPhoneInputOptions,
} as Step)
})
afterEach(removePreventReload)
it('options should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
.findByPlaceholderText('Your phone number...')
.findByPlaceholderText(defaultPhoneInputOptions.labels.placeholder)
.should('have.attr', 'type')
.should('eq', 'tel')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')

27
apps/builder/cypress/tests/inputs/text.ts
View File

@ -1,27 +1,26 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
import { InputStepType } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import { defaultTextInputOptions, InputStepType, Step } from 'models'
describe('Text input', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.TEXT })
cy.signOut()
})
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
prepareDbAndSignIn()
createTypebotWithStep({
type: InputStepType.TEXT,
options: defaultTextInputOptions,
} as Step)
})
afterEach(removePreventReload)
it('options should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
.findByPlaceholderText('Type your answer...')
.findByPlaceholderText(defaultTextInputOptions.labels.placeholder)
.should('have.attr', 'type')
.should('equal', 'text')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')

21
apps/builder/cypress/tests/inputs/url.ts
View File

@ -1,20 +1,27 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { getIframeBody } from 'cypress/support'
import { InputStepType } from 'models'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
import { defaultUrlInputOptions, InputStepType, Step } from 'models'
describe('URL input', () => {
afterEach(removePreventReload)
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.URL })
cy.signOut()
prepareDbAndSignIn()
createTypebotWithStep({
type: InputStepType.URL,
options: defaultUrlInputOptions,
} as Step)
})
it('options should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
.findByPlaceholderText('Type your URL...')
.findByPlaceholderText(defaultUrlInputOptions.labels.placeholder)
.should('have.attr', 'type')
.should('eq', 'url')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')

25
apps/builder/cypress/tests/integrations/googleAnalytics.ts
View File

@ -1,22 +1,23 @@
import { createTypebotWithStep } from 'cypress/plugins/data'
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { IntegrationStepType } from 'models'
import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
import {
defaultGoogleAnalyticsOptions,
IntegrationStepType,
Step,
} from 'models'
describe('Google Analytics', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: IntegrationStepType.GOOGLE_ANALYTICS })
cy.signOut()
})
afterEach(removePreventReload)
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
beforeEach(() => {
prepareDbAndSignIn()
createTypebotWithStep({
type: IntegrationStepType.GOOGLE_ANALYTICS,
options: defaultGoogleAnalyticsOptions,
} as Step)
})
it('can be filled correctly', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.intercept({
url: '/g/collect',

20
apps/builder/cypress/tests/integrations/googleSheets.ts
View File

@ -1,16 +1,13 @@
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
import { users } from 'cypress/plugins/data'
import { getIframeBody, removePreventReload } from 'cypress/support'
describe('Google sheets', () => {
beforeEach(() => {
cy.task('seed', Cypress.env('GOOGLE_SHEETS_REFRESH_TOKEN'))
cy.signOut()
})
afterEach(removePreventReload)
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
beforeEach(() => {
cy.signOut()
cy.task('seed', Cypress.env('GOOGLE_SHEETS_REFRESH_TOKEN'))
cy.signIn(users[1].email)
})
it('Insert row should work', () => {
@ -19,7 +16,6 @@ describe('Google sheets', () => {
method: 'POST',
}).as('insertRowInGoogleSheets')
cy.loadTypebotFixtureInDatabase('typebots/integrations/googleSheets.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
fillInSpreadsheetInfo()
@ -55,7 +51,6 @@ describe('Google sheets', () => {
method: 'PATCH',
}).as('updateRowInGoogleSheets')
cy.loadTypebotFixtureInDatabase('typebots/integrations/googleSheets.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
fillInSpreadsheetInfo()
@ -87,7 +82,6 @@ describe('Google sheets', () => {
cy.loadTypebotFixtureInDatabase(
'typebots/integrations/googleSheetsGet.json'
)
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
fillInSpreadsheetInfo()

20
apps/builder/cypress/tests/integrations/webhooks.ts
View File

@ -1,22 +1,17 @@
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
describe('Webhook step', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
})
afterEach(removePreventReload)
describe('Configuration', () => {
it('configuration is working', () => {
cy.loadTypebotFixtureInDatabase('typebots/integrations/webhook.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
cy.findByText('Configure...').click()
cy.findByRole('button', { name: 'GET' }).click()
@ -80,7 +75,6 @@ describe('Webhook step', () => {
cy.loadTypebotFixtureInDatabase(
'typebots/integrations/webhookPreview.json'
)
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody().findByRole('button', { name: 'Go' }).click()

19
apps/builder/cypress/tests/logic/condition.ts
View File

@ -1,21 +1,16 @@
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
describe('Condition step', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
})
afterEach(removePreventReload)
it('options should work', () => {
cy.loadTypebotFixtureInDatabase('typebots/logic/condition.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
cy.findAllByText('Equal to').first().click()

19
apps/builder/cypress/tests/logic/redirect.ts
View File

@ -1,21 +1,16 @@
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
describe('Redirect', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
})
afterEach(removePreventReload)
it('should redirect to URL correctly', () => {
cy.loadTypebotFixtureInDatabase('typebots/logic/redirect.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
cy.findByText('Configure...').click()
cy.findByPlaceholderText('Type a URL...').type('google.com')

27
apps/builder/cypress/tests/logic/setVariable.ts
View File

@ -1,23 +1,18 @@
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
describe('Set variables', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
})
afterEach(removePreventReload)
it('options should work', () => {
it.only('options should work', () => {
cy.loadTypebotFixtureInDatabase('typebots/logic/setVariable.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
cy.findByText('Type your answer...').click()
cy.findByText('Type a number...').click()
cy.createVariable('Num')
cy.findAllByText('Click to edit...').first().click()
cy.createVariable('Total')
@ -31,9 +26,7 @@ describe('Set variables', () => {
'Custom value'
)
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
.findByPlaceholderText('Type your answer...')
.type('365{enter}')
getIframeBody().findByPlaceholderText('Type a number...').type('365{enter}')
getIframeBody().findByText('Total: 365000').should('exist')
getIframeBody().findByText('Custom var: Custom value')
})

13
apps/builder/cypress/tests/results.ts
View File

@ -1,19 +1,21 @@
import path from 'path'
import { parse } from 'papaparse'
import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
const downloadsFolder = Cypress.config('downloadsFolder')
describe('Results page', () => {
beforeEach(() => {
prepareDbAndSignIn()
cy.intercept({ url: '/api/typebots/typebot2/results*', method: 'GET' }).as(
'getResults'
)
cy.task('seed')
cy.signOut()
})
afterEach(removePreventReload)
it('results should be deletable', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot2/results')
cy.wait('@getResults')
cy.findByText('content198').should('exist')
cy.findByText('content197').should('exist')
cy.findAllByRole('checkbox').eq(2).check({ force: true })
@ -30,7 +32,6 @@ describe('Results page', () => {
})
it('submissions table should have infinite scroll', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot2/results')
cy.findByText('content50').should('not.exist')
cy.findByText('content199').should('exist')
@ -44,8 +45,6 @@ describe('Results page', () => {
})
it('should correctly export selection in CSV', () => {
const downloadsFolder = Cypress.config('downloadsFolder')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot2/results')
cy.wait('@getResults')
cy.findByRole('button', { name: 'Export' }).should('not.exist')

27
apps/builder/cypress/tests/settings/general.ts Normal file
View File

@ -0,0 +1,27 @@
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
describe('General settings', () => {
beforeEach(prepareDbAndSignIn)
afterEach(removePreventReload)
it('should reflect changes in real time', () => {
cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
cy.visit('/typebots/typebot4/settings')
getIframeBody()
.findByRole('link', { name: 'Made with Typebot.' })
.should('have.attr', 'href')
.should('eq', 'https://www.typebot.io/?utm_source=litebadge')
cy.findByRole('button', { name: 'General' }).click()
cy.findByRole('checkbox', { name: 'Typebot.io branding' }).uncheck({
force: true,
})
getIframeBody()
.findByRole('link', { name: 'Made with Typebot.' })
.should('not.exist')
})
})

51
apps/builder/cypress/tests/settings/metadata.ts Normal file
View File

@ -0,0 +1,51 @@
import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
const favIconUrl = 'https://www.baptistearno.com/favicon.png'
const imageUrl = 'https://www.baptistearno.com/images/site-preview.png'
describe('Typing emulation', () => {
beforeEach(prepareDbAndSignIn)
afterEach(removePreventReload)
it('should reflect changes in real time', () => {
cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
cy.visit('/typebots/typebot4/settings')
cy.findByRole('button', { name: 'Metadata' }).click()
// Fav icon
cy.findAllByRole('img', { name: 'Fav icon' })
.click()
.should('have.attr', 'src')
.should('eq', '/favicon.png')
cy.findByRole('button', { name: 'Giphy' }).should('not.exist')
cy.findByRole('button', { name: 'Embed link' }).click()
cy.findByPlaceholderText('Paste the image link...').type(favIconUrl)
cy.findAllByRole('img', { name: 'Fav icon' })
.should('have.attr', 'src')
.should('eq', favIconUrl)
// Image
cy.findAllByRole('img', { name: 'Website image' })
.click()
.should('have.attr', 'src')
.should('eq', '/viewer-preview.png')
cy.findByRole('button', { name: 'Giphy' }).should('not.exist')
cy.findByRole('button', { name: 'Embed link' }).click()
cy.findByPlaceholderText('Paste the image link...').type(imageUrl)
cy.findAllByRole('img', { name: 'Website image' })
.should('have.attr', 'src')
.should('eq', imageUrl)
// Title
cy.findByRole('textbox', { name: 'Title:' })
.click({ force: true })
.clear()
.type('Awesome typebot')
// Description
cy.findByRole('textbox', { name: 'Description:' })
.clear()
.type('Lorem ipsum')
})
})

20
apps/builder/cypress/tests/settings/typingEmulation.ts Normal file
View File

@ -0,0 +1,20 @@
import { prepareDbAndSignIn, removePreventReload } from 'cypress/support'
describe('Typing emulation', () => {
beforeEach(prepareDbAndSignIn)
afterEach(removePreventReload)
it('should reflect changes in real time', () => {
cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
cy.visit('/typebots/typebot4/settings')
cy.findByRole('button', { name: 'Typing emulation' }).click()
cy.findByTestId('speed').clear().type('350')
cy.findByTestId('max-delay').clear().type('1.5')
cy.findByRole('checkbox', { name: 'Typing emulation' }).uncheck({
force: true,
})
cy.findByTestId('speed').should('not.exist')
cy.findByTestId('max-delay').should('not.exist')
})
})

30
apps/builder/cypress/tests/theme/chat.ts
View File

@ -1,14 +1,16 @@
import { getIframeBody } from 'cypress/support'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
describe('General theme settings', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(removePreventReload)
it('should reflect changes in real time', () => {
cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/theme')
getIframeBody().findByText('Ready?').should('exist')
cy.findByRole('button', { name: 'Chat' }).click()
@ -56,9 +58,6 @@ describe('General theme settings', () => {
.eq(3)
.click({ force: true })
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#264653')
cy.findAllByRole('button', { name: 'Pick a color' })
.eq(6)
.click({ force: true })
getIframeBody().findByRole('button', { name: 'Go' }).click()
getIframeBody()
.findByTestId('guest-bubble')
@ -68,8 +67,17 @@ describe('General theme settings', () => {
.findByTestId('guest-bubble')
.should('have.css', 'color')
.should('eq', 'rgb(38, 70, 83)')
cy.findAllByRole('button', { name: 'Pick a color' })
.eq(3)
.click({ force: true })
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#ffe8d6')
// Input
cy.findAllByRole('button', { name: 'Pick a color' })
.eq(6)
.click({ force: true })
cy.findByRole('textbox', { name: 'Color value' })
.clear({ force: true })
.type('#ffe8d6')
cy.findAllByRole('button', { name: 'Pick a color' })
.eq(7)
.click({ force: true })
@ -85,6 +93,6 @@ describe('General theme settings', () => {
getIframeBody()
.findByTestId('input')
.should('have.css', 'color')
.should('eq', 'rgb(2, 61, 138)')
.should('eq', 'rgb(2, 62, 138)')
})
})

14
apps/builder/cypress/tests/theme/customCss.ts
View File

@ -1,14 +1,16 @@
import { getIframeBody } from 'cypress/support'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
describe('Custom CSS settings', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(removePreventReload)
it('should reflect changes in real time', () => {
cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/theme')
cy.findByRole('button', { name: 'Custom CSS' }).click()

14
apps/builder/cypress/tests/theme/general.ts
View File

@ -1,14 +1,16 @@
import { getIframeBody } from 'cypress/support'
import {
getIframeBody,
prepareDbAndSignIn,
removePreventReload,
} from 'cypress/support'
describe('General theme settings', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
beforeEach(prepareDbAndSignIn)
afterEach(removePreventReload)
it('should reflect changes in real time', () => {
cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/theme')
cy.findByRole('button', { name: 'General' }).click()

24
apps/builder/layouts/settings/SettingsContent.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Flex } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React, { useMemo } from 'react'
import { TypebotViewer } from 'bot-engine'
import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
import { SettingsSideMenu } from 'components/settings/SettingsSideMenu'
export const SettingsContent = () => {
const { typebot } = useTypebot()
const publicTypebot = useMemo(
() => (typebot ? parseTypebotToPublicTypebot(typebot) : undefined),
// eslint-disable-next-line react-hooks/exhaustive-deps
[typebot?.settings]
)
return (
<Flex h="full" w="full">
<SettingsSideMenu />
<Flex flex="1">
{publicTypebot && <TypebotViewer typebot={publicTypebot} />}
</Flex>
</Flex>
)
}

4
apps/builder/layouts/theme/ThemeContent.tsx
View File

@ -3,7 +3,7 @@ import { TypebotViewer } from 'bot-engine'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import React, { useMemo } from 'react'
import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
import { SideMenu } from '../../components/theme/SideMenu'
import { ThemeSideMenu } from '../../components/theme/ThemeSideMenu'
export const ThemeContent = () => {
const { typebot } = useTypebot()
@ -14,7 +14,7 @@ export const ThemeContent = () => {
)
return (
<Flex h="full" w="full">
<SideMenu />
<ThemeSideMenu />
<Flex flex="1">
{publicTypebot && <TypebotViewer typebot={publicTypebot} />}
</Flex>

6
apps/builder/pages/api/typebots/[typebotId].ts
View File

@ -31,7 +31,11 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const data = JSON.parse(req.body)
const typebots = await prisma.typebot.update({
where: { id: typebotId },
data,
data: {
...data,
theme: data.theme ?? undefined,
settings: data.settings ?? undefined,
},
})
return res.send({ typebots })
}

2
apps/builder/pages/typebots/[typebotId]/settings.tsx
View File

@ -1,6 +1,6 @@
import { Flex } from '@chakra-ui/layout'
import { Seo } from 'components/Seo'
import { SettingsContent } from 'components/settings/SettingsContent'
import { SettingsContent } from 'layouts/settings/SettingsContent'
import { TypebotHeader } from 'components/shared/TypebotHeader'
import React from 'react'

BIN
apps/builder/public/viewer-preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

130
apps/builder/services/typebots.ts
View File

@ -1,23 +1,41 @@
import {
Block,
TextBubbleStep,
PublicTypebot,
StartStep,
BubbleStepType,
InputStepType,
ChoiceInputStep,
LogicStepType,
Step,
ConditionStep,
ComparisonOperators,
LogicalOperator,
DraggableStepType,
DraggableStep,
defaultTheme,
defaultSettings,
StepOptions,
BubbleStepContent,
IntegrationStepType,
defaultTextBubbleContent,
defaultImageBubbleContent,
defaultVideoBubbleContent,
defaultTextInputOptions,
defaultNumberInputOptions,
defaultEmailInputOptions,
defaultDateInputOptions,
defaultPhoneInputOptions,
defaultUrlInputOptions,
defaultChoiceInputOptions,
defaultSetVariablesOptions,
defaultConditionOptions,
defaultRedirectOptions,
defaultGoogleSheetsOptions,
defaultGoogleAnalyticsOptions,
defaultWebhookOptions,
StepWithOptionsType,
} from 'models'
import shortId, { generate } from 'short-uuid'
import shortId from 'short-uuid'
import { Typebot } from 'models'
import useSWR from 'swr'
import { fetcher, toKebabCase } from './utils'
import { isBubbleStepType, stepTypeHasOption } from 'utils'
import { deepEqual } from 'fast-equals'
import { stringify } from 'qs'
import { isChoiceInput, isConditionStep, sendRequest } from 'utils'
@ -114,56 +132,56 @@ export const parseNewStep = (
blockId: string
): DraggableStep => {
const id = `s${shortId.generate()}`
return {
id,
blockId,
type,
content: isBubbleStepType(type) ? parseDefaultContent(type) : undefined,
options: stepTypeHasOption(type)
? parseDefaultStepOptions(type)
: undefined,
} as DraggableStep
}
const parseDefaultContent = (type: BubbleStepType): BubbleStepContent => {
switch (type) {
case BubbleStepType.TEXT: {
const textStep: Pick<TextBubbleStep, 'type' | 'content'> = {
type,
content: { html: '', richText: [], plainText: '' },
}
return {
id,
blockId,
...textStep,
}
}
case InputStepType.CHOICE: {
const choiceInput: Pick<ChoiceInputStep, 'type' | 'options'> = {
type,
options: { itemIds: [] },
}
return {
id,
blockId,
...choiceInput,
}
}
case LogicStepType.CONDITION: {
const id = generate()
const conditionStep: Pick<ConditionStep, 'type' | 'options'> = {
type,
options: {
comparisons: {
byId: {
[id]: { id, comparisonOperator: ComparisonOperators.EQUAL },
},
allIds: [id],
},
logicalOperator: LogicalOperator.AND,
},
}
return {
id,
blockId,
...conditionStep,
}
}
default: {
return {
id,
blockId,
type,
}
}
case BubbleStepType.TEXT:
return defaultTextBubbleContent
case BubbleStepType.IMAGE:
return defaultImageBubbleContent
case BubbleStepType.VIDEO:
return defaultVideoBubbleContent
}
}
const parseDefaultStepOptions = (type: StepWithOptionsType): StepOptions => {
switch (type) {
case InputStepType.TEXT:
return defaultTextInputOptions
case InputStepType.NUMBER:
return defaultNumberInputOptions
case InputStepType.EMAIL:
return defaultEmailInputOptions
case InputStepType.DATE:
return defaultDateInputOptions
case InputStepType.PHONE:
return defaultPhoneInputOptions
case InputStepType.URL:
return defaultUrlInputOptions
case InputStepType.CHOICE:
return defaultChoiceInputOptions
case LogicStepType.SET_VARIABLE:
return defaultSetVariablesOptions
case LogicStepType.CONDITION:
return defaultConditionOptions
case LogicStepType.REDIRECT:
return defaultRedirectOptions
case IntegrationStepType.GOOGLE_SHEETS:
return defaultGoogleSheetsOptions
case IntegrationStepType.GOOGLE_ANALYTICS:
return defaultGoogleAnalyticsOptions
case IntegrationStepType.WEBHOOK:
return defaultWebhookOptions
}
}
@ -223,6 +241,8 @@ export const parseNewTypebot = ({
variables: { byId: {}, allIds: [] },
edges: { byId: {}, allIds: [] },
webhooks: { byId: {}, allIds: [] },
theme: defaultTheme,
settings: defaultSettings,
}
}