@fluid-app/portal-sdk 0.1.405 → 0.1.406

package/dist/{OrdersScreen-BOxI7p-f.cjs → OrdersScreen-BlNndMxv.cjs}

@@ -203,6 +203,7 @@ function mapToPortalTenantOrder(raw) {
 		token: raw.token ?? "",
 		order_number: typeof rawOrderNumber === "string" && rawOrderNumber.length > 0 ? rawOrderNumber : null,
 		status: raw.status ?? "pending",
+		fulfillment_status: typeof raw.fulfillment_status === "string" ? raw.fulfillment_status : "unfulfilled",
 		subtotal,
 		subtotal_in_currency: raw.subtotal_in_currency ?? subtotal,
 		discount,
@@ -359,127 +360,226 @@ function OrdersTranslationBridge({ children }) {
 	});
 }
 //#endregion
-//#region src/screens/orders/portal-orders-list-helpers.ts
-const STATUS_LOOKUP = {
-	fulfilled: {
-		kind: "fulfilled",
-		labelKey: "status_fulfilled"
-	},
-	completed: {
-		kind: "fulfilled",
-		labelKey: "status_fulfilled"
-	},
-	partially_fulfilled: {
-		kind: "preparing",
-		labelKey: "status_preparing"
-	},
-	in_progress: {
-		kind: "preparing",
-		labelKey: "status_preparing"
-	},
-	on_hold: {
-		kind: "preparing",
-		labelKey: "status_preparing"
-	},
-	scheduled: {
-		kind: "preparing",
-		labelKey: "status_preparing"
-	},
-	preparing: {
-		kind: "preparing",
-		labelKey: "status_preparing"
-	},
-	shipped: {
-		kind: "shipped",
-		labelKey: "status_shipped"
-	},
-	cancelled: { kind: "cancelled" },
-	returned: { kind: "cancelled" },
-	refunded: { kind: "cancelled" },
-	pending: {
-		kind: "pending",
-		labelKey: "status_processing"
-	},
-	unfulfilled: {
-		kind: "pending",
-		labelKey: "status_processing"
-	},
-	processing: {
-		kind: "pending",
-		labelKey: "status_processing"
-	}
+//#region ../../orders/ui/src/components/status-badge.tsx
+const colorStyles = {
+	green: "bg-green-500/15 text-foreground",
+	yellow: "bg-yellow-500/15 text-foreground",
+	red: "bg-red-500/15 text-foreground",
+	blue: "bg-blue-500/15 text-foreground",
+	orange: "bg-orange-500/15 text-foreground",
+	gray: "bg-foreground/10 text-foreground"
 };
-/**
-* Map a raw status string (typically `fulfillment_status`) from the BFF
-* onto our internal status vocabulary (`StatusKind`). Aliases are folded
-* together (`unfulfilled` → `pending`, `in_progress`/`scheduled` →
-* `preparing`, etc.). Unknown statuses pass through with `kind: "pending"`
-* and the raw label capitalized — never synthesize a colored pill that
-* pretends to be real status data.
-*/
-function mapStatus(orderStatus, t) {
-	const entry = STATUS_LOOKUP[(orderStatus || "").toLowerCase()];
-	const rawLabel = orderStatus ? orderStatus.charAt(0).toUpperCase() + orderStatus.slice(1) : "—";
-	if (!entry) return {
-		kind: "pending",
-		label: rawLabel
-	};
-	return {
-		kind: entry.kind,
-		label: entry.labelKey ? t(entry.labelKey) : rawLabel
-	};
-}
-const STATUS_STYLES = {
-	fulfilled: {
-		bg: "bg-emerald-50 dark:bg-emerald-950/40",
-		text: "text-emerald-700 dark:text-emerald-400",
-		dot: "bg-emerald-500"
-	},
-	shipped: {
-		bg: "bg-sky-50 dark:bg-sky-950/40",
-		text: "text-sky-700 dark:text-sky-400",
-		dot: "bg-sky-500"
-	},
-	preparing: {
-		bg: "bg-amber-50 dark:bg-amber-950/40",
-		text: "text-amber-700 dark:text-amber-400",
-		dot: "bg-amber-500"
-	},
-	pending: {
-		bg: "bg-muted",
-		text: "text-muted-foreground",
-		dot: "bg-muted-foreground"
-	},
-	cancelled: {
-		bg: "bg-destructive/10",
-		text: "text-destructive",
-		dot: "bg-destructive"
-	}
+const dotColorStyles = {
+	green: "bg-green-500",
+	yellow: "bg-yellow-500",
+	red: "bg-red-500",
+	blue: "bg-blue-500",
+	orange: "bg-orange-500",
+	gray: "bg-gray-500"
 };
-const CANCELLED_FAMILY = new Set([
+const sizeStyles = {
+	xs: "px-1.5 py-0.5 text-[10px]",
+	sm: "px-2 py-0.5 text-xs",
+	md: "px-2.5 py-1 text-sm"
+};
+function StatusBadge({ color, dot, size = "md", className, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_src.cn("inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap capitalize", colorStyles[color], sizeStyles[size], className),
+		children: [dot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_src.cn("h-1.5 w-1.5 rounded-full", dotColorStyles[color]) }), children]
+	});
+}
+//#endregion
+//#region ../../orders/ui/src/lib/format.ts
+function startCase(str) {
+	if (!str) return "";
+	return str.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+}
+//#endregion
+//#region ../../orders/ui/src/lib/translate-status.ts
+/** Status values that have a `status_*` translation key in the orders dictionary. */
+const translatableStatuses = new Set([
 	"cancelled",
+	"completed",
+	"fulfilled",
+	"pending",
+	"preparing",
+	"processing",
 	"returned",
-	"refunded"
+	"shipped"
 ]);
 /**
+* Translate an order status using the orders `t()` function.
+* Falls back to `startCase` for statuses without a dedicated translation key.
+*/
+function translateStatus(t, status) {
+	if (translatableStatuses.has(status)) return t(`status_${status}`);
+	return startCase(status);
+}
+//#endregion
+//#region ../../orders/ui/src/lib/effective-order-date.ts
+function effectiveOrderDate(order) {
+	return order.sale_date ?? order.created_at;
+}
+//#endregion
+//#region ../../orders/ui/src/lib/fulfillment-status.ts
+/**
+* Canonical fulfillment-status → badge color mapping.
+*
+* This is a deliberate mirror of fluid-admin's fulfillment color config
+* (`COLOR_CONFIG.fulfillment` + `getDefaultColorForUnknownStatus` in
+* `apps/fluid-admin/components/Orders/utils/formatters.ts`) so the
+* customer-facing portal renders order status tags with the SAME label
+* and color as the admin — admin is the source of truth (CURRENT-1496).
+*
+* The `Commerce::Order#fulfillment_status` enum values are:
+* `unfulfilled, in_progress, on_hold, partially_fulfilled, scheduled,
+* fulfilled`.
+*/
+const FULFILLMENT_STATUS_COLORS = {
+	fulfilled: "gray",
+	unfulfilled: "yellow",
+	in_progress: "yellow",
+	on_hold: "orange",
+	partially_fulfilled: "yellow",
+	scheduled: "blue",
+	processing: "yellow"
+};
+/**
+* Cancelled-family lifecycle values. These come from `order_status` (not
+* `fulfillment_status`), and the portal orders list surfaces them on the
+* same pill. Admin renders these red, so we match.
+*/
+const CANCELLED_FAMILY_COLORS = {
+	cancelled: "red",
+	returned: "red",
+	refunded: "red"
+};
+/**
+* Fallback for statuses not in the explicit maps. Mirrors admin's
+* `getDefaultColorForUnknownStatus` for the fulfillment type so unknown
+* values still read consistently with admin rather than defaulting to a
+* meaningless grey.
+*/
+function defaultColor(status) {
+	if (status.includes("fulfilled") || status.includes("complete")) return "gray";
+	if (status.includes("hold")) return "orange";
+	return "yellow";
+}
+/**
+* Cancelled-family lifecycle values, derived from the color map so there is
+* a single source of truth. Membership is checked case-insensitively.
+*/
+const CANCELLED_FAMILY = new Set(Object.keys(CANCELLED_FAMILY_COLORS));
+/**
+* Resolve which status string should drive an order's pill. Cancelled-family
+* lifecycle values (`cancelled` / `returned` / `refunded`) come from the
+* order's lifecycle status; everything else reads off `fulfillment_status`
+* (the source of truth per `Commerce::Order#fulfillment_status`).
+*
+* Both the orders list and the order detail page use this so a cancelled
+* order renders red "Cancelled" instead of a misleading yellow "Unfulfilled"
+* — `fulfillment_status` has no cancelled-family value, so a cancelled order
+* typically carries `fulfillment_status: "unfulfilled"` (CURRENT-1496).
+*
+* lifecycleStatus   - the order's lifecycle status (`order_status` on a list
+*                     order, `status` on a portal-tenant detail order).
+* fulfillmentStatus - the order's `fulfillment_status`.
+*/
+function resolveOrderStatus(lifecycleStatus, fulfillmentStatus) {
+	if (lifecycleStatus && CANCELLED_FAMILY.has(lifecycleStatus.toLowerCase())) return lifecycleStatus;
+	return fulfillmentStatus ?? lifecycleStatus ?? "";
+}
+/**
+* Resolve the badge color for an order status tag, matching admin exactly
+* for every `fulfillment_status` enum value and the cancelled family.
+*/
+function fulfillmentStatusColor(status) {
+	if (!status) return "gray";
+	const normalized = status.toLowerCase();
+	return FULFILLMENT_STATUS_COLORS[normalized] ?? CANCELLED_FAMILY_COLORS[normalized] ?? defaultColor(normalized);
+}
+//#endregion
+//#region ../../orders/ui/src/components/fulfillment-status-badge.tsx
+/**
+* Renders an order status tag whose label and color match the fluid-admin
+* fulfillment pill exactly (CURRENT-1496). Admin is the source of truth:
+* `fulfilled` is grey, `unfulfilled`/`in_progress`/`partially_fulfilled`
+* are yellow, `on_hold` is orange, and `scheduled` is blue. Labels come
+* from `translateStatus`, which yields the same start-cased text admin
+* shows (`getStatusDisplayText`) while preserving the translated
+* `status_fulfilled` copy where available.
+*/
+function FulfillmentStatusBadge({ status, className }) {
+	const { t } = useOrdersTranslation();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
+		color: fulfillmentStatusColor(status),
+		dot: true,
+		size: "sm",
+		className,
+		children: translateStatus(t, status)
+	});
+}
+//#endregion
+//#region ../../orders/ui/src/components/static-map.tsx
+function StaticMap({ apiKey, address, options, alt, className }) {
+	const { t } = useOrdersTranslation();
+	const [errored, setErrored] = (0, react.useState)(false);
+	const url = buildStaticMapUrl(apiKey, address, options);
+	if (!url || errored) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: url,
+		alt: alt ?? t("shipping_address_map"),
+		width: options?.width ?? 600,
+		height: options?.height ?? 300,
+		className: className ?? "border-border w-full rounded border object-cover shadow-xs",
+		onError: () => setErrored(true)
+	});
+}
+//#endregion
+//#region src/screens/orders/portal-orders-list-helpers.ts
+const STATUS_KIND_LOOKUP = {
+	fulfilled: "fulfilled",
+	completed: "fulfilled",
+	shipped: "shipped",
+	partially_fulfilled: "preparing",
+	in_progress: "preparing",
+	on_hold: "preparing",
+	scheduled: "preparing",
+	preparing: "preparing",
+	cancelled: "cancelled",
+	returned: "cancelled",
+	refunded: "cancelled",
+	pending: "pending",
+	unfulfilled: "pending",
+	processing: "pending"
+};
+/**
+* Classify a raw status string onto the internal `StatusKind` vocabulary
+* used to drive the filter tabs. This is intentionally coarser than the
+* rendered pill — the pill's label and color come from
+* `FulfillmentStatusBadge`. Unknown statuses fall back to `pending`.
+*/
+function statusKind(orderStatus) {
+	return STATUS_KIND_LOOKUP[(orderStatus || "").toLowerCase()] ?? "pending";
+}
+/**
 * Pick the right status string to drive the pill / filter for a list order.
 * Cancelled-family lifecycle states come from `order_status`; everything
 * else is read off `fulfillment_status` (the BFF source-of-truth per the
-* `Commerce::Order#fulfillment_status` enum).
+* `Commerce::Order#fulfillment_status` enum). Delegates to the shared
+* `resolveOrderStatus` so the list and the order detail page stay in lockstep.
 */
 function statusForOrder(order) {
-	if (CANCELLED_FAMILY.has(order.order_status)) return order.order_status;
-	return order.fulfillment_status ?? order.order_status;
+	return resolveOrderStatus(order.order_status, order.fulfillment_status);
 }
 function filterPredicate(filter, order) {
 	if (filter === "all") return true;
 	if (filter === "subscription") return order.subscription != null;
-	const status = mapStatus(statusForOrder(order), identity).kind;
-	if (filter === "fulfilled") return status === "fulfilled" || status === "shipped";
-	if (filter === "preparing") return status === "preparing" || status === "pending";
+	const kind = statusKind(statusForOrder(order));
+	if (filter === "fulfilled") return kind === "fulfilled" || kind === "shipped";
+	if (filter === "preparing") return kind === "preparing" || kind === "pending";
 	return true;
 }
