blsmedia/bot
2
0
Fork 0
Code Activity

feat(logic): ✨ Add Redirect step

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-20 07:21:08 +01:00
parent 8bbd8977b2
commit c43fd1d386
14 changed files with 311 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/builder/components/board/StepTypesList/StepIcon.tsx
View File

@ -5,6 +5,7 @@ import {
CheckSquareIcon,
EditIcon,
EmailIcon,
ExternalLinkIcon,
FilterIcon,
FlagIcon,
GlobeIcon,
@ -46,6 +47,8 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
return <EditIcon {...props} />
case LogicStepType.CONDITION:
return <FilterIcon {...props} />
case LogicStepType.REDIRECT:
return <ExternalLinkIcon {...props} />
case IntegrationStepType.GOOGLE_SHEETS:
return <GoogleSheetsLogo {...props} />
case IntegrationStepType.GOOGLE_ANALYTICS:

3
apps/builder/components/board/StepTypesList/StepTypeLabel.tsx
View File

@ -40,6 +40,9 @@ export const StepTypeLabel = ({ type }: Props) => {
case LogicStepType.CONDITION: {
return <Text>Condition</Text>
}
case LogicStepType.REDIRECT: {
return <Text>Redirect</Text>
}
case IntegrationStepType.GOOGLE_SHEETS: {
return (
<Tooltip label="Google Sheets">

9
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
View File

@ -29,6 +29,7 @@ import { ConditionSettingsBody } from './bodies/ConditionSettingsBody'
import { GoogleAnalyticsSettings } from './bodies/GoogleAnalyticsSettings'
import { GoogleSheetsSettingsBody } from './bodies/GoogleSheetsSettingsBody'
import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
import { RedirectSettings } from './bodies/RedirectSettings'
import { SetVariableSettingsBody } from './bodies/SetVariableSettingsBody'
type Props = {
@ -149,6 +150,14 @@ export const StepSettings = ({ step }: { step: Step }) => {
/>
)
}
case LogicStepType.REDIRECT: {
return (
<RedirectSettings
options={step.options}
onOptionsChange={handleOptionsChange}
/>
)
}
case IntegrationStepType.GOOGLE_SHEETS: {
return (
<GoogleSheetsSettingsBody

40
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx Normal file
View File

@ -0,0 +1,40 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { RedirectOptions } from 'models'
import React from 'react'
type Props = {
options?: RedirectOptions
onOptionsChange: (options: RedirectOptions) => void
}
export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
const handleUrlChange = (url?: string) => onOptionsChange({ ...options, url })
const handleIsNewTabChange = (isNewTab?: boolean) =>
onOptionsChange({ ...options, isNewTab })
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="tracking-id">
Url:
</FormLabel>
<DebouncedInput
id="tracking-id"
initialValue={options?.url ?? ''}
placeholder="Type a URL..."
delay={100}
onChange={handleUrlChange}
/>
</Stack>
<SwitchWithLabel
id="new-tab"
label="Open in new tab?"
initialValue={options?.isNewTab ?? false}
onCheckChange={handleIsNewTabChange}
/>
</Stack>
)
}

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

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