Add orders page

apps/api/src/server.ts

@@ -199,8 +199,8 @@ export const app = new Elysia()
     )
 
     // COMMERCE
-    .group("/commerce", (app) => app
-        .group("/products", { auth: true }, (app) => app
+    .group("/commerce", { 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}