@burdenoff/microfe-billing 2026.530.4 → 2026.531.1

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.
@@ -1,21 +1,22 @@
1
1
  import { useBilling as e } from "../../../providers/BillingProvider.js";
2
2
  import { formatCurrency as t, formatPlanDuration as n, formatPlanDurationLabel as r } from "../../../shared/utils/format.js";
3
- import { useAddonCartStore as i } from "../store/addonCartStore.js";
4
- import { useBillingNavigate as a } from "../../../hooks/useBillingNavigate.js";
5
- import { useAddons as o } from "../hooks/useAddons.js";
3
+ import { getPlanFeatureQuantity as i } from "../../../shared/utils/planFeatureQuantity.js";
4
+ import { useAddonCartStore as a } from "../store/addonCartStore.js";
5
+ import { useBillingNavigate as o } from "../../../hooks/useBillingNavigate.js";
6
+ import { useAddons as s } from "../hooks/useAddons.js";
6
7
  import "../hooks/index.js";
7
- import { useDefaultBillingCurrency as s } from "../../../hooks/useDefaultBillingCurrency.js";
8
- import { useMemo as c, useState as l } from "react";
9
- import { Minus as u, Plus as d, ShoppingCart as f, Trash2 as p, X as m } from "lucide-react";
10
- import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
11
- import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
8
+ import { useDefaultBillingCurrency as c } from "../../../hooks/useDefaultBillingCurrency.js";
9
+ import { useMemo as l, useState as u } from "react";
10
+ import { Minus as d, Plus as f, ShoppingCart as p, Trash2 as m, X as h } from "lucide-react";
11
+ import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
12
+ import { useI18n as y } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
12
13
  //#region src/billing/modules/addons/pages/AddonsBrowsePage.tsx
