feat(logic): ✨ Add Redirect step

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -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

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

@@ -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>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent.tsx

@@ -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>