@m5kdev/web-ui 0.8.7 → 0.8.8

package/dist/src/modules/billing/components/BillingInvoicePage.js

@@ -0,0 +1,164 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+let _heroui_react = require("@heroui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let _m5kdev_frontend_modules_billing_hooks_useSubscription = require("@m5kdev/frontend/modules/billing/hooks/useSubscription");
+//#region src/modules/billing/components/BillingInvoicePage.tsx
+function BillingInvoicePage({ useTRPC, serverUrl }) {
+	const { data: invoices, isLoading } = (0, _tanstack_react_query.useQuery)(useTRPC().billing.listInvoices.queryOptions());
+	const { data: activeSubscription, isLoading: isLoadingSubscriptions } = (0, _m5kdev_frontend_modules_billing_hooks_useSubscription.useSubscription)();
+	const formatCurrency = (amount, currency) => {
+		return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: currency.toUpperCase()
+		}).format(amount / 100);
+	};
+	const formatDate = (timestamp) => {
+		return (timestamp instanceof Date ? timestamp : /* @__PURE__ */ new Date(timestamp * 1e3)).toLocaleDateString(void 0, {
+			year: "numeric",
+			month: "long",
+			day: "numeric"
+		});
+	};
+	const cancelAt = activeSubscription?.cancelAt || activeSubscription?.cancelAtPeriodEnd;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "container mx-auto p-10 space-y-8",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.CardHeader, {
+			className: "flex flex-col items-start gap-1 px-6 pt-6",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "text-xl font-bold",
+				children: "Active Subscription"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-small text-default-500",
+				children: "Manage your active subscription."
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.CardBody, {
+			className: "px-6 pb-6",
+			children: isLoadingSubscriptions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-center py-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Spinner, {})
+			}) : !activeSubscription ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center justify-center py-8 text-center gap-4",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "p-4 rounded-full bg-default-100",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircle, { className: "w-8 h-8 text-default-500" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-lg font-medium",
+						children: "No active subscription"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-small text-default-500",
+						children: "You are currently on the free tier. Upgrade to access premium features."
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Button, {
+						as: _heroui_react.Link,
+						href: "/pricing",
+						color: "primary",
+						children: "View Plans"
+					})
+				]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "space-y-6",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 p-4 rounded-lg bg-default-50 border border-default-200",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "text-lg font-semibold capitalize",
+								children: activeSubscription.plan || "Premium Plan"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Chip, {
+								color: cancelAt ? "danger" : activeSubscription.status === "active" ? "success" : "warning",
+								variant: "flat",
+								size: "sm",
+								startContent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "w-3 h-3 ml-1" }),
+								children: cancelAt ? "Cancelled" : activeSubscription.status
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "text-small text-default-500 flex items-center gap-2",
+							children: [
+								cancelAt ? "Your subscription will end on " : "Next billing date: ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-medium text-foreground",
+									children: activeSubscription.periodEnd ? formatDate(activeSubscription.periodEnd) : "N/A"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-small text-default-500",
+									children: `(${activeSubscription.interval === "month" ? "Monthly" : "Annually"})`
+								})
+							]
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex gap-3",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Button, {
+							variant: "bordered",
+							as: "a",
+							href: `${serverUrl}/stripe/portal`,
+							children: "Manage Subscription"
+						})
+					})]
+				})
+			})
+		})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.CardHeader, {
+			className: "flex flex-col items-start gap-1 px-6 pt-6",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "text-xl font-bold",
+				children: "Invoices"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-small text-default-500",
+				children: "View your invoice history and download past invoices."
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.CardBody, {
+			className: "px-6 pb-6",
+			children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-center py-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Spinner, {})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Table, {
+				"aria-label": "Invoices table",
+				removeWrapper: true,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.TableHeader, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.TableColumn, { children: "Date" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.TableColumn, { children: "Amount" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.TableColumn, { children: "Status" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.TableColumn, {
+						align: "end",
+						children: "Action"
+					})
+				] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.TableBody, {
+					emptyContent: "No invoices found.",
+					children: (invoices || []).map((invoice) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.TableRow, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.TableCell, { children: formatDate(invoice.created) }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.TableCell, { children: formatCurrency(invoice.total, invoice.currency) }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Chip, {
+							color: invoice.status === "paid" ? "success" : "default",
+							variant: "flat",
+							size: "sm",
+							children: invoice.status
+						}) }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.TableCell, {
+							className: "text-right",
+							children: invoice.hosted_invoice_url && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Button, {
+								as: _heroui_react.Link,
+								href: invoice.hosted_invoice_url,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								variant: "light",
+								size: "sm",
+								endContent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, { className: "h-4 w-4" }),
+								children: "View"
+							})
+						})
+					] }, invoice.id))
+				})]
+			})
+		})] })]
+	});
+}
+//#endregion
+exports.BillingInvoicePage = BillingInvoicePage;
+
+//# sourceMappingURL=BillingInvoicePage.js.map

