@burdenoff/microfe-billing 2026.530.3 → 2026.530.4

package/dist/billing/modules/promotions/pages/PromotionsListPage.js

@@ -0,0 +1,168 @@
+import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
+import { PageHeader as t } from "../../../shared/components/PageHeader.js";
+import "../../../shared/components/index.js";
+import { useBillingPermissions as n } from "../../../hooks/useBillingPermissions.js";
+import { useDeactivatePromotionMutation as r, useListPromotionsQuery as i, useUpdatePromotionMutation as a } from "../../../../generated/global-operations.js";
+import { useBillingNavigate as o } from "../../../hooks/useBillingNavigate.js";
+import { useState as s } from "react";
+import { Calendar as c, Gift as l, Plus as u, Tag as d, ToggleLeft as f, ToggleRight as p, Users as m } from "lucide-react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/billing/modules/promotions/pages/PromotionsListPage.tsx
+var _ = () => {
+	let _ = o(), v = n(), [y, b] = s(!1), [x, S] = s(null), { data: C, loading: w, refetch: T } = i({ variables: { includeInactive: y } }), [E] = r(), [D] = a();
+	if (!v.canManagePlans) return /* @__PURE__ */ h(e, { message: "You don't have permission to manage promotions." });
+	let O = C?.listPromotions ?? [], k = async (e, t) => {
+		S(e);
+		try {
+			t ? await E({ variables: { id: e } }) : await D({ variables: {
+				id: e,
+				input: { isActive: !0 }
+			} }), await T();
+		} finally {
+			S(null);
+		}
+	}, A = /* @__PURE__ */ new Date(), j = (e) => e.isActive ? new Date(e.expiresAt) < A ? {
+		text: "Expired",
+		cls: "bg-destructive/10 text-destructive"
+	} : new Date(e.startsAt) > A ? {
+		text: "Upcoming",
+		cls: "bg-primary/10 text-primary"
+	} : {
+		text: "Live",
+		cls: "bg-green-500/10 text-green-600"
+	} : {
+		text: "Inactive",
+		cls: "bg-muted text-muted-foreground"
+	};
+	return /* @__PURE__ */ g("div", {
+		className: "max-w-5xl mx-auto p-4 sm:p-6 space-y-6",
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ h(t, {
+					title: "Promotions",
+					description: "Time-bounded offers that grant bonus free renewal months to subscribers",
+					icon: /* @__PURE__ */ h(l, { className: "size-6" })
+				}), /* @__PURE__ */ g("button", {
+					onClick: () => _("/promotions/create"),
+					className: "flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 text-sm font-medium shrink-0",
+					children: [/* @__PURE__ */ h(u, { className: "size-4" }), "New Promotion"]
+				})]
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "flex items-center gap-3",
+				children: /* @__PURE__ */ g("label", {
+					className: "flex items-center gap-2 text-sm text-muted-foreground cursor-pointer select-none",
+					children: [/* @__PURE__ */ h("input", {
+						type: "checkbox",
+						checked: y,
+						onChange: (e) => b(e.target.checked),
+						className: "rounded border-border"
+					}), "Show inactive / expired"]
+				})
+			}),
+			w ? /* @__PURE__ */ h("div", {
+				className: "text-center py-16 text-muted-foreground",
+				children: "Loading promotions…"
+			}) : O.length === 0 ? /* @__PURE__ */ g("div", {
+				className: "text-center py-16 border border-dashed border-border rounded-xl",
+				children: [
+					/* @__PURE__ */ h(l, { className: "size-10 mx-auto mb-3 text-muted-foreground/50" }),
+					/* @__PURE__ */ h("p", {
+						className: "text-muted-foreground font-medium",
+						children: "No promotions yet"
+					}),
+					/* @__PURE__ */ h("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: "Create one to offer bonus months to early subscribers"
+					}),
+					/* @__PURE__ */ h("button", {
+						onClick: () => _("/promotions/create"),
+						className: "mt-4 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm",
+						children: "Create Promotion"
+					})
+				]
+			}) : /* @__PURE__ */ h("div", {
+				className: "space-y-3",
+				children: O.map((e) => {
+					let { text: t, cls: n } = j(e), r = x === e.id;
+					return /* @__PURE__ */ g("div", {
+						className: "bg-card border border-border rounded-xl p-5 flex flex-col sm:flex-row sm:items-center gap-4",
+						children: [/* @__PURE__ */ g("div", {
+							className: "flex-1 min-w-0",
+							children: [
+								/* @__PURE__ */ g("div", {
+									className: "flex items-center gap-2 mb-1",
+									children: [/* @__PURE__ */ h("span", {
+										className: "font-semibold text-foreground truncate",
+										children: e.name
+									}), /* @__PURE__ */ h("span", {
+										className: `text-xs font-medium px-2 py-0.5 rounded-full ${n}`,
+										children: t
+									})]
+								}),
+								e.description && /* @__PURE__ */ h("p", {
+									className: "text-sm text-muted-foreground mb-2 line-clamp-1",
+									children: e.description
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground",
+									children: [
+										/* @__PURE__ */ g("span", {
+											className: "flex items-center gap-1",
+											children: [
+												/* @__PURE__ */ h(l, { className: "size-3" }),
+												/* @__PURE__ */ h("strong", {
+													className: "text-foreground",
+													children: e.bonusMonths
+												}),
+												" bonus month",
+												e.bonusMonths === 1 ? "" : "s"
+											]
+										}),
+										/* @__PURE__ */ g("span", {
+											className: "flex items-center gap-1",
+											children: [
+												/* @__PURE__ */ h(c, { className: "size-3" }),
+												new Date(e.startsAt).toLocaleDateString(),
+												" –",
+												" ",
+												new Date(e.expiresAt).toLocaleDateString()
+											]
+										}),
+										/* @__PURE__ */ g("span", {
+											className: "flex items-center gap-1",
+											children: [
+												/* @__PURE__ */ h(m, { className: "size-3" }),
+												e.currentRedemptions,
+												e.maxRedemptions ? ` / ${e.maxRedemptions}` : "",
+												" redemptions"
+											]
+										}),
+										e.applicableProductIds.length > 0 && /* @__PURE__ */ g("span", {
+											className: "flex items-center gap-1",
+											children: [/* @__PURE__ */ h(d, { className: "size-3" }), e.applicableProductIds.join(", ")]
+										})
+									]
+								})
+							]
+						}), /* @__PURE__ */ h("div", {
+							className: "flex items-center gap-2 shrink-0",
+							children: /* @__PURE__ */ h("button", {
+								onClick: () => k(e.id, e.isActive),
+								disabled: r,
+								title: e.isActive ? "Deactivate" : "Reactivate",
+								className: `p-2 rounded-lg transition-colors ${e.isActive ? "text-green-600 hover:bg-green-50" : "text-muted-foreground hover:bg-muted"} disabled:opacity-50`,
+								children: e.isActive ? /* @__PURE__ */ h(p, { className: "size-5" }) : /* @__PURE__ */ h(f, { className: "size-5" })
+							})
+						})]
+					}, e.id);
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { _ as PromotionsListPage };
+
+//# sourceMappingURL=PromotionsListPage.js.map

package/dist/billing/modules/promotions/pages/PromotionsListPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotionsListPage.js","names":[],"sources":["../../../../../src/billing/modules/promotions/pages/PromotionsListPage.tsx"],"sourcesContent":["import { type FC, useState } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { Plus, Tag, Calendar, Users, ToggleLeft, ToggleRight, Gift } from 'lucide-react';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport {\n  useListPromotionsQuery,\n  useDeactivatePromotionMutation,\n  useUpdatePromotionMutation,\n} from '../../../../generated/global-operations';\n\nexport const PromotionsListPage: FC = () => {\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const [showInactive, setShowInactive] = useState(false);\n  const [actionId, setActionId] = useState<string | null>(null);\n\n  const { data, loading, refetch } = useListPromotionsQuery({\n    variables: { includeInactive: showInactive },\n  });\n\n  const [deactivatePromotion] = useDeactivatePromotionMutation();\n  const [updatePromotion] = useUpdatePromotionMutation();\n\n  if (!permissions.canManagePlans) {\n    return <AccessDenied message=\"You don't have permission to manage promotions.\" />;\n  }\n\n  const promotions = data?.listPromotions ?? [];\n\n  const handleToggle = async (id: string, currentlyActive: boolean) => {\n    setActionId(id);\n    try {\n      if (currentlyActive) {\n        await deactivatePromotion({ variables: { id } });\n      } else {\n        await updatePromotion({ variables: { id, input: { isActive: true } } });\n      }\n      await refetch();\n    } finally {\n      setActionId(null);\n    }\n  };\n\n  const now = new Date();\n  const statusLabel = (p: { isActive: boolean; startsAt: string; expiresAt: string }) => {\n    if (!p.isActive) return { text: 'Inactive', cls: 'bg-muted text-muted-foreground' };\n    if (new Date(p.expiresAt) < now)\n      return { text: 'Expired', cls: 'bg-destructive/10 text-destructive' };\n    if (new Date(p.startsAt) > now) return { text: 'Upcoming', cls: 'bg-primary/10 text-primary' };\n    return { text: 'Live', cls: 'bg-green-500/10 text-green-600' };\n  };\n\n  return (\n    <div className=\"max-w-5xl mx-auto p-4 sm:p-6 space-y-6\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <PageHeader\n          title=\"Promotions\"\n          description=\"Time-bounded offers that grant bonus free renewal months to subscribers\"\n          icon={<Gift className=\"size-6\" />}\n        />\n        <button\n          onClick={() => navigateTo('/promotions/create')}\n          className=\"flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 text-sm font-medium shrink-0\"\n        >\n          <Plus className=\"size-4\" />\n          New Promotion\n        </button>\n      </div>\n\n      {/* Filter */}\n      <div className=\"flex items-center gap-3\">\n        <label className=\"flex items-center gap-2 text-sm text-muted-foreground cursor-pointer select-none\">\n          <input\n            type=\"checkbox\"\n            checked={showInactive}\n            onChange={(e) => setShowInactive(e.target.checked)}\n            className=\"rounded border-border\"\n          />\n          Show inactive / expired\n        </label>\n      </div>\n\n      {loading ? (\n        <div className=\"text-center py-16 text-muted-foreground\">Loading promotions…</div>\n      ) : promotions.length === 0 ? (\n        <div className=\"text-center py-16 border border-dashed border-border rounded-xl\">\n          <Gift className=\"size-10 mx-auto mb-3 text-muted-foreground/50\" />\n          <p className=\"text-muted-foreground font-medium\">No promotions yet</p>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            Create one to offer bonus months to early subscribers\n          </p>\n          <button\n            onClick={() => navigateTo('/promotions/create')}\n            className=\"mt-4 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm\"\n          >\n            Create Promotion\n          </button>\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {promotions.map((p: (typeof promotions)[number]) => {\n            const { text, cls } = statusLabel(p);\n            const busy = actionId === p.id;\n            return (\n              <div\n                key={p.id}\n                className=\"bg-card border border-border rounded-xl p-5 flex flex-col sm:flex-row sm:items-center gap-4\"\n              >\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"flex items-center gap-2 mb-1\">\n                    <span className=\"font-semibold text-foreground truncate\">{p.name}</span>\n                    <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${cls}`}>\n                      {text}\n                    </span>\n                  </div>\n                  {p.description && (\n                    <p className=\"text-sm text-muted-foreground mb-2 line-clamp-1\">\n                      {p.description}\n                    </p>\n                  )}\n                  <div className=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground\">\n                    <span className=\"flex items-center gap-1\">\n                      <Gift className=\"size-3\" />\n                      <strong className=\"text-foreground\">{p.bonusMonths}</strong> bonus month\n                      {p.bonusMonths !== 1 ? 's' : ''}\n                    </span>\n                    <span className=\"flex items-center gap-1\">\n                      <Calendar className=\"size-3\" />\n                      {new Date(p.startsAt).toLocaleDateString()} –{' '}\n                      {new Date(p.expiresAt).toLocaleDateString()}\n                    </span>\n                    <span className=\"flex items-center gap-1\">\n                      <Users className=\"size-3\" />\n                      {p.currentRedemptions}\n                      {p.maxRedemptions ? ` / ${p.maxRedemptions}` : ''} redemptions\n                    </span>\n                    {p.applicableProductIds.length > 0 && (\n                      <span className=\"flex items-center gap-1\">\n                        <Tag className=\"size-3\" />\n                        {p.applicableProductIds.join(', ')}\n                      </span>\n                    )}\n                  </div>\n                </div>\n\n                <div className=\"flex items-center gap-2 shrink-0\">\n                  <button\n                    onClick={() => handleToggle(p.id, p.isActive)}\n                    disabled={busy}\n                    title={p.isActive ? 'Deactivate' : 'Reactivate'}\n                    className={`p-2 rounded-lg transition-colors ${\n                      p.isActive\n                        ? 'text-green-600 hover:bg-green-50'\n                        : 'text-muted-foreground hover:bg-muted'\n                    } disabled:opacity-50`}\n                  >\n                    {p.isActive ? (\n                      <ToggleRight className=\"size-5\" />\n                    ) : (\n                      <ToggleLeft className=\"size-5\" />\n                    )}\n                  </button>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/promotions/pages/index.js

@@ -0,0 +1,2 @@
+import "./PromotionsListPage.js";
+import "./CreatePromotionPage.js";