problem: can't view products

src/components/PayNow.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Rocket } from 'lucide-svelte';
+	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { ndk } from '@/ndk';
+	import Todo from './Todo.svelte';
+	import { currentUser } from '@/stores/session';
+	import { Terminal } from 'lucide-svelte';
+	import * as Alert from '@/components/ui/alert';
+	import type NDKSvelte from '@nostr-dev-kit/ndk-svelte';
+	import { NDKEvent } from '@nostr-dev-kit/ndk';
+	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
+	import { getRocketURL } from '@/helpers';
+
+    export let product:NDKEvent;
+    export let rocket:NDKEvent;
+
+   
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>Buy Now</Dialog.Trigger>
+	<Dialog.Content class="sm:max-w-[425px]">
+		<Dialog.Header>
+			<Dialog.Title>Buy {product.getMatchingTags("name")[0][1]} from {rocket.dTag} now!</Dialog.Title>
+			{#if !currentUser}
+				<Alert.Root>
+					<Terminal class="h-4 w-4" />
+					<Alert.Title>Heads up!</Alert.Title>
+					<Alert.Description
+						>You need a nostr signing extension to use Nostrocket!</Alert.Description
+					>
+				</Alert.Root>
+			{/if}
+			<Dialog.Description>Pay now with Lightning</Dialog.Description>
+		</Dialog.Header>
+        <Todo text={["generate zap request and get invoice"]} />
+		<Dialog.Footer>
+
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

src/components/ProductCard.svelte

@@ -7,8 +7,9 @@
 	import { getMission, getRocketURL } from '@/helpers';
 	import type { NDKEvent } from '@nostr-dev-kit/ndk';
 	import { ChevronRight } from 'lucide-svelte';
+	import PayNow from './PayNow.svelte';
 
-	export let event: NDKEvent;
+	export let product: NDKEvent;
 	export let rocket:NDKEvent;
 	//$page.url.searchParams.get("tab")
 
@@ -37,18 +38,32 @@
 		}
 		return test == 3;
 	}
+
+	function includedInRocket():boolean {
+		let included = false
+		for (let p of rocket.getMatchingTags("product")) {
+			if (p[1].split(":")[0] == product.id) {
+				included = true
+			}
+		}
+		return included
+	}
 </script>
 
-{#if validate(event)}
+{#if validate(product)}
 	<Card.Root class="w-[350px] m-2">
 		<Card.Header>
-			<Card.Title>{event.getMatchingTags('name')[0][1]}</Card.Title>
-			<Card.Description>{event.getMatchingTags('description')[0][1]}</Card.Description>
+			<Card.Title>{product.getMatchingTags('name')[0][1]}</Card.Title>
+			<Card.Description>{product.getMatchingTags('description')[0][1]}</Card.Description>
 		</Card.Header>
-		<img src={event.getMatchingTags('cover')[0][1]} />
+		<img src={product.getMatchingTags('cover')[0][1]} />
 		<Card.Content></Card.Content>
 		<Card.Footer class="flex justify-between">
-			<AddProductToRocket product={event} {rocket} />
+			{#if !includedInRocket()}
+			<AddProductToRocket product={product} {rocket} />
+			{:else}
+			<PayNow {product} {rocket} />
+			{/if}
 		</Card.Footer>
 	</Card.Root>
 {/if}