package/dist/src/modules/billing/components/BillingInvoicePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingInvoicePage.js","names":["Card","CardHeader","CardBody","Spinner","AlertCircle","Button","Link","Chip","CheckCircle2","Table","TableHeader","TableColumn","TableBody","TableRow","TableCell","ExternalLink"],"sources":["../../../../../src/modules/billing/components/BillingInvoicePage.tsx"],"sourcesContent":["import {\r\n  Button,\r\n  Card,\r\n  CardBody,\r\n  CardHeader,\r\n  Chip,\r\n  Link,\r\n  Spinner,\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableColumn,\r\n  TableHeader,\r\n  TableRow,\r\n} from \"@heroui/react\";\r\nimport { useSubscription } from \"@m5kdev/frontend/modules/billing/hooks/useSubscription\";\r\nimport { useQuery } from \"@tanstack/react-query\";\r\nimport { AlertCircle, CheckCircle2, ExternalLink } from \"lucide-react\";\r\n\r\nimport type { UseBackendTRPC } from \"../../../types\";\r\n\r\ninterface BillingInvoicePageProps {\r\n  useTRPC: UseBackendTRPC;\r\n  serverUrl: string;\r\n}\r\n\r\nexport function BillingInvoicePage({ useTRPC, serverUrl }: BillingInvoicePageProps) {\r\n  const trpc = useTRPC();\r\n  const { data: invoices, isLoading } = useQuery(trpc.billing.listInvoices.queryOptions());\r\n\r\n  const { data: activeSubscription, isLoading: isLoadingSubscriptions } = useSubscription();\r\n  const formatCurrency = (amount: number, currency: string) => {\r\n    return new Intl.NumberFormat(\"en-US\", {\r\n      style: \"currency\",\r\n      currency: currency.toUpperCase(),\r\n    }).format(amount / 100);\r\n  };\r\n\r\n  const formatDate = (timestamp: number | Date) => {\r\n    const date = timestamp instanceof Date ? timestamp : new Date(timestamp * 1000);\r\n    return date.toLocaleDateString(undefined, {\r\n      year: \"numeric\",\r\n      month: \"long\",\r\n      day: \"numeric\",\r\n    });\r\n  };\r\n\r\n  const cancelAt = activeSubscription?.cancelAt || activeSubscription?.cancelAtPeriodEnd;\r\n  return (\r\n    <div className=\"container mx-auto p-10 space-y-8\">\r\n      <Card>\r\n        <CardHeader className=\"flex flex-col items-start gap-1 px-6 pt-6\">\r\n          <h1 className=\"text-xl font-bold\">Active Subscription</h1>\r\n          <p className=\"text-small text-default-500\">Manage your active subscription.</p>\r\n        </CardHeader>\r\n        <CardBody className=\"px-6 pb-6\">\r\n          {isLoadingSubscriptions ? (\r\n            <div className=\"flex justify-center py-8\">\r\n              <Spinner />\r\n            </div>\r\n          ) : !activeSubscription ? (\r\n            <div className=\"flex flex-col items-center justify-center py-8 text-center gap-4\">\r\n              <div className=\"p-4 rounded-full bg-default-100\">\r\n                <AlertCircle className=\"w-8 h-8 text-default-500\" />\r\n              </div>\r\n              <div>\r\n                <p className=\"text-lg font-medium\">No active subscription</p>\r\n                <p className=\"text-small text-default-500\">\r\n                  You are currently on the free tier. Upgrade to access premium features.\r\n                </p>\r\n              </div>\r\n              <Button as={Link} href=\"/pricing\" color=\"primary\">\r\n                View Plans\r\n              </Button>\r\n            </div>\r\n          ) : (\r\n            <div className=\"space-y-6\">\r\n              <div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 p-4 rounded-lg bg-default-50 border border-default-200\">\r\n                <div className=\"space-y-1\">\r\n                  <div className=\"flex items-center gap-2\">\r\n                    <h3 className=\"text-lg font-semibold capitalize\">\r\n                      {activeSubscription.plan || \"Premium Plan\"}\r\n                    </h3>\r\n\r\n                    <Chip\r\n                      color={\r\n                        cancelAt\r\n                          ? \"danger\"\r\n                          : activeSubscription.status === \"active\"\r\n                            ? \"success\"\r\n                            : \"warning\"\r\n                      }\r\n                      variant=\"flat\"\r\n                      size=\"sm\"\r\n                      startContent={<CheckCircle2 className=\"w-3 h-3 ml-1\" />}\r\n                    >\r\n                      {cancelAt ? \"Cancelled\" : activeSubscription.status}\r\n                    </Chip>\r\n                  </div>\r\n                  <p className=\"text-small text-default-500 flex items-center gap-2\">\r\n                    {cancelAt ? \"Your subscription will end on \" : \"Next billing date: \"}\r\n                    <span className=\"font-medium text-foreground\">\r\n                      {activeSubscription.periodEnd\r\n                        ? formatDate(activeSubscription.periodEnd)\r\n                        : \"N/A\"}\r\n                    </span>\r\n                    <span className=\"text-small text-default-500\">\r\n                      {`(${activeSubscription.interval === \"month\" ? \"Monthly\" : \"Annually\"})`}\r\n                    </span>\r\n                  </p>\r\n                </div>\r\n                <div className=\"flex gap-3\">\r\n                  <Button variant=\"bordered\" as=\"a\" href={`${serverUrl}/stripe/portal`}>\r\n                    Manage Subscription\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </CardBody>\r\n      </Card>\r\n      <Card>\r\n        <CardHeader className=\"flex flex-col items-start gap-1 px-6 pt-6\">\r\n          <h1 className=\"text-xl font-bold\">Invoices</h1>\r\n          <p className=\"text-small text-default-500\">\r\n            View your invoice history and download past invoices.\r\n          </p>\r\n        </CardHeader>\r\n        <CardBody className=\"px-6 pb-6\">\r\n          {isLoading ? (\r\n            <div className=\"flex justify-center py-8\">\r\n              <Spinner />\r\n            </div>\r\n          ) : (\r\n            <Table aria-label=\"Invoices table\" removeWrapper>\r\n              <TableHeader>\r\n                <TableColumn>Date</TableColumn>\r\n                <TableColumn>Amount</TableColumn>\r\n                <TableColumn>Status</TableColumn>\r\n                <TableColumn align=\"end\">Action</TableColumn>\r\n              </TableHeader>\r\n              <TableBody emptyContent=\"No invoices found.\">\r\n                {(invoices || []).map((invoice) => (\r\n                  <TableRow key={invoice.id}>\r\n                    <TableCell>{formatDate(invoice.created)}</TableCell>\r\n                    <TableCell>{formatCurrency(invoice.total, invoice.currency)}</TableCell>\r\n                    <TableCell>\r\n                      <Chip\r\n                        color={invoice.status === \"paid\" ? \"success\" : \"default\"}\r\n                        variant=\"flat\"\r\n                        size=\"sm\"\r\n                      >\r\n                        {invoice.status}\r\n                      </Chip>\r\n                    </TableCell>\r\n                    <TableCell className=\"text-right\">\r\n                      {invoice.hosted_invoice_url && (\r\n                        <Button\r\n                          as={Link}\r\n                          href={invoice.hosted_invoice_url}\r\n                          target=\"_blank\"\r\n                          rel=\"noopener noreferrer\"\r\n                          variant=\"light\"\r\n                          size=\"sm\"\r\n                          endContent={<ExternalLink className=\"h-4 w-4\" />}\r\n                        >\r\n                          View\r\n                        </Button>\r\n                      )}\r\n                    </TableCell>\r\n                  </TableRow>\r\n                ))}\r\n              </TableBody>\r\n            </Table>\r\n          )}\r\n        </CardBody>\r\n      </Card>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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"}

