টিকিট কিনুন
প্রতি টিকিট মূল্য {currency(CONFIG.TICKET_PRICE)}
Facebook video
September 02, 2025
import React, { useEffect, useMemo, useState } from "react";
import { motion } from "framer-motion";
import { Check, Copy, Download, Eye, EyeOff, Info, Loader2, Ticket, Wallet } from "lucide-react";
// ==========================
// SIMPLE CONFIG (EDIT THESE)
// ==========================
const CONFIG = {
SITE_NAME: "Mega Prize Bangladesh",
CURRENCY: "৳",
TICKET_PRICE: 100, // per ticket price
MERCHANTS: {
bkash: { label: "bKash", number: "01XXXXXXXXX" }, // <-- replace with your merchant number
nagad: { label: "Nagad", number: "01XXXXXXXXX" }, // <-- replace with your merchant number
},
ADMIN_PIN: "2025", // simple demo admin PIN (change it!)
};
// LocalStorage Keys
const LS_KEYS = {
ORDERS: "mpb_orders_v1",
};
function currency(n) {
return `${CONFIG.CURRENCY}${Number(n).toLocaleString("en-US")}`;
}
function genTicketId() {
const ts = Date.now().toString(36).toUpperCase();
const rnd = Math.random().toString(36).slice(2, 6).toUpperCase();
return `MPB-${ts}-${rnd}`;
}
function phoneValid(p) {
// Very basic BD phone validation (11 digits starting with 01)
return /^01\d{9}$/.test(p || "");
}
function copyToClipboard(text, setCopied) {
navigator.clipboard.writeText(text).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 1500);
});
}
export default function App() {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [email, setEmail] = useState("");
const [qty, setQty] = useState(1);
const [method, setMethod] = useState("bkash");
const [note, setNote] = useState("");
const [submitting, setSubmitting] = useState(false);
const [orders, setOrders] = useState([]);
const [copied, setCopied] = useState(false);
const [adminMode, setAdminMode] = useState(false);
const [pinInput, setPinInput] = useState("");
const [showHow, setShowHow] = useState(false);
useEffect(() => {
const saved = localStorage.getItem(LS_KEYS.ORDERS);
if (saved) setOrders(JSON.parse(saved));
}, []);
useEffect(() => {
localStorage.setItem(LS_KEYS.ORDERS, JSON.stringify(orders));
}, [orders]);
const total = useMemo(() => CONFIG.TICKET_PRICE * qty, [qty]);
const merch = CONFIG.MERCHANTS[method];
function resetForm() {
setName("");
setPhone("");
setEmail("");
setQty(1);
setMethod("bkash");
setNote("");
}
function createCsv() {
const headers = [
"TicketID",
"Name",
"Phone",
"Email",
"Qty",
"Amount",
"Method",
"Merchant",
"TxnID",
"CreatedAt",
];
const rows = orders.map((o) => [
o.ticketId,
o.name,
o.phone,
o.email,
o.qty,
o.amount,
o.method,
o.merchant,
o.txnId,
o.createdAt,
]);
const csv = [headers, ...rows].map((r) => r.map((c) => `"${String(c ?? "").replaceAll('"', '""')}"`).join(",")).join("\n");
const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `orders_${Date.now()}.csv`;
a.click();
URL.revokeObjectURL(url);
}
async function handleSubmit(e) {
e.preventDefault();
if (!name.trim()) return alert("নাম দিন");
if (!phoneValid(phone)) return alert("সঠিক bKash/Nagad নম্বর দিন (১১ ডিজিট, 01 দিয়ে শুরু)");
if (qty < 1) return alert("কমপক্ষে ১টি টিকিট নির্বাচন করুন");
setSubmitting(true);
// DEMO: In a real app, you would redirect to bKash/Nagad gateway or show QR.
// Here we simulate manual payment + user enters Txn ID.
setTimeout(() => {
setSubmitting(false);
const ticketId = genTicketId();
const txnId = prompt(
`Step 3: পেমেন্ট সম্পন্ন হলে প্রাপ্ত Txn ID লিখুন (Ref/Trx ID)`,
"TXN123456"
);
if (!txnId) return; // user cancelled
const order = {
ticketId,
name: name.trim(),
phone,
email: email.trim(),
qty,
amount: total,
method,
merchant: merch.number,
txnId: txnId.trim(),
createdAt: new Date().toISOString(),
};
setOrders((prev) => [order, ...prev]);
resetForm();
alert(`ধন্যবাদ! আপনার টিকিট আইডি: ${ticketId}\nTxn: ${order.txnId}`);
}, 900);
}
return (
{/* Left: Form */}