npm - @burdenoff/microfe-coolandlovely - Versions diffs - 2026.1102.1 → 2026.1102.2 - Mend

@burdenoff/microfe-coolandlovely 2026.1102.1 → 2026.1102.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/coolandlovely/pages/collaborations/CollaborationsListPage.js CHANGED Viewed

@@ -1,15 +1,15 @@
-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 { useCollaborations as r } from "../../hooks/useCoolAndLovelyApi.js";
-import { useTr as i } from "../../hooks/useTr.js";
+import { cn as e } from "../../utils/cn.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { useCollaborations as n } from "../../hooks/useCoolAndLovelyApi.js";
+import { useTr as r } from "../../hooks/useTr.js";
 import "../../hooks/index.js";
-import { StatusBadge as a } from "../../components/StatusBadge.js";
-import { ErrorView as o, LoadingView as s } from "../../components/StateViews.js";
-import { formatDate as c, formatPrice as l, titleCase as u } from "../../utils/formatters.js";
-import { EmptyState as d } from "../../components/EmptyState.js";
-import { ActorName as f } from "../../components/ActorName.js";
-import { BrandCreatorAvatars as p } from "../../components/BrandCreatorAvatars.js";
+import { StatusBadge as i } from "../../components/StatusBadge.js";
+import { ErrorView as a, LoadingView as o } from "../../components/StateViews.js";
+import { formatDate as s, formatPrice as c, titleCase as l } from "../../utils/formatters.js";
+import { EmptyState as u } from "../../components/EmptyState.js";
+import { ActorName as d } from "../../components/ActorName.js";
+import { BrandCreatorAvatars as f } from "../../components/BrandCreatorAvatars.js";
+import { useContextNavigation as p } from "../../hooks/useContextNavigation.js";
 import { useMemo as m, useState as h } from "react";
 import { Handshake as g, Plus as _ } from "lucide-react";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
