@placetopay/lightbox-sdk 2.1.4 → 2.2.0

package/dist/core/assemblers.d.ts

@@ -1,3 +1,3 @@
 import { MountLightboxOptions } from '../types';
-export declare const mountLightbox: ({ id, url, element, callbacks, styles, closeButtonEnabled, enforceStyles, }: MountLightboxOptions) => void;
+export declare const mountLightbox: ({ id, url, element, callbacks, styles, closeButtonEnabled, enforceStyles, allowRedirects, backupTarget, }: MountLightboxOptions) => void;
 export declare const unmountLightbox: (target: string) => void;

package/dist/core/assemblers.js

@@ -1,7 +1,28 @@
 import { Styles, ElementIds, LightboxEvents as LE } from '../constants';
-import { setStyle, unsetStyle } from '../helpers';
+import { setStyle, unsetStyle, openWithBackup, closePopupByLightboxId, hasOpenedPopup } from '../helpers';
 let listener;
-export const mountLightbox = ({ id, url, element, callbacks, styles, closeButtonEnabled, enforceStyles, }) => {
+export const mountLightbox = ({ id, url, element, callbacks, styles, closeButtonEnabled, enforceStyles, allowRedirects, backupTarget, }) => {
+    // Only respect allowRedirects for 'self' redirection
+    if (backupTarget === 'self' && !allowRedirects) {
+        // If allowRedirects is false and backupTarget is 'self', don't redirect
+        return;
+    }
+    // Check if we need to use fallback behavior for Safari/iOS
+    const isSafariOrIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
+        /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    if (isSafariOrIOS) {
+        if (window.self !== window.top) {
+            window.parent.postMessage({ type: "placetopay-lightbox:redirect", url }, "*"); // dont change this, it would be a broken change
+        }
+        // For popup and blank, always allow (ignore allowRedirects)
+        // For self, only allow if allowRedirects is true
+        if (backupTarget !== 'self' || allowRedirects) {
+            openWithBackup(url, backupTarget, id);
+            mountListener({ id, callbacks, styles, closeButton: undefined, enforceStyles });
+            return;
+        }
+    }
+    // Normal lightbox mounting for non-Safari/iOS browsers
     const wrapper = document.createElement('div');
     wrapper.id = id;
     wrapper.className = ElementIds.WRAPPER_ID;
@@ -45,6 +66,13 @@ const mountListener = ({ id, callbacks, styles, closeButton, enforceStyles }) =>
     globalThis.addEventListener('message', listener);
 };
 export const unmountLightbox = (target) => {
+    // Check if there's a popup/window opened for this lightbox ID
+    if (hasOpenedPopup(target)) {
+        closePopupByLightboxId(target);
+        globalThis.removeEventListener('message', listener);
+        return;
+    }
+    // Handle normal lightbox unmounting
     const element = document.getElementById(target);
     if (element) {
         element.remove();

package/dist/core/index.d.ts

@@ -1,7 +1,7 @@
 import { InitialOptions, LightboxInstance, ApiStructure, LightboxStyles } from '../types';
 export declare const isInside: () => boolean;
-export declare const updateStyles: (styles: LightboxStyles) => void;
-export declare const hideCloseButton: () => void;
+export declare const updateStyles: (styles: LightboxStyles) => any;
+export declare const hideCloseButton: () => any;
 export declare const emitClose: (payload?: unknown, preventClose?: boolean) => void;
-export declare const emit: ({ type, payload, preventClose }: ApiStructure) => void;
+export declare const emit: ({ type, payload, preventClose }: ApiStructure) => any;
 export declare const createLightbox: (url: string, options?: InitialOptions) => LightboxInstance;

package/dist/core/index.js

@@ -1,5 +1,5 @@
 import { LightboxEvents as LE } from '../constants';
-import { postMessage, redirectBasedOnDriver } from '../helpers';
+import { postMessage } from '../helpers';
 import { mountLightbox, unmountLightbox } from './assemblers';
 export const isInside = () => globalThis.location !== globalThis.parent.location;
 export const updateStyles = (styles) => postMessage(LE.UPDATE_STYLES, styles);
@@ -9,7 +9,7 @@ export const emitClose = (payload, preventClose) => {
 };
 export const emit = ({ type, payload, preventClose }) => postMessage(type, payload, preventClose);
 export const createLightbox = (url, options) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const lightbox = {
         id: (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : new URL(url).origin,
         element: (_b = options === null || options === void 0 ? void 0 : options.element) !== null && _b !== void 0 ? _b : document.body,
@@ -17,6 +17,7 @@ export const createLightbox = (url, options) => {
         callbacks: (_d = options === null || options === void 0 ? void 0 : options.callbacks) !== null && _d !== void 0 ? _d : {},
         closeButton: (_e = options === null || options === void 0 ? void 0 : options.closeButton) !== null && _e !== void 0 ? _e : true,
         styles: (_f = options === null || options === void 0 ? void 0 : options.styles) !== null && _f !== void 0 ? _f : {},
+        backupTarget: (_g = options === null || options === void 0 ? void 0 : options.backupTarget) !== null && _g !== void 0 ? _g : 'self',
         url: url,
         close: () => unmountLightbox(lightbox.id),
         updateStyles,
@@ -26,8 +27,6 @@ export const createLightbox = (url, options) => {
         },
         open: () => {
             var _a;
-            if (lightbox.allowRedirects)
-                redirectBasedOnDriver(url);
             mountLightbox({
                 id: lightbox.id,
                 url,
@@ -36,6 +35,8 @@ export const createLightbox = (url, options) => {
                 styles: lightbox.styles,
                 closeButtonEnabled: lightbox.closeButton,
                 enforceStyles: (_a = options === null || options === void 0 ? void 0 : options.enforceStyles) !== null && _a !== void 0 ? _a : false,
+                allowRedirects: lightbox.allowRedirects,
+                backupTarget: lightbox.backupTarget,
             });
         },
     };

package/dist/helpers.d.ts

@@ -1,4 +1,10 @@
-export declare const postMessage: (type: string, payload?: unknown, preventClose?: boolean) => void;
+import type { BackupTarget } from './types';
+export declare const postMessage: (type: string, payload?: unknown, preventClose?: boolean) => any;
 export declare const setStyle: (name: string, value: string) => void;
 export declare const unsetStyle: (name: string) => void;
-export declare const redirectBasedOnDriver: (url: string) => void;
+export declare const mountBackdrop: () => void;
+export declare const unmountBackdrop: () => void;
+export declare const openWithBackup: (url: string, backupTarget?: BackupTarget, lightboxId?: string) => Window;
+export declare const closePopupByLightboxId: (lightboxId: string) => void;
+export declare const hasOpenedPopup: (lightboxId: string) => boolean;
+export declare const getOpenedPopupType: (lightboxId: string) => BackupTarget | null;

package/dist/helpers.js

@@ -1,5 +1,6 @@
 export const postMessage = (type, payload, preventClose) => {
-    return globalThis.parent.postMessage({ type, preventClose, payload }, '*');
+    const target = globalThis.opener || globalThis.parent;
+    return target.postMessage({ type, preventClose, payload }, '*');
 };
 export const setStyle = (name, value) => {
     document.documentElement.style.setProperty(name, value);
@@ -7,13 +8,150 @@ export const setStyle = (name, value) => {
 export const unsetStyle = (name) => {
     document.documentElement.style.removeProperty(name);
 };
-export const redirectBasedOnDriver = (url) => {
-    if (navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
-        /^((?!chrome|android).)*safari/i.test(navigator.userAgent) // regex from https://stackoverflow.com/a/23522755
-    ) {
-        if (window.self !== window.top) {
-            window.parent.postMessage({ type: "placetopay-lightbox:redirect", url }, "*"); // dont change this, it would be a broken change
+let openedWindow = null;
+let backdropElement = null;
+const openedWindows = {};
+// Private translations
+const translations = {
+    en: {
+        popupTitle: 'Popup Opened',
+        popupMessage: 'Please complete the process in the popup window. This window will remain blocked until finished.',
+    },
+    es: {
+        popupTitle: 'Popup Abierto',
+        popupMessage: 'Por favor, complete el proceso en la ventana emergente. Esta ventana permanecerá bloqueada hasta que finalice.',
+    },
+};
+function getLanguage() {
+    const lang = navigator.language || navigator.userLanguage;
+    return lang.startsWith('es') ? 'es' : 'en';
+}
+function getText(key) {
+    const lang = getLanguage();
+    return translations[lang][key];
+}
+export const mountBackdrop = () => {
+    if (backdropElement)
+        return;
+    backdropElement = document.createElement('div');
+    backdropElement.className = 'placetopay-lightbox-backdrop-overlay';
+    backdropElement.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.7);
+        z-index: 9998;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    `;
+    const messageContainer = document.createElement('div');
+    messageContainer.className = 'placetopay-lightbox-backdrop-message-container';
+    messageContainer.style.cssText = `
+        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+        border-radius: 16px;
+        padding: 40px;
+        max-width: 420px;
+        margin: 20px;
+        text-align: center;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(20px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    `;
+    const title = document.createElement('h2');
+    title.className = 'placetopay-lightbox-backdrop-title';
+    title.textContent = getText('popupTitle');
+    title.style.cssText = `
+        margin: 0 0 20px 0;
+        font-size: 22px;
+        font-weight: 700;
+        color: #ffffff;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    `;
+    const message = document.createElement('p');
+    message.className = 'placetopay-lightbox-backdrop-message';
+    message.textContent = getText('popupMessage');
+    message.style.cssText = `
+        margin: 0;
+        font-size: 15px;
+        line-height: 1.6;
+        color: #d1d5db;
+        opacity: 0.9;
+    `;
+    messageContainer.appendChild(title);
+    messageContainer.appendChild(message);
+    backdropElement.appendChild(messageContainer);
+    document.body.appendChild(backdropElement);
+    document.body.classList.add('placetopay-lightbox-open');
+    // Add body styles to prevent scrolling
+    document.body.style.overflow = 'hidden';
+    // Monitor the popup window
+    if (openedWindow) {
+        const checkClosed = setInterval(() => {
+            if (openedWindow === null || openedWindow === void 0 ? void 0 : openedWindow.closed) {
+                clearInterval(checkClosed);
+                unmountBackdrop();
+            }
+        }, 1000);
+    }
+};
+export const unmountBackdrop = () => {
+    if (backdropElement) {
+        document.body.removeChild(backdropElement);
+        backdropElement = null;
+    }
+    // Restore body styles
+    document.body.style.overflow = '';
+    document.body.classList.remove('placetopay-lightbox-open');
+    openedWindow = null;
+};
+export const openWithBackup = (url, backupTarget = 'self', lightboxId) => {
+    switch (backupTarget) {
+        case 'blank':
+            openedWindow = window.open(url, '_blank');
+            break;
+        case 'popup': {
+            const popupWidth = 512;
+            const popupHeight = 640;
+            // Calculate center position
+            const left = (window.screen.width - popupWidth) / 2;
+            const top = (window.screen.height - popupHeight) / 2;
+            openedWindow = window.open(url, 'placetopay', `popup=true,width=${popupWidth},height=${popupHeight},left=${left},top=${top}`);
+            break;
         }
-        location.href = url;
+        case 'self':
+        default:
+            window.location.href = url;
+            break;
+    }
+    if (openedWindow && lightboxId) {
+        openedWindows[lightboxId] = { window: openedWindow, type: backupTarget };
+    }
+    if (openedWindow) {
+        mountBackdrop();
     }
+    else {
+        window.location.href = url;
+    }
+    return openedWindow;
+};
+export const closePopupByLightboxId = (lightboxId) => {
+    const openedWindow = openedWindows[lightboxId];
+    if (openedWindow) {
+        if (!openedWindow.window.closed) {
+            openedWindow.window.close();
+        }
+        delete openedWindows[lightboxId];
+        unmountBackdrop();
+    }
+};
+export const hasOpenedPopup = (lightboxId) => {
+    return lightboxId in openedWindows;
+};
+export const getOpenedPopupType = (lightboxId) => {
+    const openedWindow = openedWindows[lightboxId];
+    return openedWindow ? openedWindow.type : null;
 };

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 export type ClientCallback = (payload?: unknown) => void;
 export type ClientCallbacks = Record<string, ClientCallback | undefined>;
+export type BackupTarget = 'self' | 'popup' | 'blank';
 export type LightboxStyles = Partial<{
     backdropColor: string;
     backdropOpacity: number;
@@ -26,6 +27,7 @@ export type ExposedOptions = Partial<{
     callbacks: ClientCallbacks;
     closeButton: boolean;
     styles: LightboxStyles;
+    backupTarget: BackupTarget;
 }>;
 export type InitialOptions = ExposedOptions & InternalOptions;
 export type MountLightboxOptions = {
@@ -36,6 +38,8 @@ export type MountLightboxOptions = {
     styles: LightboxStyles;
     closeButtonEnabled: boolean;
     enforceStyles: boolean;
+    allowRedirects: boolean;
+    backupTarget: BackupTarget;
 };
 export type MountListenerOptions = {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",