-const identity = ((k) => k);
 function countByFilter(list) {
 	return {
 		all: list.length,
@@ -728,7 +828,6 @@ function FilterPills({ active, counts, onChange, t }) {
 	});
 }
 function OrderRow({ order, onClick, t }) {
-	const status = mapStatus(statusForOrder(order), t);
 	const dateLabel = formatFriendlyDate(orderDisplayDate(order), t);
 	const total = formatOrderTotal(order);
 	const titleText = order.first_item?.title || `${t("order_number")}${order.order_number}`;
@@ -752,7 +851,7 @@ function OrderRow({ order, onClick, t }) {
 							className: "text-muted-foreground font-medium",
 							children: titleSuffix
 						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, { status })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FulfillmentStatusBadge, { status: statusForOrder(order) })]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "text-muted-foreground mt-1 truncate text-xs",
@@ -808,13 +907,6 @@ function SubscriptionBadge({ t }) {
 		})
 	});
 }
-function StatusPill({ status }) {
-	const styles = STATUS_STYLES[status.kind];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: `inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold ${styles.bg} ${styles.text}`,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `size-1.5 rounded-full ${styles.dot}` }), status.label]
-	});
-}
 function OrdersListSkeleton() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: Array(4).fill(0).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `flex items-center gap-3 px-4 py-3.5 ${i < 3 ? "border-border border-b" : ""}`,
