@placetopay/lightbox-sdk 0.3.3 → 1.2.0

package/dist/{LightboxClient → LightboxSdk}/assemblers.js

@@ -4,27 +4,33 @@ export const mountListener = (callbacks, styles) => {
     if (!callbacks)
         return;
     const listener = (event) => {
-        var _a, _b;
+        var _a, _b, _c;
+        let receivedStyles;
         switch (event.data.type) {
             case LightboxAppEvents.CLOSE:
-                unmountLightbox(listener);
+                unmountLightbox(listener, (_a = event.data.payload) !== null && _a !== void 0 ? _a : event.origin);
                 break;
-            case LightboxAppEvents.EMIT:
-                (_a = callbacks[event.data.payload.type]) === null || _a === void 0 ? void 0 : _a.call(callbacks, event.data.payload.payload);
+            case LightboxAppEvents.CLOSE_OR_REDIRECT:
+                unmountLightbox(listener, event.origin);
                 break;
             case LightboxAppEvents.SEND_STYLES:
-                mountStyles(Object.assign(Object.assign(Object.assign({}, event.data.payload), styles), { background: Object.assign(Object.assign({}, event.data.payload.background), styles.background) }));
+                receivedStyles = event.data.payload;
+                mountStyles(Object.assign(Object.assign(Object.assign({}, receivedStyles), styles), { background: Object.assign(Object.assign({}, receivedStyles === null || receivedStyles === void 0 ? void 0 : receivedStyles.background), styles.background) }));
                 break;
             case LightboxAppEvents.HIDE_CLOSE_BUTTON:
                 (_b = document.getElementById(ElementIds.CLOSE_BUTTON_ID)) === null || _b === void 0 ? void 0 : _b.remove();
                 break;
+            default:
+                (_c = callbacks[event.data.type]) === null || _c === void 0 ? void 0 : _c.call(callbacks, event.data.payload);
+                break;
         }
     };
     globalThis.addEventListener('message', listener);
 };
 export const mountLightbox = (url, styles, closeButtonEnabled) => {
     const wrapper = document.createElement('div');
-    wrapper.id = ElementIds.WRAPPER_ID;
+    wrapper.id = new URL(url).origin;
+    wrapper.className = ElementIds.WRAPPER_ID;
     const iframe = document.createElement('iframe');
     iframe.src = url;
     iframe.id = ElementIds.IFRAME_ID;
@@ -35,7 +41,7 @@ export const mountLightbox = (url, styles, closeButtonEnabled) => {
         const closeButton = document.createElement('button');
         closeButton.id = ElementIds.CLOSE_BUTTON_ID;
         closeButton.addEventListener('click', () => {
-            globalThis.postMessage({ type: LightboxAppEvents.CLOSE }, '*');
+            globalThis.postMessage({ type: LightboxAppEvents.CLOSE, payload: new URL(url).origin }, '*');
         });
         const closeButtonContent = document.createElement('span');
         closeButtonContent.classList.add('placetopay-close-button-content');
@@ -60,9 +66,13 @@ const mountStyles = (styles) => {
         width = Dimensions[styles.dimension.toUpperCase()].width;
     document.documentElement.style.setProperty(Styles.MAX_WIDTH, `${width.toString()}px`);
 };
-const unmountLightbox = (listener) => {
-    var _a;
-    (_a = document.getElementById(ElementIds.WRAPPER_ID)) === null || _a === void 0 ? void 0 : _a.remove();
-    globalThis.removeEventListener('message', listener);
-    document.documentElement.style.removeProperty(Styles.BACKGROUND_COLOR);
+const unmountLightbox = (listener, origin) => {
+    const element = document.getElementById(origin);
+    if (element) {
+        element.remove();
+        globalThis.removeEventListener('message', listener);
+        document.documentElement.style.removeProperty(Styles.BACKGROUND_COLOR);
+    }
+    else
+        throw new Error(`Frame from "${origin}" not found`);
 };

package/dist/LightboxSdk/index.d.ts

@@ -0,0 +1,12 @@
+import { InitOptions, LightboxInstance, LightboxStyles } from '../types';
+export declare const LightboxSdk: {
+    isInside: () => boolean;
+    close: (frame?: string) => void;
+    sendStyles: (styles: LightboxStyles) => void;
+    hideCloseButton: () => void;
+    closeOrRedirect: (url?: string) => void;
+    emit: (type: string, payload: unknown) => {
+        close: (frame?: string) => void;
+    };
+    init: (url: string, options?: InitOptions) => LightboxInstance;
+};

package/dist/{LightboxClient → LightboxSdk}/index.js

@@ -1,6 +1,27 @@
+import { LightboxAppEvents } from '../constants';
 import { redirectBasedOnDriver } from '../helpers';
 import { mountLightbox, mountListener } from './assemblers';
-export const LightboxClient = {
+export const LightboxSdk = {
+    isInside: () => globalThis.location !== globalThis.parent.location,
+    close: (frame) => {
+        globalThis.parent.postMessage({ type: LightboxAppEvents.CLOSE, payload: frame }, '*');
+    },
+    sendStyles: (styles) => {
+        globalThis.parent.postMessage({ type: LightboxAppEvents.SEND_STYLES, payload: styles }, '*');
+    },
+    hideCloseButton: () => {
+        globalThis.parent.postMessage({ type: LightboxAppEvents.HIDE_CLOSE_BUTTON }, '*');
+    },
+    closeOrRedirect: (url) => {
+        if (!url || LightboxSdk.isInside())
+            globalThis.parent.postMessage({ type: LightboxAppEvents.CLOSE_OR_REDIRECT }, '*');
+        else
+            globalThis.location.href = url;
+    },
+    emit: (type, payload) => {
+        globalThis.parent.postMessage({ type, payload }, '*');
+        return { close: LightboxSdk.close };
+    },
     init: (url, options) => {
         var _a, _b, _c, _d;
         const lightbox = {

package/dist/constants.d.ts

@@ -5,10 +5,10 @@ export declare enum ElementIds {
     STYLES_ID = "placetopay-lightbox"
 }
 export declare enum LightboxAppEvents {
-    CLOSE = "close",
-    EMIT = "emit",
-    SEND_STYLES = "sendStyles",
-    HIDE_CLOSE_BUTTON = "hideCloseButton"
+    CLOSE = "lightbox:close",
+    SEND_STYLES = "lightbox:sendStyles",
+    HIDE_CLOSE_BUTTON = "lightbox:hideCloseButton",
+    CLOSE_OR_REDIRECT = "lightbox:closeOrRedirect"
 }
 export declare enum Styles {
     BACKGROUND_COLOR = "--placetopay-lightbox-background-color",

package/dist/constants.js

@@ -7,10 +7,10 @@ export var ElementIds;
 })(ElementIds || (ElementIds = {}));
 export var LightboxAppEvents;
 (function (LightboxAppEvents) {
-    LightboxAppEvents["CLOSE"] = "close";
-    LightboxAppEvents["EMIT"] = "emit";
-    LightboxAppEvents["SEND_STYLES"] = "sendStyles";
-    LightboxAppEvents["HIDE_CLOSE_BUTTON"] = "hideCloseButton";
+    LightboxAppEvents["CLOSE"] = "lightbox:close";
+    LightboxAppEvents["SEND_STYLES"] = "lightbox:sendStyles";
+    LightboxAppEvents["HIDE_CLOSE_BUTTON"] = "lightbox:hideCloseButton";
+    LightboxAppEvents["CLOSE_OR_REDIRECT"] = "lightbox:closeOrRedirect";
 })(LightboxAppEvents || (LightboxAppEvents = {}));
 export var Styles;
 (function (Styles) {

package/dist/css/styles.css

@@ -1,6 +1,6 @@
 @import url('./close_button.css');
 
-#placetopay_lightbox_wrapper {
+.placetopay_lightbox_wrapper {
     background: var(--placetopay-lightbox-background-color);
     position: fixed;
     display: flex;

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export { LightboxApp } from './LightboxApp';
-export { LightboxClient } from './LightboxClient';
+export { LightboxSdk } from './LightboxSdk';
 export * from './types';

package/dist/index.js

@@ -1,3 +1,2 @@
-export { LightboxApp } from './LightboxApp';
-export { LightboxClient } from './LightboxClient';
+export { LightboxSdk } from './LightboxSdk';
 export * from './types';

package/dist/types.d.ts

@@ -1,4 +1,3 @@
-import { LightboxAppEvents } from './constants';
 export declare type ClientCallback = (data: unknown) => void;
 export declare type ClientCallbacks = {
     [key: string]: ClientCallback | undefined;
@@ -26,14 +25,3 @@ export declare type ApiStructure = {
 export declare type LightboxInstance = Required<InitOptions> & {
     open: () => void;
 };
-export declare type LightboxEvents = {
-    type: LightboxAppEvents.CLOSE;
-} | {
-    type: LightboxAppEvents.EMIT;
-    payload: ApiStructure;
-} | {
-    type: LightboxAppEvents.SEND_STYLES;
-    payload: LightboxStyles;
-} | {
-    type: LightboxAppEvents.HIDE_CLOSE_BUTTON;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "0.3.3",
+  "version": "1.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",

package/dist/LightboxApp/index.d.ts

@@ -1,10 +0,0 @@
-import { LightboxStyles } from '../types';
-export declare const LightboxApp: {
-    close: (url?: string) => void;
-    isInside: () => boolean;
-    emit: (type: string, payload: unknown) => {
-        close: (url?: string) => void;
-    };
-    sendStyles: (styles: LightboxStyles) => void;
-    hideCloseButton: () => void;
-};

package/dist/LightboxApp/index.js

@@ -1,20 +0,0 @@
-import { LightboxAppEvents } from '../constants';
-export const LightboxApp = {
-    close: (url) => {
-        if (!url || LightboxApp.isInside())
-            globalThis.parent.postMessage({ type: LightboxAppEvents.CLOSE }, '*');
-        else
-            globalThis.location.href = url;
-    },
-    isInside: () => globalThis.location !== globalThis.parent.location,
-    emit: (type, payload) => {
-        globalThis.parent.postMessage({ type: LightboxAppEvents.EMIT, payload: { type, payload } }, '*');
-        return { close: LightboxApp.close };
-    },
-    sendStyles: (styles) => {
-        globalThis.parent.postMessage({ type: LightboxAppEvents.SEND_STYLES, payload: styles }, '*');
-    },
-    hideCloseButton: () => {
-        globalThis.parent.postMessage({ type: LightboxAppEvents.HIDE_CLOSE_BUTTON }, '*');
-    },
-};

package/dist/LightboxClient/index.d.ts

@@ -1,4 +0,0 @@
-import { InitOptions, LightboxInstance } from '../types';
-export declare const LightboxClient: {
-    init: (url: string, options?: InitOptions) => LightboxInstance;
-};