Merge branch 'master' of ssh://stash.dyson.global.corp:7999/~thowitz/tremor-tracker
This commit is contained in:
IZZY
commit
360ca52ed6
@ -189,6 +189,11 @@ const artefacts: Artefact[] = [
|
||||
export default function Shop() {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [selectedArtefact, setSelectedArtefact] = useState<Artefact | null>(null);
|
||||
const [showPaymentModal, setShowPaymentModal] = useState(false);
|
||||
const [artefactToBuy, setArtefactToBuy] = useState<Artefact | null>(null);
|
||||
const [showThankYouModal, setShowThankYouModal] = useState(false);
|
||||
const [orderNumber, setOrderNumber] = useState<string | null>(null);
|
||||
|
||||
const artefactsPerPage = 12;
|
||||
const indexOfLastArtefact = currentPage * artefactsPerPage;
|
||||
const indexOfFirstArtefact = indexOfLastArtefact - artefactsPerPage;
|
||||
@ -198,25 +203,41 @@ export default function Shop() {
|
||||
const conversionRates = useStoreState((state) => state.currency.conversionRates);
|
||||
const currencyTickers = useStoreState((state) => state.currency.tickers);
|
||||
|
||||
const convertPrice = useCallback((price: number, currency: Currency) => (price * conversionRates[currency]).toFixed(2), []);
|
||||
const convertPrice = useCallback(
|
||||
(price: number, currency: Currency) => (price * conversionRates[currency]).toFixed(2),
|
||||
[conversionRates]
|
||||
);
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (indexOfLastArtefact < artefacts.length) {
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}
|
||||
if (indexOfLastArtefact < artefacts.length) setCurrentPage((prev) => prev + 1);
|
||||
};
|
||||
const handlePreviousPage = () => {
|
||||
if (currentPage > 1) {
|
||||
setCurrentPage((prev) => prev - 1);
|
||||
}
|
||||
if (currentPage > 1) setCurrentPage((prev) => prev - 1);
|
||||
};
|
||||
|
||||
function ArtefactCard({ artefact }: { artefact: Artefact }) {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col bg-white shadow-md rounded-md overflow-hidden cursor-pointer hover:scale-105 transition-transform"
|
||||
onClick={() => setSelectedArtefact(artefact)}
|
||||
>
|
||||
<Image src={artefact.image} alt={artefact.name} width={500} height={300} className="w-full h-56 object-cover" />
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold">{artefact.name}</h3>
|
||||
<p className="text-neutral-500 mb-2">{artefact.location}</p>
|
||||
<p className="text-neutral-500 mb-2">{artefact.earthquakeID}</p>
|
||||
<p className="text-black font-bold text-md mt-2">
|
||||
{currencyTickers[selectedCurrency]}
|
||||
{convertPrice(artefact.price, selectedCurrency)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
function Modal({ artefact }: { artefact: Artefact }) {
|
||||
if (!artefact) return null;
|
||||
const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
setSelectedArtefact(null);
|
||||
}
|
||||
const handleOverlayClick = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) setSelectedArtefact(null);
|
||||
};
|
||||
return (
|
||||
<div
|
||||
@ -226,10 +247,10 @@ export default function Shop() {
|
||||
<div className="bg-white rounded-xl shadow-2xl max-w-lg w-full p-6">
|
||||
<h3 className="text-2xl font-bold mb-4">{artefact.name}</h3>
|
||||
<Image
|
||||
height={5000}
|
||||
width={5000}
|
||||
src={artefact.image}
|
||||
alt={artefact.name}
|
||||
width={500}
|
||||
height={300}
|
||||
className="w-full h-64 object-cover rounded-md"
|
||||
/>
|
||||
<p className="text-xl font-bold">
|
||||
@ -243,7 +264,11 @@ export default function Shop() {
|
||||
<p className="text-neutral-500 mb-2">{artefact.dateReleased}</p>
|
||||
<div className="flex justify-end gap-4 mt-4 mr-2">
|
||||
<button
|
||||
onClick={() => alert("Purchased Successfully!")}
|
||||
onClick={() => {
|
||||
setArtefactToBuy(artefact); // Set artefact for payment modal
|
||||
setShowPaymentModal(true); // Show payment modal
|
||||
setSelectedArtefact(null); // Close this modal
|
||||
}}
|
||||
className="px-10 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
||||
>
|
||||
Buy
|
||||
@ -254,26 +279,156 @@ export default function Shop() {
|
||||
);
|
||||
}
|
||||
|
||||
function ArtefactCard({ artefact }: { artefact: Artefact }) {
|
||||
function PaymentModal({ artefact, onClose }: { artefact: Artefact; onClose: () => void }) {
|
||||
const [cardNumber, setCardNumber] = useState("");
|
||||
const [expiry, setExpiry] = useState("");
|
||||
const [cvc, setCvc] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [remember, setRemember] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
function validateEmail(email: string) {
|
||||
return (
|
||||
email.includes("@") &&
|
||||
(email.endsWith(".com") || email.endsWith(".co.uk") || email.endsWith(".org") || email.endsWith(".org.uk"))
|
||||
);
|
||||
}
|
||||
function validateCardNumber(number: string) {
|
||||
return /^\d{12,19}$/.test(number.replace(/\s/g, "")); // 12-19 digits
|
||||
}
|
||||
function validateCVC(number: string) {
|
||||
return /^\d{3,4}$/.test(number);
|
||||
}
|
||||
function validateExpiry(exp: string) {
|
||||
return /^\d{2}\/\d{2}$/.test(exp);
|
||||
}
|
||||
|
||||
function handlePay() {
|
||||
setError("");
|
||||
if (!validateEmail(email)) {
|
||||
setError("Please enter a valid email ending");
|
||||
return;
|
||||
}
|
||||
if (!validateCardNumber(cardNumber)) {
|
||||
setError("Card number must be 12-19 digits.");
|
||||
return;
|
||||
}
|
||||
if (!validateExpiry(expiry)) {
|
||||
setError("Expiry must be in MM/YY format.");
|
||||
return;
|
||||
}
|
||||
if (!validateCVC(cvc)) {
|
||||
setError("CVC must be 3 or 4 digits.");
|
||||
return;
|
||||
}
|
||||
const genOrder = () => "#" + Math.random().toString(36).substring(2, 10).toUpperCase();
|
||||
setOrderNumber(genOrder());
|
||||
onClose();
|
||||
setShowThankYouModal(true);
|
||||
}
|
||||
const handleOverlayClick = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col bg-white shadow-md rounded-md overflow-hidden cursor-pointer hover:scale-105 transition-transform"
|
||||
onClick={() => setSelectedArtefact(artefact)}
|
||||
className="fixed inset-0 bg-neutral-900 bg-opacity-60 flex justify-center items-center z-10"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<img src={artefact.image} alt={artefact.name} className="w-full h-56 object-cover" />
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold">{artefact.name}</h3>
|
||||
<p className="text-neutral-500 mb-2">{artefact.location}</p>
|
||||
<p className="text-neutral-500 mb-2">{artefact.earthquakeID}</p>
|
||||
<p className="text-black font-bold text-md mt-2">
|
||||
{currencyTickers[selectedCurrency]}
|
||||
{convertPrice(artefact.price, selectedCurrency)}
|
||||
</p>
|
||||
<div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
|
||||
<h2 className="text-2xl font-bold mb-4">Buy {artefact.name}</h2>
|
||||
{/* ...Image... */}
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handlePay();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
className="w-full mb-2 px-3 py-2 border rounded"
|
||||
placeholder="Email Address"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
type="email"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
<input
|
||||
className="w-full mb-2 px-3 py-2 border rounded"
|
||||
placeholder="Cardholder Name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="w-full mb-2 px-3 py-2 border rounded"
|
||||
placeholder="Card Number"
|
||||
value={cardNumber}
|
||||
onChange={(e) => setCardNumber(e.target.value.replace(/\D/g, ""))}
|
||||
maxLength={19}
|
||||
required
|
||||
inputMode="numeric"
|
||||
pattern="\d*"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="w-1/2 mb-2 px-3 py-2 border rounded"
|
||||
placeholder="MM/YY"
|
||||
value={expiry}
|
||||
onChange={(e) => setExpiry(e.target.value.replace(/[^0-9/]/g, ""))}
|
||||
maxLength={5}
|
||||
required
|
||||
inputMode="numeric"
|
||||
/>
|
||||
<input
|
||||
className="w-1/2 mb-2 px-3 py-2 border rounded"
|
||||
placeholder="CVC"
|
||||
value={cvc}
|
||||
onChange={(e) => setCvc(e.target.value.replace(/\D/g, ""))}
|
||||
maxLength={4}
|
||||
required
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
<label className="inline-flex items-center mb-4">
|
||||
<input type="checkbox" checked={remember} onChange={() => setRemember((r) => !r)} className="mr-2" />
|
||||
Remember me
|
||||
</label>
|
||||
{error && <p className="text-red-600 mb-2">{error}</p>}
|
||||
<div className="flex justify-end gap-2 mt-2">
|
||||
<button type="button" onClick={onClose} className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md mr-2">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
|
||||
Pay
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ThankYouModal({ orderNumber, onClose }: { orderNumber: string; onClose: () => void }) {
|
||||
const handleOverlayClick = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-neutral-900 bg-opacity-60 flex justify-center items-center z-50"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-8 text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">Thank you for your purchase!</h2>
|
||||
<p className="mb-4">Your order number is:</p>
|
||||
<p className="text-2xl font-mono font-bold mb-6">{orderNumber}</p>
|
||||
<button className="px-8 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" onClick={onClose}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen relative flex flex-col"
|
||||
@ -283,10 +438,8 @@ export default function Shop() {
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
|
||||
<div className="relative z-10 flex flex-col items-center w-full px-2 py-12">
|
||||
{/* Title & Subheading */}
|
||||
<h1 className="text-4xl md:text-4xl font-bold text-center text-white mb-2 tracking-tight drop-shadow-lg">
|
||||
Artefact Shop
|
||||
</h1>
|
||||
@ -294,17 +447,11 @@ export default function Shop() {
|
||||
Discover extraordinary historical artefacts and collectibles from major seismic events from around the world - now
|
||||
available for purchase.
|
||||
</p>
|
||||
|
||||
{/* Artefact Grid */}
|
||||
<div className="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 p-2">
|
||||
{" "}
|
||||
{/* gap-10 for more spacing */}
|
||||
{currentArtefacts.map((artefact) => (
|
||||
<ArtefactCard key={artefact.id} artefact={artefact} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination Footer */}
|
||||
<footer className="mt-10 bg-white bg-opacity-90 border-neutral-300 py-3 text-center flex justify-center items-center w-100 max-w-7xl rounded-lg">
|
||||
<button
|
||||
onClick={handlePreviousPage}
|
||||
@ -327,9 +474,19 @@ export default function Shop() {
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{selectedArtefact && <Modal artefact={selectedArtefact} />}
|
||||
{artefactToBuy && showPaymentModal && (
|
||||
<PaymentModal
|
||||
artefact={artefactToBuy}
|
||||
onClose={() => {
|
||||
setShowPaymentModal(false);
|
||||
setArtefactToBuy(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{showThankYouModal && orderNumber && (
|
||||
<ThankYouModal orderNumber={orderNumber} onClose={() => setShowThankYouModal(false)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user