package/dist/src/modules/billing/components/BillingInvoicePage.mjs

@@ -1,8 +1,8 @@
-import { AlertCircle, CheckCircle2, ExternalLink } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Card, CardBody, CardHeader, Chip, Link, Spinner, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@heroui/react";
-import { useSubscription } from "@m5kdev/frontend/modules/billing/hooks/useSubscription";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckCircle2, ExternalLink } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
+import { useSubscription } from "@m5kdev/frontend/modules/billing/hooks/useSubscription";
 //#region src/modules/billing/components/BillingInvoicePage.tsx
 function BillingInvoicePage({ useTRPC, serverUrl }) {
 	const { data: invoices, isLoading } = useQuery(useTRPC().billing.listInvoices.queryOptions());

package/dist/src/modules/billing/components/BillingPlanSelect.d.ts

@@ -0,0 +1,13 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
+
+//#region src/modules/billing/components/BillingPlanSelect.d.ts
+interface BillingPlanSelectProps {
+  plans: StripePlan[];
+}
+declare function BillingPlanSelect({
+  plans
+}: BillingPlanSelectProps): _$react_jsx_runtime0.JSX.Element | "Multiple plans selection not implemented yet";
+//#endregion
+export { BillingPlanSelect };
+//# sourceMappingURL=BillingPlanSelect.d.ts.map

package/dist/src/modules/billing/components/BillingPlanSelect.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+const require_src_modules_billing_components_BillingSinglePlanSelect = require("./BillingSinglePlanSelect.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/modules/billing/components/BillingPlanSelect.tsx
+function BillingPlanSelect({ plans }) {
+	if (plans.length === 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_modules_billing_components_BillingSinglePlanSelect.BillingSinglePlanSelect, { plan: plans[0] });
+	return "Multiple plans selection not implemented yet";
+}
+//#endregion
+exports.BillingPlanSelect = BillingPlanSelect;
+
+//# sourceMappingURL=BillingPlanSelect.js.map

package/dist/src/modules/billing/components/BillingPlanSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingPlanSelect.js","names":["BillingSinglePlanSelect"],"sources":["../../../../../src/modules/billing/components/BillingPlanSelect.tsx"],"sourcesContent":["import type { StripePlan } from \"@m5kdev/commons/modules/billing/billing.types\";\r\nimport { BillingSinglePlanSelect } from \"./BillingSinglePlanSelect\";\r\n\r\ninterface BillingPlanSelectProps {\r\n  plans: StripePlan[];\r\n}\r\n\r\nexport function BillingPlanSelect({ plans }: BillingPlanSelectProps) {\r\n  if (plans.length === 1) {\r\n    return <BillingSinglePlanSelect plan={plans[0]} />;\r\n  }\r\n\r\n  return \"Multiple plans selection not implemented yet\";\r\n}\r\n"],"mappings":";;;;;AAOA,SAAgB,kBAAkB,EAAE,SAAiC;AACnE,KAAI,MAAM,WAAW,EACnB,QAAO,iBAAA,GAAA,kBAAA,KAACA,+DAAAA,yBAAD,EAAyB,MAAM,MAAM,IAAM,CAAA;AAGpD,QAAO"}

package/dist/src/modules/billing/components/BillingRouter.d.ts

@@ -0,0 +1,17 @@
+import { UseBackendTRPC } from "../../../types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
+
+//#region src/modules/billing/components/BillingRouter.d.ts
+interface BillingRouterProps {
+  useTRPC?: UseBackendTRPC;
+  serverUrl: string;
+  plans: StripePlan[];
+}
+declare function BillingRouter({
+  useTRPC,
+  serverUrl
+}: BillingRouterProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { BillingRouter };
+//# sourceMappingURL=BillingRouter.d.ts.map

package/dist/src/modules/billing/components/BillingRouter.js

@@ -0,0 +1,23 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+const require_src_modules_billing_components_BillingInvoicePage = require("./BillingInvoicePage.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_router = require("react-router");
+//#region src/modules/billing/components/BillingRouter.tsx
+function BillingRouter({ useTRPC, serverUrl }) {
+	if (!useTRPC) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router.Route, {
+		path: "billing",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router.Route, {
+			index: true,
+			element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_modules_billing_components_BillingInvoicePage.BillingInvoicePage, {
+				useTRPC,
+				serverUrl
+			})
+		})
+	});
+}
+//#endregion
+exports.BillingRouter = BillingRouter;
+
+//# sourceMappingURL=BillingRouter.js.map

