@placetopay/lightbox-sdk 2.2.0 → 2.3.0

package/dist/core/assemblers.js

@@ -1,5 +1,6 @@
 import { Styles, ElementIds, LightboxEvents as LE } from '../constants';
 import { setStyle, unsetStyle, openWithBackup, closePopupByLightboxId, hasOpenedPopup } from '../helpers';
+import { isSafariOrIOS } from './index';
 let listener;
 export const mountLightbox = ({ id, url, element, callbacks, styles, closeButtonEnabled, enforceStyles, allowRedirects, backupTarget, }) => {
     // Only respect allowRedirects for 'self' redirection
@@ -7,10 +8,7 @@ export const mountLightbox = ({ id, url, element, callbacks, styles, closeButton
         // 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 (isSafariOrIOS()) {
         if (window.self !== window.top) {
             window.parent.postMessage({ type: "placetopay-lightbox:redirect", url }, "*"); // dont change this, it would be a broken change
         }

package/dist/core/index.d.ts

@@ -1,5 +1,8 @@
 import { InitialOptions, LightboxInstance, ApiStructure, LightboxStyles } from '../types';
 export declare const isInside: () => boolean;
+export declare const isInsideIframe: () => boolean;
+export declare const isInsidePopup: () => boolean;
+export declare const isSafariOrIOS: () => boolean;
 export declare const updateStyles: (styles: LightboxStyles) => any;
 export declare const hideCloseButton: () => any;
 export declare const emitClose: (payload?: unknown, preventClose?: boolean) => void;

package/dist/core/index.js

@@ -2,6 +2,10 @@ import { LightboxEvents as LE } from '../constants';
 import { postMessage } from '../helpers';
 import { mountLightbox, unmountLightbox } from './assemblers';
 export const isInside = () => globalThis.location !== globalThis.parent.location;
+export const isInsideIframe = () => globalThis.self !== globalThis.top;
+export const isInsidePopup = () => !!globalThis.opener;
+export const isSafariOrIOS = () => /iPhone|iPad|iPod/i.test(navigator.userAgent) ||
+    /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 export const updateStyles = (styles) => postMessage(LE.UPDATE_STYLES, styles);
 export const hideCloseButton = () => postMessage(LE.HIDE_CLOSE_BUTTON);
 export const emitClose = (payload, preventClose) => {

package/dist/helpers.js

@@ -11,6 +11,9 @@ export const unsetStyle = (name) => {
 let openedWindow = null;
 let backdropElement = null;
 const openedWindows = {};
+const generatePopupName = (lightboxId) => {
+    return lightboxId !== null && lightboxId !== void 0 ? lightboxId : `placetopay_${crypto.randomUUID()}`;
+};
 // Private translations
 const translations = {
     en: {
@@ -35,51 +38,51 @@ export const mountBackdrop = () => {
         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;
+    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);
+    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);
+    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;
+    message.style.cssText = `
+        margin: 0;
+        font-size: 15px;
+        line-height: 1.6;
+        color: #d1d5db;
+        opacity: 0.9;
     `;
     messageContainer.appendChild(title);
     messageContainer.appendChild(message);
@@ -119,7 +122,7 @@ export const openWithBackup = (url, backupTarget = 'self', lightboxId) => {
             // 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}`);
+            openedWindow = window.open(url, generatePopupName(lightboxId), `popup=true,width=${popupWidth},height=${popupHeight},left=${left},top=${top}`);
             break;
         }
         case 'self':

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@placetopay/lightbox-sdk",
-  "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",
-  "files": [
-    "/dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/placetopay-org/lightbox-sdk.git"
-  },
-  "keywords": [
-    "lightbox",
-    "sdk",
-    "placetopay",
-    "javascript",
-    "typescript"
-  ],
-  "author": "JuanZea",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/placetopay-org/lightbox-sdk/issues"
-  },
-  "homepage": "https://placetopay-org.github.io/lightbox-sdk",
-  "devDependencies": {
-    "typescript": "^5.1.6"
-  }
-}
+{
+  "name": "@placetopay/lightbox-sdk",
+  "version": "2.3.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",
+  "files": [
+    "/dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/placetopay-org/lightbox-sdk.git"
+  },
+  "keywords": [
+    "lightbox",
+    "sdk",
+    "placetopay",
+    "javascript",
+    "typescript"
+  ],
+  "author": "JuanZea",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/placetopay-org/lightbox-sdk/issues"
+  },
+  "homepage": "https://placetopay-org.github.io/lightbox-sdk",
+  "devDependencies": {
+    "typescript": "^5.1.6"
+  }
+}