diff --git a/app/sign-up/page.tsx b/app/sign-up/page.tsx index d4cb99c..8093399 100644 --- a/app/sign-up/page.tsx +++ b/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" /> +

Sign up to our guest list here

); diff --git a/app/sign-up/sign-up-form.tsx b/app/sign-up/sign-up-form.tsx index 9932f37..eb1c046 100644 --- a/app/sign-up/sign-up-form.tsx +++ b/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(null); const form = useForm>({ resolver: zodResolver(signupFormSchema), defaultValues: { @@ -40,85 +42,91 @@ export default function SignUp() { dob: youngestDate, }, }); - function onSubmit(values: z.infer) { - signupFormSubmit(values); + async function onSubmit(values: z.infer) { + setSubmitted(true); + setResponse(await signupFormSubmit(values)); } - return ( -
- - ( - - Email - - - - - We will contact you here with information about events. - - - - )} - /> - ( - - Name - - - - Please enter your full name. - - - )} - /> - ( - - Date of birth - - - - - - - - date > youngestDate} - defaultMonth={field.value} - fromDate={oldestDate} - toDate={youngestDate} - captionLayout="dropdown" - /> - - - You must be over 21 to sign up. - - - )} - /> - - - - ); + function SignupForm() { + return ( +
+ + ( + + Email + + + + + We will contact you here with information about events. + + + + )} + /> + ( + + Name + + + + Please enter your full name. + + + )} + /> + ( + + Date of birth + + + + + + + + date > youngestDate} + defaultMonth={field.value} + fromDate={oldestDate} + toDate={youngestDate} + captionLayout="dropdown" + /> + + + You must be over 21 to sign up. + + + )} + /> + + + + ); + } + return response ?? SignupForm(); } diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx index b473cc2..57dd4b2 100644 --- a/components/ui/calendar.tsx +++ b/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" diff --git a/lib/actions.ts b/lib/actions.ts index bc45d1b..e83b69d 100644 --- a/lib/actions.ts +++ b/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) { +export async function signupFormSubmit(data: z.infer): Promise { 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); } diff --git a/lib/listmonk.ts b/lib/listmonk.ts index 2729a17..3f90a8d 100644 --- a/lib/listmonk.ts +++ b/lib/listmonk.ts @@ -8,20 +8,7 @@ export type listmonkData = { attribs: {}; }; -async function makeApiCall(url: string, options?: RequestInit) { - 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) { +async function listmonk(data: listmonkData): Promise { 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(); - console.log("Subscriber created successfully:", responseData); + return "Thanks for signing up!"; } catch (error) { - console.error("Failed to create subscriber:", error); + return "Error. please try again soon."; } } diff --git a/public/image/bam.png b/public/image/bam.png new file mode 100644 index 0000000..aec4464 Binary files /dev/null and b/public/image/bam.png differ