package/dist/src/modules/billing/components/BillingRouter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingRouter.js","names":["Route","BillingInvoicePage"],"sources":["../../../../../src/modules/billing/components/BillingRouter.tsx"],"sourcesContent":["import type { StripePlan } from \"@m5kdev/commons/modules/billing/billing.types\";\r\nimport { Route } from \"react-router\";\r\nimport { BillingInvoicePage } from \"./BillingInvoicePage\";\r\nimport type { UseBackendTRPC } from \"../../../types\";\r\n\r\ninterface BillingRouterProps {\r\n  useTRPC?: UseBackendTRPC;\r\n  serverUrl: string;\r\n  plans: StripePlan[];\r\n}\r\n\r\nexport function BillingRouter({ useTRPC, serverUrl }: BillingRouterProps) {\r\n  if (!useTRPC) return null;\r\n\r\n  return (\r\n    <Route path=\"billing\">\r\n      <Route index element={<BillingInvoicePage useTRPC={useTRPC} serverUrl={serverUrl} />} />\r\n    </Route>\r\n  );\r\n}\r\n"],"mappings":";;;;;;AAWA,SAAgB,cAAc,EAAE,SAAS,aAAiC;AACxE,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,iBAAA,GAAA,kBAAA,KAACA,aAAAA,OAAD;EAAO,MAAK;YACV,iBAAA,GAAA,kBAAA,KAACA,aAAAA,OAAD;GAAO,OAAA;GAAM,SAAS,iBAAA,GAAA,kBAAA,KAACC,0DAAAA,oBAAD;IAA6B;IAAoB;IAAa,CAAA;GAAI,CAAA;EAClF,CAAA"}

package/dist/src/modules/billing/components/BillingSinglePlanSelect.d.ts

@@ -0,0 +1,18 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
+
+//#region src/modules/billing/components/BillingSinglePlanSelect.d.ts
+interface BillingSinglePlanSelectProps {
+  plan: StripePlan;
+  features?: string[];
+  /** URL for the Terms of Service link. Override for your app's legal page. */
+  termsOfServiceUrl?: string;
+}
+declare function BillingSinglePlanSelect({
+  plan,
+  termsOfServiceUrl,
+  features
+}: BillingSinglePlanSelectProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { BillingSinglePlanSelect, BillingSinglePlanSelectProps };
+//# sourceMappingURL=BillingSinglePlanSelect.d.ts.map

package/dist/src/modules/billing/components/BillingSinglePlanSelect.js

@@ -0,0 +1,169 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+const require_src_lib_utils = require("../../../lib/utils.js");
+const require_src_components_ui_card = require("../../../components/ui/card.js");
+const require_src_components_ui_tabs = require("../../../components/ui/tabs.js");
+let react = require("react");
+let _heroui_react = require("@heroui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let react_i18next = require("react-i18next");
+let react_router = require("react-router");
+let _m5kdev_frontend_modules_auth_auth_lib = require("@m5kdev/frontend/modules/auth/auth.lib");
+//#region src/modules/billing/components/BillingSinglePlanSelect.tsx
+function BillingSinglePlanSelect({ plan, termsOfServiceUrl, features = [
+	"Unlimited access to all features",
+	"Priority support",
+	"Early access to new features",
+	"Secure data storage",
+	"Cancel anytime"
+] }) {
+	const { t } = (0, react_i18next.useTranslation)("web-ui");
+	const navigate = (0, react_router.useNavigate)();
+	const [billingInterval, setBillingInterval] = (0, react.useState)("annually");
+	const handleLogout = async () => {
+		await _m5kdev_frontend_modules_auth_auth_lib.authClient.signOut();
+		navigate("/login");
+	};
+	const isAnnual = billingInterval === "annually";
+	const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;
+	const hasAnnualOption = !!plan.annualDiscountPriceId;
+	const priceUnitAmount = plan.priceUnitAmount ?? NaN;
+	const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? NaN;
+	const priceDisplay = {
+		monthly: {
+			amount: `$${priceUnitAmount / 100}`,
+			label: "/ month"
+		},
+		annually: {
+			amount: `$${annualPriceUnitAmount / 100 / 12}`,
+			originalAmount: `$${priceUnitAmount / 100}`,
+			label: "/ month, billed annually",
+			discountLabel: plan.annualPriceUnitAmount ? `Save ${Math.floor((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount * 100).toFixed(0)}%` : ""
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-full max-w-3xl mx-auto px-4 py-8",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-8",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-center space-y-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "text-3xl font-bold tracking-tight sm:text-4xl",
+						children: t("billing.plans.title", "Simple, transparent pricing")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-muted-foreground text-lg",
+						children: t("billing.plans.subtitle", "Choose the plan that's right for you")
+					})]
+				}),
+				hasAnnualOption && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_tabs.Tabs, {
+					defaultValue: "annually",
+					value: billingInterval,
+					onValueChange: (v) => setBillingInterval(v),
+					className: "w-full max-w-xs",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_tabs.TabsList, {
+						className: "grid w-full grid-cols-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_tabs.TabsTrigger, {
+							value: "monthly",
+							children: "Monthly"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_tabs.TabsTrigger, {
+							value: "annually",
+							className: "relative",
+							children: ["Annually", priceDisplay.annually.discountLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12",
+								children: priceDisplay.annually.discountLabel
+							})]
+						})]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_card.Card, {
+					className: require_src_lib_utils.cn("w-full max-w-md border-2 border-primary"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_card.CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_card.CardTitle, {
+							className: "flex justify-between items-start",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-xl font-bold",
+								children: plan.name
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_card.CardDescription, { children: isAnnual ? "Perfect for long-term commitment" : "Flexible monthly billing" })] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_card.CardContent, {
+							className: "space-y-6",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-baseline gap-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-4xl font-bold",
+										children: isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground",
+										children: isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label
+									})]
+								}),
+								isAnnual && priceDisplay.annually.originalAmount && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+									className: "text-sm text-green-500 line-through",
+									children: [
+										" ",
+										priceDisplay.annually.originalAmount,
+										" / month"
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "space-y-3",
+									children: features.map((feature) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3 w-3 text-primary" })
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-sm text-muted-foreground",
+											children: feature
+										})]
+									}, feature))
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_card.CardFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Button, {
+							className: "w-full",
+							color: "primary",
+							size: "lg",
+							as: "a",
+							href: `${{}.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`,
+							children: isAnnual ? "Subscribe Annually" : "Subscribe Monthly"
+						}) })
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							href: termsOfServiceUrl,
+							rel: "noopener noreferrer",
+							target: "_blank",
+							children: t("common.termsOfService", "Terms of Service")
+						}),
+						" ",
+						t("common.and", "and"),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router.Link, {
+							to: "/privacy",
+							children: t("common.privacyPolicy", "Privacy Policy")
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "fixed bottom-4 left-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Button, {
+				variant: "light",
+				onPress: handleLogout,
+				className: "gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LogOut, { className: "h-4 w-4" }), t("sidebar.user.logout", "Log out")]
+			})
+		})]
+	});
+}
+//#endregion
+exports.BillingSinglePlanSelect = BillingSinglePlanSelect;
+
+//# sourceMappingURL=BillingSinglePlanSelect.js.map

