From b872f54b16f608eabdc2f025706b8d2a87954cf2 Mon Sep 17 00:00:00 2001
From: jc <46619361+juancwu@users.noreply.github.com>
Date: Thu, 16 May 2024 16:20:40 -0400
Subject: [PATCH] allow check and uncheck event item

---
 functions/src/index.ts              | 17 +++---
 src/pages/admin/ViewTicket.page.tsx | 88 ++++++++++++++++++-----------
 src/services/utils/index.ts         |  6 +-
 3 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/functions/src/index.ts b/functions/src/index.ts
index 3f030940..98f89daf 100644
--- a/functions/src/index.ts
+++ b/functions/src/index.ts
@@ -539,7 +539,7 @@ export const redeemItem = functions.https.onCall(async (data, context) => {
         .object({
             ticketId: z.string(),
             itemId: z.string(),
-            type: z.string().refine((v) => v === "event" || v === "food"),
+            action: z.string().refine((v) => v === "check" || "uncheck"),
         })
         .safeParse(data);
     if (!validateResults.success) {
@@ -555,23 +555,24 @@ export const redeemItem = functions.https.onCall(async (data, context) => {
     if (!ticket)
         return response(HttpStatus.NOT_FOUND, { message: "ticket not found" });
 
-    if (data.type === "event") {
+    let events = [];
+    if (data.action === "check") {
+        events = [...ticket.events, data.itemId];
         await admin
             .firestore()
             .collection("tickets")
             .doc(data.ticketId)
-            .update({ events: [...ticket.events, data.itemId] });
-    } else if (data.type === "food") {
+            .update({ events });
+    } else {
+        events = ticket.events.filter((evt: string) => evt !== data.itemId);
         await admin
             .firestore()
             .collection("tickets")
             .doc(data.ticketId)
-            .update({ foods: [...ticket.foods, data.itemId] });
-    } else {
-        return response(HttpStatus.BAD_REQUEST, { message: "invalid type" });
+            .update({ events });
     }
 
-    return response(HttpStatus.OK);
+    return response(HttpStatus.OK, { data: events });
 });
 
 export {
diff --git a/src/pages/admin/ViewTicket.page.tsx b/src/pages/admin/ViewTicket.page.tsx
index 427595fa..fe15651f 100644
--- a/src/pages/admin/ViewTicket.page.tsx
+++ b/src/pages/admin/ViewTicket.page.tsx
@@ -7,6 +7,7 @@ import { getExtendedTicketData } from "@/services/utils/ticket";
 import { useNotification } from "@/providers/notification.provider";
 import { getRedeemableItems, redeemItem } from "@/services/utils";
 import { Button, LoadingAnimation, Modal } from "@/components";
+import { getButtonStyles } from "@/components/Button/Button.styles";
 
 const categories = ["Important", "Workshop", "Game/Chill", "Food"];
 
@@ -23,6 +24,9 @@ export const AdminViewTicketPage = () => {
     const [events, setEvents] = useState<EventItem[]>([]);
     const [openConfirm, setOpenConfirm] = useState(false);
     const [activeEvent, setActiveEvent] = useState<EventItem | null>(null);
+    const [activeAction, setActiveAction] = useState<"check" | "uncheck">(
+        "check"
+    );
 
     useEffect(() => {
         if (!ticketId) return;
@@ -53,17 +57,19 @@ export const AdminViewTicketPage = () => {
     }, [currentUser]);
 
     const checkEvent = async (e: EventItem) => {
-        if (!ticketData) return;
-        if (ticketData?.events.includes(e.id) || !ticketId) return;
+        if (!ticketData || !ticketId) return;
 
         try {
-            const res = await redeemItem(ticketId, e.id, "event");
+            const res = await redeemItem(ticketId, e.id, activeAction);
             if (res.status === 200) {
                 showNotification({
-                    title: "Event Item Checked!",
+                    title:
+                        activeAction === "check"
+                            ? "Event Item Checked!"
+                            : "Event Item Unchecked!",
                     message: "",
                 });
-                ticketData.events.push(e.id);
+                ticketData.events = res.data;
                 setTicketData({ ...ticketData });
             } else {
                 showNotification({
@@ -141,40 +147,58 @@ export const AdminViewTicketPage = () => {
                                             e.type.toLowerCase() ===
                                             category.toLowerCase()
                                     )
-                                    .map((e) => (
-                                        <li key={e.id}>
-                                            <div className="space-y-2">
-                                                <div>
-                                                    <p className="font-medium">
-                                                        Title:
-                                                        <span className="ml-2 font-normal">
-                                                            {e.title}
-                                                        </span>
-                                                    </p>
+                                    .map((e) => {
+                                        const checked =
+                                            ticketData.events.includes(e.id);
+                                        return (
+                                            <li key={e.id}>
+                                                <div className="space-y-2">
+                                                    <div>
+                                                        <p className="font-medium">
+                                                            Title:
+                                                            <span className="ml-2 font-normal">
+                                                                {e.title}
+                                                            </span>
+                                                        </p>
+                                                    </div>
+                                                    <button
+                                                        className={getButtonStyles(
+                                                            {
+                                                                className:
+                                                                    "p-2",
+                                                                intent: checked
+                                                                    ? "secondary"
+                                                                    : "primary",
+                                                            }
+                                                        )}
+                                                        onClick={() => {
+                                                            setActiveEvent(e);
+                                                            setActiveAction(
+                                                                checked
+                                                                    ? "uncheck"
+                                                                    : "check"
+                                                            );
+                                                            setOpenConfirm(
+                                                                true
+                                                            );
+                                                        }}
+                                                    >
+                                                        {checked
+                                                            ? "Uncheck"
+                                                            : "Check"}
+                                                    </button>
                                                 </div>
-                                                <button
-                                                    className="p-2 bg-tbrand text-white rounded disabled:bg-gray-400"
-                                                    disabled={ticketData.events.includes(
-                                                        e.id
-                                                    )}
-                                                    onClick={() => {
-                                                        setActiveEvent(e);
-                                                        setOpenConfirm(true);
-                                                    }}
-                                                >
-                                                    Check
-                                                </button>
-                                            </div>
-                                        </li>
-                                    ))}
+                                            </li>
+                                        );
+                                    })}
                             </ul>
                         </Tab.Panel>
                     ))}
                 </Tab.Panels>
             </Tab.Group>
             <Modal
-                title="Confirm Check"
-                subTitle="This action cannot be undone."
+                title="Check/Unchek Event"
+                subTitle="Please confirm"
                 open={openConfirm}
                 onClose={closeModal}
             >
diff --git a/src/services/utils/index.ts b/src/services/utils/index.ts
index eba640e5..a4ce6573 100644
--- a/src/services/utils/index.ts
+++ b/src/services/utils/index.ts
@@ -301,14 +301,14 @@ export async function getRedeemableItems() {
 export async function redeemItem(
     ticketId: string,
     itemId: string,
-    type: "event" | "food"
+    action: "check" | "uncheck"
 ) {
-    const fn = httpsCallable<unknown, CloudFunctionResponse<void>>(
+    const fn = httpsCallable<unknown, CloudFunctionResponse<string[]>>(
         functions,
         "redeemItem"
     );
     try {
-        const res = await fn({ ticketId, itemId, type });
+        const res = await fn({ ticketId, itemId, action });
         const data = res.data;
         return data;
     } catch (e) {