feat: implement core event ticketing navigation, detailed event pages, checkout flow, and QR code integration.
This commit is contained in:
Kevin Satria D
BIN
assets/image/logo/awh.png
Normal file
BIN
assets/image/logo/awh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
59
package-lock.json
generated
59
package-lock.json
generated
@@ -11,6 +11,7 @@
|
||||
"lucide-react": "^0.475.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-qr-code": "^2.0.21",
|
||||
"react-router-dom": "^7.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -2898,7 +2899,6 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/js-yaml": {
|
||||
@@ -3269,6 +3269,18 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/lru-cache": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
|
||||
@@ -3351,6 +3363,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/optionator": {
|
||||
"version": "0.9.4",
|
||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
|
||||
@@ -3493,6 +3514,17 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
@@ -3503,6 +3535,12 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/qr.js": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
|
||||
"integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.2.6",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
|
||||
@@ -3524,6 +3562,25 @@
|
||||
"react": "^19.2.6"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-qr-code": {
|
||||
"version": "2.0.21",
|
||||
"resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.21.tgz",
|
||||
"integrity": "sha512-xaywjo0eaF4S3LOz6ns5eoPbM2E+q9HYl4VATYpxK4bBniOhQ9noY2RJ9G4SnZFhUwzx63FUT6KdHzfKgUwyuQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1",
|
||||
"qr.js": "0.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.17.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"lucide-react": "^0.475.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-qr-code": "^2.0.21",
|
||||
"react-router-dom": "^7.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -5,6 +5,8 @@ import Footer from './components/Footer';
|
||||
import Home from './pages/Home';
|
||||
import AllEvents from './pages/AllEvents';
|
||||
import EventDetail from './pages/EventDetail';
|
||||
import Checkout from './pages/Checkout';
|
||||
import Payment from './pages/Payment';
|
||||
|
||||
function ScrollToTop() {
|
||||
const { pathname } = useLocation();
|
||||
@@ -28,6 +30,8 @@ function App() {
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/events" element={<AllEvents />} />
|
||||
<Route path="/event/:id" element={<EventDetail />} />
|
||||
<Route path="/checkout" element={<Checkout />} />
|
||||
<Route path="/payment" element={<Payment />} />
|
||||
</Routes>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -5,15 +5,15 @@ import { Search } from "lucide-react";
|
||||
const SLIDES = [
|
||||
{
|
||||
id: 1,
|
||||
videoId: "Fpn1imb9qZg",
|
||||
videoUrl: "https://videos.pexels.com/video-files/3253245/3253245-uhd_2560_1440_25fps.mp4",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
videoId: "PN7Pv23FrWg",
|
||||
videoUrl: "https://videos.pexels.com/video-files/2086119/2086119-uhd_2560_1440_24fps.mp4",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
videoId: "YsJqKjD2sXE",
|
||||
videoUrl: "https://videos.pexels.com/video-files/3163534/3163534-uhd_2560_1440_30fps.mp4",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -71,16 +71,18 @@ export default function Hero() {
|
||||
<div className="bg-white p-4 md:p-6 brutal-border shadow-[12px_12px_0_0_#000] lg:shadow-[16px_16px_0_0_#000] rotate-2 hover:rotate-0 transition-transform duration-500 max-w-2xl mx-auto xl:ml-auto">
|
||||
<div className="relative w-full aspect-video bg-black brutal-border overflow-hidden">
|
||||
{SLIDES.map((slide, idx) => (
|
||||
<iframe
|
||||
<video
|
||||
key={`video-${slide.id}`}
|
||||
src={`https://www.youtube.com/embed/${slide.videoId}?autoplay=1&mute=1&controls=0&loop=1&playlist=${slide.videoId}&modestbranding=1&playsinline=1&rel=0&showinfo=0&disablekb=1`}
|
||||
className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150%] h-[150%] max-w-none pointer-events-none transition-opacity duration-700 ease-in-out ${
|
||||
src={slide.videoUrl}
|
||||
className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full object-cover max-w-none pointer-events-none transition-opacity duration-700 ease-in-out ${
|
||||
currentSlide === idx
|
||||
? "opacity-100 z-10"
|
||||
: "opacity-0 z-0"
|
||||
}`}
|
||||
allow="autoplay; encrypted-media; fullscreen"
|
||||
frameBorder="0"
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
/>
|
||||
))}
|
||||
<div className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></div>
|
||||
|
||||
178
src/pages/Checkout.tsx
Normal file
178
src/pages/Checkout.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import { useState } from 'react';
|
||||
import { useLocation, useNavigate, Link } from 'react-router-dom';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
|
||||
export default function Checkout() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const ticketState = location.state;
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: ''
|
||||
});
|
||||
|
||||
// If no ticket state, redirect back to events
|
||||
if (!ticketState) {
|
||||
return (
|
||||
<div className="bg-brutal-bg min-h-screen flex items-center justify-center p-4">
|
||||
<div className="bg-white p-8 brutal-border text-center">
|
||||
<h2 className="text-2xl font-black mb-4 uppercase">No Ticket Selected</h2>
|
||||
<Link to="/events" className="px-6 py-3 bg-brutal-yellow brutal-border font-black uppercase text-sm inline-block hover:shadow-[4px_4px_0_0_#000] transition-all">
|
||||
Back to Events
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Construct the payload structure requested by the user
|
||||
const payload = {
|
||||
name: formData.name,
|
||||
email: formData.email,
|
||||
phone: formData.phone,
|
||||
address: formData.address,
|
||||
location_id: "98adc52b-966d-39db-809a-55902ee7228f", // hardcoded mock as requested
|
||||
payment_channel_id: "d48a46b6-3a18-3763-951d-66b7fdb284ae", // hardcoded mock
|
||||
properties: {},
|
||||
products: [
|
||||
{
|
||||
id: ticketState.ticketId,
|
||||
name: ticketState.ticketName,
|
||||
price: ticketState.basePrice,
|
||||
insurance: ticketState.hasInsurance,
|
||||
insurance_price: ticketState.insurancePrice
|
||||
}
|
||||
],
|
||||
totalPrice: ticketState.totalPrice
|
||||
};
|
||||
|
||||
// Navigate to payment page with this payload
|
||||
navigate('/payment', { state: { checkoutPayload: payload } });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-brutal-bg min-h-screen pt-24 pb-20">
|
||||
<div className="max-w-[800px] mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<Link
|
||||
to={`/event/${ticketState.eventId || '1'}`}
|
||||
className="inline-flex items-center gap-2 mb-6 text-black font-black uppercase hover:-translate-x-1 transition-transform text-sm"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5 stroke-[3]" />
|
||||
Back to Ticket
|
||||
</Link>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl font-display font-black uppercase mb-8 brutal-text-shadow tracking-tight">
|
||||
Checkout
|
||||
</h1>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="md:col-span-2">
|
||||
<form onSubmit={handleSubmit} className="bg-white p-6 md:p-8 brutal-border shadow-[8px_8px_0_0_#000] space-y-6">
|
||||
<h2 className="text-2xl font-black uppercase border-b-4 border-black pb-2 mb-6 inline-block">Personal Data</h2>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-black uppercase">Full Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full h-12 px-4 brutal-border bg-brutal-bg focus:bg-white outline-none focus:ring-2 focus:ring-black transition-colors font-bold text-sm"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-black uppercase">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full h-12 px-4 brutal-border bg-brutal-bg focus:bg-white outline-none focus:ring-2 focus:ring-black transition-colors font-bold text-sm"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-black uppercase">Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full h-12 px-4 brutal-border bg-brutal-bg focus:bg-white outline-none focus:ring-2 focus:ring-black transition-colors font-bold text-sm"
|
||||
placeholder="08123456789"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-black uppercase">Address</label>
|
||||
<textarea
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={4}
|
||||
className="w-full p-4 brutal-border bg-brutal-bg focus:bg-white outline-none focus:ring-2 focus:ring-black transition-colors font-bold text-sm resize-none"
|
||||
placeholder="Your full address..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-4 bg-brutal-blue text-white font-black uppercase text-lg hover:bg-blue-600 transition-colors brutal-border mt-8 hover:shadow-[4px_4px_0_0_#000]"
|
||||
>
|
||||
Proceed to Payment
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<div className="bg-brutal-yellow p-6 brutal-border shadow-[8px_8px_0_0_#000] sticky top-24">
|
||||
<h3 className="text-xl font-black uppercase mb-4 border-b-2 border-black pb-2">Order Summary</h3>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-gray-800 uppercase mb-1">Ticket</p>
|
||||
<p className="font-black text-sm">{ticketState.ticketName}</p>
|
||||
<p className="font-bold text-sm">IDR {ticketState.basePrice.toLocaleString('id-ID')}</p>
|
||||
</div>
|
||||
|
||||
{ticketState.hasInsurance && (
|
||||
<div>
|
||||
<p className="text-xs font-bold text-gray-800 uppercase mb-1">Addon</p>
|
||||
<p className="font-black text-sm">Insurance</p>
|
||||
<p className="font-bold text-sm">IDR {ticketState.insurancePrice.toLocaleString('id-ID')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t-4 border-black pt-4">
|
||||
<p className="text-xs font-bold text-gray-800 uppercase mb-1">Total Payment</p>
|
||||
<p className="text-2xl font-display font-black text-black tracking-tight">
|
||||
IDR {ticketState.totalPrice.toLocaleString('id-ID')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { useParams, Link, useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft, MapPin, Calendar, Info, FileText, Ticket as TicketIcon } from 'lucide-react';
|
||||
|
||||
const MOCK_EVENT_DETAIL = {
|
||||
@@ -20,26 +20,25 @@ const MOCK_EVENT_DETAIL = {
|
||||
tickets: [
|
||||
{
|
||||
id: 't1',
|
||||
name: 'PRESALE INCLUDE INSURANCE',
|
||||
benefits: 'Include: Jersey Peserta + Insurance + Finisher Medal + Best Finisher + Waterstation + Refreshment + Tiket Konser UTOPIA Harga Sudah Termasuk Pajak',
|
||||
category: 'PELARI',
|
||||
validDate: '24 Mei 2026',
|
||||
price: 'IDR 155.000',
|
||||
},
|
||||
{
|
||||
id: 't2',
|
||||
name: 'PRESALE NON INSURANCE',
|
||||
name: 'PRESALE',
|
||||
benefits: 'Include: Jersey Peserta + Finisher Medal + Best Finisher + Waterstation + Refreshment + Tiket Konser UTOPIA Harga Sudah Termasuk Pajak',
|
||||
category: 'PELARI',
|
||||
validDate: '24 Mei 2026',
|
||||
price: 'IDR 135.000',
|
||||
basePrice: 135000,
|
||||
insurancePrice: 20000,
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default function EventDetail() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [activeTab, setActiveTab] = useState<'info' | 'desc' | 'ticket'>('ticket');
|
||||
const [insuranceSelections, setInsuranceSelections] = useState<Record<string, boolean>>({});
|
||||
|
||||
const toggleInsurance = (ticketId: string) => {
|
||||
setInsuranceSelections(prev => ({ ...prev, [ticketId]: !prev[ticketId] }));
|
||||
};
|
||||
|
||||
// Dalam aplikasi nyata, Anda akan fetch data berdasarkan `id`
|
||||
const event = MOCK_EVENT_DETAIL;
|
||||
@@ -164,7 +163,11 @@ export default function EventDetail() {
|
||||
{/* TICKET TAB */}
|
||||
{activeTab === 'ticket' && (
|
||||
<div className="animate-in fade-in duration-300 space-y-6">
|
||||
{event.tickets.map((ticket) => (
|
||||
{event.tickets.map((ticket) => {
|
||||
const hasInsurance = insuranceSelections[ticket.id] || false;
|
||||
const totalPrice = ticket.basePrice + (hasInsurance && ticket.insurancePrice ? ticket.insurancePrice : 0);
|
||||
|
||||
return (
|
||||
<div key={ticket.id} className="bg-white brutal-border p-5 relative group hover:-translate-y-1 hover:shadow-[6px_6px_0_0_#000] transition-all">
|
||||
<h4 className="text-lg font-black text-black uppercase mb-2">
|
||||
{ticket.name}
|
||||
@@ -182,16 +185,51 @@ export default function EventDetail() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="border-t-2 border-dashed border-gray-300 pt-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 mt-4">
|
||||
<div className="text-xl font-display font-black text-black">
|
||||
{ticket.price}
|
||||
<div className="border-t-2 border-dashed border-gray-300 pt-4 mt-4">
|
||||
{ticket.insurancePrice && (
|
||||
<div
|
||||
className="mb-4 flex items-center gap-3 bg-brutal-yellow/30 p-3 brutal-border cursor-pointer hover:bg-brutal-yellow/50 transition-colors"
|
||||
onClick={() => toggleInsurance(ticket.id)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`insurance-${ticket.id}`}
|
||||
checked={hasInsurance}
|
||||
onChange={() => {}}
|
||||
className="w-5 h-5 accent-black brutal-border cursor-pointer"
|
||||
/>
|
||||
<label htmlFor={`insurance-${ticket.id}`} className="text-sm font-bold cursor-pointer select-none text-black">
|
||||
Tambah Asuransi (+ IDR {(ticket.insurancePrice).toLocaleString('id-ID')})
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div className="text-xl font-display font-black text-black">
|
||||
IDR {totalPrice.toLocaleString('id-ID')}
|
||||
</div>
|
||||
<button
|
||||
className="px-6 py-3 bg-brutal-blue text-white font-black text-sm uppercase brutal-btn shrink-0"
|
||||
onClick={() => {
|
||||
navigate('/checkout', {
|
||||
state: {
|
||||
eventId: id,
|
||||
ticketId: ticket.id,
|
||||
ticketName: ticket.name,
|
||||
basePrice: ticket.basePrice,
|
||||
hasInsurance: hasInsurance,
|
||||
insurancePrice: hasInsurance ? ticket.insurancePrice : 0,
|
||||
totalPrice: totalPrice
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
Buy Ticket
|
||||
</button>
|
||||
</div>
|
||||
<button className="px-6 py-3 bg-brutal-blue text-white font-black text-sm uppercase brutal-btn shrink-0">
|
||||
Buy Ticket
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
127
src/pages/Payment.tsx
Normal file
127
src/pages/Payment.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import QRCode from 'react-qr-code';
|
||||
import { ArrowLeft, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
export default function Payment() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const checkoutPayload = location.state?.checkoutPayload;
|
||||
const [transactionId, setTransactionId] = useState('');
|
||||
const [isPaid, setIsPaid] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Generate a mock Xendit Transaction ID when component mounts
|
||||
if (checkoutPayload && !transactionId) {
|
||||
const randomStr = Math.random().toString(36).substring(2, 10).toUpperCase();
|
||||
setTransactionId(`XND-QRIS-${randomStr}`);
|
||||
}
|
||||
}, [checkoutPayload, transactionId]);
|
||||
|
||||
if (!checkoutPayload) {
|
||||
return (
|
||||
<div className="bg-brutal-bg min-h-screen flex items-center justify-center p-4">
|
||||
<div className="bg-white p-8 brutal-border text-center">
|
||||
<p className="font-black text-xl uppercase">Invalid Payment Session</p>
|
||||
<button onClick={() => navigate('/events')} className="mt-4 px-6 py-3 bg-brutal-yellow brutal-border font-black uppercase text-sm inline-block hover:shadow-[4px_4px_0_0_#000] transition-all">
|
||||
Back to Events
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleSimulatePayment = () => {
|
||||
setIsPaid(true);
|
||||
setTimeout(() => {
|
||||
navigate('/events');
|
||||
}, 4000);
|
||||
};
|
||||
|
||||
if (isPaid) {
|
||||
return (
|
||||
<div className="bg-brutal-bg min-h-screen flex items-center justify-center p-4">
|
||||
<div className="bg-white p-12 brutal-border shadow-[12px_12px_0_0_#000] text-center max-w-md w-full animate-in fade-in zoom-in duration-300">
|
||||
<div className="w-20 h-20 bg-brutal-pink brutal-border rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle2 className="w-10 h-10 text-white stroke-[3]" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-display font-black uppercase mb-4 tracking-tight">Payment Success!</h2>
|
||||
<p className="text-sm font-bold text-gray-600 mb-6">Your ticket has been booked successfully. Redirecting...</p>
|
||||
<div className="p-4 bg-brutal-bg brutal-border">
|
||||
<p className="text-xs uppercase font-bold text-gray-500 mb-1">Transaction ID</p>
|
||||
<p className="font-black font-mono">{transactionId}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-brutal-bg min-h-screen pt-24 pb-20">
|
||||
<div className="max-w-[600px] mx-auto px-4">
|
||||
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="inline-flex items-center gap-2 mb-6 text-black font-black uppercase hover:-translate-x-1 transition-transform text-sm"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5 stroke-[3]" />
|
||||
Back to Checkout
|
||||
</button>
|
||||
|
||||
<div className="bg-white brutal-border shadow-[12px_12px_0_0_#000] overflow-hidden">
|
||||
{/* Header Xendit Mock */}
|
||||
<div className="bg-[#121212] text-white p-6 flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">Merchant</p>
|
||||
<h2 className="text-xl font-black tracking-tight">SMART TICKET INC.</h2>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="px-3 py-1 bg-brutal-blue text-white text-xs font-black uppercase brutal-border border-white">QRIS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<div className="text-center mb-8">
|
||||
<p className="text-sm font-bold text-gray-500 uppercase mb-2">Total Amount</p>
|
||||
<h1 className="text-4xl md:text-5xl font-display font-black tracking-tighter">
|
||||
IDR {checkoutPayload.totalPrice.toLocaleString('id-ID')}
|
||||
</h1>
|
||||
<p className="text-xs font-mono font-bold mt-3 text-gray-400">TRX ID: {transactionId}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="p-4 bg-white brutal-border shadow-[8px_8px_0_0_#000]">
|
||||
{transactionId ? (
|
||||
<QRCode
|
||||
value={transactionId}
|
||||
size={200}
|
||||
level="H"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-[200px] h-[200px] bg-gray-100 flex items-center justify-center font-bold text-gray-400">Loading QR...</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-brutal-bg p-4 brutal-border mb-8">
|
||||
<h3 className="font-black uppercase text-sm mb-2">How to pay:</h3>
|
||||
<ol className="list-decimal list-inside text-sm font-bold text-gray-700 space-y-2">
|
||||
<li>Open your payment app (Gopay, OVO, BCA, dll).</li>
|
||||
<li>Scan the QR Code above.</li>
|
||||
<li>Check the details and amount.</li>
|
||||
<li>Enter your PIN to confirm payment.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSimulatePayment}
|
||||
className="w-full py-4 bg-brutal-pink text-black font-black uppercase text-lg hover:bg-pink-400 transition-colors brutal-border hover:shadow-[4px_4px_0_0_#000]"
|
||||
>
|
||||
I Have Paid
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user