package/dist/src/modules/billing/components/BillingSinglePlanSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingSinglePlanSelect.js","names":["authClient","Tabs","TabsList","TabsTrigger","Card","cn","CardHeader","CardTitle","CardDescription","CardContent","Check","CardFooter","Button","Link","LogOut"],"sources":["../../../../../src/modules/billing/components/BillingSinglePlanSelect.tsx"],"sourcesContent":["import { Button } from \"@heroui/react\";\r\nimport type { StripePlan } from \"@m5kdev/commons/modules/billing/billing.types\";\r\nimport { authClient } from \"@m5kdev/frontend/modules/auth/auth.lib\";\r\nimport { Check, LogOut } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Link, useNavigate } from \"react-router\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"../../../components/ui/card\";\r\nimport { Tabs, TabsList, TabsTrigger } from \"../../../components/ui/tabs\";\r\nimport { cn } from \"../../../lib/utils\";\r\n\r\nexport interface BillingSinglePlanSelectProps {\r\n  plan: StripePlan;\r\n  features?: string[];\r\n  /** URL for the Terms of Service link. Override for your app's legal page. */\r\n  termsOfServiceUrl?: string;\r\n}\r\n\r\nexport function BillingSinglePlanSelect({\r\n  plan,\r\n  termsOfServiceUrl,\r\n  features = [\r\n    \"Unlimited access to all features\",\r\n    \"Priority support\",\r\n    \"Early access to new features\",\r\n    \"Secure data storage\",\r\n    \"Cancel anytime\",\r\n  ],\r\n}: BillingSinglePlanSelectProps) {\r\n  const { t } = useTranslation(\"web-ui\");\r\n  const navigate = useNavigate();\r\n  const [billingInterval, setBillingInterval] = useState<\"monthly\" | \"annually\">(\"annually\");\r\n\r\n  const handleLogout = async () => {\r\n    await authClient.signOut();\r\n    navigate(\"/login\");\r\n  };\r\n\r\n  const isAnnual = billingInterval === \"annually\";\r\n  const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;\r\n\r\n  // Fallback if no annual price ID exists\r\n  const hasAnnualOption = !!plan.annualDiscountPriceId;\r\n\r\n  const priceUnitAmount = plan.priceUnitAmount ?? Number.NaN;\r\n  const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? Number.NaN;\r\n\r\n  const priceDisplay = {\r\n    monthly: {\r\n      amount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month\",\r\n    },\r\n    annually: {\r\n      amount: `$${annualPriceUnitAmount / 100 / 12}`,\r\n      originalAmount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month, billed annually\",\r\n      discountLabel: plan.annualPriceUnitAmount\r\n        ? `Save ${Math.floor(((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount) * 100).toFixed(0)}%`\r\n        : \"\",\r\n    },\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full max-w-3xl mx-auto px-4 py-8\">\r\n      <div className=\"flex flex-col items-center gap-8\">\r\n        <div className=\"text-center space-y-2\">\r\n          <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl\">\r\n            {t(\"billing.plans.title\", \"Simple, transparent pricing\")}\r\n          </h2>\r\n          <p className=\"text-muted-foreground text-lg\">\r\n            {t(\"billing.plans.subtitle\", \"Choose the plan that's right for you\")}\r\n          </p>\r\n        </div>\r\n\r\n        {hasAnnualOption && (\r\n          <Tabs\r\n            defaultValue=\"annually\"\r\n            value={billingInterval}\r\n            onValueChange={(v) => setBillingInterval(v as \"monthly\" | \"annually\")}\r\n            className=\"w-full max-w-xs\"\r\n          >\r\n            <TabsList className=\"grid w-full grid-cols-2\">\r\n              <TabsTrigger value=\"monthly\">Monthly</TabsTrigger>\r\n              <TabsTrigger value=\"annually\" className=\"relative\">\r\n                Annually\r\n                {priceDisplay.annually.discountLabel && (\r\n                  <span className=\"absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12\">\r\n                    {priceDisplay.annually.discountLabel}\r\n                  </span>\r\n                )}\r\n              </TabsTrigger>\r\n            </TabsList>\r\n          </Tabs>\r\n        )}\r\n\r\n        <Card className={cn(\"w-full max-w-md border-2 border-primary\")}>\r\n          <CardHeader>\r\n            <CardTitle className=\"flex justify-between items-start\">\r\n              <span className=\"text-xl font-bold\">{plan.name}</span>\r\n            </CardTitle>\r\n            <CardDescription>\r\n              {isAnnual ? \"Perfect for long-term commitment\" : \"Flexible monthly billing\"}\r\n            </CardDescription>\r\n          </CardHeader>\r\n\r\n          <CardContent className=\"space-y-6\">\r\n            <div className=\"flex items-baseline gap-1\">\r\n              <span className=\"text-4xl font-bold\">\r\n                {isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount}\r\n              </span>\r\n              <span className=\"text-muted-foreground\">\r\n                {isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label}\r\n              </span>\r\n            </div>\r\n\r\n            {isAnnual && priceDisplay.annually.originalAmount && (\r\n              <p className=\"text-sm text-green-500 line-through\">\r\n                {\" \"}\r\n                {priceDisplay.annually.originalAmount} / month\r\n              </p>\r\n            )}\r\n\r\n            <div className=\"space-y-3\">\r\n              {features.map((feature) => (\r\n                <div key={feature} className=\"flex items-center gap-2\">\r\n                  <div className=\"h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0\">\r\n                    <Check className=\"h-3 w-3 text-primary\" />\r\n                  </div>\r\n                  <span className=\"text-sm text-muted-foreground\">{feature}</span>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </CardContent>\r\n\r\n          <CardFooter>\r\n            <Button\r\n              className=\"w-full\"\r\n              color=\"primary\"\r\n              size=\"lg\"\r\n              as=\"a\"\r\n              href={`${import.meta.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`}\r\n            >\r\n              {isAnnual ? \"Subscribe Annually\" : \"Subscribe Monthly\"}\r\n            </Button>\r\n          </CardFooter>\r\n        </Card>\r\n\r\n        <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary\">\r\n          <a href={termsOfServiceUrl} rel=\"noopener noreferrer\" target=\"_blank\">\r\n            {t(\"common.termsOfService\", \"Terms of Service\")}\r\n          </a>{\" \"}\r\n          {t(\"common.and\", \"and\")}{\" \"}\r\n          <Link to=\"/privacy\">{t(\"common.privacyPolicy\", \"Privacy Policy\")}</Link>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"fixed bottom-4 left-4\">\r\n        <Button variant=\"light\" onPress={handleLogout} className=\"gap-2\">\r\n          <LogOut className=\"h-4 w-4\" />\r\n          {t(\"sidebar.user.logout\", \"Log out\")}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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"}

