Skip to content

Commit

Permalink
name and number added
Browse files Browse the repository at this point in the history 
name and number added
  • Loading branch information
@bhavyachopra99
bhavyachopra99 committed Sep 30, 2024
1 parent e3607c5 commit 6a002b0
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 16 deletions.
22 changes: 11 additions & 11 deletions pages/attendees-download.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ const AttendeeDownload = () => {
if (Array.isArray(order.tickets)) {
order.tickets.forEach((ticket) => {
guestList.push({
email: order.email, // Ensure you have an email field in the order
name: order.name || "", // Add name to the guest list
mobile: order.mobileNumber || "", // Add mobile to the guest list
email: order.email || "", // Add email field in the order
ticketType: ticket.name,
quantity: ticket.quantity,
transactionId: order.orderId,
Expand All @@ -60,23 +62,21 @@ const AttendeeDownload = () => {
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
Email
</th>
<th scope="col" className="px-6 py-3">
Transaction ID
</th>
<th scope="col" className="px-6 py-3">
Tickets
</th>
<th scope="col" className="px-6 py-3">Name</th>
<th scope="col" className="px-6 py-3">Mobile</th>
<th scope="col" className="px-6 py-3">Email</th>
<th scope="col" className="px-6 py-3">Transaction ID</th>
<th scope="col" className="px-6 py-3">Tickets</th>
</tr>
</thead>
<tbody>
{orders.map((order) => (
<tr key={order.id} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{order.email}
{order.name || "N/A"} {/* Display name or "N/A" if not available */}
</td>
<td className="px-6 py-4">{order.mobileNumber || "N/A"}</td> {/* Display mobile or "N/A" */}
<td className="px-6 py-4">{order.email || "N/A"}</td> {/* Display email */}
<td className="px-6 py-4">{order.orderId}</td>
<td className="px-6 py-4">
{Array.isArray(order.tickets) ? (
Expand Down
66 changes: 61 additions & 5 deletions pages/ticket-purchase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ const TicketPurchase = () => {
const [eventDetails, setEventDetails] = useState(null);
const [quantities, setQuantities] = useState({});
const [cart, setCart] = useState([]);
const [name, setName] = useState(''); // New state for Name
const [email, setEmail] = useState('');
const [mobileNumber, setMobileNumber] = useState(''); // New state for Mobile Number
const [error, setError] = useState('');
const [showPaypal, setShowPaypal] = useState(false);

Expand Down Expand Up @@ -172,12 +174,32 @@ const TicketPurchase = () => {
return;
}

if (!email) {
if (!name.trim()) { // Validate Name
console.warn('Checkout attempted without providing a name.');
setError('Please provide your name');
return;
}

if (!email.trim()) {
console.warn('Checkout attempted without providing an email.');
setError('Please provide your email');
return;
}

if (!mobileNumber.trim()) { // Validate Mobile Number
console.warn('Checkout attempted without providing a mobile number.');
setError('Please provide your mobile number');
return;
}

// Optional: Validate mobile number format
const mobileRegex = /^[0-9]{10,15}$/; // Adjust regex as per your requirements
if (!mobileRegex.test(mobileNumber)) {
console.warn('Invalid mobile number format.');
setError('Please provide a valid mobile number');
return;
}

// Check ticket availability
const availableTickets = Object.keys(eventDetails.tickets).reduce((acc, ticketName) => {
acc[ticketName] = eventDetails.tickets[ticketName].available - (quantities[ticketName] || 0);
Expand Down Expand Up @@ -292,7 +314,9 @@ const TicketPurchase = () => {
// Prepare order data for the orders collection
const orderData = {
orderId: order.id, // PayPal transaction ID
email: email,
name: name.trim(), // Include Name
email: email.trim(),
mobileNumber: mobileNumber.trim(), // Include Mobile Number
eventId: eventId,
eventDetails: eventDetails,
tickets: cart,
Expand All @@ -309,7 +333,9 @@ const TicketPurchase = () => {

// Prepare detailed ticket info for the email (like an invoice)
const emailPayload = {
email: email,
name: name.trim(), // Include Name
email: email.trim(),
mobileNumber: mobileNumber.trim(), // Include Mobile Number
eventDetails: eventDetails,
tickets: cart.map(ticket => ({
name: ticket.name,
Expand Down Expand Up @@ -352,15 +378,15 @@ const TicketPurchase = () => {
// Redirect to Success Page
router.push({
pathname: '/successs',
query: { email: email, orderId: order.id }, // Include PayPal transaction ID in query
query: { name: name.trim(), email: email.trim(), mobileNumber: mobileNumber.trim(), orderId: order.id }, // Include Name, Mobile Number, and PayPal transaction ID in query
});
console.log('Redirecting to success page.');
} catch (error) {
console.error('Error in onApprove:', error);
setError(`Error processing your order: ${error.message}. Please contact support.`);
}
};


return (
<PayPalScriptProvider options={{ "client-id": process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID }}>
Expand Down Expand Up @@ -430,6 +456,20 @@ const TicketPurchase = () => {
)}

<form onSubmit={handleCheckout} className="mt-6">
{/* Name Field */}
<div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium text-white">Name</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
required
className="w-full px-4 py-2 bg-gray-700 rounded-md border border-gray-600 text-white"
/>
</div>

{/* Email Field */}
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-white">Email</label>
<input
Expand All @@ -441,6 +481,22 @@ const TicketPurchase = () => {
className="w-full px-4 py-2 bg-gray-700 rounded-md border border-gray-600 text-white"
/>
</div>

{/* Mobile Number Field */}
<div className="mb-4">
<label htmlFor="mobileNumber" className="block text-sm font-medium text-white">Mobile Number</label>
<input
type="tel"
id="mobileNumber"
value={mobileNumber}
onChange={(e) => setMobileNumber(e.target.value)}
required
pattern="[0-9]{10,15}" // Adjust pattern as needed
placeholder="e.g., 1234567890"
className="w-full px-4 py-2 bg-gray-700 rounded-md border border-gray-600 text-white"
/>
</div>

<button
type="submit"
className="bg-green-600 text-white py-2 px-6 rounded-md hover:bg-green-500 transition duration-200"
Expand Down

0 comments on commit 6a002b0

Please sign in to comment.