fix final backend and styling

app/sign-up/page.tsx

@@ -9,8 +9,9 @@ export default function Page() {
         alt="Bangers and Mash GBG"
         width={200}
         height={200}
-        className="mx-auto"
+        className="mx-auto my-8"
       />
+      <h1 className="mb-4 text-xl">Sign up to our guest list here</h1>
       <SignUp />
     </div>
   );

app/sign-up/sign-up-form.tsx

@@ -21,17 +21,19 @@ import { Calendar } from "@/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { signupFormSubmit } from "@/lib/actions";
+import { useState } from "react";
 
 export const signupFormSchema = z.object({
   name: z.string().min(2, { message: "Name is required" }).max(50, { message: "Name is too long" }),
   email: z.string().email({ message: "Email is invalid" }),
   dob: z.date({ required_error: "Birthday is required" }),
 });
-
 export const youngestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 21));
 export const oldestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 100));
 
 export default function SignUp() {
+  const [submitted, setSubmitted] = useState(false);
+  const [response, setResponse] = useState<string | null>(null);
   const form = useForm<z.infer<typeof signupFormSchema>>({
     resolver: zodResolver(signupFormSchema),
     defaultValues: {
@@ -40,9 +42,11 @@ export default function SignUp() {
       dob: youngestDate,
     },
   });
-  function onSubmit(values: z.infer<typeof signupFormSchema>) {
+  async function onSubmit(values: z.infer<typeof signupFormSchema>) {
-    signupFormSubmit(values);
+    setSubmitted(true);
+    setResponse(await signupFormSubmit(values));
   }
+  function SignupForm() {
     return (
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
@@ -117,8 +121,12 @@ export default function SignUp() {
               </FormItem>
             )}
           />
-        <Button type="submit">Submit</Button>
+          <Button type="submit" disabled={submitted}>
+            Submit
+          </Button>
         </form>
       </Form>
     );
   }
+  return response ?? SignupForm();
+}

components/ui/calendar.tsx

@@ -37,7 +37,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         head_row: "flex",
         head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50  first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"

lib/actions.ts

@@ -4,18 +4,21 @@ import { z } from "zod";
 import { oldestDate, signupFormSchema, youngestDate } from "@/app/sign-up/sign-up-form";
 import listmonk, { listmonkData } from "./listmonk";
 
-export async function signupFormSubmit(data: z.infer<typeof signupFormSchema>) {
+export async function signupFormSubmit(data: z.infer<typeof signupFormSchema>): Promise<string> {
   if (data.dob > youngestDate || data.dob < oldestDate) {
-    return { error: "Invalid date of birth" };
+    return "Invalid date of birth";
   }
+  const offset = data.dob.getTimezoneOffset();
+  data.dob = new Date(data.dob.getTime() - offset * 60 * 1000);
+
   const listmonkData: listmonkData = {
     email: data.email,
     name: data.name,
     status: "enabled",
     lists: [6],
     attribs: {
-      dob: data.dob.toISOString(),
+      dob: data.dob.toISOString().split("T")[0],
     },
   };
-  listmonk(listmonkData);
+  return await listmonk(listmonkData);
 }

lib/listmonk.ts

@@ -8,20 +8,7 @@ export type listmonkData = {
   attribs: {};
 };
 
-async function makeApiCall(url: string, options?: RequestInit) {
+async function listmonk(data: listmonkData): Promise<string> {
-  try {
-    const response = await fetch(url, options);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-    return await response.json();
-  } catch (error) {
-    console.error("Error making API call:", error);
-    throw error;
-  }
-}
-
-async function listmonk(data: listmonkData) {
   const listmonkUrl = process.env.LISTMONK_URL ?? "http://localhost:9000/api/";
   const listmonkUser = process.env.LISTMONK_USER ?? "nouser";
   const listmonkPass = process.env.LISTMONK_PASS ?? "nopass";
@@ -39,12 +26,11 @@ async function listmonk(data: listmonkData) {
   try {
     const response = await fetch(`${listmonkUrl}subscribers`, options);
     if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
+      return "Error. please try again soon.";
     }
-    const responseData = await response.json();
+    return "Thanks for signing up!";
-    console.log("Subscriber created successfully:", responseData);
   } catch (error) {
-    console.error("Failed to create subscriber:", error);
+    return "Error. please try again soon.";
   }
 }