@heliofi/checkout-react 4.0.2 → 4.0.4

package/README.md

@@ -1,4 +1,4 @@
-# Helio Checkout React
+# MoonPay Commerce Checkout React
 
 - Documentation please visit https://docs.hel.io/docs/checkout-widget
 - Demo: https://demo.hel.io

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

@@ -1,14 +1,13 @@
 import { BlockchainSymbol } from '@heliofi/common';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
 
     mainButtonTitle?: string;
     payButtonTitle?: string;
 }
 
-
+
 
 
-export declare const HelioCheckout: (props: HelioCheckoutReactProps) => JSX_2.Element;
+export declare const HelioCheckout: (props: HelioCheckoutReactProps) => JSX.Element;
 
     config: HelioEmbedConfig;
 }
@@ -22,6 +21,7 @@ export declare const HelioCheckout: (props: HelioCheckoutReactProps) => JSX_2.El
     primaryPaymentMethod?: PrimaryPaymentMethod;
     theme?: HelioEmbedTheme;
     stretchFullWidth?: boolean;
+    /** deprecated - paystream is no longer supported */
     paymentType?: EmbedPaymentType;
     platform?: WidgetPlatform;
     display?: DisplayType;

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

@@ -1,10 +1,10 @@
-import { jsxs as k, jsx as n } from "react/jsx-runtime";
-import { Component as b, useRef as g, useState as c, useEffect as E, useLayoutEffect as I } from "react";
-const m = ({ children: e }) => /* @__PURE__ */ k("div", { children: [
-  "Error loading Helio Checkout for React",
+import { jsxs as b, jsx as c } from "react/jsx-runtime";
+import { Component as g, useRef as O, useState as m, useEffect as v, useLayoutEffect as _ } from "react";
+const S = ({ children: e }) => /* @__PURE__ */ b("div", { children: [
+  "Error loading MoonPay Commerce Checkout for React",
   e ? `: ${e}` : ""
 ] });
-class L extends b {
+class D extends g {
   constructor(t) {
     super(t), this.state = { hasError: !1 };
   }
@@ -12,51 +12,85 @@ class L extends b {
     return { hasError: !0 };
   }
   render() {
-    return this.state.hasError ? /* @__PURE__ */ n(m, {}) : this.props.children;
+    return this.state.hasError ? /* @__PURE__ */ c(S, {}) : this.props.children;
   }
 }
-const w = "https://embed.hel.io/assets/index-v1.js", p = "helio-checkout-react-v1", x = (e = w) => {
-  const t = document.createElement("script");
-  return t.setAttribute("type", "module"), t.setAttribute("id", p), t.setAttribute("src", e), document.body.appendChild(t), t;
-}, F = ({ config: e }) => {
-  const t = g(null), [u, C] = c(!1), [o, S] = c(), [d, s] = c("");
-  return E(() => C(!0), []), E(() => {
-    let l = !1;
+process.env.VITE_EMBED_VERSION;
+process.env.VITE_PROD_HOSTNAME;
+process.env.VERCEL_ENV;
+const F = (e, t) => {
+  const r = document.createElement("script");
+  return r.setAttribute("type", "module"), r.setAttribute("id", t), r.setAttribute("src", e), document.body.appendChild(r), r;
+}, M = (e) => document.querySelector(
+  `script#${e}`
+), R = (e, t) => t.embedScriptSource || e, L = ({
+  type: e,
+  config: t,
+  scriptIdentifier: r,
+  scriptSrc: u,
+  trigger: l
+}) => {
+  const d = O(null), [p, y] = m(!1);
+  v(() => y(!0), []);
+  const [o, k] = m(), [w, a] = m(""), E = R(u, t);
+  return v(() => {
+    let i = !1;
     if (o) return;
-    const i = () => {
-      if (l) return;
-      const r = window.helioCheckout;
-      if (!r) {
-        s(
-          "Unable to load helio checkout - missing init function on window.helioCheckout"
+    const s = () => {
+      if (i) return;
+      let n;
+      if (e === "paylink" ? n = window.helioCheckout : n = window.moonpayCommerceDeposit, !n) {
+        a(
+          e === "paylink" ? "Unable to load MoonPay Commerce Checkout - missing init function on window.helioCheckout" : "Unable to load Helio Deposit - missing init function on window.moonpayCommerceDeposit"
         );
         return;
       }
-      S(() => r);
-    }, a = (r) => {
-      const f = () => s("Error loading script tag");
-      return r.addEventListener("load", i), r.addEventListener("error", f), () => {
-        l = !0, r.removeEventListener("load", i), r.removeEventListener("error", f);
+      k(() => n);
+    }, f = (n) => {
+      const C = () => a("Error loading script tag");
+      return n.addEventListener("load", s), n.addEventListener("error", C), () => {
+        i = !0, n.removeEventListener("load", s), n.removeEventListener("error", C);
       };
-    }, h = document.querySelector(
-      `script#${p}`
-    );
+    }, h = M(r);
     if (h) {
-      window.helioCheckout ? i() : a(h);
-      return;
+      if (e === "paylink" && window.helioCheckout || e === "deposit" && window.moonpayCommerceDeposit) {
+        s();
+        return;
+      }
+      return f(h);
     }
-    const v = x(e.embedScriptSource);
-    return a(v);
-  }, [o, e.embedScriptSource]), I(() => {
-    if (!(!o || !u)) {
-      if (!t.current) {
-        s("Missing element to mount Helio checkout");
+    const I = F(
+      E,
+      r
+    );
+    return f(I);
+  }, [o, E, u, r, e]), _(() => {
+    if (!(!o || !p)) {
+      if (!d.current) {
+        a(
+          e === "paylink" ? "Missing element to mount MoonPay Commerce Checkout" : "Missing element to mount Helio Deposit"
+        );
         return;
       }
-      o(t.current, e);
+      if (!l)
+        if (e === "paylink") {
+          const i = t;
+          o(d.current, i);
+        } else {
+          const i = o, s = t;
+          i(d.current, s);
+        }
     }
-  }, [o, u, e]), d ? /* @__PURE__ */ n(m, { children: d }) : o ? /* @__PURE__ */ n("div", { ref: t }) : null;
-}, R = (e) => /* @__PURE__ */ n(L, { children: /* @__PURE__ */ n(F, { config: e.config }) }), j = (e) => /* @__PURE__ */ n(R, { config: e.config });
+  }, [o, p, t, e, l]), { divRef: d, initFn: o, error: w, type: e };
+}, H = "https://embed.hel.io/assets/index-v1.js", T = "helio-checkout-react-v1", x = ({ config: e }) => {
+  const { divRef: t, initFn: r, error: u } = L({
+    type: "paylink",
+    config: e,
+    scriptIdentifier: T,
+    scriptSrc: H
+  });
+  return u ? /* @__PURE__ */ c(S, { children: u }) : r ? /* @__PURE__ */ c("div", { ref: t }) : null;
+}, A = (e) => /* @__PURE__ */ c(D, { children: /* @__PURE__ */ c(x, { config: e.config }) }), P = (e) => /* @__PURE__ */ c(A, { config: e.config });
 export {
-  j as HelioCheckout
+  P as HelioCheckout
 };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@heliofi/checkout-react",
   "private": false,
-  "version": "4.0.2",
+  "version": "4.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "build:vercel": "tsc && vite build --config vite-vercel.config.ts",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:strict": "yarn lint",
-    "lint:fix": "yarn lint --fix",
+    "lint:fix": "yarn lint --fix && yarn format",
     "format": "prettier -w .",
     "format:check": "prettier -c .",
     "preview": "vite preview",
@@ -36,21 +36,21 @@
     "react-dom": ">=18.2.0 <20"
   },
   "devDependencies": {
-    "@testing-library/dom": "^9.3.3",
+    "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@types/react": ">=18.2.0 <20",
-    "@types/react-dom": ">=18.2.0 <20",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@testing-library/react": "14.0.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "@typescript-eslint/parser": "6.7.4",
+    "@vitejs/plugin-react": "4.3.2",
     "eslint": "8.45.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jsdom": "^23.0.1",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "jsdom": "23.0.1",
     "typescript": "5.1.6",
     "vite": "5.4.8",
-    "vite-plugin-dts": "^3.7.1",
+    "vite-plugin-dts": "3.7.1",
     "vitest": "3.2.4"
   }
 }