Add orders page

apps/api/src/server.ts

@@ -199,8 +199,8 @@ export const app = new Elysia()
     )
 
     // COMMERCE
-    .group("/commerce", (app) => app
+    .group("/commerce", { auth: true }, (app) => app
-        .group("/products", { auth: true }, (app) => app
+        .group("/products", (app) => app
             .group("/sync", (app) => app
                 // Sync status
                 .get("/", async ({ sessionId }) => {
@@ -234,7 +234,19 @@ export const app = new Elysia()
                 return { pProduct, wProduct };
             }, {
                 params: t.Object({ pProductId: t.Numeric() })
-            })))
+            })
+        )
+        .group("/orders", (app) => app
+            .get("/:wOrderId", async ({ params: { wOrderId } }) => {
+                const wOrder = await s.Commerce.Webflow.Orders.get(wOrderId);
+                if (!wOrder) throw new NotFoundError("Missing webflow order");
+
+                const pOrder = await s.Commerce.Printful.Orders.get(`@${wOrder.orderId}`);
+
+                return { wOrder, pOrder };
+            }, { params: t.Object({ wOrderId: t.String() }) })
+        )
+    )
 
     // EVENTS
     .group("/events", { auth: true }, (app) => app

apps/portal/src/routes/(app)/apparel/orders/+page.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { api } from "$lib/api.js";
+    import type { Webflow } from "@blade-and-brawn/commerce";
+
+    const { data } = $props();
+
+    const isOrderSynced = async (wOrder: Webflow.Orders.Order) => {
+        const pOrders = await data.orders.printful;
+        return pOrders.some((pOrder) => pOrder.external_id === wOrder.orderId);
+    };
+</script>
+
+{#await data.orders.webflow}
+    <p>Loading...</p>
+{:then wOrders}
+    <div class="w-full mt-10 overflow-x-auto">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Id</th>
+                    <th>Status</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each wOrders as wOrder}
+                    <tr class="hover:bg-base-300">
+                        <td
+                            ><button
+                                onclick={async () => {
+                                    const res = await api.commerce
+                                        .orders({
+                                            wOrderId: wOrder.orderId,
+                                        })
+                                        .get();
+                                    console.log(res.data);
+                                }}
+                                class="cursor-pointer underline"
+                            >
+                                {wOrder.orderId}
+                            </button></td
+                        >
+                        <td>
+                            {#await isOrderSynced(wOrder) then isSynced}
+                                {#if isSynced}
+                                    <div class="badge badge-success">
+                                        Synced
+                                    </div>
+                                {:else}
+                                    <div class="badge badge-error">
+                                        Desynced
+                                    </div>
+                                {/if}
+                            {/await}
+                        </td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+{:catch error}
+    <p>Something went wrong: {error.message}</p>
+{/await}

packages/commerce/src/printful.ts

@@ -103,6 +103,18 @@ class ProductsClient {
 class OrdersClient {
     constructor(private creds: Credentials) { }
 
+    async get(orderId: number | string): Promise<Printful.Orders.Order | undefined> {
+        const res = await fetch(`${this.creds.apiUrl}/store/orders/${orderId}`, {
+            method: "GET",
+            headers: this.creds.authHeaders,
+        });
+        if (res.status === 429) throw new PrintfulRateLimitError(res.headers.get("Retry-After"), await parsePayload(res));
+        if (res.status === 404 || res.status === 400) return;
+        if (!res.ok) throw new PrintfulError("Failed to get Printful order", res.status, await parsePayload(res));
+        const payload = (await res.json()) as Printful.MetaDataSingle<Printful.Orders.Order>;
+        return payload.result;
+    }
+
     async create(pOrder: Printful.Orders.Order) {
         const res = await fetch(`${this.creds.apiUrl}/orders`, {
             method: "POST",

packages/commerce/src/webflow.ts

@@ -192,6 +192,17 @@ class ProductsClient {
 class OrdersClient {
     constructor(private creds: Credentials) { }
 
+    async get(wOrderId: string): Promise<Webflow.Orders.Order | undefined> {
+        const res = await fetch(`${this.creds.apiSitesUrl}/orders/${wOrderId}`, {
+            method: "GET",
+            headers: this.creds.authHeader,
+        });
+        if (res.status === 429) throw new WebflowRateLimitError(res.headers.get("Retry-After"), await parsePayload(res));
+        if (res.status === 404 || res.status === 400) return;
+        if (!res.ok) throw new WebflowError("Failed to get Webflow order", res.status, await parsePayload(res));
+        return (await res.json()) as Webflow.Orders.Order;
+    }
+
     async list(opt: PagingOptions & { status?: Webflow.Orders.Order["status"] } = {}): Promise<Webflow.Orders.Order[]> {
         const allOrders: Webflow.Orders.Order[] = [];
         let offset = opt.offset ?? 0;