@burdenoff/microfe-billing 2026.1005.3 → 2026.1005.5

package/dist/billing/modules/checkout/components/WebCheckoutRedirectView.js

@@ -0,0 +1,82 @@
+import { useBilling as e } from "../../../providers/BillingProvider.js";
+import { nativeOpenUrl as t } from "../../../../utils/nativeBridge.js";
+import { useMemo as n } from "react";
+import { ArrowRight as r, ExternalLink as i, Globe as a, ShoppingBag as o } from "lucide-react";
+import { useAppShell as s } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/billing/modules/checkout/components/WebCheckoutRedirectView.tsx
+function u(e, t) {
+	return `${t.toLowerCase().includes("alpha") ? "alphaapp" : "app"}.${{
+		botlit: "botlit.ai",
+		healthybowl: "gethealthybowl.com",
+		workspaces: "burdenoff.com"
+	}[e] ?? `${e}.com`}`;
+}
+function d(e) {
+	switch (e) {
+		case "CREDITS": return {
+			title: "Continue on the web to buy credits",
+			body: "Credit purchases use flexible pricing, so you can choose the exact amount you need on the FluidGrids web app.",
+			icon: a
+		};
+		case "ORDER": return {
+			title: "Continue on the web to place your order",
+			body: "Store orders use web checkout for shipping, tax, location-based pricing, and the available payment methods.",
+			icon: o
+		};
+		default: return {
+			title: "Continue on the web to complete your purchase",
+			body: "This purchase uses the existing secure web checkout.",
+			icon: i
+		};
+	}
+}
+var f = ({ purchaseType: i, path: a, billingAccountId: o, onBack: f }) => {
+	let { apiGatewayUrl: p } = e(), { productSlug: m } = s(), h = n(() => d(i), [i]), g = h.icon, _ = n(() => {
+		let e = u(m ?? "fluidgrids", p ?? ""), t = new URL(`https://${e}${a.startsWith("/") ? a : `/${a}`}`);
+		return o && t.searchParams.set("billingAccountId", o), t.toString();
+	}, [
+		p,
+		o,
+		a,
+		m
+	]);
+	return /* @__PURE__ */ l("div", {
+		className: "mx-auto flex max-w-lg flex-col items-center gap-6 px-6 py-16 text-center",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "flex size-16 items-center justify-center rounded-full bg-[--color-primary-subtle]",
+				children: /* @__PURE__ */ c(g, { className: "size-8 text-[--color-primary]" })
+			}),
+			/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("h1", {
+				className: "text-xl font-semibold text-[--color-text-primary]",
+				children: h.title
+			}), /* @__PURE__ */ c("p", {
+				className: "mt-3 text-sm leading-relaxed text-[--color-text-secondary]",
+				children: h.body
+			})] }),
+			/* @__PURE__ */ c("div", {
+				className: "w-full rounded-xl border border-[--color-border] bg-[--color-surface] px-4 py-3 text-left text-xs leading-relaxed text-[--color-text-secondary]",
+				children: "The web checkout will open securely in your browser. Your account and billing details will remain associated with this purchase."
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex w-full flex-col gap-3 sm:flex-row sm:justify-center",
+				children: [/* @__PURE__ */ l("button", {
+					type: "button",
+					onClick: () => void t(_),
+					className: "inline-flex items-center justify-center gap-2 rounded-xl bg-[--color-primary] px-6 py-3 text-sm font-semibold text-[--color-primary-foreground]",
+					children: ["Open web checkout", /* @__PURE__ */ c(r, { className: "size-4" })]
+				}), /* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: f,
+					className: "rounded-xl border border-[--color-border] px-6 py-3 text-sm font-medium text-[--color-text-primary]",
+					children: "Go back"
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { f as WebCheckoutRedirectView };
+
+//# sourceMappingURL=WebCheckoutRedirectView.js.map

package/dist/billing/modules/checkout/components/WebCheckoutRedirectView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebCheckoutRedirectView.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/WebCheckoutRedirectView.tsx"],"sourcesContent":["/**\n * Native-app handoff for purchases that require runtime pricing or a web order\n * flow. Native StoreKit/Play Billing is reserved for fixed-price plans; credits,\n * add-ons, and store orders continue through the existing web checkout.\n */\nimport { type FC, useMemo } from 'react';\nimport { ArrowRight, ExternalLink, Globe, ShoppingBag } from 'lucide-react';\nimport { nativeOpenUrl } from '../../../../utils/nativeBridge';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useAppShell } from '@burdenoff/fe-libs/shared/providers/shell';\nimport type { PurchaseType } from '../types';\n\ninterface WebCheckoutRedirectViewProps {\n  purchaseType: PurchaseType;\n  path: string;\n  billingAccountId?: string;\n  onBack: () => void;\n}\n\nfunction getProductHost(productSlug: string, apiGatewayUrl: string): string {\n  const isAlpha = apiGatewayUrl.toLowerCase().includes('alpha');\n  const prefix = isAlpha ? 'alphaapp' : 'app';\n  const domainByProduct: Record<string, string> = {\n    botlit: 'botlit.ai',\n    healthybowl: 'gethealthybowl.com',\n    workspaces: 'burdenoff.com',\n  };\n  const domain = domainByProduct[productSlug] ?? `${productSlug}.com`;\n  return `${prefix}.${domain}`;\n}\n\nfunction copyForPurchaseType(purchaseType: PurchaseType): {\n  title: string;\n  body: string;\n  icon: FC<{ className?: string }>;\n} {\n  switch (purchaseType) {\n    case 'CREDITS':\n      return {\n        title: 'Continue on the web to buy credits',\n        body: 'Credit purchases use flexible pricing, so you can choose the exact amount you need on the FluidGrids web app.',\n        icon: Globe,\n      };\n    case 'ORDER':\n      return {\n        title: 'Continue on the web to place your order',\n        body: 'Store orders use web checkout for shipping, tax, location-based pricing, and the available payment methods.',\n        icon: ShoppingBag,\n      };\n    default:\n      return {\n        title: 'Continue on the web to complete your purchase',\n        body: 'This purchase uses the existing secure web checkout.',\n        icon: ExternalLink,\n      };\n  }\n}\n\nexport const WebCheckoutRedirectView: FC<WebCheckoutRedirectViewProps> = ({\n  purchaseType,\n  path,\n  billingAccountId,\n  onBack,\n}) => {\n  const { apiGatewayUrl } = useBilling();\n  const { productSlug } = useAppShell();\n  const copy = useMemo(() => copyForPurchaseType(purchaseType), [purchaseType]);\n  const Icon = copy.icon;\n  const webCheckoutUrl = useMemo(() => {\n    const host = getProductHost(productSlug ?? 'fluidgrids', apiGatewayUrl ?? '');\n    const url = new URL(`https://${host}${path.startsWith('/') ? path : `/${path}`}`);\n    if (billingAccountId) url.searchParams.set('billingAccountId', billingAccountId);\n    return url.toString();\n  }, [apiGatewayUrl, billingAccountId, path, productSlug]);\n\n  return (\n    <div className=\"mx-auto flex max-w-lg flex-col items-center gap-6 px-6 py-16 text-center\">\n      <div className=\"flex size-16 items-center justify-center rounded-full bg-[--color-primary-subtle]\">\n        <Icon className=\"size-8 text-[--color-primary]\" />\n      </div>\n      <div>\n        <h1 className=\"text-xl font-semibold text-[--color-text-primary]\">{copy.title}</h1>\n        <p className=\"mt-3 text-sm leading-relaxed text-[--color-text-secondary]\">{copy.body}</p>\n      </div>\n      <div className=\"w-full rounded-xl border border-[--color-border] bg-[--color-surface] px-4 py-3 text-left text-xs leading-relaxed text-[--color-text-secondary]\">\n        The web checkout will open securely in your browser. Your account and billing details will\n        remain associated with this purchase.\n      </div>\n      <div className=\"flex w-full flex-col gap-3 sm:flex-row sm:justify-center\">\n        <button\n          type=\"button\"\n          onClick={() => void nativeOpenUrl(webCheckoutUrl)}\n          className=\"inline-flex items-center justify-center gap-2 rounded-xl bg-[--color-primary] px-6 py-3 text-sm font-semibold text-[--color-primary-foreground]\"\n        >\n          Open web checkout\n          <ArrowRight className=\"size-4\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={onBack}\n          className=\"rounded-xl border border-[--color-border] px-6 py-3 text-sm font-medium text-[--color-text-primary]\"\n        >\n          Go back\n        </button>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAmBA,SAAS,EAAe,GAAqB,GAA+B;CAS1E,OAAO,GARS,EAAc,YAAY,EAAE,SAAS,OACtC,IAAU,aAAa,MAOrB,GADF;EAJb,QAAQ;EACR,aAAa;EACb,YAAY;CAEC,EAAgB,MAAgB,GAAG,EAAY;AAEhE;AAEA,SAAS,EAAoB,GAI3B;CACA,QAAQ,GAAR;EACE,KAAK,WACH,OAAO;GACL,OAAO;GACP,MAAM;GACN,MAAM;EACR;EACF,KAAK,SACH,OAAO;GACL,OAAO;GACP,MAAM;GACN,MAAM;EACR;EACF,SACE,OAAO;GACL,OAAO;GACP,MAAM;GACN,MAAM;EACR;CACJ;AACF;AAEA,IAAa,KAA6D,EACxE,iBACA,SACA,qBACA,gBACI;CACJ,IAAM,EAAE,qBAAkB,EAAW,GAC/B,EAAE,mBAAgB,EAAY,GAC9B,IAAO,QAAc,EAAoB,CAAY,GAAG,CAAC,CAAY,CAAC,GACtE,IAAO,EAAK,MACZ,IAAiB,QAAc;EACnC,IAAM,IAAO,EAAe,KAAe,cAAc,KAAiB,EAAE,GACtE,IAAM,IAAI,IAAI,WAAW,IAAO,EAAK,WAAW,GAAG,IAAI,IAAO,IAAI,KAAQ;EAEhF,OADI,KAAkB,EAAI,aAAa,IAAI,oBAAoB,CAAgB,GACxE,EAAI,SAAS;CACtB,GAAG;EAAC;EAAe;EAAkB;EAAM;CAAW,CAAC;CAEvD,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAM,WAAU,gCAAiC,CAAA;GAC9C,CAAA;GACL,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAqD,EAAK;GAAU,CAAA,GAClF,kBAAC,KAAD;IAAG,WAAU;cAA8D,EAAK;GAAQ,CAAA,CACrF,EAAA,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cAAkJ;GAG5J,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,KAAK,EAAc,CAAc;KAChD,WAAU;eAHZ,CAIC,qBAEC,kBAAC,GAAD,EAAY,WAAU,SAAU,CAAA,CAC1B;QACR,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eACX;IAEO,CAAA,CACL;;EACF;;AAET"}

package/dist/billing/modules/checkout/components/index.js

@@ -1,4 +1,5 @@
 import "./NativeCheckoutView.js";
+import "./WebCheckoutRedirectView.js";
 import "./BillingAccountSelector.js";
 import "./PaymentProviderSelector.js";
 import "./SavedCardSelector.js";

package/dist/billing/modules/checkout/index.js

@@ -4,6 +4,7 @@ import "./hooks/usePaymentProviders.js";
 import "./hooks/usePaymentStatusPolling.js";
 import "./hooks/index.js";
 import "./components/NativeCheckoutView.js";
+import "./components/WebCheckoutRedirectView.js";
 import "./components/BillingAccountSelector.js";
 import "./components/OrderSummary.js";
 import "./components/PromoCodeInput.js";