@m5kdev/web-ui 0.8.0 → 0.8.3

package/dist/src/modules/auth/components/WaitlistCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitlistCard.mjs","names":[],"sources":["../../../../../src/modules/auth/components/WaitlistCard.tsx"],"sourcesContent":["import { Alert, Button, Card, CardBody, CardHeader, Input } from \"@heroui/react\";\r\nimport { useMutation } from \"@tanstack/react-query\";\r\nimport { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { toast } from \"sonner\";\r\nimport type { UseBackendTRPC } from \"../../../types\";\r\n\r\ninterface WaitlistCardProps {\r\n  useTRPC: UseBackendTRPC;\r\n}\r\n\r\nexport function WaitlistCard({ useTRPC }: WaitlistCardProps) {\r\n  const { t } = useTranslation();\r\n  const trpc = useTRPC();\r\n  const [email, setEmail] = useState(\"\");\r\n  const [joined, setJoined] = useState(false);\r\n\r\n  const { mutate } = useMutation(trpc.auth.joinWaitlist.mutationOptions());\r\n\r\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n    e.preventDefault();\r\n    mutate(\r\n      { email },\r\n      {\r\n        onSuccess: () => {\r\n          setJoined(true);\r\n        },\r\n        onError: (error) => {\r\n          toast.error(\r\n            error instanceof Error\r\n              ? error.message\r\n              : t(\"web-ui:auth.waitlist.error\", {\r\n                  defaultValue: \"Failed to join waitlist. Please try again.\",\r\n                })\r\n          );\r\n        },\r\n      }\r\n    );\r\n  };\r\n\r\n  if (joined) {\r\n    return (\r\n      <Card>\r\n        <CardBody className=\"pt-6\">\r\n          <Alert color=\"success\" variant=\"faded\" title={t(\"web-ui:auth.waitlist.success\")} />\r\n        </CardBody>\r\n      </Card>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Card>\r\n      <CardHeader className=\"text-center flex flex-col gap-1\">\r\n        <p className=\"text-xl font-semibold\">{t(\"web-ui:auth.waitlist.title\")}</p>\r\n        <p className=\"text-sm text-default-600\">{t(\"web-ui:auth.waitlist.description\")}</p>\r\n      </CardHeader>\r\n      <CardBody>\r\n        <form onSubmit={handleSubmit} className=\"grid gap-6\">\r\n          <div className=\"grid gap-2\">\r\n            <Input\r\n              type=\"email\"\r\n              label={t(\"web-ui:auth.waitlist.email\")}\r\n              labelPlacement=\"outside\"\r\n              placeholder={t(\"web-ui:auth.waitlist.placeholder.email\")}\r\n              isRequired\r\n              variant=\"bordered\"\r\n              value={email}\r\n              onChange={(e) => setEmail(e.target.value)}\r\n            />\r\n          </div>\r\n          <Button type=\"submit\" color=\"primary\">\r\n            {t(\"web-ui:auth.waitlist.button\")}\r\n          </Button>\r\n        </form>\r\n      </CardBody>\r\n    </Card>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;AAWA,SAAgB,aAAa,EAAE,WAA8B;CAC3D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,OAAO,SAAS;CACtB,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAM,EAAE,WAAW,YAAY,KAAK,KAAK,aAAa,iBAAiB,CAAC;CAExE,MAAM,gBAAgB,MAAwC;AAC5D,IAAE,gBAAgB;AAClB,SACE,EAAE,OAAO,EACT;GACE,iBAAiB;AACf,cAAU,KAAK;;GAEjB,UAAU,UAAU;AAClB,UAAM,MACJ,iBAAiB,QACb,MAAM,UACN,EAAE,8BAA8B,EAC9B,cAAc,8CACf,CAAC,CACP;;GAEJ,CACF;;AAGH,KAAI,OACF,QACE,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD;EAAU,WAAU;YAClB,oBAAC,OAAD;GAAO,OAAM;GAAU,SAAQ;GAAQ,OAAO,EAAE,+BAA+B;GAAI,CAAA;EAC1E,CAAA,EACN,CAAA;AAIX,QACE,qBAAC,MAAD,EAAA,UAAA,CACE,qBAAC,YAAD;EAAY,WAAU;YAAtB,CACE,oBAAC,KAAD;GAAG,WAAU;aAAyB,EAAE,6BAA6B;GAAK,CAAA,EAC1E,oBAAC,KAAD;GAAG,WAAU;aAA4B,EAAE,mCAAmC;GAAK,CAAA,CACxE;KACb,oBAAC,UAAD,EAAA,UACE,qBAAC,QAAD;EAAM,UAAU;EAAc,WAAU;YAAxC,CACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IACE,MAAK;IACL,OAAO,EAAE,6BAA6B;IACtC,gBAAe;IACf,aAAa,EAAE,yCAAyC;IACxD,YAAA;IACA,SAAQ;IACR,OAAO;IACP,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;IACzC,CAAA;GACE,CAAA,EACN,oBAAC,QAAD;GAAQ,MAAK;GAAS,OAAM;aACzB,EAAE,8BAA8B;GAC1B,CAAA,CACJ;KACE,CAAA,CACN,EAAA,CAAA"}

