@pybara/pybara-js 0.7.0 → 0.9.0

package/dist/modal-CXTyI_BA.js

@@ -0,0 +1,229 @@
+/* Pybara.js - pybara.com */
+import { n as e, r as t, t as n } from "./config-9RX2E1N4.js";
+//#region src/modal/lock-page-scroll.ts
+var r = 0, i = 0, a = 0;
+function o(e) {
+	e.preventDefault();
+}
+function s(e) {
+	e.preventDefault();
+}
+function c(e) {
+	e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || [
+		"ArrowUp",
+		"ArrowDown",
+		"PageUp",
+		"PageDown",
+		"Home",
+		"End",
+		" "
+	].includes(e.key) && e.preventDefault();
+}
+function l() {
+	window.scrollTo(i, a);
+}
+function u() {
+	r === 0 && (i = window.scrollX, a = window.scrollY, window.addEventListener("wheel", o, { passive: !1 }), window.addEventListener("touchmove", s, { passive: !1 }), window.addEventListener("keydown", c), window.addEventListener("scroll", l)), r += 1;
+}
+function d() {
+	r !== 0 && (--r, r === 0 && (window.removeEventListener("wheel", o), window.removeEventListener("touchmove", s), window.removeEventListener("keydown", c), window.removeEventListener("scroll", l)));
+}
+//#endregion
+//#region src/modal/modal.ts
+function f() {
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var p = [
+	"DESTINATION_REFUSED",
+	"INVALID_BENEFICIARY",
+	"INVALID_CHECKOUT",
+	"NO_WALLET_AVAILABLE",
+	"RATE_UNAVAILABLE",
+	"SITE_MISMATCH"
+];
+function m(e) {
+	return p.includes(e) ? e : "UNKNOWN";
+}
+var h = class extends Error {
+	constructor(e, t) {
+		super(t), this.name = "EmbeddedError", this.code = e, Object.setPrototypeOf(this, new.target.prototype);
+	}
+};
+function g(e) {
+	return typeof e == "object" && !!e && typeof e.type == "string" && e.type.startsWith("pybara_embedded_");
+}
+var _ = 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.lastPaymentData = null, this.loadTimer = null, this.unavailableBox = null, this.pendingPrecheck = 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: ${t.BACKGROUND};
+            z-index: ${t.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.onIframeLoad(), { once: !0 }), this.handleMessage = (t) => {
+			if (t.origin === this.walletOrigin && t.source === r.contentWindow && g(t.data)) switch (t.data.type) {
+				case "pybara_embedded_result":
+					this.config.onSuccess?.({
+						blockIndex: t.data.blockIndex,
+						reference: t.data.reference,
+						payerPrincipal: t.data.payerPrincipal,
+						token: t.data.token
+					});
+					break;
+				case "pybara_embedded_error":
+					this.close(), this.config.onError?.(new h(m(t.data.code), t.data.message));
+					break;
+				case "pybara_embedded_closed":
+					this.close(), this.config.onClose?.();
+					break;
+				case "pybara_embedded_resize":
+					this.clearLoadTimer(), this.unavailableBox &&= (this.unavailableBox.remove(), null), r.style.height !== `${t.data.height}px` && (r.style.height = `${t.data.height}px`), this.spinner && (this.spinner.remove(), this.spinner = null, f() || (r.animate([{
+						transform: "translateY(20px)",
+						opacity: 0
+					}, {
+						transform: "none",
+						opacity: 1
+					}], {
+						duration: e.PANEL_OPEN_MS,
+						easing: "ease"
+					}), r.offsetHeight, r.style.transition = `height ${e.RESIZE_MS}ms ${e.RESIZE_EASING}`));
+					break;
+				case "pybara_embedded_closable":
+					this.closable = t.data.closable;
+					break;
+				case "pybara_embedded_availability": {
+					let { type: e, v: n, ...r } = t.data;
+					r.status !== "available" && r.detail && console.warn(r.detail), this.config.onAvailability?.(r);
+					break;
+				}
+			}
+		}, window.addEventListener("message", this.handleMessage), this.handleEscapeKey = (e) => {
+			e.key === "Escape" && this.closable && (this.unavailableBox ? this.closeUnavailable() : (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;
+	}
+	onIframeLoad() {
+		this.iframeLoaded = !0, this.pendingPrecheck &&= (this.sendPrecheck(this.pendingPrecheck), null), this.pendingPaymentData &&= (this.sendInitMessage(this.pendingPaymentData), null);
+	}
+	clearLoadTimer() {
+		this.loadTimer !== null && (clearTimeout(this.loadTimer), this.loadTimer = null);
+	}
+	startLoadTimer() {
+		this.clearLoadTimer(), this.spinner && (this.loadTimer = setTimeout(() => {
+			this.loadTimer = null, this.renderUnavailable();
+		}, n));
+	}
+	renderUnavailable() {
+		if (!this.overlay || this.unavailableBox) return;
+		this.spinner && (this.spinner.style.display = "none");
+		let e = document.createElement("div");
+		e.setAttribute("role", "alertdialog"), e.setAttribute("aria-label", "Pybara checkout unavailable"), e.style.cssText = "\n            position: absolute;\n            background: #fff;\n            border-radius: 12px;\n            color: #444;\n            padding: 1.75rem 2rem;\n            line-height: 1.45;\n            max-width: 340px;\n            text-align: center;\n            font-family: system-ui, sans-serif;\n        ";
+		let t = document.createElement("p");
+		t.style.cssText = "margin: 0 0 1.25rem;", t.textContent = "The checkout couldn't load. Check your connection and try again.";
+		let n = "font: inherit; padding: 0.55rem 1.2rem; border-radius: 8px; cursor: pointer; margin: 0 0.3rem;", r = document.createElement("button");
+		r.type = "button", r.textContent = "Try again", r.style.cssText = `${n} background: #111827; color: #fff; border: 1px solid #111827;`, r.addEventListener("click", () => this.retryLoad());
+		let i = document.createElement("button");
+		i.type = "button", i.textContent = "Close", i.style.cssText = `${n} background: #fff; color: #111827; border: 1px solid #d1d5db;`, i.addEventListener("click", () => this.closeUnavailable()), e.append(t, r, i), this.overlay.appendChild(e), this.unavailableBox = e, r.focus();
+	}
+	retryLoad() {
+		let e = this.iframe;
+		e && (this.unavailableBox?.remove(), this.unavailableBox = null, this.spinner && (this.spinner.style.display = "flex"), this.iframeLoaded = !1, this.pendingPaymentData = this.lastPaymentData, e.addEventListener("load", () => this.onIframeLoad(), { once: !0 }), e.src = `${this.config.walletUrl}/pay?mode=embedded`, this.startLoadTimer());
+	}
+	closeUnavailable() {
+		this.close(), this.config.onError?.(new h("FRAME_UNAVAILABLE", `The Pybara checkout (${this.walletOrigin}/pay) did not load within ${n / 1e3} seconds.`));
+	}
+	precheck(e) {
+		this.iframeLoaded ? this.sendPrecheck(e) : this.pendingPrecheck = e;
+	}
+	sendPrecheck(e) {
+		this.iframe?.contentWindow?.postMessage({
+			type: "pybara_embedded_precheck",
+			v: 1,
+			context: this.config.context,
+			...e
+		}, this.walletOrigin);
+	}
+	sendInitMessage(e) {
+		let t = {
+			type: "pybara_embedded_init",
+			beneficiary: e.modalData.beneficiary,
+			salt: e.modalData.salt,
+			reference: e.modalData.reference,
+			context: this.config.context,
+			...e.recurring ? { recurring: e.recurring } : {},
+			checkout: e.checkout,
+			...this.config.thankYouMessage ? { thankYouMessage: this.config.thankYouMessage } : {},
+			...this.config.locale ? { locale: this.config.locale } : {}
+		};
+		this.iframe?.contentWindow?.postMessage(t, this.walletOrigin);
+	}
+	open() {
+		this.overlay && this.overlay.style.display !== "flex" && (u(), this.overlay.style.display = "flex", f() || this.overlay.animate([{ opacity: 0 }, { opacity: 1 }], {
+			duration: e.OVERLAY_FADE_IN_MS,
+			easing: "ease"
+		}));
+	}
+	show(e) {
+		this.open(), this.lastPaymentData = e, this.startLoadTimer(), this.iframeLoaded ? this.sendInitMessage(e) : this.pendingPaymentData = e;
+	}
+	renderTerminalState(e) {
+		this.close(), u();
+		let n = document.createElement("div");
+		n.className = "pybara-checkout-overlay", n.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: ${t.BACKGROUND};
+            z-index: ${t.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 = e, n.appendChild(r), n.addEventListener("click", (e) => {
+			e.target === n && (n.remove(), d(), 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), d();
+		let t = this.overlay, n = this.iframe;
+		this.overlay = null, this.iframe = null, this.spinner = null, this.iframeLoaded = !1, this.pendingPaymentData = null, this.lastPaymentData = null, this.pendingPrecheck = null, this.closable = !0, this.clearLoadTimer(), this.unavailableBox = null, t && (t.style.display === "none" || f() ? t.remove() : (t.style.pointerEvents = "none", n?.animate([{
+			transform: "scale(1)",
+			opacity: 1
+		}, {
+			transform: "scale(0.95)",
+			opacity: 0
+		}], {
+			duration: e.PANEL_CLOSE_MS,
+			easing: "ease-out",
+			fill: "forwards"
+		}), t.animate([{ opacity: 1 }, { opacity: 0 }], {
+			duration: e.OVERLAY_FADE_OUT_MS,
+			delay: e.OVERLAY_FADE_OUT_DELAY_MS,
+			easing: "ease-out",
+			fill: "forwards"
+		}).finished.then(() => t.remove(), () => t.remove())));
+	}
+};
+//#endregion
+export { h as n, _ as t };