@placetopay/lightbox-sdk 2.3.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/constants.d.ts +2 -1
  2. package/dist/constants.js +1 -0
  3. package/dist/helpers.js +78 -34
  4. package/package.json +30 -30
package/dist/constants.d.ts CHANGED
@@ -7,7 +7,8 @@ export declare enum ElementIds {
7
7
  export declare enum LightboxEvents {
8
8
  CLOSE = "close",
9
9
  UPDATE_STYLES = "updateStyles",
10
- HIDE_CLOSE_BUTTON = "hideCloseButton"
10
+ HIDE_CLOSE_BUTTON = "hideCloseButton",
11
+ CLOSE_BY_USER = "closeByUser"
11
12
  }
12
13
  export declare enum Styles {
13
14
  BACKDROP_COLOR = "--placetopay-lightbox-backdrop-color",
package/dist/constants.js CHANGED
@@ -10,6 +10,7 @@ export var LightboxEvents;
10
10
  LightboxEvents["CLOSE"] = "close";
11
11
  LightboxEvents["UPDATE_STYLES"] = "updateStyles";
12
12
  LightboxEvents["HIDE_CLOSE_BUTTON"] = "hideCloseButton";
13
+ LightboxEvents["CLOSE_BY_USER"] = "closeByUser";
13
14
  })(LightboxEvents || (LightboxEvents = {}));
14
15
  export var Styles;
