+ {!dateInPast && } {event.body && } diff --git a/app/(website)/event/[slug]/page.js b/app/(website)/event/[slug]/page.js index 5003a8f..58eaaf2 100644 --- a/app/(website)/event/[slug]/page.js +++ b/app/(website)/event/[slug]/page.js @@ -1,5 +1,4 @@ import EventPage from "./default"; - import { getAllEventSlugs, getEventBySlug } from "@/lib/sanity/client"; export async function generateStaticParams() { @@ -13,7 +12,9 @@ export async function generateMetadata({ params }) { export default async function EventDefault({ params }) { const event = await getEventBySlug(params.slug); - return ; + const response = await fetch(`${process.env.DEVELOPMENT_URL}/api/tito-check-slug?eventId=${event.titoSlug}`) + const nextEventData = await response.json() + return ; } // export const revalidate = 60; diff --git a/app/(website)/home.js b/app/(website)/home.js index 746d659..25d9856 100644 --- a/app/(website)/home.js +++ b/app/(website)/home.js @@ -1,14 +1,14 @@ import Link from "next/link"; import Container from "@/components/container"; import EventList from "@/components/eventlist"; - +import EventSignup from "@/components/event-signup"; export default function Event({ events }) { return ( <> {events && ( - - {events.slice(0, 2).map(event => ( + + {events.slice(0, 3).map((event) => ( - {events.slice(2, 14).map(event => ( + {events.slice(3, 14).map((event) => ( ))} + className="relative inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-2 pl-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300" + > View all Events diff --git a/components/event-signup.js b/components/event-signup.js new file mode 100644 index 0000000..e022a5a --- /dev/null +++ b/components/event-signup.js @@ -0,0 +1,199 @@ +"use client"; + +import { useForm } from "react-hook-form"; +import { useState, useEffect } from "react"; + +function EventSignup(eventProps) { + const [eventData, setEventData] = useState(); + const [registerSuccess, setRegisterSuccess] = useState(); + const [ticketUrl, setTicketUrl] = useState(""); + + useEffect(() => { + setEventData(eventProps.nextEventData); + }, []); + + const { + register, + handleSubmit, + formState: { errors, isSubmitSuccessful, isSubmitting }, + } = useForm({ + mode: "onTouched", + }); + + const onSubmit = async (data) => { + const registration = { + registrationData: { + email: data.email, + name: data.name, + discount_code: "", + source: "", + notify: true, + line_items: [{ release_id: data.attendance, quantity: 1 }], + }, + nextEvent: eventData.nextEvent, + }; + + try { + const createRegistration = await fetch("/api/tito-create-registration", { + method: "POST", + body: JSON.stringify(registration), + }); + const registrationJson = await createRegistration.json(); + setRegisterSuccess(true); + setTicketUrl(registrationJson.ticket); + } + catch(error) { + console.error(`Something went wrong creating a user registration: ${error}`); + setRegisterSuccess(false); + } + }; + + return ( + + + + + + Join us downtown and online + + + + + {errors.name && ( + + {errors.name.message} + + )} + + + + Email Address + + + {errors.email && ( + + {errors.email.message} + + )} + + + {errors.attendance && ( + + {errors.attendance.message} + + )} + + + Attending In Person + + + + Joining Online + + + + {isSubmitting ? ( + + + + + ) : ( + "Register" + )} + + + {isSubmitSuccessful && registerSuccess && ( + + {"Registration Success. Here's your ticket:"} + + {ticketUrl} + + + )} + {registerSuccess === false && ( + + {"Something went wrong creating a user registration. Please try later."} + + )} + + + ); +} + +export default EventSignup; diff --git a/next.config.js b/next.config.js index e3b9c86..e47a3dd 100644 --- a/next.config.js +++ b/next.config.js @@ -3,21 +3,21 @@ const nextConfig = { reactStrictMode: true, swcMinify: true, experimental: { - appDir: true + appDir: true, }, images: { formats: ["image/avif", "image/webp"], dangerouslyAllowSVG: true, - remotePatterns: [{ hostname: "cdn.sanity.io" }] + remotePatterns: [{ hostname: "cdn.sanity.io" }], }, typescript: { // Set this to false if you want production builds to abort if there's type errors - ignoreBuildErrors: process.env.VERCEL_ENV === "production" + ignoreBuildErrors: process.env.VERCEL_ENV === "production", }, eslint: { /// Set this to false if you want production builds to abort if there's lint errors - ignoreDuringBuilds: process.env.VERCEL_ENV === "production" - } + ignoreDuringBuilds: process.env.VERCEL_ENV === "production", + }, }; module.exports = nextConfig; diff --git a/pages/api/tito-check-slug.ts b/pages/api/tito-check-slug.ts new file mode 100644 index 0000000..63deb99 --- /dev/null +++ b/pages/api/tito-check-slug.ts @@ -0,0 +1,31 @@ + +export default async function (req, res) { + const headers = { + "Access-Control-Allow-Origin": "*", + "Content-Type": "application/json", + Accept: "application/json", + Authorization: `Token token=${process.env.SECRET_ACCESS_TOKEN}`, + }; + const nextEventSlug = req.query.eventId; + const releaseDate: any = fetch( + `https://api.tito.io/v3/react-denver/${nextEventSlug}/releases`, + { headers: headers } + ) + .then((response) => response.json()) + .then((json) => { + const inPersonId = json?.releases[0].id; + const virtualId = json?.releases[1].id; + + const nextEventResponse = { + nextEvent: nextEventSlug, + inPerson: inPersonId, + virtual: virtualId, + }; + res.status(200).json(nextEventResponse); + }) + .catch((error) => { + res.json(error); + res.status(500).end(); + }); + res.status(200); +} diff --git a/pages/api/tito-create-registration.ts b/pages/api/tito-create-registration.ts new file mode 100644 index 0000000..9547e34 --- /dev/null +++ b/pages/api/tito-create-registration.ts @@ -0,0 +1,33 @@ +export default async function (req, res) { + const { registrationData, nextEvent } = JSON.parse(req.body); + const registrationDataToSend = { registration: registrationData }; + + const headers = { + "Access-Control-Allow-Origin": "*", + "Content-Type": "application/json", + Accept: "application/json", + Authorization: `Token token=${process.env.SECRET_ACCESS_TOKEN}`, + }; + + try { + const response = await fetch( + `https://api.tito.io/v3/react-denver/${nextEvent}/registrations`, + { + method: "POST", + headers: headers, + body: JSON.stringify(registrationDataToSend), + } + ) + .then((response) => response.json()) + .then((json) => { + res.status(201).json({ + ticket: json.registration.tickets[0].unique_url, + }); + }) + .catch((error) => { + console.log(`there was an error ${error}`); + }); + } catch (error) { + console.log(`Something went wrong`); + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 42a87dd..4ec617c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,11 +6,8 @@ settings: dependencies: '@headlessui/react': - specifier: ^1.7.17 + specifier: ^1.7.13 version: 1.7.17(react-dom@18.2.0)(react@18.2.0) - '@headlessui/tailwindcss': - specifier: ^0.2.0 - version: 0.2.0(tailwindcss@3.3.3) '@heroicons/react': specifier: ^2.0.17 version: 2.0.18(react@18.2.0) @@ -1120,15 +1117,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@headlessui/tailwindcss@0.2.0(tailwindcss@3.3.3): - resolution: {integrity: sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==} - engines: {node: '>=10'} - peerDependencies: - tailwindcss: ^3.0 - dependencies: - tailwindcss: 3.3.3 - dev: false - /@heroicons/react@2.0.18(react@18.2.0): resolution: {integrity: sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==} peerDependencies: