@ -1,7 +0,0 @@
|
||||
import { CodeIcon as CodeIco } from '@/components/icons'
|
||||
import { IconProps } from '@chakra-ui/react'
|
||||
import React from 'react'
|
||||
|
||||
export const CodeIcon = (props: IconProps) => (
|
||||
<CodeIco color="purple.500" {...props} />
|
||||
)
|
@ -1,3 +0,0 @@
|
||||
export { CodeSettings } from './components/CodeSettings'
|
||||
export { CodeNodeContent } from './components/CodeNodeContent'
|
||||
export { CodeIcon } from './components/CodeIcon'
|
@ -0,0 +1,15 @@
|
||||
import { featherIconsBaseProps } from '@/components/icons'
|
||||
import { Icon, IconProps, useColorModeValue } from '@chakra-ui/react'
|
||||
import React from 'react'
|
||||
|
||||
export const ScriptIcon = (props: IconProps) => (
|
||||
<Icon
|
||||
viewBox="0 0 24 24"
|
||||
color={useColorModeValue('purple.500', 'purple.300')}
|
||||
{...featherIconsBaseProps}
|
||||
{...props}
|
||||
>
|
||||
<polyline points="4 17 10 11 4 5"></polyline>
|
||||
<line x1="12" y1="19" x2="20" y2="19"></line>
|
||||
</Icon>
|
||||
)
|
@ -1,10 +1,10 @@
|
||||
import React from 'react'
|
||||
import { Text } from '@chakra-ui/react'
|
||||
import { CodeOptions } from 'models'
|
||||
import { ScriptOptions } from 'models'
|
||||
|
||||
type Props = CodeOptions
|
||||
type Props = ScriptOptions
|
||||
|
||||
export const CodeNodeContent = ({ name, content }: Props) => (
|
||||
export const ScriptNodeContent = ({ name, content }: Props) => (
|
||||
<Text color={content ? 'currentcolor' : 'gray.500'} noOfLines={1}>
|
||||
{content ? `Run ${name}` : 'Configure...'}
|
||||
</Text>
|
@ -1,16 +1,16 @@
|
||||
import { FormLabel, Stack, Text } from '@chakra-ui/react'
|
||||
import { CodeEditor } from '@/components/CodeEditor'
|
||||
import { CodeOptions } from 'models'
|
||||
import React from 'react'
|
||||
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
|
||||
import { Input } from '@/components/inputs'
|
||||
import { ScriptOptions } from 'models'
|
||||
|
||||
type Props = {
|
||||
options: CodeOptions
|
||||
onOptionsChange: (options: CodeOptions) => void
|
||||
options: ScriptOptions
|
||||
onOptionsChange: (options: ScriptOptions) => void
|
||||
}
|
||||
|
||||
export const CodeSettings = ({ options, onOptionsChange }: Props) => {
|
||||
export const ScriptSettings = ({ options, onOptionsChange }: Props) => {
|
||||
const handleNameChange = (name: string) =>
|
||||
onOptionsChange({ ...options, name })
|
||||
const handleCodeChange = (content: string) =>
|
3
apps/builder/src/features/blocks/logic/script/index.ts
Normal file
3
apps/builder/src/features/blocks/logic/script/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { ScriptSettings } from './components/ScriptSettings'
|
||||
export { ScriptNodeContent } from './components/ScriptNodeContent'
|
||||
export { ScriptIcon } from './components/ScriptIcon'
|
@ -6,9 +6,9 @@ import { getTestAsset } from '@/test/utils/playwright'
|
||||
|
||||
const typebotId = cuid()
|
||||
|
||||
test.describe('Code block', () => {
|
||||
test('code should trigger', async ({ page }) => {
|
||||
await importTypebotInDatabase(getTestAsset('typebots/logic/code.json'), {
|
||||
test.describe('Script block', () => {
|
||||
test('script should trigger', async ({ page }) => {
|
||||
await importTypebotInDatabase(getTestAsset('typebots/logic/script.json'), {
|
||||
id: typebotId,
|
||||
})
|
||||
|
@ -19,7 +19,6 @@ import { ZapierLogo } from '@/features/blocks/integrations/zapier'
|
||||
import { WebhookIcon } from '@/features/blocks/integrations/webhook'
|
||||
import { GoogleSheetsLogo } from '@/features/blocks/integrations/googleSheets'
|
||||
import { TypebotLinkIcon } from '@/features/blocks/logic/typebotLink'
|
||||
import { CodeIcon } from '@/features/blocks/logic/code'
|
||||
import { RedirectIcon } from '@/features/blocks/logic/redirect'
|
||||
import { ConditionIcon } from '@/features/blocks/logic/condition'
|
||||
import { SetVariableIcon } from '@/features/blocks/logic/setVariable'
|
||||
@ -37,6 +36,7 @@ import { EmbedBubbleIcon } from '@/features/blocks/bubbles/embed'
|
||||
import { GoogleAnalyticsLogo } from '@/features/blocks/integrations/googleAnalytics'
|
||||
import { AudioBubbleIcon } from '@/features/blocks/bubbles/audio'
|
||||
import { WaitIcon } from '@/features/blocks/logic/wait/components/WaitIcon'
|
||||
import { ScriptIcon } from '@/features/blocks/logic/script/components/ScriptIcon'
|
||||
|
||||
type BlockIconProps = { type: BlockType } & IconProps
|
||||
|
||||
@ -81,8 +81,8 @@ export const BlockIcon = ({ type, ...props }: BlockIconProps) => {
|
||||
return <ConditionIcon color={purple} {...props} />
|
||||
case LogicBlockType.REDIRECT:
|
||||
return <RedirectIcon color={purple} {...props} />
|
||||
case LogicBlockType.CODE:
|
||||
return <CodeIcon color={purple} {...props} />
|
||||
case LogicBlockType.SCRIPT:
|
||||
return <ScriptIcon {...props} />
|
||||
case LogicBlockType.WAIT:
|
||||
return <WaitIcon color={purple} {...props} />
|
||||
case LogicBlockType.TYPEBOT_LINK:
|
||||
|
@ -65,10 +65,10 @@ export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
|
||||
return <Text>Condition</Text>
|
||||
case LogicBlockType.REDIRECT:
|
||||
return <Text>Redirect</Text>
|
||||
case LogicBlockType.CODE:
|
||||
case LogicBlockType.SCRIPT:
|
||||
return (
|
||||
<Tooltip label="Run Javascript code">
|
||||
<Text>Code</Text>
|
||||
<Text>Script</Text>
|
||||
</Tooltip>
|
||||
)
|
||||
case LogicBlockType.TYPEBOT_LINK:
|
||||
|
@ -23,7 +23,6 @@ import { SetVariableContent } from '@/features/blocks/logic/setVariable'
|
||||
import { WebhookContent } from '@/features/blocks/integrations/webhook'
|
||||
import { ChatwootBlockNodeLabel } from '@/features/blocks/integrations/chatwoot'
|
||||
import { RedirectNodeContent } from '@/features/blocks/logic/redirect'
|
||||
import { CodeNodeContent } from '@/features/blocks/logic/code'
|
||||
import { PabblyConnectContent } from '@/features/blocks/integrations/pabbly'
|
||||
import { WithVariableContent } from './WithVariableContent'
|
||||
import { PaymentInputContent } from '@/features/blocks/inputs/payment'
|
||||
@ -38,6 +37,7 @@ import { isInputBlock, isChoiceInput, blockHasItems } from 'utils'
|
||||
import { MakeComContent } from '@/features/blocks/integrations/makeCom'
|
||||
import { AudioBubbleNode } from '@/features/blocks/bubbles/audio'
|
||||
import { WaitNodeContent } from '@/features/blocks/logic/wait/components/WaitNodeContent'
|
||||
import { ScriptNodeContent } from '@/features/blocks/logic/script/components/ScriptNodeContent'
|
||||
|
||||
type Props = {
|
||||
block: Block | StartBlock
|
||||
@ -113,9 +113,9 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
|
||||
case LogicBlockType.REDIRECT: {
|
||||
return <RedirectNodeContent url={block.options.url} />
|
||||
}
|
||||
case LogicBlockType.CODE: {
|
||||
case LogicBlockType.SCRIPT: {
|
||||
return (
|
||||
<CodeNodeContent
|
||||
<ScriptNodeContent
|
||||
name={block.options.name}
|
||||
content={block.options.content}
|
||||
/>
|
||||
|
@ -38,8 +38,8 @@ const getHelpDocUrl = (blockType: BlockWithOptions['type']): string | null => {
|
||||
return 'https://docs.typebot.io/editor/blocks/logic/set-variable'
|
||||
case LogicBlockType.REDIRECT:
|
||||
return 'https://docs.typebot.io/editor/blocks/logic/redirect'
|
||||
case LogicBlockType.CODE:
|
||||
return 'https://docs.typebot.io/editor/blocks/logic/code'
|
||||
case LogicBlockType.SCRIPT:
|
||||
return 'https://docs.typebot.io/editor/blocks/logic/script'
|
||||
case LogicBlockType.WAIT:
|
||||
return 'https://docs.typebot.io/editor/blocks/logic/wait'
|
||||
case InputBlockType.TEXT:
|
||||
|
@ -33,7 +33,6 @@ import { GoogleSheetsSettingsBody } from '@/features/blocks/integrations/googleS
|
||||
import { SendEmailSettings } from '@/features/blocks/integrations/sendEmail'
|
||||
import { WebhookSettings } from '@/features/blocks/integrations/webhook'
|
||||
import { ZapierSettings } from '@/features/blocks/integrations/zapier'
|
||||
import { CodeSettings } from '@/features/blocks/logic/code'
|
||||
import { RedirectSettings } from '@/features/blocks/logic/redirect'
|
||||
import { SetVariableSettings } from '@/features/blocks/logic/setVariable'
|
||||
import { TypebotLinkForm } from '@/features/blocks/logic/typebotLink'
|
||||
@ -42,6 +41,7 @@ import { ChatwootSettingsForm } from '@/features/blocks/integrations/chatwoot'
|
||||
import { MakeComSettings } from '@/features/blocks/integrations/makeCom'
|
||||
import { HelpDocButton } from './HelpDocButton'
|
||||
import { WaitSettings } from '@/features/blocks/logic/wait/components/WaitSettings'
|
||||
import { ScriptSettings } from '@/features/blocks/logic/script/components/ScriptSettings'
|
||||
|
||||
type Props = {
|
||||
block: BlockWithOptions
|
||||
@ -197,9 +197,9 @@ export const BlockSettings = ({
|
||||
/>
|
||||
)
|
||||
}
|
||||
case LogicBlockType.CODE: {
|
||||
case LogicBlockType.SCRIPT: {
|
||||
return (
|
||||
<CodeSettings
|
||||
<ScriptSettings
|
||||
options={block.options}
|
||||
onOptionsChange={handleOptionsChange}
|
||||
/>
|
||||
|
@ -6,7 +6,6 @@ import {
|
||||
BubbleBlockType,
|
||||
defaultChatwootOptions,
|
||||
defaultChoiceInputOptions,
|
||||
defaultCodeOptions,
|
||||
defaultConditionContent,
|
||||
defaultDateInputOptions,
|
||||
defaultEmailInputOptions,
|
||||
@ -38,6 +37,7 @@ import {
|
||||
ItemType,
|
||||
LogicBlockType,
|
||||
defaultWaitOptions,
|
||||
defaultScriptOptions,
|
||||
} from 'models'
|
||||
import {
|
||||
stubLength,
|
||||
@ -433,8 +433,8 @@ const parseDefaultBlockOptions = (type: BlockWithOptionsType): BlockOptions => {
|
||||
return defaultSetVariablesOptions
|
||||
case LogicBlockType.REDIRECT:
|
||||
return defaultRedirectOptions
|
||||
case LogicBlockType.CODE:
|
||||
return defaultCodeOptions
|
||||
case LogicBlockType.SCRIPT:
|
||||
return defaultScriptOptions
|
||||
case LogicBlockType.WAIT:
|
||||
return defaultWaitOptions
|
||||
case LogicBlockType.TYPEBOT_LINK:
|
||||
|
Reference in New Issue
Block a user