@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/addons/pages/AddonsBrowsePage.js

@@ -0,0 +1,582 @@
+import { useBilling as e } from "../../../providers/BillingProvider.js";
+import { formatCurrency as t, formatPlanDuration as n, formatPlanDurationLabel as r } from "../../../shared/utils/format.js";
+import { useAddonCartStore as i } from "../store/addonCartStore.js";
+import { useBillingNavigate as a } from "../../../hooks/useBillingNavigate.js";
+import { useAddons as o } from "../hooks/useAddons.js";
+import "../hooks/index.js";
+import { useDefaultBillingCurrency as s } from "../../../hooks/useDefaultBillingCurrency.js";
+import { useMemo as c, useState as l } from "react";
+import { Minus as u, Plus as d, ShoppingCart as f, Trash2 as p, X as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/addons/pages/AddonsBrowsePage.tsx
+function y(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		if (!n.quota) continue;
+		let e = n.quota.id, r = n.quota.limits?.value ?? 0, i = t.get(e);
+		i ? i.totalValue += r : t.set(e, {
+			quotaId: e,
+			name: n.quota.name ?? "Unknown Quota",
+			totalValue: r
+		});
+	}
+	return Array.from(t.values());
+}
+function b(e, t = "USD") {
+	if (e.currencyPrices && typeof e.currencyPrices == "object") {
+		let n = e.currencyPrices;
+		if (n[t] !== void 0 && n[t] !== null) return {
+			price: n[t],
+			currency: t
+		};
+	}
+	return {
+		price: e.price,
+		currency: e.currency || "USD"
+	};
+}
+var x = () => {
+	let { t } = v(), n = (e, n) => {
+		let r = t(e);
+		return r === e ? n : r;
+	}, r = a(), { productId: c } = e(), { addons: u, isLoading: d, error: f, refetch: p } = o({
+		includeFree: !1,
+		productId: c ?? void 0
+	}), { addToCart: m, removeFromCart: h, updateQuantity: y, isInCart: b, getCartItem: x } = i(), [T, E] = l("grid"), [D, O] = l("all"), k = s(), A = u.filter((e) => !(!e.isActive || D !== "all" && e.duration !== D));
+	return d && u.length === 0 ? /* @__PURE__ */ _("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", {
+			className: "grid grid-cols-1 md:grid-cols-3 gap-6",
+			children: [
+				1,
+				2,
+				3
+			].map((e) => /* @__PURE__ */ _("div", {
+				className: "border border-border rounded-lg p-6 space-y-4",
+				children: [
+					/* @__PURE__ */ g("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ g("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ g("div", {
+						className: "space-y-2",
+						children: [
+							1,
+							2,
+							3
+						].map((e) => /* @__PURE__ */ g("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }, e))
+					})
+				]
+			}, e))
+		})]
+	}) : f ? /* @__PURE__ */ g("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ _("div", {
+			className: "text-center space-y-4",
+			children: [
+				/* @__PURE__ */ g("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: n("billing.addons.failedToLoad", "Failed to load addons")
+				}),
+				/* @__PURE__ */ g("p", {
+					className: "text-sm text-muted-foreground",
+					children: f.message
+				}),
+				/* @__PURE__ */ g("button", {
+					onClick: () => p(),
+					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: "Try Again"
+				})
+			]
+		})
+	}) : /* @__PURE__ */ _("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
+				className: "text-2xl font-bold text-foreground",
+				children: n("billing.addons.title", "Addons")
+			}), /* @__PURE__ */ g("p", {
+				className: "text-sm text-muted-foreground mt-1",
+				children: n("billing.addons.subtitle", "Enhance your subscription with additional features")
+			})] }),
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				children: [/* @__PURE__ */ g("div", {
+					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					children: [
+						"all",
+						"monthly",
+						"yearly"
+					].map((e) => /* @__PURE__ */ g("button", {
+						onClick: () => O(e),
+						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${D === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						children: e === "all" ? "All" : e === "monthly" ? "Monthly" : "Yearly"
+					}, e))
+				}), /* @__PURE__ */ _("div", {
+					className: "ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					children: [/* @__PURE__ */ g("button", {
+						onClick: () => E("grid"),
+						className: `p-1.5 rounded-md transition-colors ${T === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						title: "Grid view",
+						children: /* @__PURE__ */ g("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ g("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
+							})
+						})
+					}), /* @__PURE__ */ g("button", {
+						onClick: () => E("list"),
+						className: `p-1.5 rounded-md transition-colors ${T === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						title: "List view",
+						children: /* @__PURE__ */ g("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ g("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M4 6h16M4 12h16M4 18h16"
+							})
+						})
+					})]
+				})]
+			}),
+			A.length === 0 ? /* @__PURE__ */ _("div", {
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: /* @__PURE__ */ g("svg", {
+							className: "w-6 h-6 text-muted-foreground",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ g("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+							})
+						})
+					}),
+					/* @__PURE__ */ g("h3", {
+						className: "text-lg font-medium text-foreground",
+						children: n("billing.addons.noAddonsAvailable", "No addons available")
+					}),
+					/* @__PURE__ */ g("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: n("billing.addons.checkBackLater", "Check back later for new addons.")
+					})
+				]
+			}) : T === "grid" ? /* @__PURE__ */ g("div", {
+				className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+				children: A.map((e) => {
+					let t = x(e.id);
+					return /* @__PURE__ */ g(S, {
+						addon: e,
+						onView: () => r(`/addons/${e.id}`),
+						isInCart: b(e.id),
+						cartQuantity: t?.quantity || 0,
+						onAddToCart: m,
+						onUpdateQuantity: y,
+						onRemoveFromCart: h,
+						displayCurrency: k
+					}, e.id);
+				})
+			}) : /* @__PURE__ */ g("div", {
+				className: "space-y-3",
+				children: A.map((e) => {
+					let t = x(e.id);
+					return /* @__PURE__ */ g(C, {
+						addon: e,
+						onView: () => r(`/addons/${e.id}`),
+						isInCart: b(e.id),
+						cartQuantity: t?.quantity || 0,
+						onAddToCart: m,
+						onUpdateQuantity: y,
+						onRemoveFromCart: h,
+						displayCurrency: k
+					}, e.id);
+				})
+			}),
+			/* @__PURE__ */ g(w, { displayCurrency: k })
+		]
+	});
+}, S = ({ addon: e, onView: i, isInCart: a, cartQuantity: o, onAddToCart: s, onUpdateQuantity: l, onRemoveFromCart: m, displayCurrency: h }) => {
+	let v = c(() => y(e.features || []), [e.features]);
+	return /* @__PURE__ */ _("div", {
+		className: `relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${a ? "border-primary bg-primary/5" : "border-border bg-card"}`,
+		children: [
+			a && /* @__PURE__ */ _("span", {
+				className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-primary text-primary-foreground rounded",
+				children: [
+					"In Cart (",
+					o,
+					")"
+				]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4",
+				children: /* @__PURE__ */ g("svg", {
+					className: "w-5 h-5 text-primary",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ g("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+					})
+				})
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "mb-4",
+				children: [/* @__PURE__ */ g("h3", {
+					className: "text-lg font-bold text-foreground",
+					children: e.name
+				}), /* @__PURE__ */ g("span", {
+					className: "text-sm text-muted-foreground",
+					children: r(e.duration)
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex items-baseline gap-1 mb-4",
+				children: [/* @__PURE__ */ g("span", {
+					className: "text-2xl font-bold text-foreground",
+					children: (() => {
+						let { price: n, currency: r } = b(e, h);
+						return t(n, r);
+					})()
+				}), /* @__PURE__ */ _("span", {
+					className: "text-muted-foreground text-sm",
+					children: ["/ ", n(e.duration)]
+				})]
+			}),
+			v.length > 0 && /* @__PURE__ */ _("ul", {
+				className: "space-y-2 mb-4",
+				children: [v.slice(0, 4).map((e) => /* @__PURE__ */ _("li", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ _("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ g("svg", {
+							className: "w-4 h-4 text-status-success-text shrink-0",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ g("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M5 13l4 4L19 7"
+							})
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: e.name
+						})]
+					}), /* @__PURE__ */ g("span", {
+						className: "font-medium text-foreground",
+						children: e.totalValue.toLocaleString()
+					})]
+				}, e.quotaId)), v.length > 4 && /* @__PURE__ */ _("li", {
+					className: "text-sm text-muted-foreground pl-6",
+					children: [
+						"+",
+						v.length - 4,
+						" more quotas"
+					]
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "space-y-2 pt-4 border-t border-border mt-auto",
+				children: [a ? /* @__PURE__ */ _("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ _("div", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ g("button", {
+								onClick: () => l(e.id, o - 1),
+								className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+								children: /* @__PURE__ */ g(u, { className: "w-4 h-4" })
+							}),
+							/* @__PURE__ */ g("span", {
+								className: "w-10 text-center font-medium",
+								children: o
+							}),
+							/* @__PURE__ */ g("button", {
+								onClick: () => l(e.id, o + 1),
+								className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+								children: /* @__PURE__ */ g(d, { className: "w-4 h-4" })
+							})
+						]
+					}), /* @__PURE__ */ g("button", {
+						onClick: () => m(e.id),
+						className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
+						title: "Remove from cart",
+						children: /* @__PURE__ */ g(p, { className: "w-4 h-4" })
+					})]
+				}) : /* @__PURE__ */ _("button", {
+					onClick: () => s(e),
+					className: "w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center justify-center gap-2",
+					children: [/* @__PURE__ */ g(f, { className: "w-4 h-4" }), "Add to Cart"]
+				}), /* @__PURE__ */ g("button", {
+					onClick: i,
+					className: "w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+					children: "View Details"
+				})]
+			})
+		]
+	});
+}, C = ({ addon: e, onView: r, isInCart: i, cartQuantity: a, onAddToCart: o, onUpdateQuantity: s, onRemoveFromCart: l, displayCurrency: m }) => {
+	let h = c(() => y(e.features || []), [e.features]);
+	return /* @__PURE__ */ _("div", {
+		className: `flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${i ? "border-primary bg-primary/5" : "border-border bg-card"}`,
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
+				children: /* @__PURE__ */ g("svg", {
+					className: "w-5 h-5 text-primary",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ g("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+					})
+				})
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ g("h3", {
+						className: "font-semibold text-foreground truncate",
+						children: e.name
+					}), i && /* @__PURE__ */ _("span", {
+						className: "px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded",
+						children: [
+							"In Cart (",
+							a,
+							")"
+						]
+					})]
+				}), /* @__PURE__ */ _("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						h.length,
+						" quota",
+						h.length === 1 ? "" : "s"
+					]
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "text-right",
+				children: [/* @__PURE__ */ g("div", {
+					className: "font-semibold text-foreground",
+					children: (() => {
+						let { price: n, currency: r } = b(e, m);
+						return t(n, r);
+					})()
+				}), /* @__PURE__ */ _("div", {
+					className: "text-sm text-muted-foreground",
+					children: ["per ", n(e.duration)]
+				})]
+			}),
+			i ? /* @__PURE__ */ _("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ g("button", {
+						onClick: () => s(e.id, a - 1),
+						className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+						children: /* @__PURE__ */ g(u, { className: "w-4 h-4" })
+					}),
+					/* @__PURE__ */ g("span", {
+						className: "w-8 text-center font-medium",
+						children: a
+					}),
+					/* @__PURE__ */ g("button", {
+						onClick: () => s(e.id, a + 1),
+						className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+						children: /* @__PURE__ */ g(d, { className: "w-4 h-4" })
+					}),
+					/* @__PURE__ */ g("button", {
+						onClick: () => l(e.id),
+						className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors ml-1",
+						title: "Remove from cart",
+						children: /* @__PURE__ */ g(p, { className: "w-4 h-4" })
+					})
+				]
+			}) : /* @__PURE__ */ _("button", {
+				onClick: () => o(e),
+				className: "px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center gap-1.5",
+				children: [/* @__PURE__ */ g(f, { className: "w-4 h-4" }), "Add"]
+			}),
+			/* @__PURE__ */ g("button", {
+				onClick: r,
+				className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+				children: "View"
+			})
+		]
+	});
+}, w = ({ displayCurrency: e }) => {
+	let { t: r } = v(), o = (e, t) => {
+		let n = r(e);
+		return n === e ? t : n;
+	}, s = a(), { items: c, isCartOpen: l, toggleCart: y, closeCart: x, removeFromCart: S, updateQuantity: C, clearCart: w } = i(), T = c.reduce((e, t) => e + t.quantity, 0);
+	return c.length === 0 && !l ? null : /* @__PURE__ */ _(h, { children: [!l && c.length > 0 && /* @__PURE__ */ _("button", {
+		onClick: y,
+		className: "fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 bg-primary text-primary-foreground rounded-full shadow-lg hover:bg-primary/90 transition-all",
+		children: [
+			/* @__PURE__ */ g(f, { className: "w-5 h-5" }),
+			/* @__PURE__ */ _("span", {
+				className: "font-medium",
+				children: [
+					T,
+					" item",
+					T === 1 ? "" : "s"
+				]
+			}),
+			/* @__PURE__ */ g("span", {
+				className: "px-2 py-0.5 bg-primary-foreground/20 rounded-full text-sm",
+				children: t(c.reduce((t, { addon: n, quantity: r }) => {
+					let { price: i } = b(n, e);
+					return t + i * r;
+				}, 0), e)
+			})
+		]
+	}), l && /* @__PURE__ */ _("div", {
+		className: "fixed inset-0 z-50 flex items-end sm:items-center justify-center",
+		children: [/* @__PURE__ */ g("div", {
+			className: "absolute inset-0 bg-overlay-scrim",
+			onClick: x
+		}), /* @__PURE__ */ _("div", {
+			className: "relative w-full max-w-md max-h-[80vh] bg-card border border-border rounded-t-xl sm:rounded-xl shadow-xl overflow-hidden",
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: "flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30",
+					children: [/* @__PURE__ */ _("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ g(f, { className: "w-5 h-5 text-foreground" }),
+							/* @__PURE__ */ g("h3", {
+								className: "font-semibold text-foreground",
+								children: o("billing.addons.yourCart", "Your Cart")
+							}),
+							/* @__PURE__ */ _("span", {
+								className: "px-2 py-0.5 text-xs bg-primary text-primary-foreground rounded-full",
+								children: [
+									T,
+									" item",
+									T === 1 ? "" : "s"
+								]
+							})
+						]
+					}), /* @__PURE__ */ g("button", {
+						onClick: x,
+						className: "p-1.5 rounded hover:bg-muted transition-colors",
+						children: /* @__PURE__ */ g(m, { className: "w-5 h-5" })
+					})]
+				}),
+				/* @__PURE__ */ g("div", {
+					className: "overflow-y-auto max-h-[50vh] divide-y divide-border",
+					children: c.map(({ addon: r, quantity: i }) => /* @__PURE__ */ _("div", {
+						className: "p-4 flex items-center gap-3",
+						children: [
+							/* @__PURE__ */ _("div", {
+								className: "flex-1 min-w-0",
+								children: [/* @__PURE__ */ g("h4", {
+									className: "font-medium text-foreground truncate",
+									children: r.name
+								}), /* @__PURE__ */ _("p", {
+									className: "text-sm text-muted-foreground",
+									children: [
+										(() => {
+											let { price: n, currency: i } = b(r, e);
+											return t(n, i);
+										})(),
+										" ",
+										"/ ",
+										n(r.duration)
+									]
+								})]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ g("button", {
+										onClick: () => C(r.id, i - 1),
+										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										children: /* @__PURE__ */ g(u, { className: "w-3 h-3" })
+									}),
+									/* @__PURE__ */ g("span", {
+										className: "w-6 text-center text-sm font-medium",
+										children: i
+									}),
+									/* @__PURE__ */ g("button", {
+										onClick: () => C(r.id, i + 1),
+										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										children: /* @__PURE__ */ g(d, { className: "w-3 h-3" })
+									})
+								]
+							}),
+							/* @__PURE__ */ g("p", {
+								className: "font-medium text-foreground",
+								children: (() => {
+									let { price: n, currency: a } = b(r, e);
+									return t(n * i, a);
+								})()
+							}),
+							/* @__PURE__ */ g("button", {
+								onClick: () => S(r.id),
+								className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
+								children: /* @__PURE__ */ g(p, { className: "w-4 h-4" })
+							})
+						]
+					}, r.id))
+				}),
+				/* @__PURE__ */ _("div", {
+					className: "border-t border-border p-4 space-y-3 bg-muted/20",
+					children: [/* @__PURE__ */ _("div", {
+						className: "flex items-center justify-between text-lg font-semibold",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: o("billing.addons.total", "Total")
+						}), /* @__PURE__ */ g("span", {
+							className: "text-foreground",
+							children: t(c.reduce((t, { addon: n, quantity: r }) => {
+								let { price: i } = b(n, e);
+								return t + i * r;
+							}, 0), e)
+						})]
+					}), /* @__PURE__ */ _("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ g("button", {
+							onClick: w,
+							className: "flex-1 px-4 py-2.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+							children: "Clear Cart"
+						}), /* @__PURE__ */ g("button", {
+							onClick: () => {
+								x(), s("/checkout/addons");
+							},
+							className: "flex-1 px-4 py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+							children: "Checkout"
+						})]
+					})]
+				})
+			]
+		})]
+	})] });
+};
+//#endregion
+export { x as AddonsBrowsePage };
+
+//# sourceMappingURL=AddonsBrowsePage.js.map

