hooking up commerce

src/routes/commerce/+page.server.ts

@@ -0,0 +1,31 @@
+import { Printful } from '$lib/services/commerce/printful';
+import { Webflow } from '$lib/services/commerce/webflow';
+import type { PageServerLoad } from './$types';
+
+const productsStore = {
+	cache: {
+		printful: undefined as Printful.Products.SyncProduct["sync_product"][] | undefined,
+		webflow: undefined as Webflow.Products.Product[] | undefined,
+	},
+	getPrintfulProducts: async () => {
+		if (!productsStore.cache.printful) {
+			productsStore.cache.printful = await Printful.Products.getAll()
+		}
+		return productsStore.cache.printful;
+	},
+	getWebflowProducts: async () => {
+		if (!productsStore.cache.webflow) {
+			productsStore.cache.webflow = await Webflow.Products.getAll()
+		}
+		return productsStore.cache.webflow;
+	}
+};
+
+export const load = async ({ }: Parameters<PageServerLoad>[0]) => {
+	return {
+		products: {
+			printful: productsStore.getPrintfulProducts(),
+			webflow: productsStore.getWebflowProducts(),
+		}
+	};
+};

src/routes/commerce/+page.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Printful } from "$lib/services/commerce/printful.js";
+
+	const { data } = $props();
+
+	let isSyncing = $state(false);
+
+	const isPrintfulProductSynced = async (
+		printfulProduct: Printful.Products.SyncProduct["sync_product"],
+	) => {
+		const webflowProducts = await data.products.webflow;
+		return webflowProducts.some(
+			(p) => p.id === printfulProduct.external_id,
+		);
+	};
+
+	const syncProducts = async () => {
+		isSyncing = true;
+		await fetch(`http://localhost:5173/api/products/sync`, {
+			method: "POST",
+		});
+		isSyncing = false;
+	};
+</script>
+
+{#await data.products.printful}
+	<p>Loading...</p>
+{:then printfulProducts}
+	{#if isSyncing}
+		<p>Syncing...</p>
+	{:else}
+		<button onclick={() => syncProducts()} class="btn btn-lg">sync</button>
+		<div class="w-full overflow-x-auto">
+			<table class="table">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Synced</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each printfulProducts as printfulProduct}
+						<tr class="hover:bg-base-300">
+							<td>{printfulProduct.name}</td>
+							<td>
+								{#await isPrintfulProductSynced(printfulProduct) then isSynced}
+									<div
+										class="badge {isSynced
+											? 'badge-success'
+											: 'badge-error'}"
+									>
+										{isSynced ? "Synced" : "Desynced"}
+									</div>
+								{/await}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+{:catch error}
+	<p>Something went wrong: {error.message}</p>
+{/await}