@merit-systems/echo-react-sdk 1.0.7 → 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.
Files changed (7) hide show
  1. package/dist/echo-react-sdk.umd.js +1 -1
  2. package/dist/echo-react-sdk.umd.js.map +1 -1
  3. package/dist/index.cjs +3 -3
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.js +103 -80
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -10544,61 +10544,37 @@ function EchoSignIn({
10544
10544
  }
10545
10545
  ) });
10546
10546
  }
10547
- return /* @__PURE__ */ jsxs("div", { className: `echo-signin ${className}`, children: [
10548
- children ? /* @__PURE__ */ jsx("div", { onClick: handleSignIn, style: { cursor: "pointer" }, children }) : /* @__PURE__ */ jsxs(
10549
- "button",
10550
- {
10551
- onClick: handleSignIn,
10552
- disabled: isLoading,
10553
- className: "echo-signin-button",
10554
- style: {
10555
- display: "flex",
10556
- alignItems: "center",
10557
- gap: "8px",
10558
- padding: "12px 20px",
10559
- backgroundColor: isLoading ? "#f3f4f6" : isHovered ? "#f1f5f9" : "#ffffff",
10560
- color: isLoading ? "#9ca3af" : "#09090b",
10561
- border: "1px solid #e2e8f0",
10562
- borderRadius: "8px",
10563
- cursor: isLoading ? "not-allowed" : "pointer",
10564
- fontSize: "14px",
10565
- fontWeight: "800",
10566
- fontFamily: "HelveticaNowDisplay, sans-serif",
10567
- transition: "all 0.2s ease",
10568
- boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
10569
- backdropFilter: "blur(8px)"
10570
- },
10571
- onMouseEnter: () => setIsHovered(true),
10572
- onMouseLeave: () => setIsHovered(false),
10573
- children: [
10574
- /* @__PURE__ */ jsx(Logo, { width: 16, height: 16, variant: "light" }),
10575
- /* @__PURE__ */ jsx("span", { children: isLoading ? "Signing in..." : "Sign in" })
10576
- ]
10577
- }
10578
- ),
10579
- error && /* @__PURE__ */ jsx(
10580
- "div",
10581
- {
10582
- className: "echo-signin-error",
10583
- style: {
10584
- marginTop: "12px",
10585
- display: "flex",
10586
- alignItems: "center",
10587
- gap: "8px",
10588
- padding: "12px 16px",
10589
- backgroundColor: "#fef2f2",
10590
- border: "1px solid #fecaca",
10591
- borderRadius: "8px",
10592
- color: "#dc2626",
10593
- fontSize: "14px",
10594
- fontFamily: "HelveticaNowDisplay, sans-serif",
10595
- fontWeight: "800",
10596
- width: "fit-content"
10597
- },
10598
- children: /* @__PURE__ */ jsx("span", { children: error })
10599
- }
10600
- )
10601
- ] });
10547
+ return /* @__PURE__ */ jsx("div", { className: `echo-signin ${className}`, children: children ? /* @__PURE__ */ jsx("div", { onClick: handleSignIn, style: { cursor: "pointer" }, children }) : /* @__PURE__ */ jsxs(
10548
+ "button",
10549
+ {
10550
+ onClick: handleSignIn,
10551
+ disabled: isLoading,
10552
+ className: "echo-signin-button",
10553
+ style: {
10554
+ display: "flex",
10555
+ alignItems: "center",
10556
+ gap: "8px",
10557
+ padding: "12px 20px",
10558
+ backgroundColor: isLoading ? "#f3f4f6" : isHovered ? "#f1f5f9" : "#ffffff",
10559
+ color: isLoading ? "#9ca3af" : "#09090b",
10560
+ border: "1px solid #e2e8f0",
10561
+ borderRadius: "8px",
10562
+ cursor: isLoading ? "not-allowed" : "pointer",
10563
+ fontSize: "14px",
10564
+ fontWeight: "800",
10565
+ fontFamily: "HelveticaNowDisplay, sans-serif",
10566
+ transition: "all 0.2s ease",
10567
+ boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
10568
+ backdropFilter: "blur(8px)"
10569
+ },
10570
+ onMouseEnter: () => setIsHovered(true),
10571
+ onMouseLeave: () => setIsHovered(false),
10572
+ children: [
10573
+ /* @__PURE__ */ jsx(Logo, { width: 16, height: 16, variant: "light" }),
10574
+ /* @__PURE__ */ jsx("span", { children: isLoading ? "Signing in..." : "Sign in" })
10575
+ ]
10576
+ }
10577
+ ) });
10602
10578
  }
