@burdenoff/microfe-coolandlovely 2026.1024.2 → 2026.1024.4

package/dist/coolandlovely/pages/collections/CollectionDetailPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Collection Detail Page
+ * @module coolandlovely/pages/collections
+ *
+ * Single collection (`cooCollection`) with publish (`cooPublishCollection`),
+ * edit, its brand link and member items.
+ */
+export declare function CollectionDetailPage(): import("react").JSX.Element;
+//# sourceMappingURL=CollectionDetailPage.d.ts.map

package/dist/coolandlovely/pages/collections/CollectionDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/collections/CollectionDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqBH,wBAAgB,oBAAoB,gCAkPnC"}

package/dist/coolandlovely/pages/collections/CollectionFormPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Collection Create / Edit Page
+ * @module coolandlovely/pages/collections
+ *
+ * Drives `cooCreateCollection` (new) and `cooUpdateCollection` (edit).
+ * Brand selection is required on create and locked on edit.
+ */
+export declare function CollectionFormPage(): import("react").JSX.Element;
+//# sourceMappingURL=CollectionFormPage.d.ts.map

package/dist/coolandlovely/pages/collections/CollectionFormPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionFormPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/collections/CollectionFormPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqDH,wBAAgB,kBAAkB,gCA6OjC"}

package/dist/coolandlovely/pages/collections/CollectionsListPage.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Collections List Page
+ * @module coolandlovely/pages/collections
+ *
+ * Lists seasonal collections (`cooListCollections`) with status filter.
+ */
+export declare function CollectionsListPage(): import("react").JSX.Element;
+//# sourceMappingURL=CollectionsListPage.d.ts.map

package/dist/coolandlovely/pages/collections/CollectionsListPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionsListPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/collections/CollectionsListPage.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAmBH,wBAAgB,mBAAmB,gCA2FlC"}

package/dist/coolandlovely/pages/commerce/CartPage.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Cart Page (BOFF-3370)
+ * @module coolandlovely/pages/commerce
+ *
+ * The shopper's cart (`cooMyCart`), quantity edits, and checkout. Checkout snapshots the cart
+ * into an order (`cooCheckout`), then the shopper pays through the provider global-billing
+ * chose; the order is only marked paid once the backend re-reads billing's record.
+ */
+export declare function CartPage(): import("react").JSX.Element;
+//# sourceMappingURL=CartPage.d.ts.map

package/dist/coolandlovely/pages/commerce/CartPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/commerce/CartPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AA0BH,wBAAgB,QAAQ,gCAgRvB"}

package/dist/coolandlovely/pages/commerce/CartPage.js

