create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/app/(base)/test-cases/test-case-form.tsx

@@ -1,17 +1,33 @@
 'use client'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useReducer } from 'react'
 
+import {
+  getConvertedTemplateTestCaseData,
+  getFieldErrorMessage,
+  getTemplateSelectionOptions,
+  templateSelectionFieldValidator,
+  type TemplateTestCaseWithSteps,
+} from './create-from-template/create-from-template-helpers'
+import { InlineTagCreationDialog } from './inline-tag-creation-dialog'
+import { InlineTestSuiteCreationDialog } from './inline-test-suite-creation-dialog'
 import TestCaseFlow from './test-case-flow'
-import type { NodeOrderMap } from '@/types/diagram/diagram'
+import type { TagFormSubmitAction } from '@/app/(base)/tags/tag-form-helpers'
+import type { TestSuiteFormSubmitAction } from '@/app/(base)/test-suites/test-suite-helpers'
+import type { FlowBlock, NodeOrderMap } from '@/types/diagram/diagram'
+import type { TestCasePickerRow } from '@/types/test-case-picker'
 import {
   type Locator,
   type LocatorGroup,
+  type Environment,
+  type Module,
   type TemplateStep,
   type TemplateStepParameter,
   type TestSuite,
   type Tag,
 } from '@prisma/client'
-import { Info, Save } from 'lucide-react'
+import { ArrowLeft, ArrowRight, Info, Maximize2, Minimize2, Plus, Save } from 'lucide-react'
+import { LayoutGroup, LazyMotion, domAnimation } from 'motion/react'
+import * as motion from 'motion/react-m'
 import { useRouter } from 'next/navigation'
 import { z } from 'zod'
 
@@ -20,8 +36,8 @@ import { TestScenarioPreview } from '@/components/test-case/test-scenario-previe
 import {
   buildScenarioPreview,
   buildScenarioSteps,
-  getActionErrorMessage,
   getNodesWithMissingMandatoryParams,
+  handleTestCaseSaveResponse,
   testCaseQuickTips,
   testCaseSubmitSchema,
 } from '@/components/test-case/test-case-form-helpers'
@@ -30,126 +46,545 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { MultiSelect } from '@/components/ui/multi-select'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import { testCaseSchema } from '@/constants/form-opts/test-case-form-opts'
 import { toast } from '@/hooks/use-toast'
+import { cn } from '@/lib/utils'
 import type { ActionResponse } from '@/types/form/actionHandler'
+import {
+  createTestCaseFormState,
+  testCaseFormReducer,
+  type TestCaseFormErrors,
+} from './test-case-form-reducer'
 
 type TestCaseFormProps = {
   defaultNodesOrder: NodeOrderMap
   templateStepParams: TemplateStepParameter[]
   templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name' | 'route' | 'moduleId'>>
+  environments: Array<Pick<Environment, 'id' | 'name'>>
   testSuites: TestSuite[]
+  testCases: TestCasePickerRow[]
+  moduleList: Module[]
   tags: Tag[]
   onSubmitAction: (value: z.infer<typeof testCaseSchema>, id?: string) => Promise<ActionResponse>
+  onCreateTestSuiteAction: TestSuiteFormSubmitAction
+  onCreateTagAction: TagFormSubmitAction
   id?: string
   defaultTitle?: string
   defaultDescription?: string
   defaultTestSuiteIds?: string[]
   defaultTagIds?: string[]
+  templateTestCases?: TemplateTestCaseWithSteps[]
+  defaultTemplateTestCaseId?: string
+  defaultFlowBlocks?: FlowBlock[]
 }
 
