[MOB-5930]: Fix some safari dismissal bugs (#197)

* temp

* fix exit and background button

* update tests

* lets see

* another

* unit tests fixed

* revert some dev changes

* remove elements on trigger close

* update utils test

---------

Co-authored-by: mitch prewitt <[email protected]>

Author: mprew97

package.json

@@ -97,8 +97,9 @@
   },
   "lint-staged": {
     "*.{ts,tsx,js}": [
-      "eslint",
-      "prettier --write"
+      "eslint --fix",
+      "prettier --write",
+      "eslint"
     ]
   }
-}
+}

src/inapp/inapp.ts

@@ -407,9 +407,11 @@ export function getInAppMessages(
             The overlay doesn't handle this because the overlay only surrounds the iframe,
             not the in-app message. So imagine an in-app looking like this:
           */
-          if (activeIframe.contentWindow?.document) {
-            const absoluteDismissButton =
-              activeIframe.contentWindow.document.createElement('button');
+          if (activeIframe?.contentWindow?.document) {
+            const closeXButtonId = 'close-x';
+            const absoluteDismissButton = document.createElement('button');
+            const absoluteDismissId = 'absolute-dismiss';
+            absoluteDismissButton.setAttribute('id', absoluteDismissId);
             absoluteDismissButton.style.cssText = `
                 background: none;
                 color: inherit;
@@ -441,11 +443,15 @@ export function getInAppMessages(
                 );
               }
               global.removeEventListener('resize', throttledResize);
+              const closeXButtonElement =
+                document.getElementById(closeXButtonId);
+              const absoluteDismissButtonElement =
+                document.getElementById(absoluteDismissId);
+              closeXButtonElement?.remove();
+              absoluteDismissButtonElement?.remove();
             };
             absoluteDismissButton.addEventListener('click', triggerClose);
-            activeIframe.contentWindow.document.body.appendChild(
-              absoluteDismissButton
-            );
+            document.body.appendChild(absoluteDismissButton);
 
             /**
              * Here we paint an optional close button if the user provided configuration
@@ -456,8 +462,9 @@ export function getInAppMessages(
              * button will not be able to dismiss the message (Safari blocks JS from running
              * on bound event handlers)
              */
-            if (payload.closeButton && !isSafari) {
-              const newButton = generateCloseButton(
+            if (payload.closeButton) {
+              const closeXButton = generateCloseButton(
+                closeXButtonId,
                 document,
                 payload.closeButton?.position,
                 payload.closeButton?.color,
@@ -466,8 +473,8 @@ export function getInAppMessages(
                 payload.closeButton.topOffset,
                 payload.closeButton.sideOffset
               );
-              newButton.addEventListener('click', triggerClose);
-              activeIframe.contentWindow.document.body.appendChild(newButton);
+              closeXButton.addEventListener('click', triggerClose);
+              document.body.appendChild(closeXButton);
             }
           }
 

src/inapp/tests/inapp.test.ts

@@ -325,7 +325,7 @@ describe('getInAppMessages', () => {
 
       expect(frame?.tagName).toBe('IFRAME');
 
-      const element = frame?.contentWindow?.document.body.querySelector(
+      const element = document.body.querySelector(
         '[data-qa-custom-close-button]'
       );
 
@@ -385,7 +385,9 @@ describe('getInAppMessages', () => {
       pauseMessageStream();
       jest.advanceTimersByTime(32000);
 
-      expect(document.body.innerHTML).toBe('');
+      expect(document.body.innerHTML).toBe(
+        '<button id="absolute-dismiss" style="background: none; padding: 0px; cursor: unset; outline: inherit; height: 100vh; width: 100vw; position: fixed; top: 0px; left: 0px; z-index: -1;" tabindex="-1"></button>'
+      );
     });
 
     it('should paint next message to DOM if resumed', async () => {

src/inapp/tests/utils.test.ts

@@ -895,7 +895,9 @@ describe('Utils', () => {
 
   describe('Close Button', () => {
     it('should paint the close button with the correct properties', () => {
+      const buttonId = 'some-test-id';
       const button = generateCloseButton(
+        buttonId,
         document,
         'top-left',
         'blue',
@@ -905,6 +907,7 @@ describe('Utils', () => {
         '20px'
       );
 
+      expect(button.id).toEqual(buttonId);
       expect(button.style.width).toBe('20px');
       expect(button.style.height).toBe('20px');
       expect(button.style.fontSize).toBe('20px');
@@ -916,6 +919,7 @@ describe('Utils', () => {
       expect(button.innerHTML).toBe('✕');
 
       const rightButton = generateCloseButton(
+        buttonId,
         document,
         'top-right',
         'blue',
@@ -925,6 +929,7 @@ describe('Utils', () => {
         '20px'
       );
 
+      expect(button.id).toEqual(buttonId);
       expect(rightButton.style.width).toBe('20px');
       expect(rightButton.style.height).toBe('20px');
       expect(rightButton.style.fontSize).toBe('20px');

src/inapp/utils.ts

@@ -236,6 +236,7 @@ export const addNewMessagesToCache = async (
 };
 
 export const generateCloseButton = (
+  id: string,
   doc: Document,
   position?: 'top-right' | 'top-left',
   color?: string,
@@ -263,6 +264,7 @@ export const generateCloseButton = (
     height: ${parsedSize};
     font-size: ${parsedSize};
     color: ${color};
+    z-index: 1000000;
   `;
   const button = doc.createElement('button');
   button.style.cssText =
@@ -290,6 +292,7 @@ export const generateCloseButton = (
   */
   button.ariaLabel = 'Close modal button';
   button.setAttribute('data-qa-custom-close-button', 'true');
+  button.setAttribute('id', id);
   return button;
 };