🍟 Add wave preview

src/app/waves/create/preview/page.tsx

@@ -0,0 +1,17 @@
+import dynamic from "next/dynamic";
+
+import { auth } from "@/lib/auth";
+import { Unauthenticated } from "@/components/ui/unauthenticated";
+
+const WavePreview = dynamic(() => import("./wavePreview"), {
+  ssr: false,
+});
+
+export default async function PreviewApplicationPage() {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return <Unauthenticated />;
+  }
+
+  return <WavePreview />;
+}

src/app/waves/create/preview/wavePreview.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { formatDate } from "@/lib/dates";
+import { BackButton } from "@/components/ui/backButton";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { PageTitle } from "@/components/ui/pageTitle";
+import { CalendarIcon } from "@/components/icons/calendarIcon";
+
+import {
+  useWaveStepsContext,
+  useWaveStepsDispatchContext,
+  waveDataSchema,
+} from "../stepsProvider";
+
+export default function PreviewApplication() {
+  const router = useRouter();
+  const { waveData } = useWaveStepsContext();
+  const dispatch = useWaveStepsDispatchContext();
+  const validationResult = waveDataSchema.safeParse(waveData);
+  if (!validationResult.success) {
+    router.replace("/waves/create");
+    return;
+  }
+  const validatedWaveData = validationResult.data;
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <BackButton href="/waves/create" />
+          <PageTitle>{validatedWaveData.name}</PageTitle>
+        </div>
+        <Button
+          className="px-14"
+          onClick={async () => {
+            dispatch({ type: "RESET_STEPS" });
+          }}
+        >
+          Submit
+        </Button>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>{validatedWaveData.name}</CardTitle>
+          <CardDescription>{validatedWaveData.summary}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-4 gap-y-8 rounded-2xl border p-6">
+            <StagePreview title="Open" date={validatedWaveData.openStartDate} />
+            <StagePreview
+              title="Denoising"
+              date={validatedWaveData.denoisingStartDate}
+            />
+            <StagePreview
+              title="Assessment"
+              date={validatedWaveData.assesmentStartDate}
+            />
+            <StagePreview title="Close" date={validatedWaveData.closeDate} />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+interface StagePreviewProps {
+  title: string;
+  date: Date;
+}
+
+function StagePreview({ title, date }: StagePreviewProps) {
+  return (
+    <div>
+      <div className="mb-4 font-bold">{title}</div>
+      <div
+        className={buttonVariants({
+          variant: "outline",
+          className: "h-12 w-40 justify-start gap-2 hover:bg-transparent",
+        })}
+      >
+        <CalendarIcon className="h-6 w-6" />
+        {formatDate(date)}
+      </div>
+    </div>
+  );
+}

src/app/waves/create/steps/mainDetails.schema.ts

@@ -2,21 +2,21 @@ import { specificLengthStringSchema } from "@/constants/validationSchemas";
 import { z } from "zod";
 
 export const FORM_FIELD_PARAMS = {
-  waveName: {
+  name: {
     min: 3,
     max: 20,
   },
-  waveSummary: {
+  summary: {
     min: 3,
     max: 160,
   },
-};
+} as const;
 
 export const mainDetailsSchema = z.object({
-  waveName: specificLengthStringSchema("Wave name", FORM_FIELD_PARAMS.waveName),
-  waveSummary: specificLengthStringSchema(
+  name: specificLengthStringSchema("Wave name", FORM_FIELD_PARAMS.name),
+  summary: specificLengthStringSchema(
     "Wave summary",
-    FORM_FIELD_PARAMS.waveSummary,
+    FORM_FIELD_PARAMS.summary,
   ),
 });
 

src/app/waves/create/steps/mainDetails.tsx

@@ -31,8 +31,8 @@ export function MainDetails() {
   const form = useForm<mainDetailsSchema>({
     resolver: zodResolver(mainDetailsSchema),
     defaultValues: {
-      waveName: waveData.waveName ?? "",
-      waveSummary: waveData.waveSummary ?? "",
+      name: waveData.name ?? "",
+      summary: waveData.summary ?? "",
     },
   });
 
@@ -47,7 +47,7 @@ export function MainDetails() {
       >
         <FormField
           control={form.control}
-          name="waveName"
+          name="name"
           render={({ field }) => (
             <FormItem aria-required>
               <FormLabel>Wave name</FormLabel>
@@ -65,7 +65,7 @@ export function MainDetails() {
 
         <FormField
           control={form.control}
-          name="waveSummary"
+          name="summary"
           render={({ field }) => (
             <FormItem aria-required>
               <FormLabel>Wave summary</FormLabel>

src/app/waves/create/steps/timeline.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
   useForm,
@@ -35,6 +36,7 @@ import {
 import { timelineSchema } from "./timeline.schema";
 
 export function Timeline() {
+  const router = useRouter();
   const { waveData } = useWaveStepsContext();
   const dispatch = useWaveStepsDispatchContext();
 
@@ -54,6 +56,7 @@ export function Timeline() {
         className="flex w-full flex-col gap-6"
         onSubmit={form.handleSubmit(async (payload) => {
           dispatch({ type: "UPDATE_WAVE_DATA", payload });
+          router.push("/waves/create/preview");
         })}
       >
         <div className="grid grid-cols-2 gap-y-8 rounded-2xl border p-6">

tests/unit/app/waves/create/steps/mainDetailsSchema.test.ts

@@ -7,8 +7,8 @@ import { mainDetailsSchema } from "@/app/waves/create/steps/mainDetails.schema";
 type ValidationError = SafeParseError<mainDetailsSchema>;
 
 const validData: mainDetailsSchema = {
-  waveName: "First wave",
-  waveSummary: "This is the first wave",
+  name: "First wave",
+  summary: "This is the first wave",
 };
 
 describe("/app/waves/create/steps/mainDetailsSchema", () => {
@@ -22,7 +22,7 @@ describe("/app/waves/create/steps/mainDetailsSchema", () => {
     it("at least 3 characters", () => {
       const validationResult = mainDetailsSchema.safeParse({
         ...validData,
-        waveName: "",
+        name: "",
       } satisfies mainDetailsSchema) as ValidationError;
 
       expect(validationResult.success).toBe(false);
@@ -34,7 +34,7 @@ describe("/app/waves/create/steps/mainDetailsSchema", () => {
     it("at most 20 characters", () => {
       const validationResult = mainDetailsSchema.safeParse({
         ...validData,
-        waveName: "a".repeat(21),
+        name: "a".repeat(21),
       } satisfies mainDetailsSchema) as ValidationError;
 
       expect(validationResult.success).toBe(false);
@@ -48,7 +48,7 @@ describe("/app/waves/create/steps/mainDetailsSchema", () => {
     it("at least 3 characters", () => {
       const validationResult = mainDetailsSchema.safeParse({
         ...validData,
-        waveSummary: "",
+        summary: "",
       } satisfies mainDetailsSchema) as ValidationError;
 
       expect(validationResult.success).toBe(false);
@@ -60,7 +60,7 @@ describe("/app/waves/create/steps/mainDetailsSchema", () => {
     it("at most 160 characters", () => {
       const validationResult = mainDetailsSchema.safeParse({
         ...validData,
-        waveSummary: "a".repeat(161),
+        summary: "a".repeat(161),
       } satisfies mainDetailsSchema) as ValidationError;
 
       expect(validationResult.success).toBe(false);