npm - @burdenoff/microfe-billing - Versions diffs - 2026.625.3 → 2026.625.5 - Mend

@burdenoff/microfe-billing 2026.625.3 → 2026.625.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/dist/billing/lib/native-purchases.js CHANGED Viewed

@@ -1,44 +1,2 @@
-import { Capacitor as e } from "../../node_modules/@capacitor/core/dist/index.js";
-//#region src/billing/lib/native-purchases.ts
-function t() {
-	return e.isNativePlatform();
-}
-async function n() {
-	if (!e.isNativePlatform()) return null;
-	try {
-		let e = await import(
-			/* @vite-ignore */
-			"@capgo/native-purchases"
-);
-		return e.NativePurchases ?? e.default ?? null;
-	} catch {
-		return null;
-	}
-}
-async function r(e, t) {
-	let r = await n();
-	return !r || e.length === 0 ? [] : (await r.getProducts({
-		productIdentifiers: e,
-		productType: t
-	})).products ?? [];
-}
-async function i(e, t) {
-	let r = await n();
-	if (!r) throw Error("Native purchases not available on this platform");
-	return r.purchaseProduct({
-		productIdentifier: e,
-		...t
-	});
-}
-async function a(e) {
-	let t = await n();
-	t && await t.acknowledgePurchase({ purchaseToken: e });
-}
-async function o() {
-	let e = await n();
-	e && await e.restorePurchases();
-}
-//#endregion
-export { a as acknowledgeNativePurchase, r as getNativeProducts, t as isNativeIAPAvailable, i as purchaseNativeProduct, o as restoreNativePurchases };
-//# sourceMappingURL=native-purchases.js.map
+import { acknowledgeNativePurchase as e, getNativeProducts as t, isNativeIAPAvailable as n, purchaseNativeProduct as r, restoreNativePurchases as i } from "@burdenoff/fe-libs/shared/native/purchases";
+export { e as acknowledgeNativePurchase, t as getNativeProducts, n as isNativeIAPAvailable, r as purchaseNativeProduct, i as restoreNativePurchases };

package/dist/billing/modules/addons/pages/AddonBrowseDetailPage.js CHANGED Viewed

@@ -13,8 +13,9 @@ import { Minus as u, Plus as d, ShoppingCart as f, Trash2 as p } from "lucide-re
 import { useParams as m } from "react-router-dom";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { EmphasisPanel as v, PagePurpose as y } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/addons/pages/AddonBrowseDetailPage.tsx