@@ -957,107 +1049,6 @@ function MaskedPaymentLabel({ label, className }) {
 	});
 }
 //#endregion
-//#region ../../orders/ui/src/components/status-badge.tsx
-const colorStyles = {
-	green: "bg-green-500/15 text-foreground",
-	yellow: "bg-yellow-500/15 text-foreground",
-	red: "bg-red-500/15 text-foreground",
-	blue: "bg-blue-500/15 text-foreground",
-	gray: "bg-foreground/10 text-foreground"
-};
-const dotColorStyles = {
-	green: "bg-green-500",
-	yellow: "bg-yellow-500",
-	red: "bg-red-500",
-	blue: "bg-blue-500",
-	gray: "bg-gray-500"
-};
-const sizeStyles = {
-	xs: "px-1.5 py-0.5 text-[10px]",
-	sm: "px-2 py-0.5 text-xs",
-	md: "px-2.5 py-1 text-sm"
-};
-function StatusBadge({ color, dot, size = "md", className, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: require_src.cn("inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap capitalize", colorStyles[color], sizeStyles[size], className),
-		children: [dot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_src.cn("h-1.5 w-1.5 rounded-full", dotColorStyles[color]) }), children]
-	});
-}
-//#endregion
-//#region ../../orders/ui/src/lib/format.ts
-function startCase(str) {
-	if (!str) return "";
-	return str.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
-}
-//#endregion
-//#region ../../orders/ui/src/lib/translate-status.ts
-/** Status values that have a `status_*` translation key in the orders dictionary. */
-const translatableStatuses = new Set([
-	"cancelled",
-	"completed",
-	"fulfilled",
-	"pending",
-	"preparing",
-	"processing",
-	"returned",
-	"shipped"
-]);
-/**
-* Translate an order status using the orders `t()` function.
-* Falls back to `startCase` for statuses without a dedicated translation key.
-*/
-function translateStatus(t, status) {
-	if (translatableStatuses.has(status)) return t(`status_${status}`);
-	return startCase(status);
-}
-//#endregion
-//#region ../../orders/ui/src/components/order-status-badge.tsx
-const statusColorMap = {
-	paid: "green",
-	fulfilled: "green",
-	delivered: "green",
-	complete: "green",
-	pending: "yellow",
-	unfulfilled: "yellow",
-	partially_fulfilled: "yellow",
-	processing: "yellow",
-	refunded: "red",
-	cancelled: "red",
-	failed: "red",
-	voided: "red"
-};
-function OrderStatusBadge({ status, className }) {
-	const { t } = useOrdersTranslation();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
-		color: statusColorMap[status] ?? "gray",
-		dot: true,
-		size: "sm",
-		className,
-		children: translateStatus(t, status)
-	});
-}
-//#endregion
-//#region ../../orders/ui/src/components/static-map.tsx
-function StaticMap({ apiKey, address, options, alt, className }) {
-	const { t } = useOrdersTranslation();
-	const [errored, setErrored] = (0, react.useState)(false);
-	const url = buildStaticMapUrl(apiKey, address, options);
-	if (!url || errored) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: url,
-		alt: alt ?? t("shipping_address_map"),
-		width: options?.width ?? 600,
-		height: options?.height ?? 300,
-		className: className ?? "border-border w-full rounded border object-cover shadow-xs",
-		onError: () => setErrored(true)
-	});
-}
-//#endregion
-//#region ../../orders/ui/src/lib/effective-order-date.ts
-function effectiveOrderDate(order) {
-	return order.sale_date ?? order.created_at;
-}
-//#endregion
 //#region ../../orders/ui/src/components/portal-order-detail.tsx
 /** Capitalize the first letter for display in headings / sentence-leading copy. */
 const capitalize = (value) => value.charAt(0).toUpperCase() + value.slice(1);
@@ -1441,7 +1432,7 @@ function DetailsSection({ order, googleMapsApiKey }) {
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "text-muted-foreground text-sm",
 								children: t("status_label")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderStatusBadge, { status: order.status })]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FulfillmentStatusBadge, { status: resolveOrderStatus(order.status, order.fulfillment_status) })]
 						})
 					})
 				}),
@@ -1664,4 +1655,4 @@ Object.defineProperty(exports, "ordersScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=OrdersScreen-BOxI7p-f.cjs.map
+//# sourceMappingURL=OrdersScreen-BlNndMxv.cjs.map