package/dist/src/modules/auth/components/WaitlistCodeValidation.d.mts

@@ -0,0 +1,15 @@
+import { UseBackendTRPC } from "../../../types.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/modules/auth/components/WaitlistCodeValidation.d.ts
+interface WaitlistCodeValidationProps {
+  useTRPC: UseBackendTRPC;
+  code: string;
+}
+declare function WaitlistCodeValidation({
+  useTRPC,
+  code
+}: WaitlistCodeValidationProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { WaitlistCodeValidation };
+//# sourceMappingURL=WaitlistCodeValidation.d.mts.map

package/dist/src/modules/auth/components/WaitlistCodeValidation.mjs

@@ -0,0 +1,45 @@
+import { Alert } from "@heroui/react";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+//#region src/modules/auth/components/WaitlistCodeValidation.tsx
+function WaitlistCodeValidation({ useTRPC, code }) {
+	const { t } = useTranslation();
+	const { data, isLoading, error } = useQuery(useTRPC().auth.validateWaitlistCode.queryOptions({ code }));
+	const status = data?.status;
+	const className = "p-1";
+	if (isLoading) return /* @__PURE__ */ jsx(Alert, {
+		className,
+		color: "default",
+		variant: "faded",
+		title: t("web-ui:auth.waitlist.validatingCode", { defaultValue: "Validating the invitation code..." })
+	});
+	if (error) return /* @__PURE__ */ jsx(Alert, {
+		className,
+		color: "danger",
+		variant: "faded",
+		title: t("web-ui:auth.waitlist.codeError", { defaultValue: "An error occurred while validating the invitation code." })
+	});
+	if (status === "VALID") return /* @__PURE__ */ jsx(Alert, {
+		className,
+		color: "success",
+		variant: "faded",
+		title: t("web-ui:auth.waitlist.codeValid", { defaultValue: "Invitation code is valid. You can proceed." })
+	});
+	if (status) {
+		let message = t("web-ui:auth.waitlist.invalidCode", { defaultValue: "Invalid invitation code." });
+		if (status === "EXPIRED") message = t("web-ui:auth.waitlist.expiredCode", { defaultValue: "Invitation code has expired." });
+		else if (status === "NOT_FOUND") message = t("web-ui:auth.waitlist.codeNotFound", { defaultValue: "Invitation code not found." });
+		return /* @__PURE__ */ jsx(Alert, {
+			className,
+			color: "danger",
+			variant: "faded",
+			title: message
+		});
+	}
+	return null;
+}
+//#endregion
+export { WaitlistCodeValidation };
+
+//# sourceMappingURL=WaitlistCodeValidation.mjs.map

package/dist/src/modules/auth/components/WaitlistCodeValidation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitlistCodeValidation.mjs","names":[],"sources":["../../../../../src/modules/auth/components/WaitlistCodeValidation.tsx"],"sourcesContent":["import { Alert } from \"@heroui/react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useTranslation } from \"react-i18next\";\nimport type { UseBackendTRPC } from \"../../../types\";\n\ninterface WaitlistCodeValidationProps {\n  useTRPC: UseBackendTRPC;\n  code: string;\n}\n\nexport function WaitlistCodeValidation({ useTRPC, code }: WaitlistCodeValidationProps) {\n  const { t } = useTranslation();\n  const trpc = useTRPC();\n  const { data, isLoading, error } = useQuery(\n    trpc.auth.validateWaitlistCode.queryOptions({ code })\n  );\n  const status = data?.status;\n\n  const className = \"p-1\";\n\n  if (isLoading) {\n    return (\n      <Alert\n        className={className}\n        color=\"default\"\n        variant=\"faded\"\n        title={t(\"web-ui:auth.waitlist.validatingCode\", {\n          defaultValue: \"Validating the invitation code...\",\n        })}\n      />\n    );\n  }\n\n  if (error) {\n    return (\n      <Alert\n        className={className}\n        color=\"danger\"\n        variant=\"faded\"\n        title={t(\"web-ui:auth.waitlist.codeError\", {\n          defaultValue: \"An error occurred while validating the invitation code.\",\n        })}\n      />\n    );\n  }\n\n  if (status === \"VALID\") {\n    return (\n      <Alert\n        className={className}\n        color=\"success\"\n        variant=\"faded\"\n        title={t(\"web-ui:auth.waitlist.codeValid\", {\n          defaultValue: \"Invitation code is valid. You can proceed.\",\n        })}\n      />\n    );\n  }\n\n  if (status) {\n    let message = t(\"web-ui:auth.waitlist.invalidCode\", {\n      defaultValue: \"Invalid invitation code.\",\n    });\n\n    if (status === \"EXPIRED\") {\n      message = t(\"web-ui:auth.waitlist.expiredCode\", {\n        defaultValue: \"Invitation code has expired.\",\n      });\n    } else if (status === \"NOT_FOUND\") {\n      message = t(\"web-ui:auth.waitlist.codeNotFound\", {\n        defaultValue: \"Invitation code not found.\",\n      });\n    }\n\n    return <Alert className={className} color=\"danger\" variant=\"faded\" title={message} />;\n  }\n\n  return null;\n}\n"],"mappings":";;;;;AAUA,SAAgB,uBAAuB,EAAE,SAAS,QAAqC;CACrF,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,EAAE,MAAM,WAAW,UAAU,SADtB,SAAS,CAEf,KAAK,qBAAqB,aAAa,EAAE,MAAM,CAAC,CACtD;CACD,MAAM,SAAS,MAAM;CAErB,MAAM,YAAY;AAElB,KAAI,UACF,QACE,oBAAC,OAAD;EACa;EACX,OAAM;EACN,SAAQ;EACR,OAAO,EAAE,uCAAuC,EAC9C,cAAc,qCACf,CAAC;EACF,CAAA;AAIN,KAAI,MACF,QACE,oBAAC,OAAD;EACa;EACX,OAAM;EACN,SAAQ;EACR,OAAO,EAAE,kCAAkC,EACzC,cAAc,2DACf,CAAC;EACF,CAAA;AAIN,KAAI,WAAW,QACb,QACE,oBAAC,OAAD;EACa;EACX,OAAM;EACN,SAAQ;EACR,OAAO,EAAE,kCAAkC,EACzC,cAAc,8CACf,CAAC;EACF,CAAA;AAIN,KAAI,QAAQ;EACV,IAAI,UAAU,EAAE,oCAAoC,EAClD,cAAc,4BACf,CAAC;AAEF,MAAI,WAAW,UACb,WAAU,EAAE,oCAAoC,EAC9C,cAAc,gCACf,CAAC;WACO,WAAW,YACpB,WAAU,EAAE,qCAAqC,EAC/C,cAAc,8BACf,CAAC;AAGJ,SAAO,oBAAC,OAAD;GAAkB;GAAW,OAAM;GAAS,SAAQ;GAAQ,OAAO;GAAW,CAAA;;AAGvF,QAAO"}