@@ -26,14 +26,14 @@ function x(e) {
 	return e.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
 }
 function S() {
-	let { navigateTo: S } = e(), C = i(), [w, T] = h("ALL"), E = m(() => [{
+	let S = p(), C = r(), [w, T] = h("ALL"), E = m(() => [{
 		value: "ALL",
 		label: C("coolandlovely.filters.all", "All")
 	}, ...b.map((e) => ({
 		value: e,
 		label: C(`coolandlovely.status.${e.toLowerCase()}`, x(e))
-	}))], [C]), D = r({ status: w === "ALL" ? void 0 : w }), O = D.data ?? [];
-	return /* @__PURE__ */ y(n, {
+	}))], [C]), D = n({ status: w === "ALL" ? void 0 : w }), O = D.data ?? [];
+	return /* @__PURE__ */ y(t, {
 		title: C("coolandlovely.page.collaborationsTitle", "Collaborations"),
 		description: C("coolandlovely.page.collaborationsSubtitle", "Brand × creator partnerships with a real lifecycle"),
 		actions: /* @__PURE__ */ y("button", {
@@ -46,89 +46,98 @@ function S() {
 				C("coolandlovely.actions.newCollaboration", "New collaboration")
 			]
 		}),
-		children: [/* @__PURE__ */ v("div", {
-			className: "mb-6 flex flex-wrap items-center gap-2",
-			children: E.map((e) => /* @__PURE__ */ v("button", {
+		children: [
+			/* @__PURE__ */ v("button", {
 				type: "button",
-				onClick: () => T(e.value),
-				className: t("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", w === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
-				children: e.label
-			}, e.value))
-		}), D.isLoading ? /* @__PURE__ */ v(s, { label: C("coolandlovely.loading.collaborations", "Loading collaborations…") }) : D.isError ? /* @__PURE__ */ v(o, { onRetry: () => void D.refetch() }) : O.length === 0 ? /* @__PURE__ */ v(d, {
-			illustration: "empty-data",
-			icon: /* @__PURE__ */ v(g, { className: "h-10 w-10" }),
-			title: C("coolandlovely.empty.collaborationsTitle", "No collaborations yet"),
-			description: C("coolandlovely.empty.collaborationsDescription", "Propose a brand × creator partnership to get started."),
-			action: /* @__PURE__ */ y("button", {
-				type: "button",
-				onClick: () => S("/collaborations/new"),
-				className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
-				children: [
-					/* @__PURE__ */ v(_, { className: "h-4 w-4" }),
-					" ",
-					C("coolandlovely.actions.newCollaboration", "New collaboration")
-				]
+				className: "mb-4 rounded-lg border border-border-seam px-4 py-2 text-sm text-text-primary",
+				onClick: () => S("/creator-marketplace"),
+				children: C("coolandlovely.marketplace.open", "Open creator marketplace")
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "mb-6 flex flex-wrap items-center gap-2",
+				children: E.map((t) => /* @__PURE__ */ v("button", {
+					type: "button",
+					onClick: () => T(t.value),
+					className: e("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", w === t.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+					children: t.label
+				}, t.value))
+			}),
+			D.isLoading ? /* @__PURE__ */ v(o, { label: C("coolandlovely.loading.collaborations", "Loading collaborations…") }) : D.isError ? /* @__PURE__ */ v(a, { onRetry: () => void D.refetch() }) : O.length === 0 ? /* @__PURE__ */ v(u, {
+				illustration: "empty-data",
+				icon: /* @__PURE__ */ v(g, { className: "h-10 w-10" }),
+				title: C("coolandlovely.empty.collaborationsTitle", "No collaborations yet"),
+				description: C("coolandlovely.empty.collaborationsDescription", "Propose a brand × creator partnership to get started."),
+				action: /* @__PURE__ */ y("button", {
+					type: "button",
+					onClick: () => S("/collaborations/new"),
+					className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
+					children: [
+						/* @__PURE__ */ v(_, { className: "h-4 w-4" }),
+						" ",
+						C("coolandlovely.actions.newCollaboration", "New collaboration")
+					]
+				})
+			}) : /* @__PURE__ */ v("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: O.map((e) => /* @__PURE__ */ y("button", {
+					type: "button",
+					onClick: () => S(`/collaborations/${e.id}`),
+					className: "flex flex-col rounded-lg border border-border-seam bg-bg-surface p-4 text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md",
+					children: [
+						/* @__PURE__ */ y("div", {
+							className: "flex items-start gap-3",
+							children: [
+								/* @__PURE__ */ v(f, {
+									brandLogoFileId: e.brand?.logo?.id,
+									brandSeed: e.brandId,
+									creatorId: e.creatorId,
+									size: "sm",
+									className: "shrink-0"
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ v("h3", {
+										className: "truncate text-base font-semibold text-text-primary",
+										children: e.title
+									}), /* @__PURE__ */ y("p", {
+										className: "truncate text-xs text-text-secondary",
+										children: [
+											e.brand?.name ?? C("coolandlovely.common.brand", "Brand"),
+											" ×",
+											" ",
+											/* @__PURE__ */ v(d, { id: e.creatorId })
+										]
+									})]
+								}),
+								/* @__PURE__ */ v(i, { status: e.status })
+							]
+						}),
+						e.brief && /* @__PURE__ */ v("p", {
+							className: "mt-3 line-clamp-2 text-sm text-text-secondary",
+							children: e.brief
+						}),
+						/* @__PURE__ */ y("div", {
+							className: "mt-3 flex items-center justify-between text-xs text-text-secondary",
+							children: [/* @__PURE__ */ v("span", {
+								className: "rounded-full bg-bg-sunken px-2 py-0.5",
+								children: C(`coolandlovely.role.${e.role.toLowerCase()}`, l(e.role))
+							}), /* @__PURE__ */ v("span", { children: c(e.compensation, e.currency) })]
+						}),
+						e.startDate && /* @__PURE__ */ y("p", {
+							className: "mt-2 text-xs text-text-secondary",
+							children: [
+								C("coolandlovely.common.starts", "Starts"),
+								" ",
+								s(e.startDate, {
+									hour: void 0,
+									minute: void 0
+								})
+							]
+						})
+					]
+				}, e.id))
 			})
-		}) : /* @__PURE__ */ v("div", {
-			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-			children: O.map((e) => /* @__PURE__ */ y("button", {
-				type: "button",
-				onClick: () => S(`/collaborations/${e.id}`),
-				className: "flex flex-col rounded-lg border border-border-seam bg-bg-surface p-4 text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md",
-				children: [
-					/* @__PURE__ */ y("div", {
-						className: "flex items-start gap-3",
-						children: [
-							/* @__PURE__ */ v(p, {
-								brandLogoFileId: e.brand?.logo?.id,
-								brandSeed: e.brandId,
-								creatorId: e.creatorId,
-								size: "sm",
-								className: "shrink-0"
-							}),
-							/* @__PURE__ */ y("div", {
-								className: "min-w-0 flex-1",
-								children: [/* @__PURE__ */ v("h3", {
-									className: "truncate text-base font-semibold text-text-primary",
-									children: e.title
-								}), /* @__PURE__ */ y("p", {
-									className: "truncate text-xs text-text-secondary",
-									children: [
-										e.brand?.name ?? C("coolandlovely.common.brand", "Brand"),
-										" ×",
-										" ",
-										/* @__PURE__ */ v(f, { id: e.creatorId })
-									]
-								})]
-							}),
-							/* @__PURE__ */ v(a, { status: e.status })
-						]
-					}),
-					e.brief && /* @__PURE__ */ v("p", {
-						className: "mt-3 line-clamp-2 text-sm text-text-secondary",
-						children: e.brief
-					}),
-					/* @__PURE__ */ y("div", {
-						className: "mt-3 flex items-center justify-between text-xs text-text-secondary",
-						children: [/* @__PURE__ */ v("span", {
-							className: "rounded-full bg-bg-sunken px-2 py-0.5",
-							children: C(`coolandlovely.role.${e.role.toLowerCase()}`, u(e.role))
-						}), /* @__PURE__ */ v("span", { children: l(e.compensation, e.currency) })]
-					}),
-					e.startDate && /* @__PURE__ */ y("p", {
-						className: "mt-2 text-xs text-text-secondary",
-						children: [
-							C("coolandlovely.common.starts", "Starts"),
-							" ",
-							c(e.startDate, {
-								hour: void 0,
-								minute: void 0
-							})
-						]
-					})
-				]
-			}, e.id))
-		})]
+		]
 	});
 }
 //#endregion