15
16
  (function (Styles) {
package/dist/helpers.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { LightboxEvents as LE } from './constants';
1
2
  export const postMessage = (type, payload, preventClose) => {
2
3
  const target = globalThis.opener || globalThis.parent;
3
4
  return target.postMessage({ type, preventClose, payload }, '*');
@@ -19,10 +20,14 @@ const translations = {
19
20
  en: {
20
21
  popupTitle: 'Popup Opened',
21
22
  popupMessage: 'Please complete the process in the popup window. This window will remain blocked until finished.',
23
+ continueButton: 'Continue',
24
+ cancelButton: 'Cancel',
22
25
  },
23
26
  es: {
24
27
  popupTitle: 'Popup Abierto',
25
28
  popupMessage: 'Por favor, complete el proceso en la ventana emergente. Esta ventana permanecerá bloqueada hasta que finalice.',
29
+ continueButton: 'Continuar',
30
+ cancelButton: 'Cancelar',
26
31
  },
27
32
  };
28
33
  function getLanguage() {
@@ -38,54 +43,92 @@ export const mountBackdrop = () => {
38
43
  return;
39
44
  backdropElement = document.createElement('div');
40
45
  backdropElement.className = 'placetopay-lightbox-backdrop-overlay';
41
- backdropElement.style.cssText = `
42
- position: fixed;
43
- top: 0;
44
- left: 0;
45
- width: 100%;
46
- height: 100%;
47
- background-color: rgba(0, 0, 0, 0.7);
48
- z-index: 9998;
49
- display: flex;
50
- align-items: center;
51
- justify-content: center;
52
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
46
+ backdropElement.style.cssText = `
47
+ position: fixed;
48
+ top: 0;
49
+ left: 0;
50
+ width: 100%;
51
+ height: 100%;
52
+ background-color: rgba(0, 0, 0, 0.7);
53
+ z-index: 9998;
54
+ display: flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
53
58
  `;
54
59
  const messageContainer = document.createElement('div');
55
60
  messageContainer.className = 'placetopay-lightbox-backdrop-message-container';
56
- messageContainer.style.cssText = `
57
- background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
58
- border-radius: 16px;
59
- padding: 40px;
60
- max-width: 420px;
61
- margin: 20px;
62
- text-align: center;
63
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
64
- backdrop-filter: blur(20px);
65
- border: 1px solid rgba(255, 255, 255, 0.1);
61
+ messageContainer.style.cssText = `
62
+ background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
63
+ border-radius: 16px;
64
+ padding: 40px;
65
+ max-width: 420px;
66
+ margin: 20px;
67
+ text-align: center;
68
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
69
+ backdrop-filter: blur(20px);
70
+ border: 1px solid rgba(255, 255, 255, 0.1);
66
71
  `;
67
72
  const title = document.createElement('h2');
68
73
  title.className = 'placetopay-lightbox-backdrop-title';
69
74
  title.textContent = getText('popupTitle');
70
- title.style.cssText = `
71
- margin: 0 0 20px 0;
72
- font-size: 22px;
73
- font-weight: 700;
74
- color: #ffffff;
75
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
75
+ title.style.cssText = `
76
+ margin: 0 0 20px 0;
77
+ font-size: 22px;
78
+ font-weight: 700;
79
+ color: #ffffff;
80
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
76
81
  `;
77
82
  const message = document.createElement('p');
78
83
  message.className = 'placetopay-lightbox-backdrop-message';
79
84
  message.textContent = getText('popupMessage');
80
- message.style.cssText = `
81
- margin: 0;
82
- font-size: 15px;
83
- line-height: 1.6;
84
- color: #d1d5db;
85
- opacity: 0.9;
85
+ message.style.cssText = `
86
+ margin: 0;
87
+ font-size: 15px;
88
+ line-height: 1.6;
89
+ color: #d1d5db;
90
+ opacity: 0.9;
86
91
  `;
92
+ const continueButton = document.createElement('button');
93
+ continueButton.textContent = getText('continueButton');
94
+ continueButton.style.cssText = `
95
+ margin-top: 20px;
96
+ margin-right: 10px;
97
+ padding: 10px 18px;
98
+ cursor: pointer;
99
+ border-radius: 8px;
100
+ border: none;
101
+ background: #ffffff;
102
+ color: #000000;
103
+ font-weight: 600;
104
+ `;
105
+ continueButton.onclick = () => {
106
+ if (openedWindow && !openedWindow.closed) {
107
+ openedWindow.focus();
108
+ }
109
+ };
110
+ const cancelButton = document.createElement('button');
111
+ cancelButton.textContent = getText('cancelButton');
112
+ cancelButton.style.cssText = `
113
+ margin-top: 20px;
114
+ padding: 10px 18px;
115
+ cursor: pointer;
116
+ border-radius: 8px;
117
+ border: 1px solid #ffffff;
118
+ background: transparent;
119
+ color: #ffffff;
120
+ font-weight: 600;
121
+ `;
122
+ cancelButton.onclick = () => {
123
+ if (openedWindow && !openedWindow.closed) {
124
+ openedWindow.close();
125
+ }
126
+ unmountBackdrop();
127
+ };
87
128
  messageContainer.appendChild(title);
88
129
  messageContainer.appendChild(message);
130
+ messageContainer.appendChild(continueButton);
131
+ messageContainer.appendChild(cancelButton);
89
132
  backdropElement.appendChild(messageContainer);
90
133
  document.body.appendChild(backdropElement);
91
134
  document.body.classList.add('placetopay-lightbox-open');
@@ -110,6 +153,7 @@ export const unmountBackdrop = () => {
110
153
  document.body.style.overflow = '';
111
154
  document.body.classList.remove('placetopay-lightbox-open');
112
155
  openedWindow = null;
156
+ postMessage(LE.CLOSE_BY_USER);
113
157
  };
114
158
  export const openWithBackup = (url, backupTarget = 'self', lightboxId) => {
115
159
  switch (backupTarget) {
package/package.json CHANGED
@@ -1,30 +1,30 @@
1
- {
2
- "name": "@placetopay/lightbox-sdk",
3
- "version": "2.3.0",
4
- "description": "Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors",
5
- "main": "dist/index.js",
6
- "types": "dist/index.d.ts",
7
- "files": [
8
- "/dist"
9
- ],
10
- "repository": {
11
- "type": "git",
12
- "url": "git+https://github.com/placetopay-org/lightbox-sdk.git"
13
- },
14
- "keywords": [
15
- "lightbox",
16
- "sdk",
17
- "placetopay",
18
- "javascript",
19
- "typescript"
20
- ],
21
- "author": "JuanZea",
22
- "license": "ISC",
23
- "bugs": {
24
- "url": "https://github.com/placetopay-org/lightbox-sdk/issues"
25
- },
26
- "homepage": "https://placetopay-org.github.io/lightbox-sdk",
27
- "devDependencies": {
28
- "typescript": "^5.1.6"
29
- }
30
- }
1
+ {
2
+ "name": "@placetopay/lightbox-sdk",
3
+ "version": "2.5.0",
4
+ "description": "Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors",
5
+ "main": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "files": [
8
+ "/dist"
9
+ ],
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/placetopay-org/lightbox-sdk.git"
13
+ },
14
+ "keywords": [
15
+ "lightbox",
16
+ "sdk",
17
+ "placetopay",
18
+ "javascript",
19
+ "typescript"
20
+ ],
21
+ "author": "JuanZea",
22
+ "license": "ISC",
23
+ "bugs": {
24
+ "url": "https://github.com/placetopay-org/lightbox-sdk/issues"
25
+ },
26
+ "homepage": "https://placetopay-org.github.io/lightbox-sdk",
27
+ "devDependencies": {
28
+ "typescript": "^5.1.6"
29
+ }
30
+ }