package/dist/src/modules/billing/components/BillingSinglePlanSelect.mjs

@@ -1,12 +1,12 @@
 import { cn } from "../../../lib/utils.mjs";
 import { Card as Card$1, CardContent, CardDescription, CardFooter, CardHeader as CardHeader$1, CardTitle } from "../../../components/ui/card.mjs";
 import { Tabs, TabsList, TabsTrigger } from "../../../components/ui/tabs.mjs";
-import { Check, LogOut } from "lucide-react";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Link, useNavigate } from "react-router";
 import { Button } from "@heroui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, LogOut } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Link as Link$1, useNavigate } from "react-router";
 import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
 //#region src/modules/billing/components/BillingSinglePlanSelect.tsx
 function BillingSinglePlanSelect({ plan, termsOfServiceUrl, features = [
@@ -143,7 +143,7 @@ function BillingSinglePlanSelect({ plan, termsOfServiceUrl, features = [
 						" ",
 						t("common.and", "and"),
 						" ",
-						/* @__PURE__ */ jsx(Link, {
+						/* @__PURE__ */ jsx(Link$1, {
 							to: "/privacy",
 							children: t("common.privacyPolicy", "Privacy Policy")
 						})

package/dist/src/modules/billing/components/BillingSinglePlanSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BillingSinglePlanSelect.mjs","names":["Card","CardHeader"],"sources":["../../../../../src/modules/billing/components/BillingSinglePlanSelect.tsx"],"sourcesContent":["import { Button } from \"@heroui/react\";\r\nimport type { StripePlan } from \"@m5kdev/commons/modules/billing/billing.types\";\r\nimport { authClient } from \"@m5kdev/frontend/modules/auth/auth.lib\";\r\nimport { Check, LogOut } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Link, useNavigate } from \"react-router\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"../../../components/ui/card\";\r\nimport { Tabs, TabsList, TabsTrigger } from \"../../../components/ui/tabs\";\r\nimport { cn } from \"../../../lib/utils\";\r\n\r\nexport interface BillingSinglePlanSelectProps {\r\n  plan: StripePlan;\r\n  features?: string[];\r\n  /** URL for the Terms of Service link. Override for your app's legal page. */\r\n  termsOfServiceUrl?: string;\r\n}\r\n\r\nexport function BillingSinglePlanSelect({\r\n  plan,\r\n  termsOfServiceUrl,\r\n  features = [\r\n    \"Unlimited access to all features\",\r\n    \"Priority support\",\r\n    \"Early access to new features\",\r\n    \"Secure data storage\",\r\n    \"Cancel anytime\",\r\n  ],\r\n}: BillingSinglePlanSelectProps) {\r\n  const { t } = useTranslation(\"web-ui\");\r\n  const navigate = useNavigate();\r\n  const [billingInterval, setBillingInterval] = useState<\"monthly\" | \"annually\">(\"annually\");\r\n\r\n  const handleLogout = async () => {\r\n    await authClient.signOut();\r\n    navigate(\"/login\");\r\n  };\r\n\r\n  const isAnnual = billingInterval === \"annually\";\r\n  const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;\r\n\r\n  // Fallback if no annual price ID exists\r\n  const hasAnnualOption = !!plan.annualDiscountPriceId;\r\n\r\n  const priceUnitAmount = plan.priceUnitAmount ?? Number.NaN;\r\n  const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? Number.NaN;\r\n\r\n  const priceDisplay = {\r\n    monthly: {\r\n      amount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month\",\r\n    },\r\n    annually: {\r\n      amount: `$${annualPriceUnitAmount / 100 / 12}`,\r\n      originalAmount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month, billed annually\",\r\n      discountLabel: plan.annualPriceUnitAmount\r\n        ? `Save ${Math.floor(((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount) * 100).toFixed(0)}%`\r\n        : \"\",\r\n    },\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full max-w-3xl mx-auto px-4 py-8\">\r\n      <div className=\"flex flex-col items-center gap-8\">\r\n        <div className=\"text-center space-y-2\">\r\n          <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl\">\r\n            {t(\"billing.plans.title\", \"Simple, transparent pricing\")}\r\n          </h2>\r\n          <p className=\"text-muted-foreground text-lg\">\r\n            {t(\"billing.plans.subtitle\", \"Choose the plan that's right for you\")}\r\n          </p>\r\n        </div>\r\n\r\n        {hasAnnualOption && (\r\n          <Tabs\r\n            defaultValue=\"annually\"\r\n            value={billingInterval}\r\n            onValueChange={(v) => setBillingInterval(v as \"monthly\" | \"annually\")}\r\n            className=\"w-full max-w-xs\"\r\n          >\r\n            <TabsList className=\"grid w-full grid-cols-2\">\r\n              <TabsTrigger value=\"monthly\">Monthly</TabsTrigger>\r\n              <TabsTrigger value=\"annually\" className=\"relative\">\r\n                Annually\r\n                {priceDisplay.annually.discountLabel && (\r\n                  <span className=\"absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12\">\r\n                    {priceDisplay.annually.discountLabel}\r\n                  </span>\r\n                )}\r\n              </TabsTrigger>\r\n            </TabsList>\r\n          </Tabs>\r\n        )}\r\n\r\n        <Card className={cn(\"w-full max-w-md border-2 border-primary\")}>\r\n          <CardHeader>\r\n            <CardTitle className=\"flex justify-between items-start\">\r\n              <span className=\"text-xl font-bold\">{plan.name}</span>\r\n            </CardTitle>\r\n            <CardDescription>\r\n              {isAnnual ? \"Perfect for long-term commitment\" : \"Flexible monthly billing\"}\r\n            </CardDescription>\r\n          </CardHeader>\r\n\r\n          <CardContent className=\"space-y-6\">\r\n            <div className=\"flex items-baseline gap-1\">\r\n              <span className=\"text-4xl font-bold\">\r\n                {isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount}\r\n              </span>\r\n              <span className=\"text-muted-foreground\">\r\n                {isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label}\r\n              </span>\r\n            </div>\r\n\r\n            {isAnnual && priceDisplay.annually.originalAmount && (\r\n              <p className=\"text-sm text-green-500 line-through\">\r\n                {\" \"}\r\n                {priceDisplay.annually.originalAmount} / month\r\n              </p>\r\n            )}\r\n\r\n            <div className=\"space-y-3\">\r\n              {features.map((feature) => (\r\n                <div key={feature} className=\"flex items-center gap-2\">\r\n                  <div className=\"h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0\">\r\n                    <Check className=\"h-3 w-3 text-primary\" />\r\n                  </div>\r\n                  <span className=\"text-sm text-muted-foreground\">{feature}</span>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </CardContent>\r\n\r\n          <CardFooter>\r\n            <Button\r\n              className=\"w-full\"\r\n              color=\"primary\"\r\n              size=\"lg\"\r\n              as=\"a\"\r\n              href={`${import.meta.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`}\r\n            >\r\n              {isAnnual ? \"Subscribe Annually\" : \"Subscribe Monthly\"}\r\n            </Button>\r\n          </CardFooter>\r\n        </Card>\r\n\r\n        <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary\">\r\n          <a href={termsOfServiceUrl} rel=\"noopener noreferrer\" target=\"_blank\">\r\n            {t(\"common.termsOfService\", \"Terms of Service\")}\r\n          </a>{\" \"}\r\n          {t(\"common.and\", \"and\")}{\" \"}\r\n          <Link to=\"/privacy\">{t(\"common.privacyPolicy\", \"Privacy Policy\")}</Link>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"fixed bottom-4 left-4\">\r\n        <Button variant=\"light\" onPress={handleLogout} className=\"gap-2\">\r\n          <LogOut className=\"h-4 w-4\" />\r\n          {t(\"sidebar.user.logout\", \"Log out\")}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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"}
+{"version":3,"file":"BillingSinglePlanSelect.mjs","names":["Card","CardHeader","Link"],"sources":["../../../../../src/modules/billing/components/BillingSinglePlanSelect.tsx"],"sourcesContent":["import { Button } from \"@heroui/react\";\r\nimport type { StripePlan } from \"@m5kdev/commons/modules/billing/billing.types\";\r\nimport { authClient } from \"@m5kdev/frontend/modules/auth/auth.lib\";\r\nimport { Check, LogOut } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Link, useNavigate } from \"react-router\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"../../../components/ui/card\";\r\nimport { Tabs, TabsList, TabsTrigger } from \"../../../components/ui/tabs\";\r\nimport { cn } from \"../../../lib/utils\";\r\n\r\nexport interface BillingSinglePlanSelectProps {\r\n  plan: StripePlan;\r\n  features?: string[];\r\n  /** URL for the Terms of Service link. Override for your app's legal page. */\r\n  termsOfServiceUrl?: string;\r\n}\r\n\r\nexport function BillingSinglePlanSelect({\r\n  plan,\r\n  termsOfServiceUrl,\r\n  features = [\r\n    \"Unlimited access to all features\",\r\n    \"Priority support\",\r\n    \"Early access to new features\",\r\n    \"Secure data storage\",\r\n    \"Cancel anytime\",\r\n  ],\r\n}: BillingSinglePlanSelectProps) {\r\n  const { t } = useTranslation(\"web-ui\");\r\n  const navigate = useNavigate();\r\n  const [billingInterval, setBillingInterval] = useState<\"monthly\" | \"annually\">(\"annually\");\r\n\r\n  const handleLogout = async () => {\r\n    await authClient.signOut();\r\n    navigate(\"/login\");\r\n  };\r\n\r\n  const isAnnual = billingInterval === \"annually\";\r\n  const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;\r\n\r\n  // Fallback if no annual price ID exists\r\n  const hasAnnualOption = !!plan.annualDiscountPriceId;\r\n\r\n  const priceUnitAmount = plan.priceUnitAmount ?? Number.NaN;\r\n  const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? Number.NaN;\r\n\r\n  const priceDisplay = {\r\n    monthly: {\r\n      amount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month\",\r\n    },\r\n    annually: {\r\n      amount: `$${annualPriceUnitAmount / 100 / 12}`,\r\n      originalAmount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month, billed annually\",\r\n      discountLabel: plan.annualPriceUnitAmount\r\n        ? `Save ${Math.floor(((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount) * 100).toFixed(0)}%`\r\n        : \"\",\r\n    },\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full max-w-3xl mx-auto px-4 py-8\">\r\n      <div className=\"flex flex-col items-center gap-8\">\r\n        <div className=\"text-center space-y-2\">\r\n          <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl\">\r\n            {t(\"billing.plans.title\", \"Simple, transparent pricing\")}\r\n          </h2>\r\n          <p className=\"text-muted-foreground text-lg\">\r\n            {t(\"billing.plans.subtitle\", \"Choose the plan that's right for you\")}\r\n          </p>\r\n        </div>\r\n\r\n        {hasAnnualOption && (\r\n          <Tabs\r\n            defaultValue=\"annually\"\r\n            value={billingInterval}\r\n            onValueChange={(v) => setBillingInterval(v as \"monthly\" | \"annually\")}\r\n            className=\"w-full max-w-xs\"\r\n          >\r\n            <TabsList className=\"grid w-full grid-cols-2\">\r\n              <TabsTrigger value=\"monthly\">Monthly</TabsTrigger>\r\n              <TabsTrigger value=\"annually\" className=\"relative\">\r\n                Annually\r\n                {priceDisplay.annually.discountLabel && (\r\n                  <span className=\"absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12\">\r\n                    {priceDisplay.annually.discountLabel}\r\n                  </span>\r\n                )}\r\n              </TabsTrigger>\r\n            </TabsList>\r\n          </Tabs>\r\n        )}\r\n\r\n        <Card className={cn(\"w-full max-w-md border-2 border-primary\")}>\r\n          <CardHeader>\r\n            <CardTitle className=\"flex justify-between items-start\">\r\n              <span className=\"text-xl font-bold\">{plan.name}</span>\r\n            </CardTitle>\r\n            <CardDescription>\r\n              {isAnnual ? \"Perfect for long-term commitment\" : \"Flexible monthly billing\"}\r\n            </CardDescription>\r\n          </CardHeader>\r\n\r\n          <CardContent className=\"space-y-6\">\r\n            <div className=\"flex items-baseline gap-1\">\r\n              <span className=\"text-4xl font-bold\">\r\n                {isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount}\r\n              </span>\r\n              <span className=\"text-muted-foreground\">\r\n                {isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label}\r\n              </span>\r\n            </div>\r\n\r\n            {isAnnual && priceDisplay.annually.originalAmount && (\r\n              <p className=\"text-sm text-green-500 line-through\">\r\n                {\" \"}\r\n                {priceDisplay.annually.originalAmount} / month\r\n              </p>\r\n            )}\r\n\r\n            <div className=\"space-y-3\">\r\n              {features.map((feature) => (\r\n                <div key={feature} className=\"flex items-center gap-2\">\r\n                  <div className=\"h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0\">\r\n                    <Check className=\"h-3 w-3 text-primary\" />\r\n                  </div>\r\n                  <span className=\"text-sm text-muted-foreground\">{feature}</span>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </CardContent>\r\n\r\n          <CardFooter>\r\n            <Button\r\n              className=\"w-full\"\r\n              color=\"primary\"\r\n              size=\"lg\"\r\n              as=\"a\"\r\n              href={`${import.meta.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`}\r\n            >\r\n              {isAnnual ? \"Subscribe Annually\" : \"Subscribe Monthly\"}\r\n            </Button>\r\n          </CardFooter>\r\n        </Card>\r\n\r\n        <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary\">\r\n          <a href={termsOfServiceUrl} rel=\"noopener noreferrer\" target=\"_blank\">\r\n            {t(\"common.termsOfService\", \"Terms of Service\")}\r\n          </a>{\" \"}\r\n          {t(\"common.and\", \"and\")}{\" \"}\r\n          <Link to=\"/privacy\">{t(\"common.privacyPolicy\", \"Privacy Policy\")}</Link>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"fixed bottom-4 left-4\">\r\n        <Button variant=\"light\" onPress={handleLogout} className=\"gap-2\">\r\n          <LogOut className=\"h-4 w-4\" />\r\n          {t(\"sidebar.user.logout\", \"Log out\")}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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"}

package/dist/src/modules/table/components/ColumnOrderAndVisibility.d.ts

@@ -0,0 +1,20 @@
+import { ColumnItem } from "./table.types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+
+//#region src/modules/table/components/ColumnOrderAndVisibility.d.ts
+interface ColumnOrderAndVisibilityProps {
+  layout: ColumnItem[];
+  onChangeOrder: (order: ColumnOrderState) => void;
+  onChangeVisibility: (visibility: VisibilityState) => void;
+  onClose: () => void;
+}
+declare const ColumnOrderAndVisibility: ({
+  layout,
+  onChangeOrder,
+  onChangeVisibility,
+  onClose
+}: ColumnOrderAndVisibilityProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ColumnOrderAndVisibility };
+//# sourceMappingURL=ColumnOrderAndVisibility.d.ts.map