-function v(e) {
+function b(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
 		if (!n.quota) continue;
@@ -28,12 +29,12 @@ function v(e) {
 	}
 	return Array.from(t.values());
 }
-var y = () => {
-	let { t: y } = _(), b = (e, t) => {
-		let n = y(e);
+var x = () => {
+	let { t: x } = _(), S = (e, t) => {
+		let n = x(e);
 		return n === e ? t : n;
-	}, { addonId: x } = m(), S = s(), { addon: C, isLoading: w, error: T, refetch: E } = c(x), { addToCart: D, removeFromCart: O, updateQuantity: k, isInCart: A, getCartItem: j } = o(), M = l(() => v(C?.features || []), [C?.features]), N = C ? A(C.id) : !1, P = (C ? j(C.id) : void 0)?.quantity || 0;
-	return w ? /* @__PURE__ */ g("div", {
+	}, { addonId: C } = m(), w = s(), { addon: T, isLoading: E, error: D, refetch: O } = c(C), { addToCart: k, removeFromCart: A, updateQuantity: j, isInCart: M, getCartItem: N } = o(), P = l(() => b(T?.features || []), [T?.features]), F = T ? M(T.id) : !1, I = (T ? N(T.id) : void 0)?.quantity || 0;
+	return E ? /* @__PURE__ */ g("div", {
 		className: "space-y-6 p-6",
 		children: [/* @__PURE__ */ h("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ g("div", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
@@ -46,204 +47,208 @@ var y = () => {
 				].map((e) => /* @__PURE__ */ h("div", { className: "h-24 bg-bg-sunken animate-pulse rounded" }, e))
 			}), /* @__PURE__ */ h("div", { className: "h-64 bg-bg-sunken animate-pulse rounded" })]
 		})]
-	}) : T && a(T) ? /* @__PURE__ */ h("div", {
+	}) : D && a(D) ? /* @__PURE__ */ h("div", {
 		className: "p-6",
 		children: /* @__PURE__ */ h(t, {
-			title: b("billing.addons.serverUnavailable", "Server Unavailable"),
-			message: b("billing.addons.unableToLoadAddonDetails", "Unable to load addon details."),
-			onRetry: () => E(),
+			title: S("billing.addons.serverUnavailable", "Server Unavailable"),
+			message: S("billing.addons.unableToLoadAddonDetails", "Unable to load addon details."),
+			onRetry: () => O(),
 			showRetry: !0
 		})
-	}) : C ? /* @__PURE__ */ g("div", {
+	}) : T ? /* @__PURE__ */ g("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ h(e, {
-			title: C.name,
-			description: `${i(C.duration)} addon`
-		}), /* @__PURE__ */ g("div", {
-			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-			children: [/* @__PURE__ */ g("div", {
-				className: "lg:col-span-2 space-y-6",
+		children: [
+			/* @__PURE__ */ h(e, {
+				title: T.name,
+				description: `${i(T.duration)} addon`
+			}),
+			/* @__PURE__ */ h(y, { children: S("billing.addons.browseDetailPurpose", "See exactly what this add-on costs and the extra capacity it gives you on top of your plan before you buy it. Add it to your cart from here when it fits your needs.") }),
+			/* @__PURE__ */ g("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
 				children: [/* @__PURE__ */ g("div", {
-					className: "border border-border-subtle rounded-lg bg-bg-surface overflow-hidden",
-					children: [/* @__PURE__ */ h("div", {
-						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-						children: /* @__PURE__ */ h("h2", {
-							className: "font-semibold text-text-primary",
-							children: b("billing.addons.pricing", "Pricing")
-						})
-					}), /* @__PURE__ */ g("div", {
-						className: "p-6",
-						children: [/* @__PURE__ */ g("div", {
-							className: "flex items-baseline gap-2",
-							children: [/* @__PURE__ */ h("span", {
-								className: "text-4xl font-bold text-text-primary",
-								children: n(C.price, C.currency)
-							}), /* @__PURE__ */ g("span", {
-								className: "text-lg text-text-secondary",
-								children: ["/ ", r(C.duration)]
+					className: "lg:col-span-2 space-y-6",
+					children: [/* @__PURE__ */ g(v, {
+						className: "overflow-hidden p-0",
+						children: [/* @__PURE__ */ h("div", {
+							className: "p-4 border-b border-border-subtle",
+							children: /* @__PURE__ */ h("h2", {
+								className: "font-semibold text-text-primary",
+								children: S("billing.addons.pricing", "Pricing")
+							})
+						}), /* @__PURE__ */ g("div", {
+							className: "p-6",
+							children: [/* @__PURE__ */ g("div", {
+								className: "flex items-baseline gap-2",
+								children: [/* @__PURE__ */ h("span", {
+									className: "text-4xl font-bold text-text-primary",
+									children: n(T.price, T.currency)
+								}), /* @__PURE__ */ g("span", {
+									className: "text-lg text-text-secondary",
+									children: ["/ ", r(T.duration)]
+								})]
+							}), /* @__PURE__ */ g("p", {
+								className: "text-sm text-text-secondary mt-2",
+								children: [
+									S("billing.addons.billed", "Billed"),
+									" ",
+									T.duration === "monthly" ? S("billing.addons.everyMonth", "every month") : S("billing.addons.annually", "annually")
+								]
 							})]
-						}), /* @__PURE__ */ g("p", {
-							className: "text-sm text-text-secondary mt-2",
-							children: [
-								b("billing.addons.billed", "Billed"),
-								" ",
-								C.duration === "monthly" ? b("billing.addons.everyMonth", "every month") : b("billing.addons.annually", "annually")
-							]
+						})]
+					}), /* @__PURE__ */ g("div", {
+						className: "border border-border-subtle rounded-lg bg-bg-surface overflow-hidden",
+						children: [/* @__PURE__ */ h("div", {
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+							children: /* @__PURE__ */ g("h2", {
+								className: "font-semibold text-text-primary",
+								children: [
+									S("billing.addons.includedQuotas", "Included Quotas"),
+									" (",
+									P.length,
+									")"
+								]
+							})
+						}), /* @__PURE__ */ h("div", {
+							className: "p-4",
+							children: P.length === 0 ? /* @__PURE__ */ h("p", {
+								className: "text-sm text-text-secondary py-4 text-center",
+								children: S("billing.addons.noQuotas", "No quotas associated with this addon.")
+							}) : /* @__PURE__ */ h("div", {
+								className: "space-y-3",
+								children: P.map((e) => /* @__PURE__ */ g("div", {
+									className: "flex items-center justify-between p-3 border border-border-subtle rounded-lg bg-bg-sunken/20",
+									children: [/* @__PURE__ */ g("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ h("div", {
+											className: "size-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
+											children: /* @__PURE__ */ h("svg", {
+												className: "size-4 text-primary",
+												fill: "none",
+												viewBox: "0 0 24 24",
+												stroke: "currentColor",
+												children: /* @__PURE__ */ h("path", {
+													strokeLinecap: "round",
+													strokeLinejoin: "round",
+													strokeWidth: 2,
+													d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+												})
+											})
+										}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
+											className: "font-medium text-text-primary",
+											children: e.name
+										}), /* @__PURE__ */ g("p", {
+											className: "text-xs text-text-secondary capitalize",
+											children: ["Type: ", e.type]
+										})] })]
+									}), /* @__PURE__ */ g("div", {
+										className: "text-right",
+										children: [/* @__PURE__ */ h("span", {
+											className: "text-lg font-semibold text-status-success-text",
+											children: e.totalValue.toLocaleString()
+										}), /* @__PURE__ */ h("p", {
+											className: "text-xs text-text-secondary",
+											children: "total"
+										})]
+									})]
+								}, e.quotaId))
+							})
 						})]
 					})]
 				}), /* @__PURE__ */ g("div", {
-					className: "border border-border-subtle rounded-lg bg-bg-surface overflow-hidden",
-					children: [/* @__PURE__ */ h("div", {
-						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-						children: /* @__PURE__ */ g("h2", {
-							className: "font-semibold text-text-primary",
+					className: "space-y-6",
+					children: [/* @__PURE__ */ g("div", {
+						className: "border border-border-subtle rounded-lg bg-bg-surface overflow-hidden",
+						children: [/* @__PURE__ */ h("div", {
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+							children: /* @__PURE__ */ h("h2", {
+								className: "font-semibold text-text-primary",
+								children: S("billing.addons.purchase", "Purchase")
+							})
+						}), /* @__PURE__ */ g("div", {
+							className: "p-4 space-y-4",
 							children: [
-								b("billing.addons.includedQuotas", "Included Quotas"),
-								" (",
-								M.length,
-								")"
-							]
-						})
-					}), /* @__PURE__ */ h("div", {
-						className: "p-4",
-						children: M.length === 0 ? /* @__PURE__ */ h("p", {
-							className: "text-sm text-text-secondary py-4 text-center",
-							children: b("billing.addons.noQuotas", "No quotas associated with this addon.")
-						}) : /* @__PURE__ */ h("div", {
-							className: "space-y-3",
-							children: M.map((e) => /* @__PURE__ */ g("div", {
-								className: "flex items-center justify-between p-3 border border-border-subtle rounded-lg bg-bg-sunken/20",
-								children: [/* @__PURE__ */ g("div", {
-									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ h("div", {
-										className: "size-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-										children: /* @__PURE__ */ h("svg", {
-											className: "size-4 text-primary",
-											fill: "none",
-											viewBox: "0 0 24 24",
-											stroke: "currentColor",
-											children: /* @__PURE__ */ h("path", {
-												strokeLinecap: "round",
-												strokeLinejoin: "round",
-												strokeWidth: 2,
-												d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-											})
-										})
-									}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
-										className: "font-medium text-text-primary",
-										children: e.name
-									}), /* @__PURE__ */ g("p", {
-										className: "text-xs text-text-secondary capitalize",
-										children: ["Type: ", e.type]
-									})] })]
-								}), /* @__PURE__ */ g("div", {
-									className: "text-right",
+								/* @__PURE__ */ g("div", {
+									className: "flex items-center justify-between",
 									children: [/* @__PURE__ */ h("span", {
-										className: "text-lg font-semibold text-status-success-text",
-										children: e.totalValue.toLocaleString()
-									}), /* @__PURE__ */ h("p", {
-										className: "text-xs text-text-secondary",
-										children: "total"
+										className: "text-sm text-text-secondary",
+										children: S("billing.addons.price", "Price")
+									}), /* @__PURE__ */ g("span", {
+										className: "text-sm font-medium text-text-primary",
+										children: [
+											n(T.price, T.currency),
+											" /",
+											" ",
+											r(T.duration)
+										]
 									})]
-								})]
-							}, e.quotaId))
-						})
-					})]
-				})]
-			}), /* @__PURE__ */ g("div", {
-				className: "space-y-6",
-				children: [/* @__PURE__ */ g("div", {
-					className: "border border-border-subtle rounded-lg bg-bg-surface overflow-hidden",
-					children: [/* @__PURE__ */ h("div", {
-						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-						children: /* @__PURE__ */ h("h2", {
-							className: "font-semibold text-text-primary",
-							children: b("billing.addons.purchase", "Purchase")
-						})
-					}), /* @__PURE__ */ g("div", {
-						className: "p-4 space-y-4",
-						children: [
-							/* @__PURE__ */ g("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ h("span", {
-									className: "text-sm text-text-secondary",
-									children: b("billing.addons.price", "Price")
-								}), /* @__PURE__ */ g("span", {
-									className: "text-sm font-medium text-text-primary",
-									children: [
-										n(C.price, C.currency),
-										" /",
-										" ",
-										r(C.duration)
-									]
-								})]
-							}),
-							/* @__PURE__ */ g("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ h("span", {
-									className: "text-sm text-text-secondary",
-									children: b("billing.addons.billingLabel", "Billing")
-								}), /* @__PURE__ */ h("span", {
-									className: "text-sm font-medium text-text-primary capitalize",
-									children: C.duration
-								})]
-							}),
-							/* @__PURE__ */ h("div", {
-								className: "pt-2 space-y-2",
-								children: N ? /* @__PURE__ */ g("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ g("div", {
-										className: "flex items-center justify-between gap-2",
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ h("span", {
+										className: "text-sm text-text-secondary",
+										children: S("billing.addons.billingLabel", "Billing")
+									}), /* @__PURE__ */ h("span", {
+										className: "text-sm font-medium text-text-primary capitalize",
+										children: T.duration
+									})]
+								}),
+								/* @__PURE__ */ h("div", {
+									className: "pt-2 space-y-2",
+									children: F ? /* @__PURE__ */ g("div", {
+										className: "space-y-2",
 										children: [/* @__PURE__ */ g("div", {
-											className: "flex items-center gap-1",
-											children: [
-												/* @__PURE__ */ h("button", {
-													type: "button",
-													onClick: () => k(C.id, P - 1),
-													className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
-													children: /* @__PURE__ */ h(u, { className: "size-4" })
-												}),
-												/* @__PURE__ */ h("span", {
-													className: "w-10 text-center font-medium",
-													children: P
-												}),
-												/* @__PURE__ */ h("button", {
-													type: "button",
-													onClick: () => k(C.id, P + 1),
-													className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
-													children: /* @__PURE__ */ h(d, { className: "size-4" })
-												})
-											]
+											className: "flex items-center justify-between gap-2",
+											children: [/* @__PURE__ */ g("div", {
+												className: "flex items-center gap-1",
+												children: [
+													/* @__PURE__ */ h("button", {
+														type: "button",
+														onClick: () => j(T.id, I - 1),
+														className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
+														children: /* @__PURE__ */ h(u, { className: "size-4" })
+													}),
+													/* @__PURE__ */ h("span", {
+														className: "w-10 text-center font-medium",
+														children: I
+													}),
+													/* @__PURE__ */ h("button", {
+														type: "button",
+														onClick: () => j(T.id, I + 1),
+														className: "p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors",
+														children: /* @__PURE__ */ h(d, { className: "size-4" })
+													})
+												]
+											}), /* @__PURE__ */ h("button", {
+												type: "button",
+												onClick: () => A(T.id),
+												className: "p-1.5 rounded text-status-error-text hover:bg-status-error-bg/10 transition-colors",
+												title: "Remove from cart",
+												children: /* @__PURE__ */ h(p, { className: "size-4" })
+											})]
 										}), /* @__PURE__ */ h("button", {
 											type: "button",
-											onClick: () => O(C.id),
-											className: "p-1.5 rounded text-status-error-text hover:bg-status-error-bg/10 transition-colors",
-											title: "Remove from cart",
-											children: /* @__PURE__ */ h(p, { className: "size-4" })
+											onClick: () => w("/checkout/addons"),
+											className: "w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors",
+											children: "Proceed to Checkout"
 										})]
-									}), /* @__PURE__ */ h("button", {
+									}) : /* @__PURE__ */ g("button", {
 										type: "button",
-										onClick: () => S("/checkout/addons"),
-										className: "w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors",
-										children: "Proceed to Checkout"
-									})]
-								}) : /* @__PURE__ */ g("button", {
-									type: "button",
-									onClick: () => D(C),
-									className: "w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors flex items-center justify-center gap-2",
-									children: [/* @__PURE__ */ h(f, { className: "size-4" }), "Add to Cart"]
+										onClick: () => k(T),
+										className: "w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors flex items-center justify-center gap-2",
+										children: [/* @__PURE__ */ h(f, { className: "size-4" }), "Add to Cart"]
+									})
 								})
-							})
-						]
+							]
+						})]
+					}), /* @__PURE__ */ h("button", {
+						type: "button",
+						onClick: () => w("/addons"),
+						className: "w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
+						children: "Back to Addons"
 					})]
