@merit-systems/echo-react-sdk 1.0.8 → 1.0.9

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 CHANGED
@@ -10724,8 +10724,10 @@ function EchoTokenPurchase({
10724
10724
  }).format(value);
10725
10725
  };
10726
10726
  const calculateAvailableSpend = () => {
10727
- var _a2;
10728
- return (((_a2 = freeTierBalance == null ? void 0 : freeTierBalance.userSpendInfo) == null ? void 0 : _a2.amountLeft) || 0) + ((balance == null ? void 0 : balance.balance) || 0);
10727
+ var _a2, _b;
10728
+ const freeTierAmountLeft = (((_a2 = freeTierBalance == null ? void 0 : freeTierBalance.userSpendInfo) == null ? void 0 : _a2.amountLeft) || 0) < 0 ? 0 : ((_b = freeTierBalance == null ? void 0 : freeTierBalance.userSpendInfo) == null ? void 0 : _b.amountLeft) || 0;
10729
+ const balanceAmount = (balance == null ? void 0 : balance.balance) || 0;
10730
+ return freeTierAmountLeft + balanceAmount;
10729
10731
  };
10730
10732
  const handlePurchase = async (purchaseAmount) => {
10731
10733
  if (!isAuthenticated) {
@@ -10949,17 +10951,20 @@ function EchoTokenPurchase({
10949
10951
  width: "6px",
10950
10952
  height: "6px",
10951
10953
  borderRadius: "50%",
10952
- backgroundColor: "#ef4444"
10954
+ backgroundColor: "#3b82f6"
10953
10955
  }
10954
10956
  }
10955
10957
  ),
10956
10958
  /* @__PURE__ */ jsxs("span", { children: [
10957
- formatCurrency(freeTierBalance.userSpendInfo.amountLeft),
10959
+ formatCurrency(
10960
+ freeTierBalance.userSpendInfo.amountLeft < 0 ? 0 : freeTierBalance.userSpendInfo.amountLeft
10961
+ ),
10958
10962
  " ",
10959
10963
  "Free Tier",
10960
10964
  freeTierBalance.userSpendInfo && freeTierBalance.userSpendInfo.spendLimit && /* @__PURE__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: "8px" }, children: [
10965
+ "(",
10961
10966
  formatCurrency(
10962
- freeTierBalance.userSpendInfo.amountSpent
10967
+ freeTierBalance.userSpendInfo.amountSpent > freeTierBalance.userSpendInfo.spendLimit ? freeTierBalance.userSpendInfo.spendLimit : freeTierBalance.userSpendInfo.amountSpent
10963
10968
  ),
10964
10969
  " ",
10965
10970
  "of",
@@ -10968,7 +10973,7 @@ function EchoTokenPurchase({
10968
10973
  freeTierBalance.userSpendInfo.spendLimit
10969
10974
  ),
10970
10975
  " ",
10971
- "used"
10976
+ "spent)"
10972
10977
  ] })
10973
10978
  ] })
10974
10979
  ]
@@ -10990,9 +10995,9 @@ function EchoTokenPurchase({
10990
10995
  "div",
10991
10996
  {
10992
10997
  style: {
10993
- width: `${Math.min(100, freeTierBalance.userSpendInfo.amountSpent / (freeTierBalance.userSpendInfo.spendLimit || 1) * 100)}%`,
10998
+ width: `${Math.max(0, Math.min(100, Math.max(0, freeTierBalance.userSpendInfo.amountLeft) / (freeTierBalance.userSpendInfo.spendLimit || 1) * 100))}%`,
10994
10999
  height: "100%",
10995
- backgroundColor: "#dc2626"
11000
+ backgroundColor: "#3b82f6"
10996
11001
  }
10997
11002
  }
10998
11003
  )
@@ -11005,25 +11010,68 @@ function EchoTokenPurchase({
11005
11010
  style: {
11006
11011
  fontSize: "12px",
11007
11012
  color: "#6b7280",
11008
- fontFamily: "HelveticaNowDisplay, sans-serif",
11009
- display: "flex",
11010
- alignItems: "center",
11011
- gap: "6px"
11013
+ fontFamily: "HelveticaNowDisplay, sans-serif"
11012
11014
  },
11013
11015
  children: [
11014
- /* @__PURE__ */ jsx(
11016
+ /* @__PURE__ */ jsxs(
11015
11017
  "div",
11016
11018
  {
11017
11019
  style: {
11018
- width: "6px",
11019
- height: "6px",
11020
- borderRadius: "50%",
11021
- backgroundColor: "#3b82f6"
11022
- }
11020
+ display: "flex",
11021
+ alignItems: "center",
11022
+ gap: "6px",
11023
+ marginBottom: "4px"
11024
+ },
11025
+ children: [
11026
+ /* @__PURE__ */ jsx(
11027
+ "div",
11028
+ {
11029
+ style: {
11030
+ width: "6px",
11031
+ height: "6px",
11032
+ borderRadius: "50%",
11033
+ backgroundColor: "#dc2626"
11034
+ }
11035
+ }
11036
+ ),
11037
+ /* @__PURE__ */ jsxs("span", { children: [
11038
+ formatCurrency(balance.balance),
11039
+ " Paid Credits",
11040
+ balance.totalSpent && /* @__PURE__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: "8px" }, children: [
11041
+ "(",
11042
+ formatCurrency(balance.totalSpent),
11043
+ " /",
11044
+ " ",
11045
+ formatCurrency(balance.totalPaid),
11046
+ " spent)"
11047
+ ] })
11048
+ ] })
11049
+ ]
11023
11050
  }
11024
11051
  ),
11025
- formatCurrency(balance.balance),
11026
- " Paid Credits"
11052
+ balance.totalPaid > 0 && /* @__PURE__ */ jsx(
11053
+ "div",
11054
+ {
11055
+ style: {
11056
+ width: "100%",
11057
+ height: "4px",
11058
+ backgroundColor: "#e5e7eb",
11059
+ borderRadius: "2px",
11060
+ overflow: "hidden",
11061
+ border: "1px solid #d1d5db"
11062
+ },
11063
+ children: /* @__PURE__ */ jsx(
11064
+ "div",
11065
+ {
11066
+ style: {
11067
+ width: `${Math.max(0, Math.min(100, balance.balance / balance.totalPaid * 100))}%`,
11068
+ height: "100%",
11069
+ backgroundColor: "#dc2626"
11070
+ }
11071
+ }
11072
+ )
11073
+ }
11074
+ )
11027
11075
  ]
11028
11076
  }
11029
11077
  )