@zerohash-sdk/fund-react 1.7.0 → 1.8.0

package/dist/index.d.ts

@@ -163,6 +163,12 @@ declare interface FundProps {
      * ```
      */
     theme?: Theme;
+    /**
+     * Live branding override (`{ theme?, colors?: { accent? } }`) for previewing an
+     * unsaved draft theme (e.g. from a host theme editor). Pushed into the SDK and
+     * applied over the JWT `theme` claim, per-field. Mainly for internal preview UIs.
+     */
+    branding?: unknown;
     /**
      * Runs the SDK in Pay mode.
      *

package/dist/index.js

@@ -1,4 +1,4 @@
-import { jsxs as W, jsx as _ } from "react/jsx-runtime";
+import { jsxs as W, jsx as y } from "react/jsx-runtime";
 import j, { useEffect as B, useState as z, useCallback as D, useRef as M } from "react";
 const $ = {
   dev: "https://grafana-faro-collector.dev.0hash.com/collect",
@@ -15,11 +15,11 @@ const $ = {
   if (t.length < 2)
     return null;
   try {
-    const o = t[1].replace(/-/g, "+").replace(/_/g, "/"), r = o + "===".slice(0, (4 - o.length % 4) % 4), a = typeof atob < "u" ? atob(r) : Buffer.from(r, "base64").toString("utf-8"), c = JSON.parse(a)?.payload?.region;
+    const o = t[1].replace(/-/g, "+").replace(/_/g, "/"), r = o + "===".slice(0, (4 - o.length % 4) % 4), n = typeof atob < "u" ? atob(r) : Buffer.from(r, "base64").toString("utf-8"), c = JSON.parse(n)?.payload?.region;
     if (typeof c != "string")
       return null;
-    const n = c.toLowerCase();
-    return n === "us" || n === "eu" ? n : null;
+    const a = c.toLowerCase();
+    return a === "us" || a === "eu" ? a : null;
   } catch {
     return null;
   }
@@ -30,12 +30,12 @@ const $ = {
   if (t.length < 2)
     return {};
   try {
-    const o = t[1].replace(/-/g, "+").replace(/_/g, "/"), r = o + "===".slice(0, (4 - o.length % 4) % 4), a = typeof atob < "u" ? atob(r) : Buffer.from(r, "base64").toString("utf-8"), i = JSON.parse(a), c = i?.payload ?? {}, n = (s) => typeof s == "string" && s.length > 0 ? s : void 0;
+    const o = t[1].replace(/-/g, "+").replace(/_/g, "/"), r = o + "===".slice(0, (4 - o.length % 4) % 4), n = typeof atob < "u" ? atob(r) : Buffer.from(r, "base64").toString("utf-8"), i = JSON.parse(n), c = i?.payload ?? {}, a = (s) => typeof s == "string" && s.length > 0 ? s : void 0;
     return {
-      participantCode: n(c.participant_code),
-      platformName: n(c.platform_name),
-      platformCode: n(i.platform_code),
-      region: n(c.region)
+      participantCode: a(c.participant_code),
+      platformName: a(c.platform_name),
+      platformCode: a(i.platform_code),
+      region: a(c.region)
     };
   } catch {
     return {};
@@ -51,12 +51,12 @@ const $ = {
   const e = new Uint8Array(8);
   return globalThis.crypto.getRandomValues(e), Array.from(e, (t) => t.toString(16).padStart(2, "0")).join("");
 }, K = (e, t) => {
-  const o = H(), r = globalThis.__ZH_WEB_SDK_VERSION__, a = {};
-  e.claims.participantCode && (a.participant_code = e.claims.participantCode), e.claims.platformName && (a.platform_name = e.claims.platformName), e.claims.platformCode && (a.platform_code = e.claims.platformCode), e.claims.region && (a.region = e.claims.region), r && (a.zh_web_sdk_version = r);
+  const o = H(), r = globalThis.__ZH_WEB_SDK_VERSION__, n = {};
+  e.claims.participantCode && (n.participant_code = e.claims.participantCode), e.claims.platformName && (n.platform_name = e.claims.platformName), e.claims.platformCode && (n.platform_code = e.claims.platformCode), e.claims.region && (n.region = e.claims.region), r && (n.zh_web_sdk_version = r);
   const i = {
     meta: {
       app: { name: e.appName, version: t ?? "unknown", environment: e.env },
-      session: { id: o, attributes: a },
+      session: { id: o, attributes: n },
       browser: typeof navigator < "u" ? { userAgent: navigator.userAgent } : void 0,
       page: typeof window < "u" ? { url: window.location.origin } : void 0
     },
@@ -79,59 +79,59 @@ const $ = {
 }, G = (e, t, o) => {
   if (!e || typeof fetch > "u")
     return;
-  const { sessionId: r, payload: a } = K(t, o);
+  const { sessionId: r, payload: n } = K(t, o);
   try {
     fetch(e, {
       method: "POST",
       headers: { "Content-Type": "application/json", "x-faro-session-id": r },
-      body: JSON.stringify(a),
+      body: JSON.stringify(n),
       keepalive: !0
     }).catch(() => {
     });
   } catch {
   }
 }, Z = (e) => {
-  const { webComponentTag: t, appName: o, appVersion: r, scriptUrls: a, fallbackScriptUrls: i, collectorUrls: c, env: n, jwt: s, timeoutMs: m = 15e3, onLoad: g, onError: h } = e;
+  const { webComponentTag: t, appName: o, appVersion: r, scriptUrls: n, fallbackScriptUrls: i, collectorUrls: c, env: a, jwt: s, timeoutMs: g = 15e3, onLoad: _, onError: f } = e;
   if (typeof document > "u")
     return x;
-  const d = `${t}-script-${n}`;
+  const d = `${t}-script-${a}`;
   if (customElements.get(t) || document.getElementById(d))
     return x;
-  const S = J(s), v = e.report ?? ((p) => G(c && P(c, n, s), p, r));
-  let f = !1, w = 0, C;
-  const R = () => {
+  const b = J(s), v = e.report ?? ((p) => G(c && P(c, a, s), p, r));
+  let m = !1, w = 0, C;
+  const S = () => {
     C !== void 0 && clearTimeout(C);
-  }, k = (p, y, l) => {
-    if (f)
+  }, k = (p, h, l) => {
+    if (m)
       return;
     const U = Math.round(performance.now() - w), T = {
       webComponentTag: t,
       appName: o,
-      env: n,
-      scriptUrl: y,
+      env: a,
+      scriptUrl: h,
       reason: p,
       triedFallback: l,
       elapsedMs: U,
-      claims: S
+      claims: b
     };
     v(T);
-    const O = l ? void 0 : F(i ?? {}, n, s);
-    if (O && O !== y) {
+    const O = l ? void 0 : F(i ?? {}, a, s);
+    if (O && O !== h) {
       E(O, !0);
       return;
     }
-    f = !0, R(), document.getElementById(d)?.remove(), h?.(T);
-  }, E = (p, y) => {
-    R(), w = performance.now();
+    m = !0, S(), document.getElementById(d)?.remove(), f?.(T);
+  }, E = (p, h) => {
+    S(), w = performance.now();
     const l = document.createElement("script");
     l.id = d, l.src = p, l.type = "module", l.async = !0, l.onload = () => {
       setTimeout(() => {
-        f || (customElements.get(t) ? (f = !0, R(), g?.()) : k("not-defined", p, y));
+        m || (customElements.get(t) ? (m = !0, S(), _?.()) : k("not-defined", p, h));
       }, 0);
-    }, l.onerror = () => k("network", p, y), C = setTimeout(() => k("timeout", p, y), m), document.getElementById(d)?.remove(), document.head.appendChild(l);
-  }, N = F(a, n, s);
+    }, l.onerror = () => k("network", p, h), C = setTimeout(() => k("timeout", p, h), g), document.getElementById(d)?.remove(), document.head.appendChild(l);
+  }, N = F(n, a, s);
   return N ? (E(N, !1), () => {
-    f = !0, R();
+    m = !0, S();
   }) : x;
 }, u = {
   local: "http://localhost:5173",
@@ -141,19 +141,19 @@ const $ = {
   "eu-cert": "https://sdk-cdn.cert.zerohash.eu",
   "eu-prod": "https://sdk-cdn.zerohash.eu"
 }, q = (e, t, o = {}) => {
-  const { eu: r = !1, legacyAliases: a = !1, local: i = u.local } = o, c = (s) => `${s}/${e}/${t}`, n = {
+  const { eu: r = !1, legacyAliases: n = !1, local: i = u.local } = o, c = (s) => `${s}/${e}/${t}`, a = {
     local: c(i),
     dev: c(u.dev),
     cert: c(u.cert),
     prod: c(u.prod)
   };
-  return a && (n.sandbox = c(u.cert), n.production = c(u.prod)), r && (n["eu-cert"] = c(u["eu-cert"]), n["eu-prod"] = c(u["eu-prod"])), n;
+  return n && (a.sandbox = c(u.cert), a.production = c(u.prod)), r && (a["eu-cert"] = c(u["eu-cert"]), a["eu-prod"] = c(u["eu-prod"])), a;
 };
 var L;
 (function(e) {
   e.NETWORK_ERROR = "network_error", e.AUTH_ERROR = "auth_error", e.NOT_FOUND_ERROR = "not_found_error", e.VALIDATION_ERROR = "validation_error", e.SERVER_ERROR = "server_error", e.CLIENT_ERROR = "client_error", e.UNKNOWN_ERROR = "unknown_error";
 })(L || (L = {}));
-const b = {
+const R = {
   evergreen: "#00381D",
   green: "#CCFFD0",
   offBlack: "#1C1B1C",
@@ -168,18 +168,18 @@ const b = {
   padding: "32px 24px",
   textAlign: "center",
   fontFamily: "inherit",
-  color: b.offBlack,
+  color: R.offBlack,
   background: "#FFFFFF",
-  border: `1px solid ${b.grayLight}`,
+  border: `1px solid ${R.grayLight}`,
   borderRadius: "12px"
-}, children: [_("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _("path", { d: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: b.evergreen, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _("p", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: "Something went wrong" }), _("p", { style: { margin: 0, fontSize: "14px", opacity: 0.75 }, children: "We couldn't load this content. Please check your internet connection and try again." }), _("button", { type: "button", onClick: e, style: {
+}, children: [y("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: y("path", { d: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: R.evergreen, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), y("p", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: "Something went wrong" }), y("p", { style: { margin: 0, fontSize: "14px", opacity: 0.75 }, children: "We couldn't load this content. Please check your internet connection and try again." }), y("button", { type: "button", onClick: e, style: {
   marginTop: "8px",
   padding: "8px 20px",
   fontSize: "14px",
   fontWeight: 600,
   fontFamily: "inherit",
-  color: b.green,
-  background: b.evergreen,
+  color: R.green,
+  background: R.evergreen,
   border: "none",
   borderRadius: "8px",
   cursor: "pointer"
@@ -187,64 +187,65 @@ const b = {
   B(() => {
     const o = e.current;
     if (o)
-      for (const [r, a] of Object.entries(t))
-        a !== void 0 && (o[r] = a);
+      for (const [r, n] of Object.entries(t))
+        n !== void 0 && (o[r] = n);
   });
 }, Y = (e) => {
-  const { webComponentTag: t, appName: o, appVersion: r, scriptUrls: a, fallbackScriptUrls: i, collectorUrls: c, env: n, jwt: s, timeoutMs: m } = e, [g, h] = z(!1), [d, S] = z(0);
-  B(() => (h(!1), Z({
+  const { webComponentTag: t, appName: o, appVersion: r, scriptUrls: n, fallbackScriptUrls: i, collectorUrls: c, env: a, jwt: s, timeoutMs: g } = e, [_, f] = z(!1), [d, b] = z(0);
+  B(() => (f(!1), Z({
     webComponentTag: t,
     appName: o ?? t,
     appVersion: r,
-    scriptUrls: a,
+    scriptUrls: n,
     fallbackScriptUrls: i,
     collectorUrls: c ?? $,
-    env: n,
+    env: a,
     jwt: s,
-    timeoutMs: m,
-    onError: () => h(!0)
+    timeoutMs: g,
+    onError: () => f(!0)
   })), [
     t,
     o,
     r,
-    a,
+    n,
     i,
     c,
-    n,
+    a,
     s,
-    m,
+    g,
     d
   ]);
-  const v = D(() => S((f) => f + 1), []);
-  return { loadFailed: g, retry: v };
+  const v = D(() => b((m) => m + 1), []);
+  return { loadFailed: _, retry: v };
 }, ee = q("fund-web", "index.js", { eu: !0 }), A = "zerohash-fund", re = ({
   jwt: e,
   env: t = "prod",
   theme: o,
-  isPay: r = !1,
-  onCompleted: a,
-  onError: i,
-  onClose: c,
-  onLoaded: n,
-  onEvent: s,
-  ...m
+  branding: r,
+  isPay: n = !1,
+  onCompleted: i,
+  onError: c,
+  onClose: a,
+  onLoaded: s,
+  onEvent: g,
+  ..._
 }) => {
-  const g = M(null);
-  X(g, { isPay: r, theme: o, onCompleted: a, onError: i, onClose: c, onLoaded: n, onEvent: s });
-  const { loadFailed: h, retry: d } = Y({
+  const f = M(null);
+  X(f, { isPay: n, theme: o, branding: r, onCompleted: i, onError: c, onClose: a, onLoaded: s, onEvent: g });
+  const { loadFailed: d, retry: b } = Y({
     webComponentTag: A,
     scriptUrls: ee,
     // fallbackScriptUrls: FALLBACK_SCRIPT_URLS, // enable once the host is confirmed (AUTH-3095)
     env: t,
     jwt: e
   });
-  return h ? /* @__PURE__ */ _(Q, { onRetry: d }) : j.createElement(A, {
-    ref: g,
+  return d ? /* @__PURE__ */ y(Q, { onRetry: b }) : j.createElement(A, {
+    ref: f,
     jwt: e,
     env: t,
     theme: o,
-    ispay: r ? "true" : void 0,
-    ...m
+    ispay: n ? "true" : void 0,
+    ..._
   });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerohash-sdk/fund-react",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",