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}

src/routes/products/+page.svelte

@@ -1,19 +1,51 @@
 <script lang="ts">
-	import { ndk } from "@/ndk";
-	import type { NDKEvent } from "@nostr-dev-kit/ndk";
-	import type { NDKEventStore } from "@nostr-dev-kit/ndk-svelte";
-	import { onDestroy } from "svelte";
+	import { ndk } from '@/ndk';
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';
+	import type { NDKEventStore } from '@nostr-dev-kit/ndk-svelte';
+	import { onDestroy } from 'svelte';
+	import { derived } from 'svelte/store';
+	import Heading from '../../components/Heading.svelte';
+	import ProductCard from '../../components/ProductCard.svelte';
 
-    let entries: NDKEventStore<NDKEvent> | undefined;
+	let rockets: NDKEventStore<NDKEvent> | undefined;
+	let products: NDKEventStore<NDKEvent> | undefined;
 	onDestroy(() => {
-		entries?.unsubscribe();
+		rockets?.unsubscribe();
+		products?.unsubscribe();
 	});
 
-	entries = $ndk.storeSubscribe([{ kinds: [1908 as number] }], { subId: 'products' });
+	rockets = $ndk.storeSubscribe([{ kinds: [31108 as number] }], { subId: 'rockets' });
+	products = $ndk.storeSubscribe([{ kinds: [1908 as number] }], { subId: 'products' });
+
+	let rocketsWithProducts = derived(rockets, ($rockets) => {
+		$rockets = $rockets.filter((r) => {
+			return r.getMatchingTags('product').length > 0;
+		});
+		return $rockets;
+	});
+
+	let productsToRender = derived([rocketsWithProducts, products], ([$rocketsWP, $products]) => {
+		let data = new Map<NDKEvent, NDKEvent[]>();
+		let productMap = new Map($products.map((e) => [e.id, e]));
+		for (let r of $rocketsWP) {
+			let events = [];
+			for (let p of r.getMatchingTags('product')) {
+				let productEvent = productMap.get(p[1].split(':')[0]);
+				if (productEvent) {
+					events.push(productEvent);
+				}
+			}
+			if (events.length > 0) {
+				data.set(r, events);
+			}
+		}
+		return data;
+	});
 </script>
 
-{#if entries && $entries} 
-{#each $entries as e}
-<p>{e.tags}</p>
+{#if productsToRender && $productsToRender}
+	{#each $productsToRender as [r, p]}
+		<Heading title={r.dTag} />
+		{#each p as product} <ProductCard product={product} rocket={r} /> {/each}
 	{/each}
 {/if}

src/routes/rockets/[ignition]/+page.svelte

@@ -86,7 +86,7 @@
     {#if candidateProducts && $candidateProducts}
     <Subheading title="Product Candidates" />
     <CreateNewProduct rocketEvent={$latestRocketEvent} />
-    {#each $candidateProducts as r}<ProductCard rocket={$latestRocketEvent} event={r} />{/each}
+    {#each $candidateProducts as r}<ProductCard rocket={$latestRocketEvent} product={r} />{/each}
     {/if}
 	
 {:else}