-				}), /* @__PURE__ */ h("button", {
-					type: "button",
-					onClick: () => S("/addons"),
-					className: "w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
-					children: "Back to Addons"
 				})]
-			})]
-		})]
+			})
+		]
 	}) : /* @__PURE__ */ h("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ g("div", {
@@ -251,15 +256,15 @@ var y = () => {
 			children: [
 				/* @__PURE__ */ h("h2", {
 					className: "text-lg font-semibold text-text-primary",
-					children: b("billing.addons.addonNotFound", "Addon not found")
+					children: S("billing.addons.addonNotFound", "Addon not found")
 				}),
 				/* @__PURE__ */ h("p", {
 					className: "text-sm text-text-secondary",
-					children: b("billing.addons.addonNotFoundMessage", "The addon you're looking for doesn't exist or has been removed.")
+					children: S("billing.addons.addonNotFoundMessage", "The addon you're looking for doesn't exist or has been removed.")
 				}),
 				/* @__PURE__ */ h("button", {
 					type: "button",
-					onClick: () => S("/addons"),
+					onClick: () => w("/addons"),
 					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors",
 					children: "Back to Addons"
 				})
@@ -268,6 +273,6 @@ var y = () => {
 	});
 };
 //#endregion
-export { y as AddonBrowseDetailPage };
+export { x as AddonBrowseDetailPage };
 //# sourceMappingURL=AddonBrowseDetailPage.js.map

package/dist/billing/modules/addons/pages/AddonBrowseDetailPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AddonBrowseDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/addons/pages/AddonBrowseDetailPage.tsx"],"sourcesContent":["/*\n Addons Module - Addon Browse Detail Page (User-facing)\n * View addon details and add to cart. No edit/toggle actions.\n /\n\nimport { useMemo, type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ShoppingCart, Plus, Minus, Trash2 } from 'lucide-react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useAddon } from '../hooks';\nimport { useAddonCartStore } from '../store/addonCartStore';\nimport { PageHeader, ServerError } from '../../../shared/components';\nimport {\n formatCurrency,\n formatPlanDuration,\n formatPlanDurationLabel,\n isServerError,\n} from '../../../shared/utils';\nimport type { SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface CombinedQuota {\n quotaId: string;\n name: string;\n totalValue: number;\n type: string;\n}\n\nfunction combineQuotas(features: SubscriptionFeatures[]): CombinedQuota[] {\n const quotaMap = new Map<string, CombinedQuota>();\n for (const feature of features) {\n if (!feature.quota) continue;\n const quotaId = feature.quota.id;\n const limits = feature.quota.limits as { value?: number; type?: string } \| null;\n const limitValue = limits?.value ?? 0;\n const limitType = limits?.type ?? 'unknown';\n const existing = quotaMap.get(quotaId);\n if (existing) {\n existing.totalValue += limitValue;\n } else {\n quotaMap.set(quotaId, {\n quotaId,\n name: feature.quota.name ?? 'Unknown Quota',\n totalValue: limitValue,\n type: limitType,\n });\n }\n }\n return Array.from(quotaMap.values());\n}\n\nexport const AddonBrowseDetailPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const { addonId } = useParams<{ addonId: string }>();\n const navigateTo = useBillingNavigate();\n const { addon, isLoading, error, refetch } = useAddon(addonId);\n const { addToCart, removeFromCart, updateQuantity, isInCart, getCartItem } = useAddonCartStore();\n\n const combinedQuotas = useMemo(() => combineQuotas(addon?.features \|\| []), [addon?.features]);\n const inCart = addon ? isInCart(addon.id) : false;\n const cartItem = addon ? getCartItem(addon.id) : undefined;\n const cartQuantity = cartItem?.quantity \|\| 0;\n\n if (isLoading) {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <div className=\"lg:col-span-2 space-y-4\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded\" />\n ))}\n </div>\n <div className=\"h-64 bg-bg-sunken animate-pulse rounded\" />\n </div>\n </div>\n );\n }\n\n if (error && isServerError(error)) {\n return (\n <div className=\"p-6\">\n <ServerError\n title={tr('billing.addons.serverUnavailable', 'Server Unavailable')}\n message={tr('billing.addons.unableToLoadAddonDetails', 'Unable to load addon details.')}\n onRetry={() => refetch()}\n showRetry\n />\n </div>\n );\n }\n\n if (!addon) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.addons.addonNotFound', 'Addon not found')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'billing.addons.addonNotFoundMessage',\n \"The addon you're looking for doesn't exist or has been removed.\"\n )}\n </p>\n <button\n type=\"button\"\n onClick={() => navigateTo('/addons')}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n >\n Back to Addons\n </button>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"space-y-6 p-6\">\n <PageHeader\n title={addon.name}\n description={`${formatPlanDurationLabel(addon.duration)} addon`}\n />\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Main Content /}\n <div className=\"lg:col-span-2 space-y-6\">\n {/ Pricing Card /}\n <div className=\"border border-border-subtle rounded-lg bg-bg-surface overflow-hidden\">\n <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n <h2 className=\"font-semibold text-text-primary\">\n {tr('billing.addons.pricing', 'Pricing')}\n </h2>\n </div>\n <div className=\"p-6\">\n <div className=\"flex items-baseline gap-2\">\n <span className=\"text-4xl font-bold text-text-primary\">\n {formatCurrency(addon.price, addon.currency)}\n </span>\n <span className=\"text-lg text-text-secondary\">\n / {formatPlanDuration(addon.duration)}\n </span>\n </div>\n <p className=\"text-sm text-text-secondary mt-2\">\n {tr('billing.addons.billed', 'Billed')}{' '}\n {addon.duration === 'monthly'\n ? tr('billing.addons.everyMonth', 'every month')\n : tr('billing.addons.annually', 'annually')}\n </p>\n </div>\n </div>\n\n {/ Quotas Card /}\n <div className=\"border border-border-subtle rounded-lg bg-bg-surface overflow-hidden\">\n <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n <h2 className=\"font-semibold text-text-primary\">\n {tr('billing.addons.includedQuotas', 'Included Quotas')} ({combinedQuotas.length})\n </h2>\n </div>\n <div className=\"p-4\">\n {combinedQuotas.length === 0 ? (\n <p className=\"text-sm text-text-secondary py-4 text-center\">\n {tr('billing.addons.noQuotas', 'No quotas associated with this addon.')}\n </p>\n ) : (\n <div className=\"space-y-3\">\n {combinedQuotas.map((quota) => (\n <div\n key={quota.quotaId}\n className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg bg-bg-sunken/20\"\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"size-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n <svg\n className=\"size-4 text-primary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n </div>\n <div>\n <p className=\"font-medium text-text-primary\">{quota.name}</p>\n <p className=\"text-xs text-text-secondary capitalize\">\n Type: {quota.type}\n </p>\n </div>\n </div>\n <div className=\"text-right\">\n <span className=\"text-lg font-semibold text-status-success-text\">\n {quota.totalValue.toLocaleString()}\n </span>\n <p className=\"text-xs text-text-secondary\">total</p>\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n </div>\n </div>\n\n {/ Sidebar /}\n <div className=\"space-y-6\">\n {/ Purchase Card /}\n <div className=\"border border-border-subtle rounded-lg bg-bg-surface overflow-hidden\">\n <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n <h2 className=\"font-semibold text-text-primary\">\n {tr('billing.addons.purchase', 'Purchase')}\n </h2>\n </div>\n <div className=\"p-4 space-y-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm text-text-secondary\">\n {tr('billing.addons.price', 'Price')}\n </span>\n <span className=\"text-sm font-medium text-text-primary\">\n {formatCurrency(addon.price, addon.currency)} /{' '}\n {formatPlanDuration(addon.duration)}\n </span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm text-text-secondary\">\n {tr('billing.addons.billingLabel', 'Billing')}\n </span>\n <span className=\"text-sm font-medium text-text-primary capitalize\">\n {addon.duration}\n </span>\n </div>\n\n <div className=\"pt-2 space-y-2\">\n {inCart ? (\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"flex items-center gap-1\">\n <button\n type=\"button\"\n onClick={() => updateQuantity(addon.id, cartQuantity - 1)}\n className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n >\n <Minus className=\"size-4\" />\n </button>\n <span className=\"w-10 text-center font-medium\">{cartQuantity}</span>\n <button\n type=\"button\"\n onClick={() => updateQuantity(addon.id, cartQuantity + 1)}\n className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n >\n <Plus className=\"size-4\" />\n </button>\n </div>\n <button\n type=\"button\"\n onClick={() => removeFromCart(addon.id)}\n className=\"p-1.5 rounded text-status-error-text hover:bg-status-error-bg/10 transition-colors\"\n title=\"Remove from cart\"\n >\n <Trash2 className=\"size-4\" />\n </button>\n </div>\n <button\n type=\"button\"\n onClick={() => navigateTo('/checkout/addons')}\n className=\"w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n >\n Proceed to Checkout\n </button>\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={() => addToCart(addon)}\n className=\"w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors flex items-center justify-center gap-2\"\n >\n <ShoppingCart className=\"size-4\" />\n Add to Cart\n </button>\n )}\n </div>\n </div>\n </div>\n\n {/ Back Button */}\n <button\n type=\"button\"\n onClick={() => navigateTo('/addons')}\n className=\"w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-md hover:bg-bg-sunken transition-colors\"\n >\n Back to Addons\n </button>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"AddonBrowseDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/addons/pages/AddonBrowseDetailPage.tsx"],"sourcesContent":["/*\n Addons Module - Addon Browse Detail Page (User-facing)\n * View addon details and add to cart. No edit/toggle actions.\n /\n\nimport { useMemo, type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ShoppingCart, Plus, Minus, Trash2 } from 'lucide-react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useAddon } from '../hooks';\nimport { useAddonCartStore } from '../store/addonCartStore';\nimport { PageHeader, ServerError } from '../../../shared/components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport {\n formatCurrency,\n formatPlanDuration,\n formatPlanDurationLabel,\n isServerError,\n} from '../../../shared/utils';\nimport type { SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface CombinedQuota {\n quotaId: string;\n name: string;\n totalValue: number;\n type: string;\n}\n\nfunction combineQuotas(features: SubscriptionFeatures[]): CombinedQuota[] {\n const quotaMap = new Map<string, CombinedQuota>();\n for (const feature of features) {\n if (!feature.quota) continue;\n const quotaId = feature.quota.id;\n const limits = feature.quota.limits as { value?: number; type?: string } \| null;\n const limitValue = limits?.value ?? 0;\n const limitType = limits?.type ?? 'unknown';\n const existing = quotaMap.get(quotaId);\n if (existing) {\n existing.totalValue += limitValue;\n } else {\n quotaMap.set(quotaId, {\n quotaId,\n name: feature.quota.name ?? 'Unknown Quota',\n totalValue: limitValue,\n type: limitType,\n });\n }\n }\n return Array.from(quotaMap.values());\n}\n\nexport const AddonBrowseDetailPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const { addonId } = useParams<{ addonId: string }>();\n const navigateTo = useBillingNavigate();\n const { addon, isLoading, error, refetch } = useAddon(addonId);\n const { addToCart, removeFromCart, updateQuantity, isInCart, getCartItem } = useAddonCartStore();\n\n const combinedQuotas = useMemo(() => combineQuotas(addon?.features \|\| []), [addon?.features]);\n const inCart = addon ? isInCart(addon.id) : false;\n const cartItem = addon ? getCartItem(addon.id) : undefined;\n const cartQuantity = cartItem?.quantity \|\| 0;\n\n if (isLoading) {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <div className=\"lg:col-span-2 space-y-4\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded\" />\n ))}\n </div>\n <div className=\"h-64 bg-bg-sunken animate-pulse rounded\" />\n </div>\n </div>\n );\n }\n\n if (error && isServerError(error)) {\n return (\n <div className=\"p-6\">\n <ServerError\n title={tr('billing.addons.serverUnavailable', 'Server Unavailable')}\n message={tr('billing.addons.unableToLoadAddonDetails', 'Unable to load addon details.')}\n onRetry={() => refetch()}\n showRetry\n />\n </div>\n );\n }\n\n if (!addon) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.addons.addonNotFound', 'Addon not found')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'billing.addons.addonNotFoundMessage',\n \"The addon you're looking for doesn't exist or has been removed.\"\n )}\n </p>\n <button\n type=\"button\"\n onClick={() => navigateTo('/addons')}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n >\n Back to Addons\n </button>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"space-y-6 p-6\">\n <PageHeader\n title={addon.name}\n description={`${formatPlanDurationLabel(addon.duration)} addon`}\n />\n\n <PagePurpose>\n {tr(\n 'billing.addons.browseDetailPurpose',\n 'See exactly what this add-on costs and the extra capacity it gives you on top of your plan before you buy it. Add it to your cart from here when it fits your needs.'\n )}\n </PagePurpose>\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Main Content /}\n <div className=\"lg:col-span-2 space-y-6\">\n {/ Pricing Card — primary emphasis zone /}\n <EmphasisPanel className=\"overflow-hidden p-0\">\n <div className=\"p-4 border-b border-border-subtle\">\n <h2 className=\"font-semibold text-text-primary\">\n {tr('billing.addons.pricing', 'Pricing')}\n </h2>\n </div>\n <div className=\"p-6\">\n <div className=\"flex items-baseline gap-2\">\n <span className=\"text-4xl font-bold text-text-primary\">\n {formatCurrency(addon.price, addon.currency)}\n </span>\n <span className=\"text-lg text-text-secondary\">\n / {formatPlanDuration(addon.duration)}\n </span>\n </div>\n <p className=\"text-sm text-text-secondary mt-2\">\n {tr('billing.addons.billed', 'Billed')}{' '}\n {addon.duration === 'monthly'\n ? tr('billing.addons.everyMonth', 'every month')\n : tr('billing.addons.annually', 'annually')}\n </p>\n </div>\n </EmphasisPanel>\n\n {/ Quotas Card /}\n <div className=\"border border-border-subtle rounded-lg bg-bg-surface overflow-hidden\">\n <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n <h2 className=\"font-semibold text-text-primary\">\n {tr('billing.addons.includedQuotas', 'Included Quotas')} ({combinedQuotas.length})\n </h2>\n </div>\n <div className=\"p-4\">\n {combinedQuotas.length === 0 ? (\n <p className=\"text-sm text-text-secondary py-4 text-center\">\n {tr('billing.addons.noQuotas', 'No quotas associated with this addon.')}\n </p>\n ) : (\n <div className=\"space-y-3\">\n {combinedQuotas.map((quota) => (\n <div\n key={quota.quotaId}\n className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg bg-bg-sunken/20\"\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"size-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n <svg\n className=\"size-4 text-primary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n </div>\n <div>\n <p className=\"font-medium text-text-primary\">{quota.name}</p>\n <p className=\"text-xs text-text-secondary capitalize\">\n Type: {quota.type}\n </p>\n </div>\n </div>\n <div className=\"text-right\">\n <span className=\"text-lg font-semibold text-status-success-text\">\n {quota.totalValue.toLocaleString()}\n </span>\n <p className=\"text-xs text-text-secondary\">total</p>\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n </div>\n </div>\n\n {/ Sidebar /}\n <div className=\"space-y-6\">\n {/ Purchase Card /}\n <div className=\"border border-border-subtle rounded-lg bg-bg-surface overflow-hidden\">\n <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n <h2 className=\"font-semibold text-text-primary\">\n {tr('billing.addons.purchase', 'Purchase')}\n </h2>\n </div>\n <div className=\"p-4 space-y-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm text-text-secondary\">\n {tr('billing.addons.price', 'Price')}\n </span>\n <span className=\"text-sm font-medium text-text-primary\">\n {formatCurrency(addon.price, addon.currency)} /{' '}\n {formatPlanDuration(addon.duration)}\n </span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm text-text-secondary\">\n {tr('billing.addons.billingLabel', 'Billing')}\n </span>\n <span className=\"text-sm font-medium text-text-primary capitalize\">\n {addon.duration}\n </span>\n </div>\n\n <div className=\"pt-2 space-y-2\">\n {inCart ? (\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"flex items-center gap-1\">\n <button\n type=\"button\"\n onClick={() => updateQuantity(addon.id, cartQuantity - 1)}\n className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n >\n <Minus className=\"size-4\" />\n </button>\n <span className=\"w-10 text-center font-medium\">{cartQuantity}</span>\n <button\n type=\"button\"\n onClick={() => updateQuantity(addon.id, cartQuantity + 1)}\n className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n >\n <Plus className=\"size-4\" />\n </button>\n </div>\n <button\n type=\"button\"\n onClick={() => removeFromCart(addon.id)}\n className=\"p-1.5 rounded text-status-error-text hover:bg-status-error-bg/10 transition-colors\"\n title=\"Remove from cart\"\n >\n <Trash2 className=\"size-4\" />\n </button>\n </div>\n <button\n type=\"button\"\n onClick={() => navigateTo('/checkout/addons')}\n className=\"w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n >\n Proceed to Checkout\n </button>\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={() => addToCart(addon)}\n className=\"w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors flex items-center justify-center gap-2\"\n >\n <ShoppingCart className=\"size-4\" />\n Add to Cart\n </button>\n )}\n </div>\n </div>\n </div>\n\n {/ Back Button */}\n <button\n type=\"button\"\n onClick={() => navigateTo('/addons')}\n className=\"w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-md hover:bg-bg-sunken transition-colors\"\n >\n Back to Addons\n </button>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}