@burdenoff/microfe-coolandlovely 2026.1024.1 → 2026.1024.3

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

@@ -0,0 +1,280 @@
+import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { useTr as r } from "../../hooks/useTr.js";
+import "../../hooks/index.js";
+import { StatusBadge as i } from "../../components/StatusBadge.js";
+import { ErrorView as a, LoadingView as o } from "../../components/StateViews.js";
+import { Thumbnail as s } from "../../components/Thumbnail.js";
+import { formatDate as c, formatPrice as l } from "../../utils/formatters.js";
+import { EmptyState as u } from "../../components/EmptyState.js";
+import { PayForOrder as d } from "../../components/PayForOrder.js";
+import { useCancelOrder as f, useMyOrder as p, useMyOrders as m, useResumeOrderPayment as h, useSyncOrderPayment as g } from "../../hooks/useCommerceApi.js";
+import { useState as _ } from "react";
+import { ArrowLeft as v, ChevronRight as y, Loader2 as b, Package as x, RefreshCw as S, Sparkles as C, XCircle as w } from "lucide-react";
+import { useParams as T } from "react-router";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { GlassCard as k } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/commerce/OrdersPage.tsx
+var A = [
+	{
+		value: void 0,
+		key: "coolandlovely.orders.filterAll",
+		label: "All"
+	},
+	{
+		value: "PENDING_PAYMENT",
+		key: "coolandlovely.orders.filterPending",
+		label: "Awaiting payment"
+	},
+	{
+		value: "PAID",
+		key: "coolandlovely.orders.filterPaid",
+		label: "Paid"
+	},
+	{
+		value: "CANCELLED",
+		key: "coolandlovely.orders.filterCancelled",
+		label: "Cancelled"
+	}
+], j = "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 disabled:opacity-50";
+function M() {
+	let s = r(), { navigateTo: d } = e(), [f, p] = _(void 0), h = m(f);
+	return /* @__PURE__ */ O(n, {
+		title: s("coolandlovely.orders.title", "My orders"),
+		description: s("coolandlovely.orders.description", "Everything you have ordered."),
+		children: [/* @__PURE__ */ D("div", {
+			className: "mb-4 flex flex-wrap gap-2",
+			role: "tablist",
+			children: A.map((e) => /* @__PURE__ */ D("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": f === e.value,
+				onClick: () => p(e.value),
+				className: t("rounded-full border px-3 py-1 text-sm font-medium transition-colors", f === e.value ? "border-action-primary-bg bg-action-primary-bg text-action-primary-text" : "border-border-seam text-text-primary hover:bg-bg-sunken"),
+				children: s(e.key, e.label)
+			}, e.key))
+		}), h.isLoading ? /* @__PURE__ */ D(o, { label: s("coolandlovely.orders.loading", "Loading orders…") }) : h.isError || !h.data ? /* @__PURE__ */ D(a, { onRetry: () => void h.refetch() }) : h.data.items.length === 0 ? /* @__PURE__ */ D(u, {
+			icon: /* @__PURE__ */ D(x, { className: "h-8 w-8" }),
+			title: s("coolandlovely.orders.emptyTitle", "No orders yet"),
+			description: s("coolandlovely.orders.emptyDescription", "Orders you place appear here.")
+		}) : /* @__PURE__ */ D("div", {
+			className: "space-y-3",
+			"data-testid": "orders-list",
+			children: h.data.items.map((e) => /* @__PURE__ */ O("button", {
+				type: "button",
+				onClick: () => d(`/orders/${e.id}`),
+				className: "flex w-full items-center gap-4 rounded-xl border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50",
+				children: [
+					/* @__PURE__ */ O("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ D("p", {
+							className: "font-mono text-sm font-medium text-text-primary",
+							children: e.orderNumber
+						}), /* @__PURE__ */ O("p", {
+							className: "truncate text-xs text-text-secondary",
+							children: [
+								c(e.createdAt),
+								" ·",
+								" ",
+								s("coolandlovely.orders.pieces", "{{count}} pieces", { count: e.itemCount })
+							]
+						})]
+					}),
+					/* @__PURE__ */ D(i, { status: e.status }),
+					/* @__PURE__ */ D("span", {
+						className: "w-28 text-right text-sm font-semibold tabular-nums text-text-primary",
+						children: l(e.total, e.currency)
+					}),
+					/* @__PURE__ */ D(y, { className: "h-4 w-4 text-text-secondary" })
+				]
+			}, e.id))
+		})]
+	});
+}
+function N() {
+	let u = r(), { orderId: m } = T(), { navigateTo: y } = e(), A = p(m), M = h(), N = g(), P = f(), [F, I] = _(null), L = u("coolandlovely.orders.detailTitle", "Order");
+	if (A.isLoading) return /* @__PURE__ */ D(n, {
+		title: L,
+		children: /* @__PURE__ */ D(o, {})
+	});
+	if (A.isError || !A.data) return /* @__PURE__ */ D(n, {
+		title: L,
+		children: /* @__PURE__ */ D(a, {
+			title: u("coolandlovely.orders.notFound", "Order not found"),
+			onRetry: () => void A.refetch()
+		})
+	});
+	let R = A.data, z = R.status === "PENDING_PAYMENT", B = M.error ?? N.error ?? P.error;
+	return /* @__PURE__ */ D(n, {
+		title: R.orderNumber,
+		description: c(R.createdAt),
+		actions: /* @__PURE__ */ O("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [/* @__PURE__ */ O("button", {
+				type: "button",
+				onClick: () => y("/orders"),
+				className: j,
+				children: [
+					/* @__PURE__ */ D(v, { className: "h-4 w-4" }),
+					" ",
+					u("coolandlovely.common.back", "Back")
+				]
+			}), z && /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ O("button", {
+				type: "button",
+				disabled: N.isPending,
+				onClick: () => N.mutate(R.id),
+				className: j,
+				children: [N.isPending ? /* @__PURE__ */ D(b, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ D(S, { className: "h-4 w-4" }), u("coolandlovely.orders.checkPayment", "Check payment")]
+			}), /* @__PURE__ */ O("button", {
+				type: "button",
+				disabled: P.isPending,
+				onClick: () => P.mutate(R.id),
+				className: t(j, "text-status-error-text hover:bg-status-error-bg-subtle"),
+				children: [
+					/* @__PURE__ */ D(w, { className: "h-4 w-4" }),
+					" ",
+					u("coolandlovely.orders.cancel", "Cancel order")
+				]
+			})] })]
+		}),
+		children: /* @__PURE__ */ O("div", {
+			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+			children: [/* @__PURE__ */ D("div", {
+				className: "space-y-3 lg:col-span-2",
+				children: R.items.map((e) => /* @__PURE__ */ O(k, {
+					treatment: "plain",
+					className: "flex items-center gap-4 p-4",
+					children: [
+						/* @__PURE__ */ D(s, {
+							icon: /* @__PURE__ */ D(x, { className: "h-5 w-5" }),
+							seed: e.styleItemId,
+							fileId: e.image?.id,
+							alt: e.name,
+							className: "h-14 w-14 shrink-0"
+						}),
+						/* @__PURE__ */ O("div", {
+							className: "min-w-0 flex-1",
+							children: [
+								/* @__PURE__ */ D("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: e.name
+								}),
+								/* @__PURE__ */ D("p", {
+									className: "truncate text-xs text-text-secondary",
+									children: [
+										e.size,
+										e.colour,
+										`× ${e.quantity}`
+									].filter(Boolean).join(" · ")
+								}),
+								e.isCreatorAttributed && /* @__PURE__ */ O("p", {
+									className: "mt-0.5 inline-flex items-center gap-1 text-xs text-accent-primary",
+									children: [/* @__PURE__ */ D(C, { className: "h-3 w-3" }), u("coolandlovely.orders.supportsCreator", "Supports the creator of the look")]
+								})
+							]
+						}),
+						/* @__PURE__ */ D("span", {
+							className: "text-sm font-semibold tabular-nums text-text-primary",
+							children: l(e.lineTotal, R.currency)
+						})
+					]
+				}, e.id))
+			}), /* @__PURE__ */ O(k, {
+				treatment: "glass",
+				className: "h-fit space-y-4 p-6",
+				children: [
+					/* @__PURE__ */ O("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ D("span", {
+							className: "text-sm text-text-secondary",
+							children: u("coolandlovely.orders.status", "Status")
+						}), /* @__PURE__ */ D("span", {
+							"data-testid": "order-status",
+							children: /* @__PURE__ */ D(i, { status: R.status })
+						})]
+					}),
+					/* @__PURE__ */ O("dl", {
+						className: "space-y-2 text-sm",
+						children: [
+							/* @__PURE__ */ O("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ D("dt", {
+									className: "text-text-secondary",
+									children: u("coolandlovely.checkout.subtotal", "Subtotal")
+								}), /* @__PURE__ */ D("dd", {
+									className: "tabular-nums text-text-primary",
+									children: l(R.subtotal, R.currency)
+								})]
+							}),
+							/* @__PURE__ */ O("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ D("dt", {
+									className: "text-text-secondary",
+									children: u("coolandlovely.checkout.tax", "Tax")
+								}), /* @__PURE__ */ D("dd", {
+									className: "tabular-nums text-text-primary",
+									children: l(R.taxAmount, R.currency)
+								})]
+							}),
+							/* @__PURE__ */ O("div", {
+								className: "flex justify-between border-t border-border-seam pt-2 text-base font-semibold",
+								children: [/* @__PURE__ */ D("dt", {
+									className: "text-text-primary",
+									children: u("coolandlovely.checkout.total", "Total")
+								}), /* @__PURE__ */ D("dd", {
+									className: "tabular-nums text-text-primary",
+									children: l(R.total, R.currency)
+								})]
+							})
+						]
+					}),
+					R.shippingAddress && /* @__PURE__ */ O("div", {
+						className: "border-t border-border-seam pt-3 text-sm",
+						children: [
+							/* @__PURE__ */ D("p", {
+								className: "mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary",
+								children: u("coolandlovely.orders.shipTo", "Ship to")
+							}),
+							/* @__PURE__ */ D("p", {
+								className: "text-text-primary",
+								children: R.shippingName
+							}),
+							/* @__PURE__ */ D("p", {
+								className: "whitespace-pre-line text-text-secondary",
+								children: R.shippingAddress
+							})
+						]
+					}),
+					R.paidAt && /* @__PURE__ */ D("p", {
+						className: "text-xs text-text-secondary",
+						children: u("coolandlovely.orders.paidOn", "Paid {{date}} via {{provider}}", {
+							date: c(R.paidAt),
+							provider: R.paymentProvider ?? "—"
+						})
+					}),
+					B && /* @__PURE__ */ D("p", {
+						className: "text-sm text-status-error-text",
+						children: B.message
+					}),
+					z && (F ? /* @__PURE__ */ D(d, {
+						checkout: F,
+						onSettle: async () => {
+							await N.mutateAsync(R.id).catch(() => void 0), I(null);
+						}
+					}) : /* @__PURE__ */ O("button", {
+						type: "button",
+						disabled: M.isPending,
+						onClick: () => M.mutate(R.id, { onSuccess: (e) => I(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: [M.isPending && /* @__PURE__ */ D(b, { className: "h-4 w-4 animate-spin" }), u("coolandlovely.orders.payNow", "Pay now")]
+					}))
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { N as OrderDetailPage, M as OrdersPage };
+
+//# sourceMappingURL=OrdersPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrdersPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/commerce/OrdersPage.tsx"],"sourcesContent":["/**\n * My Orders + Order detail (BOFF-3370)\n * @module coolandlovely/pages/commerce\n *\n * The shopper's own orders (`cooMyOrders` / `cooMyOrder`). An unpaid order can be paid\n * (`cooResumeOrderPayment` re-uses its billing order), re-checked against billing\n * (`cooSyncOrderPayment`) or cancelled (`cooCancelOrder`).\n */\n\nimport { useState } from 'react';\nimport { useParams } from 'react-router';\nimport {\n  ArrowLeft,\n  ChevronRight,\n  Loader2,\n  Package,\n  RefreshCw,\n  Sparkles,\n  XCircle,\n} from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\nimport { EmptyState } from '../../components/EmptyState';\nimport { PageLayout } from '../../components/PageLayout';\nimport { PayForOrder } from '../../components/PayForOrder';\nimport { ErrorView, LoadingView } from '../../components/StateViews';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useTr } from '../../hooks';\nimport {\n  useCancelOrder,\n  useMyOrder,\n  useMyOrders,\n  useResumeOrderPayment,\n  useSyncOrderPayment,\n} from '../../hooks/useCommerceApi';\nimport type { CooOrderCheckout, CooOrderStatus } from '../../types';\nimport { cn } from '../../utils/cn';\nimport { formatDate, formatPrice } from '../../utils/formatters';\n\nconst FILTERS: Array<{ value: CooOrderStatus | undefined; key: string; label: string }> = [\n  { value: undefined, key: 'coolandlovely.orders.filterAll', label: 'All' },\n  {\n    value: 'PENDING_PAYMENT',\n    key: 'coolandlovely.orders.filterPending',\n    label: 'Awaiting payment',\n  },\n  { value: 'PAID', key: 'coolandlovely.orders.filterPaid', label: 'Paid' },\n  { value: 'CANCELLED', key: 'coolandlovely.orders.filterCancelled', label: 'Cancelled' },\n];\n\nconst secondaryButton =\n  '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 disabled:opacity-50';\n\nexport function OrdersPage() {\n  const tr = useTr();\n  const { navigateTo } = useCoolAndLovely();\n  const [status, setStatus] = useState<CooOrderStatus | undefined>(undefined);\n  const orders = useMyOrders(status);\n  const title = tr('coolandlovely.orders.title', 'My orders');\n\n  return (\n    <PageLayout\n      title={title}\n      description={tr('coolandlovely.orders.description', 'Everything you have ordered.')}\n    >\n      <div className=\"mb-4 flex flex-wrap gap-2\" role=\"tablist\">\n        {FILTERS.map((filter) => (\n          <button\n            key={filter.key}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={status === filter.value}\n            onClick={() => setStatus(filter.value)}\n            className={cn(\n              'rounded-full border px-3 py-1 text-sm font-medium transition-colors',\n              status === filter.value\n                ? 'border-action-primary-bg bg-action-primary-bg text-action-primary-text'\n                : 'border-border-seam text-text-primary hover:bg-bg-sunken'\n            )}\n          >\n            {tr(filter.key, filter.label)}\n          </button>\n        ))}\n      </div>\n      {orders.isLoading ? (\n        <LoadingView label={tr('coolandlovely.orders.loading', 'Loading orders…')} />\n      ) : orders.isError || !orders.data ? (\n        <ErrorView onRetry={() => void orders.refetch()} />\n      ) : orders.data.items.length === 0 ? (\n        <EmptyState\n          icon={<Package className=\"h-8 w-8\" />}\n          title={tr('coolandlovely.orders.emptyTitle', 'No orders yet')}\n          description={tr('coolandlovely.orders.emptyDescription', 'Orders you place appear here.')}\n        />\n      ) : (\n        <div className=\"space-y-3\" data-testid=\"orders-list\">\n          {orders.data.items.map((order) => (\n            <button\n              key={order.id}\n              type=\"button\"\n              onClick={() => navigateTo(`/orders/${order.id}`)}\n              className=\"flex w-full items-center gap-4 rounded-xl border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n            >\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"font-mono text-sm font-medium text-text-primary\">\n                  {order.orderNumber}\n                </p>\n                <p className=\"truncate text-xs text-text-secondary\">\n                  {formatDate(order.createdAt)} ·{' '}\n                  {tr('coolandlovely.orders.pieces', '{{count}} pieces', {\n                    count: order.itemCount,\n                  })}\n                </p>\n              </div>\n              <StatusBadge status={order.status} />\n              <span className=\"w-28 text-right text-sm font-semibold tabular-nums text-text-primary\">\n                {formatPrice(order.total, order.currency)}\n              </span>\n              <ChevronRight className=\"h-4 w-4 text-text-secondary\" />\n            </button>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n\nexport function OrderDetailPage() {\n  const tr = useTr();\n  const { orderId } = useParams<{ orderId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const order = useMyOrder(orderId);\n  const resume = useResumeOrderPayment();\n  const sync = useSyncOrderPayment();\n  const cancel = useCancelOrder();\n  const [session, setSession] = useState<CooOrderCheckout | null>(null);\n  const title = tr('coolandlovely.orders.detailTitle', 'Order');\n\n  if (order.isLoading) {\n    return (\n      <PageLayout title={title}>\n        <LoadingView />\n      </PageLayout>\n    );\n  }\n  if (order.isError || !order.data) {\n    return (\n      <PageLayout title={title}>\n        <ErrorView\n          title={tr('coolandlovely.orders.notFound', 'Order not found')}\n          onRetry={() => void order.refetch()}\n        />\n      </PageLayout>\n    );\n  }\n\n  const data = order.data;\n  const pending = data.status === 'PENDING_PAYMENT';\n  const actionError = resume.error ?? sync.error ?? cancel.error;\n\n  const settle = async () => {\n    await sync.mutateAsync(data.id).catch(() => undefined);\n    setSession(null);\n  };\n\n  return (\n    <PageLayout\n      title={data.orderNumber}\n      description={formatDate(data.createdAt)}\n      actions={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <button type=\"button\" onClick={() => navigateTo('/orders')} className={secondaryButton}>\n            <ArrowLeft className=\"h-4 w-4\" /> {tr('coolandlovely.common.back', 'Back')}\n          </button>\n          {pending && (\n            <>\n              <button\n                type=\"button\"\n                disabled={sync.isPending}\n                onClick={() => sync.mutate(data.id)}\n                className={secondaryButton}\n              >\n                {sync.isPending ? (\n                  <Loader2 className=\"h-4 w-4 animate-spin\" />\n                ) : (\n                  <RefreshCw className=\"h-4 w-4\" />\n                )}\n                {tr('coolandlovely.orders.checkPayment', 'Check payment')}\n              </button>\n              <button\n                type=\"button\"\n                disabled={cancel.isPending}\n                onClick={() => cancel.mutate(data.id)}\n                className={cn(\n                  secondaryButton,\n                  'text-status-error-text hover:bg-status-error-bg-subtle'\n                )}\n              >\n                <XCircle className=\"h-4 w-4\" /> {tr('coolandlovely.orders.cancel', 'Cancel order')}\n              </button>\n            </>\n          )}\n        </div>\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\">\n          {data.items.map((item) => (\n            <GlassCard key={item.id} treatment=\"plain\" className=\"flex items-center gap-4 p-4\">\n              <Thumbnail\n                icon={<Package className=\"h-5 w-5\" />}\n                seed={item.styleItemId}\n                fileId={item.image?.id}\n                alt={item.name}\n                className=\"h-14 w-14 shrink-0\"\n              />\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"truncate text-sm font-medium text-text-primary\">{item.name}</p>\n                <p className=\"truncate text-xs text-text-secondary\">\n                  {[item.size, item.colour, `× ${item.quantity}`].filter(Boolean).join(' · ')}\n                </p>\n                {item.isCreatorAttributed && (\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.orders.supportsCreator', 'Supports the creator of the look')}\n                  </p>\n                )}\n              </div>\n              <span className=\"text-sm font-semibold tabular-nums text-text-primary\">\n                {formatPrice(item.lineTotal, data.currency)}\n              </span>\n            </GlassCard>\n          ))}\n        </div>\n        <GlassCard treatment=\"glass\" className=\"h-fit space-y-4 p-6\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-sm text-text-secondary\">\n              {tr('coolandlovely.orders.status', 'Status')}\n            </span>\n            <span data-testid=\"order-status\">\n              <StatusBadge status={data.status} />\n            </span>\n          </div>\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(data.subtotal, data.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(data.taxAmount, data.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\">\n                {formatPrice(data.total, data.currency)}\n              </dd>\n            </div>\n          </dl>\n          {data.shippingAddress && (\n            <div className=\"border-t border-border-seam pt-3 text-sm\">\n              <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                {tr('coolandlovely.orders.shipTo', 'Ship to')}\n              </p>\n              <p className=\"text-text-primary\">{data.shippingName}</p>\n              <p className=\"whitespace-pre-line text-text-secondary\">{data.shippingAddress}</p>\n            </div>\n          )}\n          {data.paidAt && (\n            <p className=\"text-xs text-text-secondary\">\n              {tr('coolandlovely.orders.paidOn', 'Paid {{date}} via {{provider}}', {\n                date: formatDate(data.paidAt),\n                provider: data.paymentProvider ?? '—',\n              })}\n            </p>\n          )}\n          {actionError && <p className=\"text-sm text-status-error-text\">{actionError.message}</p>}\n          {pending &&\n            (session ? (\n              <PayForOrder checkout={session} onSettle={settle} />\n            ) : (\n              <button\n                type=\"button\"\n                disabled={resume.isPending}\n                onClick={() =>\n                  resume.mutate(data.id, { onSuccess: (result) => setSession(result) })\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                {resume.isPending && <Loader2 className=\"h-4 w-4 animate-spin\" />}\n                {tr('coolandlovely.orders.payNow', 'Pay now')}\n              </button>\n            ))}\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/items/StyleItemDetailPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyleItemDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAuBH,wBAAgB,mBAAmB,gCA6PlC"}
+{"version":3,"file":"StyleItemDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,wBAAgB,mBAAmB,gCAoQlC"}