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

package/dist/index.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React2, { useState, useCallback, useEffect, createContext, useContext, useRef } from "react";
+import React2, { useState, useCallback, useEffect, createContext, useMemo, useContext, useRef } from "react";
 class InvalidTokenError extends Error {
 }
 InvalidTokenError.prototype.name = "InvalidTokenError";
@@ -9067,19 +9067,18 @@ function useEchoBalance(echoClient, appId) {
   };
 }
 function useEchoClient({ apiUrl }) {
-  var _a2;
+  var _a2, _b;
   const auth = useAuth();
   const [client, setClient] = useState(null);
   useEffect(() => {
-    var _a3;
-    if (!((_a3 = auth.user) == null ? void 0 : _a3.access_token)) {
+    if (!auth.isAuthenticated || !auth.user) {
       setClient(null);
       return;
     }
     const tokenProvider = new OAuthTokenProvider({
       getTokenFn: () => {
-        var _a4;
-        return Promise.resolve(((_a4 = auth.user) == null ? void 0 : _a4.access_token) || null);
+        var _a3;
+        return Promise.resolve(((_a3 = auth.user) == null ? void 0 : _a3.access_token) || null);
       },
       refreshTokenFn: async () => {
         await auth.signinSilent();
@@ -9097,7 +9096,14 @@ function useEchoClient({ apiUrl }) {
     return () => {
       setClient(null);
     };
-  }, [apiUrl, (_a2 = auth.user) == null ? void 0 : _a2.access_token, auth.signinSilent, auth.signoutSilent]);
+  }, [
+    apiUrl,
+    auth.isAuthenticated,
+    (_b = (_a2 = auth.user) == null ? void 0 : _a2.profile) == null ? void 0 : _b.sub,
+    // Only recreate if user ID changes
+    auth.signinSilent,
+    auth.signoutSilent
+  ]);
   return client;
 }
 function useEchoPayments(echoClient) {
@@ -9135,6 +9141,9 @@ function useEchoPayments(echoClient) {
   };
 }
 const EchoContext = createContext(null);
+const EchoRefreshContext = createContext(
+  null
+);
 function EchoProviderInternal({ config, children }) {
   var _a2, _b, _c;
   const auth = useAuth();
@@ -9167,25 +9176,51 @@ function EchoProviderInternal({ config, children }) {
     return ((_a3 = auth.user) == null ? void 0 : _a3.access_token) || null;
   }, [(_b = auth.user) == null ? void 0 : _b.access_token]);
   const combinedError = ((_c = auth.error) == null ? void 0 : _c.message) || balanceError || paymentError || null;
-  const combinedLoading = auth.isLoading || balanceLoading || paymentLoading;
-  const contextValue = {
-    user: echoUser || null,
-    rawUser: user,
-    balance,
-    freeTierBalance,
-    isAuthenticated: auth.isAuthenticated,
-    isLoading: combinedLoading,
-    error: combinedError,
-    token,
-    echoClient,
-    signIn: auth.signinRedirect,
-    signOut: clearAuth,
-    refreshBalance,
-    createPaymentLink,
-    getToken,
-    clearAuth
-  };
-  return /* @__PURE__ */ jsx(EchoContext.Provider, { value: contextValue, children });
+  const isInitialAuthLoading = auth.isLoading && !auth.isAuthenticated;
+  const isTokenRefreshing = auth.isLoading && auth.isAuthenticated;
+  const combinedLoading = isInitialAuthLoading || balanceLoading || paymentLoading;
+  const contextValue = useMemo(
+    () => ({
+      user: echoUser || null,
+      rawUser: user,
+      balance,
+      freeTierBalance,
+      isAuthenticated: auth.isAuthenticated,
+      isLoading: combinedLoading,
+      error: combinedError,
+      token,
+      echoClient,
+      signIn: auth.signinRedirect,
+      signOut: clearAuth,
+      refreshBalance,
+      createPaymentLink,
+      getToken,
+      clearAuth
+    }),
+    [
+      echoUser,
+      user,
+      balance,
+      freeTierBalance,
+      auth.isAuthenticated,
+      combinedLoading,
+      combinedError,
+      token,
+      echoClient,
+      auth.signinRedirect,
+      clearAuth,
+      refreshBalance,
+      createPaymentLink,
+      getToken
+    ]
+  );
+  const refreshContextValue = useMemo(
+    () => ({
+      isRefreshing: isTokenRefreshing
+    }),
+    [isTokenRefreshing]
+  );
+  return /* @__PURE__ */ jsx(EchoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(EchoRefreshContext.Provider, { value: refreshContextValue, children }) });
 }
 function EchoProvider({ config, children }) {
   const [isClient, setIsClient] = useState(false);
@@ -10724,8 +10759,10 @@ function EchoTokenPurchase({
     }).format(value);
   };
   const calculateAvailableSpend = () => {
-    var _a2;
-    return (((_a2 = freeTierBalance == null ? void 0 : freeTierBalance.userSpendInfo) == null ? void 0 : _a2.amountLeft) || 0) + ((balance == null ? void 0 : balance.balance) || 0);
+    var _a2, _b;
+    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;
+    const balanceAmount = (balance == null ? void 0 : balance.balance) || 0;
+    return freeTierAmountLeft + balanceAmount;
   };
   const handlePurchase = async (purchaseAmount) => {
     if (!isAuthenticated) {
@@ -10949,17 +10986,20 @@ function EchoTokenPurchase({
                                 width: "6px",
                                 height: "6px",
                                 borderRadius: "50%",
-                                backgroundColor: "#ef4444"
+                                backgroundColor: "#3b82f6"
                               }
                             }
                           ),
                           /* @__PURE__ */ jsxs("span", { children: [
-                            formatCurrency(freeTierBalance.userSpendInfo.amountLeft),
+                            formatCurrency(
+                              freeTierBalance.userSpendInfo.amountLeft < 0 ? 0 : freeTierBalance.userSpendInfo.amountLeft
+                            ),
                             " ",
                             "Free Tier",
                             freeTierBalance.userSpendInfo && freeTierBalance.userSpendInfo.spendLimit && /* @__PURE__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: "8px" }, children: [
+                              "(",
                               formatCurrency(
-                                freeTierBalance.userSpendInfo.amountSpent
+                                freeTierBalance.userSpendInfo.amountSpent > freeTierBalance.userSpendInfo.spendLimit ? freeTierBalance.userSpendInfo.spendLimit : freeTierBalance.userSpendInfo.amountSpent
                               ),
                               " ",
                               "of",
@@ -10968,7 +11008,7 @@ function EchoTokenPurchase({
                                 freeTierBalance.userSpendInfo.spendLimit
                               ),
                               " ",
-                              "used"
+                              "spent)"
                             ] })
                           ] })
                         ]
@@ -10990,9 +11030,9 @@ function EchoTokenPurchase({
                           "div",
                           {
                             style: {
-                              width: `${Math.min(100, freeTierBalance.userSpendInfo.amountSpent / (freeTierBalance.userSpendInfo.spendLimit || 1) * 100)}%`,
+                              width: `${Math.max(0, Math.min(100, Math.max(0, freeTierBalance.userSpendInfo.amountLeft) / (freeTierBalance.userSpendInfo.spendLimit || 1) * 100))}%`,
                               height: "100%",
-                              backgroundColor: "#dc2626"
+                              backgroundColor: "#3b82f6"
                             }
                           }
                         )
@@ -11005,25 +11045,68 @@ function EchoTokenPurchase({
                       style: {
                         fontSize: "12px",
                         color: "#6b7280",
-                        fontFamily: "HelveticaNowDisplay, sans-serif",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "6px"
+                        fontFamily: "HelveticaNowDisplay, sans-serif"
                       },
                       children: [
-                        /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsxs(
                           "div",
                           {
                             style: {
-                              width: "6px",
-                              height: "6px",
-                              borderRadius: "50%",
-                              backgroundColor: "#3b82f6"
-                            }
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "6px",
+                              marginBottom: "4px"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: {
+                                    width: "6px",
+                                    height: "6px",
+                                    borderRadius: "50%",
+                                    backgroundColor: "#dc2626"
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs("span", { children: [
+                                formatCurrency(balance.balance),
+                                " Paid Credits",
+                                balance.totalSpent && /* @__PURE__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: "8px" }, children: [
+                                  "(",
+                                  formatCurrency(balance.totalSpent),
+                                  " /",
+                                  " ",
+                                  formatCurrency(balance.totalPaid),
+                                  " spent)"
+                                ] })
+                              ] })
+                            ]
                           }
                         ),
-                        formatCurrency(balance.balance),
-                        " Paid Credits"
+                        balance.totalPaid > 0 && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              width: "100%",
+                              height: "4px",
+                              backgroundColor: "#e5e7eb",
+                              borderRadius: "2px",
+                              overflow: "hidden",
+                              border: "1px solid #d1d5db"
+                            },
+                            children: /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  width: `${Math.max(0, Math.min(100, balance.balance / balance.totalPaid * 100))}%`,
+                                  height: "100%",
+                                  backgroundColor: "#dc2626"
+                                }
+                              }
+                            )
+                          }
+                        )
                       ]
                     }
                   )