package/dist/coolandlovely/pages/collaborations/CollaborationsListPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CollaborationsListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/collaborations/CollaborationsListPage.tsx"],"sourcesContent":["/*\n Collaborations List Page\n * @module coolandlovely/pages/collaborations\n \n Lists brand × creator partnerships (`cooListCollaborations`) with status\n * filter.\n */\n\nimport { useMemo, useState } from 'react';\nimport { Plus, Handshake } from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { BrandCreatorAvatars } from '../../components/BrandCreatorAvatars';\nimport { ActorName } from '../../components/ActorName';\nimport { ~~useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {~~ useCollaborations, useTr } from '../../hooks';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooCollaborationStatus } from '../../types';\n\nconst STATUS_ORDER: CooCollaborationStatus[] = [\n 'PROPOSED',\n 'ACCEPTED',\n 'IN_PROGRESS',\n 'PUBLISHED',\n 'DECLINED',\n 'CANCELLED',\n];\n\nfunction formatStatusLabel(status: string): string {\n return status.replace(/_/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase());\n}\n\nexport function CollaborationsListPage() {\n const { navigateTo } = ~~useCoolAndLovely~~();\n const tr = useTr();\n const [status, setStatus] = useState<CooCollaborationStatus \| 'ALL'>('ALL');\n\n const statusOptions = useMemo(\n () => [\n { value: 'ALL' as const, label: tr('coolandlovely.filters.all', 'All') },\n ...STATUS_ORDER.map((value) => ({\n value,\n label: tr(`coolandlovely.status.${value.toLowerCase()}`, formatStatusLabel(value)),\n })),\n ],\n [tr]\n );\n\n const query = useCollaborations({ status: status === 'ALL' ? undefined : status });\n const collaborations = query.data ?? [];\n\n return (\n <PageLayout\n title={tr('coolandlovely.page.collaborationsTitle', 'Collaborations')}\n description={tr(\n 'coolandlovely.page.collaborationsSubtitle',\n 'Brand × creator partnerships with a real lifecycle'\n )}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/collaborations/new')}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n >\n <Plus className=\"h-4 w-4\" />{' '}\n {tr('coolandlovely.actions.newCollaboration', 'New collaboration')}\n </button>\n }\n >\n <div className=\"mb-6 flex flex-wrap items-center gap-2\">\n {statusOptions.map((opt) => (\n <button\n key={opt.value}\n type=\"button\"\n onClick={() => setStatus(opt.value)}\n className={cn(\n 'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n status === opt.value\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n )}\n >\n {opt.label}\n </button>\n ))}\n </div>\n\n {query.isLoading ? (\n <LoadingView\n label={tr('coolandlovely.loading.collaborations', 'Loading collaborations…')}\n />\n ) : query.isError ? (\n <ErrorView onRetry={() => void query.refetch()} />\n ) : collaborations.length === 0 ? (\n <EmptyState\n illustration=\"empty-data\"\n icon={<Handshake className=\"h-10 w-10\" />}\n title={tr('coolandlovely.empty.collaborationsTitle', 'No collaborations yet')}\n description={tr(\n 'coolandlovely.empty.collaborationsDescription',\n 'Propose a brand × creator partnership to get started.'\n )}\n action={\n <button\n type=\"button\"\n onClick={() => navigateTo('/collaborations/new')}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n <Plus className=\"h-4 w-4\" />{' '}\n {tr('coolandlovely.actions.newCollaboration', 'New collaboration')}\n </button>\n }\n />\n ) : (\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n {collaborations.map((c) => (\n <button\n key={c.id}\n type=\"button\"\n onClick={() => navigateTo(`/collaborations/${c.id}`)}\n className=\"flex flex-col rounded-lg border border-border-seam bg-bg-surface p-4 text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md\"\n >\n <div className=\"flex items-start gap-3\">\n <BrandCreatorAvatars\n brandLogoFileId={c.brand?.logo?.id}\n brandSeed={c.brandId}\n creatorId={c.creatorId}\n size=\"sm\"\n className=\"shrink-0\"\n />\n <div className=\"min-w-0 flex-1\">\n <h3 className=\"truncate text-base font-semibold text-text-primary\">{c.title}</h3>\n <p className=\"truncate text-xs text-text-secondary\">\n {c.brand?.name ?? tr('coolandlovely.common.brand', 'Brand')} ×{' '}\n <ActorName id={c.creatorId} />\n </p>\n </div>\n <StatusBadge status={c.status} />\n </div>\n {c.brief && (\n <p className=\"mt-3 line-clamp-2 text-sm text-text-secondary\">{c.brief}</p>\n )}\n <div className=\"mt-3 flex items-center justify-between text-xs text-text-secondary\">\n <span className=\"rounded-full bg-bg-sunken px-2 py-0.5\">\n {tr(`coolandlovely.role.${c.role.toLowerCase()}`, titleCase(c.role))}\n </span>\n <span>{formatPrice(c.compensation, c.currency)}</span>\n </div>\n {c.startDate && (\n <p className=\"mt-2 text-xs text-text-secondary\">\n {tr('coolandlovely.common.starts', 'Starts')}{' '}\n {formatDate(c.startDate, { hour: undefined, minute: undefined })}\n </p>\n )}\n </button>\n ))}\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAM,IAAyC;CAC7C;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAS,EAAkB,GAAwB;CACjD,OAAO,EAAO,QAAQ,MAAM,GAAG,CAAC,CAAC,QAAQ,UAAU,MAAM,EAAE,YAAY,CAAC;AAC1E;AAEA,SAAgB,IAAyB;CACvC,IAAM,~~EAAE~~,~~kBAAe~~,~~EAAiB,~~GAClC,IAAK,EAAM,GACX,CAAC,GAAQ,KAAa,EAAyC,KAAK,GAEpE,IAAgB,QACd,CACJ;EAAE,OAAO;EAAgB,OAAO,EAAG,6BAA6B,KAAK;CAAE,GACvE,GAAG,EAAa,KAAK,OAAW;EAC9B;EACA,OAAO,EAAG,wBAAwB,EAAM,YAAY,KAAK,EAAkB,CAAK,CAAC;CACnF,EAAE,CACJ,GACA,CAAC,CAAE,CACL,GAEM,IAAQ,EAAkB,EAAE,QAAQ,MAAW,QAAQ,KAAA,IAAY,EAAO,CAAC,GAC3E,IAAiB,EAAM,QAAQ,CAAC;CAEtC,OACE,kBAAC,GAAD;EACE,OAAO,EAAG,0CAA0C,gBAAgB;EACpE,aAAa,EACX,6CACA,oDACF;EACA,SACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAW,qBAAqB;GAC/C,WAAU;aAHZ;IAKE,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA;IAAE;IAC5B,EAAG,0CAA0C,mBAAmB;GAC3D;;YAdZ,~~CAiBE~~,kBAAC,OAAD;~~GAAK~~,WAAU;~~aACZ~~,EAAc,KAAK,MAClB,kBAAC,UAAD;~~IAEE~~,MAAK;~~IACL~~,eAAe,EAAU,EAAI,KAAK;~~IAClC~~,WAAW,EACT,kEACA,MAAW,EAAI,QACX,kDACA,0DACN;~~cAEC~~,EAAI;~~GACC~~,GAXD,EAAI,KAWH,CACT;~~EACE~~,CAAA,GAEJ,EAAM,YACL,kBAAC,GAAD,EACE,OAAO,EAAG,wCAAwC,yBAAyB,EAC5E,CAAA,IACC,EAAM,UACR,kBAAC,GAAD,EAAW,eAAe,KAAK,EAAM,QAAQ,EAAI,CAAA,IAC/C,EAAe,WAAW,IAC5B,kBAAC,GAAD;~~GACE~~,cAAa;~~GACb~~,MAAM,kBAAC,GAAD,EAAW,WAAU,YAAa,CAAA;~~GACxC~~,OAAO,EAAG,2CAA2C,uBAAuB;~~GAC5E~~,aAAa,EACX,iDACA,uDACF;~~GACA~~,QACE,kBAAC,UAAD;~~IACE~~,MAAK;~~IACL~~,eAAe,EAAW,qBAAqB;~~IAC~~/C,WAAU;~~cAHZ~~;~~KAKE~~,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA;~~KAAE~~;~~KAC5B~~,EAAG,0CAA0C,mBAAmB;~~IAC3D~~;;~~EAEX~~,CAAA,IAED,kBAAC,OAAD;~~GAAK~~,WAAU;~~aACZ~~,EAAe,KAAK,MACnB,kBAAC,UAAD;~~IAEE~~,MAAK;~~IACL~~,eAAe,EAAW,mBAAmB,EAAE,IAAI;~~IACnD~~,WAAU;~~cAJZ~~;~~KAME~~,kBAAC,OAAD;~~MAAK~~,WAAU;~~gBAAf~~;~~OACE~~,kBAAC,GAAD;~~QACE~~,iBAAiB,EAAE,OAAO,MAAM;~~QAChC~~,WAAW,EAAE;~~QACb~~,WAAW,EAAE;~~QACb~~,MAAK;~~QACL~~,WAAU;~~OACX~~,CAAA;~~OACD~~,kBAAC,OAAD;~~QAAK~~,WAAU;~~kBAAf~~,CACE,kBAAC,MAAD;~~SAAI~~,WAAU;~~mBAAsD~~,EAAE;~~QAAU~~,CAAA,GAChF,kBAAC,KAAD;~~SAAG~~,WAAU;~~mBAAb~~;~~UACG~~,EAAE,OAAO,QAAQ,EAAG,8BAA8B,OAAO;~~UAAE~~;~~UAAG~~;~~UAC~~/D,kBAAC,GAAD,EAAW,IAAI,EAAE,UAAY,CAAA;~~SAC5B~~;~~UACA~~;;~~OACL~~,kBAAC,GAAD,EAAa,QAAQ,EAAE,OAAS,CAAA;~~MAC7B~~;;~~KACJ~~,EAAE,SACD,kBAAC,KAAD;~~MAAG~~,WAAU;~~gBAAiD~~,EAAE;~~KAAS~~,CAAA;~~KAE3E~~,kBAAC,OAAD;~~MAAK~~,WAAU;~~gBAAf~~,CACE,kBAAC,QAAD;~~OAAM~~,WAAU;~~iBACb~~,EAAG,sBAAsB,EAAE,KAAK,YAAY,KAAK,EAAU,EAAE,IAAI,CAAC;~~MAC~~/D,CAAA,GACN,kBAAC,QAAD,EAAA,UAAO,EAAY,EAAE,cAAc,EAAE,QAAQ,EAAQ,CAAA,CAClD;;~~KACJ~~,EAAE,aACD,kBAAC,KAAD;~~MAAG~~,WAAU;~~gBAAb~~;~~OACG~~,EAAG,+BAA+B,QAAQ;~~OAAG~~;~~OAC7C~~,EAAW,EAAE,WAAW;~~QAAE~~,MAAM,KAAA;~~QAAW~~,QAAQ,KAAA;~~OAAU~~,CAAC;~~MAC9D~~;;~~IAEC~~;~~MArCD~~,EAAE,EAqCD,CACT;~~EACE~~,CAAA~~,CAEG~~;;AAEhB"}
1	+ {"version":3,"file":"CollaborationsListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/collaborations/CollaborationsListPage.tsx"],"sourcesContent":["/*\n Collaborations List Page\n * @module coolandlovely/pages/collaborations\n \n Lists brand × creator partnerships (`cooListCollaborations`) with status\n * filter.\n */\n\nimport { useContextNavigation } from '../../hooks/useContextNavigation';\nimport { useMemo, useState } from 'react';\nimport { Plus, Handshake } from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { BrandCreatorAvatars } from '../../components/BrandCreatorAvatars';\nimport { ActorName } from '../../components/ActorName';\nimport { useCollaborations, useTr } from '../../hooks';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooCollaborationStatus } from '../../types';\n\nconst STATUS_ORDER: CooCollaborationStatus[] = [\n 'PROPOSED',\n 'ACCEPTED',\n 'IN_PROGRESS',\n 'PUBLISHED',\n 'DECLINED',\n 'CANCELLED',\n];\n\nfunction formatStatusLabel(status: string): string {\n return status.replace(/_/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase());\n}\n\nexport function CollaborationsListPage() {\n const navigateTo = useContextNavigation();\n const tr = useTr();\n const [status, setStatus] = useState<CooCollaborationStatus \| 'ALL'>('ALL');\n\n const statusOptions = useMemo(\n () => [\n { value: 'ALL' as const, label: tr('coolandlovely.filters.all', 'All') },\n ...STATUS_ORDER.map((value) => ({\n value,\n label: tr(`coolandlovely.status.${value.toLowerCase()}`, formatStatusLabel(value)),\n })),\n ],\n [tr]\n );\n\n const query = useCollaborations({ status: status === 'ALL' ? undefined : status });\n const collaborations = query.data ?? [];\n\n return (\n <PageLayout\n title={tr('coolandlovely.page.collaborationsTitle', 'Collaborations')}\n description={tr(\n 'coolandlovely.page.collaborationsSubtitle',\n 'Brand × creator partnerships with a real lifecycle'\n )}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo('/collaborations/new')}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n >\n <Plus className=\"h-4 w-4\" />{' '}\n {tr('coolandlovely.actions.newCollaboration', 'New collaboration')}\n </button>\n }\n >\n <button\n type=\"button\"\n className=\"mb-4 rounded-lg border border-border-seam px-4 py-2 text-sm text-text-primary\"\n onClick={() => navigateTo('/creator-marketplace')}\n >\n {tr('coolandlovely.marketplace.open', 'Open creator marketplace')}\n </button>\n <div className=\"mb-6 flex flex-wrap items-center gap-2\">\n {statusOptions.map((opt) => (\n <button\n key={opt.value}\n type=\"button\"\n onClick={() => setStatus(opt.value)}\n className={cn(\n 'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n status === opt.value\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n )}\n >\n {opt.label}\n </button>\n ))}\n </div>\n\n {query.isLoading ? (\n <LoadingView\n label={tr('coolandlovely.loading.collaborations', 'Loading collaborations…')}\n />\n ) : query.isError ? (\n <ErrorView onRetry={() => void query.refetch()} />\n ) : collaborations.length === 0 ? (\n <EmptyState\n illustration=\"empty-data\"\n icon={<Handshake className=\"h-10 w-10\" />}\n title={tr('coolandlovely.empty.collaborationsTitle', 'No collaborations yet')}\n description={tr(\n 'coolandlovely.empty.collaborationsDescription',\n 'Propose a brand × creator partnership to get started.'\n )}\n action={\n <button\n type=\"button\"\n onClick={() => navigateTo('/collaborations/new')}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n <Plus className=\"h-4 w-4\" />{' '}\n {tr('coolandlovely.actions.newCollaboration', 'New collaboration')}\n </button>\n }\n />\n ) : (\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n {collaborations.map((c) => (\n <button\n key={c.id}\n type=\"button\"\n onClick={() => navigateTo(`/collaborations/${c.id}`)}\n className=\"flex flex-col rounded-lg border border-border-seam bg-bg-surface p-4 text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md\"\n >\n <div className=\"flex items-start gap-3\">\n <BrandCreatorAvatars\n brandLogoFileId={c.brand?.logo?.id}\n brandSeed={c.brandId}\n creatorId={c.creatorId}\n size=\"sm\"\n className=\"shrink-0\"\n />\n <div className=\"min-w-0 flex-1\">\n <h3 className=\"truncate text-base font-semibold text-text-primary\">{c.title}</h3>\n <p className=\"truncate text-xs text-text-secondary\">\n {c.brand?.name ?? tr('coolandlovely.common.brand', 'Brand')} ×{' '}\n <ActorName id={c.creatorId} />\n </p>\n </div>\n <StatusBadge status={c.status} />\n </div>\n {c.brief && (\n <p className=\"mt-3 line-clamp-2 text-sm text-text-secondary\">{c.brief}</p>\n )}\n <div className=\"mt-3 flex items-center justify-between text-xs text-text-secondary\">\n <span className=\"rounded-full bg-bg-sunken px-2 py-0.5\">\n {tr(`coolandlovely.role.${c.role.toLowerCase()}`, titleCase(c.role))}\n </span>\n <span>{formatPrice(c.compensation, c.currency)}</span>\n </div>\n {c.startDate && (\n <p className=\"mt-2 text-xs text-text-secondary\">\n {tr('coolandlovely.common.starts', 'Starts')}{' '}\n {formatDate(c.startDate, { hour: undefined, minute: undefined })}\n </p>\n )}\n </button>\n ))}\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CreatorEarningsPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/commerce/CreatorEarningsPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAyBH,wBAAgB,mBAAmB,~~gCA8QlC~~"}
1	+ {"version":3,"file":"CreatorEarningsPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/commerce/CreatorEarningsPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAyBH,wBAAgB,mBAAmB,gCAuRlC"}

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

@@ -1,14 +1,14 @@
-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 { MetricsCard as r } from "../../components/MetricsCard.js";
-import { useTr as i } from "../../hooks/useTr.js";
+import { cn as e } from "../../utils/cn.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { MetricsCard as n } from "../../components/MetricsCard.js";
+import { useTr as r } from "../../hooks/useTr.js";
 import "../../hooks/index.js";
-import { StatusBadge as a } from "../../components/StatusBadge.js";
-import { ErrorView as o, LoadingView as s } from "../../components/StateViews.js";
-import { formatDate as c, formatPrice as l } from "../../utils/formatters.js";
-import { EmptyState as u } from "../../components/EmptyState.js";
-import { TextField as d } from "../../components/Field.js";
+import { StatusBadge as i } from "../../components/StatusBadge.js";
+import { ErrorView as a, LoadingView as o } from "../../components/StateViews.js";
+import { formatDate as s, formatPrice as c } from "../../utils/formatters.js";
+import { EmptyState as l } from "../../components/EmptyState.js";
+import { TextField as u } from "../../components/Field.js";
+import { useContextNavigation as d } from "../../hooks/useContextNavigation.js";
 import { useMyCollaborationPayouts as f, useMyCreatorEarnings as p, useMyCreatorEarningsSummary as m, useRequestCreatorPayout as h } from "../../hooks/useCommerceApi.js";
 import { CreatorAnalyticsSection as g } from "./CreatorAnalyticsSection.js";
 import { useState as _ } from "react";
@@ -17,49 +17,58 @@ import { jsx as b, jsxs as x } from "react/jsx-runtime";
 import { GlassCard as S } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/commerce/CreatorEarningsPage.tsx
 function C() {
-	let C = i(), w = m(), T = p(), E = f(), D = h(), { navigateTo: O } = e(), [k, A] = _(""), j = C("coolandlovely.earnings.title", "Creator earnings");
-	if (w.isLoading || T.isLoading) return /* @__PURE__ */ b(n, {
+	let C = r(), w = m(), T = p(), E = f(), D = h(), O = d(), [k, A] = _(""), j = C("coolandlovely.earnings.title", "Creator earnings");
+	if (w.isLoading || T.isLoading) return /* @__PURE__ */ b(t, {
 		title: j,
-		children: /* @__PURE__ */ b(s, {})
+		children: /* @__PURE__ */ b(o, {})
 	});
-	if (w.isError || T.isError || !w.data || !T.data) return /* @__PURE__ */ b(n, {
+	if (w.isError || T.isError || !w.data || !T.data) return /* @__PURE__ */ b(t, {
 		title: j,
-		children: /* @__PURE__ */ b(o, { onRetry: () => {
+		children: /* @__PURE__ */ b(a, { onRetry: () => {
 			w.refetch(), T.refetch();
 		} })
 	});
 	let M = w.data, N = M.currency ?? "USD", P = Number(k), F = M.currency !== null && P > 0 && P <= M.availableAmount;
-	return /* @__PURE__ */ x(n, {
+	return /* @__PURE__ */ x(t, {
 		title: j,
 		description: C("coolandlovely.earnings.description", "You earn {{rate}}% of every piece bought from your looks, and the agreed fee of every collaboration a brand pays. Commissions become available {{days}} days after payment.", {
 			rate: Math.round(M.commissionRate * 100),
 			days: M.holdDays
 		}),
 		children: [
+			/* @__PURE__ */ b("div", {
+				className: "mb-5",
+				children: /* @__PURE__ */ b("button", {
+					type: "button",
+					className: "rounded-lg border border-border-seam px-4 py-2 text-sm text-text-primary hover:bg-bg-sunken",
+					onClick: () => O("/creator-marketplace"),
+					children: C("coolandlovely.marketplace.open", "Open creator marketplace")
+				})
+			}),
 			/* @__PURE__ */ b(g, {}),
 			/* @__PURE__ */ x("div", {
 				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 				"data-testid": "earnings-summary",
 				children: [
-					/* @__PURE__ */ b(r, {
+					/* @__PURE__ */ b(n, {
 						icon: /* @__PURE__ */ b(y, { className: "h-5 w-5" }),
 						label: C("coolandlovely.earnings.available", "Available"),
-						value: l(M.availableAmount, N)
+						value: c(M.availableAmount, N)
 					}),
-					/* @__PURE__ */ b(r, {
+					/* @__PURE__ */ b(n, {
 						icon: /* @__PURE__ */ b(y, { className: "h-5 w-5" }),
 						label: C("coolandlovely.earnings.pending", "In return window"),
-						value: l(M.pendingAmount, N)
+						value: c(M.pendingAmount, N)
 					}),
-					/* @__PURE__ */ b(r, {
+					/* @__PURE__ */ b(n, {
 						icon: /* @__PURE__ */ b(y, { className: "h-5 w-5" }),
 						label: C("coolandlovely.earnings.reserved", "Payout requested"),
-						value: l(M.reservedAmount, N)
+						value: c(M.reservedAmount, N)
 					}),
-					/* @__PURE__ */ b(r, {
+					/* @__PURE__ */ b(n, {
 						icon: /* @__PURE__ */ b(y, { className: "h-5 w-5" }),
 						label: C("coolandlovely.earnings.paid", "Paid out"),
-						value: l(M.paidAmount, N)
+						value: c(M.paidAmount, N)
 					})
 				]
 			}),
@@ -74,7 +83,7 @@ function C() {
 					children: [/* @__PURE__ */ b("h3", {
 						className: "mb-3 text-lg font-semibold text-text-primary",
 						children: C("coolandlovely.earnings.history", "Commission history")
-					}), T.data.items.length === 0 ? /* @__PURE__ */ b(u, {
+					}), T.data.items.length === 0 ? /* @__PURE__ */ b(l, {
 						icon: /* @__PURE__ */ b(y, { className: "h-8 w-8" }),
 						title: C("coolandlovely.earnings.emptyTitle", "No commissions yet"),
 						description: C("coolandlovely.earnings.emptyDescription", "Publish looks with catalogue pieces. When someone buys from your look, the commission shows up here.")
@@ -106,24 +115,24 @@ function C() {
 										children: C("coolandlovely.earnings.ledger", "Ledger")
 									})
 								] })
-							}), /* @__PURE__ */ b("tbody", { children: T.data.items.map((e) => /* @__PURE__ */ x("tr", {
+							}), /* @__PURE__ */ b("tbody", { children: T.data.items.map((t) => /* @__PURE__ */ x("tr", {
 								className: "border-t border-border-seam",
 								children: [
 									/* @__PURE__ */ b("td", {
 										className: "px-4 py-2 font-mono text-text-primary",
-										children: e.orderNumber ?? "—"
+										children: t.orderNumber ?? "—"
 									}),
 									/* @__PURE__ */ b("td", {
 										className: "px-4 py-2 text-right tabular-nums text-text-secondary",
-										children: l(e.saleAmount, e.currency)
+										children: c(t.saleAmount, t.currency)
 									}),
 									/* @__PURE__ */ b("td", {
-										className: t("px-4 py-2 text-right font-semibold tabular-nums text-text-primary", e.reversalStatus === "REVERSED" && "text-text-secondary line-through"),
-										children: l(e.amount, e.currency)
+										className: e("px-4 py-2 text-right font-semibold tabular-nums text-text-primary", t.reversalStatus === "REVERSED" && "text-text-secondary line-through"),
+										children: c(t.amount, t.currency)
 									}),
 									/* @__PURE__ */ b("td", {
 										className: "px-4 py-2 text-text-secondary",
-										children: c(e.availableAt, {
+										children: s(t.availableAt, {
 											hour: void 0,
 											minute: void 0
 										})
@@ -131,10 +140,10 @@ function C() {
 									/* @__PURE__ */ b("td", {
 										className: "px-4 py-2",
 										"data-testid": "earning-ledger-status",
-										children: /* @__PURE__ */ b(a, { status: e.reversalStatus === "REVERSED" || e.reversalStatus === "NOT_REVERSIBLE" ? e.reversalStatus : e.billingSyncStatus })
+										children: /* @__PURE__ */ b(i, { status: t.reversalStatus === "REVERSED" || t.reversalStatus === "NOT_REVERSIBLE" ? t.reversalStatus : t.billingSyncStatus })
 									})
 								]
-							}, e.id)) })]
+							}, t.id)) })]
 						})
 					})]
 				}), /* @__PURE__ */ x(S, {
@@ -149,13 +158,13 @@ function C() {
 							className: "text-sm text-text-secondary",
 							children: C("coolandlovely.earnings.requestHint", "Payouts are reviewed by the platform and sent to the payout account on your billing profile.")
 						}),
-						/* @__PURE__ */ b(d, {
+						/* @__PURE__ */ b(u, {
 							id: "coo-payout-amount",
 							type: "number",
 							label: C("coolandlovely.earnings.amount", "Amount ({{currency}})", { currency: N }),
 							value: k,
 							onChange: A,
-							hint: C("coolandlovely.earnings.maxHint", "Up to {{amount}}", { amount: l(M.availableAmount, N) })
+							hint: C("coolandlovely.earnings.maxHint", "Up to {{amount}}", { amount: c(M.availableAmount, N) })
 						}),
 						D.error && /* @__PURE__ */ b("p", {
 							className: "text-sm text-status-error-text",
@@ -164,7 +173,7 @@ function C() {
 						D.data && /* @__PURE__ */ b("p", {
 							className: "text-sm text-status-success-text",
 							children: C("coolandlovely.earnings.requested", "Payout of {{amount}} requested ({{status}}).", {
-								amount: l(D.data.requestedAmount, D.data.currency),
+								amount: c(D.data.requestedAmount, D.data.currency),
 								status: D.data.status
 							})
 						}),
@@ -235,22 +244,22 @@ function C() {
 								}),
 								/* @__PURE__ */ b("td", {
 									className: "px-4 py-2 text-right font-semibold tabular-nums text-text-primary",
-									children: l(e.amount, e.currency)
+									children: c(e.amount, e.currency)
 								}),
 								/* @__PURE__ */ b("td", {
 									className: "px-4 py-2",
-									children: /* @__PURE__ */ b(a, { status: e.status })
+									children: /* @__PURE__ */ b(i, { status: e.status })
 								}),
 								/* @__PURE__ */ b("td", {
 									className: "px-4 py-2 text-text-secondary",
-									children: e.earningAvailableAt ? c(e.earningAvailableAt, {
+									children: e.earningAvailableAt ? s(e.earningAvailableAt, {
 										hour: void 0,
 										minute: void 0
 									}) : "—"
 								}),
 								/* @__PURE__ */ b("td", {
 									className: "px-4 py-2",
-									children: e.earningSyncStatus ? /* @__PURE__ */ b(a, { status: e.earningSyncStatus }) : "—"
+									children: e.earningSyncStatus ? /* @__PURE__ */ b(i, { status: e.earningSyncStatus }) : "—"
 								})
 							]
 						}, e.id)) })]

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

	@@ -1 +1 @@
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 Collaboration fees (BOFF-9637): when a brand pays the agreed fee of a published collaboration,\n * it lands here too (`cooMyCollaborationPayouts`) and counts towards the same payable balance.\n /\n\nimport { useState } from 'react';\nimport { Loader2, Wallet } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\nimport { CreatorAnalyticsSection } from './CreatorAnalyticsSection';\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 useMyCollaborationPayouts,\n useMyCreatorEarnings,\n useMyCreatorEarningsSummary,\n useRequestCreatorPayout,\n} from '../../hooks/useCommerceApi';\nimport { cn } from '../../utils/cn';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { formatDate, formatPrice } from '../../utils/formatters';\n\nexport function CreatorEarningsPage() {\n const tr = useTr();\n const summary = useMyCreatorEarningsSummary();\n const earnings = useMyCreatorEarnings();\n const fees = useMyCollaborationPayouts();\n const payout = useRequestCreatorPayout();\n const { navigateTo } = useCoolAndLovely();\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, and the agreed fee of every collaboration a brand pays. Commissions become available {{days}} days after payment.',\n { rate: Math.round(s.commissionRate 100), days: s.holdDays }\n )}\n >\n <CreatorAnalyticsSection />\n <div\n className=\"mt-6 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\n className={cn(\n 'px-4 py-2 text-right font-semibold tabular-nums text-text-primary',\n earning.reversalStatus === 'REVERSED' &&\n 'text-text-secondary line-through'\n )}\n >\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\" data-testid=\"earning-ledger-status\">\n {/* A refunded line's commission is reversed (BOFF-9702). */}\n <StatusBadge\n status={\n earning.reversalStatus === 'REVERSED' \|\|\n earning.reversalStatus === 'NOT_REVERSIBLE'\n ? earning.reversalStatus\n : earning.billingSyncStatus\n }\n />\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\n <section className=\"mt-8\" data-testid=\"collaboration-fees\">\n <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">\n {tr('coolandlovely.earnings.feesTitle', 'Collaboration fees')}\n </h3>\n {fees.isError ? (\n <p className=\"text-sm text-status-error-text\">\n {tr('coolandlovely.earnings.feesError', 'Collaboration fees could not be loaded.')}\n </p>\n ) : !fees.data \|\| fees.data.items.length === 0 ? (\n <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n {fees.isLoading\n ? tr('coolandlovely.earnings.feesLoading', 'Loading collaboration fees…')\n : tr(\n 'coolandlovely.earnings.feesEmpty',\n 'When a brand pays the agreed fee of a published collaboration, it shows up here.'\n )}\n </p>\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\">\n {tr('coolandlovely.earnings.collaboration', 'Collaboration')}\n </th>\n <th className=\"px-4 py-2 text-right\">\n {tr('coolandlovely.earnings.fee', 'Fee')}\n </th>\n <th className=\"px-4 py-2\">\n {tr('coolandlovely.earnings.brandPayment', 'Brand payment')}\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 {fees.data.items.map((fee) => (\n <tr key={fee.id} className=\"border-t border-border-seam\">\n <td className=\"px-4 py-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo(`/collaborations/${fee.collaborationId}`)}\n className=\"text-left font-medium text-text-primary hover:underline\"\n >\n {fee.collaborationTitle ?? '—'}\n </button>\n </td>\n <td className=\"px-4 py-2 text-right font-semibold tabular-nums text-text-primary\">\n {formatPrice(fee.amount, fee.currency)}\n </td>\n <td className=\"px-4 py-2\">\n <StatusBadge status={fee.status} />\n </td>\n <td className=\"px-4 py-2 text-text-secondary\">\n {fee.earningAvailableAt\n ? formatDate(fee.earningAvailableAt, { hour: undefined, minute: undefined })\n : '—'}\n </td>\n <td className=\"px-4 py-2\">\n {fee.earningSyncStatus ? <StatusBadge status={fee.earningSyncStatus} /> : '—'}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n )}\n </section>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
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 Collaboration fees (BOFF-9637): when a brand pays the agreed fee of a published collaboration,\n * it lands here too (`cooMyCollaborationPayouts`) and counts towards the same payable balance.\n /\n\nimport { useContextNavigation } from '../../hooks/useContextNavigation';\nimport { useState } from 'react';\nimport { Loader2, Wallet } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\nimport { CreatorAnalyticsSection } from './CreatorAnalyticsSection';\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 useMyCollaborationPayouts,\n useMyCreatorEarnings,\n useMyCreatorEarningsSummary,\n useRequestCreatorPayout,\n} from '../../hooks/useCommerceApi';\nimport { cn } from '../../utils/cn';\nimport { formatDate, formatPrice } from '../../utils/formatters';\n\nexport function CreatorEarningsPage() {\n const tr = useTr();\n const summary = useMyCreatorEarningsSummary();\n const earnings = useMyCreatorEarnings();\n const fees = useMyCollaborationPayouts();\n const payout = useRequestCreatorPayout();\n const navigateTo = useContextNavigation();\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, and the agreed fee of every collaboration a brand pays. Commissions become available {{days}} days after payment.',\n { rate: Math.round(s.commissionRate 100), days: s.holdDays }\n )}\n >\n <div className=\"mb-5\">\n <button\n type=\"button\"\n className=\"rounded-lg border border-border-seam px-4 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n onClick={() => navigateTo('/creator-marketplace')}\n >\n {tr('coolandlovely.marketplace.open', 'Open creator marketplace')}\n </button>\n </div>\n <CreatorAnalyticsSection />\n <div\n className=\"mt-6 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\n className={cn(\n 'px-4 py-2 text-right font-semibold tabular-nums text-text-primary',\n earning.reversalStatus === 'REVERSED' &&\n 'text-text-secondary line-through'\n )}\n >\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\" data-testid=\"earning-ledger-status\">\n {/* A refunded line's commission is reversed (BOFF-9702). */}\n <StatusBadge\n status={\n earning.reversalStatus === 'REVERSED' \|\|\n earning.reversalStatus === 'NOT_REVERSIBLE'\n ? earning.reversalStatus\n : earning.billingSyncStatus\n }\n />\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\n <section className=\"mt-8\" data-testid=\"collaboration-fees\">\n <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">\n {tr('coolandlovely.earnings.feesTitle', 'Collaboration fees')}\n </h3>\n {fees.isError ? (\n <p className=\"text-sm text-status-error-text\">\n {tr('coolandlovely.earnings.feesError', 'Collaboration fees could not be loaded.')}\n </p>\n ) : !fees.data \|\| fees.data.items.length === 0 ? (\n <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n {fees.isLoading\n ? tr('coolandlovely.earnings.feesLoading', 'Loading collaboration fees…')\n : tr(\n 'coolandlovely.earnings.feesEmpty',\n 'When a brand pays the agreed fee of a published collaboration, it shows up here.'\n )}\n </p>\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\">\n {tr('coolandlovely.earnings.collaboration', 'Collaboration')}\n </th>\n <th className=\"px-4 py-2 text-right\">\n {tr('coolandlovely.earnings.fee', 'Fee')}\n </th>\n <th className=\"px-4 py-2\">\n {tr('coolandlovely.earnings.brandPayment', 'Brand payment')}\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 {fees.data.items.map((fee) => (\n <tr key={fee.id} className=\"border-t border-border-seam\">\n <td className=\"px-4 py-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo(`/collaborations/${fee.collaborationId}`)}\n className=\"text-left font-medium text-text-primary hover:underline\"\n >\n {fee.collaborationTitle ?? '—'}\n </button>\n </td>\n <td className=\"px-4 py-2 text-right font-semibold tabular-nums text-text-primary\">\n {formatPrice(fee.amount, fee.currency)}\n </td>\n <td className=\"px-4 py-2\">\n <StatusBadge status={fee.status} />\n </td>\n <td className=\"px-4 py-2 text-text-secondary\">\n {fee.earningAvailableAt\n ? formatDate(fee.earningAvailableAt, { hour: undefined, minute: undefined })\n : '—'}\n </td>\n <td className=\"px-4 py-2\">\n {fee.earningSyncStatus ? <StatusBadge status={fee.earningSyncStatus} /> : '—'}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n )}\n </section>\n </PageLayout>\n );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/marketplace/CreatorMarketplacePage.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare function CreatorMarketplacePage(): import("react").JSX.Element;
2	+ //# sourceMappingURL=CreatorMarketplacePage.d.ts.map

package/dist/coolandlovely/pages/marketplace/CreatorMarketplacePage.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"CreatorMarketplacePage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/marketplace/CreatorMarketplacePage.tsx"],"names":[],"mappings":"AAyhCA,wBAAgB,sBAAsB,gCAOrC"}