fix final backend and styling

app/globals.css

@@ -25,24 +25,24 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+    --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
+    --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 72.2% 50.6%;
     --radius: 1rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -52,25 +52,25 @@
   }
 
   .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 72.2% 50.6%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

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,85 +42,91 @@ export default function SignUp() {
       dob: youngestDate,
     },
   });
-  function onSubmit(values: z.infer<typeof signupFormSchema>) {
-    signupFormSubmit(values);
+  async function onSubmit(values: z.infer<typeof signupFormSchema>) {
+    setSubmitted(true);
+    setResponse(await signupFormSubmit(values));
   }
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <FormControl>
-                <Input placeholder="name@example.com" {...field} />
-              </FormControl>
-              <FormDescription>
-                We will contact you here with information about events.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name</FormLabel>
-              <FormControl>
-                <Input placeholder="Firstname Lastname" {...field} />
-              </FormControl>
-              <FormDescription>Please enter your full name.</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="dob"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Date of birth</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant={"outline"}
-                      className={cn(
-                        "w-[240px] pl-3 text-left font-normal",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <Calendar
-                    required
-                    mode="single"
-                    showOutsideDays={false}
-                    selected={field.value}
-                    onSelect={field.onChange}
-                    disabled={(date) => date > youngestDate}
-                    defaultMonth={field.value}
-                    fromDate={oldestDate}
-                    toDate={youngestDate}
-                    captionLayout="dropdown"
-                  />
-                </PopoverContent>
-              </Popover>
-              <FormDescription>You must be over 21 to sign up.</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  );
+  function SignupForm() {
+    return (
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input placeholder="name@example.com" {...field} />
+                </FormControl>
+                <FormDescription>
+                  We will contact you here with information about events.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="Firstname Lastname" {...field} />
+                </FormControl>
+                <FormDescription>Please enter your full name.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="dob"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Date of birth</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant={"outline"}
+                        className={cn(
+                          "w-[240px] pl-3 text-left font-normal",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
+                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      required
+                      mode="single"
+                      showOutsideDays={false}
+                      selected={field.value}
+                      onSelect={field.onChange}
+                      disabled={(date) => date > youngestDate}
+                      defaultMonth={field.value}
+                      fromDate={oldestDate}
+                      toDate={youngestDate}
+                      captionLayout="dropdown"
+                    />
+                  </PopoverContent>
+                </Popover>
+                <FormDescription>You must be over 21 to sign up.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <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

@@ -2,18 +2,23 @@
 
 import { z } from "zod";
 import { oldestDate, signupFormSchema, youngestDate } from "@/app/sign-up/sign-up-form";
-import listmonk from "./listmonk";
+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 listmonkData = {
+  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],
     },
   };
-  console.log(listmonkData);
+  return await listmonk(listmonkData);
 }

lib/listmonk.ts

@@ -1,21 +1,37 @@
 import "server-only";
 
-async function makeApiCall(url: string, options?: RequestInit) {
+export type listmonkData = {
+  email: string;
+  name: string;
+  status: "enabled" | "blocklisted";
+  lists: number[];
+  attribs: {};
+};
+
+async function listmonk(data: listmonkData): Promise<string> {
+  const listmonkUrl = process.env.LISTMONK_URL ?? "http://localhost:9000/api/";
+  const listmonkUser = process.env.LISTMONK_USER ?? "nouser";
+  const listmonkPass = process.env.LISTMONK_PASS ?? "nopass";
+  // Encode the username and password in base64
+  const credentials = Buffer.from(`${listmonkUser}:${listmonkPass}`).toString("base64");
+
+  const options: RequestInit = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Basic ${credentials}`,
+    },
+    body: JSON.stringify(data),
+  };
   try {
-    const response = await fetch(url, options);
+    const response = await fetch(`${listmonkUrl}subscribers`, options);
     if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
+      return "Error. please try again soon.";
     }
-    return await response.json();
+    return "Thanks for signing up!";
   } catch (error) {
-    console.error("Error making API call:", error);
-    throw error;
+    return "Error. please try again soon.";
   }
 }
 
-async function listmonk() {
-  const listmonkUrl = process.env.LISTMONK_URL ?? "";
-  makeApiCall(listmonkUrl);
-}
-
 export default listmonk;