remove item from shop after purchase

src/app/shop/page.tsx

@@ -1,17 +1,19 @@
 "use client";
 import Image from "next/image";
-import { Dispatch, SetStateAction, useCallback, useState, useEffect } from "react";
+import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
-import BottomFooter from "@components/BottomFooter";
 
 import { ExtendedArtefact } from "@appTypes/ApiTypes";
 import { Currency } from "@appTypes/StoreModel";
+import BottomFooter from "@components/BottomFooter";
 import { useStoreState } from "@hooks/store";
 
 // todo hide from shop after purchase
 
 export default function Shop() {
 	const [artefacts, setArtefacts] = useState<ExtendedArtefact[]>([]);
+	const [hiddenArtefactIds, setHiddenArtefactIds] = useState<number[]>([]);
 	const [loading, setLoading] = useState(true);
+	const user = useStoreState((state) => state.user);
 
 	// 3. Fetch from your API route and map data to fit your existing fields
 	useEffect(() => {
@@ -163,10 +165,15 @@ export default function Shop() {
 
 		function handlePay() {
 			setError("");
+			if (email || user?.email) {
 				if (!validateEmail(email)) {
 					setError("Please enter a valid email ending");
 					return;
 				}
+			} else {
+				return;
+			}
+
 			if (!validateCardNumber(cardNumber)) {
 				setError("Card number must be 12-19 digits.");
 				return;
@@ -179,6 +186,9 @@ export default function Shop() {
 				setError("CVC must be 3 or 4 digits.");
 				return;
 			}
+
+			setHiddenArtefactIds((ids) => [...ids, artefact.id]);
+
 			// todo create receiving api route
 			// todo handle sending to api route
 			// todo only ask for email if the user is not signed in
@@ -205,6 +215,7 @@ export default function Shop() {
 							handlePay();
 						}}
 					>
+						{!user ? (
 							<input
 								className="w-full mb-2 px-3 py-2 border rounded"
 								placeholder="Email Address"
@@ -214,6 +225,7 @@ export default function Shop() {
 								required
 								autoFocus
 							/>
+						) : null}
 						<input
 							className="w-full mb-2 px-3 py-2 border rounded"
 							placeholder="Cardholder Name"
@@ -305,11 +317,13 @@ export default function Shop() {
 					Artefact Shop
 				</h1>
 				<p className="text-lg md:text-xl text-center text-white mb-10 drop-shadow-md max-w-2xl">
-					Discover extraordinary artefacts and collectibles from major seismic events from around the world - Previously studied by our scientists, now
+					Discover extraordinary artefacts and collectibles from major seismic events from around the world - Previously studied
-					available for purchase.
+					by our scientists, now available for purchase.
 				</p>
 				<div className="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 p-2">
-					{currentArtefacts.map((artefact) => (
+					{currentArtefacts
+						.filter((x) => !hiddenArtefactIds.includes(x.id))
+						.map((artefact) => (
 							<ArtefactCard key={artefact.id} artefact={artefact} />
 						))}
 				</div>
@@ -354,4 +368,5 @@ export default function Shop() {
 				</div>
 			)}
 		</div>
-);
+	);
+}