@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/checkout/components/NativeCheckoutView.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { useNativeCheckout } from '../hooks/useNativeCheckout';
+import { PurchaseType } from '../types';
+
+interface NativeCheckoutViewProps {
+    purchaseType: PurchaseType;
+    productId?: string;
+    billingAccountId?: string;
+    nativeCheckout: ReturnType<typeof useNativeCheckout>;
+    onBack: () => void;
+}
+export declare const NativeCheckoutView: FC<NativeCheckoutViewProps>;
+export {};
+//# sourceMappingURL=NativeCheckoutView.d.ts.map

package/dist/billing/modules/checkout/components/NativeCheckoutView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeCheckoutView.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/NativeCheckoutView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAgBrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,UAAU,uBAAuB;IAC/B,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;IACrD,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAsPD,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAuJ1D,CAAC"}

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

@@ -0,0 +1,273 @@
+import { useEffect as e, useState as t } from "react";
+import { ArrowLeft as n, Blocks as r, CalendarDays as i, CheckCircle as a, ChevronRight as o, Coins as s, Info as c, Loader2 as l, Package as u, RotateCcw as d, ShoppingBag as f, Smartphone as p, XCircle as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/billing/modules/checkout/components/NativeCheckoutView.tsx
+var v = typeof navigator < "u" && (/iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ? "App Store" : "Google Play";
+function y(e) {
+	switch (e) {
+		case "CREDITS": return "Credits";
+		case "ADDON": return "Add-on";
+		case "ORDER": return "Order";
+		default: return "Subscription";
+	}
+}
+function b(e) {
+	switch (e) {
+		case "CREDITS": return /* @__PURE__ */ g(s, { className: "size-6 text-[--color-primary]" });
+		case "ADDON": return /* @__PURE__ */ g(r, { className: "size-6 text-[--color-primary]" });
+		case "ORDER": return /* @__PURE__ */ g(f, { className: "size-6 text-[--color-primary]" });
+		default: return /* @__PURE__ */ g(u, { className: "size-6 text-[--color-primary]" });
+	}
+}
+function x(e) {
+	if (!e) return null;
+	switch (e.unit) {
+		case 0: return e.numberOfUnits === 1 ? "Billed daily" : `Billed every ${e.numberOfUnits} days`;
+		case 1: return e.numberOfUnits === 1 ? "Billed weekly" : `Billed every ${e.numberOfUnits} weeks`;
+		case 2: return e.numberOfUnits === 1 ? "Billed monthly" : `Billed every ${e.numberOfUnits} months`;
+		case 3: return e.numberOfUnits === 1 ? "Billed yearly" : `Billed every ${e.numberOfUnits} years`;
+		default: return null;
+	}
+}
+function S(e) {
+	switch (e) {
+		case "CREDITS": return "Your credits will be added shortly. It may take a few seconds to reflect.";
+		case "ADDON": return "Your add-on will be activated shortly. It may take a few seconds to reflect.";
+		case "ORDER": return "Your order has been placed. It may take a few seconds to reflect.";
+		default: return "Your subscription will be activated shortly. It may take a few seconds to reflect.";
+	}
+}
+var C = ({ product: e, purchaseType: t, onPay: n, isProcessing: r }) => {
+	let a = x(e.subscriptionPeriod), s = !!e.introductoryPrice;
+	return /* @__PURE__ */ _("div", {
+		className: "flex flex-col gap-4 p-4",
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "rounded-2xl border border-[--color-border] bg-[--color-surface] overflow-hidden",
+				children: [
+					/* @__PURE__ */ _("div", {
+						className: "flex items-start gap-4 p-4",
+						children: [/* @__PURE__ */ g("div", {
+							className: "flex size-11 shrink-0 items-center justify-center rounded-xl bg-[--color-primary-subtle]",
+							children: b(t)
+						}), /* @__PURE__ */ _("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ g("p", {
+								className: "text-sm font-semibold text-[--color-text-primary] leading-snug",
+								children: e.title
+							}), e.description ? /* @__PURE__ */ g("p", {
+								className: "mt-1 text-xs text-[--color-text-secondary] leading-relaxed",
+								children: e.description
+							}) : null]
+						})]
+					}),
+					/* @__PURE__ */ g("div", { className: "h-px bg-[--color-border]" }),
+					/* @__PURE__ */ _("div", {
+						className: "flex items-center justify-between px-4 py-3",
+						children: [/* @__PURE__ */ _("div", {
+							className: "flex flex-col",
+							children: [s && e.introductoryPrice ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("span", {
+								className: "text-xs text-[--color-text-secondary] line-through",
+								children: e.priceString
+							}), /* @__PURE__ */ _("span", {
+								className: "text-lg font-bold text-[--color-primary]",
+								children: [e.introductoryPrice.priceString, /* @__PURE__ */ g("span", {
+									className: "ml-1 text-xs font-normal text-[--color-text-secondary]",
+									children: "intro offer"
+								})]
+							})] }) : /* @__PURE__ */ g("span", {
+								className: "text-lg font-bold text-[--color-primary]",
+								children: e.priceString
+							}), a ? /* @__PURE__ */ _("div", {
+								className: "mt-0.5 flex items-center gap-1",
+								children: [/* @__PURE__ */ g(i, { className: "size-3 text-[--color-text-tertiary]" }), /* @__PURE__ */ g("span", {
+									className: "text-xs text-[--color-text-secondary]",
+									children: a
+								})]
+							}) : null]
+						}), /* @__PURE__ */ g("div", {
+							className: "flex items-center gap-1 rounded-full bg-[--color-surface-subtle] px-2.5 py-1",
+							children: /* @__PURE__ */ g("span", {
+								className: "text-xs font-medium text-[--color-text-secondary]",
+								children: y(t)
+							})
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex items-start gap-2 rounded-xl bg-[--color-surface-subtle] px-3 py-2.5",
+				children: [/* @__PURE__ */ g(c, { className: "mt-0.5 size-3.5 shrink-0 text-[--color-text-tertiary]" }), /* @__PURE__ */ _("p", {
+					className: "text-xs text-[--color-text-secondary] leading-relaxed",
+					children: [
+						"Price includes all applicable taxes as determined by ",
+						v,
+						". No additional charges."
+					]
+				})]
+			}),
+			/* @__PURE__ */ g("button", {
+				disabled: r,
+				onClick: n,
+				className: "flex w-full items-center justify-center gap-2 rounded-xl bg-[--color-primary] px-6 py-4 text-sm font-semibold text-[--color-primary-foreground] transition-opacity disabled:opacity-60 active:opacity-80",
+				children: r ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(l, { className: "size-4 animate-spin" }), "Processing…"] }) : /* @__PURE__ */ _(h, { children: [
+					/* @__PURE__ */ g(p, { className: "size-4" }),
+					"Pay with ",
+					v,
+					/* @__PURE__ */ g(o, { className: "size-4 opacity-70" })
+				] })
+			}),
+			/* @__PURE__ */ _("p", {
+				className: "text-center text-[10px] leading-relaxed text-[--color-text-tertiary]",
+				children: [
+					"By continuing, you agree to the ",
+					v,
+					" terms.",
+					" ",
+					t === "PLAN" ? "Subscription renews automatically. Cancel anytime." : "This is a one-time purchase."
+				]
+			})
+		]
+	});
+}, w = ({ products: e, purchaseType: t, onSelect: n, isProcessing: r }) => /* @__PURE__ */ _("div", {
+	className: "flex flex-col gap-3 p-4",
+	children: [/* @__PURE__ */ _("p", {
+		className: "text-xs font-medium uppercase tracking-wide text-[--color-text-tertiary]",
+		children: ["Select a ", y(t)]
+	}), e.map((e) => {
+		let i = x(e.subscriptionPeriod);
+		return /* @__PURE__ */ _("button", {
+			disabled: r,
+			onClick: () => n(e),
+			className: "flex items-center justify-between rounded-xl border border-[--color-border] bg-[--color-surface] p-4 text-left transition-colors hover:border-[--color-primary] hover:bg-[--color-surface-hover] disabled:opacity-60",
+			children: [/* @__PURE__ */ _("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ g("div", {
+					className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[--color-primary-subtle]",
+					children: b(t)
+				}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+					className: "text-sm font-semibold text-[--color-text-primary]",
+					children: e.title
+				}), i ? /* @__PURE__ */ g("p", {
+					className: "mt-0.5 text-xs text-[--color-text-secondary]",
+					children: i
+				}) : null] })]
+			}), /* @__PURE__ */ _("div", {
+				className: "ml-4 shrink-0 text-right",
+				children: [/* @__PURE__ */ g("p", {
+					className: "text-base font-bold text-[--color-primary]",
+					children: e.priceString
+				}), r && /* @__PURE__ */ g(l, { className: "ml-auto mt-1 size-4 animate-spin text-[--color-text-tertiary]" })]
+			})]
+		}, e.identifier);
+	})]
+}), T = ({ purchaseType: r, productId: i, nativeCheckout: o, onBack: s }) => {
+	let { products: c, checkoutState: u, error: f, isLoading: h, loadProducts: b, purchaseProduct: x, restorePurchases: T } = o, [E, D] = t(null);
+	e(() => {
+		b(i ? [i] : void 0);
+	}, [b, i]), e(() => {
+		c.length === 1 && c[0] && !E && D(c[0]);
+	}, [c, E]);
+	let O = (e) => {
+		D(e), x(e);
+	};
+	if (u === "success") return /* @__PURE__ */ _("div", {
+		className: "flex flex-col items-center justify-center gap-6 py-16 px-6 text-center",
+		children: [
+			/* @__PURE__ */ g(a, { className: "size-16 text-[--color-success]" }),
+			/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+				className: "text-xl font-semibold text-[--color-text-primary]",
+				children: "Purchase Successful"
+			}), /* @__PURE__ */ g("p", {
+				className: "mt-2 text-sm text-[--color-text-secondary]",
+				children: S(r)
+			})] }),
+			/* @__PURE__ */ g("button", {
+				onClick: s,
+				className: "rounded-xl bg-[--color-primary] px-8 py-3 text-sm font-semibold text-[--color-primary-foreground]",
+				children: "Done"
+			})
+		]
+	});
+	if (u === "error") return /* @__PURE__ */ _("div", {
+		className: "flex flex-col items-center justify-center gap-6 py-16 px-6 text-center",
+		children: [
+			/* @__PURE__ */ g(m, { className: "size-16 text-[--color-destructive]" }),
+			/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+				className: "text-xl font-semibold text-[--color-text-primary]",
+				children: "Purchase Failed"
+			}), /* @__PURE__ */ g("p", {
+				className: "mt-2 text-sm text-[--color-text-secondary]",
+				children: f
+			})] }),
+			/* @__PURE__ */ _("div", {
+				className: "flex gap-3",
+				children: [/* @__PURE__ */ g("button", {
+					onClick: () => void b(i ? [i] : void 0),
+					className: "rounded-xl border border-[--color-border] px-6 py-3 text-sm font-medium text-[--color-text-primary]",
+					children: "Try Again"
+				}), /* @__PURE__ */ g("button", {
+					onClick: s,
+					className: "rounded-xl bg-[--color-primary] px-6 py-3 text-sm font-medium text-[--color-primary-foreground]",
+					children: "Cancel"
+				})]
+			})
+		]
+	});
+	let k = u === "processing";
+	return /* @__PURE__ */ _("div", {
+		className: "flex flex-col gap-0",
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center gap-3 border-b border-[--color-border] px-4 py-3",
+				children: [/* @__PURE__ */ g("button", {
+					onClick: s,
+					className: "rounded-lg p-2 text-[--color-text-secondary] hover:bg-[--color-surface-hover]",
+					children: /* @__PURE__ */ g(n, { className: "size-5" })
+				}), /* @__PURE__ */ g("div", { children: /* @__PURE__ */ g("p", {
+					className: "text-base font-semibold text-[--color-text-primary]",
+					children: E ?? c.length === 1 ? "Order Summary" : `Choose a ${y(r)}`
+				}) })]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center gap-2 border-b border-[--color-border] bg-[--color-surface-subtle] px-4 py-2",
+				children: [/* @__PURE__ */ g(p, { className: "size-3.5 text-[--color-text-tertiary]" }), /* @__PURE__ */ _("span", {
+					className: "text-xs text-[--color-text-secondary]",
+					children: ["Payments processed securely by ", /* @__PURE__ */ g("span", {
+						className: "font-medium",
+						children: v
+					})]
+				})]
+			}),
+			h && c.length === 0 ? /* @__PURE__ */ g("div", {
+				className: "flex items-center justify-center py-20",
+				children: /* @__PURE__ */ g(l, { className: "size-6 animate-spin text-[--color-text-tertiary]" })
+			}) : c.length === 0 ? /* @__PURE__ */ g("div", {
+				className: "py-16 text-center text-sm text-[--color-text-secondary] px-6",
+				children: "No products available for this platform. Please try again later."
+			}) : E ?? c.length === 1 ? /* @__PURE__ */ g(C, {
+				product: E ?? c[0],
+				purchaseType: r,
+				onPay: () => O(E ?? c[0]),
+				isProcessing: k
+			}) : /* @__PURE__ */ g(w, {
+				products: c,
+				purchaseType: r,
+				onSelect: (e) => O(e),
+				isProcessing: k
+			}),
+			!k && /* @__PURE__ */ g("div", {
+				className: "px-4 pb-6 pt-2",
+				children: /* @__PURE__ */ _("button", {
+					onClick: () => void T(),
+					className: "flex w-full items-center justify-center gap-1.5 text-xs text-[--color-text-tertiary] underline-offset-2 hover:underline",
+					children: [/* @__PURE__ */ g(d, { className: "size-3" }), "Restore previous purchases"]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { T as NativeCheckoutView };
+
+//# sourceMappingURL=NativeCheckoutView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeCheckoutView.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/NativeCheckoutView.tsx"],"sourcesContent":["/**\n * Native IAP Checkout View\n *\n * Replaces the Stripe/Razorpay checkout UI when running inside a Capacitor\n * native app (iOS / Android). Shows an order summary then triggers the native\n * payment sheet on confirmation.\n *\n * After a successful purchase the backend validates the receipt/token with\n * Apple/Google servers and activates the subscription, credits, or add-on.\n */\n\nimport { type FC, useEffect, useState } from 'react';\nimport {\n  ArrowLeft,\n  Loader2,\n  CheckCircle,\n  XCircle,\n  RotateCcw,\n  Smartphone,\n  Package,\n  Coins,\n  Blocks,\n  ShoppingBag,\n  CalendarDays,\n  Info,\n  ChevronRight,\n} from 'lucide-react';\nimport type { useNativeCheckout } from '../hooks/useNativeCheckout';\nimport type { Product } from '@capgo/native-purchases';\nimport type { PurchaseType } from '../types';\n\ninterface NativeCheckoutViewProps {\n  purchaseType: PurchaseType;\n  productId?: string;\n  billingAccountId?: string;\n  nativeCheckout: ReturnType<typeof useNativeCheckout>;\n  onBack: () => void;\n}\n\nconst isIOS =\n  typeof navigator !== 'undefined' &&\n  (/iPad|iPhone|iPod/.test(navigator.userAgent) ||\n    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));\n\nconst storeName = isIOS ? 'App Store' : 'Google Play';\n\nfunction purchaseTypeLabel(type: PurchaseType): string {\n  switch (type) {\n    case 'CREDITS':\n      return 'Credits';\n    case 'ADDON':\n      return 'Add-on';\n    case 'ORDER':\n      return 'Order';\n    default:\n      return 'Subscription';\n  }\n}\n\nfunction purchaseTypeIcon(type: PurchaseType) {\n  switch (type) {\n    case 'CREDITS':\n      return <Coins className=\"size-6 text-[--color-primary]\" />;\n    case 'ADDON':\n      return <Blocks className=\"size-6 text-[--color-primary]\" />;\n    case 'ORDER':\n      return <ShoppingBag className=\"size-6 text-[--color-primary]\" />;\n    default:\n      return <Package className=\"size-6 text-[--color-primary]\" />;\n  }\n}\n\ninterface SubscriptionPeriod {\n  numberOfUnits: number;\n  unit: number;\n}\n\n// unit: 0=day, 1=week, 2=month, 3=year (Apple/Google convention)\nfunction billingPeriodLabel(period: SubscriptionPeriod | null | undefined): string | null {\n  if (!period) return null;\n  switch (period.unit) {\n    case 0:\n      return period.numberOfUnits === 1\n        ? 'Billed daily'\n        : `Billed every ${period.numberOfUnits} days`;\n    case 1:\n      return period.numberOfUnits === 1\n        ? 'Billed weekly'\n        : `Billed every ${period.numberOfUnits} weeks`;\n    case 2:\n      return period.numberOfUnits === 1\n        ? 'Billed monthly'\n        : `Billed every ${period.numberOfUnits} months`;\n    case 3:\n      return period.numberOfUnits === 1\n        ? 'Billed yearly'\n        : `Billed every ${period.numberOfUnits} years`;\n    default:\n      return null;\n  }\n}\n\nfunction successLabel(type: PurchaseType): string {\n  switch (type) {\n    case 'CREDITS':\n      return 'Your credits will be added shortly. It may take a few seconds to reflect.';\n    case 'ADDON':\n      return 'Your add-on will be activated shortly. It may take a few seconds to reflect.';\n    case 'ORDER':\n      return 'Your order has been placed. It may take a few seconds to reflect.';\n    default:\n      return 'Your subscription will be activated shortly. It may take a few seconds to reflect.';\n  }\n}\n\n// ─── Single-product summary card ──────────────────────────────────────────────\n\ninterface ProductSummaryProps {\n  product: Product;\n  purchaseType: PurchaseType;\n  onPay: () => void;\n  isProcessing: boolean;\n}\n\nconst ProductSummary: FC<ProductSummaryProps> = ({\n  product,\n  purchaseType,\n  onPay,\n  isProcessing,\n}) => {\n  const period = billingPeriodLabel(\n    product.subscriptionPeriod as SubscriptionPeriod | null | undefined\n  );\n  const hasIntro = !!product.introductoryPrice;\n\n  return (\n    <div className=\"flex flex-col gap-4 p-4\">\n      {/* What you're getting */}\n      <div className=\"rounded-2xl border border-[--color-border] bg-[--color-surface] overflow-hidden\">\n        {/* Item row */}\n        <div className=\"flex items-start gap-4 p-4\">\n          <div className=\"flex size-11 shrink-0 items-center justify-center rounded-xl bg-[--color-primary-subtle]\">\n            {purchaseTypeIcon(purchaseType)}\n          </div>\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-sm font-semibold text-[--color-text-primary] leading-snug\">\n              {product.title}\n            </p>\n            {product.description ? (\n              <p className=\"mt-1 text-xs text-[--color-text-secondary] leading-relaxed\">\n                {product.description}\n              </p>\n            ) : null}\n          </div>\n        </div>\n\n        {/* Divider */}\n        <div className=\"h-px bg-[--color-border]\" />\n\n        {/* Pricing row */}\n        <div className=\"flex items-center justify-between px-4 py-3\">\n          <div className=\"flex flex-col\">\n            {hasIntro && product.introductoryPrice ? (\n              <>\n                <span className=\"text-xs text-[--color-text-secondary] line-through\">\n                  {product.priceString}\n                </span>\n                <span className=\"text-lg font-bold text-[--color-primary]\">\n                  {product.introductoryPrice.priceString}\n                  <span className=\"ml-1 text-xs font-normal text-[--color-text-secondary]\">\n                    intro offer\n                  </span>\n                </span>\n              </>\n            ) : (\n              <span className=\"text-lg font-bold text-[--color-primary]\">\n                {product.priceString}\n              </span>\n            )}\n            {period ? (\n              <div className=\"mt-0.5 flex items-center gap-1\">\n                <CalendarDays className=\"size-3 text-[--color-text-tertiary]\" />\n                <span className=\"text-xs text-[--color-text-secondary]\">{period}</span>\n              </div>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-1 rounded-full bg-[--color-surface-subtle] px-2.5 py-1\">\n            <span className=\"text-xs font-medium text-[--color-text-secondary]\">\n              {purchaseTypeLabel(purchaseType)}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      {/* Tax note */}\n      <div className=\"flex items-start gap-2 rounded-xl bg-[--color-surface-subtle] px-3 py-2.5\">\n        <Info className=\"mt-0.5 size-3.5 shrink-0 text-[--color-text-tertiary]\" />\n        <p className=\"text-xs text-[--color-text-secondary] leading-relaxed\">\n          Price includes all applicable taxes as determined by {storeName}. No additional charges.\n        </p>\n      </div>\n\n      {/* Pay CTA */}\n      <button\n        disabled={isProcessing}\n        onClick={onPay}\n        className=\"flex w-full items-center justify-center gap-2 rounded-xl bg-[--color-primary] px-6 py-4 text-sm font-semibold text-[--color-primary-foreground] transition-opacity disabled:opacity-60 active:opacity-80\"\n      >\n        {isProcessing ? (\n          <>\n            <Loader2 className=\"size-4 animate-spin\" />\n            Processing…\n          </>\n        ) : (\n          <>\n            <Smartphone className=\"size-4\" />\n            Pay with {storeName}\n            <ChevronRight className=\"size-4 opacity-70\" />\n          </>\n        )}\n      </button>\n\n      {/* Legal note */}\n      <p className=\"text-center text-[10px] leading-relaxed text-[--color-text-tertiary]\">\n        By continuing, you agree to the {storeName} terms.{' '}\n        {purchaseType === 'PLAN'\n          ? 'Subscription renews automatically. Cancel anytime.'\n          : 'This is a one-time purchase.'}\n      </p>\n    </div>\n  );\n};\n\n// ─── Multi-product list ───────────────────────────────────────────────────────\n\ninterface ProductListProps {\n  products: Product[];\n  purchaseType: PurchaseType;\n  onSelect: (product: Product) => void;\n  isProcessing: boolean;\n}\n\nconst ProductList: FC<ProductListProps> = ({ products, purchaseType, onSelect, isProcessing }) => (\n  <div className=\"flex flex-col gap-3 p-4\">\n    <p className=\"text-xs font-medium uppercase tracking-wide text-[--color-text-tertiary]\">\n      Select a {purchaseTypeLabel(purchaseType)}\n    </p>\n    {products.map((product) => {\n      const period = billingPeriodLabel(\n        product.subscriptionPeriod as SubscriptionPeriod | null | undefined\n      );\n      return (\n        <button\n          key={product.identifier}\n          disabled={isProcessing}\n          onClick={() => onSelect(product)}\n          className=\"flex items-center justify-between rounded-xl border border-[--color-border] bg-[--color-surface] p-4 text-left transition-colors hover:border-[--color-primary] hover:bg-[--color-surface-hover] disabled:opacity-60\"\n        >\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[--color-primary-subtle]\">\n              {purchaseTypeIcon(purchaseType)}\n            </div>\n            <div>\n              <p className=\"text-sm font-semibold text-[--color-text-primary]\">{product.title}</p>\n              {period ? (\n                <p className=\"mt-0.5 text-xs text-[--color-text-secondary]\">{period}</p>\n              ) : null}\n            </div>\n          </div>\n          <div className=\"ml-4 shrink-0 text-right\">\n            <p className=\"text-base font-bold text-[--color-primary]\">{product.priceString}</p>\n            {isProcessing && (\n              <Loader2 className=\"ml-auto mt-1 size-4 animate-spin text-[--color-text-tertiary]\" />\n            )}\n          </div>\n        </button>\n      );\n    })}\n  </div>\n);\n\n// ─── Main component ───────────────────────────────────────────────────────────\n\nexport const NativeCheckoutView: FC<NativeCheckoutViewProps> = ({\n  purchaseType,\n  productId,\n  nativeCheckout,\n  onBack,\n}) => {\n  const {\n    products,\n    checkoutState,\n    error,\n    isLoading,\n    loadProducts,\n    purchaseProduct,\n    restorePurchases,\n  } = nativeCheckout;\n\n  // When user already selected a specific product, track it for the summary view\n  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);\n\n  useEffect(() => {\n    void loadProducts(productId ? [productId] : undefined);\n  }, [loadProducts, productId]);\n\n  // Auto-select when only one product loaded (specific product was pre-selected)\n  useEffect(() => {\n    if (products.length === 1 && products[0] && !selectedProduct) {\n      setSelectedProduct(products[0]);\n    }\n  }, [products, selectedProduct]);\n\n  const handlePay = (product: Product) => {\n    setSelectedProduct(product);\n    void purchaseProduct(product);\n  };\n\n  // ── Success ────────────────────────────────────────────────────────────────\n  if (checkoutState === 'success') {\n    return (\n      <div className=\"flex flex-col items-center justify-center gap-6 py-16 px-6 text-center\">\n        <CheckCircle className=\"size-16 text-[--color-success]\" />\n        <div>\n          <p className=\"text-xl font-semibold text-[--color-text-primary]\">Purchase Successful</p>\n          <p className=\"mt-2 text-sm text-[--color-text-secondary]\">{successLabel(purchaseType)}</p>\n        </div>\n        <button\n          onClick={onBack}\n          className=\"rounded-xl bg-[--color-primary] px-8 py-3 text-sm font-semibold text-[--color-primary-foreground]\"\n        >\n          Done\n        </button>\n      </div>\n    );\n  }\n\n  // ── Error ──────────────────────────────────────────────────────────────────\n  if (checkoutState === 'error') {\n    return (\n      <div className=\"flex flex-col items-center justify-center gap-6 py-16 px-6 text-center\">\n        <XCircle className=\"size-16 text-[--color-destructive]\" />\n        <div>\n          <p className=\"text-xl font-semibold text-[--color-text-primary]\">Purchase Failed</p>\n          <p className=\"mt-2 text-sm text-[--color-text-secondary]\">{error}</p>\n        </div>\n        <div className=\"flex gap-3\">\n          <button\n            onClick={() => void loadProducts(productId ? [productId] : undefined)}\n            className=\"rounded-xl border border-[--color-border] px-6 py-3 text-sm font-medium text-[--color-text-primary]\"\n          >\n            Try Again\n          </button>\n          <button\n            onClick={onBack}\n            className=\"rounded-xl bg-[--color-primary] px-6 py-3 text-sm font-medium text-[--color-primary-foreground]\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const isProcessing = checkoutState === 'processing';\n\n  return (\n    <div className=\"flex flex-col gap-0\">\n      {/* Header */}\n      <div className=\"flex items-center gap-3 border-b border-[--color-border] px-4 py-3\">\n        <button\n          onClick={onBack}\n          className=\"rounded-lg p-2 text-[--color-text-secondary] hover:bg-[--color-surface-hover]\"\n        >\n          <ArrowLeft className=\"size-5\" />\n        </button>\n        <div>\n          <p className=\"text-base font-semibold text-[--color-text-primary]\">\n            {(selectedProduct ?? products.length === 1)\n              ? 'Order Summary'\n              : `Choose a ${purchaseTypeLabel(purchaseType)}`}\n          </p>\n        </div>\n      </div>\n\n      {/* Store badge */}\n      <div className=\"flex items-center gap-2 border-b border-[--color-border] bg-[--color-surface-subtle] px-4 py-2\">\n        <Smartphone className=\"size-3.5 text-[--color-text-tertiary]\" />\n        <span className=\"text-xs text-[--color-text-secondary]\">\n          Payments processed securely by <span className=\"font-medium\">{storeName}</span>\n        </span>\n      </div>\n\n      {/* Content */}\n      {isLoading && products.length === 0 ? (\n        <div className=\"flex items-center justify-center py-20\">\n          <Loader2 className=\"size-6 animate-spin text-[--color-text-tertiary]\" />\n        </div>\n      ) : products.length === 0 ? (\n        <div className=\"py-16 text-center text-sm text-[--color-text-secondary] px-6\">\n          No products available for this platform. Please try again later.\n        </div>\n      ) : (selectedProduct ?? products.length === 1) ? (\n        // Single product — show order summary + pay CTA\n        <ProductSummary\n          product={(selectedProduct ?? products[0])!}\n          purchaseType={purchaseType}\n          onPay={() => handlePay((selectedProduct ?? products[0])!)}\n          isProcessing={isProcessing}\n        />\n      ) : (\n        // Multiple products — show list to pick from\n        <ProductList\n          products={products}\n          purchaseType={purchaseType}\n          onSelect={(p) => handlePay(p)}\n          isProcessing={isProcessing}\n        />\n      )}\n\n      {/* Restore purchases */}\n      {!isProcessing && (\n        <div className=\"px-4 pb-6 pt-2\">\n          <button\n            onClick={() => void restorePurchases()}\n            className=\"flex w-full items-center justify-center gap-1.5 text-xs text-[--color-text-tertiary] underline-offset-2 hover:underline\"\n          >\n            <RotateCcw className=\"size-3\" />\n            Restore previous purchases\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AA4CA,IAAM,IAJJ,OAAO,YAAc,QACpB,mBAAmB,KAAK,UAAU,UAAU,IAC1C,UAAU,aAAa,cAAc,UAAU,iBAAiB,KAE3C,cAAc;AAExC,SAAS,EAAkB,GAA4B;AACrD,SAAQ,GAAR;EACE,KAAK,UACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,QACE,QAAO;;;AAIb,SAAS,EAAiB,GAAoB;AAC5C,SAAQ,GAAR;EACE,KAAK,UACH,QAAO,kBAAC,GAAD,EAAO,WAAU,iCAAkC,CAAA;EAC5D,KAAK,QACH,QAAO,kBAAC,GAAD,EAAQ,WAAU,iCAAkC,CAAA;EAC7D,KAAK,QACH,QAAO,kBAAC,GAAD,EAAa,WAAU,iCAAkC,CAAA;EAClE,QACE,QAAO,kBAAC,GAAD,EAAS,WAAU,iCAAkC,CAAA;;;AAUlE,SAAS,EAAmB,GAA8D;AACxF,KAAI,CAAC,EAAQ,QAAO;AACpB,SAAQ,EAAO,MAAf;EACE,KAAK,EACH,QAAO,EAAO,kBAAkB,IAC5B,iBACA,gBAAgB,EAAO,cAAc;EAC3C,KAAK,EACH,QAAO,EAAO,kBAAkB,IAC5B,kBACA,gBAAgB,EAAO,cAAc;EAC3C,KAAK,EACH,QAAO,EAAO,kBAAkB,IAC5B,mBACA,gBAAgB,EAAO,cAAc;EAC3C,KAAK,EACH,QAAO,EAAO,kBAAkB,IAC5B,kBACA,gBAAgB,EAAO,cAAc;EAC3C,QACE,QAAO;;;AAIb,SAAS,EAAa,GAA4B;AAChD,SAAQ,GAAR;EACE,KAAK,UACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,QACE,QAAO;;;AAab,IAAM,KAA2C,EAC/C,YACA,iBACA,UACA,sBACI;CACJ,IAAM,IAAS,EACb,EAAQ,mBACT,EACK,IAAW,CAAC,CAAC,EAAQ;AAE3B,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAiB,EAAa;OAC3B,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,EACH,EAAQ,cACP,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,GACF,KACA;SACF;;KAGN,kBAAC,OAAD,EAAK,WAAU,4BAA6B,CAAA;KAG5C,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,KAAY,EAAQ,oBACnB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAQ;QACJ,CAAA,EACP,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CACG,EAAQ,kBAAkB,aAC3B,kBAAC,QAAD;SAAM,WAAU;mBAAyD;SAElE,CAAA,CACF;UACN,EAAA,CAAA,GAEH,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAQ;QACJ,CAAA,EAER,IACC,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,uCAAwC,CAAA,EAChE,kBAAC,QAAD;SAAM,WAAU;mBAAyC;SAAc,CAAA,CACnE;YACJ,KACA;UACN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAkB,EAAa;QAC3B,CAAA;OACH,CAAA,CACF;;KACF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAM,WAAU,yDAA0D,CAAA,EAC1E,kBAAC,KAAD;KAAG,WAAU;eAAb;MAAqE;MACb;MAAU;MAC9D;OACA;;GAGN,kBAAC,UAAD;IACE,UAAU;IACV,SAAS;IACT,WAAU;cAET,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,EAAA,cAE1C,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA;KACE,kBAAC,GAAD,EAAY,WAAU,UAAW,CAAA;;KACvB;KACV,kBAAC,GAAD,EAAc,WAAU,qBAAsB,CAAA;KAC7C,EAAA,CAAA;IAEE,CAAA;GAGT,kBAAC,KAAD;IAAG,WAAU;cAAb;KAAoF;KACjD;KAAU;KAAQ;KAClD,MAAiB,SACd,uDACA;KACF;;GACA;;GAaJ,KAAqC,EAAE,aAAU,iBAAc,aAAU,sBAC7E,kBAAC,OAAD;CAAK,WAAU;WAAf,CACE,kBAAC,KAAD;EAAG,WAAU;YAAb,CAAwF,aAC5E,EAAkB,EAAa,CACvC;KACH,EAAS,KAAK,MAAY;EACzB,IAAM,IAAS,EACb,EAAQ,mBACT;AACD,SACE,kBAAC,UAAD;GAEE,UAAU;GACV,eAAe,EAAS,EAAQ;GAChC,WAAU;aAJZ,CAME,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAiB,EAAa;KAC3B,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAAqD,EAAQ;KAAU,CAAA,EACnF,IACC,kBAAC,KAAD;KAAG,WAAU;eAAgD;KAAW,CAAA,GACtE,KACA,EAAA,CAAA,CACF;OACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAA8C,EAAQ;KAAgB,CAAA,EAClF,KACC,kBAAC,GAAD,EAAS,WAAU,iEAAkE,CAAA,CAEnF;MACC;KAtBF,EAAQ,WAsBN;GAEX,CACE;IAKK,KAAmD,EAC9D,iBACA,cACA,mBACA,gBACI;CACJ,IAAM,EACJ,aACA,kBACA,UACA,cACA,iBACA,oBACA,wBACE,GAGE,CAAC,GAAiB,KAAsB,EAAyB,KAAK;AAO5E,CALA,QAAgB;AACT,IAAa,IAAY,CAAC,EAAU,GAAG,KAAA,EAAU;IACrD,CAAC,GAAc,EAAU,CAAC,EAG7B,QAAgB;AACd,EAAI,EAAS,WAAW,KAAK,EAAS,MAAM,CAAC,KAC3C,EAAmB,EAAS,GAAG;IAEhC,CAAC,GAAU,EAAgB,CAAC;CAE/B,IAAM,KAAa,MAAqB;AAEjC,EADL,EAAmB,EAAQ,EACtB,EAAgB,EAAQ;;AAI/B,KAAI,MAAkB,UACpB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAa,WAAU,kCAAmC,CAAA;GAC1D,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;cAAoD;IAAuB,CAAA,EACxF,kBAAC,KAAD;IAAG,WAAU;cAA8C,EAAa,EAAa;IAAK,CAAA,CACtF,EAAA,CAAA;GACN,kBAAC,UAAD;IACE,SAAS;IACT,WAAU;cACX;IAEQ,CAAA;GACL;;AAKV,KAAI,MAAkB,QACpB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAS,WAAU,sCAAuC,CAAA;GAC1D,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;cAAoD;IAAmB,CAAA,EACpF,kBAAC,KAAD;IAAG,WAAU;cAA8C;IAAU,CAAA,CACjE,EAAA,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,eAAe,KAAK,EAAa,IAAY,CAAC,EAAU,GAAG,KAAA,EAAU;KACrE,WAAU;eACX;KAEQ,CAAA,EACT,kBAAC,UAAD;KACE,SAAS;KACT,WAAU;eACX;KAEQ,CAAA,CACL;;GACF;;CAIV,IAAM,IAAe,MAAkB;AAEvC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,SAAS;KACT,WAAU;eAEV,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA;KACzB,CAAA,EACT,kBAAC,OAAD,EAAA,UACE,kBAAC,KAAD;KAAG,WAAU;eACT,KAAmB,EAAS,WAAW,IACrC,kBACA,YAAY,EAAkB,EAAa;KAC7C,CAAA,EACA,CAAA,CACF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAY,WAAU,yCAA0C,CAAA,EAChE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAAwD,mCACvB,kBAAC,QAAD;MAAM,WAAU;gBAAe;MAAiB,CAAA,CAC1E;OACH;;GAGL,KAAa,EAAS,WAAW,IAChC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAS,WAAU,oDAAqD,CAAA;IACpE,CAAA,GACJ,EAAS,WAAW,IACtB,kBAAC,OAAD;IAAK,WAAU;cAA+D;IAExE,CAAA,GACH,KAAmB,EAAS,WAAW,IAE1C,kBAAC,GAAD;IACE,SAAU,KAAmB,EAAS;IACxB;IACd,aAAa,EAAW,KAAmB,EAAS,GAAK;IAC3C;IACd,CAAA,GAGF,kBAAC,GAAD;IACY;IACI;IACd,WAAW,MAAM,EAAU,EAAE;IACf;IACd,CAAA;GAIH,CAAC,KACA,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,eAAe,KAAK,GAAkB;KACtC,WAAU;eAFZ,CAIE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAAA,6BAEzB;;IACL,CAAA;GAEJ"}

package/dist/billing/modules/checkout/components/OrderSummary.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { CheckoutItem, Currency } from '../types';
+
+interface OrderSummaryProps {
+    items: CheckoutItem[];
+    subtotal: number;
+    discountAmount: number;
+    taxAmount: number;
+    taxRate: number;
+    taxType?: string;
+    total: number;
+    currency: Currency;
+    showInCredits?: boolean;
+    /** Whether tax is being calculated */
+    isCalculatingTax?: boolean;
+    onUpdateQuantity?: (itemId: string, quantity: number) => void;
+    onRemoveItem?: (itemId: string) => void;
+    isEditable?: boolean;
+}
+export declare const OrderSummary: FC<OrderSummaryProps>;
+export {};
+//# sourceMappingURL=OrderSummary.d.ts.map

package/dist/billing/modules/checkout/components/OrderSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSummary.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/OrderSummary.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AAkBzC,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAmB,MAAM,UAAU,CAAC;AAWxE,UAAU,iBAAiB;IACzB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAuW9C,CAAC"}