@womp/mcp-ui 0.1.19 → 0.1.21

package/src/openai-order/main.ts

@@ -0,0 +1,137 @@
+import { $, createCard, openExternal, type GenerationResult } from "../shared/bridge";
+
+/**
+ * The order card: what `get_order_status` answers on the OpenAI MCP (swan-backend
+ * docs/OPENAI_MCP.md) when the user asks where their camera is. The order's
+ * step on a Paid → Printing → Shipped → Delivered tracker, when it should
+ * arrive, and a button to its status page on the web.
+ *
+ * The server found the order by the ChatGPT user's checkout links, and a link
+ * can be forwarded, so what arrives says nothing that reaches the buyer: no
+ * name, city or money. Track opens the order's status page — the masked view
+ * its emails link — and is all the card does.
+ */
+
+type Step = "paid" | "printing" | "shipped" | "delivered" | "canceled";
+
+interface OrderView {
+  id: number;
+  statusLabel: string;
+  step: Step;
+  placedAt: string;
+  items: { title: string; summary: string; quantity: number; swatches: { shell: string[]; button: string[] } }[];
+  /** Each stage's date, done or expected (ISO); null when it won't arrive (canceled, returning) or can't be dated. */
+  timeline: { deliveredAt: string } | null;
+  statusUrl: string | null;
+}
+
+interface Payload {
+  /** Absent when nothing is paid for yet, or the number asked for isn't theirs. */
+  order?: OrderView;
+  orders: { id: number }[];
+}
+
+const TRACKER: Step[] = ["paid", "printing", "shipped", "delivered"];
+
+/** The order number the model asked for, if any: the empty state names it. */
+let askedFor: number | undefined;
+let order: OrderView | undefined;
+
+const setStatus = (text: string) => {
+  $("status").textContent = text;
+};
+
+/** One colour fills; two or three run top to bottom, as on the shell. */
+const paint = (colors: string[]) => (colors.length > 1 ? `linear-gradient(180deg, ${colors.join(", ")})` : colors[0] || "transparent");
+
+/**
+ * "Nov 4". The server dates the stages in calendar days at UTC midnight, so
+ * they are read in UTC: in the user's own zone, west of it, they would be a
+ * day early.
+ */
+function day(iso: string) {
+  const date = new Date(iso);
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    timeZone: "UTC",
+    ...(date.getUTCFullYear() !== new Date().getUTCFullYear() ? { year: "numeric" } : {}),
+  });
+}
+
+/** "womp.com" from the link, so the button names where it goes on every environment. */
+function host(url: string) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return "the web";
+  }
+}
+
+function renderEmpty() {
+  $("head").hidden = false;
+  $("thumb").style.background = "";
+  $("cap").removeAttribute("style");
+  $("title").textContent = askedFor !== undefined ? `No order #${askedFor} here` : "No order yet";
+  $("line").textContent = "Orders paid for from this chat's checkout links show up here.";
+  $("tracker").hidden = true;
+  $("track").hidden = true;
+  setStatus("");
+}
+
+function render(o: OrderView) {
+  const item = o.items[0];
+  $("thumb").style.background = item ? paint(item.swatches.shell) : "";
+  if (item) $("cap").style.background = paint(item.swatches.button);
+  else $("cap").removeAttribute("style");
+
+  $("title").textContent = o.step === "printing" ? "Printing now" : o.statusLabel;
+  const when =
+    o.step === "canceled" || !o.timeline
+      ? ""
+      : o.step === "delivered"
+        ? ` · Delivered ${day(o.timeline.deliveredAt)}`
+        : ` · Arrives around ${day(o.timeline.deliveredAt)}`;
+  $("line").textContent = `Order #${o.id}${when}`;
+  $("head").hidden = false;
+
+  // A canceled order has no place on the way to the door.
+  const reached = TRACKER.indexOf(o.step);
+  $("tracker").hidden = reached < 0;
+  for (const li of Array.from($("tracker").children) as HTMLElement[]) {
+    const at = TRACKER.indexOf(li.dataset.step as Step);
+    li.classList.toggle("done", at <= reached);
+    li.classList.toggle("now", at === reached);
+    if (at === reached) li.setAttribute("aria-current", "step");
+    else li.removeAttribute("aria-current");
+  }
+
+  const track = $("track") as HTMLButtonElement;
+  track.hidden = !o.statusUrl;
+  if (o.statusUrl) track.textContent = `Track on ${host(o.statusUrl)} ↗`;
+  setStatus("");
+}
+
+const card = createCard("Order", {
+  onInput: (args) => {
+    askedFor = typeof args.orderId === "number" ? args.orderId : undefined;
+    setStatus("Checking your order…");
+  },
+  onResult: (raw: GenerationResult) => {
+    const data = raw as unknown as Partial<Payload>;
+    // The bridge also calls this with a bare { status: "running" } placeholder.
+    if (!Array.isArray(data.orders)) return;
+    order = data.order;
+    if (order) render(order);
+    else renderEmpty();
+  },
+});
+
+$("track").addEventListener("click", async () => {
+  if (!order?.statusUrl) return;
+  try {
+    await openExternal(card.app, order.statusUrl);
+  } catch {
+    setStatus("Couldn't open it here. Ask in the chat for the order's status page.");
+  }
+});