@merit-systems/echo-react-sdk 1.0.2 → 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 +294 -267
  7. package/dist/index.js.map +1 -1
  8. package/package.json +4 -2
package/dist/index.d.ts CHANGED
@@ -47,7 +47,7 @@ export declare interface EchoSignInProps {
47
47
  children?: React.ReactNode;
48
48
  }
49
49
 
50
- export declare function EchoTokenPurchase({ amount, onPurchaseComplete, onError, className, children, }: EchoTokenPurchaseProps): JSX_2.Element;
50
+ export declare function EchoTokenPurchase({ onPurchaseComplete, onError, className, children, }: EchoTokenPurchaseProps): JSX_2.Element;
51
51
 
52
52
  export declare interface EchoTokenPurchaseProps {
53
53
  amount?: number;
package/dist/index.js CHANGED
@@ -7806,7 +7806,6 @@ const CustomAmountInput = ({
7806
7806
  );
7807
7807
  };
7808
7808
  function EchoTokenPurchase({
7809
- amount = 100,
7810
7809
  onPurchaseComplete,
7811
7810
  onError,
7812
7811
  className = "",
@@ -7953,312 +7952,340 @@ function EchoTokenPurchase({
7953
7952
  }
7954
7953
  );
7955
7954
  };
7956
- const Modal = () => /* @__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: "24px 24px 0 24px", marginBottom: "24px" }, 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(
8010
- "div",
8011
- {
8012
- style: {
8013
- marginBottom: "24px",
8014
- padding: "0 24px",
8015
- flex: "1 1 0%",
8016
- display: "flex",
8017
- flexDirection: "column"
8018
- },
8019
- children: [
8020
- freeTierBalance && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
8021
- /* @__PURE__ */ jsx(
8022
- "p",
8023
- {
8024
- style: {
8025
- fontSize: "14px",
8026
- color: "#6b7280",
8027
- margin: "0 0 4px 0",
8028
- fontFamily: "HelveticaNowDisplay, sans-serif"
8029
- },
8030
- children: "Free Tier Available"
8031
- }
8032
- ),
8033
- /* @__PURE__ */ jsx(
8034
- "p",
8035
- {
8036
- style: {
8037
- fontSize: "24px",
8038
- fontWeight: "600",
8039
- color: "#111827",
8040
- margin: "0 0 8px 0",
8041
- fontFamily: "HelveticaNowDisplay, sans-serif"
8042
- },
8043
- children: formatCurrency(calculateAvailableSpend())
8044
- }
8045
- ),
8046
- 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(
8047
8040
  "div",
8048
8041
  {
8049
8042
  style: {
8050
8043
  fontSize: "12px",
8051
8044
  color: "#6b7280",
8052
- fontFamily: "HelveticaNowDisplay, sans-serif"
8045
+ fontFamily: "HelveticaNowDisplay, sans-serif",
8046
+ display: "flex",
8047
+ alignItems: "center",
8048
+ gap: "6px",
8049
+ marginBottom: "4px"
8053
8050
  },
8054
8051
  children: [
8055
- /* @__PURE__ */ jsxs("div", { style: { marginBottom: "6px" }, children: [
8056
- formatCurrency(
8057
- freeTierBalance.userSpendInfo.amountSpent
8058
- ),
8059
- " ",
8060
- "of",
8061
- " ",
8062
- formatCurrency(
8063
- freeTierBalance.userSpendInfo.amountLeft + freeTierBalance.userSpendInfo.amountSpent
8064
- ),
8065
- " ",
8066
- "used"
8067
- ] }),
8068
8052
  /* @__PURE__ */ jsx(
8069
8053
  "div",
8070
8054
  {
8071
8055
  style: {
8072
- width: "100%",
8073
- height: "4px",
8074
- backgroundColor: "#f3f4f6",
8075
- borderRadius: "2px",
8076
- overflow: "hidden"
8077
- },
8078
- children: /* @__PURE__ */ jsx(
8079
- "div",
8080
- {
8081
- style: {
8082
- width: `${Math.min(100, freeTierBalance.userSpendInfo.amountSpent / freeTierBalance.userSpendInfo.spendLimit * 100)}%`,
8083
- height: "100%",
8084
- backgroundColor: "#dc2626"
8085
- }
8086
- }
8087
- )
8056
+ width: "6px",
8057
+ height: "6px",
8058
+ borderRadius: "50%",
8059
+ backgroundColor: "#ef4444"
8060
+ }
8088
8061
  }
8089
- )
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
+ ] })
8090
8080
  ]
8091
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
+ }
8092
8106
  )
8093
8107
  ] }),