-const TestCaseForm = ({
-  defaultNodesOrder,
+const EMPTY_FLOW_BLOCKS: FlowBlock[] = []
+
+const detailsStepSchema = testCaseSubmitSchema.omit({ steps: true })
+
+type TemplateSelectionResolution =
+  | { status: 'skip' }
+  | { status: 'invalid'; errors: string[] }
+  | { status: 'not-found' }
+  | { status: 'unchanged' }
+  | {
+      status: 'converted'
+      templateTestCase: TemplateTestCaseWithSteps
+      convertedData: NonNullable<ReturnType<typeof getConvertedTemplateTestCaseData>['convertedData']>
+    }
+  | { status: 'conversion-error'; error?: string }
+
+function resolveTemplateSelection({
+  hasTemplateSelectionStep,
+  templateTestCases,
+  selectedTemplateId,
+  appliedTemplateId,
+}: {
+  hasTemplateSelectionStep: boolean
+  templateTestCases?: TemplateTestCaseWithSteps[]
+  selectedTemplateId: string
+  appliedTemplateId: string
+}): TemplateSelectionResolution {
+  if (!hasTemplateSelectionStep || !templateTestCases) {
+    return { status: 'skip' }
+  }
+
+  const validation = templateSelectionFieldValidator.safeParse(selectedTemplateId)
+
+  if (!validation.success) {
+    return { status: 'invalid', errors: validation.error.flatten().formErrors }
+  }
+
+  const templateTestCase = templateTestCases.find(option => option.id === selectedTemplateId)
+
+  if (!templateTestCase) {
+    return { status: 'not-found' }
+  }
+
+  if (selectedTemplateId === appliedTemplateId) {
+    return { status: 'unchanged' }
+  }
+
+  const { convertedData, error } = getConvertedTemplateTestCaseData(templateTestCase)
+
+  if (!convertedData || error) {
+    return { status: 'conversion-error', error: error ?? undefined }
+  }
+
+  return { status: 'converted', templateTestCase, convertedData }
+}
+
+function isDetailFieldError(fieldErrors: TestCaseFormErrors): boolean {
+  return Boolean(fieldErrors.title || fieldErrors.description || fieldErrors.testSuiteIds || fieldErrors.tagIds)
+}
+
+function getWizardSteps(hasTemplateSelectionStep: boolean): string[] {
+  return hasTemplateSelectionStep
+    ? ['Template Selection', 'Test Case Details', 'Test Case Flow']
+    : ['Test Case Details', 'Test Case Flow']
+}
+
+function getWizardStepIndexes(hasTemplateSelectionStep: boolean): {
+  detailsStepIndex: number
+  flowStepIndex: number
+} {
+  return {
+    detailsStepIndex: hasTemplateSelectionStep ? 1 : 0,
+    flowStepIndex: hasTemplateSelectionStep ? 2 : 1,
+  }
+}
+
+function getInitialWizardStep(
+  hasTemplateSelectionStep: boolean,
+  defaultTemplateTestCaseId: string | undefined,
+  detailsStepIndex: number,
+): number {
+  if (!hasTemplateSelectionStep) {
+    return 0
+  }
+
+  return defaultTemplateTestCaseId ? detailsStepIndex : 0
+}
+
+function buildTemplatePreviewSteps(templateTestCase: TemplateTestCaseWithSteps | null): string[] {
+  return (
+    templateTestCase?.steps
+      .slice()
+      .sort((left, right) => left.order - right.order)
+      .slice(0, 3)
+      .map(step => step.label) ?? []
+  )
+}
+
+function getTemplateStepCount(templateTestCase: TemplateTestCaseWithSteps | null): number {
+  return templateTestCase?.steps.length ?? 0
+}
+
+function TestCaseFormFieldError({ message }: { message?: string[] }) {
+  return <ErrorMessage message={message?.[0] || ''} visible={Boolean(message?.[0])} />
+}
+
+type WizardProgressProps = {
+  steps: string[]
+  currentStep: number
+  onStepClick: (stepIndex: number) => void
+}
+
+function WizardProgress({ steps, currentStep, onStepClick }: WizardProgressProps) {
+  const stepLineInset = `${50 / steps.length}%`
+  const stepProgressWidth = steps.length > 1 ? `${(currentStep / (steps.length - 1)) * 100}%` : '0%'
+
+  return (
+    <div className="mb-4 px-1 pt-1">
+      <div className="relative">
+        <div
+          className="pointer-events-none absolute z-0 h-px -translate-y-1/2 bg-border"
+          style={{
+            left: stepLineInset,
+            right: stepLineInset,
+            top: 'calc(100% - 0.375rem)',
+          }}
+        />
+        <div
+          className="pointer-events-none absolute z-0 h-px -translate-y-1/2 overflow-hidden"
+          style={{
+            left: stepLineInset,
+            right: stepLineInset,
+            top: 'calc(100% - 0.375rem)',
+          }}
+        >
+          <div className="h-full bg-primary transition-all duration-200" style={{ width: stepProgressWidth }} />
+        </div>
+        <div
+          className="grid gap-3"
+          style={{
+            gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))`,
+          }}
+        >
+          {steps.map((step, index) => {
+            const isActive = currentStep === index
+            const isComplete = currentStep > index
+            const isFilled = isComplete || (index === 0 && isActive)
+
+            return (
+              <button
+                key={step}
+                type="button"
+                className="flex flex-col items-center gap-2 px-2 text-center"
+                onClick={() => onStepClick(index)}
+                aria-current={isActive ? 'step' : undefined}
+              >
+                <span
+                  className={`text-xs font-medium transition-colors sm:text-sm ${
+                    isActive || isComplete ? 'text-primary' : 'text-muted-foreground'
+                  }`}
+                >
+                  {step}
+                </span>
+                <span
+                  className={`relative z-10 size-3 rounded-full border transition-colors ${
+                    isFilled
+                      ? 'border-primary bg-primary'
+                      : isActive
+                        ? 'border-primary bg-background'
+                        : 'border-border bg-background'
+                  }`}
+                />
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+type FlowPanelProps = {
+  className: string
+  nodesOrder: NodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name' | 'route' | 'moduleId'>>
+  environments: Array<Pick<Environment, 'id' | 'name'>>
+  moduleList: Module[]
+  flowBlocks: FlowBlock[]
+  isFlowImmersive: boolean
+  onNodeOrderChange: (nodesOrder: NodeOrderMap) => void
+  onFlowBlocksChange: (flowBlocks: FlowBlock[]) => void
+  onToggleImmersive: () => void
+}
+
+function FlowPanel({
+  className,
+  nodesOrder,
   templateStepParams,
   templateSteps,
   locators,
   locatorGroups,
-  testSuites,
-  tags,
-  id,
-  defaultTitle,
-  defaultDescription,
-  defaultTestSuiteIds,
-  defaultTagIds,
-  onSubmitAction,
-}: TestCaseFormProps) => {
-  const router = useRouter()
-  const [nodesOrder, setNodesOrder] = useState<NodeOrderMap>(defaultNodesOrder)
-  const [title, setTitle] = useState(defaultTitle || '')
-  const [description, setDescription] = useState(defaultDescription || '')
-  const [selectedTestSuites, setSelectedTestSuites] = useState(defaultTestSuiteIds || [])
-  const [selectedTags, setSelectedTags] = useState(defaultTagIds || [])
-  const [errors, setErrors] = useState<{
-    title?: string[]
-    description?: string[]
-    testSuiteIds?: string[]
-    steps?: string[]
-  }>({})
+  environments,
+  moduleList,
+  flowBlocks,
+  isFlowImmersive,
+  onNodeOrderChange,
+  onFlowBlocksChange,
+  onToggleImmersive,
+}: FlowPanelProps) {
+  return (
+    <LazyMotion features={domAnimation} strict>
+    <motion.div
+      layout
+      layoutId="test-case-flow-panel"
+      className={cn(
+        'flex min-h-0 w-full flex-col overflow-hidden rounded-xl border border-zinc-700 text-card-foreground shadow-sm will-change-transform',
+        className,
+      )}
+      transition={{ layout: { duration: 0.3, ease: 'easeInOut' } }}
+    >
+      <CardHeader className="shrink-0">
+        <div className="flex items-start justify-between gap-3">
+          <div className="space-y-1">
+            <CardTitle className="text-xl font-bold text-primary">Test Case Flow</CardTitle>
+            <CardDescription>Build your test scenario step by step visually</CardDescription>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="size-9 shrink-0"
+            onClick={onToggleImmersive}
+            aria-label={isFlowImmersive ? 'Exit immersive flow editing' : 'Enter immersive flow editing'}
+          >
+            {isFlowImmersive ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="flex min-h-0 flex-1 flex-col">
+        <div className="flex min-h-0 flex-1 flex-col gap-2">
+          <div className="min-h-0 flex-1">
+            <TestCaseFlow
+              initialNodesOrder={nodesOrder}
+              templateStepParams={templateStepParams}
+              templateSteps={templateSteps}
+              onNodeOrderChange={onNodeOrderChange}
+              locators={locators}
+              locatorGroups={locatorGroups}
+              environments={environments}
+              modules={moduleList}
+              flowBlocks={flowBlocks}
+              layoutRefreshKey={isFlowImmersive}
+              onFlowBlocksChange={onFlowBlocksChange}
+            />
+          </div>
+        </div>
+      </CardContent>
+    </motion.div>
+    </LazyMotion>
+  )
+}
 
-  const scenarioPreview = buildScenarioPreview(title, description, nodesOrder)
-  const renderError = (message?: string[]) => <ErrorMessage message={message?.[0] || ''} visible={!!message} />
+type TemplateSelectionStepProps = {
+  templateOptions: ReturnType<typeof getTemplateSelectionOptions>
+  selectedTemplateId: string
+  selectedTemplateTestCase: TemplateTestCaseWithSteps | null
+  selectedTemplateStepCount: number
+  selectedTemplatePreviewSteps: string[]
+  errors: TestCaseFormErrors
+  onTemplateChange: (value: string) => void
+  onContinue: () => void
+}
 
-  const onNodeOrderChange = useCallback((nodesOrder: NodeOrderMap) => {
-    setNodesOrder(nodesOrder)
-  }, [])
+function TemplateSelectionStep({
+  templateOptions,
+  selectedTemplateId,
+  selectedTemplateTestCase,
+  selectedTemplateStepCount,
+  selectedTemplatePreviewSteps,
+  errors,
+  onTemplateChange,
+  onContinue,
+}: TemplateSelectionStepProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 xl:flex-row">
+        <div className="xl:w-1/2">
+          <Card className="h-full dark:border-zinc-700 dark:bg-zinc-500/10">
+            <CardHeader className="mb-4">
+              <CardTitle className="text-xl font-bold text-primary">Template Selection</CardTitle>
+              <CardDescription>Choose the template that should seed the new test case</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="templateTestCaseId">Template Test Case</Label>
+                <Select onValueChange={onTemplateChange} value={selectedTemplateId}>
+                  <SelectTrigger id="templateTestCaseId" aria-label="Template Test Case">
+                    <SelectValue placeholder="Select a template test case" />
+                  </SelectTrigger>
+                  <SelectContent isEmpty={templateOptions.length === 0}>
+                    {templateOptions.map(templateOption => (
+                      <SelectItem key={templateOption.value} value={templateOption.value}>
+                        {templateOption.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <TestCaseFormFieldError
+                  message={errors.templateTestCaseId?.map(error => getFieldErrorMessage(error))}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+        <div className="xl:w-1/2">
+          <Card className="h-full border-zinc-700 bg-zinc-500/10">
+            <CardHeader className="mb-2">
+              <CardTitle className="text-xl font-bold text-primary">Selected Template</CardTitle>
+              <CardDescription>Review what will be prefilled before moving into the form</CardDescription>
+            </CardHeader>
+            <CardContent className="flex h-full flex-col gap-3">
+              <SelectedTemplateSummary
+                selectedTemplateTestCase={selectedTemplateTestCase}
+                selectedTemplateStepCount={selectedTemplateStepCount}
+                selectedTemplatePreviewSteps={selectedTemplatePreviewSteps}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      <div className="mb-4 flex flex-col gap-2">
+        <Button onClick={onContinue} className="w-fit px-6 hover:bg-emerald-500">
+          <span className="font-bold">Continue</span>
+          <ArrowRight className="size-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
 
-  const onTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(e.target.value)
-  }, [])
+type SelectedTemplateSummaryProps = {
+  selectedTemplateTestCase: TemplateTestCaseWithSteps | null
+  selectedTemplateStepCount: number
+  selectedTemplatePreviewSteps: string[]
+}
 
-  const onDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setDescription(e.target.value)
-  }, [])
+function SelectedTemplateSummary({
+  selectedTemplateTestCase,
+  selectedTemplateStepCount,
+  selectedTemplatePreviewSteps,
+}: SelectedTemplateSummaryProps) {
+  const hasOverflowPreviewSteps = selectedTemplateStepCount > selectedTemplatePreviewSteps.length
 
-  const onTestSuiteChange = useCallback((selectedTestSuites: string[]) => {
-    setSelectedTestSuites(selectedTestSuites)
-  }, [])
+  return (
+    <>
+      <div className="rounded-lg border border-dashed border-border p-4">
+        <div className="text-sm font-semibold text-foreground">
+          {selectedTemplateTestCase?.name || 'No template selected'}
+        </div>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {selectedTemplateTestCase?.description ||
+            'The selected template will prefill the title, description, and test flow for the next steps.'}
+        </p>
+      </div>
+      <div className="rounded-lg border border-dashed border-border p-4">
+        {selectedTemplateTestCase ? (
+          <SelectedTemplateDetails
+            hasDescription={Boolean(selectedTemplateTestCase.description)}
+            hasOverflowPreviewSteps={hasOverflowPreviewSteps}
+            selectedTemplateStepCount={selectedTemplateStepCount}
+            selectedTemplatePreviewSteps={selectedTemplatePreviewSteps}
+          />
+        ) : (
+          <NoSelectedTemplateMessage />
+        )}
+      </div>
+    </>
+  )
+}
 
-  const onTagChange = useCallback((selectedTags: string[]) => {
-    setSelectedTags(selectedTags)
-  }, [])
+type SelectedTemplateDetailsProps = {
+  hasDescription: boolean
+  hasOverflowPreviewSteps: boolean
+  selectedTemplateStepCount: number
+  selectedTemplatePreviewSteps: string[]
+}
 
-  const handleSubmit = useCallback(async () => {
-    const nodesWithMissingParams = getNodesWithMissingMandatoryParams(nodesOrder, templateStepParams)
+function SelectedTemplateDetails({
+  hasDescription,
+  hasOverflowPreviewSteps,
+  selectedTemplateStepCount,
+  selectedTemplatePreviewSteps,
+}: SelectedTemplateDetailsProps) {
+  return (
+    <div className="flex flex-col gap-3 text-sm text-muted-foreground">
+      <div className="flex flex-wrap gap-2">
+        <span className="rounded-full border border-border px-3 py-1 text-xs font-medium text-foreground">
+          {selectedTemplateStepCount} {selectedTemplateStepCount === 1 ? 'step' : 'steps'}
+        </span>
+        <span className="rounded-full border border-border px-3 py-1 text-xs font-medium text-foreground">
+          {hasDescription ? 'Description included' : 'No description'}
+        </span>
+        <span className="rounded-full border border-border px-3 py-1 text-xs font-medium text-foreground">
+          Title will be prefilled
+        </span>
+      </div>
+      <p>Continuing will load this template into the details and flow steps so you can edit before saving.</p>
+      <TemplatePreviewSteps
+        hasOverflowPreviewSteps={hasOverflowPreviewSteps}
+        selectedTemplateStepCount={selectedTemplateStepCount}
+        selectedTemplatePreviewSteps={selectedTemplatePreviewSteps}
+      />
+    </div>
+  )
+}
 
-    if (nodesWithMissingParams.length > 0) {
-      toast({
-        title: 'Validation Error',
-        description: `The following nodes have missing mandatory parameters: ${nodesWithMissingParams.join(', ')}. Please fill in all required parameters before saving.`,
-        variant: 'destructive',
-      })
-      return
-    }
+type TemplatePreviewStepsProps = {
+  hasOverflowPreviewSteps: boolean
+  selectedTemplateStepCount: number
+  selectedTemplatePreviewSteps: string[]
+}
 
-    const result = testCaseSubmitSchema.safeParse({
-      title,
-      description,
-      testSuiteIds: selectedTestSuites,
-      tagIds: selectedTags,
-      steps: buildScenarioSteps(nodesOrder),
-    })
+function TemplatePreviewSteps({
+  hasOverflowPreviewSteps,
+  selectedTemplateStepCount,
+  selectedTemplatePreviewSteps,
+}: TemplatePreviewStepsProps) {
+  if (selectedTemplatePreviewSteps.length === 0) {
+    return null
+  }
 
-    if (!result.success) {
-      setErrors(result.error.flatten().fieldErrors)
-      return
-    }
-    setErrors({})
-    const response = await onSubmitAction(result.data, id)
-    if (response.status === 200) {
-      toast({
-        title: 'Success',
-        description: 'Test case saved successfully',
-        variant: 'default',
-      })
-      router.push(`/test-cases`)
-    }
-    if (response.status === 500) {
-      toast({
-        title: 'Error',
-        description: getActionErrorMessage(response),
-        variant: 'destructive',
-      })
-    }
-  }, [description, nodesOrder, selectedTestSuites, selectedTags, title, router, onSubmitAction, id, templateStepParams])
+  return (
+    <div className="flex flex-col gap-2">
+      <span className="text-foreground/80 text-xs font-medium uppercase tracking-wide">Flow Preview</span>
+      <div className="flex flex-wrap gap-2">
+        {selectedTemplatePreviewSteps.map(stepLabel => (
+          <span key={stepLabel} className="rounded-full bg-muted px-3 py-1 text-xs text-foreground">
+            {stepLabel}
+          </span>
+        ))}
+        {hasOverflowPreviewSteps ? (
+          <span className="rounded-full bg-muted px-3 py-1 text-xs text-foreground">
+            +{selectedTemplateStepCount - selectedTemplatePreviewSteps.length} more
+          </span>
+        ) : null}
+      </div>
+    </div>
+  )
+}
 
+function NoSelectedTemplateMessage() {
+  return (
+    <p className="text-sm text-muted-foreground">
+      Select a template to preview what will be prefilled in the next two steps.
+    </p>
+  )
+}
+
+type DetailsStepProps = {
+  hasTemplateSelectionStep: boolean
+  title: string
+  description: string
+  availableTestSuites: TestSuite[]
+  availableTags: Tag[]
+  selectedTestSuites: string[]
+  selectedTags: string[]
+  errors: TestCaseFormErrors
+  onTitleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onDescriptionChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+  onTestSuiteChange: (selectedTestSuites: string[]) => void
+  onTagChange: (selectedTags: string[]) => void
+  onBack: () => void
+  onContinue: () => void
+  onCreateSuiteClick: () => void
+  onCreateTagClick: () => void
+}
+
+function DetailsStep({
+  hasTemplateSelectionStep,
+  title,
+  description,
+  availableTestSuites,
+  availableTags,
+  selectedTestSuites,
+  selectedTags,
+  errors,
+  onTitleChange,
+  onDescriptionChange,
+  onTestSuiteChange,
+  onTagChange,
+  onBack,
+  onContinue,
+  onCreateSuiteClick,
+  onCreateTagClick,
+}: DetailsStepProps) {
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex justify-between gap-8" id="meta">
-        <div className="w-1/2">
-          <Card className="h-full dark:border-gray-700 dark:bg-gray-500/10">
+      <div className="flex flex-col gap-4 xl:flex-row" id="meta">
+        <div className="xl:w-1/2">
+          <Card className="h-full dark:border-zinc-700 dark:bg-zinc-500/10">
             <CardHeader className="mb-4">
               <CardTitle className="text-xl font-bold text-primary">Test Case Details</CardTitle>
               <CardDescription>Enter the core details of your test scenario</CardDescription>
@@ -158,7 +593,7 @@ const TestCaseForm = ({
               <div className="mb-6 flex flex-col gap-2">
                 <Label htmlFor="title">Title</Label>
                 <Input id="title" name="title" value={title} onChange={onTitleChange} />
-                {renderError(errors.title)}
+                <TestCaseFormFieldError message={errors.title} />
               </div>
               <div className="mb-6 flex flex-col gap-2">
                 <Label htmlFor="description">Description</Label>
@@ -169,93 +604,817 @@ const TestCaseForm = ({
                   onChange={onDescriptionChange}
                   className="bg-background"
                 />
-                {renderError(errors.description)}
-              </div>
-              <div className="mb-6 flex flex-col gap-2">
-                <Label htmlFor="test-suites">Test Suites</Label>
-                <MultiSelect
-                  options={testSuites.map(testSuite => {
-                    return {
-                      label: testSuite.name,
-                      value: testSuite.id,
-                    }
-                  })}
-                  selected={selectedTestSuites}
-                  onChange={onTestSuiteChange}
-                />
-                {renderError(errors.testSuiteIds)}
-              </div>
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="tags">Filter Tags</Label>
-                <MultiSelect
-                  options={tags.map(tag => {
-                    return {
-                      label: tag.name,
-                      value: tag.id,
-                    }
-                  })}
-                  selected={selectedTags}
-                  onChange={onTagChange}
-                />
+                <TestCaseFormFieldError message={errors.description} />
               </div>
+              <TestSuiteSelectionField
+                availableTestSuites={availableTestSuites}
+                selectedTestSuites={selectedTestSuites}
+                errorMessage={errors.testSuiteIds}
+                onChange={onTestSuiteChange}
+                onCreateClick={onCreateSuiteClick}
+              />
+              <TagSelectionField
+                availableTags={availableTags}
+                selectedTags={selectedTags}
+                onChange={onTagChange}
+                onCreateClick={onCreateTagClick}
+              />
             </CardContent>
           </Card>
         </div>
-        <div className="w-1/2">
-          <Card className="mb-4 border-gray-700 bg-gray-500/10">
-            <CardHeader className="mb-2">
-              <CardTitle className="flex items-center gap-2 text-xl text-primary">
-                <Info className="h-5 w-5" />
-                <span className="font-bold">Quick Tips</span>
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="flex flex-col gap-3">
-              {testCaseQuickTips.map((tip, index) => (
-                <div key={tip.title} className="flex items-start gap-4">
-                  <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
-                    {index + 1}
-                  </span>
-                  <div className="flex flex-col gap-1">
-                    <span className="text-base font-bold">{tip.title}</span>
-                    <span className="text-sm text-muted-foreground">{tip.description}</span>
-                  </div>
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-          <TestScenarioPreview
-            title="Test Scenario(Preview)"
-            description="Preview of the test scenario in Gherkin syntax"
-            scenario={scenarioPreview}
+        <QuickTipsPanel />
+      </div>
+      <div className="mb-4 flex flex-row flex-wrap items-center justify-start gap-2">
+        {hasTemplateSelectionStep ? (
+          <Button variant="outline" onClick={onBack} className="w-fit px-6">
+            <ArrowLeft className="size-4" />
+            <span className="font-bold">Back</span>
+          </Button>
+        ) : null}
+        <Button onClick={onContinue} className="w-fit px-6 hover:bg-emerald-500">
+          <span className="font-bold">Continue</span>
+          <ArrowRight className="size-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+type TestSuiteSelectionFieldProps = {
+  availableTestSuites: TestSuite[]
+  selectedTestSuites: string[]
+  errorMessage?: string[]
+  onChange: (selectedTestSuites: string[]) => void
+  onCreateClick: () => void
+}
+
+function TestSuiteSelectionField({
+  availableTestSuites,
+  selectedTestSuites,
+  errorMessage,
+  onChange,
+  onCreateClick,
+}: TestSuiteSelectionFieldProps) {
+  return (
+    <div className="mb-6 flex flex-col gap-2">
+      <Label htmlFor="test-suites">Test Suites</Label>
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <MultiSelect
+            options={availableTestSuites.map(testSuite => ({
+              label: testSuite.name,
+              value: testSuite.id,
+            }))}
+            selected={selectedTestSuites}
+            onChange={onChange}
           />
         </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="size-10 shrink-0"
+          aria-label="Create test suite"
+          onClick={onCreateClick}
+        >
+          <Plus className="size-4" />
+        </Button>
       </div>
-      <Card className="mb-4 border-gray-700 bg-gray-500/10">
-        <CardHeader>
-          <CardTitle className="text-xl font-bold text-primary">Test Case Flow</CardTitle>
-          <CardDescription>Build your test scenario step by step visually</CardDescription>
+      <TestCaseFormFieldError message={errorMessage} />
+    </div>
+  )
+}
+
+type TagSelectionFieldProps = {
+  availableTags: Tag[]
+  selectedTags: string[]
+  onChange: (selectedTags: string[]) => void
+  onCreateClick: () => void
+}
+
+function TagSelectionField({ availableTags, selectedTags, onChange, onCreateClick }: TagSelectionFieldProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <Label htmlFor="tags">Filter Tags</Label>
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <MultiSelect
+            options={availableTags.map(tag => ({
+              label: tag.name,
+              value: tag.id,
+            }))}
+            selected={selectedTags}
+            onChange={onChange}
+          />
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="size-10 shrink-0"
+          aria-label="Create filter tag"
+          onClick={onCreateClick}
+        >
+          <Plus className="size-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function QuickTipsPanel() {
+  return (
+    <div className="xl:w-1/2">
+      <Card className="h-full border-zinc-700 bg-zinc-500/10">
+        <CardHeader className="mb-2">
+          <CardTitle className="flex items-center gap-2 text-xl text-primary">
+            <Info className="size-5" />
+            <span className="font-bold">Quick Tips</span>
+          </CardTitle>
         </CardHeader>
-        <CardContent>
-          <div className="flex h-[500px] flex-col gap-2">
-            <Label htmlFor="test-case-flow">Test Case Flow</Label>
-            <TestCaseFlow
-              initialNodesOrder={nodesOrder}
-              templateStepParams={templateStepParams}
-              templateSteps={templateSteps}
-              onNodeOrderChange={onNodeOrderChange}
-              locators={locators}
-              locatorGroups={locatorGroups}
-            />
-          </div>
+        <CardContent className="flex flex-col gap-3">
+          <ol className="flex list-none flex-col gap-3">
+            {testCaseQuickTips.map((tip, index) => (
+              <li key={tip.title} className="grid grid-cols-[1.5rem_1fr] gap-4">
+                <span className="flex size-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                  {index + 1}
+                </span>
+                <span className="flex flex-col gap-1">
+                  <span className="text-base font-bold">{tip.title}</span>
+                  <span className="text-sm text-muted-foreground">{tip.description}</span>
+                </span>
+              </li>
+            ))}
+          </ol>
         </CardContent>
       </Card>
-      {renderError(errors.steps)}
-      <div className="mb-4 flex flex-col gap-2">
-        <Button onClick={handleSubmit} className="w-fit px-6 hover:bg-emerald-500">
-          <Save className="h-4 w-4" />
-          <span className="font-bold">Save</span>
-        </Button>
-      </div>
+    </div>
+  )
+}
+
+type FlowStepProps = {
+  isFlowImmersive: boolean
+  scenarioPreview: string
+  errors: TestCaseFormErrors
+  flowPanel: React.ReactNode
+  immersiveFlowPanel: React.ReactNode
+  onBack: () => void
+  onSubmit: () => void
+}
+
+function FlowStep({
+  isFlowImmersive,
+  scenarioPreview,
+  errors,
+  flowPanel,
+  immersiveFlowPanel,
+  onBack,
+  onSubmit,
+}: FlowStepProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      <LazyMotion features={domAnimation} strict>
+      <LayoutGroup id="test-case-flow-panel-layout">
+        <div className="w-full min-w-0 overflow-x-hidden">
+          {isFlowImmersive ? (
+            <div className="fixed inset-0 z-40 bg-background p-3 sm:p-4">{immersiveFlowPanel}</div>
+          ) : (
+            flowPanel
+          )}
+          <TestCaseFormFieldError message={errors.steps} />
+        </div>
+      </LayoutGroup>
+      </LazyMotion>
+      {!isFlowImmersive && (
+        <div className="flex flex-col gap-4">
+          <TestScenarioPreview
+            title="Test Scenario(Preview)"
+            description="Preview of the test scenario in Gherkin syntax"
+            scenario={scenarioPreview}
+          />
+          <div className="mb-4 flex flex-col gap-2 sm:flex-row">
+            <Button variant="outline" onClick={onBack} className="w-fit px-6">
+              <ArrowLeft className="size-4" />
+              <span className="font-bold">Back</span>
+            </Button>
+            <Button
+              type="button"
+              onClick={onSubmit}
+              className="w-fit px-6 hover:bg-emerald-500"
+              aria-label="Save test case"
+            >
+              <Save className="size-4" aria-hidden />
+              <span className="font-bold">Save</span>
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+type WizardStepContentProps = {
+  details: {
+    availableTags: Tag[]
+    availableTestSuites: TestSuite[]
+    description: string
+    selectedTags: string[]
+    selectedTestSuites: string[]
+    title: string
+  }
+  flow: {
+    isFlowImmersive: boolean
+    flowPanel: React.ReactNode
+    immersiveFlowPanel: React.ReactNode
+    scenarioPreview: string
+  }
+  navigation: {
+    currentStep: number
+    detailsStepIndex: number
+    hasTemplateSelectionStep: boolean
+  }
+  template: {
+    options: ReturnType<typeof getTemplateSelectionOptions>
+    previewSteps: string[]
+    selectedId: string
+    selectedTestCase: TemplateTestCaseWithSteps | null
+    stepCount: number
+  }
+  actions: {
+    goToDetailsStep: () => void
+    goToFlowStep: () => void
+    handleSubmit: () => void
+    onDescriptionChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+    onTagChange: (selectedTags: string[]) => void
+    onTemplateChange: (value: string) => void
+    onTestSuiteChange: (selectedTestSuites: string[]) => void
+    onTitleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+    onWizardBack: () => void
+    onDetailsBack: () => void
+    onCreateSuiteClick: () => void
+    onCreateTagClick: () => void
+  }
+  errors: TestCaseFormErrors
+}
+
+function WizardStepContent({
+  actions,
+  details,
+  errors,
+  flow,
+  navigation,
+  template,
+}: WizardStepContentProps) {
+  const { currentStep, detailsStepIndex, hasTemplateSelectionStep } = navigation
+
+  if (hasTemplateSelectionStep && currentStep === 0) {
+    return (
+      <TemplateSelectionStep
+        templateOptions={template.options}
+        selectedTemplateId={template.selectedId}
+        selectedTemplateTestCase={template.selectedTestCase}
+        selectedTemplateStepCount={template.stepCount}
+        selectedTemplatePreviewSteps={template.previewSteps}
+        errors={errors}
+        onTemplateChange={actions.onTemplateChange}
+        onContinue={actions.goToDetailsStep}
+      />
+    )
+  }
+
+  if (currentStep === detailsStepIndex) {
+    return (
+      <DetailsStep
+        hasTemplateSelectionStep={hasTemplateSelectionStep}
+        title={details.title}
+        description={details.description}
+        availableTestSuites={details.availableTestSuites}
+        availableTags={details.availableTags}
+        selectedTestSuites={details.selectedTestSuites}
+        selectedTags={details.selectedTags}
+        errors={errors}
+        onTitleChange={actions.onTitleChange}
+        onDescriptionChange={actions.onDescriptionChange}
+        onTestSuiteChange={actions.onTestSuiteChange}
+        onTagChange={actions.onTagChange}
+        onBack={actions.onWizardBack}
+        onContinue={actions.goToFlowStep}
+        onCreateSuiteClick={actions.onCreateSuiteClick}
+        onCreateTagClick={actions.onCreateTagClick}
+      />
+    )
+  }
+
+  return (
+    <FlowStep
+      isFlowImmersive={flow.isFlowImmersive}
+      scenarioPreview={flow.scenarioPreview}
+      errors={errors}
+      flowPanel={flow.flowPanel}
+      immersiveFlowPanel={flow.immersiveFlowPanel}
+      onBack={actions.onDetailsBack}
+      onSubmit={actions.handleSubmit}
+    />
+  )
+}
+
+function useTemplateStepNavigation({
+  appliedTemplateId,
+  detailsStepIndex,
+  dispatch,
+  hasTemplateSelectionStep,
+  selectedTemplateId,
+  templateTestCases,
+}: {
+  appliedTemplateId: string
+  detailsStepIndex: number
+  dispatch: React.Dispatch<import('./test-case-form-reducer').TestCaseFormAction>
+  hasTemplateSelectionStep: boolean
+  selectedTemplateId: string
+  templateTestCases?: TemplateTestCaseWithSteps[]
+}) {
+  return useCallback(() => {
+    const resolution = resolveTemplateSelection({
+      hasTemplateSelectionStep,
+      templateTestCases,
+      selectedTemplateId,
+      appliedTemplateId,
+    })
+
+    if (resolution.status === 'skip') {
+      dispatch({ type: 'setCurrentStep', step: detailsStepIndex })
+      return
+    }
+
+    if (resolution.status === 'invalid') {
+      dispatch({
+        type: 'patchErrors',
+        updater: current => ({
+          ...current,
+          templateTestCaseId: resolution.errors,
+        }),
+      })
+      return
+    }
+
+    if (resolution.status === 'not-found') {
+      dispatch({
+        type: 'patchErrors',
+        updater: current => ({
+          ...current,
+          templateTestCaseId: ['Template test case not found'],
+        }),
+      })
+      return
+    }
+
+    if (resolution.status === 'conversion-error') {
+      toast({
+        title: 'Validation Error',
+        description: resolution.error || 'Invalid template test case',
+        variant: 'destructive',
+      })
+      return
+    }
+
+    if (resolution.status === 'converted') {
+      dispatch({
+        type: 'applyTemplateConversion',
+        payload: {
+          title: resolution.templateTestCase.name || '',
+          description: resolution.templateTestCase.description || '',
+          nodesOrder: resolution.convertedData.nodesOrder,
+          flowBlocks: resolution.convertedData.flowBlocks,
+          appliedTemplateId: selectedTemplateId,
+        },
+      })
+    } else {
+      dispatch({
+        type: 'patchErrors',
+        updater: current => ({
+          ...current,
+          templateTestCaseId: undefined,
+        }),
+      })
+    }
+
+    dispatch({ type: 'setCurrentStep', step: detailsStepIndex })
+  }, [appliedTemplateId, detailsStepIndex, dispatch, hasTemplateSelectionStep, selectedTemplateId, templateTestCases])
+}
+
+function useTestCaseSubmitHandler({
+  description,
+  detailsStepIndex,
+  flowBlocks,
+  id,
+  nodesOrder,
+  onSubmitAction,
+  push,
+  selectedTags,
+  selectedTestSuites,
+  templateStepParams,
+  title,
+  dispatch,
+}: {
+  description: string
+  detailsStepIndex: number
+  flowBlocks: FlowBlock[]
+  id?: string
+  nodesOrder: NodeOrderMap
+  onSubmitAction: TestCaseFormProps['onSubmitAction']
+  push: ReturnType<typeof useRouter>['push']
+  selectedTags: string[]
+  selectedTestSuites: string[]
+  templateStepParams: TemplateStepParameter[]
+  title: string
+  dispatch: React.Dispatch<import('./test-case-form-reducer').TestCaseFormAction>
+}) {
+  return useCallback(async () => {
+    const nodesWithMissingParams = getNodesWithMissingMandatoryParams(nodesOrder, templateStepParams)
+
+    if (nodesWithMissingParams.length > 0) {
+      toast({
+        title: 'Validation Error',
+        description: `The following nodes have missing mandatory parameters: ${nodesWithMissingParams.join(', ')}. Please fill in all required parameters before saving.`,
+        variant: 'destructive',
+      })
+      return
+    }
+
+    const result = testCaseSubmitSchema.safeParse({
+      title,
+      description,
+      testSuiteIds: selectedTestSuites,
+      tagIds: selectedTags,
+      steps: buildScenarioSteps(nodesOrder),
+      flowBlocks,
+    })
+
+    if (!result.success) {
+      const fieldErrors = result.error.flatten().fieldErrors
+      dispatch({ type: 'setErrors', errors: fieldErrors })
+      if (isDetailFieldError(fieldErrors)) {
+        dispatch({ type: 'setCurrentStep', step: detailsStepIndex })
+      }
+      return
+    }
+    dispatch({ type: 'clearErrors' })
+    const response = await onSubmitAction(result.data, id)
+    handleTestCaseSaveResponse({ response, redirectPath: '/test-cases', push, toast })
+  }, [
+    description,
+    detailsStepIndex,
+    flowBlocks,
+    id,
+    nodesOrder,
+    onSubmitAction,
+    push,
+    selectedTags,
+    selectedTestSuites,
+    dispatch,
+    templateStepParams,
+    title,
+  ])
+}
+
+function useFlowStepNavigation({
+  description,
+  dispatch,
+  flowStepIndex,
+  selectedTags,
+  selectedTestSuites,
+  title,
+}: {
+  description: string
+  dispatch: React.Dispatch<import('./test-case-form-reducer').TestCaseFormAction>
+  flowStepIndex: number
+  selectedTags: string[]
+  selectedTestSuites: string[]
+  title: string
+}) {
+  return useCallback(() => {
+    const result = detailsStepSchema.safeParse({
+      title,
+      description,
+      testSuiteIds: selectedTestSuites,
+      tagIds: selectedTags,
+    })
+
+    if (!result.success) {
+      const fieldErrors = result.error.flatten().fieldErrors
+      dispatch({
+        type: 'patchErrors',
+        updater: current => ({
+          ...current,
+          title: fieldErrors.title,
+          description: fieldErrors.description,
+          testSuiteIds: fieldErrors.testSuiteIds,
+          tagIds: fieldErrors.tagIds,
+        }),
+      })
+      return
+    }
+
+    dispatch({
+      type: 'patchErrors',
+      updater: current => ({
+        ...current,
+        title: undefined,
+        description: undefined,
+        testSuiteIds: undefined,
+        tagIds: undefined,
+      }),
+    })
+    dispatch({ type: 'setCurrentStep', step: flowStepIndex })
+  }, [description, dispatch, flowStepIndex, selectedTags, selectedTestSuites, title])
+}
+
+function useBodyScrollLock(isLocked: boolean) {
+  useEffect(() => {
+    if (!isLocked) return
+    const { body } = document
+    const previousOverflow = body.style.overflow
+    body.style.overflow = 'hidden'
+
+    return () => {
+      body.style.overflow = previousOverflow
+    }
+  }, [isLocked])
+}
+
+function useWizardStepClick(currentStep: number, dispatch: React.Dispatch<import('./test-case-form-reducer').TestCaseFormAction>) {
+  return useCallback(
+    (stepIndex: number) => {
+      if (stepIndex <= currentStep) {
+        dispatch({ type: 'setCurrentStep', step: stepIndex })
+      }
+    },
+    [currentStep, dispatch],
+  )
+}
+
+const TestCaseForm = ({
+  defaultNodesOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  environments,
+  testSuites,
+  testCases,
+  moduleList,
+  tags,
+  id,
+  defaultTitle,
+  defaultDescription,
+  defaultTestSuiteIds,
+  defaultTagIds,
+  templateTestCases,
+  defaultTemplateTestCaseId,
+  defaultFlowBlocks = EMPTY_FLOW_BLOCKS,
+  onSubmitAction,
+  onCreateTestSuiteAction,
+  onCreateTagAction,
+}: TestCaseFormProps) => {
+  const { push } = useRouter()
+  const hasTemplateSelectionStep = Array.isArray(templateTestCases)
+  const { detailsStepIndex, flowStepIndex } = getWizardStepIndexes(hasTemplateSelectionStep)
+  const wizardSteps = getWizardSteps(hasTemplateSelectionStep)
+  const templateOptions = getTemplateSelectionOptions(templateTestCases ?? [])
+
+  const [formState, dispatch] = useReducer(
+    testCaseFormReducer,
+    {
+      defaultNodesOrder,
+      defaultFlowBlocks,
+      defaultTitle,
+      defaultDescription,
+      testSuites,
+      tags,
+      defaultTestSuiteIds,
+      defaultTagIds,
+      defaultTemplateTestCaseId,
+      initialWizardStep: getInitialWizardStep(
+        hasTemplateSelectionStep,
+        defaultTemplateTestCaseId,
+        detailsStepIndex,
+      ),
+    },
+    createTestCaseFormState,
+  )
+  const {
+    nodesOrder,
+    flowBlocks,
+    title,
+    description,
+    availableTestSuites,
+    availableTags,
+    selectedTestSuites,
+    selectedTags,
+    selectedTemplateId,
+    appliedTemplateId,
+    currentStep,
+    isCreateSuiteDialogOpen,
+    isCreateTagDialogOpen,
+    isFlowImmersive,
+    errors,
+  } = formState
+  const selectedTemplateTestCase = useMemo(
+    () => templateTestCases?.find(templateTestCase => templateTestCase.id === selectedTemplateId) ?? null,
+    [selectedTemplateId, templateTestCases],
+  )
+  const selectedTemplateStepCount = useMemo(
+    () => getTemplateStepCount(selectedTemplateTestCase),
+    [selectedTemplateTestCase],
+  )
+  const selectedTemplatePreviewSteps = useMemo(
+    () => buildTemplatePreviewSteps(selectedTemplateTestCase),
+    [selectedTemplateTestCase],
+  )
+
+  const scenarioPreview = buildScenarioPreview(title, description, nodesOrder)
+  const onNodeOrderChange = useCallback(
+    (nodesOrder: NodeOrderMap) => {
+      dispatch({ type: 'setNodesOrder', nodesOrder })
+    },
+    [dispatch],
+  )
+
+  const onTemplateChange = useCallback(
+    (value: string) => {
+      dispatch({ type: 'setSelectedTemplateId', templateId: value })
+    },
+    [dispatch],
+  )
+
+  const onTitleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      dispatch({ type: 'setTitle', title: e.target.value })
+    },
+    [dispatch],
+  )
+
+  const onDescriptionChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      dispatch({ type: 'setDescription', description: e.target.value })
+    },
+    [dispatch],
+  )
+
+  const onWizardStepClick = useWizardStepClick(currentStep, dispatch)
+
+  const onToggleFlowImmersive = useCallback(() => {
+    dispatch({ type: 'toggleFlowImmersive' })
+  }, [dispatch])
+
+  const onTestSuiteChange = useCallback(
+    (selectedTestSuites: string[]) => {
+      dispatch({ type: 'setSelectedTestSuites', testSuiteIds: selectedTestSuites })
+    },
+    [dispatch],
+  )
+
+  const handleInlineTestSuiteSuccess = useCallback(
+    async (createdTestSuite: TestSuite) => {
+      dispatch({ type: 'addTestSuite', testSuite: createdTestSuite })
+    },
+    [dispatch],
+  )
+
+  const onTagChange = useCallback(
+    (selectedTags: string[]) => {
+      dispatch({ type: 'setSelectedTags', tagIds: selectedTags })
+    },
+    [dispatch],
+  )
+
+  const handleInlineTagSuccess = useCallback(
+    async (createdTag: Tag) => {
+      dispatch({ type: 'addTag', tag: createdTag })
+    },
+    [dispatch],
+  )
+
+  const goToDetailsStep = useTemplateStepNavigation({
+    appliedTemplateId,
+    detailsStepIndex,
+    dispatch,
+    hasTemplateSelectionStep,
+    selectedTemplateId,
+    templateTestCases,
+  })
+
+  const goToFlowStep = useFlowStepNavigation({
+    description,
+    dispatch,
+    flowStepIndex,
+    selectedTags,
+    selectedTestSuites,
+    title,
+  })
+
+  const handleSubmit = useTestCaseSubmitHandler({
+    description,
+    detailsStepIndex,
+    dispatch,
+    flowBlocks,
+    id,
+    nodesOrder,
+    onSubmitAction,
+    push,
+    selectedTags,
+    selectedTestSuites,
+    templateStepParams,
+    title,
+  })
+
+  useBodyScrollLock(isFlowImmersive)
+
+  const flowPanelProps: Omit<FlowPanelProps, 'className'> = {
+    nodesOrder,
+    templateStepParams,
+    templateSteps,
+    locators,
+    locatorGroups,
+    environments,
+    moduleList,
+    flowBlocks,
+    isFlowImmersive,
+    onNodeOrderChange,
+    onFlowBlocksChange: flowBlocks => dispatch({ type: 'setFlowBlocks', flowBlocks }),
+    onToggleImmersive: onToggleFlowImmersive,
+  }
+
+  const wizardStepContentProps: WizardStepContentProps = {
+    details: {
+      availableTags,
+      availableTestSuites,
+      description,
+      selectedTags,
+      selectedTestSuites,
+      title,
+    },
+    flow: {
+      isFlowImmersive,
+      flowPanel: (
+        <FlowPanel
+          {...flowPanelProps}
+          className="relative h-[max(22rem,calc(100dvh-12rem))] bg-zinc-500/10"
+        />
+      ),
+      immersiveFlowPanel: <FlowPanel {...flowPanelProps} className="h-full bg-background" />,
+      scenarioPreview,
+    },
+    navigation: {
+      currentStep,
+      detailsStepIndex,
+      hasTemplateSelectionStep,
+    },
+    template: {
+      options: templateOptions,
+      previewSteps: selectedTemplatePreviewSteps,
+      selectedId: selectedTemplateId,
+      selectedTestCase: selectedTemplateTestCase,
+      stepCount: selectedTemplateStepCount,
+    },
+    actions: {
+      goToDetailsStep,
+      goToFlowStep,
+      handleSubmit,
+      onDescriptionChange,
+      onTagChange,
+      onTemplateChange,
+      onTestSuiteChange,
+      onTitleChange,
+      onWizardBack: () => dispatch({ type: 'setCurrentStep', step: 0 }),
+      onDetailsBack: () => dispatch({ type: 'setCurrentStep', step: detailsStepIndex }),
+      onCreateSuiteClick: () => dispatch({ type: 'setIsCreateSuiteDialogOpen', open: true }),
+      onCreateTagClick: () => dispatch({ type: 'setIsCreateTagDialogOpen', open: true }),
+    },
+    errors,
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <WizardProgress steps={wizardSteps} currentStep={currentStep} onStepClick={onWizardStepClick} />
+
+      <WizardStepContent {...wizardStepContentProps} />
+
+      <InlineTestSuiteCreationDialog
+        open={isCreateSuiteDialogOpen}
+        onOpenChange={open => dispatch({ type: 'setIsCreateSuiteDialogOpen', open })}
+        onSubmitAction={onCreateTestSuiteAction}
+        onSuccess={handleInlineTestSuiteSuccess}
+        testCases={testCases}
+        moduleList={moduleList}
+        tags={availableTags}
+      />
+      <InlineTagCreationDialog
+        open={isCreateTagDialogOpen}
+        onOpenChange={open => dispatch({ type: 'setIsCreateTagDialogOpen', open })}
+        onSubmitAction={onCreateTagAction}
+        onSuccess={handleInlineTagSuccess}
+      />
     </div>
   )
 }