package/dist/src/modules/billing/components/BillingBetaPage.d.mts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/modules/billing/components/BillingBetaPage.d.ts
+interface BillingBetaPageProps {
+  appName: string;
+  className?: string;
+  footer?: ReactNode;
+}
+declare function BillingBetaPage({
+  appName,
+  className,
+  footer
+}: BillingBetaPageProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { BillingBetaPage };
+//# sourceMappingURL=BillingBetaPage.d.mts.map

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

@@ -0,0 +1,158 @@
+import { cn } from "../../../lib/utils.mjs";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../../components/ui/card.mjs";
+import { Separator } from "../../../components/ui/separator.mjs";
+import { Badge } from "../../../components/ui/badge.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bell, CheckCircle2, Clock3, Sparkles } from "lucide-react";
+import { useTranslation } from "react-i18next";
+//#region src/modules/billing/components/BillingBetaPage.tsx
+function BillingBetaPage({ appName, className, footer }) {
+	const { t } = useTranslation("web-ui");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mx-auto max-w-5xl px-4 py-12 md:py-16", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center text-center gap-4",
+				children: [/* @__PURE__ */ jsx(Badge, {
+					variant: "secondary",
+					className: "uppercase tracking-wide",
+					children: t("billing.beta.badge")
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-3xl md:text-4xl font-semibold tracking-tight",
+						children: t("billing.title")
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground max-w-2xl",
+						children: t("billing.subtitle", { appName })
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Separator, { className: "my-8" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6",
+				children: [
+					/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 text-green-600 dark:text-green-500",
+							children: [/* @__PURE__ */ jsx(Sparkles, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ jsx(CardTitle, { children: t("billing.card.free.title") })]
+						}), /* @__PURE__ */ jsx(CardDescription, { children: t("billing.card.free.description") })]
+					}), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-4xl font-bold tracking-tight",
+							children: t("billing.card.free.price")
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: t("billing.card.free.priceSuffix")
+						})]
+					}), /* @__PURE__ */ jsxs("ul", {
+						className: "mt-4 space-y-2 text-sm",
+						children: [
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-green-600" }),
+									" ",
+									t("billing.card.free.feature.fullAccess")
+								]
+							}),
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-green-600" }),
+									" ",
+									t("billing.card.free.feature.noCard")
+								]
+							}),
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-green-600" }),
+									" ",
+									t("billing.card.free.feature.riskFree")
+								]
+							})
+						]
+					})] })] }),
+					/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 text-blue-600 dark:text-blue-500",
+							children: [/* @__PURE__ */ jsx(Clock3, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ jsx(CardTitle, { children: t("billing.card.progress.title") })]
+						}), /* @__PURE__ */ jsx(CardDescription, { children: t("billing.card.progress.description") })]
+					}), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("ul", {
+						className: "space-y-2 text-sm",
+						children: [
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-blue-600" }),
+									" ",
+									t("billing.card.progress.feature.transparentPlans")
+								]
+							}),
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-blue-600" }),
+									" ",
+									t("billing.card.progress.feature.fairValue")
+								]
+							}),
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-blue-600" }),
+									" ",
+									t("billing.card.progress.feature.simpleBilling")
+								]
+							})
+						]
+					}) })] }),
+					/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 text-amber-600 dark:text-amber-500",
+							children: [/* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ jsx(CardTitle, { children: t("billing.card.notice.title") })]
+						}), /* @__PURE__ */ jsx(CardDescription, { children: t("billing.card.notice.description") })]
+					}), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("ul", {
+						className: "space-y-2 text-sm",
+						children: [
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-amber-600" }),
+									" ",
+									t("billing.card.notice.feature.timeToDecide")
+								]
+							}),
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-amber-600" }),
+									" ",
+									t("billing.card.notice.feature.safeData")
+								]
+							}),
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-amber-600" }),
+									" ",
+									t("billing.card.notice.feature.autoFreeTier")
+								]
+							})
+						]
+					}) })] })
+				]
+			}),
+			footer
+		]
+	});
+}
+//#endregion
+export { BillingBetaPage };
+
+//# sourceMappingURL=BillingBetaPage.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingBetaPage.mjs","names":[],"sources":["../../../../../src/modules/billing/components/BillingBetaPage.tsx"],"sourcesContent":["import { Bell, CheckCircle2, Clock3, Sparkles } from \"lucide-react\";\r\nimport type { ReactNode } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Badge } from \"../../../components/ui/badge\";\r\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"../../../components/ui/card\";\r\nimport { Separator } from \"../../../components/ui/separator\";\r\nimport { cn } from \"../../../lib/utils\";\r\n\r\ninterface BillingBetaPageProps {\r\n  appName: string;\r\n  className?: string;\r\n  footer?: ReactNode;\r\n}\r\n\r\nexport function BillingBetaPage({ appName, className, footer }: BillingBetaPageProps) {\r\n  const { t } = useTranslation(\"web-ui\");\r\n  return (\r\n    <div className={cn(\"mx-auto max-w-5xl px-4 py-12 md:py-16\", className)}>\r\n      {/* Heading */}\r\n      <div className=\"flex flex-col items-center text-center gap-4\">\r\n        <Badge variant=\"secondary\" className=\"uppercase tracking-wide\">\r\n          {t(\"billing.beta.badge\")}\r\n        </Badge>\r\n        <div className=\"space-y-3\">\r\n          <h1 className=\"text-3xl md:text-4xl font-semibold tracking-tight\">\r\n            {t(\"billing.title\")}\r\n          </h1>\r\n          <p className=\"text-muted-foreground max-w-2xl\">{t(\"billing.subtitle\", { appName })}</p>\r\n        </div>\r\n      </div>\r\n\r\n      <Separator className=\"my-8\" />\r\n\r\n      {/* Info Cards */}\r\n      <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6\">\r\n        <Card>\r\n          <CardHeader className=\"space-y-2\">\r\n            <div className=\"flex items-center gap-2 text-green-600 dark:text-green-500\">\r\n              <Sparkles className=\"h-5 w-5 shrink-0\" />\r\n              <CardTitle>{t(\"billing.card.free.title\")}</CardTitle>\r\n            </div>\r\n            <CardDescription>{t(\"billing.card.free.description\")}</CardDescription>\r\n          </CardHeader>\r\n          <CardContent>\r\n            <div className=\"flex items-baseline gap-2\">\r\n              <span className=\"text-4xl font-bold tracking-tight\">\r\n                {t(\"billing.card.free.price\")}\r\n              </span>\r\n              <span className=\"text-muted-foreground\">{t(\"billing.card.free.priceSuffix\")}</span>\r\n            </div>\r\n            <ul className=\"mt-4 space-y-2 text-sm\">\r\n              <li className=\"flex items-center gap-2\">\r\n                <CheckCircle2 className=\"h-4 w-4 shrink-0 text-green-600\" />{\" \"}\r\n                {t(\"billing.card.free.feature.fullAccess\")}\r\n              </li>\r\n              <li className=\"flex items-center gap-2\">\r\n                <CheckCircle2 className=\"h-4 w-4 shrink-0 text-green-600\" />{\" \"}\r\n                {t(\"billing.card.free.feature.noCard\")}\r\n              </li>\r\n              <li className=\"flex items-center gap-2\">\r\n                <CheckCircle2 className=\"h-4 w-4 shrink-0 text-green-600\" />{\" \"}\r\n                {t(\"billing.card.free.feature.riskFree\")}\r\n              </li>\r\n            </ul>\r\n          </CardContent>\r\n        </Card>\r\n\r\n        <Card>\r\n          <CardHeader className=\"space-y-2\">\r\n            <div className=\"flex items-center gap-2 text-blue-600 dark:text-blue-500\">\r\n              <Clock3 className=\"h-5 w-5 shrink-0\" />\r\n              <CardTitle>{t(\"billing.card.progress.title\")}</CardTitle>\r\n            </div>\r\n            <CardDescription>{t(\"billing.card.progress.description\")}</CardDescription>\r\n          </CardHeader>\r\n          <CardContent>\r\n            <ul className=\"space-y-2 text-sm\">\r\n              <li className=\"flex items-center gap-2\">\r\n                <CheckCircle2 className=\"h-4 w-4 shrink-0 text-blue-600\" />{\" \"}\r\n                {t(\"billing.card.progress.feature.transparentPlans\")}\r\n              </li>\r\n              <li className=\"flex items-center gap-2\">\r\n                <CheckCircle2 className=\"h-4 w-4 shrink-0 text-blue-600\" />{\" \"}\r\n                {t(\"billing.card.progress.feature.fairValue\")}\r\n              </li>\r\n              <li className=\"flex items-center gap-2\">\r\n                <CheckCircle2 className=\"h-4 w-4 shrink-0 text-blue-600\" />{\" \"}\r\n                {t(\"billing.card.progress.feature.simpleBilling\")}\r\n              </li>\r\n            </ul>\r\n          </CardContent>\r\n        </Card>\r\n\r\n        <Card>\r\n          <CardHeader className=\"space-y-2\">\r\n            <div className=\"flex items-center gap-2 text-amber-600 dark:text-amber-500\">\r\n              <Bell className=\"h-5 w-5 shrink-0\" />\r\n              <CardTitle>{t(\"billing.card.notice.title\")}</CardTitle>\r\n            </div>\r\n            <CardDescription>{t(\"billing.card.notice.description\")}</CardDescription>\r\n          </CardHeader>\r\n          <CardContent>\r\n            <ul className=\"space-y-2 text-sm\">\r\n              <li className=\"flex items-center gap-2\">\r\n                <CheckCircle2 className=\"h-4 w-4 shrink-0 text-amber-600\" />{\" \"}\r\n                {t(\"billing.card.notice.feature.timeToDecide\")}\r\n              </li>\r\n              <li className=\"flex items-center gap-2\">\r\n                <CheckCircle2 className=\"h-4 w-4 shrink-0 text-amber-600\" />{\" \"}\r\n                {t(\"billing.card.notice.feature.safeData\")}\r\n              </li>\r\n              <li className=\"flex items-center gap-2\">\r\n                <CheckCircle2 className=\"h-4 w-4 shrink-0 text-amber-600\" />{\" \"}\r\n                {t(\"billing.card.notice.feature.autoFreeTier\")}\r\n              </li>\r\n            </ul>\r\n          </CardContent>\r\n        </Card>\r\n      </div>\r\n\r\n      {footer}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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"}

