Changed pep loading logic to poll for modals only after the close mod…

…al dialog comes through
adobecom · Jun 5, 2024 · 2ad215a · 2ad215a
1 parent d5fbaef
commit 2ad215a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js
@@ -53,8 +53,13 @@ class AppPrompt {
     this.getAnchorState = getAnchorState;
     this.id = this.promptPath.split('/').pop();
     this.elements = {};
-    if (modalsActive()) waitForClosedModalsThen(this.init);
-    else this.init();
+    if (modalsActive()) {
+      window.addEventListener(
+        'milo:modal:closed',
+        () => waitForClosedModalsThen(this.init),
+        { once: true },
+      );
+    } else this.init();
   }
 
   init = async () => {

diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js
@@ -93,8 +93,8 @@ describe('PEP', () => {
     });
 
     it('should not render PEP when the GRM is open', async () => {
-      document.body.insertAdjacentHTML('afterbegin', '<div class="locale-modal-v2"></div>');
-      document.body.insertAdjacentHTML('afterbegin', '<div class="locale-modal"></div>');
+      document.body.insertAdjacentHTML('afterbegin', '<div class="locale-modal-v2 dialog-modal"></div>');
+      document.body.insertAdjacentHTML('afterbegin', '<div class="dialog-modal"></div>');
 
       await initPep({});
 
@@ -104,8 +104,11 @@ describe('PEP', () => {
         expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
       }
 
+      const event = new CustomEvent('milo:modal:closed');
+      window.dispatchEvent(event);
+
       document.querySelector('.locale-modal-v2')?.remove();
-      document.querySelector('.locale-modal')?.remove();
+      document.querySelector('.dialog-modal')?.remove();
 
       await clock.runAllAsync();
       expect(document.querySelector(allSelectors.pepWrapper)).to.exist;