create rsvp accept form

components/AcceptRSVPForm/AcceptRSVPForm.module.scss

@@ -0,0 +1,51 @@
+.container {
+    width: 100%;
+    height: fit-content;
+    padding: 5rem;
+}
+
+.form {
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.formButton {
+    border-radius: 8px;
+    border: 2px solid #766947;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: linear-gradient(
+        to right,
+        #ffffff 0%,
+        #fff4d4 22%,
+        #f0e2bc 53%,
+        #e1d1a2 100%
+    );
+    padding-left: 30px;
+    padding-right: 30px;
+    text-transform: uppercase;
+    font-size: 24px;
+    height: auto;
+    cursor: pointer;
+    font-weight: bold;
+    color: #9a8a5f;
+
+    // Make sure focus state works
+    &:focus {
+        outline: 4px solid #ad8e28;
+    }
+
+    @media (max-width: 768px) {
+        padding: 5px 10px;
+        font-size: 20px;
+    }
+}
+
+.buttons {
+    display: flex;
+    justify-content: space-between;
+}

components/AcceptRSVPForm/AcceptRSVPForm.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React from "react";
+import styles from "./AcceptRSVPForm.module.scss";
+import { Form, Formik } from "formik";
+import * as yup from "yup";
+import TextInput from "@/components/Form/TextInput/TextInput";
+import AvatarSelector from "../AvatarSelector/AvatarSelector";
+import { setProfile } from "@/util/api";
+
+const schema = yup.object({
+    displayName: yup.string().required("Please enter a display name"),
+
+    discordTag: yup.string().required("Please enter your discord tag"),
+
+    avatarId: yup.string().required("Please choose an avatar")
+});
+
+type AcceptRSVPFormProps = {
+    closeModal: () => void;
+};
+
+const AcceptRSVPForm: React.FC<AcceptRSVPFormProps> = ({ closeModal }) => {
+    const handleSubmit = async ({
+        displayName,
+        discordTag,
+        avatarId
+    }: {
+        displayName: string;
+        discordTag: string;
+        avatarId: string;
+    }) => {
+        console.log(displayName, discordTag, avatarId);
+        const response = await setProfile({
+            displayName: displayName,
+            discordTag: discordTag,
+            avatarId: avatarId
+        });
+        console.log(response);
+        closeModal();
+    };
+
+    return (
+        <div className={styles.container}>
+            <Formik
+                initialValues={{
+                    displayName: "",
+                    discordTag: "",
+                    avatarId: ""
+                }}
+                onSubmit={handleSubmit}
+                validationSchema={schema}
+            >
+                <Form className={styles.form}>
+                    <h2>
+                        We are so excited to have you at HackIllinois this year!
+                        Please complete the following information to confirm
+                        your attendance:
+                    </h2>
+                    <TextInput
+                        name="displayName"
+                        label="Display Name"
+                        required
+                    />
+
+                    <TextInput name="discordTag" label="Discord Tag" required />
+
+                    <AvatarSelector
+                        name="avatarId"
+                        label="Select an avatar"
+                        required
+                    />
+
+                    <div className={styles.buttons}>
+                        <button
+                            type="button"
+                            className={styles.formButton}
+                            onClick={closeModal}
+                        >
+                            Cancel
+                        </button>
+                        <button type="submit" className={styles.formButton}>
+                            Submit
+                        </button>
+                    </div>
+                </Form>
+            </Formik>
+        </div>
+    );
+};
+export default AcceptRSVPForm;

util/api.ts

@@ -3,7 +3,9 @@ import {
     RegistrationType,
     WithId,
     RSVPType,
-    ChallengeStatus
+    ChallengeStatus,
+    ProfileBodyType,
+    ProfileType
 } from "./types";
 import { handleError } from "./helpers";
 
@@ -168,3 +170,7 @@ export async function getQRCode(): Promise<string> {
     );
     return res.qrInfo;
 }
+
+export function setProfile(body: ProfileBodyType): Promise<ProfileType> {
+    return requestv2("POST", "/profile", body);
+}

util/types.ts

@@ -219,7 +219,7 @@ export type UserType = {
 export type ProfileBodyType = {
     displayName: string;
     discordTag: string;
-    avatarId: Avatars;
+    avatarId: string;
 };
 
 export type ProfileType = {