From 6b2721a1696140f3b2d7f9b83c0eee44a38bc3bd Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 20 Nov 2024 12:17:09 +0000
Subject: [PATCH] add response to booking submission

---
 suncityla/app/bookings/[bookingId]/page.tsx      | 16 ++++++++++++++++
 suncityla/app/bookings/actions/onSubmitAction.ts |  1 -
 .../components/BookingForm/BookingForm.tsx       |  8 ++++++--
 3 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 suncityla/app/bookings/[bookingId]/page.tsx

diff --git a/suncityla/app/bookings/[bookingId]/page.tsx b/suncityla/app/bookings/[bookingId]/page.tsx
new file mode 100644
index 0000000..05bfab3
--- /dev/null
+++ b/suncityla/app/bookings/[bookingId]/page.tsx
@@ -0,0 +1,16 @@
+export default async function BookingConfirmed({
+  params,
+}: {
+  params: Promise<{ bookingId: string }>;
+}) {
+  const { bookingId } = await params;
+  console.log(bookingId);
+
+  return (
+    <div>
+      <h1>Booking Confirmed</h1>
+      <p>Your booking has been confirmed.</p>
+      <p>Booking id: {bookingId}</p>
+    </div>
+  );
+}
diff --git a/suncityla/app/bookings/actions/onSubmitAction.ts b/suncityla/app/bookings/actions/onSubmitAction.ts
index e8298af..ef8b3c1 100644
--- a/suncityla/app/bookings/actions/onSubmitAction.ts
+++ b/suncityla/app/bookings/actions/onSubmitAction.ts
@@ -16,7 +16,6 @@ const onSubmitAction = async (
 ): Promise<FormState> => {
   const formData = Object.fromEntries(data);
   const parsed = bookingFormSchema.safeParse(formData);
-  console.log({ parsed });
 
   if (!parsed.success) {
     const fields: Record<string, string> = {};
diff --git a/suncityla/app/bookings/components/BookingForm/BookingForm.tsx b/suncityla/app/bookings/components/BookingForm/BookingForm.tsx
index 05c910c..b517faa 100644
--- a/suncityla/app/bookings/components/BookingForm/BookingForm.tsx
+++ b/suncityla/app/bookings/components/BookingForm/BookingForm.tsx
@@ -10,15 +10,17 @@ import { useActionState, useRef, startTransition } from "react";
 import onSubmitAction from "../../actions/onSubmitAction";
 import BookingFormField from "./BookingFormField";
 import { DateTimePickerForm } from "../TimeDatePicker/TimeDatePicker";
+import { useRouter } from "next/navigation";
 
 export type BookingFormData = z.infer<typeof bookingFormSchema>;
 
 export default function BookingForm() {
   const [state, formAction] = useActionState(onSubmitAction, {
     message: "",
+    bookingRef: undefined,
   });
 
-  console.log(state);
+  const router = useRouter();
 
   const form = useForm<z.infer<typeof bookingFormSchema>>({
     resolver: zodResolver(bookingFormSchema),
@@ -39,7 +41,9 @@ export default function BookingForm() {
     form.reset();
   };
 
-  console.log(form.getValues());
+  if (state.bookingRef) {
+    router.push(`/bookings/${state.bookingRef}`);
+  }
 
   return (
     <div className="w-96 border p-4 bg-slate-100 rounded-md">