@@ -0,0 +1,283 @@
+import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { useTr as n } from "../../hooks/useTr.js";
+import "../../hooks/index.js";
+import { ErrorView as r, LoadingView as i } from "../../components/StateViews.js";
+import { Thumbnail as a } from "../../components/Thumbnail.js";
+import { formatPrice as o } from "../../utils/formatters.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { TextAreaField as c, TextField as l } from "../../components/Field.js";
+import { PayForOrder as u } from "../../components/PayForOrder.js";
+import { useCheckout as d, useMyCart as f, useRemoveCartItem as p, useSyncOrderPayment as m, useUpdateCartItem as h } from "../../hooks/useCommerceApi.js";
+import { useState as g } from "react";
+import { ArrowLeft as _, Loader2 as v, Minus as y, Plus as b, ShoppingBag as x, Sparkles as S, Trash2 as C } from "lucide-react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { GlassCard as E } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/commerce/CartPage.tsx
+var D = 10;
+function O() {
+	let O = n(), { navigateTo: k } = e(), A = f(), j = h(), M = p(), N = d(), P = m(), [F, I] = g(""), [L, R] = g(""), [z, B] = g(""), [V, H] = g(null), U = O("coolandlovely.cart.title", "Your cart");
+	if (A.isLoading) return /* @__PURE__ */ w(t, {
+		title: U,
+		children: /* @__PURE__ */ w(i, { label: O("coolandlovely.cart.loading", "Loading your cart…") })
+	});
+	if (A.isError || !A.data) return /* @__PURE__ */ w(t, {
+		title: U,
+		children: /* @__PURE__ */ w(r, { onRetry: () => void A.refetch() })
+	});
+	if (V) return /* @__PURE__ */ w(t, {
+		title: O("coolandlovely.checkout.payTitle", "Pay for your order"),
+		description: V.order.orderNumber,
+		children: /* @__PURE__ */ w("div", {
+			className: "mx-auto max-w-lg space-y-4",
+			children: /* @__PURE__ */ T(E, {
+				treatment: "glass",
+				className: "space-y-4 p-6",
+				children: [
+					/* @__PURE__ */ T("dl", {
+						className: "space-y-2 text-sm",
+						children: [
+							/* @__PURE__ */ T("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ w("dt", {
+									className: "text-text-secondary",
+									children: O("coolandlovely.checkout.subtotal", "Subtotal")
+								}), /* @__PURE__ */ w("dd", {
+									className: "tabular-nums text-text-primary",
+									children: o(V.subtotal, V.currency)
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ w("dt", {
+									className: "text-text-secondary",
+									children: O("coolandlovely.checkout.tax", "Tax")
+								}), /* @__PURE__ */ w("dd", {
+									className: "tabular-nums text-text-primary",
+									children: o(V.taxAmount, V.currency)
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "flex justify-between border-t border-border-seam pt-2 text-base font-semibold",
+								children: [/* @__PURE__ */ w("dt", {
+									className: "text-text-primary",
+									children: O("coolandlovely.checkout.total", "Total")
+								}), /* @__PURE__ */ w("dd", {
+									className: "tabular-nums text-text-primary",
+									"data-testid": "checkout-total",
+									children: o(V.total, V.currency)
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ w(u, {
+						checkout: V,
+						onSettle: async () => {
+							await P.mutateAsync(V.order.id).catch(() => void 0), k(`/orders/${V.order.id}`);
+						}
+					}),
+					/* @__PURE__ */ w("button", {
+						type: "button",
+						onClick: () => k(`/orders/${V.order.id}`),
+						className: "w-full text-center text-sm font-medium text-text-secondary hover:underline",
+						children: O("coolandlovely.checkout.payLater", "Pay later from My Orders")
+					})
+				]
+			})
+		})
+	});
+	let W = A.data, G = j.isPending || M.isPending, K = W.canCheckout && F.trim() !== "" && L.trim() !== "";
+	return /* @__PURE__ */ w(t, {
+		title: U,
+		description: O("coolandlovely.cart.description", "Pieces you are about to buy."),
+		actions: /* @__PURE__ */ T("button", {
+			type: "button",
+			onClick: () => k("/items"),
+			className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
+			children: [
+				/* @__PURE__ */ w(_, { className: "h-4 w-4" }),
+				" ",
+				O("coolandlovely.cart.keepShopping", "Keep shopping")
+			]
+		}),
+		children: W.items.length === 0 ? /* @__PURE__ */ w(s, {
+			icon: /* @__PURE__ */ w(x, { className: "h-8 w-8" }),
+			title: O("coolandlovely.cart.emptyTitle", "Your cart is empty"),
+			description: O("coolandlovely.cart.emptyDescription", "Add pieces from the catalogue or from a look."),
+			action: /* @__PURE__ */ w("button", {
+				type: "button",
+				onClick: () => k("/items"),
+				className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
+				children: O("coolandlovely.cart.browse", "Browse pieces")
+			})
+		}) : /* @__PURE__ */ T("div", {
+			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+			children: [/* @__PURE__ */ T("div", {
+				className: "space-y-3 lg:col-span-2",
+				"data-testid": "cart-lines",
+				children: [W.items.map((e) => /* @__PURE__ */ T(E, {
+					treatment: "plain",
+					className: "flex items-center gap-4 p-4",
+					children: [
+						/* @__PURE__ */ w(a, {
+							icon: /* @__PURE__ */ w(x, { className: "h-5 w-5" }),
+							seed: e.styleItemId,
+							fileId: e.styleItem?.image?.id,
+							alt: e.styleItem?.name ?? "",
+							className: "h-16 w-16 shrink-0"
+						}),
+						/* @__PURE__ */ T("div", {
+							className: "min-w-0 flex-1",
+							children: [
+								/* @__PURE__ */ w("button", {
+									type: "button",
+									onClick: () => k(`/items/${e.styleItemId}`),
+									className: "truncate text-left text-sm font-medium text-text-primary hover:underline",
+									children: e.styleItem?.name ?? O("coolandlovely.cart.unknownPiece", "Catalogue piece")
+								}),
+								/* @__PURE__ */ w("p", {
+									className: "truncate text-xs text-text-secondary",
+									children: [
+										e.styleItem?.brand?.name,
+										e.size,
+										e.colour
+									].filter(Boolean).join(" · ")
+								}),
+								e.lookId && /* @__PURE__ */ T("p", {
+									className: "mt-0.5 inline-flex items-center gap-1 text-xs text-accent-primary",
+									children: [
+										/* @__PURE__ */ w(S, { className: "h-3 w-3" }),
+										" ",
+										O("coolandlovely.cart.fromLook", "From a look")
+									]
+								}),
+								!e.isPurchasable && /* @__PURE__ */ w("p", {
+									className: "mt-0.5 text-xs text-status-error-text",
+									children: O("coolandlovely.cart.unavailable", "No longer available")
+								})
+							]
+						}),
+						/* @__PURE__ */ T("div", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ w("button", {
+									type: "button",
+									"aria-label": O("coolandlovely.cart.decrease", "Decrease quantity"),
+									disabled: G,
+									onClick: () => j.mutate({
+										id: e.id,
+										quantity: e.quantity - 1
+									}),
+									className: "rounded-md border border-border-seam p-1.5 text-text-primary hover:bg-bg-sunken disabled:opacity-50",
+									children: /* @__PURE__ */ w(y, { className: "h-3.5 w-3.5" })
+								}),
+								/* @__PURE__ */ w("span", {
+									className: "w-6 text-center text-sm tabular-nums text-text-primary",
+									"data-testid": "cart-line-quantity",
+									children: e.quantity
+								}),
+								/* @__PURE__ */ w("button", {
+									type: "button",
+									"aria-label": O("coolandlovely.cart.increase", "Increase quantity"),
+									disabled: G || e.quantity >= D,
+									onClick: () => j.mutate({
+										id: e.id,
+										quantity: e.quantity + 1
+									}),
+									className: "rounded-md border border-border-seam p-1.5 text-text-primary hover:bg-bg-sunken disabled:opacity-50",
+									children: /* @__PURE__ */ w(b, { className: "h-3.5 w-3.5" })
+								})
+							]
+						}),
+						/* @__PURE__ */ w("p", {
+							className: "w-24 text-right text-sm font-semibold tabular-nums text-text-primary",
+							children: o(e.lineTotal, e.currency)
+						}),
+						/* @__PURE__ */ w("button", {
+							type: "button",
+							"aria-label": O("coolandlovely.cart.remove", "Remove from cart"),
+							disabled: G,
+							onClick: () => M.mutate({ id: e.id }),
+							className: "rounded-md p-1.5 text-status-error-text hover:bg-status-error-bg-subtle disabled:opacity-50",
+							children: /* @__PURE__ */ w(C, { className: "h-4 w-4" })
+						})
+					]
+				}, e.id)), (j.error || M.error) && /* @__PURE__ */ w("p", {
+					className: "text-sm text-status-error-text",
+					children: (j.error ?? M.error)?.message
+				})]
+			}), /* @__PURE__ */ T(E, {
+				treatment: "glass",
+				className: "h-fit space-y-4 p-6",
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: "flex items-baseline justify-between",
+						children: [/* @__PURE__ */ w("span", {
+							className: "text-sm text-text-secondary",
+							children: O("coolandlovely.cart.subtotalItems", "Subtotal ({{count}} items)", { count: W.itemCount })
+						}), /* @__PURE__ */ w("span", {
+							className: "text-xl font-bold tabular-nums text-text-primary",
+							"data-testid": "cart-subtotal",
+							children: o(W.subtotal, W.currency ?? "USD")
+						})]
+					}),
+					/* @__PURE__ */ w("p", {
+						className: "text-xs text-text-secondary",
+						children: O("coolandlovely.cart.taxNote", "Tax is calculated when you place the order.")
+					}),
+					W.blockedReason && /* @__PURE__ */ w("p", {
+						className: "text-sm text-status-error-text",
+						children: W.blockedReason
+					}),
+					/* @__PURE__ */ T("div", {
+						className: "space-y-3 border-t border-border-seam pt-4",
+						children: [
+							/* @__PURE__ */ w(l, {
+								id: "coo-shipping-name",
+								label: O("coolandlovely.checkout.shippingName", "Full name"),
+								value: F,
+								onChange: I,
+								required: !0
+							}),
+							/* @__PURE__ */ w(c, {
+								id: "coo-shipping-address",
+								label: O("coolandlovely.checkout.shippingAddress", "Shipping address"),
+								value: L,
+								onChange: R,
+								rows: 3,
+								required: !0
+							}),
+							/* @__PURE__ */ w(l, {
+								id: "coo-buyer-note",
+								label: O("coolandlovely.checkout.note", "Note for the brand (optional)"),
+								value: z,
+								onChange: B
+							})
+						]
+					}),
+					N.error && /* @__PURE__ */ w("p", {
+						className: "text-sm text-status-error-text",
+						children: N.error.message
+					}),
+					/* @__PURE__ */ T("button", {
+						type: "button",
+						disabled: !K || N.isPending,
+						onClick: () => {
+							N.mutate({
+								shippingName: F.trim(),
+								shippingAddress: L.trim(),
+								buyerNote: z.trim() || null
+							}, { onSuccess: (e) => H(e) });
+						},
+						className: "inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
+						children: [N.isPending && /* @__PURE__ */ w(v, { className: "h-4 w-4 animate-spin" }), O("coolandlovely.checkout.placeOrder", "Place order")]
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { O as CartPage };
+
+//# sourceMappingURL=CartPage.js.map

package/dist/coolandlovely/pages/commerce/CartPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/commerce/CartPage.tsx"],"sourcesContent":["/**\n * Cart Page (BOFF-3370)\n * @module coolandlovely/pages/commerce\n *\n * The shopper's cart (`cooMyCart`), quantity edits, and checkout. Checkout snapshots the cart\n * into an order (`cooCheckout`), then the shopper pays through the provider global-billing\n * chose; the order is only marked paid once the backend re-reads billing's record.\n */\n\nimport { useState } from 'react';\nimport { ArrowLeft, Loader2, Minus, Plus, ShoppingBag, Sparkles, Trash2 } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\nimport { EmptyState } from '../../components/EmptyState';\nimport { TextAreaField, TextField } from '../../components/Field';\nimport { PageLayout } from '../../components/PageLayout';\nimport { PayForOrder } from '../../components/PayForOrder';\nimport { ErrorView, LoadingView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useTr } from '../../hooks';\nimport {\n  useCheckout,\n  useMyCart,\n  useRemoveCartItem,\n  useSyncOrderPayment,\n  useUpdateCartItem,\n} from '../../hooks/useCommerceApi';\nimport type { CooOrderCheckout } from '../../types';\nimport { formatPrice } from '../../utils/formatters';\n\nconst MAX_QUANTITY = 10;\n\nexport function CartPage() {\n  const tr = useTr();\n  const { navigateTo } = useCoolAndLovely();\n  const cart = useMyCart();\n  const updateItem = useUpdateCartItem();\n  const removeItem = useRemoveCartItem();\n  const checkout = useCheckout();\n  const sync = useSyncOrderPayment();\n\n  const [shippingName, setShippingName] = useState('');\n  const [shippingAddress, setShippingAddress] = useState('');\n  const [buyerNote, setBuyerNote] = useState('');\n  const [session, setSession] = useState<CooOrderCheckout | null>(null);\n\n  const title = tr('coolandlovely.cart.title', 'Your cart');\n\n  if (cart.isLoading) {\n    return (\n      <PageLayout title={title}>\n        <LoadingView label={tr('coolandlovely.cart.loading', 'Loading your cart…')} />\n      </PageLayout>\n    );\n  }\n  if (cart.isError || !cart.data) {\n    return (\n      <PageLayout title={title}>\n        <ErrorView onRetry={() => void cart.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  // After checkout: the order exists, the cart is empty, and the shopper pays.\n  if (session) {\n    const settle = async () => {\n      await sync.mutateAsync(session.order.id).catch(() => undefined);\n      navigateTo(`/orders/${session.order.id}`);\n    };\n    return (\n      <PageLayout\n        title={tr('coolandlovely.checkout.payTitle', 'Pay for your order')}\n        description={session.order.orderNumber}\n      >\n        <div className=\"mx-auto max-w-lg space-y-4\">\n          <GlassCard treatment=\"glass\" className=\"space-y-4 p-6\">\n            <dl className=\"space-y-2 text-sm\">\n              <div className=\"flex justify-between\">\n                <dt className=\"text-text-secondary\">\n                  {tr('coolandlovely.checkout.subtotal', 'Subtotal')}\n                </dt>\n                <dd className=\"tabular-nums text-text-primary\">\n                  {formatPrice(session.subtotal, session.currency)}\n                </dd>\n              </div>\n              <div className=\"flex justify-between\">\n                <dt className=\"text-text-secondary\">{tr('coolandlovely.checkout.tax', 'Tax')}</dt>\n                <dd className=\"tabular-nums text-text-primary\">\n                  {formatPrice(session.taxAmount, session.currency)}\n                </dd>\n              </div>\n              <div className=\"flex justify-between border-t border-border-seam pt-2 text-base font-semibold\">\n                <dt className=\"text-text-primary\">{tr('coolandlovely.checkout.total', 'Total')}</dt>\n                <dd className=\"tabular-nums text-text-primary\" data-testid=\"checkout-total\">\n                  {formatPrice(session.total, session.currency)}\n                </dd>\n              </div>\n            </dl>\n            <PayForOrder checkout={session} onSettle={settle} />\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/orders/${session.order.id}`)}\n              className=\"w-full text-center text-sm font-medium text-text-secondary hover:underline\"\n            >\n              {tr('coolandlovely.checkout.payLater', 'Pay later from My Orders')}\n            </button>\n          </GlassCard>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const data = cart.data;\n  const busy = updateItem.isPending || removeItem.isPending;\n  const canSubmit = data.canCheckout && shippingName.trim() !== '' && shippingAddress.trim() !== '';\n\n  const submit = () => {\n    checkout.mutate(\n      {\n        shippingName: shippingName.trim(),\n        shippingAddress: shippingAddress.trim(),\n        buyerNote: buyerNote.trim() || null,\n      },\n      { onSuccess: (result) => setSession(result) }\n    );\n  };\n\n  return (\n    <PageLayout\n      title={title}\n      description={tr('coolandlovely.cart.description', 'Pieces you are about to buy.')}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/items')}\n          className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" /> {tr('coolandlovely.cart.keepShopping', 'Keep shopping')}\n        </button>\n      }\n    >\n      {data.items.length === 0 ? (\n        <EmptyState\n          icon={<ShoppingBag className=\"h-8 w-8\" />}\n          title={tr('coolandlovely.cart.emptyTitle', 'Your cart is empty')}\n          description={tr(\n            'coolandlovely.cart.emptyDescription',\n            'Add pieces from the catalogue or from a look.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/items')}\n              className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n            >\n              {tr('coolandlovely.cart.browse', 'Browse pieces')}\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n          <div className=\"space-y-3 lg:col-span-2\" data-testid=\"cart-lines\">\n            {data.items.map((line) => (\n              <GlassCard key={line.id} treatment=\"plain\" className=\"flex items-center gap-4 p-4\">\n                <Thumbnail\n                  icon={<ShoppingBag className=\"h-5 w-5\" />}\n                  seed={line.styleItemId}\n                  fileId={line.styleItem?.image?.id}\n                  alt={line.styleItem?.name ?? ''}\n                  className=\"h-16 w-16 shrink-0\"\n                />\n                <div className=\"min-w-0 flex-1\">\n                  <button\n                    type=\"button\"\n                    onClick={() => navigateTo(`/items/${line.styleItemId}`)}\n                    className=\"truncate text-left text-sm font-medium text-text-primary hover:underline\"\n                  >\n                    {line.styleItem?.name ??\n                      tr('coolandlovely.cart.unknownPiece', 'Catalogue piece')}\n                  </button>\n                  <p className=\"truncate text-xs text-text-secondary\">\n                    {[line.styleItem?.brand?.name, line.size, line.colour]\n                      .filter(Boolean)\n                      .join(' · ')}\n                  </p>\n                  {line.lookId && (\n                    <p className=\"mt-0.5 inline-flex items-center gap-1 text-xs text-accent-primary\">\n                      <Sparkles className=\"h-3 w-3\" />{' '}\n                      {tr('coolandlovely.cart.fromLook', 'From a look')}\n                    </p>\n                  )}\n                  {!line.isPurchasable && (\n                    <p className=\"mt-0.5 text-xs text-status-error-text\">\n                      {tr('coolandlovely.cart.unavailable', 'No longer available')}\n                    </p>\n                  )}\n                </div>\n                <div className=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    aria-label={tr('coolandlovely.cart.decrease', 'Decrease quantity')}\n                    disabled={busy}\n                    onClick={() => updateItem.mutate({ id: line.id, quantity: line.quantity - 1 })}\n                    className=\"rounded-md border border-border-seam p-1.5 text-text-primary hover:bg-bg-sunken disabled:opacity-50\"\n                  >\n                    <Minus className=\"h-3.5 w-3.5\" />\n                  </button>\n                  <span\n                    className=\"w-6 text-center text-sm tabular-nums text-text-primary\"\n                    data-testid=\"cart-line-quantity\"\n                  >\n                    {line.quantity}\n                  </span>\n                  <button\n                    type=\"button\"\n                    aria-label={tr('coolandlovely.cart.increase', 'Increase quantity')}\n                    disabled={busy || line.quantity >= MAX_QUANTITY}\n                    onClick={() => updateItem.mutate({ id: line.id, quantity: line.quantity + 1 })}\n                    className=\"rounded-md border border-border-seam p-1.5 text-text-primary hover:bg-bg-sunken disabled:opacity-50\"\n                  >\n                    <Plus className=\"h-3.5 w-3.5\" />\n                  </button>\n                </div>\n                <p className=\"w-24 text-right text-sm font-semibold tabular-nums text-text-primary\">\n                  {formatPrice(line.lineTotal, line.currency)}\n                </p>\n                <button\n                  type=\"button\"\n                  aria-label={tr('coolandlovely.cart.remove', 'Remove from cart')}\n                  disabled={busy}\n                  onClick={() => removeItem.mutate({ id: line.id })}\n                  className=\"rounded-md p-1.5 text-status-error-text hover:bg-status-error-bg-subtle disabled:opacity-50\"\n                >\n                  <Trash2 className=\"h-4 w-4\" />\n                </button>\n              </GlassCard>\n            ))}\n            {(updateItem.error || removeItem.error) && (\n              <p className=\"text-sm text-status-error-text\">\n                {(updateItem.error ?? removeItem.error)?.message}\n              </p>\n            )}\n          </div>\n\n          <GlassCard treatment=\"glass\" className=\"h-fit space-y-4 p-6\">\n            <div className=\"flex items-baseline justify-between\">\n              <span className=\"text-sm text-text-secondary\">\n                {tr('coolandlovely.cart.subtotalItems', 'Subtotal ({{count}} items)', {\n                  count: data.itemCount,\n                })}\n              </span>\n              <span\n                className=\"text-xl font-bold tabular-nums text-text-primary\"\n                data-testid=\"cart-subtotal\"\n              >\n                {formatPrice(data.subtotal, data.currency ?? 'USD')}\n              </span>\n            </div>\n            <p className=\"text-xs text-text-secondary\">\n              {tr('coolandlovely.cart.taxNote', 'Tax is calculated when you place the order.')}\n            </p>\n            {data.blockedReason && (\n              <p className=\"text-sm text-status-error-text\">{data.blockedReason}</p>\n            )}\n            <div className=\"space-y-3 border-t border-border-seam pt-4\">\n              <TextField\n                id=\"coo-shipping-name\"\n                label={tr('coolandlovely.checkout.shippingName', 'Full name')}\n                value={shippingName}\n                onChange={setShippingName}\n                required\n              />\n              <TextAreaField\n                id=\"coo-shipping-address\"\n                label={tr('coolandlovely.checkout.shippingAddress', 'Shipping address')}\n                value={shippingAddress}\n                onChange={setShippingAddress}\n                rows={3}\n                required\n              />\n              <TextField\n                id=\"coo-buyer-note\"\n                label={tr('coolandlovely.checkout.note', 'Note for the brand (optional)')}\n                value={buyerNote}\n                onChange={setBuyerNote}\n              />\n            </div>\n            {checkout.error && (\n              <p className=\"text-sm text-status-error-text\">{checkout.error.message}</p>\n            )}\n            <button\n              type=\"button\"\n              disabled={!canSubmit || checkout.isPending}\n              onClick={submit}\n              className=\"inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {checkout.isPending && <Loader2 className=\"h-4 w-4 animate-spin\" />}\n              {tr('coolandlovely.checkout.placeOrder', 'Place order')}\n            </button>\n          </GlassCard>\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/commerce/CreatorEarningsPage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Creator Earnings Page (BOFF-3370)
+ * @module coolandlovely/pages/commerce
+ *
+ * A creator's look commissions: every piece bought from one of their published looks earns
+ * them a commission once the order is paid. Balances come from global-billing's earnings
+ * ledger (`cooMyCreatorEarningsSummary`); a creator can ask for a payout of the available
+ * balance (`cooRequestCreatorPayout`), which billing queues for payout review.
+ */
+export declare function CreatorEarningsPage(): import("react").JSX.Element;
+//# sourceMappingURL=CreatorEarningsPage.d.ts.map

package/dist/coolandlovely/pages/commerce/CreatorEarningsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreatorEarningsPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/commerce/CreatorEarningsPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAoBH,wBAAgB,mBAAmB,gCAsLlC"}

package/dist/coolandlovely/pages/commerce/CreatorEarningsPage.js

@@ -0,0 +1,185 @@
+import { PageLayout as e } from "../../components/PageLayout.js";
+import { MetricsCard as t } from "../../components/MetricsCard.js";
+import { useTr as n } from "../../hooks/useTr.js";
+import "../../hooks/index.js";
+import { StatusBadge as r } from "../../components/StatusBadge.js";
+import { ErrorView as i, LoadingView as a } from "../../components/StateViews.js";
+import { formatDate as o, formatPrice as s } from "../../utils/formatters.js";
+import { EmptyState as c } from "../../components/EmptyState.js";
+import { TextField as l } from "../../components/Field.js";
+import { useMyCreatorEarnings as u, useMyCreatorEarningsSummary as d, useRequestCreatorPayout as f } from "../../hooks/useCommerceApi.js";
+import { useState as p } from "react";
+import { Loader2 as m, Wallet as h } from "lucide-react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { GlassCard as v } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/commerce/CreatorEarningsPage.tsx
+function y() {
+	let y = n(), b = d(), x = u(), S = f(), [C, w] = p(""), T = y("coolandlovely.earnings.title", "Creator earnings");
+	if (b.isLoading || x.isLoading) return /* @__PURE__ */ g(e, {
+		title: T,
+		children: /* @__PURE__ */ g(a, {})
+	});
+	if (b.isError || x.isError || !b.data || !x.data) return /* @__PURE__ */ g(e, {
+		title: T,
+		children: /* @__PURE__ */ g(i, { onRetry: () => {
+			b.refetch(), x.refetch();
+		} })
+	});
+	let E = b.data, D = E.currency ?? "USD", O = Number(C), k = E.currency !== null && O > 0 && O <= E.availableAmount;
+	return /* @__PURE__ */ _(e, {
+		title: T,
+		description: y("coolandlovely.earnings.description", "You earn {{rate}}% of every piece bought from your looks. Commissions become available {{days}} days after payment.", {
+			rate: Math.round(E.commissionRate * 100),
+			days: E.holdDays
+		}),
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				"data-testid": "earnings-summary",
+				children: [
+					/* @__PURE__ */ g(t, {
+						icon: /* @__PURE__ */ g(h, { className: "h-5 w-5" }),
+						label: y("coolandlovely.earnings.available", "Available"),
+						value: s(E.availableAmount, D)
+					}),
+					/* @__PURE__ */ g(t, {
+						icon: /* @__PURE__ */ g(h, { className: "h-5 w-5" }),
+						label: y("coolandlovely.earnings.pending", "In return window"),
+						value: s(E.pendingAmount, D)
+					}),
+					/* @__PURE__ */ g(t, {
+						icon: /* @__PURE__ */ g(h, { className: "h-5 w-5" }),
+						label: y("coolandlovely.earnings.reserved", "Payout requested"),
+						value: s(E.reservedAmount, D)
+					}),
+					/* @__PURE__ */ g(t, {
+						icon: /* @__PURE__ */ g(h, { className: "h-5 w-5" }),
+						label: y("coolandlovely.earnings.paid", "Paid out"),
+						value: s(E.paidAmount, D)
+					})
+				]
+			}),
+			!E.billingAvailable && /* @__PURE__ */ g("p", {
+				className: "mt-3 text-sm text-status-warning-text",
+				children: y("coolandlovely.earnings.billingUnavailable", "Balances could not be confirmed with billing just now; the figures above come from your commission history.")
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ _("section", {
+					className: "lg:col-span-2",
+					children: [/* @__PURE__ */ g("h3", {
+						className: "mb-3 text-lg font-semibold text-text-primary",
+						children: y("coolandlovely.earnings.history", "Commission history")
+					}), x.data.items.length === 0 ? /* @__PURE__ */ g(c, {
+						icon: /* @__PURE__ */ g(h, { className: "h-8 w-8" }),
+						title: y("coolandlovely.earnings.emptyTitle", "No commissions yet"),
+						description: y("coolandlovely.earnings.emptyDescription", "Publish looks with catalogue pieces. When someone buys from your look, the commission shows up here.")
+					}) : /* @__PURE__ */ g("div", {
+						className: "overflow-x-auto rounded-xl border border-border-seam",
+						children: /* @__PURE__ */ _("table", {
+							className: "w-full text-sm",
+							children: [/* @__PURE__ */ g("thead", {
+								className: "bg-bg-sunken text-left text-xs uppercase tracking-wide text-text-secondary",
+								children: /* @__PURE__ */ _("tr", { children: [
+									/* @__PURE__ */ g("th", {
+										className: "px-4 py-2",
+										children: y("coolandlovely.earnings.order", "Order")
+									}),
+									/* @__PURE__ */ g("th", {
+										className: "px-4 py-2 text-right",
+										children: y("coolandlovely.earnings.sale", "Sale")
+									}),
+									/* @__PURE__ */ g("th", {
+										className: "px-4 py-2 text-right",
+										children: y("coolandlovely.earnings.commission", "Commission")
+									}),
+									/* @__PURE__ */ g("th", {
+										className: "px-4 py-2",
+										children: y("coolandlovely.earnings.availableOn", "Available on")
+									}),
+									/* @__PURE__ */ g("th", {
+										className: "px-4 py-2",
+										children: y("coolandlovely.earnings.ledger", "Ledger")
+									})
+								] })
+							}), /* @__PURE__ */ g("tbody", { children: x.data.items.map((e) => /* @__PURE__ */ _("tr", {
+								className: "border-t border-border-seam",
+								children: [
+									/* @__PURE__ */ g("td", {
+										className: "px-4 py-2 font-mono text-text-primary",
+										children: e.orderNumber ?? "—"
+									}),
+									/* @__PURE__ */ g("td", {
+										className: "px-4 py-2 text-right tabular-nums text-text-secondary",
+										children: s(e.saleAmount, e.currency)
+									}),
+									/* @__PURE__ */ g("td", {
+										className: "px-4 py-2 text-right font-semibold tabular-nums text-text-primary",
+										children: s(e.amount, e.currency)
+									}),
+									/* @__PURE__ */ g("td", {
+										className: "px-4 py-2 text-text-secondary",
+										children: o(e.availableAt, {
+											hour: void 0,
+											minute: void 0
+										})
+									}),
+									/* @__PURE__ */ g("td", {
+										className: "px-4 py-2",
+										children: /* @__PURE__ */ g(r, { status: e.billingSyncStatus })
+									})
+								]
+							}, e.id)) })]
+						})
+					})]
+				}), /* @__PURE__ */ _(v, {
+					treatment: "glass",
+					className: "h-fit space-y-4 p-6",
+					children: [
+						/* @__PURE__ */ g("h3", {
+							className: "text-base font-semibold text-text-primary",
+							children: y("coolandlovely.earnings.requestTitle", "Request a payout")
+						}),
+						/* @__PURE__ */ g("p", {
+							className: "text-sm text-text-secondary",
+							children: y("coolandlovely.earnings.requestHint", "Payouts are reviewed by the platform and sent to the payout account on your billing profile.")
+						}),
+						/* @__PURE__ */ g(l, {
+							id: "coo-payout-amount",
+							type: "number",
+							label: y("coolandlovely.earnings.amount", "Amount ({{currency}})", { currency: D }),
+							value: C,
+							onChange: w,
+							hint: y("coolandlovely.earnings.maxHint", "Up to {{amount}}", { amount: s(E.availableAmount, D) })
+						}),
+						S.error && /* @__PURE__ */ g("p", {
+							className: "text-sm text-status-error-text",
+							children: S.error.message
+						}),
+						S.data && /* @__PURE__ */ g("p", {
+							className: "text-sm text-status-success-text",
+							children: y("coolandlovely.earnings.requested", "Payout of {{amount}} requested ({{status}}).", {
+								amount: s(S.data.requestedAmount, S.data.currency),
+								status: S.data.status
+							})
+						}),
+						/* @__PURE__ */ _("button", {
+							type: "button",
+							disabled: !k || S.isPending,
+							onClick: () => S.mutate({
+								amount: O,
+								currency: D
+							}, { onSuccess: () => w("") }),
+							className: "inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
+							children: [S.isPending && /* @__PURE__ */ g(m, { className: "h-4 w-4 animate-spin" }), y("coolandlovely.earnings.requestButton", "Request payout")]
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { y as CreatorEarningsPage };
+
+//# sourceMappingURL=CreatorEarningsPage.js.map

package/dist/coolandlovely/pages/commerce/CreatorEarningsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreatorEarningsPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/commerce/CreatorEarningsPage.tsx"],"sourcesContent":["/**\n * Creator Earnings Page (BOFF-3370)\n * @module coolandlovely/pages/commerce\n *\n * A creator's look commissions: every piece bought from one of their published looks earns\n * them a commission once the order is paid. Balances come from global-billing's earnings\n * ledger (`cooMyCreatorEarningsSummary`); a creator can ask for a payout of the available\n * balance (`cooRequestCreatorPayout`), which billing queues for payout review.\n */\n\nimport { useState } from 'react';\nimport { Loader2, Wallet } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\nimport { EmptyState } from '../../components/EmptyState';\nimport { TextField } from '../../components/Field';\nimport { MetricsCard } from '../../components/MetricsCard';\nimport { PageLayout } from '../../components/PageLayout';\nimport { ErrorView, LoadingView } from '../../components/StateViews';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { useTr } from '../../hooks';\nimport {\n  useMyCreatorEarnings,\n  useMyCreatorEarningsSummary,\n  useRequestCreatorPayout,\n} from '../../hooks/useCommerceApi';\nimport { formatDate, formatPrice } from '../../utils/formatters';\n\nexport function CreatorEarningsPage() {\n  const tr = useTr();\n  const summary = useMyCreatorEarningsSummary();\n  const earnings = useMyCreatorEarnings();\n  const payout = useRequestCreatorPayout();\n  const [amount, setAmount] = useState('');\n  const title = tr('coolandlovely.earnings.title', 'Creator earnings');\n\n  if (summary.isLoading || earnings.isLoading) {\n    return (\n      <PageLayout title={title}>\n        <LoadingView />\n      </PageLayout>\n    );\n  }\n  if (summary.isError || earnings.isError || !summary.data || !earnings.data) {\n    return (\n      <PageLayout title={title}>\n        <ErrorView\n          onRetry={() => {\n            void summary.refetch();\n            void earnings.refetch();\n          }}\n        />\n      </PageLayout>\n    );\n  }\n\n  const s = summary.data;\n  const currency = s.currency ?? 'USD';\n  const requested = Number(amount);\n  const canRequest = s.currency !== null && requested > 0 && requested <= s.availableAmount;\n\n  return (\n    <PageLayout\n      title={title}\n      description={tr(\n        'coolandlovely.earnings.description',\n        'You earn {{rate}}% of every piece bought from your looks. Commissions become available {{days}} days after payment.',\n        { rate: Math.round(s.commissionRate * 100), days: s.holdDays }\n      )}\n    >\n      <div\n        className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\"\n        data-testid=\"earnings-summary\"\n      >\n        <MetricsCard\n          icon={<Wallet className=\"h-5 w-5\" />}\n          label={tr('coolandlovely.earnings.available', 'Available')}\n          value={formatPrice(s.availableAmount, currency)}\n        />\n        <MetricsCard\n          icon={<Wallet className=\"h-5 w-5\" />}\n          label={tr('coolandlovely.earnings.pending', 'In return window')}\n          value={formatPrice(s.pendingAmount, currency)}\n        />\n        <MetricsCard\n          icon={<Wallet className=\"h-5 w-5\" />}\n          label={tr('coolandlovely.earnings.reserved', 'Payout requested')}\n          value={formatPrice(s.reservedAmount, currency)}\n        />\n        <MetricsCard\n          icon={<Wallet className=\"h-5 w-5\" />}\n          label={tr('coolandlovely.earnings.paid', 'Paid out')}\n          value={formatPrice(s.paidAmount, currency)}\n        />\n      </div>\n      {!s.billingAvailable && (\n        <p className=\"mt-3 text-sm text-status-warning-text\">\n          {tr(\n            'coolandlovely.earnings.billingUnavailable',\n            'Balances could not be confirmed with billing just now; the figures above come from your commission history.'\n          )}\n        </p>\n      )}\n\n      <div className=\"mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        <section className=\"lg:col-span-2\">\n          <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">\n            {tr('coolandlovely.earnings.history', 'Commission history')}\n          </h3>\n          {earnings.data.items.length === 0 ? (\n            <EmptyState\n              icon={<Wallet className=\"h-8 w-8\" />}\n              title={tr('coolandlovely.earnings.emptyTitle', 'No commissions yet')}\n              description={tr(\n                'coolandlovely.earnings.emptyDescription',\n                'Publish looks with catalogue pieces. When someone buys from your look, the commission shows up here.'\n              )}\n            />\n          ) : (\n            <div className=\"overflow-x-auto rounded-xl border border-border-seam\">\n              <table className=\"w-full text-sm\">\n                <thead className=\"bg-bg-sunken text-left text-xs uppercase tracking-wide text-text-secondary\">\n                  <tr>\n                    <th className=\"px-4 py-2\">{tr('coolandlovely.earnings.order', 'Order')}</th>\n                    <th className=\"px-4 py-2 text-right\">\n                      {tr('coolandlovely.earnings.sale', 'Sale')}\n                    </th>\n                    <th className=\"px-4 py-2 text-right\">\n                      {tr('coolandlovely.earnings.commission', 'Commission')}\n                    </th>\n                    <th className=\"px-4 py-2\">\n                      {tr('coolandlovely.earnings.availableOn', 'Available on')}\n                    </th>\n                    <th className=\"px-4 py-2\">{tr('coolandlovely.earnings.ledger', 'Ledger')}</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {earnings.data.items.map((earning) => (\n                    <tr key={earning.id} className=\"border-t border-border-seam\">\n                      <td className=\"px-4 py-2 font-mono text-text-primary\">\n                        {earning.orderNumber ?? '—'}\n                      </td>\n                      <td className=\"px-4 py-2 text-right tabular-nums text-text-secondary\">\n                        {formatPrice(earning.saleAmount, earning.currency)}\n                      </td>\n                      <td className=\"px-4 py-2 text-right font-semibold tabular-nums text-text-primary\">\n                        {formatPrice(earning.amount, earning.currency)}\n                      </td>\n                      <td className=\"px-4 py-2 text-text-secondary\">\n                        {formatDate(earning.availableAt, { hour: undefined, minute: undefined })}\n                      </td>\n                      <td className=\"px-4 py-2\">\n                        <StatusBadge status={earning.billingSyncStatus} />\n                      </td>\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            </div>\n          )}\n        </section>\n\n        <GlassCard treatment=\"glass\" className=\"h-fit space-y-4 p-6\">\n          <h3 className=\"text-base font-semibold text-text-primary\">\n            {tr('coolandlovely.earnings.requestTitle', 'Request a payout')}\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'coolandlovely.earnings.requestHint',\n              'Payouts are reviewed by the platform and sent to the payout account on your billing profile.'\n            )}\n          </p>\n          <TextField\n            id=\"coo-payout-amount\"\n            type=\"number\"\n            label={tr('coolandlovely.earnings.amount', 'Amount ({{currency}})', { currency })}\n            value={amount}\n            onChange={setAmount}\n            hint={tr('coolandlovely.earnings.maxHint', 'Up to {{amount}}', {\n              amount: formatPrice(s.availableAmount, currency),\n            })}\n          />\n          {payout.error && <p className=\"text-sm text-status-error-text\">{payout.error.message}</p>}\n          {payout.data && (\n            <p className=\"text-sm text-status-success-text\">\n              {tr(\n                'coolandlovely.earnings.requested',\n                'Payout of {{amount}} requested ({{status}}).',\n                {\n                  amount: formatPrice(payout.data.requestedAmount, payout.data.currency),\n                  status: payout.data.status,\n                }\n              )}\n            </p>\n          )}\n          <button\n            type=\"button\"\n            disabled={!canRequest || payout.isPending}\n            onClick={() =>\n              payout.mutate({ amount: requested, currency }, { onSuccess: () => setAmount('') })\n            }\n            className=\"inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n          >\n            {payout.isPending && <Loader2 className=\"h-4 w-4 animate-spin\" />}\n            {tr('coolandlovely.earnings.requestButton', 'Request payout')}\n          </button>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/commerce/OrdersPage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * My Orders + Order detail (BOFF-3370)
+ * @module coolandlovely/pages/commerce
+ *
+ * The shopper's own orders (`cooMyOrders` / `cooMyOrder`). An unpaid order can be paid
+ * (`cooResumeOrderPayment` re-uses its billing order), re-checked against billing
+ * (`cooSyncOrderPayment`) or cancelled (`cooCancelOrder`).
+ */
+export declare function OrdersPage(): import("react").JSX.Element;
+export declare function OrderDetailPage(): import("react").JSX.Element;
+//# sourceMappingURL=OrdersPage.d.ts.map

package/dist/coolandlovely/pages/commerce/OrdersPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrdersPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/commerce/OrdersPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAgDH,wBAAgB,UAAU,gCAwEzB;AAED,wBAAgB,eAAe,gCAgL9B"}