@m5kdev/web-ui 0.6.0 → 0.8.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingInvoicePage.js","names":[],"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/BillingPlanSelect.d.ts

@@ -1,6 +1,13 @@
-import type { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
+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[];
+  plans: StripePlan[];
 }
-export declare function BillingPlanSelect({ plans }: BillingPlanSelectProps): import("react/jsx-runtime").JSX.Element | "Multiple plans selection not implemented yet";
-export {};
+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

@@ -1,8 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BillingSinglePlanSelect } from "./BillingSinglePlanSelect";
-export function BillingPlanSelect({ plans }) {
-    if (plans.length === 1) {
-        return _jsx(BillingSinglePlanSelect, { plan: plans[0] });
-    }
-    return "Multiple plans selection not implemented yet";
+import { BillingSinglePlanSelect } from "./BillingSinglePlanSelect.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/modules/billing/components/BillingPlanSelect.tsx
+function BillingPlanSelect({ plans }) {
+	if (plans.length === 1) return /* @__PURE__ */ jsx(BillingSinglePlanSelect, { plan: plans[0] });
+	return "Multiple plans selection not implemented yet";
 }
+//#endregion
+export { BillingPlanSelect };
+
+//# sourceMappingURL=BillingPlanSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingPlanSelect.js","names":[],"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,oBAAC,yBAAD,EAAyB,MAAM,MAAM,IAAM,CAAA;AAGpD,QAAO"}

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

@@ -1,9 +1,17 @@
-import type { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
-import type { UseBackendTRPC } from "../../../types";
+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[];
+  useTRPC?: UseBackendTRPC;
+  serverUrl: string;
+  plans: StripePlan[];
 }
-export declare function BillingRouter({ useTRPC, serverUrl }: BillingRouterProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
+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

@@ -1,8 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { BillingInvoicePage } from "./BillingInvoicePage.js";
+import { jsx } from "react/jsx-runtime";
 import { Route } from "react-router";
-import { BillingInvoicePage } from "./BillingInvoicePage";
-export function BillingRouter({ useTRPC, serverUrl }) {
-    if (!useTRPC)
-        return null;
-    return (_jsx(Route, { path: "billing", children: _jsx(Route, { index: true, element: _jsx(BillingInvoicePage, { useTRPC: useTRPC, serverUrl: serverUrl }) }) }));
+//#region src/modules/billing/components/BillingRouter.tsx
+function BillingRouter({ useTRPC, serverUrl }) {
+	if (!useTRPC) return null;
+	return /* @__PURE__ */ jsx(Route, {
+		path: "billing",
+		children: /* @__PURE__ */ jsx(Route, {
+			index: true,
+			element: /* @__PURE__ */ jsx(BillingInvoicePage, {
+				useTRPC,
+				serverUrl
+			})
+		})
+	});
 }
+//#endregion
+export { BillingRouter };
+
+//# sourceMappingURL=BillingRouter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingRouter.js","names":[],"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,oBAAC,OAAD;EAAO,MAAK;YACV,oBAAC,OAAD;GAAO,OAAA;GAAM,SAAS,oBAAC,oBAAD;IAA6B;IAAoB;IAAa,CAAA;GAAI,CAAA;EAClF,CAAA"}

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

@@ -1,8 +1,18 @@
-import type { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
-export interface BillingSinglePlanSelectProps {
-    plan: StripePlan;
-    features?: string[];
-    /** URL for the Terms of Service link. Override for your app's legal page. */
-    termsOfServiceUrl?: string;
+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;
 }
-export declare function BillingSinglePlanSelect({ plan, termsOfServiceUrl, features, }: BillingSinglePlanSelectProps): import("react/jsx-runtime").JSX.Element;
+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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingSinglePlanSelect.js","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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"}