@womp/mcp-ui 0.1.4 → 0.1.5

package/src/order/main.ts

@@ -0,0 +1,110 @@
+import { $, createCard, type GenerationResult } from "../shared/bridge";
+
+/**
+ * The order-status card — renders get_print_order (one order) and
+ * list_print_orders ({orders}) with the orders page's own status wording,
+ * colored by band: waiting / moving / done / stopped. A pending diff charge
+ * renders as the amber action strip so a blocked order explains itself.
+ * Read-only: no tool calls, no links out beyond what the model narrates.
+ */
+
+interface OrderSummary {
+  orderId: number;
+  status: string;
+  totalCost: number;
+  discount: number;
+  items: { title: string; materialName: string; quantity: number }[];
+  tracking: { carrier: string; trackingNumber: string }[];
+  actionRequired?: { type: string; amount: number };
+}
+
+interface OrderPayload {
+  orders?: OrderSummary[];
+  orderId?: number;
+}
+
+const usd = (n: number) => `$${n.toFixed(2)}`;
+
+/** The orders page's label set, mapped to a color band. */
+function chipClass(status: string): string {
+  const s = status.toLowerCase();
+  if (s.includes("pending") || s.includes("review") || s.includes("action")) return "wait";
+  if (s.includes("printing") || s.includes("processing") || s.includes("way") || s.includes("returning"))
+    return "move";
+  if (s.includes("delivered")) return "done";
+  if (s.includes("canceled")) return "stop";
+  return "";
+}
+
+function orderBlock(order: OrderSummary): HTMLElement {
+  const block = document.createElement("div");
+  block.className = "order";
+
+  const head = document.createElement("div");
+  head.className = "order-head";
+  const id = document.createElement("div");
+  id.className = "order-id";
+  id.textContent = `Order #${order.orderId}`;
+  const chip = document.createElement("span");
+  chip.className = `chip ${chipClass(order.status)}`.trim();
+  chip.textContent = order.status;
+  head.append(id, chip);
+  block.append(head);
+
+  const lines = document.createElement("div");
+  lines.className = "lines";
+  (order.items || []).forEach((item) => {
+    const line = document.createElement("div");
+    line.textContent = `${item.quantity}x ${item.title} (${item.materialName})`;
+    lines.append(line);
+  });
+  block.append(lines);
+
+  const total = document.createElement("div");
+  total.className = "total-row";
+  const label = document.createElement("span");
+  label.textContent = order.discount > 0 ? `Total (after ${usd(order.discount)} discount)` : "Total";
+  const value = document.createElement("b");
+  value.textContent = usd(order.totalCost);
+  total.append(label, value);
+  block.append(total);
+
+  (order.tracking || []).forEach((t) => {
+    const track = document.createElement("div");
+    track.className = "tracking";
+    track.textContent = `Tracking: ${t.carrier ? `${t.carrier} ` : ""}${t.trackingNumber}`;
+    block.append(track);
+  });
+
+  if (order.actionRequired) {
+    const action = document.createElement("div");
+    action.className = "action";
+    action.textContent =
+      `Action required: the measured piece costs ${usd(order.actionRequired.amount)} more than quoted. ` +
+      `Approve the adjustment on womp.com under Profile -> Orders to unblock production.`;
+    block.append(action);
+  }
+
+  return block;
+}
+
+function render(data: OrderPayload) {
+  // list_print_orders sends {orders}; get_print_order sends one order flat.
+  const orders: OrderSummary[] = data.orders ?? (data.orderId ? [data as unknown as OrderSummary] : []);
+  const list = $("orders");
+  list.textContent = "";
+  orders.forEach((order) => list.append(orderBlock(order)));
+  $("empty").hidden = orders.length > 0;
+  $("status").textContent = "";
+}
+
+createCard("Womp orders", {
+  onResult: (raw: GenerationResult) => {
+    const data = raw as OrderPayload & GenerationResult;
+    if (data.status === "running") {
+      $("status").textContent = "Loading…";
+      return;
+    }
+    render(data);
+  },
+});

package/src/print/index.html

@@ -181,7 +181,7 @@
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
           <path d="M7 17 17 7M9 7h8v8" />
         </svg>
-        <span id="order-label">Continue on womp.com</span>
+        <span id="order-label">Add to cart</span>
       </button>
       <div class="note" id="note" hidden>
         Shipping is added at checkout; the final price is confirmed before printing.

