feat(engine): ✨ Link typebot step

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

@@ -33,8 +33,9 @@ import { GoogleAnalyticsSettings } from './bodies/GoogleAnalyticsSettings'
 import { GoogleSheetsSettingsBody } from './bodies/GoogleSheetsSettingsBody'
 import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
 import { RedirectSettings } from './bodies/RedirectSettings'
-import { SendEmailSettings } from './bodies/SendEmailSettings/SendEmailSettings'
+import { SendEmailSettings } from './bodies/SendEmailSettings'
 import { SetVariableSettings } from './bodies/SetVariableSettings'
+import { TypebotLinkSettingsForm } from './bodies/TypebotLinkSettingsForm'
 import { WebhookSettings } from './bodies/WebhookSettings'
 import { ZapierSettings } from './bodies/ZapierSettings'
 
@@ -43,7 +44,6 @@ type Props = {
   webhook?: Webhook
   onExpandClick: () => void
   onStepChange: (updates: Partial<Step>) => void
-  onTestRequestClick: () => void
 }
 
 export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
@@ -85,12 +85,10 @@ export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
 export const StepSettings = ({
   step,
   onStepChange,
-  onTestRequestClick,
 }: {
   step: Step
   webhook?: Webhook
   onStepChange: (step: Partial<Step>) => void
-  onTestRequestClick: () => void
 }) => {
   const handleOptionsChange = (options: StepOptions) => {
     onStepChange({ options } as Partial<Step>)
@@ -186,6 +184,14 @@ export const StepSettings = ({
         />
       )
     }
+    case LogicStepType.TYPEBOT_LINK: {
+      return (
+        <TypebotLinkSettingsForm
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
     case IntegrationStepType.GOOGLE_SHEETS: {
       return (
         <GoogleSheetsSettingsBody
@@ -208,11 +214,7 @@ export const StepSettings = ({
     }
     case IntegrationStepType.WEBHOOK: {
       return (
-        <WebhookSettings
-          step={step}
-          onOptionsChange={handleOptionsChange}
-          onTestRequestClick={onTestRequestClick}
-        />
+        <WebhookSettings step={step} onOptionsChange={handleOptionsChange} />
       )
     }
     case IntegrationStepType.EMAIL: {

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

@@ -25,8 +25,9 @@ export const NumberInputSettingsBody = ({
     onOptionsChange(removeUndefinedFields({ ...options, max }))
   const handleStepChange = (step?: number) =>
     onOptionsChange(removeUndefinedFields({ ...options, step }))
-  const handleVariableChange = (variable?: Variable) =>
+  const handleVariableChange = (variable?: Variable) => {
     onOptionsChange({ ...options, variableId: variable?.id })
+  }
 
   return (
     <Stack spacing={4}>

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

@@ -0,0 +1,41 @@
+import { Input } from '@chakra-ui/react'
+import { SearchableDropdown } from 'components/shared/SearchableDropdown'
+import { Block } from 'models'
+import { useMemo } from 'react'
+import { byId } from 'utils'
+
+type Props = {
+  blocks: Block[]
+  blockId?: string
+  onBlockIdSelected: (blockId: string) => void
+  isLoading?: boolean
+}
+
+export const BlocksDropdown = ({
+  blocks,
+  blockId,
+  onBlockIdSelected,
+  isLoading,
+}: Props) => {
+  const currentBlock = useMemo(
+    () => blocks?.find(byId(blockId)),
+    [blockId, blocks]
+  )
+
+  const handleBlockSelect = (title: string) => {
+    const id = blocks?.find((b) => b.title === title)?.id
+    if (id) onBlockIdSelected(id)
+  }
+
+  if (isLoading) return <Input value="Loading..." isDisabled />
+  if (!blocks || blocks.length === 0)
+    return <Input value="No blocks found" isDisabled />
+  return (
+    <SearchableDropdown
+      selectedItem={currentBlock?.title}
+      items={(blocks ?? []).map((b) => b.title)}
+      onValueChange={handleBlockSelect}
+      placeholder={'Select a block'}
+    />
+  )
+}

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

@@ -0,0 +1,46 @@
+import { Stack } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { TypebotLinkOptions } from 'models'
+import { byId } from 'utils'
+import { BlocksDropdown } from './BlocksDropdown'
+import { TypebotsDropdown } from './TypebotsDropdown'
+
+type Props = {
+  options: TypebotLinkOptions
+  onOptionsChange: (options: TypebotLinkOptions) => void
+}
+
+export const TypebotLinkSettingsForm = ({
+  options,
+  onOptionsChange,
+}: Props) => {
+  const { linkedTypebots, typebot } = useTypebot()
+
+  const handleTypebotIdChange = (typebotId: string) =>
+    onOptionsChange({ ...options, typebotId })
+  const handleBlockIdChange = (blockId: string) =>
+    onOptionsChange({ ...options, blockId })
+
+  return (
+    <Stack>
+      <TypebotsDropdown
+        typebotId={options.typebotId}
+        onSelectTypebotId={handleTypebotIdChange}
+      />
+      <BlocksDropdown
+        blocks={
+          typebot && options.typebotId === typebot.id
+            ? typebot.blocks
+            : linkedTypebots?.find(byId(options.typebotId))?.blocks ?? []
+        }
+        blockId={options.blockId}
+        onBlockIdSelected={handleBlockIdChange}
+        isLoading={
+          linkedTypebots === undefined &&
+          typebot &&
+          typebot.id !== options.typebotId
+        }
+      />
+    </Stack>
+  )
+}

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

@@ -0,0 +1,56 @@
+import { HStack, IconButton, Input, useToast } from '@chakra-ui/react'
+import { ExternalLinkIcon } from 'assets/icons'
+import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
+import { SearchableDropdown } from 'components/shared/SearchableDropdown'
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+import { useTypebots } from 'services/typebots'
+import { byId } from 'utils'
+
+type Props = {
+  typebotId?: string
+  onSelectTypebotId: (typebotId: string) => void
+}
+
+export const TypebotsDropdown = ({ typebotId, onSelectTypebotId }: Props) => {
+  const { query } = useRouter()
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+  const { typebots, isLoading } = useTypebots({
+    allFolders: true,
+    onError: (e) => toast({ title: e.name, description: e.message }),
+  })
+  const currentTypebot = useMemo(
+    () => typebots?.find(byId(typebotId)),
+    [typebotId, typebots]
+  )
+
+  const handleTypebotSelect = (name: string) => {
+    const id = typebots?.find((s) => s.name === name)?.id
+    if (id) onSelectTypebotId(id)
+  }
+
+  if (isLoading) return <Input value="Loading..." isDisabled />
+  if (!typebots || typebots.length === 0)
+    return <Input value="No typebots found" isDisabled />
+  return (
+    <HStack>
+      <SearchableDropdown
+        selectedItem={currentTypebot?.name}
+        items={(typebots ?? []).map((t) => t.name)}
+        onValueChange={handleTypebotSelect}
+        placeholder={'Select a typebot'}
+      />
+      {currentTypebot?.id && (
+        <IconButton
+          aria-label="Navigate to typebot"
+          icon={<ExternalLinkIcon />}
+          as={NextChakraLink}
+          href={`/typebots/${currentTypebot?.id}/edit?parentId=${query.typebotId}`}
+        />
+      )}
+    </HStack>
+  )
+}

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

@@ -0,0 +1 @@
+export { TypebotLinkSettingsForm } from './TypebotLinkSettingsForm'

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

@@ -42,13 +42,11 @@ import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
 type Props = {
   step: WebhookStep
   onOptionsChange: (options: WebhookOptions) => void
-  onTestRequestClick: () => void
 }
 
 export const WebhookSettings = ({
   step: { options, blockId, id: stepId, webhookId },
   onOptionsChange,
-  onTestRequestClick,
 }: Props) => {
   const { typebot, save, webhooks, updateWebhook } = useTypebot()
   const [isTestResponseLoading, setIsTestResponseLoading] = useState(false)
@@ -122,7 +120,6 @@ export const WebhookSettings = ({
   const handleTestRequestClick = async () => {
     if (!typebot || !localWebhook) return
     setIsTestResponseLoading(true)
-    onTestRequestClick()
     await Promise.all([updateWebhook(localWebhook.id, localWebhook), save()])
     const { data, error } = await executeWebhook(
       typebot.id,