Hmt 44/qr code component

amplify/emails/templates/Welcome.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from "react";
 
 import { Body, Html, Text } from "@react-email/components";

package.json

@@ -35,6 +35,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
+    "react-qrcode-logo": "^3.0.0",
     "react-toastify": "^10.0.5",
     "tailwind-merge": "^2.2.2",
     "validator": "^13.12.0"

src/app/participant/profile/food-ticket/page.tsx

@@ -1,3 +1,9 @@
+import UserFoodTicket from "@/components/UserProfile/FoodTicket";
+
 export default function FoodTicket() {
-  return <div> FoodTicket</div>;
+  return (
+    <>
+      <UserFoodTicket />
+    </>
+  );
 }

src/components/Food/DeleteButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { deleteFoodEvent } from "@/app/admin/food-tickets/actions";
+import { deleteFoodEvent } from "@/components/actions/userFoodTicketActions";
 
 export default function DeleteButton({ eventId }: { eventId: string }) {
   const handleDelete = async () => {

src/components/Food/EventForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import FoodEventCreateForm from "@/../ui-components/FoodEventCreateForm";
-import { createFoodEvent } from "@/app/admin/food-tickets/actions";
+import { createFoodEvent } from "@/components/actions/userFoodTicketActions";
 
 export default function EventForm() {
   // FIXME: No idea why there is a TypeScript error here, everything works fine though.

src/components/UserProfile/FoodTicket.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { generateClient } from "aws-amplify/api";
+import Image from "next/image";
+import { QRCode } from "react-qrcode-logo";
+
+import { type Schema } from "@/amplify/data/resource";
+import { createMessageAndCode } from "@/amplify/function/BusinessLogic/utils/crytography";
+import { getUpcomingFoodEventDetails } from "@/app/get-food-ticket/actions";
+import { useUser } from "@/components/contexts/UserContext";
+import { useQuery } from "@tanstack/react-query";
+
+export default function UserFoodTicket() {
+  const client = generateClient<Schema>();
+
+  const userId = useUser().currentUser.username as string;
+
+  const { data, isFetching } = useQuery({
+    initialDataUpdatedAt: 0,
+    queryKey: ["User", userId],
+    queryFn: async () => {
+      const {
+        queuePosition,
+        eventName,
+        eventDescription,
+        eventTime,
+        timeslot,
+      } = await getUpcomingFoodEventDetails(userId);
+
+      let verificationCode = "";
+
+      const { data, errors } = await client.queries.GetUserMessageCode({
+        userMessage: userId,
+      });
+      if (errors) {
+        console.log(errors);
+        verificationCode = "Error when generating your message code";
+        return;
+      }
+
+      if (data) {
+        const json = JSON.parse(data.body as string);
+        const code = json["value"];
+
+        const createdVerificationCode = createMessageAndCode(userId, code);
+        verificationCode = createdVerificationCode;
+      } else {
+        verificationCode = "Error when generating your message code";
+      }
+
+      return {
+        queuePosition,
+        eventName,
+        eventDescription,
+        eventTime,
+        timeslot,
+        verificationCode,
+      };
+    },
+  });
+
+  const foodTicketData = {
+    "Queue Position": `You are in position ${data?.queuePosition ?? "unknown"} in the queue.`,
+    "Event Name": data?.eventName ?? "N/A",
+    "Event Description": data?.eventDescription ?? "N/A",
+    "Event Time": data?.eventTime ?? "N/A",
+    timeslot: data?.timeslot ?? "N/A",
+    userCode: data?.verificationCode ?? "N/A",
+  };
+
+  return (
+    <>
+      {isFetching ? (
+        <div className="flex h-screen w-full items-center justify-center bg-fuzzy-peach">
+          <h1 className="text-2xl">Loading...</h1>
+        </div>
+      ) : (
+        <div className="flex size-full flex-col bg-fuzzy-peach">
+          <div className="hidden md:block">
+            <Image
+              src="/images/userProfile/Star_Icons.svg"
+              alt="Right Squiggly SVG"
+              width={30}
+              height={30}
+              className="md:absolute md:left-10 md:top-[50rem]"
+            />{" "}
+            <Image
+              src="/images/userProfile/Star_Icons.svg"
+              alt="Right Squiggly SVG"
+              width={30}
+              height={30}
+              className="md:absolute md:right-8 md:top-[30rem]"
+            />{" "}
+            <Image
+              src="/images/userProfile/Star_Icons.svg"
+              alt="Right Squiggly SVG"
+              width={30}
+              height={30}
+              className="md:absolute md:right-10 md:top-[60rem]"
+            />{" "}
+          </div>
+          <div className="px-10 md:px-16 md:py-10">
+            <div className="mb-3 flex flex-col justify-between uppercase text-[#FF6B54] md:mx-10">
+              <div className="flex flex-row justify-between">
+                <h1 className="mt-3 text-lg font-bold md:text-2xl">
+                  My Food Ticket
+                </h1>
+              </div>
+              <div className="bg-pink mt-10 flex flex-col items-center gap-5 rounded-3xl border-4 border-white bg-white/30 px-8 py-20 sm:flex-row sm:justify-start lg:gap-12 lg:px-20 lg:py-16">
+                <QRCode
+                  value={foodTicketData.userCode}
+                  size={300}
+                  logoImage="/CTCLogo.svg"
+                  eyeColor={["#FF4D6F", "#FF4D6F", "#FF4D6F"]}
+                  eyeRadius={50}
+                  qrStyle="fluid"
+                  fgColor="#FF4D6F"
+                  style={{ borderRadius: "20px" }}
+                  logoPadding={3}
+                  logoPaddingStyle="square"
+                />
+                <div className="flex flex-col flex-wrap">
+                  {Object.entries(foodTicketData)
+                    .slice(0, -1)
+                    .map(([key, value]) => (
+                      <div className="flex w-full flex-wrap" key={key}>
+                        <h1 className="my-2 w-fit text-lg md:mt-2 md:text-xl">
+                          <strong>{key}:</strong>{" "}
+                          <span className="text-md">{` ${value}`}</span>
+                        </h1>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/components/UserProfile/UserProfile.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import { useState } from "react";
 
 import { type Schema } from "@/amplify/data/resource";
-// import ProfileLinks from "@/components/UserProfile/ProfileLinks";
+import ProfileLinks from "@/components/UserProfile/ProfileLinks";
 import UserForm from "@/components/UserProfile/UserForm";
 import { useUser } from "@/components/contexts/UserContext";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -109,7 +109,7 @@ const UserProfile = () => {
             />{" "}
           </div>
           <div className="px-10 md:px-16 md:py-10">
-            {/* <ProfileLinks /> */}
+            <ProfileLinks />
             <div className="mb-3 flex justify-between uppercase text-[#FF6B54] md:mx-10">
               <h1 className="mt-3 text-lg font-bold md:text-2xl">My Details</h1>
               <button className={BUTTON_STYLES} onClick={handleEditClick}>