Add sync order button

apps/api/src/server.ts

@@ -286,6 +286,20 @@ export const app = new Elysia()
 
                 return { wOrder, pOrder };
             }, { params: t.Object({ wOrderId: t.String() }) })
+            .post("/sync/: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}`);
+                if (pOrder) throw status(409, { error: "Cannot sync an already synced webflow order" });
+
+                await s.Commerce.Apparel.Orders.Queue.enqueue({
+                    type: "apparel_order_create",
+                    source: "portal",
+                    payload: { wOrder }
+                });
+
+            }, { params: t.Object({ wOrderId: t.String() }) })
         )
     )
 

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

@@ -13,6 +13,8 @@
     let loadError = $state<string | null>(null);
     let offset = $state(0);
 
+    let syncingWOrderId = $state<string | null>(null);
+
     function errorMessage(err: unknown): string {
         const value = (err as { value?: { error?: string } })?.value;
         return (
@@ -21,6 +23,19 @@
         );
     }
 
+    async function sync(wOrderId: string) {
+        syncingWOrderId = wOrderId;
+        loadError = null;
+        try {
+            const res = await api.commerce.orders.sync({ wOrderId }).post();
+            if (res.error) throw res.error;
+        } catch (err) {
+            loadError = errorMessage(err);
+        } finally {
+            syncingWOrderId = null;
+        }
+    }
+
     async function refresh() {
         loading = true;
         loadError = null;
@@ -92,6 +107,7 @@
             <tr>
                 <th>Id</th>
                 <th>Status</th>
+                <th>Sync</th>
             </tr>
         </thead>
         <tbody>
@@ -119,10 +135,23 @@
                             <div class="badge badge-error">Desynced</div>
                         {/if}
                     </td>
+                    <td>
+                        {#if !order.isSynced}
+                            <button
+                                disabled={!!syncingWOrderId}
+                                onclick={() => sync(order.wOrder.orderId)}
+                                class="btn btn-primary btn-xs"
+                            >
+                                {syncingWOrderId === order.wOrder.orderId
+                                    ? "Syncing..."
+                                    : "Sync"}
+                            </button>
+                        {/if}
+                    </td>
                 </tr>
             {:else}
                 <tr>
-                    <td colspan="2" class="text-center opacity-60">
+                    <td colspan="3" class="text-center opacity-60">
                         {loading ? "Loading..." : "No orders found"}
                     </td>
                 </tr>