feat: Operations on stripe events

package.json

@@ -6,14 +6,15 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "email": "email dev --port 4000 --dir src/app/api/emails",
     "prepare": "npm run compile",
     "compile": "tsc",
     "fix": "next lint",
     "pretest": "npm run compile",
     "posttest": "npm run lint",
     "cf-type-gen": "dotenv -- bash -c 'cf-content-types-generator -s $NEXT_CONTENTFUL_SPACE_ID -t $NEXT_CONTENTFUL_CMA_TOKEN -X -o ./src/types/contentful' && npm run fix",
     "gen-example-env": "sed 's/=.*/=/' .env > .env.example",
-    "ngrok": "ngrok http --domain=https://initially-cosmic-panther.ngrok-free.app 3000"
+    "ngrok": "ngrok http --domain=initially-cosmic-panther.ngrok-free.app 3000"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
@@ -37,6 +38,7 @@
     "contentful": "^10.8.4",
     "date-fns": "^3.3.1",
     "dotenv-cli": "^7.3.0",
+    "encoding": "^0.1.13",
     "framer-motion": "^10.16.4",
     "ioredis": "^5.3.2",
     "keyv": "^4.5.4",
@@ -49,7 +51,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-dropzone": "^14.2.3",
-    "react-email": "^1.10.0",
+    "react-email": "^1.10.1",
     "react-hook-form": "^7.49.3",
     "react-icons": "^5.0.1",
     "resend": "^2.0.0",

src/app/(pages)/events/detail/[id]/page.tsx

@@ -1,7 +1,8 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Box,
+  useToast,
   Container,
   Button,
   Text,
@@ -19,15 +20,58 @@ import { TennisEvent } from "@types";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { format, parseISO } from "date-fns";
+import { useSearchParams } from "next/navigation";
 import {
   LocationPinIcon,
   ClockIcon,
   SingleUserIcon,
   UserFriendsIcon,
 } from "@icons";
+import { getClientSession } from "@utils";
 
 const EventDetail = ({ params }: { params: { id: string } }) => {
   const router = useRouter();
+  const statusToast = useToast();
+  const searchParams = useSearchParams();
+
+  const soldOut = searchParams.get("sold-out");
+  const unsuccessfulPayment = searchParams.get("unsuccessful-payment");
+  const successfulPayment = searchParams.get("successful-payment");
+  const purchased = searchParams.get("purchased");
+
+  useEffect(() => {
+    if (soldOut === "true") {
+      statusToast({
+        id: "sold_out",
+        title: "Unfortunately, this event just sold out.",
+        status: "error",
+      });
+    }
+
+    if (purchased === "true") {
+      statusToast({
+        id: "purchased",
+        title: "You have already purchased this ticket.",
+        status: "error",
+      });
+    }
+
+    if (unsuccessfulPayment === "true") {
+      statusToast({
+        id: "unsuccessful_payment",
+        title: "An error has occurred and you will be issued a refund.",
+        status: "error",
+      });
+    }
+
+    if (successfulPayment === "true") {
+      statusToast({
+        id: "successful_payment",
+        title: "Successfully purchased ticket.",
+        status: "success",
+      });
+    }
+  }, [soldOut, statusToast, unsuccessfulPayment, successfulPayment, purchased]);
 
   const getEvent = async () => {
     const event = await axios.post(
@@ -53,8 +97,13 @@ const EventDetail = ({ params }: { params: { id: string } }) => {
   const [purchaseLoading, setPurchaseLoading] = useState(false);
 
   const purchaseTicket = async () => {
+    const session = await getClientSession();
     try {
       setPurchaseLoading(true);
+
+      if (!session) {
+        router.push(`/login/?redirect=/events/detail/${params.id}`);
+      }
       const res = await axios.post(
         `${process.env.NEXT_PUBLIC_HOSTNAME}/api/events/ticket/purchase`,
         { event_id: params.id },
@@ -87,8 +136,16 @@ const EventDetail = ({ params }: { params: { id: string } }) => {
           colorScheme="brand"
           onClick={purchaseTicket}
           isLoading={purchaseLoading}
+          loadingText="Reserving Ticket"
+          isDisabled={
+            (!data.reserved && data.available_tickets <= 0) || data.purchased
+          }
         >
-          Buy Ticket
+          {data.purchased
+            ? "Purchased Ticket"
+            : !data.reserved && data.available_tickets <= 0
+              ? "Sold out"
+              : "Buy Ticket"}
         </Button>
       </Flex>
     );