@merit-systems/echo-react-sdk 1.0.1 → 1.0.3

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 (8) hide show
  1. package/dist/echo-react-sdk.umd.js +2 -2
  2. package/dist/echo-react-sdk.umd.js.map +1 -1
  3. package/dist/index.cjs +2 -2
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +340 -295
  7. package/dist/index.js.map +1 -1
  8. package/package.json +5 -3
package/dist/index.js CHANGED
@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
3
3
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
4
  var _a;
5
5
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
6
- import React, { createContext, useState, useEffect, useCallback, useContext, useRef } from "react";
6
+ import React, { useEffect, createContext, useState, useCallback, useContext, useRef } from "react";
7
7
  class InvalidTokenError extends Error {
8
8
  }
9
9
  InvalidTokenError.prototype.name = "InvalidTokenError";
@@ -7102,6 +7102,18 @@ var EchoClient = class {
7102
7102
  const response = await this.getSupportedModels();
7103
7103
  return response.models_by_provider;
7104
7104
  }
7105
+ /**
7106
+ * Register a referral code for the authenticated user
7107
+ * @param echoAppId The Echo app ID to register the referral code for
7108
+ * @param code The referral code to register
7109
+ */
7110
+ async registerReferralCode(echoAppId, code) {
7111
+ const request = { echoAppId, code };
7112
+ const response = await this.http.post("/api/v1/user/referral", request).catch((error) => {
7113
+ throw this.handleError(error, "Failed to register referral code");
7114
+ });
7115
+ return response.data;
7116
+ }
7105
7117
  handleError(error, message) {
7106
7118
  var _a2, _b;
7107
7119
  if ((_b = (_a2 = error.response) == null ? void 0 : _a2.data) == null ? void 0 : _b.error) {
@@ -7113,6 +7125,35 @@ var EchoClient = class {
7113
7125
  return new Error(message);
7114
7126
  }
7115
7127
  };
7128
+ function useRegisterReferralCode({
7129
+ appId,
7130
+ client,
7131
+ onSuccess,
7132
+ onError
7133
+ }) {
7134
+ useEffect(() => {
7135
+ const registerReferralCode = async () => {
7136
+ if (typeof window === "undefined") return;
7137
+ const urlParams = new URLSearchParams(window.location.search);
7138
+ const referralCode = urlParams.get("referralCode");
7139
+ if (!referralCode) return;
7140
+ const result = await client.registerReferralCode(appId, referralCode);
7141
+ if (!result) return;
7142
+ urlParams.delete("referralCode");
7143
+ window.history.replaceState(
7144
+ {},
7145
+ "",
7146
+ `${window.location.pathname}${urlParams.toString() ? `?${urlParams.toString()}` : ""}`
7147
+ );
7148
+ if (result.success) {
7149
+ onSuccess == null ? void 0 : onSuccess();
7150
+ } else {
7151
+ onError == null ? void 0 : onError(result.message);
7152
+ }
7153
+ };
7154
+ registerReferralCode();
7155
+ }, [appId, client, onSuccess, onError]);
7156
+ }
7116
7157
  const EchoContext = createContext(
7117
7158
  void 0
7118
7159
  );
@@ -7341,6 +7382,10 @@ function EchoProvider({ config, children }) {
7341
7382
  };
7342
7383
  initializeAuth();
7343
7384
  }, [isClient, userManager, loadUserData]);
