From 662c1cb0d4137812b52bed43822e66a27a60468e Mon Sep 17 00:00:00 2001
From: Emily Neighbour <emily.neighbour@dyson.com>
Date: Mon, 19 May 2025 13:32:20 +0100
Subject: [PATCH] modal pop-up's when buying

---
 src/app/shop/page.tsx | 229 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 193 insertions(+), 36 deletions(-)

diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index c8b7088..3665e94 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -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>
 	);
 }