13
- function y(e) {
14
+ function b(e) {
14
15
  let t = /* @__PURE__ */ new Map();
15
16
  for (let n of e) {
16
17
  if (!n.quota) continue;
17
- let e = n.quota.id, r = n.quota.limits?.value ?? 0, i = t.get(e);
18
- i ? i.totalValue += r : t.set(e, {
18
+ let e = n.quota.id, r = i(n), a = t.get(e);
19
+ a ? a.totalValue += r : t.set(e, {
19
20
  quotaId: e,
20
21
  name: n.quota.name ?? "Unknown Quota",
21
22
  totalValue: r
@@ -23,7 +24,7 @@ function y(e) {
23
24
  }
24
25
  return Array.from(t.values());
25
26
  }
26
- function b(e, t = "USD") {
27
+ function x(e, t = "USD") {
27
28
  if (e.currencyPrices && typeof e.currencyPrices == "object") {
28
29
  let n = e.currencyPrices;
29
30
  if (n[t] !== void 0 && n[t] !== null) return {
@@ -36,52 +37,52 @@ function b(e, t = "USD") {
36
37
  currency: e.currency || "USD"
37
38
  };
38
39
  }
39
- var x = () => {
40
- let { t } = v(), n = (e, n) => {
40
+ var S = () => {
41
+ let { t } = y(), n = (e, n) => {
41
42
  let r = t(e);
42
43
  return r === e ? n : r;
43
- }, r = a(), { productId: c } = e(), { addons: u, isLoading: d, error: f, refetch: p } = o({
44
+ }, r = o(), { productId: i } = e(), { addons: l, isLoading: d, error: f, refetch: p } = s({
44
45
  includeFree: !1,
45
- productId: c ?? void 0
46
- }), { 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));
47
- return d && u.length === 0 ? /* @__PURE__ */ _("div", {
46
+ productId: i ?? void 0
47
+ }), { addToCart: m, removeFromCart: h, updateQuantity: g, isInCart: b, getCartItem: x } = a(), [S, E] = u("grid"), [D, O] = u("all"), k = c(), A = l.filter((e) => !(!e.isActive || D !== "all" && e.duration !== D));
48
+ return d && l.length === 0 ? /* @__PURE__ */ v("div", {
48
49
  className: "space-y-6 p-6",
49
- children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", {
50
+ children: [/* @__PURE__ */ _("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ _("div", {
50
51
  className: "grid grid-cols-1 md:grid-cols-3 gap-6",
51
52
  children: [
52
53
  1,
53
54
  2,
54
55
  3
55
- ].map((e) => /* @__PURE__ */ _("div", {
56
+ ].map((e) => /* @__PURE__ */ v("div", {
56
57
  className: "border border-border rounded-lg p-6 space-y-4",
57
58
  children: [
58
- /* @__PURE__ */ g("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }),
59
- /* @__PURE__ */ g("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" }),
60
- /* @__PURE__ */ g("div", {
59
+ /* @__PURE__ */ _("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }),
60
+ /* @__PURE__ */ _("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" }),
61
+ /* @__PURE__ */ _("div", {
61
62
  className: "space-y-2",
62
63
  children: [
63
64
  1,
64
65
  2,
65
66
  3
66
- ].map((e) => /* @__PURE__ */ g("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }, e))
67
+ ].map((e) => /* @__PURE__ */ _("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }, e))
67
68
  })
68
69
  ]
69
70
  }, e))
70
71
  })]
71
- }) : f ? /* @__PURE__ */ g("div", {
72
+ }) : f ? /* @__PURE__ */ _("div", {
72
73
  className: "flex items-center justify-center h-full min-h-[400px]",
73
- children: /* @__PURE__ */ _("div", {
74
+ children: /* @__PURE__ */ v("div", {
74
75
  className: "text-center space-y-4",
75
76
  children: [
76
- /* @__PURE__ */ g("h2", {
77
+ /* @__PURE__ */ _("h2", {
77
78
  className: "text-lg font-semibold text-foreground",
78
79
  children: n("billing.addons.failedToLoad", "Failed to load addons")
79
80
  }),
80
- /* @__PURE__ */ g("p", {
81
+ /* @__PURE__ */ _("p", {
81
82
  className: "text-sm text-muted-foreground",
82
83
  children: f.message
83
84
  }),
84
- /* @__PURE__ */ g("button", {
85
+ /* @__PURE__ */ _("button", {
85
86
  type: "button",
86
87
  onClick: () => p(),
87
88
  className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
@@ -89,60 +90,60 @@ var x = () => {
89
90
  })
90
91
  ]
91
92
  })
92
- }) : /* @__PURE__ */ _("div", {
93
+ }) : /* @__PURE__ */ v("div", {
93
94
  className: "space-y-6 p-6",
94
95
  children: [
95
- /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
96
+ /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h1", {
96
97
  className: "text-2xl font-bold text-foreground",
97
98
  children: n("billing.addons.title", "Addons")
98
- }), /* @__PURE__ */ g("p", {
99
+ }), /* @__PURE__ */ _("p", {
99
100
  className: "text-sm text-muted-foreground mt-1",
100
101
  children: n("billing.addons.subtitle", "Enhance your subscription with additional features")
101
102
  })] }),
102
- /* @__PURE__ */ _("div", {
103
+ /* @__PURE__ */ v("div", {
103
104
  className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
104
- children: [/* @__PURE__ */ g("div", {
105
+ children: [/* @__PURE__ */ _("div", {
105
106
  className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
106
107
  children: [
107
108
  "all",
108
109
  "monthly",
109
110
  "yearly"
110
- ].map((e) => /* @__PURE__ */ g("button", {
111
+ ].map((e) => /* @__PURE__ */ _("button", {
111
112
  type: "button",
112
113
  onClick: () => O(e),
113
114
  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"}`,
114
115
  children: e === "all" ? "All" : e === "monthly" ? "Monthly" : "Yearly"
115
116
  }, e))
116
- }), /* @__PURE__ */ _("div", {
117
+ }), /* @__PURE__ */ v("div", {
117
118
  className: "ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50",
118
- children: [/* @__PURE__ */ g("button", {
119
+ children: [/* @__PURE__ */ _("button", {
119
120
  type: "button",
120
121
  onClick: () => E("grid"),
121
- className: `p-1.5 rounded-md transition-colors ${T === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
122
+ className: `p-1.5 rounded-md transition-colors ${S === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
122
123
  title: "Grid view",
123
- children: /* @__PURE__ */ g("svg", {
124
+ children: /* @__PURE__ */ _("svg", {
124
125
  className: "size-4",
125
126
  fill: "none",
126
127
  viewBox: "0 0 24 24",
127
128
  stroke: "currentColor",
128
- children: /* @__PURE__ */ g("path", {
129
+ children: /* @__PURE__ */ _("path", {
129
130
  strokeLinecap: "round",
130
131
  strokeLinejoin: "round",
131
132
  strokeWidth: 2,
132
133
  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"
133
134
  })
134
135
  })
135
- }), /* @__PURE__ */ g("button", {
136
+ }), /* @__PURE__ */ _("button", {
136
137
  type: "button",
137
138
  onClick: () => E("list"),
138
- className: `p-1.5 rounded-md transition-colors ${T === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
139
+ className: `p-1.5 rounded-md transition-colors ${S === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
139
140
  title: "List view",
140
- children: /* @__PURE__ */ g("svg", {
141
+ children: /* @__PURE__ */ _("svg", {
141
142
  className: "size-4",
142
143
  fill: "none",
143
144
  viewBox: "0 0 24 24",
144
145
  stroke: "currentColor",
145
- children: /* @__PURE__ */ g("path", {
146
+ children: /* @__PURE__ */ _("path", {
146
147
  strokeLinecap: "round",
147
148
  strokeLinejoin: "round",
148
149
  strokeWidth: 2,
@@ -152,17 +153,17 @@ var x = () => {
152
153
  })]
153
154
  })]
154
155
  }),
155
- A.length === 0 ? /* @__PURE__ */ _("div", {
156
+ A.length === 0 ? /* @__PURE__ */ v("div", {
156
157
  className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
157
158
  children: [
158
- /* @__PURE__ */ g("div", {
159
+ /* @__PURE__ */ _("div", {
159
160
  className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
160
- children: /* @__PURE__ */ g("svg", {
161
+ children: /* @__PURE__ */ _("svg", {
161
162
  className: "size-6 text-muted-foreground",
162
163
  fill: "none",
163
164
  viewBox: "0 0 24 24",
164
165
  stroke: "currentColor",
165
- children: /* @__PURE__ */ g("path", {
166
+ children: /* @__PURE__ */ _("path", {
166
167
  strokeLinecap: "round",
167
168
  strokeLinejoin: "round",
168
169
  strokeWidth: 2,
@@ -170,55 +171,55 @@ var x = () => {
170
171
  })
171
172
  })
172
173
  }),
173
- /* @__PURE__ */ g("h3", {
174
+ /* @__PURE__ */ _("h3", {
174
175
  className: "text-lg font-medium text-foreground",
175
176
  children: n("billing.addons.noAddonsAvailable", "No addons available")
176
177
  }),
177
- /* @__PURE__ */ g("p", {
178
+ /* @__PURE__ */ _("p", {
178
179
  className: "text-sm text-muted-foreground mt-1",
179
180
  children: n("billing.addons.checkBackLater", "Check back later for new addons.")
180
181
  })
181
182
  ]
182
- }) : T === "grid" ? /* @__PURE__ */ g("div", {
183
+ }) : S === "grid" ? /* @__PURE__ */ _("div", {
183
184
  className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
184
185
  children: A.map((e) => {
185
186
  let t = x(e.id);
186
- return /* @__PURE__ */ g(S, {
187
+ return /* @__PURE__ */ _(C, {
187
188
  addon: e,
188
189
  onView: () => r(`/addons/${e.id}`),
189
190
  isInCart: b(e.id),
190
191
  cartQuantity: t?.quantity || 0,
191
192
  onAddToCart: m,
192
- onUpdateQuantity: y,
193
+ onUpdateQuantity: g,
193
194
  onRemoveFromCart: h,
194
195
  displayCurrency: k
195
196
  }, e.id);
196
197
  })
197
- }) : /* @__PURE__ */ g("div", {
198
+ }) : /* @__PURE__ */ _("div", {
198
199
  className: "space-y-3",
199
200
  children: A.map((e) => {
200
201
  let t = x(e.id);
201
- return /* @__PURE__ */ g(C, {
202
+ return /* @__PURE__ */ _(w, {
202
203
  addon: e,
203
204
  onView: () => r(`/addons/${e.id}`),
204
205
  isInCart: b(e.id),
205
206
  cartQuantity: t?.quantity || 0,
206
207
  onAddToCart: m,
207
- onUpdateQuantity: y,
208
+ onUpdateQuantity: g,
208
209
  onRemoveFromCart: h,
209
210
  displayCurrency: k
210
211
  }, e.id);
211
212
  })
212
213
  }),
213
- /* @__PURE__ */ g(w, { displayCurrency: k })
214
+ /* @__PURE__ */ _(T, { displayCurrency: k })
214
215
  ]
215
216
  });
216
- }, S = ({ addon: e, onView: i, isInCart: a, cartQuantity: o, onAddToCart: s, onUpdateQuantity: l, onRemoveFromCart: m, displayCurrency: h }) => {
217
- let v = c(() => y(e.features || []), [e.features]);
218
- return /* @__PURE__ */ _("div", {
217
+ }, C = ({ addon: e, onView: i, isInCart: a, cartQuantity: o, onAddToCart: s, onUpdateQuantity: c, onRemoveFromCart: u, displayCurrency: h }) => {
218
+ let g = l(() => b(e.features || []), [e.features]);
219
+ return /* @__PURE__ */ v("div", {
219
220
  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"}`,
220
221
  children: [
221
- a && /* @__PURE__ */ _("span", {
222
+ a && /* @__PURE__ */ v("span", {
222
223
  className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-primary text-primary-foreground rounded",
223
224
  children: [
224
225
  "In Cart (",
@@ -226,14 +227,14 @@ var x = () => {
226
227
  ")"
227
228
  ]
228
229
  }),
229
- /* @__PURE__ */ g("div", {
230
+ /* @__PURE__ */ _("div", {
230
231
  className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4",
231
- children: /* @__PURE__ */ g("svg", {
232
+ children: /* @__PURE__ */ _("svg", {
232
233
  className: "size-5 text-primary",
233
234
  fill: "none",
234
235
  viewBox: "0 0 24 24",
235
236
  stroke: "currentColor",
236
- children: /* @__PURE__ */ g("path", {
237
+ children: /* @__PURE__ */ _("path", {
237
238
  strokeLinecap: "round",
238
239
  strokeLinejoin: "round",
239
240
  strokeWidth: 2,
@@ -241,100 +242,100 @@ var x = () => {
241
242
  })
242
243
  })
243
244
  }),
244
- /* @__PURE__ */ _("div", {
245
+ /* @__PURE__ */ v("div", {
245
246
  className: "mb-4",
246
- children: [/* @__PURE__ */ g("h3", {
247
+ children: [/* @__PURE__ */ _("h3", {
247
248
  className: "text-lg font-bold text-foreground",
248
249
  children: e.name
249
- }), /* @__PURE__ */ g("span", {
250
+ }), /* @__PURE__ */ _("span", {
250
251
  className: "text-sm text-muted-foreground",
251
252
  children: r(e.duration)
252
253
  })]
253
254
  }),
254
- /* @__PURE__ */ _("div", {
255
+ /* @__PURE__ */ v("div", {
255
256
  className: "flex items-baseline gap-1 mb-4",
256
- children: [/* @__PURE__ */ g("span", {
257
+ children: [/* @__PURE__ */ _("span", {
257
258
  className: "text-2xl font-bold text-foreground",
258
259
  children: (() => {
259
- let { price: n, currency: r } = b(e, h);
260
+ let { price: n, currency: r } = x(e, h);
260
261
  return t(n, r);
261
262
  })()
262
- }), /* @__PURE__ */ _("span", {
263
+ }), /* @__PURE__ */ v("span", {
263
264
  className: "text-muted-foreground text-sm",
264
265
  children: ["/ ", n(e.duration)]
265
266
  })]
266
267
  }),
267
- v.length > 0 && /* @__PURE__ */ _("ul", {
268
+ g.length > 0 && /* @__PURE__ */ v("ul", {
268
269
  className: "space-y-2 mb-4",
269
- children: [v.slice(0, 4).map((e) => /* @__PURE__ */ _("li", {
270
+ children: [g.slice(0, 4).map((e) => /* @__PURE__ */ v("li", {
270
271
  className: "flex items-center justify-between text-sm",
271
- children: [/* @__PURE__ */ _("div", {
272
+ children: [/* @__PURE__ */ v("div", {
272
273
  className: "flex items-center gap-2",
273
- children: [/* @__PURE__ */ g("svg", {
274
+ children: [/* @__PURE__ */ _("svg", {
274
275
  className: "size-4 text-status-success-text shrink-0",
275
276
  fill: "none",
276
277
  viewBox: "0 0 24 24",
277
278
  stroke: "currentColor",
278
- children: /* @__PURE__ */ g("path", {
279
+ children: /* @__PURE__ */ _("path", {
279
280
  strokeLinecap: "round",
280
281
  strokeLinejoin: "round",
281
282
  strokeWidth: 2,
282
283
  d: "M5 13l4 4L19 7"
283
284
  })
284
- }), /* @__PURE__ */ g("span", {
285
+ }), /* @__PURE__ */ _("span", {
285
286
  className: "text-foreground",
286
287
  children: e.name
287
288
  })]
288
- }), /* @__PURE__ */ g("span", {
289
+ }), /* @__PURE__ */ _("span", {
289
290
  className: "font-medium text-foreground",
290
291
  children: e.totalValue.toLocaleString()
291
292
  })]
292
- }, e.quotaId)), v.length > 4 && /* @__PURE__ */ _("li", {
293
+ }, e.quotaId)), g.length > 4 && /* @__PURE__ */ v("li", {
293
294
  className: "text-sm text-muted-foreground pl-6",
294
295
  children: [
295
296
  "+",
296
- v.length - 4,
297
+ g.length - 4,
297
298
  " more quotas"
298
299
  ]
299
300
  })]
300
301
  }),
301
- /* @__PURE__ */ _("div", {
302
+ /* @__PURE__ */ v("div", {
302
303
  className: "space-y-2 pt-4 border-t border-border mt-auto",
303
- children: [a ? /* @__PURE__ */ _("div", {
304
+ children: [a ? /* @__PURE__ */ v("div", {
304
305
  className: "flex items-center justify-between gap-2",
305
- children: [/* @__PURE__ */ _("div", {
306
+ children: [/* @__PURE__ */ v("div", {
306
307
  className: "flex items-center gap-1",
307
308
  children: [
308
- /* @__PURE__ */ g("button", {
309
+ /* @__PURE__ */ _("button", {
309
310
  type: "button",
310
- onClick: () => l(e.id, o - 1),
311
+ onClick: () => c(e.id, o - 1),
311
312
  className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
312
- children: /* @__PURE__ */ g(u, { className: "size-4" })
313
+ children: /* @__PURE__ */ _(d, { className: "size-4" })
313
314
  }),
314
- /* @__PURE__ */ g("span", {
315
+ /* @__PURE__ */ _("span", {
315
316
  className: "w-10 text-center font-medium",
316
317
  children: o
317
318
  }),
318
- /* @__PURE__ */ g("button", {
319
+ /* @__PURE__ */ _("button", {
319
320
  type: "button",
320
- onClick: () => l(e.id, o + 1),
321
+ onClick: () => c(e.id, o + 1),
321
322
  className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
322
- children: /* @__PURE__ */ g(d, { className: "size-4" })
323
+ children: /* @__PURE__ */ _(f, { className: "size-4" })
323
324
  })
324
325
  ]
325
- }), /* @__PURE__ */ g("button", {
326
+ }), /* @__PURE__ */ _("button", {
326
327
  type: "button",
327
- onClick: () => m(e.id),
328
+ onClick: () => u(e.id),
328
329
  className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
329
330
  title: "Remove from cart",
330
- children: /* @__PURE__ */ g(p, { className: "size-4" })
331
+ children: /* @__PURE__ */ _(m, { className: "size-4" })
331
332
  })]
332
- }) : /* @__PURE__ */ _("button", {
333
+ }) : /* @__PURE__ */ v("button", {
333
334
  type: "button",
334
335
  onClick: () => s(e),
335
336
  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",
336
- children: [/* @__PURE__ */ g(f, { className: "size-4" }), "Add to Cart"]
337
- }), /* @__PURE__ */ g("button", {
337
+ children: [/* @__PURE__ */ _(p, { className: "size-4" }), "Add to Cart"]
338
+ }), /* @__PURE__ */ _("button", {
338
339
  type: "button",
339
340
  onClick: i,
340
341
  className: "w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
@@ -343,19 +344,19 @@ var x = () => {
343
344
  })
344
345
  ]
345
346
  });
346
- }, C = ({ addon: e, onView: r, isInCart: i, cartQuantity: a, onAddToCart: o, onUpdateQuantity: s, onRemoveFromCart: l, displayCurrency: m }) => {
347
- let h = c(() => y(e.features || []), [e.features]);
348
- return /* @__PURE__ */ _("div", {
347
+ }, w = ({ addon: e, onView: r, isInCart: i, cartQuantity: a, onAddToCart: o, onUpdateQuantity: s, onRemoveFromCart: c, displayCurrency: u }) => {
348
+ let h = l(() => b(e.features || []), [e.features]);
349
+ return /* @__PURE__ */ v("div", {
349
350
  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"}`,
350
351
  children: [
351
- /* @__PURE__ */ g("div", {
352
+ /* @__PURE__ */ _("div", {
352
353
  className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
353
- children: /* @__PURE__ */ g("svg", {
354
+ children: /* @__PURE__ */ _("svg", {
354
355
  className: "size-5 text-primary",
355
356
  fill: "none",
356
357
  viewBox: "0 0 24 24",
357
358
  stroke: "currentColor",
358
- children: /* @__PURE__ */ g("path", {
359
+ children: /* @__PURE__ */ _("path", {
359
360
  strokeLinecap: "round",
360
361
  strokeLinejoin: "round",
361
362
  strokeWidth: 2,
@@ -363,14 +364,14 @@ var x = () => {
363
364
  })
364
365
  })
365
366
  }),
366
- /* @__PURE__ */ _("div", {
367
+ /* @__PURE__ */ v("div", {
367
368
  className: "flex-1 min-w-0",
368
- children: [/* @__PURE__ */ _("div", {
369
+ children: [/* @__PURE__ */ v("div", {
369
370
  className: "flex items-center gap-2",
370
- children: [/* @__PURE__ */ g("h3", {
371
+ children: [/* @__PURE__ */ _("h3", {
371
372
  className: "font-semibold text-foreground truncate",
372
373
  children: e.name
373
- }), i && /* @__PURE__ */ _("span", {
374
+ }), i && /* @__PURE__ */ v("span", {
374
375
  className: "px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded",
375
376
  children: [
376
377
  "In Cart (",
@@ -378,7 +379,7 @@ var x = () => {
378
379
  ")"
379
380
  ]
380
381
  })]
381
- }), /* @__PURE__ */ _("p", {
382
+ }), /* @__PURE__ */ v("p", {
382
383
  className: "text-sm text-muted-foreground",
383
384
  children: [
384
385
  h.length,
@@ -387,53 +388,53 @@ var x = () => {
387
388
  ]
388
389
  })]
389
390
  }),
390
- /* @__PURE__ */ _("div", {
391
+ /* @__PURE__ */ v("div", {
391
392
  className: "text-right",
392
- children: [/* @__PURE__ */ g("div", {
393
+ children: [/* @__PURE__ */ _("div", {
393
394
  className: "font-semibold text-foreground",
394
395
  children: (() => {
395
- let { price: n, currency: r } = b(e, m);
396
+ let { price: n, currency: r } = x(e, u);
396
397
  return t(n, r);
397
398
  })()
398
- }), /* @__PURE__ */ _("div", {
399
+ }), /* @__PURE__ */ v("div", {
399
400
  className: "text-sm text-muted-foreground",
400
401
  children: ["per ", n(e.duration)]
401
402
  })]
402
403
  }),
403
- i ? /* @__PURE__ */ _("div", {
404
+ i ? /* @__PURE__ */ v("div", {
404
405
  className: "flex items-center gap-1",
405
406
  children: [
406
- /* @__PURE__ */ g("button", {
407
+ /* @__PURE__ */ _("button", {
407
408
  type: "button",
408
409
  onClick: () => s(e.id, a - 1),
409
410
  className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
410
- children: /* @__PURE__ */ g(u, { className: "size-4" })
411
+ children: /* @__PURE__ */ _(d, { className: "size-4" })
411
412
  }),
412
- /* @__PURE__ */ g("span", {
413
+ /* @__PURE__ */ _("span", {
413
414
  className: "w-8 text-center font-medium",
414
415
  children: a
415
416
  }),
416
- /* @__PURE__ */ g("button", {
417
+ /* @__PURE__ */ _("button", {
417
418
  type: "button",
418
419
  onClick: () => s(e.id, a + 1),
419
420
  className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
420
- children: /* @__PURE__ */ g(d, { className: "size-4" })
421
+ children: /* @__PURE__ */ _(f, { className: "size-4" })
421
422
  }),
422
- /* @__PURE__ */ g("button", {
423
+ /* @__PURE__ */ _("button", {
423
424
  type: "button",
424
- onClick: () => l(e.id),
425
+ onClick: () => c(e.id),
425
426
  className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors ml-1",
426
427
  title: "Remove from cart",
427
- children: /* @__PURE__ */ g(p, { className: "size-4" })
428
+ children: /* @__PURE__ */ _(m, { className: "size-4" })
428
429
  })
429
430
  ]
430
- }) : /* @__PURE__ */ _("button", {
431
+ }) : /* @__PURE__ */ v("button", {
431
432
  type: "button",
432
433
  onClick: () => o(e),
433
434
  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",
434
- children: [/* @__PURE__ */ g(f, { className: "size-4" }), "Add"]
435
+ children: [/* @__PURE__ */ _(p, { className: "size-4" }), "Add"]
435
436
  }),
436
- /* @__PURE__ */ g("button", {
437
+ /* @__PURE__ */ _("button", {
437
438
  type: "button",
438
439
  onClick: r,
439
440
  className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
@@ -441,18 +442,18 @@ var x = () => {
441
442
  })
442
443
  ]
443
444
  });
444
- }, w = ({ displayCurrency: e }) => {
445
- let { t: r } = v(), o = (e, t) => {
445
+ }, T = ({ displayCurrency: e }) => {
446
+ let { t: r } = y(), i = (e, t) => {
446
447
  let n = r(e);
447
448
  return n === e ? t : n;
448
- }, 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);
449
- return c.length === 0 && !l ? null : /* @__PURE__ */ _(h, { children: [!l && c.length > 0 && /* @__PURE__ */ _("button", {
449
+ }, s = o(), { items: c, isCartOpen: l, toggleCart: u, closeCart: b, removeFromCart: S, updateQuantity: C, clearCart: w } = a(), T = c.reduce((e, t) => e + t.quantity, 0);
450
+ return c.length === 0 && !l ? null : /* @__PURE__ */ v(g, { children: [!l && c.length > 0 && /* @__PURE__ */ v("button", {
450
451
  type: "button",
451
- onClick: y,
452
+ onClick: u,
452
453
  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",
453
454
  children: [
454
- /* @__PURE__ */ g(f, { className: "size-5" }),
455
- /* @__PURE__ */ _("span", {
455
+ /* @__PURE__ */ _(p, { className: "size-5" }),
456
+ /* @__PURE__ */ v("span", {
456
457
  className: "font-medium",
457
458
  children: [
458
459
  T,
@@ -460,33 +461,33 @@ var x = () => {
460
461
  T === 1 ? "" : "s"
461
462
  ]
462
463
  }),
463
- /* @__PURE__ */ g("span", {
464
+ /* @__PURE__ */ _("span", {
464
465
  className: "px-2 py-0.5 bg-primary-foreground/20 rounded-full text-sm",
465
466
  children: t(c.reduce((t, { addon: n, quantity: r }) => {
466
- let { price: i } = b(n, e);
467
+ let { price: i } = x(n, e);
467
468
  return t + i * r;
468
469
  }, 0), e)
469
470
  })
470
471
  ]
471
- }), l && /* @__PURE__ */ _("div", {
472
+ }), l && /* @__PURE__ */ v("div", {
472
473
  className: "fixed inset-0 z-50 flex items-end sm:items-center justify-center",
473
- children: [/* @__PURE__ */ g("div", {
474
+ children: [/* @__PURE__ */ _("div", {
474
475
  className: "absolute inset-0 bg-overlay-scrim",
475
- onClick: x
476
- }), /* @__PURE__ */ _("div", {
476
+ onClick: b
477
+ }), /* @__PURE__ */ v("div", {
477
478
  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",
478
479
  children: [
479
- /* @__PURE__ */ _("div", {
480
+ /* @__PURE__ */ v("div", {
480
481
  className: "flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30",
481
- children: [/* @__PURE__ */ _("div", {
482
+ children: [/* @__PURE__ */ v("div", {
482
483
  className: "flex items-center gap-2",
483
484
  children: [
484
- /* @__PURE__ */ g(f, { className: "size-5 text-foreground" }),
485
- /* @__PURE__ */ g("h3", {
485
+ /* @__PURE__ */ _(p, { className: "size-5 text-foreground" }),
486
+ /* @__PURE__ */ _("h3", {
486
487
  className: "font-semibold text-foreground",
487
- children: o("billing.addons.yourCart", "Your Cart")
488
+ children: i("billing.addons.yourCart", "Your Cart")
488
489
  }),
489
- /* @__PURE__ */ _("span", {
490
+ /* @__PURE__ */ v("span", {
490
491
  className: "px-2 py-0.5 text-xs bg-primary text-primary-foreground rounded-full",
491
492
  children: [
492
493
  T,
@@ -495,28 +496,28 @@ var x = () => {
495
496
  ]
496
497
  })
497
498
  ]
498
- }), /* @__PURE__ */ g("button", {
499
+ }), /* @__PURE__ */ _("button", {
499
500
  type: "button",
500
- onClick: x,
501
+ onClick: b,
501
502
  className: "p-1.5 rounded hover:bg-muted transition-colors",
502
- children: /* @__PURE__ */ g(m, { className: "size-5" })
503
+ children: /* @__PURE__ */ _(h, { className: "size-5" })
503
504
  })]
504
505
  }),
505
- /* @__PURE__ */ g("div", {
506
+ /* @__PURE__ */ _("div", {
506
507
  className: "overflow-y-auto max-h-[50vh] divide-y divide-border",
507
- children: c.map(({ addon: r, quantity: i }) => /* @__PURE__ */ _("div", {
508
+ children: c.map(({ addon: r, quantity: i }) => /* @__PURE__ */ v("div", {
508
509
  className: "p-4 flex items-center gap-3",
509
510
  children: [
510
- /* @__PURE__ */ _("div", {
511
+ /* @__PURE__ */ v("div", {
511
512
  className: "flex-1 min-w-0",
512
- children: [/* @__PURE__ */ g("h4", {
513
+ children: [/* @__PURE__ */ _("h4", {
513
514
  className: "font-medium text-foreground truncate",
514
515
  children: r.name
515
- }), /* @__PURE__ */ _("p", {
516
+ }), /* @__PURE__ */ v("p", {
516
517
  className: "text-sm text-muted-foreground",
517
518
  children: [
518
519
  (() => {
519
- let { price: n, currency: i } = b(r, e);
520
+ let { price: n, currency: i } = x(r, e);
520
521
  return t(n, i);
521
522
  })(),
522
523
  " ",
@@ -525,68 +526,68 @@ var x = () => {
525
526
  ]
526
527
  })]
527
528
  }),
528
- /* @__PURE__ */ _("div", {
529
+ /* @__PURE__ */ v("div", {
529
530
  className: "flex items-center gap-1",
530
531
  children: [
531
- /* @__PURE__ */ g("button", {
532
+ /* @__PURE__ */ _("button", {
532
533
  type: "button",
533
534
  onClick: () => C(r.id, i - 1),
534
535
  className: "p-1 rounded border border-border hover:bg-muted transition-colors",
535
- children: /* @__PURE__ */ g(u, { className: "size-3" })
536
+ children: /* @__PURE__ */ _(d, { className: "size-3" })
536
537
  }),
537
- /* @__PURE__ */ g("span", {
538
+ /* @__PURE__ */ _("span", {
538
539
  className: "w-6 text-center text-sm font-medium",
539
540
  children: i
540
541
  }),
541
- /* @__PURE__ */ g("button", {
542
+ /* @__PURE__ */ _("button", {
542
543
  type: "button",
543
544
  onClick: () => C(r.id, i + 1),
544
545
  className: "p-1 rounded border border-border hover:bg-muted transition-colors",
545
- children: /* @__PURE__ */ g(d, { className: "size-3" })
546
+ children: /* @__PURE__ */ _(f, { className: "size-3" })
546
547
  })
547
548
  ]
548
549
  }),
549
- /* @__PURE__ */ g("p", {
550
+ /* @__PURE__ */ _("p", {
550
551
  className: "font-medium text-foreground",
551
552
  children: (() => {
552
- let { price: n, currency: a } = b(r, e);
553
+ let { price: n, currency: a } = x(r, e);
553
554
  return t(n * i, a);
554
555
  })()
555
556
  }),
556
- /* @__PURE__ */ g("button", {
557
+ /* @__PURE__ */ _("button", {
557
558
  type: "button",
558
559
  onClick: () => S(r.id),
559
560
  className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
560
- children: /* @__PURE__ */ g(p, { className: "size-4" })
561
+ children: /* @__PURE__ */ _(m, { className: "size-4" })
561
562
  })
562
563
  ]
563
564
  }, r.id))
564
565
  }),
565
- /* @__PURE__ */ _("div", {
566
+ /* @__PURE__ */ v("div", {
566
567
  className: "border-t border-border p-4 space-y-3 bg-muted/20",
567
- children: [/* @__PURE__ */ _("div", {
568
+ children: [/* @__PURE__ */ v("div", {
568
569
  className: "flex items-center justify-between text-lg font-semibold",
569
- children: [/* @__PURE__ */ g("span", {
570
+ children: [/* @__PURE__ */ _("span", {
570
571
  className: "text-foreground",
571
- children: o("billing.addons.total", "Total")
572
- }), /* @__PURE__ */ g("span", {
572
+ children: i("billing.addons.total", "Total")
573
+ }), /* @__PURE__ */ _("span", {
573
574
  className: "text-foreground",
574
575
  children: t(c.reduce((t, { addon: n, quantity: r }) => {
575
- let { price: i } = b(n, e);
576
+ let { price: i } = x(n, e);
576
577
  return t + i * r;
577
578
  }, 0), e)
578
579
  })]
579
- }), /* @__PURE__ */ _("div", {
580
+ }), /* @__PURE__ */ v("div", {
580
581
  className: "flex gap-2",
581
- children: [/* @__PURE__ */ g("button", {
582
+ children: [/* @__PURE__ */ _("button", {
582
583
  type: "button",
583
584
  onClick: w,
584
585
  className: "flex-1 px-4 py-2.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
585
586
  children: "Clear Cart"
586
- }), /* @__PURE__ */ g("button", {
587
+ }), /* @__PURE__ */ _("button", {
587
588
  type: "button",
588
589
  onClick: () => {
589
- x(), s("/checkout/addons");
590
+ b(), s("/checkout/addons");
590
591
  },
591
592
  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",
592
593
  children: "Checkout"
@@ -598,6 +599,6 @@ var x = () => {
598
599
  })] });
599
600
  };
600
601
  //#endregion
601
- export { x as AddonsBrowsePage };
602
+ export { S as AddonsBrowsePage };
602
603
 
603
604
  //# sourceMappingURL=AddonsBrowsePage.js.map