@placetopay/lightbox-sdk 2.2.0 → 2.4.0

package/dist/constants.d.ts

@@ -7,7 +7,8 @@ export declare enum ElementIds {
 export declare enum LightboxEvents {
     CLOSE = "close",
     UPDATE_STYLES = "updateStyles",
-    HIDE_CLOSE_BUTTON = "hideCloseButton"
+    HIDE_CLOSE_BUTTON = "hideCloseButton",
+    CLOSE_BY_USER = "closeByUser"
 }
 export declare enum Styles {
     BACKDROP_COLOR = "--placetopay-lightbox-backdrop-color",

package/dist/constants.js

@@ -10,6 +10,7 @@ export var LightboxEvents;
     LightboxEvents["CLOSE"] = "close";
     LightboxEvents["UPDATE_STYLES"] = "updateStyles";
     LightboxEvents["HIDE_CLOSE_BUTTON"] = "hideCloseButton";
+    LightboxEvents["CLOSE_BY_USER"] = "closeByUser";
 })(LightboxEvents || (LightboxEvents = {}));
 export var Styles;
 (function (Styles) {

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

@@ -1,3 +1,4 @@
+import { LightboxEvents as LE } from './constants';
 export const postMessage = (type, payload, preventClose) => {
     const target = globalThis.opener || globalThis.parent;
     return target.postMessage({ type, preventClose, payload }, '*');
@@ -11,6 +12,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: {
@@ -107,6 +111,7 @@ export const unmountBackdrop = () => {
     document.body.style.overflow = '';
     document.body.classList.remove('placetopay-lightbox-open');
     openedWindow = null;
+    postMessage(LE.CLOSE_BY_USER);
 };
 export const openWithBackup = (url, backupTarget = 'self', lightboxId) => {
     switch (backupTarget) {
@@ -119,7 +124,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,6 +1,6 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "2.2.0",
+  "version": "2.4.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",