subos-frontend 1.0.111 → 1.0.113
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/index.js +52 -27
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +52 -27
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +37 -0
- package/dist/types/components/plans/PlanCard.d.ts +1 -0
- package/dist/types/components/plans/PlanCard.d.ts.map +1 -1
- package/dist/types/components/plans/PlansGrid.d.ts.map +1 -1
- package/dist/types/components/subscription/ScheduledPlanNotification.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1485,26 +1485,27 @@ var PlanCard = ({
|
|
|
1485
1485
|
}
|
|
1486
1486
|
);
|
|
1487
1487
|
};
|
|
1488
|
-
var
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1488
|
+
var PlanCardSkeleton = () => {
|
|
1489
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-gray-200 rounded-lg p-6 flex flex-col h-full bg-white min-h-[400px]", children: [
|
|
1490
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
|
|
1491
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-7 w-2/3 bg-gray-200 animate-pulse rounded mb-3" }),
|
|
1492
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 mb-4", children: [
|
|
1493
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-full bg-gray-100 animate-pulse rounded" }),
|
|
1494
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-5/6 bg-gray-100 animate-pulse rounded" })
|
|
1495
|
+
] }),
|
|
1496
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
|
|
1497
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-20 bg-gray-200 animate-pulse rounded" }),
|
|
1498
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-24 bg-gray-100 animate-pulse rounded" })
|
|
1499
|
+
] })
|
|
1500
|
+
] }),
|
|
1501
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-gray-100" }) }),
|
|
1502
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow space-y-4 mb-6", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
|
|
1503
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 bg-gray-200 animate-pulse rounded-full" }),
|
|
1504
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-4 bg-gray-100 animate-pulse rounded ${i % 2 === 0 ? "w-full" : "w-4/5"}` })
|
|
1505
|
+
] }, i)) }),
|
|
1506
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-full bg-gray-200 animate-pulse rounded-md" }) })
|
|
1507
|
+
] });
|
|
1508
|
+
};
|
|
1508
1509
|
var PlansGrid = ({
|
|
1509
1510
|
plans,
|
|
1510
1511
|
selectedPlan,
|
|
@@ -1517,7 +1518,7 @@ var PlansGrid = ({
|
|
|
1517
1518
|
planFeatures
|
|
1518
1519
|
}) => {
|
|
1519
1520
|
if (loading) {
|
|
1520
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "
|
|
1521
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:grid lg:grid-cols-3 gap-4 w-full flex flex-wrap", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(PlanCardSkeleton, {}, i)) });
|
|
1521
1522
|
}
|
|
1522
1523
|
if (error) {
|
|
1523
1524
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-red-50 border border-red-200 text-red-700 rounded-md", children: error });
|
|
@@ -2031,7 +2032,7 @@ var clearSelectedPlan = () => {
|
|
|
2031
2032
|
var unregisterClearSelectedPlan = () => {
|
|
2032
2033
|
globalClearSelectedPlan = null;
|
|
2033
2034
|
};
|
|
2034
|
-
var
|
|
2035
|
+
var DownloadIcon = ({ className = "w-4 h-4" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
|
|
2035
2036
|
var getStatusColor = (status, customColors) => {
|
|
2036
2037
|
if (customColors && customColors[status.toLowerCase()]) {
|
|
2037
2038
|
return customColors[status.toLowerCase()];
|
|
@@ -2146,7 +2147,7 @@ var TransactionItem = ({
|
|
|
2146
2147
|
className: "inline-flex items-center justify-center p-0 text-blue-600 hover:text-blue-800 transition-colors border-0 bg-transparent focus:outline-none focus:ring-0 focus-visible:outline-none active:outline-none",
|
|
2147
2148
|
title: "Download Invoice",
|
|
2148
2149
|
"aria-label": "Download Invoice",
|
|
2149
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2150
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, { className: "w-4 h-4" })
|
|
2150
2151
|
}
|
|
2151
2152
|
)
|
|
2152
2153
|
] })
|
|
@@ -3030,6 +3031,26 @@ var SubscriptionCancelModal = ({
|
|
|
3030
3031
|
] })
|
|
3031
3032
|
] });
|
|
3032
3033
|
};
|
|
3034
|
+
var SearchIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
|
|
3035
|
+
var FilterIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) });
|
|
3036
|
+
var TrendingUpIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" }) });
|
|
3037
|
+
var LoadingSpinner = ({ className = "w-8 h-8" }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: `${className} animate-spin`, fill: "none", viewBox: "0 0 24 24", children: [
|
|
3038
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
3039
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
|
|
3040
|
+
] });
|
|
3041
|
+
var CheckCircleIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) });
|
|
3042
|
+
var AddIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) });
|
|
3043
|
+
var CreditCardIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) });
|
|
3044
|
+
var DeleteIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) });
|
|
3045
|
+
var DownloadIcon2 = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
|
|
3046
|
+
var DashboardIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) });
|
|
3047
|
+
var EmailIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) });
|
|
3048
|
+
var ReceiptIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5l-5-5-4 4-3-3m6-6V4a2 2 0 00-2-2H5a2 2 0 00-2 2v16l3-3 3 3 3-3 3 3z" }) });
|
|
3049
|
+
var StarBorderIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" }) });
|
|
3050
|
+
var UpgradeIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 10l7-7m0 0l7 7m-7-7v18" }) });
|
|
3051
|
+
var CancelIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
|
|
3052
|
+
var AddCardIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6v6m0 0v6m0-6h6m-6 0H6m12-3h3a3 3 0 013 3v8a3 3 0 01-3 3H6a3 3 0 01-3-3v-8a3 3 0 013-3h3" }) });
|
|
3053
|
+
var WarningIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) });
|
|
3033
3054
|
var ScheduledPlanNotification = ({
|
|
3034
3055
|
subscription,
|
|
3035
3056
|
className = ""
|
|
@@ -3038,13 +3059,17 @@ var ScheduledPlanNotification = ({
|
|
|
3038
3059
|
return null;
|
|
3039
3060
|
}
|
|
3040
3061
|
const formatInterval = (interval) => {
|
|
3062
|
+
if (!interval) return "";
|
|
3041
3063
|
return interval.charAt(0).toUpperCase() + interval.slice(1).toLowerCase();
|
|
3042
3064
|
};
|
|
3043
3065
|
const nextPlan = subscription.nextMembership.plan;
|
|
3044
|
-
|
|
3066
|
+
if (!nextPlan || !nextPlan.name) {
|
|
3067
|
+
return null;
|
|
3068
|
+
}
|
|
3069
|
+
const metrics = nextPlan.charges && Array.isArray(nextPlan.charges) && nextPlan.charges.length > 0 ? `(${nextPlan.charges.map(
|
|
3045
3070
|
(charge) => {
|
|
3046
|
-
var _a, _b;
|
|
3047
|
-
return `${charge.billableMetric.name}: ${((
|
|
3071
|
+
var _a, _b, _c;
|
|
3072
|
+
return `${((_a = charge.billableMetric) == null ? void 0 : _a.name) || "Metric"}: ${((_c = (_b = charge.properties) == null ? void 0 : _b.units) == null ? void 0 : _c.toLocaleString()) || 0}`;
|
|
3048
3073
|
}
|
|
3049
3074
|
).join(", ")}) ` : "";
|
|
3050
3075
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md flex items-start gap-3 ${className}`, children: [
|
|
@@ -3769,7 +3794,7 @@ exports.CurrencyProvider = CurrencyProvider;
|
|
|
3769
3794
|
exports.DashboardIcon = DashboardIcon;
|
|
3770
3795
|
exports.DashboardPage = DashboardPage;
|
|
3771
3796
|
exports.DeleteIcon = DeleteIcon;
|
|
3772
|
-
exports.DownloadIcon =
|
|
3797
|
+
exports.DownloadIcon = DownloadIcon2;
|
|
3773
3798
|
exports.EmailIcon = EmailIcon;
|
|
3774
3799
|
exports.FilterIcon = FilterIcon;
|
|
3775
3800
|
exports.GracePeriodNotification = GracePeriodNotification;
|