10603
10579
  const CustomAmountInput = ({
10604
10580
  onAddCredits,
@@ -10748,8 +10724,10 @@ function EchoTokenPurchase({
10748
10724
  }).format(value);
10749
10725
  };
10750
10726
  const calculateAvailableSpend = () => {
10751
- var _a2;
10752
- 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;
10753
10731
  };
10754
10732
  const handlePurchase = async (purchaseAmount) => {
10755
10733
  if (!isAuthenticated) {
@@ -10948,9 +10926,7 @@ function EchoTokenPurchase({
10948
10926
  margin: "0 0 12px 0",
10949
10927
  fontFamily: "HelveticaNowDisplay, sans-serif"
10950
10928
  },
10951
- children: formatCurrency(
10952
- ((balance == null ? void 0 : balance.balance) || 0) + calculateAvailableSpend()
10953
- )
10929
+ children: formatCurrency(calculateAvailableSpend())
10954
10930
  }
10955
10931
  ),
10956
10932
  /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
@@ -10975,25 +10951,29 @@ function EchoTokenPurchase({
10975
10951
  width: "6px",
10976
10952
  height: "6px",
10977
10953
  borderRadius: "50%",
10978
- backgroundColor: "#ef4444"
10954
+ backgroundColor: "#3b82f6"
10979
10955
  }
10980
10956
  }
10981
10957
  ),
10982
10958
  /* @__PURE__ */ jsxs("span", { children: [
10983
- formatCurrency(calculateAvailableSpend()),
10984
- " Free Tier",
10959
+ formatCurrency(
10960
+ freeTierBalance.userSpendInfo.amountLeft < 0 ? 0 : freeTierBalance.userSpendInfo.amountLeft
10961
+ ),
10962
+ " ",
10963
+ "Free Tier",
10985
10964
  freeTierBalance.userSpendInfo && freeTierBalance.userSpendInfo.spendLimit && /* @__PURE__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: "8px" }, children: [
10965
+ "(",
10986
10966
  formatCurrency(
10987
- freeTierBalance.userSpendInfo.amountSpent
10967
+ freeTierBalance.userSpendInfo.amountSpent > freeTierBalance.userSpendInfo.spendLimit ? freeTierBalance.userSpendInfo.spendLimit : freeTierBalance.userSpendInfo.amountSpent
10988
10968
  ),
10989
10969
  " ",
10990
10970
  "of",
10991
10971
  " ",
10992
10972
  formatCurrency(
10993
- freeTierBalance.userSpendInfo.amountLeft + freeTierBalance.userSpendInfo.amountSpent
10973
+ freeTierBalance.userSpendInfo.spendLimit
10994
10974
  ),
10995
10975
  " ",
10996
- "used"
10976
+ "spent)"
10997
10977
  ] })
10998
10978
  ] })
10999
10979
  ]
@@ -11015,9 +10995,9 @@ function EchoTokenPurchase({
11015
10995
  "div",
11016
10996
  {
11017
10997
  style: {
11018
- 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))}%`,
11019
10999
  height: "100%",
11020
- backgroundColor: "#dc2626"
11000
+ backgroundColor: "#3b82f6"
11021
11001
  }
11022
11002
  }
11023
11003
  )
@@ -11030,25 +11010,68 @@ function EchoTokenPurchase({
11030
11010
  style: {
11031
11011
  fontSize: "12px",
11032
11012
  color: "#6b7280",
11033
- fontFamily: "HelveticaNowDisplay, sans-serif",
11034
- display: "flex",
11035
- alignItems: "center",
11036
- gap: "6px"
11013
+ fontFamily: "HelveticaNowDisplay, sans-serif"
11037
11014
  },
11038
11015
  children: [
11039
- /* @__PURE__ */ jsx(
11016
+ /* @__PURE__ */ jsxs(
11040
11017
  "div",
11041
11018
  {
11042
11019
  style: {
11043
- width: "6px",
11044
- height: "6px",
11045
- borderRadius: "50%",
11046
- backgroundColor: "#3b82f6"
11047
- }
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
+ ]
11048
11050
  }
11049
11051
  ),
11050
- formatCurrency(balance.balance),
11051
- " 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
+ )
11052
11075
  ]
11053
11076
  }
11054
11077
  )