@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.
- package/dist/billing/modules/addons/pages/AddonDetailPage.js +85 -84
- package/dist/billing/modules/addons/pages/AddonDetailPage.js.map +1 -1
- package/dist/billing/modules/addons/pages/AddonEditPage.js +176 -195
- package/dist/billing/modules/addons/pages/AddonEditPage.js.map +1 -1
- package/dist/billing/modules/addons/pages/AddonsBrowsePage.js +173 -172
- package/dist/billing/modules/addons/pages/AddonsBrowsePage.js.map +1 -1
- package/dist/billing/modules/addons/pages/AddonsListPage.js +216 -215
- package/dist/billing/modules/addons/pages/AddonsListPage.js.map +1 -1
- package/dist/billing/modules/checkout/hooks/useCheckout.js +2 -0
- package/dist/billing/modules/checkout/hooks/useCheckout.js.map +1 -1
- package/dist/billing/modules/dashboard/components/RecommendedAddonsSection.js +79 -78
- package/dist/billing/modules/dashboard/components/RecommendedAddonsSection.js.map +1 -1
- package/dist/billing/modules/plans/pages/PlanEditPage.js +29 -20
- package/dist/billing/modules/plans/pages/PlanEditPage.js.map +1 -1
- package/dist/generated/global-operations.js +5 -0
- package/dist/generated/global-operations.js.map +1 -1
- package/package.json +1 -1
|
@@ -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 {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
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
|
|
8
|
-
import { useMemo as
|
|
9
|
-
import { Minus as
|
|
10
|
-
import { Fragment as
|
|
11
|
-
import { useI18n as
|
|
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
|
|
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
|
|
18
|
-
|
|
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
|
|
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
|
|
40
|
-
let { t } =
|
|
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 =
|
|
44
|
+
}, r = o(), { productId: i } = e(), { addons: l, isLoading: d, error: f, refetch: p } = s({
|
|
44
45
|
includeFree: !1,
|
|
45
|
-
productId:
|
|
46
|
-
}), { addToCart: m, removeFromCart: h, updateQuantity:
|
|
47
|
-
return d &&
|
|
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__ */
|
|
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__ */
|
|
56
|
+
].map((e) => /* @__PURE__ */ v("div", {
|
|
56
57
|
className: "border border-border rounded-lg p-6 space-y-4",
|
|
57
58
|
children: [
|
|
58
|
-
/* @__PURE__ */
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
72
|
+
}) : f ? /* @__PURE__ */ _("div", {
|
|
72
73
|
className: "flex items-center justify-center h-full min-h-[400px]",
|
|
73
|
-
children: /* @__PURE__ */
|
|
74
|
+
children: /* @__PURE__ */ v("div", {
|
|
74
75
|
className: "text-center space-y-4",
|
|
75
76
|
children: [
|
|
76
|
-
/* @__PURE__ */
|
|
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__ */
|
|
81
|
+
/* @__PURE__ */ _("p", {
|
|
81
82
|
className: "text-sm text-muted-foreground",
|
|
82
83
|
children: f.message
|
|
83
84
|
}),
|
|
84
|
-
/* @__PURE__ */
|
|
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__ */
|
|
93
|
+
}) : /* @__PURE__ */ v("div", {
|
|
93
94
|
className: "space-y-6 p-6",
|
|
94
95
|
children: [
|
|
95
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
103
|
+
/* @__PURE__ */ v("div", {
|
|
103
104
|
className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
|
|
104
|
-
children: [/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
117
|
+
}), /* @__PURE__ */ v("div", {
|
|
117
118
|
className: "ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50",
|
|
118
|
-
children: [/* @__PURE__ */
|
|
119
|
+
children: [/* @__PURE__ */ _("button", {
|
|
119
120
|
type: "button",
|
|
120
121
|
onClick: () => E("grid"),
|
|
121
|
-
className: `p-1.5 rounded-md transition-colors ${
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
136
|
+
}), /* @__PURE__ */ _("button", {
|
|
136
137
|
type: "button",
|
|
137
138
|
onClick: () => E("list"),
|
|
138
|
-
className: `p-1.5 rounded-md transition-colors ${
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
159
|
+
/* @__PURE__ */ _("div", {
|
|
159
160
|
className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
|
|
160
|
-
children: /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
-
}) :
|
|
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__ */
|
|
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:
|
|
193
|
+
onUpdateQuantity: g,
|
|
193
194
|
onRemoveFromCart: h,
|
|
194
195
|
displayCurrency: k
|
|
195
196
|
}, e.id);
|
|
196
197
|
})
|
|
197
|
-
}) : /* @__PURE__ */
|
|
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__ */
|
|
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:
|
|
208
|
+
onUpdateQuantity: g,
|
|
208
209
|
onRemoveFromCart: h,
|
|
209
210
|
displayCurrency: k
|
|
210
211
|
}, e.id);
|
|
211
212
|
})
|
|
212
213
|
}),
|
|
213
|
-
/* @__PURE__ */
|
|
214
|
+
/* @__PURE__ */ _(T, { displayCurrency: k })
|
|
214
215
|
]
|
|
215
216
|
});
|
|
216
|
-
},
|
|
217
|
-
let
|
|
218
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
230
|
+
/* @__PURE__ */ _("div", {
|
|
230
231
|
className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4",
|
|
231
|
-
children: /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
245
|
+
/* @__PURE__ */ v("div", {
|
|
245
246
|
className: "mb-4",
|
|
246
|
-
children: [/* @__PURE__ */
|
|
247
|
+
children: [/* @__PURE__ */ _("h3", {
|
|
247
248
|
className: "text-lg font-bold text-foreground",
|
|
248
249
|
children: e.name
|
|
249
|
-
}), /* @__PURE__ */
|
|
250
|
+
}), /* @__PURE__ */ _("span", {
|
|
250
251
|
className: "text-sm text-muted-foreground",
|
|
251
252
|
children: r(e.duration)
|
|
252
253
|
})]
|
|
253
254
|
}),
|
|
254
|
-
/* @__PURE__ */
|
|
255
|
+
/* @__PURE__ */ v("div", {
|
|
255
256
|
className: "flex items-baseline gap-1 mb-4",
|
|
256
|
-
children: [/* @__PURE__ */
|
|
257
|
+
children: [/* @__PURE__ */ _("span", {
|
|
257
258
|
className: "text-2xl font-bold text-foreground",
|
|
258
259
|
children: (() => {
|
|
259
|
-
let { price: n, currency: r } =
|
|
260
|
+
let { price: n, currency: r } = x(e, h);
|
|
260
261
|
return t(n, r);
|
|
261
262
|
})()
|
|
262
|
-
}), /* @__PURE__ */
|
|
263
|
+
}), /* @__PURE__ */ v("span", {
|
|
263
264
|
className: "text-muted-foreground text-sm",
|
|
264
265
|
children: ["/ ", n(e.duration)]
|
|
265
266
|
})]
|
|
266
267
|
}),
|
|
267
|
-
|
|
268
|
+
g.length > 0 && /* @__PURE__ */ v("ul", {
|
|
268
269
|
className: "space-y-2 mb-4",
|
|
269
|
-
children: [
|
|
270
|
+
children: [g.slice(0, 4).map((e) => /* @__PURE__ */ v("li", {
|
|
270
271
|
className: "flex items-center justify-between text-sm",
|
|
271
|
-
children: [/* @__PURE__ */
|
|
272
|
+
children: [/* @__PURE__ */ v("div", {
|
|
272
273
|
className: "flex items-center gap-2",
|
|
273
|
-
children: [/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
285
|
+
}), /* @__PURE__ */ _("span", {
|
|
285
286
|
className: "text-foreground",
|
|
286
287
|
children: e.name
|
|
287
288
|
})]
|
|
288
|
-
}), /* @__PURE__ */
|
|
289
|
+
}), /* @__PURE__ */ _("span", {
|
|
289
290
|
className: "font-medium text-foreground",
|
|
290
291
|
children: e.totalValue.toLocaleString()
|
|
291
292
|
})]
|
|
292
|
-
}, e.quotaId)),
|
|
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
|
-
|
|
297
|
+
g.length - 4,
|
|
297
298
|
" more quotas"
|
|
298
299
|
]
|
|
299
300
|
})]
|
|
300
301
|
}),
|
|
301
|
-
/* @__PURE__ */
|
|
302
|
+
/* @__PURE__ */ v("div", {
|
|
302
303
|
className: "space-y-2 pt-4 border-t border-border mt-auto",
|
|
303
|
-
children: [a ? /* @__PURE__ */
|
|
304
|
+
children: [a ? /* @__PURE__ */ v("div", {
|
|
304
305
|
className: "flex items-center justify-between gap-2",
|
|
305
|
-
children: [/* @__PURE__ */
|
|
306
|
+
children: [/* @__PURE__ */ v("div", {
|
|
306
307
|
className: "flex items-center gap-1",
|
|
307
308
|
children: [
|
|
308
|
-
/* @__PURE__ */
|
|
309
|
+
/* @__PURE__ */ _("button", {
|
|
309
310
|
type: "button",
|
|
310
|
-
onClick: () =>
|
|
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__ */
|
|
313
|
+
children: /* @__PURE__ */ _(d, { className: "size-4" })
|
|
313
314
|
}),
|
|
314
|
-
/* @__PURE__ */
|
|
315
|
+
/* @__PURE__ */ _("span", {
|
|
315
316
|
className: "w-10 text-center font-medium",
|
|
316
317
|
children: o
|
|
317
318
|
}),
|
|
318
|
-
/* @__PURE__ */
|
|
319
|
+
/* @__PURE__ */ _("button", {
|
|
319
320
|
type: "button",
|
|
320
|
-
onClick: () =>
|
|
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__ */
|
|
323
|
+
children: /* @__PURE__ */ _(f, { className: "size-4" })
|
|
323
324
|
})
|
|
324
325
|
]
|
|
325
|
-
}), /* @__PURE__ */
|
|
326
|
+
}), /* @__PURE__ */ _("button", {
|
|
326
327
|
type: "button",
|
|
327
|
-
onClick: () =>
|
|
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__ */
|
|
331
|
+
children: /* @__PURE__ */ _(m, { className: "size-4" })
|
|
331
332
|
})]
|
|
332
|
-
}) : /* @__PURE__ */
|
|
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__ */
|
|
337
|
-
}), /* @__PURE__ */
|
|
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
|
-
},
|
|
347
|
-
let h =
|
|
348
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
352
|
+
/* @__PURE__ */ _("div", {
|
|
352
353
|
className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
|
|
353
|
-
children: /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
367
|
+
/* @__PURE__ */ v("div", {
|
|
367
368
|
className: "flex-1 min-w-0",
|
|
368
|
-
children: [/* @__PURE__ */
|
|
369
|
+
children: [/* @__PURE__ */ v("div", {
|
|
369
370
|
className: "flex items-center gap-2",
|
|
370
|
-
children: [/* @__PURE__ */
|
|
371
|
+
children: [/* @__PURE__ */ _("h3", {
|
|
371
372
|
className: "font-semibold text-foreground truncate",
|
|
372
373
|
children: e.name
|
|
373
|
-
}), i && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
391
|
+
/* @__PURE__ */ v("div", {
|
|
391
392
|
className: "text-right",
|
|
392
|
-
children: [/* @__PURE__ */
|
|
393
|
+
children: [/* @__PURE__ */ _("div", {
|
|
393
394
|
className: "font-semibold text-foreground",
|
|
394
395
|
children: (() => {
|
|
395
|
-
let { price: n, currency: r } =
|
|
396
|
+
let { price: n, currency: r } = x(e, u);
|
|
396
397
|
return t(n, r);
|
|
397
398
|
})()
|
|
398
|
-
}), /* @__PURE__ */
|
|
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__ */
|
|
404
|
+
i ? /* @__PURE__ */ v("div", {
|
|
404
405
|
className: "flex items-center gap-1",
|
|
405
406
|
children: [
|
|
406
|
-
/* @__PURE__ */
|
|
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__ */
|
|
411
|
+
children: /* @__PURE__ */ _(d, { className: "size-4" })
|
|
411
412
|
}),
|
|
412
|
-
/* @__PURE__ */
|
|
413
|
+
/* @__PURE__ */ _("span", {
|
|
413
414
|
className: "w-8 text-center font-medium",
|
|
414
415
|
children: a
|
|
415
416
|
}),
|
|
416
|
-
/* @__PURE__ */
|
|
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__ */
|
|
421
|
+
children: /* @__PURE__ */ _(f, { className: "size-4" })
|
|
421
422
|
}),
|
|
422
|
-
/* @__PURE__ */
|
|
423
|
+
/* @__PURE__ */ _("button", {
|
|
423
424
|
type: "button",
|
|
424
|
-
onClick: () =>
|
|
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__ */
|
|
428
|
+
children: /* @__PURE__ */ _(m, { className: "size-4" })
|
|
428
429
|
})
|
|
429
430
|
]
|
|
430
|
-
}) : /* @__PURE__ */
|
|
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__ */
|
|
435
|
+
children: [/* @__PURE__ */ _(p, { className: "size-4" }), "Add"]
|
|
435
436
|
}),
|
|
436
|
-
/* @__PURE__ */
|
|
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
|
-
},
|
|
445
|
-
let { t: r } =
|
|
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 =
|
|
449
|
-
return c.length === 0 && !l ? null : /* @__PURE__ */
|
|
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:
|
|
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__ */
|
|
455
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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 } =
|
|
467
|
+
let { price: i } = x(n, e);
|
|
467
468
|
return t + i * r;
|
|
468
469
|
}, 0), e)
|
|
469
470
|
})
|
|
470
471
|
]
|
|
471
|
-
}), l && /* @__PURE__ */
|
|
472
|
+
}), l && /* @__PURE__ */ v("div", {
|
|
472
473
|
className: "fixed inset-0 z-50 flex items-end sm:items-center justify-center",
|
|
473
|
-
children: [/* @__PURE__ */
|
|
474
|
+
children: [/* @__PURE__ */ _("div", {
|
|
474
475
|
className: "absolute inset-0 bg-overlay-scrim",
|
|
475
|
-
onClick:
|
|
476
|
-
}), /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
482
|
+
children: [/* @__PURE__ */ v("div", {
|
|
482
483
|
className: "flex items-center gap-2",
|
|
483
484
|
children: [
|
|
484
|
-
/* @__PURE__ */
|
|
485
|
-
/* @__PURE__ */
|
|
485
|
+
/* @__PURE__ */ _(p, { className: "size-5 text-foreground" }),
|
|
486
|
+
/* @__PURE__ */ _("h3", {
|
|
486
487
|
className: "font-semibold text-foreground",
|
|
487
|
-
children:
|
|
488
|
+
children: i("billing.addons.yourCart", "Your Cart")
|
|
488
489
|
}),
|
|
489
|
-
/* @__PURE__ */
|
|
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__ */
|
|
499
|
+
}), /* @__PURE__ */ _("button", {
|
|
499
500
|
type: "button",
|
|
500
|
-
onClick:
|
|
501
|
+
onClick: b,
|
|
501
502
|
className: "p-1.5 rounded hover:bg-muted transition-colors",
|
|
502
|
-
children: /* @__PURE__ */
|
|
503
|
+
children: /* @__PURE__ */ _(h, { className: "size-5" })
|
|
503
504
|
})]
|
|
504
505
|
}),
|
|
505
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
511
|
+
/* @__PURE__ */ v("div", {
|
|
511
512
|
className: "flex-1 min-w-0",
|
|
512
|
-
children: [/* @__PURE__ */
|
|
513
|
+
children: [/* @__PURE__ */ _("h4", {
|
|
513
514
|
className: "font-medium text-foreground truncate",
|
|
514
515
|
children: r.name
|
|
515
|
-
}), /* @__PURE__ */
|
|
516
|
+
}), /* @__PURE__ */ v("p", {
|
|
516
517
|
className: "text-sm text-muted-foreground",
|
|
517
518
|
children: [
|
|
518
519
|
(() => {
|
|
519
|
-
let { price: n, currency: i } =
|
|
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__ */
|
|
529
|
+
/* @__PURE__ */ v("div", {
|
|
529
530
|
className: "flex items-center gap-1",
|
|
530
531
|
children: [
|
|
531
|
-
/* @__PURE__ */
|
|
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__ */
|
|
536
|
+
children: /* @__PURE__ */ _(d, { className: "size-3" })
|
|
536
537
|
}),
|
|
537
|
-
/* @__PURE__ */
|
|
538
|
+
/* @__PURE__ */ _("span", {
|
|
538
539
|
className: "w-6 text-center text-sm font-medium",
|
|
539
540
|
children: i
|
|
540
541
|
}),
|
|
541
|
-
/* @__PURE__ */
|
|
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__ */
|
|
546
|
+
children: /* @__PURE__ */ _(f, { className: "size-3" })
|
|
546
547
|
})
|
|
547
548
|
]
|
|
548
549
|
}),
|
|
549
|
-
/* @__PURE__ */
|
|
550
|
+
/* @__PURE__ */ _("p", {
|
|
550
551
|
className: "font-medium text-foreground",
|
|
551
552
|
children: (() => {
|
|
552
|
-
let { price: n, currency: a } =
|
|
553
|
+
let { price: n, currency: a } = x(r, e);
|
|
553
554
|
return t(n * i, a);
|
|
554
555
|
})()
|
|
555
556
|
}),
|
|
556
|
-
/* @__PURE__ */
|
|
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__ */
|
|
561
|
+
children: /* @__PURE__ */ _(m, { className: "size-4" })
|
|
561
562
|
})
|
|
562
563
|
]
|
|
563
564
|
}, r.id))
|
|
564
565
|
}),
|
|
565
|
-
/* @__PURE__ */
|
|
566
|
+
/* @__PURE__ */ v("div", {
|
|
566
567
|
className: "border-t border-border p-4 space-y-3 bg-muted/20",
|
|
567
|
-
children: [/* @__PURE__ */
|
|
568
|
+
children: [/* @__PURE__ */ v("div", {
|
|
568
569
|
className: "flex items-center justify-between text-lg font-semibold",
|
|
569
|
-
children: [/* @__PURE__ */
|
|
570
|
+
children: [/* @__PURE__ */ _("span", {
|
|
570
571
|
className: "text-foreground",
|
|
571
|
-
children:
|
|
572
|
-
}), /* @__PURE__ */
|
|
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 } =
|
|
576
|
+
let { price: i } = x(n, e);
|
|
576
577
|
return t + i * r;
|
|
577
578
|
}, 0), e)
|
|
578
579
|
})]
|
|
579
|
-
}), /* @__PURE__ */
|
|
580
|
+
}), /* @__PURE__ */ v("div", {
|
|
580
581
|
className: "flex gap-2",
|
|
581
|
-
children: [/* @__PURE__ */
|
|
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__ */
|
|
587
|
+
}), /* @__PURE__ */ _("button", {
|
|
587
588
|
type: "button",
|
|
588
589
|
onClick: () => {
|
|
589
|
-
|
|
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 {
|
|
602
|
+
export { S as AddonsBrowsePage };
|
|
602
603
|
|
|
603
604
|
//# sourceMappingURL=AddonsBrowsePage.js.map
|