package/src/print/main.ts

@@ -10,10 +10,12 @@ import { $, callTool, createCard, openLink, type GenerationResult } from "../sha
  * the tool with them: the host announces the call's arguments (`ontoolinput`)
  * before any result exists, and the controls initialize from that.
  *
- * Deliberately NO payment surface: "Continue on womp.com" calls
- * `prepare_print` (creates a free project) and opens the returned URL via
- * `ui/open-link` — address, shipping and payment all run in the browser flow
- * with every gate the web app already has.
+ * Deliberately NO payment surface: "Add to cart" calls the app-callable
+ * `add_to_cart` (creates a free project + a real cart item), and the button
+ * then becomes "Checkout on womp.com" — a `ui/open-link` to the cart checkout
+ * at /pay/<ids>, where address, shipping, promo codes and payment all run in
+ * the one existing cart UI. Turning any knob after an add resets the button
+ * to "Add to cart" so the checkout link always matches the shown settings.
  *
  * Static mode: a result that already carries `printUrl` (the model called
  * prepare_print directly) renders as a receipt — no controls, the button just
@@ -56,6 +58,8 @@ const orderBtn = $("order") as HTMLButtonElement;
 /** The mesh being quoted, and whether the card is a receipt or a configurator. */
 let source: { generationId?: number; glbUrl?: string } | undefined;
 let staticPrintUrl: string | undefined;
+/** Set once the shown settings are in the cart; cleared by any knob turn. */
+let cartCheckoutUrl = "";
 /** Monotonic guard: a slow older quote must never overwrite a newer one. */
 let quoteSeq = 0;
 let debounceTimer: number | undefined;
@@ -176,6 +180,10 @@ function scheduleRequote() {
   // Same idea as the web print panel's debounce: a slider being dragged must
   // not fire an engine estimate per pixel.
   if (debounceTimer !== undefined) clearTimeout(debounceTimer);
+  // The settings changed: whatever was added to the cart no longer matches
+  // what the card shows, so the button goes back to adding.
+  cartCheckoutUrl = "";
+  $("order-label").textContent = "Add to cart";
   debounceTimer = window.setTimeout(() => void requote(), 600);
 }
 
@@ -223,30 +231,33 @@ orderBtn.addEventListener("click", async () => {
     void openLink(card.app, staticPrintUrl);
     return;
   }
+  if (cartCheckoutUrl) {
+    void openLink(card.app, cartCheckoutUrl);
+    return;
+  }
   if (!source) return;
   orderBtn.disabled = true;
-  $("order-label").textContent = "Setting up project…";
+  $("order-label").textContent = "Adding to cart…";
   setStatus("");
   try {
-    const res = await callTool(card.app, "prepare_print", currentSettings());
-    const data = (res.structuredContent || {}) as PrintQuoteResult;
-    if (res.isError || !data.printUrl) {
-      const text = (res.content as any[])?.find((c) => c.type === "text")?.text || "Could not set up the print.";
+    const res = await callTool(card.app, "add_to_cart", currentSettings());
+    const data = (res.structuredContent || {}) as { payUrl?: string; items?: unknown[]; subtotal?: number };
+    if (res.isError || !data.payUrl) {
+      const text = (res.content as any[])?.find((c) => c.type === "text")?.text || "Could not add to the cart.";
       setStatus(String(text), true);
+      $("order-label").textContent = "Add to cart";
       return;
     }
-    // From here on the card is a receipt for the project that now exists —
-    // silently re-quoting a project the user is already checking out would
-    // desynchronize the two.
-    staticPrintUrl = data.printUrl;
-    $("controls").hidden = true;
-    renderQuote(data);
-    $("order-label").textContent = "Complete order on womp.com";
-    void openLink(card.app, data.printUrl);
+    cartCheckoutUrl = data.payUrl;
+    $("order-label").textContent = "Checkout on womp.com";
+    setStatus(
+      `Added — cart has ${data.items?.length ?? 1} item(s), subtotal $${(data.subtotal ?? 0).toFixed(2)}. ` +
+        `Shipping and promo codes apply at checkout.`,
+    );
   } catch {
-    setStatus("Could not set up the print — try again.", true);
+    setStatus("Could not add to the cart — try again.", true);
+    $("order-label").textContent = "Add to cart";
   } finally {
     orderBtn.disabled = false;
-    if (!staticPrintUrl) $("order-label").textContent = "Continue on womp.com";
   }
 });