feat(editor): ✨ Code step

apps/builder/components/editor/StepsSideBar/StepIcon.tsx

@@ -3,6 +3,7 @@ import {
   CalendarIcon,
   ChatIcon,
   CheckSquareIcon,
+  CodeIcon,
   EditIcon,
   EmailIcon,
   ExternalLinkIcon,
@@ -57,6 +58,8 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
       return <FilterIcon color="purple.500" {...props} />
     case LogicStepType.REDIRECT:
       return <ExternalLinkIcon color="purple.500" {...props} />
+    case LogicStepType.CODE:
+      return <CodeIcon color="purple.500" {...props} />
     case IntegrationStepType.GOOGLE_SHEETS:
       return <GoogleSheetsLogo {...props} />
     case IntegrationStepType.GOOGLE_ANALYTICS:

apps/builder/components/editor/StepsSideBar/StepTypeLabel.tsx

@@ -37,6 +37,12 @@ export const StepTypeLabel = ({ type }: Props) => {
       return <Text>Condition</Text>
     case LogicStepType.REDIRECT:
       return <Text>Redirect</Text>
+    case LogicStepType.CODE:
+      return (
+        <Tooltip label="Run Javascript code">
+          <Text>Code</Text>
+        </Tooltip>
+      )
     case IntegrationStepType.GOOGLE_SHEETS:
       return (
         <Tooltip label="Google Sheets">

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -27,6 +27,7 @@ import {
   DateInputSettingsBody,
 } from './bodies'
 import { ChoiceInputSettingsBody } from './bodies/ChoiceInputSettingsBody'
+import { CodeSettings } from './bodies/CodeSettings'
 import { ConditionSettingsBody } from './bodies/ConditionSettingsBody'
 import { GoogleAnalyticsSettings } from './bodies/GoogleAnalyticsSettings'
 import { GoogleSheetsSettingsBody } from './bodies/GoogleSheetsSettingsBody'
@@ -177,6 +178,14 @@ export const StepSettings = ({
         />
       )
     }
+    case LogicStepType.CODE: {
+      return (
+        <CodeSettings
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
     case IntegrationStepType.GOOGLE_SHEETS: {
       return (
         <GoogleSheetsSettingsBody

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/CodeSettings.tsx

@@ -0,0 +1,39 @@
+import { FormLabel, Stack, Text } from '@chakra-ui/react'
+import { CodeEditor } from 'components/shared/CodeEditor'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { CodeOptions } from 'models'
+import React from 'react'
+
+type Props = {
+  options: CodeOptions
+  onOptionsChange: (options: CodeOptions) => void
+}
+
+export const CodeSettings = ({ options, onOptionsChange }: Props) => {
+  const handleNameChange = (name: string) =>
+    onOptionsChange({ ...options, name })
+  const handleCodeChange = (content: string) =>
+    onOptionsChange({ ...options, content })
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="name">
+          Name:
+        </FormLabel>
+        <DebouncedInput
+          id="name"
+          initialValue={options.name}
+          onChange={handleNameChange}
+        />
+      </Stack>
+      <Stack>
+        <Text>Code:</Text>
+        <CodeEditor
+          value={options.content ?? ''}
+          lang="js"
+          onChange={handleCodeChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx

@@ -78,6 +78,16 @@ export const StepNodeContent = ({ step, indices }: Props) => {
         />
       )
     }
+    case LogicStepType.CODE: {
+      return (
+        <ConfigureContent
+          label={
+            step.options?.content ? `Run ${step.options?.name}` : undefined
+          }
+        />
+      )
+    }
+
     case IntegrationStepType.GOOGLE_SHEETS: {
       return (
         <ConfigureContent