package/dist/src/modules/billing/components/BillingInvoicePage.d.mts

@@ -0,0 +1,15 @@
+import { UseBackendTRPC } from "../../../types.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/modules/billing/components/BillingInvoicePage.d.ts
+interface BillingInvoicePageProps {
+  useTRPC: UseBackendTRPC;
+  serverUrl: string;
+}
+declare function BillingInvoicePage({
+  useTRPC,
+  serverUrl
+}: BillingInvoicePageProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { BillingInvoicePage };
+//# sourceMappingURL=BillingInvoicePage.d.mts.map

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

@@ -0,0 +1,162 @@
+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";
+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.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingInvoicePage.mjs","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":";;;;;;AA0BA,SAAgB,mBAAmB,EAAE,SAAS,aAAsC;CAElF,MAAM,EAAE,MAAM,UAAU,cAAc,SADzB,SAAS,CAC8B,QAAQ,aAAa,cAAc,CAAC;CAExF,MAAM,EAAE,MAAM,oBAAoB,WAAW,2BAA2B,iBAAiB;CACzF,MAAM,kBAAkB,QAAgB,aAAqB;AAC3D,SAAO,IAAI,KAAK,aAAa,SAAS;GACpC,OAAO;GACP,UAAU,SAAS,aAAa;GACjC,CAAC,CAAC,OAAO,SAAS,IAAI;;CAGzB,MAAM,cAAc,cAA6B;AAE/C,UADa,qBAAqB,OAAO,4BAAY,IAAI,KAAK,YAAY,IAAK,EACnE,mBAAmB,KAAA,GAAW;GACxC,MAAM;GACN,OAAO;GACP,KAAK;GACN,CAAC;;CAGJ,MAAM,WAAW,oBAAoB,YAAY,oBAAoB;AACrE,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,MAAD,EAAA,UAAA,CACE,qBAAC,YAAD;GAAY,WAAU;aAAtB,CACE,oBAAC,MAAD;IAAI,WAAU;cAAoB;IAAwB,CAAA,EAC1D,oBAAC,KAAD;IAAG,WAAU;cAA8B;IAAoC,CAAA,CACpE;MACb,oBAAC,UAAD;GAAU,WAAU;aACjB,yBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,SAAD,EAAW,CAAA;IACP,CAAA,GACJ,CAAC,qBACH,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,aAAD,EAAa,WAAU,4BAA6B,CAAA;MAChD,CAAA;KACN,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;MAAG,WAAU;gBAAsB;MAA0B,CAAA,EAC7D,oBAAC,KAAD;MAAG,WAAU;gBAA8B;MAEvC,CAAA,CACA,EAAA,CAAA;KACN,oBAAC,QAAD;MAAQ,IAAI;MAAM,MAAK;MAAW,OAAM;gBAAU;MAEzC,CAAA;KACL;QAEN,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,MAAD;QAAI,WAAU;kBACX,mBAAmB,QAAQ;QACzB,CAAA,EAEL,oBAAC,MAAD;QACE,OACE,WACI,WACA,mBAAmB,WAAW,WAC5B,YACA;QAER,SAAQ;QACR,MAAK;QACL,cAAc,oBAAC,cAAD,EAAc,WAAU,gBAAiB,CAAA;kBAEtD,WAAW,cAAc,mBAAmB;QACxC,CAAA,CACH;UACN,qBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,WAAW,mCAAmC;QAC/C,oBAAC,QAAD;SAAM,WAAU;mBACb,mBAAmB,YAChB,WAAW,mBAAmB,UAAU,GACxC;SACC,CAAA;QACP,oBAAC,QAAD;SAAM,WAAU;mBACb,IAAI,mBAAmB,aAAa,UAAU,YAAY,WAAW;SACjE,CAAA;QACL;SACA;SACN,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,QAAD;OAAQ,SAAQ;OAAW,IAAG;OAAI,MAAM,GAAG,UAAU;iBAAiB;OAE7D,CAAA;MACL,CAAA,CACF;;IACF,CAAA;GAEC,CAAA,CACN,EAAA,CAAA,EACP,qBAAC,MAAD,EAAA,UAAA,CACE,qBAAC,YAAD;GAAY,WAAU;aAAtB,CACE,oBAAC,MAAD;IAAI,WAAU;cAAoB;IAAa,CAAA,EAC/C,oBAAC,KAAD;IAAG,WAAU;cAA8B;IAEvC,CAAA,CACO;MACb,oBAAC,UAAD;GAAU,WAAU;aACjB,YACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,SAAD,EAAW,CAAA;IACP,CAAA,GAEN,qBAAC,OAAD;IAAO,cAAW;IAAiB,eAAA;cAAnC,CACE,qBAAC,aAAD,EAAA,UAAA;KACE,oBAAC,aAAD,EAAA,UAAa,QAAkB,CAAA;KAC/B,oBAAC,aAAD,EAAA,UAAa,UAAoB,CAAA;KACjC,oBAAC,aAAD,EAAA,UAAa,UAAoB,CAAA;KACjC,oBAAC,aAAD;MAAa,OAAM;gBAAM;MAAoB,CAAA;KACjC,EAAA,CAAA,EACd,oBAAC,WAAD;KAAW,cAAa;gBACpB,YAAY,EAAE,EAAE,KAAK,YACrB,qBAAC,UAAD,EAAA,UAAA;MACE,oBAAC,WAAD,EAAA,UAAY,WAAW,QAAQ,QAAQ,EAAa,CAAA;MACpD,oBAAC,WAAD,EAAA,UAAY,eAAe,QAAQ,OAAO,QAAQ,SAAS,EAAa,CAAA;MACxE,oBAAC,WAAD,EAAA,UACE,oBAAC,MAAD;OACE,OAAO,QAAQ,WAAW,SAAS,YAAY;OAC/C,SAAQ;OACR,MAAK;iBAEJ,QAAQ;OACJ,CAAA,EACG,CAAA;MACZ,oBAAC,WAAD;OAAW,WAAU;iBAClB,QAAQ,sBACP,oBAAC,QAAD;QACE,IAAI;QACJ,MAAM,QAAQ;QACd,QAAO;QACP,KAAI;QACJ,SAAQ;QACR,MAAK;QACL,YAAY,oBAAC,cAAD,EAAc,WAAU,WAAY,CAAA;kBACjD;QAEQ,CAAA;OAED,CAAA;MACH,EAAA,EA3BI,QAAQ,GA2BZ,CACX;KACQ,CAAA,CACN;;GAED,CAAA,CACN,EAAA,CAAA,CACH"}

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

@@ -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.mts.map

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

@@ -0,0 +1,11 @@
+import { BillingSinglePlanSelect } from "./BillingSinglePlanSelect.mjs";
+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.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingPlanSelect.mjs","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.mts

@@ -0,0 +1,17 @@
+import { UseBackendTRPC } from "../../../types.mjs";
+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.mts.map

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

@@ -0,0 +1,21 @@
+import { BillingInvoicePage } from "./BillingInvoicePage.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Route } from "react-router";
+//#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.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BillingRouter.mjs","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.mts

@@ -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.mts.map