package/dist/billing/modules/addons/pages/AddonsBrowsePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddonsBrowsePage.js","names":[],"sources":["../../../../../src/billing/modules/addons/pages/AddonsBrowsePage.tsx"],"sourcesContent":["/**\n * Addons Module - Addons Browse Page (User-facing)\n * Browse available addons and add to cart. No create/edit/toggle actions.\n */\n\nimport { useState, useMemo, type FC } from 'react';\nimport { useDefaultBillingCurrency } from '../../../hooks/useDefaultBillingCurrency';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { ShoppingCart, Plus, Minus, Trash2, X } from 'lucide-react';\nimport { useAddons } from '../hooks';\nimport { useAddonCartStore } from '../store/addonCartStore';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n} from '../../../shared/utils/format';\nimport type { Addon, PlanDuration, SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype ViewMode = 'grid' | 'list';\n\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\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 } | null;\n    const limitValue = limits?.value ?? 0;\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      });\n    }\n  }\n  return Array.from(quotaMap.values());\n}\n\nfunction getAddonDisplayPrice(\n  addon: Addon,\n  displayCurrency: string = 'USD'\n): { price: number; currency: string } {\n  if (addon.currencyPrices && typeof addon.currencyPrices === 'object') {\n    const currencyPricesObj = addon.currencyPrices as Record<string, number>;\n    if (\n      currencyPricesObj[displayCurrency] !== undefined &&\n      currencyPricesObj[displayCurrency] !== null\n    ) {\n      return { price: currencyPricesObj[displayCurrency], currency: displayCurrency };\n    }\n  }\n  return { price: addon.price, currency: addon.currency || 'USD' };\n}\n\nexport const AddonsBrowsePage: 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 navigateTo = useBillingNavigate();\n  const { productId } = useBilling();\n  const { addons, isLoading, error, refetch } = useAddons({\n    includeFree: false,\n    productId: productId ?? undefined,\n  });\n  const { addToCart, removeFromCart, updateQuantity, isInCart, getCartItem } = useAddonCartStore();\n\n  const [viewMode, setViewMode] = useState<ViewMode>('grid');\n  const [billingInterval, setBillingInterval] = useState<PlanDuration | 'all'>('all');\n  const displayCurrency = useDefaultBillingCurrency();\n\n  // Only show active addons to users\n  const filteredAddons = addons.filter((addon) => {\n    if (!addon.isActive) return false;\n    if (billingInterval !== 'all' && addon.duration !== billingInterval) return false;\n    return true;\n  });\n\n  if (isLoading && addons.length === 0) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-muted animate-pulse rounded\" />\n              <div className=\"h-8 w-32 bg-muted animate-pulse rounded\" />\n              <div className=\"space-y-2\">\n                {[1, 2, 3].map((j) => (\n                  <div key={j} className=\"h-4 w-full bg-muted animate-pulse rounded\" />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  if (error) {\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-foreground\">\n            {tr('billing.addons.failedToLoad', 'Failed to load addons')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n          <button\n            onClick={() => refetch()}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-2xl font-bold text-foreground\">\n          {tr('billing.addons.title', 'Addons')}\n        </h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          {tr('billing.addons.subtitle', 'Enhance your subscription with additional features')}\n        </p>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border\">\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          {(['all', 'monthly', 'yearly'] as const).map((interval) => (\n            <button\n              key={interval}\n              onClick={() => setBillingInterval(interval as PlanDuration | 'all')}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n                billingInterval === interval\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {interval === 'all' ? 'All' : interval === 'monthly' ? 'Monthly' : 'Yearly'}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          <button\n            onClick={() => setViewMode('grid')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'grid'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n            title=\"Grid view\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\n              />\n            </svg>\n          </button>\n          <button\n            onClick={() => setViewMode('list')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'list'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n            title=\"List view\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6h16M4 12h16M4 18h16\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      {/* Addons */}\n      {filteredAddons.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n            <svg\n              className=\"w-6 h-6 text-muted-foreground\"\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=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.addons.noAddonsAvailable', 'No addons available')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.addons.checkBackLater', 'Check back later for new addons.')}\n          </p>\n        </div>\n      ) : viewMode === 'grid' ? (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {filteredAddons.map((addon) => {\n            const cartItem = getCartItem(addon.id);\n            return (\n              <BrowseAddonCard\n                key={addon.id}\n                addon={addon}\n                onView={() => navigateTo(`/addons/${addon.id}`)}\n                isInCart={isInCart(addon.id)}\n                cartQuantity={cartItem?.quantity || 0}\n                onAddToCart={addToCart}\n                onUpdateQuantity={updateQuantity}\n                onRemoveFromCart={removeFromCart}\n                displayCurrency={displayCurrency}\n              />\n            );\n          })}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredAddons.map((addon) => {\n            const cartItem = getCartItem(addon.id);\n            return (\n              <BrowseAddonRow\n                key={addon.id}\n                addon={addon}\n                onView={() => navigateTo(`/addons/${addon.id}`)}\n                isInCart={isInCart(addon.id)}\n                cartQuantity={cartItem?.quantity || 0}\n                onAddToCart={addToCart}\n                onUpdateQuantity={updateQuantity}\n                onRemoveFromCart={removeFromCart}\n                displayCurrency={displayCurrency}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      <FloatingCartDrawer displayCurrency={displayCurrency} />\n    </div>\n  );\n};\n\n// ============================================================================\n// Browse Addon Card (no edit/toggle)\n// ============================================================================\n\ninterface BrowseAddonCardProps {\n  addon: Addon;\n  onView: () => void;\n  isInCart: boolean;\n  cartQuantity: number;\n  onAddToCart: (addon: Addon) => void;\n  onUpdateQuantity: (addonId: string, quantity: number) => void;\n  onRemoveFromCart: (addonId: string) => void;\n  displayCurrency: string;\n}\n\nconst BrowseAddonCard: FC<BrowseAddonCardProps> = ({\n  addon,\n  onView,\n  isInCart,\n  cartQuantity,\n  onAddToCart,\n  onUpdateQuantity,\n  onRemoveFromCart,\n  displayCurrency,\n}) => {\n  const combinedQuotas = useMemo(() => combineQuotas(addon.features || []), [addon.features]);\n\n  return (\n    <div\n      className={`relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${\n        isInCart ? 'border-primary bg-primary/5' : 'border-border bg-card'\n      }`}\n    >\n      {isInCart && (\n        <span className=\"absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-primary text-primary-foreground rounded\">\n          In Cart ({cartQuantity})\n        </span>\n      )}\n\n      <div className=\"w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4\">\n        <svg className=\"w-5 h-5 text-primary\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n          />\n        </svg>\n      </div>\n\n      <div className=\"mb-4\">\n        <h3 className=\"text-lg font-bold text-foreground\">{addon.name}</h3>\n        <span className=\"text-sm text-muted-foreground\">\n          {formatPlanDurationLabel(addon.duration)}\n        </span>\n      </div>\n\n      <div className=\"flex items-baseline gap-1 mb-4\">\n        <span className=\"text-2xl font-bold text-foreground\">\n          {(() => {\n            const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n            return formatCurrency(price, currency);\n          })()}\n        </span>\n        <span className=\"text-muted-foreground text-sm\">\n          / {formatPlanDuration(addon.duration)}\n        </span>\n      </div>\n\n      {combinedQuotas.length > 0 && (\n        <ul className=\"space-y-2 mb-4\">\n          {combinedQuotas.slice(0, 4).map((quota) => (\n            <li key={quota.quotaId} className=\"flex items-center justify-between text-sm\">\n              <div className=\"flex items-center gap-2\">\n                <svg\n                  className=\"w-4 h-4 text-status-success-text shrink-0\"\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=\"M5 13l4 4L19 7\"\n                  />\n                </svg>\n                <span className=\"text-foreground\">{quota.name}</span>\n              </div>\n              <span className=\"font-medium text-foreground\">\n                {quota.totalValue.toLocaleString()}\n              </span>\n            </li>\n          ))}\n          {combinedQuotas.length > 4 && (\n            <li className=\"text-sm text-muted-foreground pl-6\">\n              +{combinedQuotas.length - 4} more quotas\n            </li>\n          )}\n        </ul>\n      )}\n\n      <div className=\"space-y-2 pt-4 border-t border-border mt-auto\">\n        {isInCart ? (\n          <div className=\"flex items-center justify-between gap-2\">\n            <div className=\"flex items-center gap-1\">\n              <button\n                onClick={() => onUpdateQuantity(addon.id, cartQuantity - 1)}\n                className=\"p-1.5 rounded border border-border hover:bg-muted transition-colors\"\n              >\n                <Minus className=\"w-4 h-4\" />\n              </button>\n              <span className=\"w-10 text-center font-medium\">{cartQuantity}</span>\n              <button\n                onClick={() => onUpdateQuantity(addon.id, cartQuantity + 1)}\n                className=\"p-1.5 rounded border border-border hover:bg-muted transition-colors\"\n              >\n                <Plus className=\"w-4 h-4\" />\n              </button>\n            </div>\n            <button\n              onClick={() => onRemoveFromCart(addon.id)}\n              className=\"p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors\"\n              title=\"Remove from cart\"\n            >\n              <Trash2 className=\"w-4 h-4\" />\n            </button>\n          </div>\n        ) : (\n          <button\n            onClick={() => onAddToCart(addon)}\n            className=\"w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center justify-center gap-2\"\n          >\n            <ShoppingCart className=\"w-4 h-4\" />\n            Add to Cart\n          </button>\n        )}\n        <button\n          onClick={onView}\n          className=\"w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n        >\n          View Details\n        </button>\n      </div>\n    </div>\n  );\n};\n\n// ============================================================================\n// Browse Addon Row (no edit/toggle)\n// ============================================================================\n\ninterface BrowseAddonRowProps {\n  addon: Addon;\n  onView: () => void;\n  isInCart: boolean;\n  cartQuantity: number;\n  onAddToCart: (addon: Addon) => void;\n  onUpdateQuantity: (addonId: string, quantity: number) => void;\n  onRemoveFromCart: (addonId: string) => void;\n  displayCurrency: string;\n}\n\nconst BrowseAddonRow: FC<BrowseAddonRowProps> = ({\n  addon,\n  onView,\n  isInCart,\n  cartQuantity,\n  onAddToCart,\n  onUpdateQuantity,\n  onRemoveFromCart,\n  displayCurrency,\n}) => {\n  const combinedQuotas = useMemo(() => combineQuotas(addon.features || []), [addon.features]);\n\n  return (\n    <div\n      className={`flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${\n        isInCart ? 'border-primary bg-primary/5' : 'border-border bg-card'\n      }`}\n    >\n      <div className=\"w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\n        <svg className=\"w-5 h-5 text-primary\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n          />\n        </svg>\n      </div>\n\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <h3 className=\"font-semibold text-foreground truncate\">{addon.name}</h3>\n          {isInCart && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded\">\n              In Cart ({cartQuantity})\n            </span>\n          )}\n        </div>\n        <p className=\"text-sm text-muted-foreground\">\n          {combinedQuotas.length} quota{combinedQuotas.length !== 1 ? 's' : ''}\n        </p>\n      </div>\n\n      <div className=\"text-right\">\n        <div className=\"font-semibold text-foreground\">\n          {(() => {\n            const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n            return formatCurrency(price, currency);\n          })()}\n        </div>\n        <div className=\"text-sm text-muted-foreground\">\n          per {formatPlanDuration(addon.duration)}\n        </div>\n      </div>\n\n      {isInCart ? (\n        <div className=\"flex items-center gap-1\">\n          <button\n            onClick={() => onUpdateQuantity(addon.id, cartQuantity - 1)}\n            className=\"p-1.5 rounded border border-border hover:bg-muted transition-colors\"\n          >\n            <Minus className=\"w-4 h-4\" />\n          </button>\n          <span className=\"w-8 text-center font-medium\">{cartQuantity}</span>\n          <button\n            onClick={() => onUpdateQuantity(addon.id, cartQuantity + 1)}\n            className=\"p-1.5 rounded border border-border hover:bg-muted transition-colors\"\n          >\n            <Plus className=\"w-4 h-4\" />\n          </button>\n          <button\n            onClick={() => onRemoveFromCart(addon.id)}\n            className=\"p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors ml-1\"\n            title=\"Remove from cart\"\n          >\n            <Trash2 className=\"w-4 h-4\" />\n          </button>\n        </div>\n      ) : (\n        <button\n          onClick={() => onAddToCart(addon)}\n          className=\"px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center gap-1.5\"\n        >\n          <ShoppingCart className=\"w-4 h-4\" />\n          Add\n        </button>\n      )}\n\n      <button\n        onClick={onView}\n        className=\"px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n      >\n        View\n      </button>\n    </div>\n  );\n};\n\n// ============================================================================\n// Floating Cart Drawer\n// ============================================================================\n\nconst FloatingCartDrawer: FC<{ displayCurrency: string }> = ({ displayCurrency }) => {\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 navigateTo = useBillingNavigate();\n  const { items, isCartOpen, toggleCart, closeCart, removeFromCart, updateQuantity, clearCart } =\n    useAddonCartStore();\n\n  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);\n\n  if (items.length === 0 && !isCartOpen) return null;\n\n  return (\n    <>\n      {!isCartOpen && items.length > 0 && (\n        <button\n          onClick={toggleCart}\n          className=\"fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 bg-primary text-primary-foreground rounded-full shadow-lg hover:bg-primary/90 transition-all\"\n        >\n          <ShoppingCart className=\"w-5 h-5\" />\n          <span className=\"font-medium\">\n            {itemCount} item{itemCount !== 1 ? 's' : ''}\n          </span>\n          <span className=\"px-2 py-0.5 bg-primary-foreground/20 rounded-full text-sm\">\n            {(() => {\n              const total = items.reduce((sum, { addon, quantity }) => {\n                const { price } = getAddonDisplayPrice(addon, displayCurrency);\n                return sum + price * quantity;\n              }, 0);\n              return formatCurrency(total, displayCurrency);\n            })()}\n          </span>\n        </button>\n      )}\n\n      {isCartOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-end sm:items-center justify-center\">\n          <div className=\"absolute inset-0 bg-overlay-scrim\" onClick={closeCart} />\n          <div className=\"relative w-full max-w-md max-h-[80vh] bg-card border border-border rounded-t-xl sm:rounded-xl shadow-xl overflow-hidden\">\n            <div className=\"flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30\">\n              <div className=\"flex items-center gap-2\">\n                <ShoppingCart className=\"w-5 h-5 text-foreground\" />\n                <h3 className=\"font-semibold text-foreground\">\n                  {tr('billing.addons.yourCart', 'Your Cart')}\n                </h3>\n                <span className=\"px-2 py-0.5 text-xs bg-primary text-primary-foreground rounded-full\">\n                  {itemCount} item{itemCount !== 1 ? 's' : ''}\n                </span>\n              </div>\n              <button\n                onClick={closeCart}\n                className=\"p-1.5 rounded hover:bg-muted transition-colors\"\n              >\n                <X className=\"w-5 h-5\" />\n              </button>\n            </div>\n\n            <div className=\"overflow-y-auto max-h-[50vh] divide-y divide-border\">\n              {items.map(({ addon, quantity }) => (\n                <div key={addon.id} className=\"p-4 flex items-center gap-3\">\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"font-medium text-foreground truncate\">{addon.name}</h4>\n                    <p className=\"text-sm text-muted-foreground\">\n                      {(() => {\n                        const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n                        return formatCurrency(price, currency);\n                      })()}{' '}\n                      / {formatPlanDuration(addon.duration)}\n                    </p>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <button\n                      onClick={() => updateQuantity(addon.id, quantity - 1)}\n                      className=\"p-1 rounded border border-border hover:bg-muted transition-colors\"\n                    >\n                      <Minus className=\"w-3 h-3\" />\n                    </button>\n                    <span className=\"w-6 text-center text-sm font-medium\">{quantity}</span>\n                    <button\n                      onClick={() => updateQuantity(addon.id, quantity + 1)}\n                      className=\"p-1 rounded border border-border hover:bg-muted transition-colors\"\n                    >\n                      <Plus className=\"w-3 h-3\" />\n                    </button>\n                  </div>\n                  <p className=\"font-medium text-foreground\">\n                    {(() => {\n                      const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n                      return formatCurrency(price * quantity, currency);\n                    })()}\n                  </p>\n                  <button\n                    onClick={() => removeFromCart(addon.id)}\n                    className=\"p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors\"\n                  >\n                    <Trash2 className=\"w-4 h-4\" />\n                  </button>\n                </div>\n              ))}\n            </div>\n\n            <div className=\"border-t border-border p-4 space-y-3 bg-muted/20\">\n              <div className=\"flex items-center justify-between text-lg font-semibold\">\n                <span className=\"text-foreground\">{tr('billing.addons.total', 'Total')}</span>\n                <span className=\"text-foreground\">\n                  {(() => {\n                    const total = items.reduce((sum, { addon, quantity }) => {\n                      const { price } = getAddonDisplayPrice(addon, displayCurrency);\n                      return sum + price * quantity;\n                    }, 0);\n                    return formatCurrency(total, displayCurrency);\n                  })()}\n                </span>\n              </div>\n              <div className=\"flex gap-2\">\n                <button\n                  onClick={clearCart}\n                  className=\"flex-1 px-4 py-2.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n                >\n                  Clear Cart\n                </button>\n                <button\n                  onClick={() => {\n                    closeCart();\n                    navigateTo('/checkout/addons');\n                  }}\n                  className=\"flex-1 px-4 py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n                >\n                  Checkout\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAS,EAAc,GAAmD;CACxE,IAAM,oBAAW,IAAI,KAA4B;AACjD,MAAK,IAAM,KAAW,GAAU;AAC9B,MAAI,CAAC,EAAQ,MAAO;EACpB,IAAM,IAAU,EAAQ,MAAM,IAExB,IADS,EAAQ,MAAM,QACF,SAAS,GAC9B,IAAW,EAAS,IAAI,EAAQ;AACtC,EAAI,IACF,EAAS,cAAc,IAEvB,EAAS,IAAI,GAAS;GACpB;GACA,MAAM,EAAQ,MAAM,QAAQ;GAC5B,YAAY;GACb,CAAC;;AAGN,QAAO,MAAM,KAAK,EAAS,QAAQ,CAAC;;AAGtC,SAAS,EACP,GACA,IAA0B,OACW;AACrC,KAAI,EAAM,kBAAkB,OAAO,EAAM,kBAAmB,UAAU;EACpE,IAAM,IAAoB,EAAM;AAChC,MACE,EAAkB,OAAqB,KAAA,KACvC,EAAkB,OAAqB,KAEvC,QAAO;GAAE,OAAO,EAAkB;GAAkB,UAAU;GAAiB;;AAGnF,QAAO;EAAE,OAAO,EAAM;EAAO,UAAU,EAAM,YAAY;EAAO;;AAGlE,IAAa,UAA6B;CACxC,IAAM,EAAE,MAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,IAAa,GAAoB,EACjC,EAAE,iBAAc,GAAY,EAC5B,EAAE,WAAQ,cAAW,UAAO,eAAY,EAAU;EACtD,aAAa;EACb,WAAW,KAAa,KAAA;EACzB,CAAC,EACI,EAAE,cAAW,mBAAgB,mBAAgB,aAAU,mBAAgB,GAAmB,EAE1F,CAAC,GAAU,KAAe,EAAmB,OAAO,EACpD,CAAC,GAAiB,KAAsB,EAA+B,MAAM,EAC7E,IAAkB,GAA2B,EAG7C,IAAiB,EAAO,QAAQ,MAEpC,EADI,CAAC,EAAM,YACP,MAAoB,SAAS,EAAM,aAAa,GAEpD;AA0CF,QAxCI,KAAa,EAAO,WAAW,IAE/B,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,EAC3D,kBAAC,OAAD;GAAK,WAAU;aACZ;IAAC;IAAG;IAAG;IAAE,CAAC,KAAK,MACd,kBAAC,OAAD;IAAa,WAAU;cAAvB;KACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA;KAC3D,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA;KAC3D,kBAAC,OAAD;MAAK,WAAU;gBACZ;OAAC;OAAG;OAAG;OAAE,CAAC,KAAK,MACd,kBAAC,OAAD,EAAa,WAAU,6CAA8C,EAA3D,EAA2D,CACrE;MACE,CAAA;KACF;MARI,EAQJ,CACN;GACE,CAAA,CACF;MAIN,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,+BAA+B,wBAAwB;KACxD,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAAiC,EAAM;KAAY,CAAA;IAChE,kBAAC,UAAD;KACE,eAAe,GAAS;KACxB,WAAU;eACX;KAEQ,CAAA;IACL;;EACF,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cACX,EAAG,wBAAwB,SAAS;IAClC,CAAA,EACL,kBAAC,KAAD;IAAG,WAAU;cACV,EAAG,2BAA2B,qDAAqD;IAClF,CAAA,CACA,EAAA,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACX;MAAC;MAAO;MAAW;MAAS,CAAW,KAAK,MAC5C,kBAAC,UAAD;MAEE,eAAe,EAAmB,EAAiC;MACnE,WAAW,gEACT,MAAoB,IAChB,4CACA;gBAGL,MAAa,QAAQ,QAAQ,MAAa,YAAY,YAAY;MAC5D,EATF,EASE,CACT;KACE,CAAA,EAEN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,eAAe,EAAY,OAAO;MAClC,WAAW,sCACT,MAAa,SACT,4CACA;MAEN,OAAM;gBAEN,kBAAC,OAAD;OAAK,WAAU;OAAU,MAAK;OAAO,SAAQ;OAAY,QAAO;iBAC9D,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACC,CAAA,EACT,kBAAC,UAAD;MACE,eAAe,EAAY,OAAO;MAClC,WAAW,sCACT,MAAa,SACT,4CACA;MAEN,OAAM;gBAEN,kBAAC,OAAD;OAAK,WAAU;OAAU,MAAK;OAAO,SAAQ;OAAY,QAAO;iBAC9D,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACC,CAAA,CACL;OACF;;GAGL,EAAe,WAAW,IACzB,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;iBAEP,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACF,CAAA;KACN,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,oCAAoC,sBAAsB;MAC3D,CAAA;KACL,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,iCAAiC,mCAAmC;MACtE,CAAA;KACA;QACJ,MAAa,SACf,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAe,KAAK,MAAU;KAC7B,IAAM,IAAW,EAAY,EAAM,GAAG;AACtC,YACE,kBAAC,GAAD;MAES;MACP,cAAc,EAAW,WAAW,EAAM,KAAK;MAC/C,UAAU,EAAS,EAAM,GAAG;MAC5B,cAAc,GAAU,YAAY;MACpC,aAAa;MACb,kBAAkB;MAClB,kBAAkB;MACD;MACjB,EATK,EAAM,GASX;MAEJ;IACE,CAAA,GAEN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAe,KAAK,MAAU;KAC7B,IAAM,IAAW,EAAY,EAAM,GAAG;AACtC,YACE,kBAAC,GAAD;MAES;MACP,cAAc,EAAW,WAAW,EAAM,KAAK;MAC/C,UAAU,EAAS,EAAM,GAAG;MAC5B,cAAc,GAAU,YAAY;MACpC,aAAa;MACb,kBAAkB;MAClB,kBAAkB;MACD;MACjB,EATK,EAAM,GASX;MAEJ;IACE,CAAA;GAGR,kBAAC,GAAD,EAAqC,oBAAmB,CAAA;GACpD;;GAmBJ,KAA6C,EACjD,UACA,WACA,aACA,iBACA,gBACA,qBACA,qBACA,yBACI;CACJ,IAAM,IAAiB,QAAc,EAAc,EAAM,YAAY,EAAE,CAAC,EAAE,CAAC,EAAM,SAAS,CAAC;AAE3F,QACE,kBAAC,OAAD;EACE,WAAW,sFACT,IAAW,gCAAgC;YAF/C;GAKG,KACC,kBAAC,QAAD;IAAM,WAAU;cAAhB;KAAkH;KACtG;KAAa;KAClB;;GAGT,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;KAAuB,MAAK;KAAO,SAAQ;KAAY,QAAO;eAC3E,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACF,CAAA;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAAqC,EAAM;KAAU,CAAA,EACnE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAwB,EAAM,SAAS;KACnC,CAAA,CACH;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;sBACN;MACN,IAAM,EAAE,UAAO,gBAAa,EAAqB,GAAO,EAAgB;AACxE,aAAO,EAAe,GAAO,EAAS;SACpC;KACC,CAAA,EACP,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAAgD,MAC3C,EAAmB,EAAM,SAAS,CAChC;OACH;;GAEL,EAAe,SAAS,KACvB,kBAAC,MAAD;IAAI,WAAU;cAAd,CACG,EAAe,MAAM,GAAG,EAAE,CAAC,KAAK,MAC/B,kBAAC,MAAD;KAAwB,WAAU;eAAlC,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;iBAEP,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA,EACN,kBAAC,QAAD;OAAM,WAAU;iBAAmB,EAAM;OAAY,CAAA,CACjD;SACN,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAM,WAAW,gBAAgB;MAC7B,CAAA,CACJ;OApBI,EAAM,QAoBV,CACL,EACD,EAAe,SAAS,KACvB,kBAAC,MAAD;KAAI,WAAU;eAAd;MAAmD;MAC/C,EAAe,SAAS;MAAE;MACzB;OAEJ;;GAGP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,IACC,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,UAAD;QACE,eAAe,EAAiB,EAAM,IAAI,IAAe,EAAE;QAC3D,WAAU;kBAEV,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;QACtB,CAAA;OACT,kBAAC,QAAD;QAAM,WAAU;kBAAgC;QAAoB,CAAA;OACpE,kBAAC,UAAD;QACE,eAAe,EAAiB,EAAM,IAAI,IAAe,EAAE;QAC3D,WAAU;kBAEV,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;QACrB,CAAA;OACL;SACN,kBAAC,UAAD;MACE,eAAe,EAAiB,EAAM,GAAG;MACzC,WAAU;MACV,OAAM;gBAEN,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;MACvB,CAAA,CACL;SAEN,kBAAC,UAAD;KACE,eAAe,EAAY,EAAM;KACjC,WAAU;eAFZ,CAIE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,EAAA,cAE7B;QAEX,kBAAC,UAAD;KACE,SAAS;KACT,WAAU;eACX;KAEQ,CAAA,CACL;;GACF;;GAmBJ,KAA2C,EAC/C,UACA,WACA,aACA,iBACA,gBACA,qBACA,qBACA,yBACI;CACJ,IAAM,IAAiB,QAAc,EAAc,EAAM,YAAY,EAAE,CAAC,EAAE,CAAC,EAAM,SAAS,CAAC;AAE3F,QACE,kBAAC,OAAD;EACE,WAAW,gFACT,IAAW,gCAAgC;YAF/C;GAKE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;KAAuB,MAAK;KAAO,SAAQ;KAAY,QAAO;eAC3E,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACF,CAAA;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA0C,EAAM;MAAU,CAAA,EACvE,KACC,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OAA6F;OACjF;OAAa;OAClB;QAEL;QACN,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAe;MAAO;MAAO,EAAe,WAAW,IAAU,KAAN;MAC1D;OACA;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;sBACL;MACN,IAAM,EAAE,UAAO,gBAAa,EAAqB,GAAO,EAAgB;AACxE,aAAO,EAAe,GAAO,EAAS;SACpC;KACA,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CAA+C,QACxC,EAAmB,EAAM,SAAS,CACnC;OACF;;GAEL,IACC,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MACE,eAAe,EAAiB,EAAM,IAAI,IAAe,EAAE;MAC3D,WAAU;gBAEV,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;MACtB,CAAA;KACT,kBAAC,QAAD;MAAM,WAAU;gBAA+B;MAAoB,CAAA;KACnE,kBAAC,UAAD;MACE,eAAe,EAAiB,EAAM,IAAI,IAAe,EAAE;MAC3D,WAAU;gBAEV,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;MACrB,CAAA;KACT,kBAAC,UAAD;MACE,eAAe,EAAiB,EAAM,GAAG;MACzC,WAAU;MACV,OAAM;gBAEN,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;MACvB,CAAA;KACL;QAEN,kBAAC,UAAD;IACE,eAAe,EAAY,EAAM;IACjC,WAAU;cAFZ,CAIE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,EAAA,MAE7B;;GAGX,kBAAC,UAAD;IACE,SAAS;IACT,WAAU;cACX;IAEQ,CAAA;GACL;;GAQJ,KAAuD,EAAE,yBAAsB;CACnF,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,IAAa,GAAoB,EACjC,EAAE,UAAO,eAAY,eAAY,cAAW,mBAAgB,mBAAgB,iBAChF,GAAmB,EAEf,IAAY,EAAM,QAAQ,GAAK,MAAS,IAAM,EAAK,UAAU,EAAE;AAIrE,QAFI,EAAM,WAAW,KAAK,CAAC,IAAmB,OAG5C,kBAAA,GAAA,EAAA,UAAA,CACG,CAAC,KAAc,EAAM,SAAS,KAC7B,kBAAC,UAAD;EACE,SAAS;EACT,WAAU;YAFZ;GAIE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA;GACpC,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACG;KAAU;KAAM,MAAc,IAAU,KAAN;KAC9B;;GACP,kBAAC,QAAD;IAAM,WAAU;cAML,EAJO,EAAM,QAAQ,GAAK,EAAE,UAAO,kBAAe;KACvD,IAAM,EAAE,aAAU,EAAqB,GAAO,EAAgB;AAC9D,YAAO,IAAM,IAAQ;OACpB,EAAE,EACwB,EAAgB;IAE1C,CAAA;GACA;KAGV,KACC,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;GAAoC,SAAS;GAAa,CAAA,EACzE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,GAAD,EAAc,WAAU,2BAA4B,CAAA;OACpD,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAG,2BAA2B,YAAY;QACxC,CAAA;OACL,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG;SAAU;SAAM,MAAc,IAAU,KAAN;SAC9B;;OACH;SACN,kBAAC,UAAD;MACE,SAAS;MACT,WAAU;gBAEV,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;MAClB,CAAA,CACL;;IAEN,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAM,KAAK,EAAE,UAAO,kBACnB,kBAAC,OAAD;MAAoB,WAAU;gBAA9B;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAwC,EAAM;SAAU,CAAA,EACtE,kBAAC,KAAD;SAAG,WAAU;mBAAb;iBACU;WACN,IAAM,EAAE,UAAO,gBAAa,EAAqB,GAAO,EAAgB;AACxE,kBAAO,EAAe,GAAO,EAAS;cACpC;UAAE;UAAI;UACP,EAAmB,EAAM,SAAS;UACnC;WACA;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,UAAD;UACE,eAAe,EAAe,EAAM,IAAI,IAAW,EAAE;UACrD,WAAU;oBAEV,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;UACtB,CAAA;SACT,kBAAC,QAAD;UAAM,WAAU;oBAAuC;UAAgB,CAAA;SACvE,kBAAC,UAAD;UACE,eAAe,EAAe,EAAM,IAAI,IAAW,EAAE;UACrD,WAAU;oBAEV,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;UACrB,CAAA;SACL;;OACN,kBAAC,KAAD;QAAG,WAAU;yBACH;SACN,IAAM,EAAE,UAAO,gBAAa,EAAqB,GAAO,EAAgB;AACxE,gBAAO,EAAe,IAAQ,GAAU,EAAS;YAC/C;QACF,CAAA;OACJ,kBAAC,UAAD;QACE,eAAe,EAAe,EAAM,GAAG;QACvC,WAAU;kBAEV,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;QACvB,CAAA;OACL;QAtCI,EAAM,GAsCV,CACN;KACE,CAAA;IAEN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAmB,EAAG,wBAAwB,QAAQ;OAAQ,CAAA,EAC9E,kBAAC,QAAD;OAAM,WAAU;iBAML,EAJO,EAAM,QAAQ,GAAK,EAAE,UAAO,kBAAe;QACvD,IAAM,EAAE,aAAU,EAAqB,GAAO,EAAgB;AAC9D,eAAO,IAAM,IAAQ;UACpB,EAAE,EACwB,EAAgB;OAE1C,CAAA,CACH;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,SAAS;OACT,WAAU;iBACX;OAEQ,CAAA,EACT,kBAAC,UAAD;OACE,eAAe;AAEb,QADA,GAAW,EACX,EAAW,mBAAmB;;OAEhC,WAAU;iBACX;OAEQ,CAAA,CACL;QACF;;IACF;KACF;IAEP,EAAA,CAAA"}