@heliofi/deposit-react 0.1.4 → 0.1.5-beta-2

package/dist/helio-deposit-react.es.d.ts

@@ -1,29 +1,24 @@
-export declare const MoonpayCommerceDeposit: (props: MoonpayCommerceDepositReactProps) => JSX.Element | null;
+/// <reference types="react" />
+
+
+
 
-/**
- * Configuration for MoonPay Commerce Deposit
- * Note: This type is duplicated from deposit-embed to maintain package independence.
- * The deposit-embed package is a private build artifact (embed script), not a library.
- */
-    /** Required: Deposit customer token */
+export declare const MoonpayCommerceDeposit: (props: MoonpayCommerceDepositReactProps) => JSX.Element | null;
+
     depositCustomerToken: string;
-    /** Optional: Success callback */
     onSuccess?: () => void;
-    /** Optional: Error callback */
     onError?: (error: {
         message: string;
     }) => void;
-    /** Optional: Network - test or main */
-    network?: 'test' | 'main';
-    /** Optional: Debug mode */
+    display?: DepositDisplay;
+    network?: DepositNetwork;
+    themeMode?: DepositThemeMode;
+    loadingText?: React.ReactNode;
     debug?: boolean;
-    /** Optional: Display mode - inline (default), button, or new-tab */
-    display?: 'inline' | 'button' | 'new-tab';
-    /** Optional: Button text for button and new-tab modes */
-    buttonText?: string;
 }
 
     config: MoonpayCommerceDepositConfig;
+    trigger?: React.ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>;
 }
 
 export { }

package/dist/helio-deposit-react.es.js

@@ -1,56 +1,70 @@
-import { jsxs as g, jsx as f } from "react/jsx-runtime";
-import { useRef as y, useState as i, useEffect as E, useLayoutEffect as I } from "react";
-const C = "v1", R = () => {
+import { jsxs as E, jsx as i, Fragment as S } from "react/jsx-runtime";
+import { useRef as C, useState as u, useEffect as p, useLayoutEffect as I } from "react";
+const b = "v1", R = () => {
   try {
     return process.env.VITE_PROD_HOSTNAME || "embed.deposits.hel.io";
   } catch {
     return "embed.deposits.hel.io";
   }
-}, b = R(), l = "deposit-embed-script", M = `https://${b}/assets/index-${C}.js`, O = ({ children: t }) => /* @__PURE__ */ g("div", { children: [
+}, M = R(), g = "deposit-embed-script", O = `https://${M}/assets/index-${b}.js`, _ = ({ children: e }) => /* @__PURE__ */ E("div", { children: [
   "Error loading Helio Deposit for React",
-  t ? `: ${t}` : ""
-] }), _ = (t = M) => {
-  const e = document.createElement("script");
-  return e.setAttribute("type", "module"), e.setAttribute("id", l), e.setAttribute("src", t), document.body.appendChild(e), e;
-}, h = (t) => {
-  const e = y(null), [c, D] = i(!1), [o, v] = i(), [u, n] = i("");
-  return E(() => D(!0), []), E(() => {
-    let d = !1;
-    if (o) return;
-    const s = () => {
-      if (d) return;
-      const r = window.moonpayCommerceDeposit;
-      if (!r) {
-        n(
+  e ? `: ${e}` : ""
+] }), h = (e = O) => {
+  const t = document.createElement("script");
+  return t.setAttribute("type", "module"), t.setAttribute("id", g), t.setAttribute("src", e), document.body.appendChild(t), t;
+}, T = (e) => {
+  const t = C(null), [d, D] = u(!1), [r, v] = u(), [m, s] = u("");
+  if (p(() => D(!0), []), p(() => {
+    let o = !1;
+    if (r) return;
+    const c = () => {
+      if (o) return;
+      const n = window.moonpayCommerceDeposit;
+      if (!n) {
+        s(
           "Unable to load Helio Deposit - missing init function on window.moonpayCommerceDeposit"
         );
         return;
       }
-      v(() => r);
-    }, m = (r) => {
-      const a = () => n("Error loading script tag");
-      return r.addEventListener("load", s), r.addEventListener("error", a), () => {
-        d = !0, r.removeEventListener("load", s), r.removeEventListener("error", a);
+      v(() => n);
+    }, a = (n) => {
+      const l = () => s("Error loading script tag");
+      return n.addEventListener("load", c), n.addEventListener("error", l), () => {
+        o = !0, n.removeEventListener("load", c), n.removeEventListener("error", l);
       };
-    }, p = document.querySelector(
-      `script#${l}`
+    }, f = document.querySelector(
+      `script#${g}`
     );
-    if (p) {
-      window.moonpayCommerceDeposit ? s() : m(p);
+    if (f) {
+      window.moonpayCommerceDeposit ? c() : a(f);
       return;
     }
-    const S = _();
-    return m(S);
-  }, [o]), I(() => {
-    if (!(!o || !c)) {
-      if (!e.current) {
-        n("Missing element to mount Helio Deposit");
+    const y = h();
+    return a(y);
+  }, [r]), I(() => {
+    if (!(!r || !d)) {
+      if (!t.current) {
+        s("Missing element to mount Helio Deposit");
         return;
       }
-      o(e.current, t.config);
+      r(t.current, e.config);
     }
-  }, [o, c, t.config]), u ? /* @__PURE__ */ f(O, { children: u }) : o ? /* @__PURE__ */ f("div", { ref: e }) : null;
+  }, [r, d, e.config]), m) return /* @__PURE__ */ i(_, { children: m });
+  if (!r) return null;
+  if (e.trigger && e.config.display === "button") {
+    const o = e.trigger;
+    return /* @__PURE__ */ E(S, { children: [
+      /* @__PURE__ */ i("div", { ref: t }),
+      /* @__PURE__ */ i(
+        o,
+        {
+          onClick: () => r(t.current, { ...e.config, display: "modal" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ i("div", { ref: t });
 };
 export {
-  h as MoonpayCommerceDeposit
+  T as MoonpayCommerceDeposit
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heliofi/deposit-react",
   "private": false,
-  "version": "0.1.4",
+  "version": "0.1.5-beta-2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -39,8 +39,8 @@
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vitejs/plugin-react": "4.3.2",
@@ -48,8 +48,8 @@
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "jsdom": "23.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
     "rimraf": "3.0.2",
     "typescript": "5.1.6",
     "vite": "5.4.8",