7385
+ useRegisterReferralCode({
7386
+ appId: config.appId,
7387
+ client: createClientWithToken(token || "")
7388
+ });
7344
7389
  useEffect(() => {
7345
7390
  if (!userManager) {
7346
7391
  return;
@@ -7348,36 +7393,9 @@ function EchoProvider({ config, children }) {
7348
7393
  const handleUserLoaded = (oidcUser) => {
7349
7394
  loadUserData(oidcUser);
7350
7395
  };
7351
- const handleUserUnloaded = () => {
7352
- console.log("User unloaded, clearing state");
7353
- setUser(null);
7354
- setBalance(null);
7355
- setToken(null);
7356
- };
7357
- const handleAccessTokenExpiring = () => {
7358
- console.log("Access token expiring, refreshing");
7359
- userManager.signinSilent();
7360
- };
7361
- const handleAccessTokenExpired = async () => {
7362
- console.log("Access token expired, reauthenticating");
7363
- await userManager.signinSilent();
7364
- };
7365
- const handleSilentRenewError = async (err) => {
7366
- console.error("Silent renew failed:", err);
7367
- await clearAuth();
7368
- setError("Session renewal failed. Please sign in again.");
7369
- };
7370
7396
  userManager.events.addUserLoaded(handleUserLoaded);
7371
- userManager.events.addUserUnloaded(handleUserUnloaded);
7372
- userManager.events.addAccessTokenExpiring(handleAccessTokenExpiring);
7373
- userManager.events.addAccessTokenExpired(handleAccessTokenExpired);
7374
- userManager.events.addSilentRenewError(handleSilentRenewError);
7375
7397
  return () => {
7376
7398
  userManager.events.removeUserLoaded(handleUserLoaded);
7377
- userManager.events.removeUserUnloaded(handleUserUnloaded);
7378
- userManager.events.removeAccessTokenExpiring(handleAccessTokenExpiring);
7379
- userManager.events.removeAccessTokenExpired(handleAccessTokenExpired);
7380
- userManager.events.removeSilentRenewError(handleSilentRenewError);
7381
7399
  };
7382
7400
  }, [userManager, loadUserData, clearAuth]);
7383
7401
  const contextValue = {
@@ -7788,7 +7806,6 @@ const CustomAmountInput = ({
7788
7806
  );
7789
7807
  };
7790
7808
  function EchoTokenPurchase({
7791
- amount = 100,
7792
7809
  onPurchaseComplete,
7793
7810
  onError,
7794
7811
  className = "",
@@ -7935,312 +7952,340 @@ function EchoTokenPurchase({
7935
7952
  }
7936
7953
  );
7937
7954
  };
7938
- const Modal = () => /* @__PURE__ */ jsx(
7939
- "div",
7940
- {
7941
- style: {
7942
- position: "fixed",
7943
- top: 0,
7944
- left: 0,
7945
- right: 0,
7946
- bottom: 0,
7947
- backgroundColor: "rgba(0, 0, 0, 0.5)",
7948
- display: "flex",
7949
- alignItems: "center",
7950
- justifyContent: "center",
7951
- zIndex: 1e3,
7952
- padding: "16px"
7953
- },
7954
- onClick: (e) => {
7955
- if (e.target === e.currentTarget) {
7956
- closeModal();
7957
- }
7958
- },
7959
- children: /* @__PURE__ */ jsxs(
7960
- "div",
7961
- {
7962
- style: {
7963
- backgroundColor: "#ffffff",
7964
- borderRadius: "12px",
7965
- border: "1px solid #e5e7eb",
7966
- padding: "0",
7967
- width: "100%",
7968
- maxWidth: "450px",
7969
- maxHeight: "90vh",
7970
- overflow: "hidden",
7971
- boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
7972
- fontFamily: "HelveticaNowDisplay, sans-serif",
7973
- display: "flex",
7974
- flexDirection: "column",
7975
- minHeight: "320px"
7976
- },
7977
- children: [
7978
- /* @__PURE__ */ jsx("div", { style: { padding: "24px 24px 0 24px", marginBottom: "24px" }, children: /* @__PURE__ */ jsx(
7979
- "h2",
7980
- {
7981
- style: {
7982
- fontSize: "18px",
7983
- fontWeight: "500",
7984
- color: "#111827",
7985
- margin: 0,
7986
- fontFamily: "HelveticaNowDisplay, sans-serif"
7987
- },
7988
- children: "Credits"
7989
- }
7990
- ) }),
7991
- /* @__PURE__ */ jsxs(
7992
- "div",
7993
- {
7994
- style: {
7995
- marginBottom: "24px",
7996
- padding: "0 24px",
7997
- flex: "1 1 0%",
7998
- display: "flex",
7999
- flexDirection: "column"
8000
- },
8001
- children: [
8002
- freeTierBalance && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
8003
- /* @__PURE__ */ jsx(
8004
- "p",
8005
- {
8006
- style: {
8007
- fontSize: "14px",
8008
- color: "#6b7280",
8009
- margin: "0 0 4px 0",
8010
- fontFamily: "HelveticaNowDisplay, sans-serif"
8011
- },
8012
- children: "Free Tier Available"
8013
- }
8014
- ),
8015
- /* @__PURE__ */ jsx(
8016
- "p",
8017
- {
8018
- style: {
8019
- fontSize: "24px",
8020
- fontWeight: "600",
8021
- color: "#111827",
8022
- margin: "0 0 8px 0",
8023
- fontFamily: "HelveticaNowDisplay, sans-serif"
8024
- },
8025
- children: formatCurrency(calculateAvailableSpend())
8026
- }
8027
- ),
8028
- freeTierBalance.userSpendInfo && freeTierBalance.userSpendInfo.spendLimit && /* @__PURE__ */ jsxs(
7955
+ const Modal = () => {
7956
+ return /* @__PURE__ */ jsx(
7957
+ "div",
7958
+ {
7959
+ style: {
7960
+ position: "fixed",
7961
+ top: 0,
7962
+ left: 0,
7963
+ right: 0,
7964
+ bottom: 0,
7965
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
7966
+ display: "flex",
7967
+ alignItems: "center",
7968
+ justifyContent: "center",
7969
+ zIndex: 1e3,
7970
+ padding: "16px"
7971
+ },
7972
+ onClick: (e) => {
7973
+ if (e.target === e.currentTarget) {
7974
+ closeModal();
7975
+ }
7976
+ },
7977
+ children: /* @__PURE__ */ jsxs(
7978
+ "div",
7979
+ {
7980
+ style: {
7981
+ backgroundColor: "#ffffff",
7982
+ borderRadius: "12px",
7983
+ border: "1px solid #e5e7eb",
7984
+ padding: "0",
7985
+ width: "100%",
7986
+ maxWidth: "450px",
7987
+ maxHeight: "90vh",
7988
+ overflow: "hidden",
7989
+ boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
7990
+ fontFamily: "HelveticaNowDisplay, sans-serif",
7991
+ display: "flex",
7992
+ flexDirection: "column",
7993
+ minHeight: "320px"
7994
+ },
7995
+ children: [
7996
+ /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 0 16px", marginBottom: "12px" }, children: /* @__PURE__ */ jsx(
7997
+ "h2",
7998
+ {
7999
+ style: {
8000
+ fontSize: "18px",
8001
+ fontWeight: "500",
8002
+ color: "#111827",
8003
+ margin: 0,
8004
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8005
+ },
8006
+ children: "Credits"
8007
+ }
8008
+ ) }),
8009
+ /* @__PURE__ */ jsxs("div", { style: { padding: "0 16px", marginBottom: "16px" }, children: [
8010
+ /* @__PURE__ */ jsx(
8011
+ "p",
8012
+ {
8013
+ style: {
8014
+ fontSize: "14px",
8015
+ color: "#6b7280",
8016
+ margin: "0 0 4px 0",
8017
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8018
+ },
8019
+ children: "Total Available"
8020
+ }
8021
+ ),
8022
+ /* @__PURE__ */ jsx(
8023
+ "p",
8024
+ {
8025
+ style: {
8026
+ fontSize: "28px",
8027
+ fontWeight: "700",
8028
+ color: "#111827",
8029
+ margin: "0 0 12px 0",
8030
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8031
+ },
8032
+ children: formatCurrency(
8033
+ ((balance == null ? void 0 : balance.balance) || 0) + calculateAvailableSpend()
8034
+ )
8035
+ }
8036
+ ),
8037
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
8038
+ freeTierBalance && calculateAvailableSpend() > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
8039
+ /* @__PURE__ */ jsxs(
8029
8040
  "div",
8030
8041
  {
8031
8042
  style: {
8032
8043
  fontSize: "12px",
8033
8044
  color: "#6b7280",
8034
- fontFamily: "HelveticaNowDisplay, sans-serif"
8045
+ fontFamily: "HelveticaNowDisplay, sans-serif",
8046
+ display: "flex",
8047
+ alignItems: "center",
8048
+ gap: "6px",
8049
+ marginBottom: "4px"
8035
8050
  },
8036
8051
  children: [
8037
- /* @__PURE__ */ jsxs("div", { style: { marginBottom: "6px" }, children: [
8038
- formatCurrency(
8039
- freeTierBalance.userSpendInfo.amountSpent
8040
- ),
8041
- " ",
8042
- "of",
8043
- " ",
8044
- formatCurrency(
8045
- freeTierBalance.userSpendInfo.amountLeft + freeTierBalance.userSpendInfo.amountSpent
8046
- ),
8047
- " ",
8048
- "used"
8049
- ] }),
8050
8052
  /* @__PURE__ */ jsx(
8051
8053
  "div",
8052
8054
  {
8053
8055
  style: {
8054
- width: "100%",
8055
- height: "4px",
8056
- backgroundColor: "#f3f4f6",
8057
- borderRadius: "2px",
8058
- overflow: "hidden"
8059
- },
8060
- children: /* @__PURE__ */ jsx(
8061
- "div",
8062
- {
8063
- style: {
8064
- width: `${Math.min(100, freeTierBalance.userSpendInfo.amountSpent / freeTierBalance.userSpendInfo.spendLimit * 100)}%`,
8065
- height: "100%",
8066
- backgroundColor: "#dc2626"
8067
- }
8068
- }
8069
- )
8056
+ width: "6px",
8057
+ height: "6px",
8058
+ borderRadius: "50%",
8059
+ backgroundColor: "#ef4444"
8060
+ }
8070
8061
  }
8071
- )
8062
+ ),
8063
+ /* @__PURE__ */ jsxs("span", { children: [
8064
+ formatCurrency(calculateAvailableSpend()),
8065
+ " Free Tier",
8066
+ freeTierBalance.userSpendInfo && freeTierBalance.userSpendInfo.spendLimit && /* @__PURE__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: "8px" }, children: [
8067
+ formatCurrency(
8068
+ freeTierBalance.userSpendInfo.amountSpent
8069
+ ),
8070
+ " ",
8071
+ "of",
8072
+ " ",
8073
+ formatCurrency(
8074
+ freeTierBalance.userSpendInfo.amountLeft + freeTierBalance.userSpendInfo.amountSpent
8075
+ ),
8076
+ " ",
8077
+ "used"
8078
+ ] })
8079
+ ] })
8072
8080
  ]
8073
8081
  }
8082
+ ),
8083
+ freeTierBalance.userSpendInfo && freeTierBalance.userSpendInfo.spendLimit && /* @__PURE__ */ jsx(
8084
+ "div",
8085
+ {
8086
+ style: {
8087
+ width: "100%",
8088
+ height: "4px",
8089
+ backgroundColor: "#e5e7eb",
8090
+ borderRadius: "2px",
8091
+ overflow: "hidden",
8092
+ marginBottom: "4px",
8093
+ border: "1px solid #d1d5db"
8094
+ },
8095
+ children: /* @__PURE__ */ jsx(
8096
+ "div",
8097
+ {
8098
+ style: {
8099
+ width: `${Math.min(100, freeTierBalance.userSpendInfo.amountSpent / (freeTierBalance.userSpendInfo.spendLimit || 1) * 100)}%`,
8100
+ height: "100%",
8101
+ backgroundColor: "#dc2626"
8102
+ }
8103
+ }
8104
+ )
8105
+ }
8074
8106
  )
8075
8107
  ] }),
8076
- /* @__PURE__ */ jsxs(
8108
+ balance && balance.balance > 0 && /* @__PURE__ */ jsxs(
8077
8109
  "div",
8078
8110
  {
8079
8111
  style: {
8112
+ fontSize: "12px",
8113
+ color: "#6b7280",
8114
+ fontFamily: "HelveticaNowDisplay, sans-serif",
8080
8115
  display: "flex",
8081
8116
  alignItems: "center",
8082
- justifyContent: "space-between"
8117
+ gap: "6px"
8083
8118
  },
8084
8119
  children: [
8085
- /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 0%", minWidth: "0" }, children: [
8120
+ /* @__PURE__ */ jsx(
8121
+ "div",
8122
+ {
8123
+ style: {
8124
+ width: "6px",
8125
+ height: "6px",
8126
+ borderRadius: "50%",
8127
+ backgroundColor: "#3b82f6"
8128
+ }
8129
+ }
8130
+ ),
8131
+ formatCurrency(balance.balance),
8132
+ " Paid Credits"
8133
+ ]
8134
+ }
8135
+ )
8136
+ ] })
8137
+ ] }),
8138
+ /* @__PURE__ */ jsxs(
8139
+ "div",
8140
+ {
8141
+ style: {
8142
+ padding: "0 16px 16px 16px",
8143
+ borderTop: "1px solid #f3f4f6",
8144
+ paddingTop: "16px"
8145
+ },
8146
+ children: [
8147
+ /* @__PURE__ */ jsx(
8148
+ "p",
8149
+ {
8150
+ style: {
8151
+ fontSize: "14px",
8152
+ color: "#6b7280",
8153
+ margin: "0 0 12px 0",
8154
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8155
+ },
8156
+ children: "Add Credits"
8157
+ }
8158
+ ),
8159
+ !showCustomAmount ? /* @__PURE__ */ jsxs(
8160
+ "div",
8161
+ {
8162
+ style: { display: "flex", flexDirection: "column", gap: "8px" },
8163
+ children: [
8086
8164
  /* @__PURE__ */ jsx(
8087
- "p",
8165
+ "button",
8088
8166
  {
8167
+ onClick: () => handlePurchase(10),
8168
+ disabled: isProcessing,
8089
8169
  style: {
8170
+ width: "100%",
8171
+ padding: "12px 16px",
8172
+ backgroundColor: isProcessing ? "#9ca3af" : "#dc2626",
8173
+ color: "white",
8174
+ border: "none",
8175
+ borderRadius: "6px",
8090
8176
  fontSize: "14px",
8091
- color: "#6b7280",
8092
- margin: "0 0 4px 0",
8177
+ fontWeight: "600",
8178
+ cursor: isProcessing ? "not-allowed" : "pointer",
8179
+ transition: "background-color 0.2s ease",
8093
8180
  fontFamily: "HelveticaNowDisplay, sans-serif"
8094
8181
  },
8095
- children: "Paid Credits Balance"
8182
+ onMouseEnter: (e) => {
8183
+ if (!isProcessing) {
8184
+ e.currentTarget.style.backgroundColor = "#b91c1c";
8185
+ }
8186
+ },
8187
+ onMouseLeave: (e) => {
8188
+ if (!isProcessing) {
8189
+ e.currentTarget.style.backgroundColor = "#dc2626";
8190
+ }
8191
+ },
8192
+ children: isProcessing ? "Processing..." : "Add $10 Credits"
8096
8193
  }
8097
8194
  ),
8098
8195
  /* @__PURE__ */ jsx(
8099
- "p",
8196
+ "button",
8100
8197
  {
8198
+ onClick: () => setShowCustomAmount(true),
8101
8199
  style: {
8102
- fontSize: "30px",
8103
- fontWeight: "700",
8104
- color: "#111827",
8105
- margin: 0,
8200
+ width: "100%",
8201
+ padding: "8px 16px",
8202
+ fontSize: "14px",
8203
+ color: "#6b7280",
8204
+ backgroundColor: "transparent",
8205
+ border: "1px solid #e5e7eb",
8206
+ borderRadius: "6px",
8207
+ cursor: "pointer",
8106
8208
  fontFamily: "HelveticaNowDisplay, sans-serif"
8107
8209
  },
8108
- children: balance ? formatCurrency(balance.balance) : "$0.00"
8210
+ onMouseEnter: (e) => {
8211
+ e.currentTarget.style.color = "#111827";
8212
+ e.currentTarget.style.borderColor = "#d1d5db";
8213
+ },
8214
+ onMouseLeave: (e) => {
8215
+ e.currentTarget.style.color = "#6b7280";
8216
+ e.currentTarget.style.borderColor = "#e5e7eb";
8217
+ },
8218
+ children: "Choose different amount"
8109
8219
  }
8110
8220
  )
8111
- ] }),
8112
- /* @__PURE__ */ jsx(
8113
- "div",
8114
- {
8115
- style: {
8116
- display: "flex",
8117
- flexDirection: "column",
8118
- alignItems: "flex-end",
8119
- gap: "12px"
8120
- },
8121
- children: !showCustomAmount ? /* @__PURE__ */ jsxs(Fragment, { children: [
8122
- /* @__PURE__ */ jsx(
8123
- "button",
8124
- {
8125
- onClick: () => handlePurchase(10),
8126
- disabled: isProcessing,
8127
- style: {
8128
- padding: "10px 24px",
8129
- backgroundColor: isProcessing ? "#9ca3af" : "#dc2626",
8130
- color: "white",
8131
- border: "none",
8132
- borderRadius: "6px",
8133
- fontSize: "14px",
8134
- fontWeight: "500",
8135
- cursor: isProcessing ? "not-allowed" : "pointer",
8136
- transition: "background-color 0.2s ease",
8137
- fontFamily: "HelveticaNowDisplay, sans-serif"
8138
- },
8139
- onMouseEnter: (e) => {
8140
- if (!isProcessing) {
8141
- e.currentTarget.style.backgroundColor = "#b91c1c";
8142
- }
8143
- },
8144
- onMouseLeave: (e) => {
8145
- if (!isProcessing) {
8146
- e.currentTarget.style.backgroundColor = "#dc2626";
8147
- }
8148
- },
8149
- children: isProcessing ? "Processing..." : "Add $10 Credits"
8150
- }
8151
- ),
8152
- /* @__PURE__ */ jsx(
8153
- "button",
8154
- {
8155
- onClick: () => setShowCustomAmount(true),
8156
- style: {
8157
- fontSize: "14px",
8158
- color: "#6b7280",
8159
- backgroundColor: "transparent",
8160
- border: "none",
8161
- textDecoration: "underline",
8162
- cursor: "pointer",
8163
- fontFamily: "HelveticaNowDisplay, sans-serif"
8164
- },
8165
- onMouseEnter: (e) => {
8166
- e.currentTarget.style.color = "#111827";
8167
- },
8168
- onMouseLeave: (e) => {
8169
- e.currentTarget.style.color = "#6b7280";
8170
- },
8171
- children: "Choose different amount"
8172
- }
8173
- )
8174
- ] }) : /* @__PURE__ */ jsx(
8175
- CustomAmountInput,
8176
- {
8177
- onAddCredits: handlePurchase,
8178
- onCancel: () => setShowCustomAmount(false),
8179
- isProcessing
8180
- }
8181
- )
8182
- }
8183
- )
8184
- ]
8221
+ ]
8222
+ }
8223
+ ) : /* @__PURE__ */ jsx(
8224
+ CustomAmountInput,
8225
+ {
8226
+ onAddCredits: handlePurchase,
8227
+ onCancel: () => setShowCustomAmount(false),
8228
+ isProcessing
8229
+ }
8230
+ )
8231
+ ]
8232
+ }
8233
+ ),
8234
+ purchaseError && /* @__PURE__ */ jsx(
8235
+ "div",
8236
+ {
8237
+ style: {
8238
+ margin: "0 16px 12px 16px",
8239
+ padding: "8px 12px",
8240
+ backgroundColor: "#fee2e2",
8241
+ color: "#dc2626",
8242
+ borderRadius: "6px",
8243
+ fontSize: "14px",
8244
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8245
+ },
8246
+ children: purchaseError
8247
+ }
8248
+ ),
8249
+ /* @__PURE__ */ jsx(
8250
+ "div",
8251
+ {
8252
+ style: {
8253
+ padding: "12px 16px",
8254
+ display: "flex",
8255
+ justifyContent: "flex-end",
8256
+ borderTop: "1px solid #f3f4f6"
8257
+ },
8258
+ children: /* @__PURE__ */ jsx(
8259
+ "button",
8260
+ {
8261
+ onClick: closeModal,
8262
+ style: {
8263
+ padding: "8px 16px",
8264
+ backgroundColor: "#f3f4f6",
8265
+ color: "#374151",
8266
+ border: "none",
8267
+ borderRadius: "6px",
8268
+ fontSize: "14px",
8269
+ cursor: "pointer",
8270
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8271
+ },
8272
+ onMouseEnter: (e) => {
8273
+ e.currentTarget.style.backgroundColor = "#e5e7eb";
8274
+ },
8275
+ onMouseLeave: (e) => {
8276
+ e.currentTarget.style.backgroundColor = "#f3f4f6";
8277
+ },
8278
+ children: "Close"
8185
8279
  }
8186
8280
  )
8187
- ]
8188
- }
8189
- ),
8190
- purchaseError && /* @__PURE__ */ jsx(
8191
- "div",
8192
- {
8193
- style: {
8194
- margin: "0 24px 16px 24px",
8195
- padding: "8px 12px",
8196
- backgroundColor: "#fee2e2",
8197
- color: "#dc2626",
8198
- borderRadius: "6px",
8199
- fontSize: "14px",
8200
- fontFamily: "HelveticaNowDisplay, sans-serif"
8201
- },
8202
- children: purchaseError
8203
- }
8204
- ),
8205
- /* @__PURE__ */ jsx(
8206
- "div",
8207
- {
8208
- style: {
8209
- padding: "16px 24px 24px 24px",
8210
- display: "flex",
8211
- justifyContent: "flex-end",
8212
- marginTop: "auto"
8213
- },
8214
- children: /* @__PURE__ */ jsx(
8215
- "button",
8216
- {
8217
- onClick: closeModal,
8218
- style: {
8219
- padding: "8px 16px",
8220
- backgroundColor: "#f3f4f6",
8221
- color: "#374151",
8222
- border: "none",
8223
- borderRadius: "6px",
8224
- fontSize: "14px",
8225
- cursor: "pointer",
8226
- fontFamily: "HelveticaNowDisplay, sans-serif"
8227
- },
8228
- onMouseEnter: (e) => {
8229
- e.currentTarget.style.backgroundColor = "#e5e7eb";
8230
- },
8231
- onMouseLeave: (e) => {
8232
- e.currentTarget.style.backgroundColor = "#f3f4f6";
8233
- },
8234
- children: "Close"
8235
- }
8236
- )
8237
- }
8238
- )
8239
- ]
8240
- }
8241
- )
8242
- }
8243
- );
8281
+ }
8282
+ )
8283
+ ]
8284
+ }
8285
+ )
8286
+ }
8287
+ );
8288
+ };
8244
8289
  return /* @__PURE__ */ jsxs(Fragment, { children: [
8245
8290
  children ? /* @__PURE__ */ jsx(
8246
8291
  "div",