8094
- /* @__PURE__ */ jsxs(
8108
+ balance && balance.balance > 0 && /* @__PURE__ */ jsxs(
8095
8109
  "div",
8096
8110
  {
8097
8111
  style: {
8112
+ fontSize: "12px",
8113
+ color: "#6b7280",
8114
+ fontFamily: "HelveticaNowDisplay, sans-serif",
8098
8115
  display: "flex",
8099
8116
  alignItems: "center",
8100
- justifyContent: "space-between"
8117
+ gap: "6px"
8101
8118
  },
8102
8119
  children: [
8103
- /* @__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: [
8104
8164
  /* @__PURE__ */ jsx(
8105
- "p",
8165
+ "button",
8106
8166
  {
8167
+ onClick: () => handlePurchase(10),
8168
+ disabled: isProcessing,
8107
8169
  style: {
8170
+ width: "100%",
8171
+ padding: "12px 16px",
8172
+ backgroundColor: isProcessing ? "#9ca3af" : "#dc2626",
8173
+ color: "white",
8174
+ border: "none",
8175
+ borderRadius: "6px",
8108
8176
  fontSize: "14px",
8109
- color: "#6b7280",
8110
- margin: "0 0 4px 0",
8177
+ fontWeight: "600",
8178
+ cursor: isProcessing ? "not-allowed" : "pointer",
8179
+ transition: "background-color 0.2s ease",
8111
8180
  fontFamily: "HelveticaNowDisplay, sans-serif"
8112
8181
  },
8113
- 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"
8114
8193
  }
8115
8194
  ),
8116
8195
  /* @__PURE__ */ jsx(
8117
- "p",
8196
+ "button",
8118
8197
  {
8198
+ onClick: () => setShowCustomAmount(true),
8119
8199
  style: {
8120
- fontSize: "30px",
8121
- fontWeight: "700",
8122
- color: "#111827",
8123
- 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",
8124
8208
  fontFamily: "HelveticaNowDisplay, sans-serif"
8125
8209
  },
8126
- 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"
8127
8219
  }
8128
8220
  )
8129
- ] }),
8130
- /* @__PURE__ */ jsx(
8131
- "div",
8132
- {
8133
- style: {
8134
- display: "flex",
8135
- flexDirection: "column",
8136
- alignItems: "flex-end",
8137
- gap: "12px"
8138
- },
8139
- children: !showCustomAmount ? /* @__PURE__ */ jsxs(Fragment, { children: [
8140
- /* @__PURE__ */ jsx(
8141
- "button",
8142
- {
8143
- onClick: () => handlePurchase(10),
8144
- disabled: isProcessing,
8145
- style: {
8146
- padding: "10px 24px",
8147
- backgroundColor: isProcessing ? "#9ca3af" : "#dc2626",
8148
- color: "white",
8149
- border: "none",
8150
- borderRadius: "6px",
8151
- fontSize: "14px",
8152
- fontWeight: "500",
8153
- cursor: isProcessing ? "not-allowed" : "pointer",
8154
- transition: "background-color 0.2s ease",
8155
- fontFamily: "HelveticaNowDisplay, sans-serif"
8156
- },
8157
- onMouseEnter: (e) => {
8158
- if (!isProcessing) {
8159
- e.currentTarget.style.backgroundColor = "#b91c1c";
8160
- }
8161
- },
8162
- onMouseLeave: (e) => {
8163
- if (!isProcessing) {
8164
- e.currentTarget.style.backgroundColor = "#dc2626";
8165
- }
8166
- },
8167
- children: isProcessing ? "Processing..." : "Add $10 Credits"
8168
- }
8169
- ),
8170
- /* @__PURE__ */ jsx(
8171
- "button",
8172
- {
8173
- onClick: () => setShowCustomAmount(true),
8174
- style: {
8175
- fontSize: "14px",
8176
- color: "#6b7280",
8177
- backgroundColor: "transparent",
8178
- border: "none",
8179
- textDecoration: "underline",
8180
- cursor: "pointer",
8181
- fontFamily: "HelveticaNowDisplay, sans-serif"
8182
- },
8183
- onMouseEnter: (e) => {
8184
- e.currentTarget.style.color = "#111827";
8185
- },
8186
- onMouseLeave: (e) => {
8187
- e.currentTarget.style.color = "#6b7280";
8188
- },
8189
- children: "Choose different amount"
8190
- }
8191
- )
8192
- ] }) : /* @__PURE__ */ jsx(
8193
- CustomAmountInput,
8194
- {
8195
- onAddCredits: handlePurchase,
8196
- onCancel: () => setShowCustomAmount(false),
8197
- isProcessing
8198
- }
8199
- )
8200
- }
8201
- )
8202
- ]
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"
8203
8279
  }
8204
8280
  )
8205
- ]
8206
- }
8207
- ),
8208
- purchaseError && /* @__PURE__ */ jsx(
8209
- "div",
8210
- {
8211
- style: {
8212
- margin: "0 24px 16px 24px",
8213
- padding: "8px 12px",
8214
- backgroundColor: "#fee2e2",
8215
- color: "#dc2626",
8216
- borderRadius: "6px",
8217
- fontSize: "14px",
8218
- fontFamily: "HelveticaNowDisplay, sans-serif"
8219
- },
8220
- children: purchaseError
8221
- }
8222
- ),
8223
- /* @__PURE__ */ jsx(
8224
- "div",
8225
- {
8226
- style: {
8227
- padding: "16px 24px 24px 24px",
8228
- display: "flex",
8229
- justifyContent: "flex-end",
8230
- marginTop: "auto"
8231
- },
8232
- children: /* @__PURE__ */ jsx(
8233
- "button",
8234
- {
8235
- onClick: closeModal,
8236
- style: {
8237
- padding: "8px 16px",
8238
- backgroundColor: "#f3f4f6",
8239
- color: "#374151",
8240
- border: "none",
8241
- borderRadius: "6px",
8242
- fontSize: "14px",
8243
- cursor: "pointer",
8244
- fontFamily: "HelveticaNowDisplay, sans-serif"
8245
- },
8246
- onMouseEnter: (e) => {
8247
- e.currentTarget.style.backgroundColor = "#e5e7eb";
8248
- },
8249
- onMouseLeave: (e) => {
8250
- e.currentTarget.style.backgroundColor = "#f3f4f6";
8251
- },
8252
- children: "Close"
8253
- }
8254
- )
8255
- }
8256
- )
8257
- ]
8258
- }
8259
- )
8260
- }
8261
- );
8281
+ }
8282
+ )
8283
+ ]
8284
+ }
8285
+ )
8286
+ }
8287
+ );
8288
+ };
8262
8289
  return /* @__PURE__ */ jsxs(Fragment, { children: [
8263
8290
  children ? /* @__PURE__ */ jsx(
8264
8291
  "div",