feat(logic): ✨ Add Redirect step

apps/builder/components/board/StepTypesList/StepIcon.tsx

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

apps/builder/components/board/StepTypesList/StepTypeLabel.tsx

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

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>

apps/builder/components/shared/TypebotHeader/SaveButton.tsx

@@ -6,10 +6,6 @@ import React from 'react'
 export const SaveButton = () => {
   const { save, isSavingLoading, hasUnsavedChanges } = useTypebot()
 
-  const onSaveClick = () => {
-    save()
-  }
-
   return (
     <>
       {hasUnsavedChanges && (
@@ -20,7 +16,7 @@ export const SaveButton = () => {
       <Tooltip label="Save changes">
         <IconButton
           isDisabled={!hasUnsavedChanges}
-          onClick={onSaveClick}
+          onClick={save}
           isLoading={isSavingLoading}
           icon={
             hasUnsavedChanges ? <SaveIcon /> : <CheckIcon color="green.400" />

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -13,7 +13,7 @@ export const headerHeight = 56
 
 export const TypebotHeader = () => {
   const router = useRouter()
-  const { typebot, updateTypebot } = useTypebot()
+  const { typebot, updateTypebot, save } = useTypebot()
   const { setRightPanel } = useEditor()
 
   const handleBackClick = () => {
@@ -24,6 +24,12 @@ export const TypebotHeader = () => {
   }
 
   const handleNameSubmit = (name: string) => updateTypebot({ name })
+
+  const handlePreviewClick = async () => {
+    await save()
+    setRightPanel(RightPanel.PREVIEW)
+  }
+
   return (
     <Flex
       w="full"
@@ -95,14 +101,7 @@ export const TypebotHeader = () => {
 
       <HStack right="40px" pos="absolute">
         <SaveButton />
-        <Button
-          onClick={() => {
-            setRightPanel(RightPanel.PREVIEW)
-          }}
-        >
-          Preview
-        </Button>
-
+        <Button onClick={handlePreviewClick}>Preview</Button>
         <PublishButton />
       </HStack>
     </Flex>