Apply full refactor updates plus pipeline/email UX confirmations

src/components/forms/apply-steps/step-project.tsx

@@ -1,130 +1,130 @@
-'use client'
-
-import { motion } from 'motion/react'
-import { UseFormReturn } from 'react-hook-form'
-import { WizardStepContent } from '@/components/forms/form-wizard'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import type { ApplicationFormData } from '@/server/routers/application'
-import { type DropdownOption, type WizardConfig, DEFAULT_OCEAN_ISSUES } from '@/types/wizard-config'
-import { isFieldVisible, getFieldConfig } from '@/lib/wizard-config'
-
-interface StepProjectProps {
-  form: UseFormReturn<ApplicationFormData>
-  oceanIssues?: DropdownOption[]
-  config?: WizardConfig
-}
-
-export function StepProject({ form, oceanIssues, config }: StepProjectProps) {
-  const issueOptions = oceanIssues ?? DEFAULT_OCEAN_ISSUES
-  const { register, formState: { errors }, setValue, watch } = form
-  const oceanIssue = watch('oceanIssue')
-  const description = watch('description') || ''
-  const showTeamName = !config || isFieldVisible(config, 'teamName')
-  const descriptionLabel = config ? getFieldConfig(config, 'description').label : undefined
-
-  return (
-    <WizardStepContent
-      title="Tell us about your project"
-      description="Share the details of your ocean protection initiative."
-    >
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        className="mx-auto max-w-lg space-y-6"
-      >
-        {/* Project Name */}
-        <div className="space-y-2">
-          <Label htmlFor="projectName">
-            Name of your project/startup <span className="text-destructive">*</span>
-          </Label>
-          <Input
-            id="projectName"
-            placeholder="Ocean Guardian AI"
-            {...register('projectName')}
-            className="h-12 text-base"
-          />
-          {errors.projectName && (
-            <p className="text-sm text-destructive">{errors.projectName.message}</p>
-          )}
-        </div>
-
-        {/* Team Name (optional) */}
-        {showTeamName && (
-          <div className="space-y-2">
-            <Label htmlFor="teamName">
-              Team Name <span className="text-muted-foreground text-xs">(optional)</span>
-            </Label>
-            <Input
-              id="teamName"
-              placeholder="Blue Innovation Team"
-              {...register('teamName')}
-              className="h-12 text-base"
-            />
-          </div>
-        )}
-
-        {/* Ocean Issue */}
-        <div className="space-y-2">
-          <Label>
-            What type of ocean issue does your project address? <span className="text-destructive">*</span>
-          </Label>
-          <Select
-            value={oceanIssue}
-            onValueChange={(value) => setValue('oceanIssue', value)}
-          >
-            <SelectTrigger className="h-12 text-base">
-              <SelectValue placeholder="Select an ocean issue" />
-            </SelectTrigger>
-            <SelectContent>
-              {issueOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {errors.oceanIssue && (
-            <p className="text-sm text-destructive">{errors.oceanIssue.message}</p>
-          )}
-        </div>
-
-        {/* Description */}
-        <div className="space-y-2">
-          <Label htmlFor="description">
-            Briefly describe your project idea and objectives <span className="text-destructive">*</span>
-          </Label>
-          <p className="text-xs text-muted-foreground">
-            Keep it brief - you&apos;ll have the opportunity to provide more details later.
-          </p>
-          <Textarea
-            id="description"
-            placeholder="Our project aims to..."
-            rows={5}
-            maxLength={2000}
-            {...register('description')}
-            className="text-base resize-none"
-          />
-          <div className="flex justify-between text-xs text-muted-foreground">
-            <span>
-              {errors.description ? (
-                <span className="text-destructive">{errors.description.message}</span>
-              ) : (
-                'Minimum 20 characters'
-              )}
-            </span>
-            <span>{description.length} characters</span>
-          </div>
-        </div>
-      </motion.div>
-    </WizardStepContent>
-  )
-}
+'use client'
+
+import { motion } from 'motion/react'
+import { UseFormReturn } from 'react-hook-form'
+import { WizardStepContent } from '@/components/forms/form-wizard'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import type { ApplicationFormData } from '@/server/routers/application'
+import { type DropdownOption, type WizardConfig, DEFAULT_OCEAN_ISSUES } from '@/types/wizard-config'
+import { isFieldVisible, getFieldConfig } from '@/lib/wizard-config'
+
+interface StepProjectProps {
+  form: UseFormReturn<ApplicationFormData>
+  oceanIssues?: DropdownOption[]
+  config?: WizardConfig
+}
+
+export function StepProject({ form, oceanIssues, config }: StepProjectProps) {
+  const issueOptions = oceanIssues ?? DEFAULT_OCEAN_ISSUES
+  const { register, formState: { errors }, setValue, watch } = form
+  const oceanIssue = watch('oceanIssue')
+  const description = watch('description') || ''
+  const showTeamName = !config || isFieldVisible(config, 'teamName')
+  const descriptionLabel = config ? getFieldConfig(config, 'description').label : undefined
+
+  return (
+    <WizardStepContent
+      title="Tell us about your project"
+      description="Share the details of your ocean protection initiative."
+    >
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        className="mx-auto max-w-lg space-y-6"
+      >
+        {/* Project Name */}
+        <div className="space-y-2">
+          <Label htmlFor="projectName">
+            Name of your project/startup <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id="projectName"
+            placeholder="Ocean Guardian AI"
+            {...register('projectName')}
+            className="h-12 text-base"
+          />
+          {errors.projectName && (
+            <p className="text-sm text-destructive">{errors.projectName.message}</p>
+          )}
+        </div>
+
+        {/* Team Name (optional) */}
+        {showTeamName && (
+          <div className="space-y-2">
+            <Label htmlFor="teamName">
+              Team Name <span className="text-muted-foreground text-xs">(optional)</span>
+            </Label>
+            <Input
+              id="teamName"
+              placeholder="Blue Innovation Team"
+              {...register('teamName')}
+              className="h-12 text-base"
+            />
+          </div>
+        )}
+
+        {/* Ocean Issue */}
+        <div className="space-y-2">
+          <Label>
+            What type of ocean issue does your project address? <span className="text-destructive">*</span>
+          </Label>
+          <Select
+            value={oceanIssue}
+            onValueChange={(value) => setValue('oceanIssue', value)}
+          >
+            <SelectTrigger className="h-12 text-base">
+              <SelectValue placeholder="Select an ocean issue" />
+            </SelectTrigger>
+            <SelectContent>
+              {issueOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {errors.oceanIssue && (
+            <p className="text-sm text-destructive">{errors.oceanIssue.message}</p>
+          )}
+        </div>
+
+        {/* Description */}
+        <div className="space-y-2">
+          <Label htmlFor="description">
+            Briefly describe your project idea and objectives <span className="text-destructive">*</span>
+          </Label>
+          <p className="text-xs text-muted-foreground">
+            Keep it brief - you&apos;ll have the opportunity to provide more details later.
+          </p>
+          <Textarea
+            id="description"
+            placeholder="Our project aims to..."
+            rows={5}
+            maxLength={2000}
+            {...register('description')}
+            className="text-base resize-none"
+          />
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>
+              {errors.description ? (
+                <span className="text-destructive">{errors.description.message}</span>
+              ) : (
+                'Minimum 20 characters'
+              )}
+            </span>
+            <span>{description.length} characters</span>
+          </div>
+        </div>
+      </motion.div>
+    </WizardStepContent>
+  )
+}