add num tickets

components/custom/EventDescription.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -32,8 +32,10 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
   eventDetails,
 }) => {
   const { toast } = useToast();
+  const [numTickets, setNumTickets] = useState(1);
+
   const handleBuyNow = () => {
-    buyHandler(eventDetails.EventID, toast);
+    buyHandler(eventDetails.EventID, numTickets, toast);
   };
 
   return (
@@ -79,7 +81,10 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
         </Button>
         <div className="relative md:left-5">
           <NumberPicker
+            initialCount={numTickets}
+            min={1}
             max={eventDetails.capacity - eventDetails.ticketsSold}
+            onChange={setNumTickets}
           />
         </div>
       </CardFooter>

components/custom/TicketButton.tsx

@@ -1,6 +1,5 @@
-'use client';
-import React, { useState } from 'react';
-import { Button } from '../ui/button'; // Adjust import path to where your shadcn Button component is located
+import React from 'react';
+import { Button } from '../ui/button';
 
 interface NumberPickerProps {
   initialCount?: number;
@@ -15,25 +14,23 @@ const NumberPicker: React.FC<NumberPickerProps> = ({
   max = 10,
   onChange,
 }) => {
-  const [count, setCount] = useState<number>(initialCount);
+  const [count, setCount] = React.useState(initialCount);
+
+  React.useEffect(() => {
+    if (onChange) {
+      onChange(count);
+    }
+  }, [count, onChange]);
 
   const increment = () => {
     if (count < max) {
-      const newCount = count + 1;
-      setCount(newCount);
-      if (onChange) {
-        onChange(newCount);
-      }
+      setCount(count + 1);
     }
   };
 
   const decrement = () => {
     if (count > min) {
-      const newCount = count - 1;
-      setCount(newCount);
-      if (onChange) {
-        onChange(newCount);
-      }
+      setCount(count - 1);
     }
   };
 

lib/buyHandler.ts

@@ -17,6 +17,7 @@ type ToastFunction = (options: {
 
 export const buyHandler = async (
   eventId: number,
+  numTickets: number,
   toast: ToastFunction
 ): Promise<void> => {
   if (eventId < 0) {
@@ -24,6 +25,14 @@ export const buyHandler = async (
     return;
   }
 
+  if (numTickets <= 0) {
+    toast({
+      title: 'Please select at least one ticket.',
+      variant: 'destructive',
+    });
+    return;
+  }
+
   try {
     if (typeof window.ethereum === 'undefined') {
       toast({
@@ -38,11 +47,11 @@ export const buyHandler = async (
     const signer = provider.getSigner();
     const contract = getContract().connect(signer);
 
-    let ticketCost = await contract.getEventPriceFlare(eventId);
-    ticketCost = ticketCost.mul(105).div(100);
-    const balance = await provider.getBalance(await signer.getAddress());
+    const singleTicketCost = await contract.getEventPriceFlare(eventId);
+    const totalTicketCost = singleTicketCost.mul(numTickets).mul(105).div(100);
 
-    if (balance.lt(ticketCost)) {
+    const balance = await provider.getBalance(await signer.getAddress());
+    if (balance.lt(totalTicketCost)) {
       toast({
         title: 'Insufficient balance to cover ticket cost and gas fees.',
         variant: 'destructive',
@@ -50,14 +59,14 @@ export const buyHandler = async (
       return;
     }
 
-    const tx = await contract.buyTicket(eventId, { value: ticketCost });
+    const tx = await contract.buyTicket(eventId, { value: totalTicketCost });
     const receipt = await tx.wait();
 
     toast({
-      title: `Ticket purchased successfully! Transaction Hash: ${receipt.transactionHash}`,
+      title: `Tickets purchased successfully! Transaction Hash: ${receipt.transactionHash}`,
     });
   } catch (error) {
-    console.error('Error buying ticket:', error);
+    console.error('Error buying tickets:', error);
     toast({
       title: 'Transaction failed. Please try again.',
       variant: 'destructive',