@pybara/pybara-js 0.2.0 → 0.3.0

package/dist/modal-BCDMoDW9.js

@@ -0,0 +1,192 @@
+/* Pybara.js - pybara.com */
+//#region src/modal/config.ts
+var e = {
+	Z_INDEX: 999999,
+	BACKGROUND: "rgba(0, 0, 0, 0.7)"
+}, t = {
+	OVERLAY_FADE_IN_MS: 200,
+	PANEL_OPEN_MS: 300,
+	PANEL_CLOSE_MS: 200,
+	OVERLAY_FADE_OUT_DELAY_MS: 50,
+	OVERLAY_FADE_OUT_MS: 150
+}, n = 0, r = 0, i = 0;
+function a(e) {
+	e.preventDefault();
+}
+function o(e) {
+	e.preventDefault();
+}
+function s(e) {
+	e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || [
+		"ArrowUp",
+		"ArrowDown",
+		"PageUp",
+		"PageDown",
+		"Home",
+		"End",
+		" "
+	].includes(e.key) && e.preventDefault();
+}
+function c() {
+	window.scrollTo(r, i);
+}
+function l() {
+	n === 0 && (r = window.scrollX, i = window.scrollY, window.addEventListener("wheel", a, { passive: !1 }), window.addEventListener("touchmove", o, { passive: !1 }), window.addEventListener("keydown", s), window.addEventListener("scroll", c)), n += 1;
+}
+function u() {
+	n !== 0 && (--n, n === 0 && (window.removeEventListener("wheel", a), window.removeEventListener("touchmove", o), window.removeEventListener("keydown", s), window.removeEventListener("scroll", c)));
+}
+//#endregion
+//#region src/modal/modal.ts
+function d() {
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var f = [
+	"DESTINATION_REFUSED",
+	"INVALID_BENEFICIARY",
+	"INVALID_CHECKOUT",
+	"NO_WALLET_AVAILABLE",
+	"RATE_UNAVAILABLE",
+	"SITE_MISMATCH"
+];
+function p(e) {
+	return f.includes(e) ? e : "UNKNOWN";
+}
+var m = class extends Error {
+	constructor(e, t) {
+		super(t), this.name = "EmbeddedError", this.code = e, Object.setPrototypeOf(this, new.target.prototype);
+	}
+};
+function h(e) {
+	return typeof e == "object" && !!e && typeof e.type == "string" && e.type.startsWith("pybara_embedded_");
+}
+var g = class {
+	constructor(e) {
+		this.overlay = null, this.iframe = null, this.spinner = null, this.handleMessage = null, this.handleEscapeKey = null, this.closable = !0, this.iframeLoaded = !1, this.pendingPaymentData = null, this.config = e, this.walletOrigin = new URL(e.walletUrl).origin, this.createIframe();
+	}
+	createIframe() {
+		let n = document.createElement("div");
+		n.className = "pybara-checkout-overlay", n.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: ${e.BACKGROUND};
+            z-index: ${e.Z_INDEX};
+            display: none;
+            align-items: center;
+            justify-content: center;
+            overscroll-behavior: none;
+            user-select: none;
+        `;
+		let r = document.createElement("iframe");
+		r.src = `${this.config.walletUrl}/pay?mode=embedded`, r.title = "Pybara Wallet", r.style.cssText = "\n            width: 100%;\n            max-width: 500px;\n            height: 0;\n            max-height: 90vh;\n            border: none;\n            border-radius: 20px;\n            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n            overscroll-behavior: none;\n        ";
+		let i = document.createElement("div");
+		i.setAttribute("aria-hidden", "true"), i.style.cssText = "\n            position: absolute;\n            inset: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            pointer-events: none;\n        ", i.innerHTML = "\n            <svg viewBox=\"0 0 50 50\" width=\"50\" height=\"50\">\n                <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"white\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-dasharray=\"80\" stroke-dashoffset=\"20\"/>\n            </svg>\n        ", i.querySelector("svg")?.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], {
+			duration: 1e3,
+			iterations: Infinity
+		}), r.addEventListener("load", () => {
+			this.iframeLoaded = !0, this.pendingPaymentData &&= (this.sendInitMessage(this.pendingPaymentData), null);
+		}, { once: !0 }), this.handleMessage = (e) => {
+			if (e.origin === this.walletOrigin && e.source === r.contentWindow && h(e.data)) switch (e.data.type) {
+				case "pybara_embedded_result":
+					this.config.onSuccess?.({
+						blockIndex: e.data.blockIndex,
+						reference: e.data.reference,
+						payerPrincipal: e.data.payerPrincipal,
+						token: e.data.token
+					});
+					break;
+				case "pybara_embedded_error":
+					this.close(), this.config.onError?.(new m(p(e.data.code), e.data.message));
+					break;
+				case "pybara_embedded_closed":
+					this.close(), this.config.onClose?.();
+					break;
+				case "pybara_embedded_resize":
+					r.style.height !== `${e.data.height}px` && (r.style.height = `${e.data.height}px`), this.spinner && (this.spinner.remove(), this.spinner = null, d() || r.animate([{
+						transform: "translateY(20px)",
+						opacity: 0
+					}, {
+						transform: "none",
+						opacity: 1
+					}], {
+						duration: t.PANEL_OPEN_MS,
+						easing: "ease"
+					}));
+					break;
+				case "pybara_embedded_closable": this.closable = e.data.closable;
+			}
+		}, window.addEventListener("message", this.handleMessage), this.handleEscapeKey = (e) => {
+			e.key === "Escape" && this.closable && (this.close(), this.config.onClose?.());
+		}, document.addEventListener("keydown", this.handleEscapeKey), n.appendChild(i), n.appendChild(r), document.body.appendChild(n), this.overlay = n, this.iframe = r, this.spinner = i;
+	}
+	sendInitMessage(e) {
+		let t = {
+			type: "pybara_embedded_init",
+			beneficiary: e.modalData.beneficiary,
+			salt: e.modalData.salt,
+			...e.modalData.amountUSD === void 0 ? {} : { amountUSD: e.modalData.amountUSD },
+			reference: e.modalData.reference,
+			context: this.config.context,
+			...e.recurring ? { recurring: e.recurring } : {},
+			...e.sdkFields ? { sdkFields: e.sdkFields } : {},
+			...e.checkout ? { checkout: e.checkout } : {},
+			...this.config.thankYouMessage ? { thankYouMessage: this.config.thankYouMessage } : {}
+		};
+		this.iframe?.contentWindow?.postMessage(t, this.walletOrigin);
+	}
+	open() {
+		this.overlay && this.overlay.style.display !== "flex" && (l(), this.overlay.style.display = "flex", d() || this.overlay.animate([{ opacity: 0 }, { opacity: 1 }], {
+			duration: t.OVERLAY_FADE_IN_MS,
+			easing: "ease"
+		}));
+	}
+	show(e) {
+		this.open(), this.iframeLoaded ? this.sendInitMessage(e) : this.pendingPaymentData = e;
+	}
+	renderTerminalState(t) {
+		this.close(), l();
+		let n = document.createElement("div");
+		n.className = "pybara-checkout-overlay", n.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: ${e.BACKGROUND};
+            z-index: ${e.Z_INDEX};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            user-select: none;
+        `;
+		let r = document.createElement("div");
+		r.style.cssText = "\n            background: #fff;\n            border-radius: 12px;\n            color: #666;\n            padding: 2rem;\n            line-height: 1.4;\n            max-width: 360px;\n            text-align: center;\n            font-family: system-ui, sans-serif;\n            user-select: text;\n        ", r.textContent = t, n.appendChild(r), n.addEventListener("click", (e) => {
+			e.target === n && (n.remove(), u(), this.config.onClose?.());
+		}), document.body.appendChild(n), this.overlay = n;
+	}
+	close() {
+		this.handleMessage &&= (window.removeEventListener("message", this.handleMessage), null), this.handleEscapeKey &&= (document.removeEventListener("keydown", this.handleEscapeKey), null), u();
+		let e = this.overlay, n = this.iframe;
+		this.overlay = null, this.iframe = null, this.spinner = null, this.iframeLoaded = !1, this.pendingPaymentData = null, this.closable = !0, e && (e.style.display === "none" || d() ? e.remove() : (e.style.pointerEvents = "none", n?.animate([{
+			transform: "scale(1)",
+			opacity: 1
+		}, {
+			transform: "scale(0.95)",
+			opacity: 0
+		}], {
+			duration: t.PANEL_CLOSE_MS,
+			easing: "ease-out",
+			fill: "forwards"
+		}), e.animate([{ opacity: 1 }, { opacity: 0 }], {
+			duration: t.OVERLAY_FADE_OUT_MS,
+			delay: t.OVERLAY_FADE_OUT_DELAY_MS,
+			easing: "ease-out",
+			fill: "forwards"
+		}).finished.then(() => e.remove(), () => e.remove())));
+	}
+};
+//#endregion
+export { m as n, g as t };