From 6ff3c9895a281a7efaefe63839741b18bfde152d Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Mon, 3 Jun 2024 12:45:21 +0530 Subject: [PATCH 01/11] modified georouting and pep so that pep only appears if a) GRM is not shown or b) GRM is dismissed --- libs/features/georouting/georouting.js | 17 ++++++++++++----- libs/features/georoutingv2/georoutingv2.js | 12 +++++++----- libs/features/webapp-prompt/webapp-prompt.js | 14 ++++++++++++-- libs/utils/utils.js | 2 +- 4 files changed, 32 insertions(+), 13 deletions(-) diff --git a/libs/features/georouting/georouting.js b/libs/features/georouting/georouting.js index 77e4203107..13480dd1f7 100644 --- a/libs/features/georouting/georouting.js +++ b/libs/features/georouting/georouting.js @@ -137,20 +137,23 @@ export default async function loadGeoRouting(config, createTag, getMetadata) { const storedLocale = storedInter === 'us' ? '' : storedInter; const resp = await fetch(`${config.contentRoot ?? ''}/georouting.json`); - if (!resp.ok) return; + if (!resp.ok) return false; const json = await resp.json(); const urlGeoData = json.data.find((d) => d.prefix === urlLocale); - if (!urlGeoData) return; + if (!urlGeoData) return false; if (storedLocale || storedLocale === '') { // Show modal when url and cookie disagree if (urlLocale.split('_')[0] !== storedLocale.split('_')[0]) { const localeMatches = json.data.filter((d) => d.prefix === storedLocale); const details = await getDetails(urlGeoData, localeMatches, config, createTag, getMetadata); - if (details) { await showModal(details); } + if (details) { + await showModal(details); + return true; + } } - return; + return false; } // Show modal when derived countries from url locale and akamai disagree @@ -158,6 +161,10 @@ export default async function loadGeoRouting(config, createTag, getMetadata) { if (akamaiCode && !getCodes(urlGeoData).includes(akamaiCode)) { const localeMatches = getMatches(json.data, akamaiCode); const details = await getDetails(urlGeoData, localeMatches, config, createTag, getMetadata); - if (details) { await showModal(details); } + if (details) { + await showModal(details); + return true; + } } + return false; } diff --git a/libs/features/georoutingv2/georoutingv2.js b/libs/features/georoutingv2/georoutingv2.js index bc64153e99..c44e1c0728 100644 --- a/libs/features/georoutingv2/georoutingv2.js +++ b/libs/features/georoutingv2/georoutingv2.js @@ -274,7 +274,7 @@ export default async function loadGeoRouting( loadBlockFunc, loadStyleFunc, ) { - if (getGeoroutingOverride()) return; + if (getGeoroutingOverride()) return false; config = conf; createTag = createTagFunc; getMetadata = getMetadataFunc; @@ -285,8 +285,7 @@ export default async function loadGeoRouting( if (!resp.ok) { // eslint-disable-next-line import/no-cycle const { default: loadGeoRoutingOld } = await import('../georouting/georouting.js'); - loadGeoRoutingOld(config, createTag, getMetadata); - return; + return loadGeoRoutingOld(config, createTag, getMetadata); } const json = await resp.json(); @@ -297,7 +296,7 @@ export default async function loadGeoRouting( const storedLocale = storedInter === 'us' ? '' : storedInter; const urlGeoData = json.georouting.data.find((d) => d.prefix === urlLocale); - if (!urlGeoData) return; + if (!urlGeoData) return false; if (storedLocale || storedLocale === '') { const urlLocaleGeo = urlLocale.split('_')[0]; @@ -313,9 +312,10 @@ export default async function loadGeoRouting( sendAnalyticsFunc( new Event(`Load:${storedLocaleGeo || 'us'}-${urlLocaleGeo || 'us'}|Geo_Routing_Modal`), ); + return true; } } - return; + return false; } // Show modal when derived countries from url locale and akamai disagree @@ -333,5 +333,7 @@ export default async function loadGeoRouting( } } catch (e) { window.lana?.log(e.message); + return false; } + return true; } diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js index 56d0a92584..4fe0923657 100644 --- a/libs/features/webapp-prompt/webapp-prompt.js +++ b/libs/features/webapp-prompt/webapp-prompt.js @@ -35,6 +35,16 @@ const getIcon = (content) => { return icons.company; }; +const waitForClosedGRMThen = (loadPEP) => { + const grExists = !!document.querySelector('.locale-modal-v2') + || !!document.querySelector('.locale-modal'); + if (grExists) { + setTimeout(() => waitForClosedGRMThen(loadPEP), 200); + return; + } + loadPEP(); +}; + class AppPrompt { constructor({ promptPath, entName, parent, getAnchorState } = {}) { this.promptPath = promptPath; @@ -43,8 +53,8 @@ class AppPrompt { this.getAnchorState = getAnchorState; this.id = this.promptPath.split('/').pop(); this.elements = {}; - - this.init(); + if (getConfig().grmActive) waitForClosedGRMThen(this.init); + else this.init(); } init = async () => { diff --git a/libs/utils/utils.js b/libs/utils/utils.js index 26848bb389..87688ea73c 100644 --- a/libs/utils/utils.js +++ b/libs/utils/utils.js @@ -940,7 +940,7 @@ async function loadPostLCP(config) { const georouting = getMetadata('georouting') || config.geoRouting; if (georouting === 'on') { const { default: loadGeoRouting } = await import('../features/georoutingv2/georoutingv2.js'); - await loadGeoRouting(config, createTag, getMetadata, loadBlock, loadStyle); + config.grmActive = await loadGeoRouting(config, createTag, getMetadata, loadBlock, loadStyle); } if (config.mep?.targetEnabled === 'gnav') { await loadMartech({ persEnabled: true, postLCP: true }); From 2d0ee33eb63fa0a5e44867105e265fcd1a99c937 Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Mon, 3 Jun 2024 13:54:04 +0530 Subject: [PATCH 02/11] Unit test for GRM/PEP interaction --- .../webapp-prompt/webapp-prompt.test.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js index 635b8ff6d8..9dbf92c82f 100644 --- a/test/features/webapp-prompt/webapp-prompt.test.js +++ b/test/features/webapp-prompt/webapp-prompt.test.js @@ -1,6 +1,7 @@ import { expect } from '@esm-bundle/chai'; import sinon, { stub } from 'sinon'; import pepPromptContent from './mocks/pep-prompt-content.js'; +import { getConfig } from '../../../libs/utils/utils.js'; describe('PEP', () => { let clock; @@ -91,6 +92,22 @@ describe('PEP', () => { await clock.runAllAsync(); expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist; }); + + it('should not render PEP when the GRM is open', async () => { + const config = getConfig(); + config.grmActive = true; + document.body.insertAdjacentHTML('afterbegin', '
'); + document.body.insertAdjacentHTML('afterbegin', '
'); + await initPep({}); + clock.next(); + expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist; + document.querySelector('.locale-modal-v2')?.remove(); + clock.next(); + expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist; + document.querySelector('locale-modal')?.remove(); + await clock.runAllAsync(); + expect(document.querySelector(allSelectors.pepWrapper)).to.exist; + }); }); describe('PEP configuration tests', () => { From 164037a8f48578c7d39708f7f9c995fb61fe6ebb Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Mon, 3 Jun 2024 14:00:02 +0530 Subject: [PATCH 03/11] changed grmActive to geoRoutinActive --- libs/features/webapp-prompt/webapp-prompt.js | 2 +- libs/utils/utils.js | 8 +++++++- test/features/webapp-prompt/webapp-prompt.test.js | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js index 4fe0923657..e94e180102 100644 --- a/libs/features/webapp-prompt/webapp-prompt.js +++ b/libs/features/webapp-prompt/webapp-prompt.js @@ -53,7 +53,7 @@ class AppPrompt { this.getAnchorState = getAnchorState; this.id = this.promptPath.split('/').pop(); this.elements = {}; - if (getConfig().grmActive) waitForClosedGRMThen(this.init); + if (getConfig().geoRoutingActive) waitForClosedGRMThen(this.init); else this.init(); } diff --git a/libs/utils/utils.js b/libs/utils/utils.js index 87688ea73c..b981d38176 100644 --- a/libs/utils/utils.js +++ b/libs/utils/utils.js @@ -940,7 +940,13 @@ async function loadPostLCP(config) { const georouting = getMetadata('georouting') || config.geoRouting; if (georouting === 'on') { const { default: loadGeoRouting } = await import('../features/georoutingv2/georoutingv2.js'); - config.grmActive = await loadGeoRouting(config, createTag, getMetadata, loadBlock, loadStyle); + config.geoRoutingActive = await loadGeoRouting( + config, + createTag, + getMetadata, + loadBlock, + loadStyle, + ); } if (config.mep?.targetEnabled === 'gnav') { await loadMartech({ persEnabled: true, postLCP: true }); diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js index 9dbf92c82f..82a295a8b5 100644 --- a/test/features/webapp-prompt/webapp-prompt.test.js +++ b/test/features/webapp-prompt/webapp-prompt.test.js @@ -95,7 +95,7 @@ describe('PEP', () => { it('should not render PEP when the GRM is open', async () => { const config = getConfig(); - config.grmActive = true; + config.geoRoutingActive = true; document.body.insertAdjacentHTML('afterbegin', '
'); document.body.insertAdjacentHTML('afterbegin', '
'); await initPep({}); From 0cff0aecb5a7c47a4813050d4e7ecfbb0764e0ba Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Mon, 3 Jun 2024 14:32:13 +0530 Subject: [PATCH 04/11] Fixed unit test for grm/pep interaction --- test/features/webapp-prompt/test-utilities.js | 4 ++-- .../webapp-prompt/webapp-prompt.test.js | 21 +++++++++++-------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/test/features/webapp-prompt/test-utilities.js b/test/features/webapp-prompt/test-utilities.js index d74376db6c..a9527a773a 100644 --- a/test/features/webapp-prompt/test-utilities.js +++ b/test/features/webapp-prompt/test-utilities.js @@ -28,13 +28,13 @@ export const defaultConfig = { export const mockRes = importedMockRes; -export const initPep = async ({ entName = 'firefly-web-usage', isAnchorOpen = false, getAnchorStateMock = false }) => { +export const initPep = async ({ entName = 'firefly-web-usage', isAnchorOpen = false, getAnchorStateMock = false, geoRoutingActive = false }) => { setConfig({ imsClientId: 'milo', codeRoot: '/libs', locales: { '': { ietf: 'en-US', tk: 'hah7vzn.css' } }, }); - updateConfig({ ...getConfig(), entitlements: () => ['firefly-web-usage'] }); + updateConfig({ ...getConfig(), entitlements: () => ['firefly-web-usage'], geoRoutingActive }); await setViewport(viewports.desktop); await loadStyle('../../../libs/features/webapp-prompt/webapp-prompt.css'); diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js index 82a295a8b5..73d934177f 100644 --- a/test/features/webapp-prompt/webapp-prompt.test.js +++ b/test/features/webapp-prompt/webapp-prompt.test.js @@ -1,7 +1,7 @@ import { expect } from '@esm-bundle/chai'; import sinon, { stub } from 'sinon'; import pepPromptContent from './mocks/pep-prompt-content.js'; -import { getConfig } from '../../../libs/utils/utils.js'; +import { getConfig, setConfig } from '../../../libs/utils/utils.js'; describe('PEP', () => { let clock; @@ -94,17 +94,20 @@ describe('PEP', () => { }); it('should not render PEP when the GRM is open', async () => { - const config = getConfig(); - config.geoRoutingActive = true; document.body.insertAdjacentHTML('afterbegin', '
'); document.body.insertAdjacentHTML('afterbegin', '
'); - await initPep({}); - clock.next(); - expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist; + + await initPep({ geoRoutingActive: true }); + + try { + clock.runAll(); + } catch (e) { + expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist; + } + document.querySelector('.locale-modal-v2')?.remove(); - clock.next(); - expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist; - document.querySelector('locale-modal')?.remove(); + document.querySelector('.locale-modal')?.remove(); + await clock.runAllAsync(); expect(document.querySelector(allSelectors.pepWrapper)).to.exist; }); From 50c63e305da057aee85c2808c0f101e91db6c37e Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Mon, 3 Jun 2024 14:33:30 +0530 Subject: [PATCH 05/11] removed unused imports --- test/features/webapp-prompt/webapp-prompt.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js index 73d934177f..4ebe7db860 100644 --- a/test/features/webapp-prompt/webapp-prompt.test.js +++ b/test/features/webapp-prompt/webapp-prompt.test.js @@ -1,7 +1,6 @@ import { expect } from '@esm-bundle/chai'; import sinon, { stub } from 'sinon'; import pepPromptContent from './mocks/pep-prompt-content.js'; -import { getConfig, setConfig } from '../../../libs/utils/utils.js'; describe('PEP', () => { let clock; From 99e4d1de48fc460db55352fdf3716c42f3737b5a Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Tue, 4 Jun 2024 17:59:22 +0530 Subject: [PATCH 06/11] Cleaned up the implementation --- libs/features/georouting/georouting.js | 17 +++++------------ libs/features/georoutingv2/georoutingv2.js | 12 +++++------- libs/features/webapp-prompt/webapp-prompt.js | 9 +++++---- libs/utils/utils.js | 8 +------- test/features/webapp-prompt/test-utilities.js | 4 ++-- .../webapp-prompt/webapp-prompt.test.js | 2 +- 6 files changed, 19 insertions(+), 33 deletions(-) diff --git a/libs/features/georouting/georouting.js b/libs/features/georouting/georouting.js index 13480dd1f7..77e4203107 100644 --- a/libs/features/georouting/georouting.js +++ b/libs/features/georouting/georouting.js @@ -137,23 +137,20 @@ export default async function loadGeoRouting(config, createTag, getMetadata) { const storedLocale = storedInter === 'us' ? '' : storedInter; const resp = await fetch(`${config.contentRoot ?? ''}/georouting.json`); - if (!resp.ok) return false; + if (!resp.ok) return; const json = await resp.json(); const urlGeoData = json.data.find((d) => d.prefix === urlLocale); - if (!urlGeoData) return false; + if (!urlGeoData) return; if (storedLocale || storedLocale === '') { // Show modal when url and cookie disagree if (urlLocale.split('_')[0] !== storedLocale.split('_')[0]) { const localeMatches = json.data.filter((d) => d.prefix === storedLocale); const details = await getDetails(urlGeoData, localeMatches, config, createTag, getMetadata); - if (details) { - await showModal(details); - return true; - } + if (details) { await showModal(details); } } - return false; + return; } // Show modal when derived countries from url locale and akamai disagree @@ -161,10 +158,6 @@ export default async function loadGeoRouting(config, createTag, getMetadata) { if (akamaiCode && !getCodes(urlGeoData).includes(akamaiCode)) { const localeMatches = getMatches(json.data, akamaiCode); const details = await getDetails(urlGeoData, localeMatches, config, createTag, getMetadata); - if (details) { - await showModal(details); - return true; - } + if (details) { await showModal(details); } } - return false; } diff --git a/libs/features/georoutingv2/georoutingv2.js b/libs/features/georoutingv2/georoutingv2.js index c44e1c0728..bc64153e99 100644 --- a/libs/features/georoutingv2/georoutingv2.js +++ b/libs/features/georoutingv2/georoutingv2.js @@ -274,7 +274,7 @@ export default async function loadGeoRouting( loadBlockFunc, loadStyleFunc, ) { - if (getGeoroutingOverride()) return false; + if (getGeoroutingOverride()) return; config = conf; createTag = createTagFunc; getMetadata = getMetadataFunc; @@ -285,7 +285,8 @@ export default async function loadGeoRouting( if (!resp.ok) { // eslint-disable-next-line import/no-cycle const { default: loadGeoRoutingOld } = await import('../georouting/georouting.js'); - return loadGeoRoutingOld(config, createTag, getMetadata); + loadGeoRoutingOld(config, createTag, getMetadata); + return; } const json = await resp.json(); @@ -296,7 +297,7 @@ export default async function loadGeoRouting( const storedLocale = storedInter === 'us' ? '' : storedInter; const urlGeoData = json.georouting.data.find((d) => d.prefix === urlLocale); - if (!urlGeoData) return false; + if (!urlGeoData) return; if (storedLocale || storedLocale === '') { const urlLocaleGeo = urlLocale.split('_')[0]; @@ -312,10 +313,9 @@ export default async function loadGeoRouting( sendAnalyticsFunc( new Event(`Load:${storedLocaleGeo || 'us'}-${urlLocaleGeo || 'us'}|Geo_Routing_Modal`), ); - return true; } } - return false; + return; } // Show modal when derived countries from url locale and akamai disagree @@ -333,7 +333,5 @@ export default async function loadGeoRouting( } } catch (e) { window.lana?.log(e.message); - return false; } - return true; } diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js index e94e180102..ed5e9a69dd 100644 --- a/libs/features/webapp-prompt/webapp-prompt.js +++ b/libs/features/webapp-prompt/webapp-prompt.js @@ -35,10 +35,11 @@ const getIcon = (content) => { return icons.company; }; -const waitForClosedGRMThen = (loadPEP) => { - const grExists = !!document.querySelector('.locale-modal-v2') +const geoRoutingActive = () => !!document.querySelector('.locale-modal-v2') || !!document.querySelector('.locale-modal'); - if (grExists) { + +const waitForClosedGRMThen = (loadPEP) => { + if (geoRoutingActive()) { setTimeout(() => waitForClosedGRMThen(loadPEP), 200); return; } @@ -53,7 +54,7 @@ class AppPrompt { this.getAnchorState = getAnchorState; this.id = this.promptPath.split('/').pop(); this.elements = {}; - if (getConfig().geoRoutingActive) waitForClosedGRMThen(this.init); + if (geoRoutingActive()) waitForClosedGRMThen(this.init); else this.init(); } diff --git a/libs/utils/utils.js b/libs/utils/utils.js index b981d38176..26848bb389 100644 --- a/libs/utils/utils.js +++ b/libs/utils/utils.js @@ -940,13 +940,7 @@ async function loadPostLCP(config) { const georouting = getMetadata('georouting') || config.geoRouting; if (georouting === 'on') { const { default: loadGeoRouting } = await import('../features/georoutingv2/georoutingv2.js'); - config.geoRoutingActive = await loadGeoRouting( - config, - createTag, - getMetadata, - loadBlock, - loadStyle, - ); + await loadGeoRouting(config, createTag, getMetadata, loadBlock, loadStyle); } if (config.mep?.targetEnabled === 'gnav') { await loadMartech({ persEnabled: true, postLCP: true }); diff --git a/test/features/webapp-prompt/test-utilities.js b/test/features/webapp-prompt/test-utilities.js index a9527a773a..d74376db6c 100644 --- a/test/features/webapp-prompt/test-utilities.js +++ b/test/features/webapp-prompt/test-utilities.js @@ -28,13 +28,13 @@ export const defaultConfig = { export const mockRes = importedMockRes; -export const initPep = async ({ entName = 'firefly-web-usage', isAnchorOpen = false, getAnchorStateMock = false, geoRoutingActive = false }) => { +export const initPep = async ({ entName = 'firefly-web-usage', isAnchorOpen = false, getAnchorStateMock = false }) => { setConfig({ imsClientId: 'milo', codeRoot: '/libs', locales: { '': { ietf: 'en-US', tk: 'hah7vzn.css' } }, }); - updateConfig({ ...getConfig(), entitlements: () => ['firefly-web-usage'], geoRoutingActive }); + updateConfig({ ...getConfig(), entitlements: () => ['firefly-web-usage'] }); await setViewport(viewports.desktop); await loadStyle('../../../libs/features/webapp-prompt/webapp-prompt.css'); diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js index 4ebe7db860..1e90c0be96 100644 --- a/test/features/webapp-prompt/webapp-prompt.test.js +++ b/test/features/webapp-prompt/webapp-prompt.test.js @@ -96,7 +96,7 @@ describe('PEP', () => { document.body.insertAdjacentHTML('afterbegin', '
'); document.body.insertAdjacentHTML('afterbegin', '
'); - await initPep({ geoRoutingActive: true }); + await initPep({}); try { clock.runAll(); From f1b4a5ede5e55ad7b22825c9234831a30fa2acae Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Tue, 4 Jun 2024 18:02:37 +0530 Subject: [PATCH 07/11] Changed from polling to listening for an event --- libs/features/webapp-prompt/webapp-prompt.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js index ed5e9a69dd..32894b9637 100644 --- a/libs/features/webapp-prompt/webapp-prompt.js +++ b/libs/features/webapp-prompt/webapp-prompt.js @@ -39,10 +39,7 @@ const geoRoutingActive = () => !!document.querySelector('.locale-modal-v2') || !!document.querySelector('.locale-modal'); const waitForClosedGRMThen = (loadPEP) => { - if (geoRoutingActive()) { - setTimeout(() => waitForClosedGRMThen(loadPEP), 200); - return; - } + document.addEventListener('milo:modal:closed', loadPEP); loadPEP(); }; From c2aadc2e870ac4c3f10ed460a7bddfc9f7bfd61b Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Tue, 4 Jun 2024 18:04:07 +0530 Subject: [PATCH 08/11] removed an unnecessary line --- libs/features/webapp-prompt/webapp-prompt.js | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js index 32894b9637..ba313207ed 100644 --- a/libs/features/webapp-prompt/webapp-prompt.js +++ b/libs/features/webapp-prompt/webapp-prompt.js @@ -40,7 +40,6 @@ const geoRoutingActive = () => !!document.querySelector('.locale-modal-v2') const waitForClosedGRMThen = (loadPEP) => { document.addEventListener('milo:modal:closed', loadPEP); - loadPEP(); }; class AppPrompt { From c52ffa91d3ddc290784470ab3d6041b4fa0dc710 Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Tue, 4 Jun 2024 18:10:00 +0530 Subject: [PATCH 09/11] Modified unit test --- libs/features/webapp-prompt/webapp-prompt.js | 2 +- test/features/webapp-prompt/webapp-prompt.test.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js index ba313207ed..280d4679ee 100644 --- a/libs/features/webapp-prompt/webapp-prompt.js +++ b/libs/features/webapp-prompt/webapp-prompt.js @@ -39,7 +39,7 @@ const geoRoutingActive = () => !!document.querySelector('.locale-modal-v2') || !!document.querySelector('.locale-modal'); const waitForClosedGRMThen = (loadPEP) => { - document.addEventListener('milo:modal:closed', loadPEP); + window.addEventListener('milo:modal:closed', loadPEP); }; class AppPrompt { diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js index 1e90c0be96..01f962c4a0 100644 --- a/test/features/webapp-prompt/webapp-prompt.test.js +++ b/test/features/webapp-prompt/webapp-prompt.test.js @@ -106,6 +106,8 @@ describe('PEP', () => { document.querySelector('.locale-modal-v2')?.remove(); document.querySelector('.locale-modal')?.remove(); + const ev = new CustomEvent('milo:modal:closed'); + window.dispatchEvent(ev); await clock.runAllAsync(); expect(document.querySelector(allSelectors.pepWrapper)).to.exist; From d73dbf8a7861d9551b074fe823cd9fae4b027cba Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Tue, 4 Jun 2024 21:11:09 +0530 Subject: [PATCH 10/11] Changed the implementation to use polling for any modal --- libs/features/webapp-prompt/webapp-prompt.js | 13 ++++++++----- test/features/webapp-prompt/webapp-prompt.test.js | 2 -- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js index 280d4679ee..c1be12f4a9 100644 --- a/libs/features/webapp-prompt/webapp-prompt.js +++ b/libs/features/webapp-prompt/webapp-prompt.js @@ -35,11 +35,14 @@ const getIcon = (content) => { return icons.company; }; -const geoRoutingActive = () => !!document.querySelector('.locale-modal-v2') - || !!document.querySelector('.locale-modal'); +const modalsActive = () => !!document.querySelector('.dialog-modal'); -const waitForClosedGRMThen = (loadPEP) => { - window.addEventListener('milo:modal:closed', loadPEP); +const waitForClosedModalsThen = (loadPEP) => { + if (modalsActive()) { + setTimeout(() => waitForClosedModalsThen(loadPEP), 200); + return; + } + loadPEP(); }; class AppPrompt { @@ -50,7 +53,7 @@ class AppPrompt { this.getAnchorState = getAnchorState; this.id = this.promptPath.split('/').pop(); this.elements = {}; - if (geoRoutingActive()) waitForClosedGRMThen(this.init); + if (modalsActive()) waitForClosedModalsThen(this.init); else this.init(); } diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js index 01f962c4a0..1e90c0be96 100644 --- a/test/features/webapp-prompt/webapp-prompt.test.js +++ b/test/features/webapp-prompt/webapp-prompt.test.js @@ -106,8 +106,6 @@ describe('PEP', () => { document.querySelector('.locale-modal-v2')?.remove(); document.querySelector('.locale-modal')?.remove(); - const ev = new CustomEvent('milo:modal:closed'); - window.dispatchEvent(ev); await clock.runAllAsync(); expect(document.querySelector(allSelectors.pepWrapper)).to.exist; From 2ad215aa295e4ed56b4a2d7e7878a3d746e1ee75 Mon Sep 17 00:00:00 2001 From: Raghav Sharma Date: Wed, 5 Jun 2024 14:12:16 +0530 Subject: [PATCH 11/11] Changed pep loading logic to poll for modals only after the close modal dialog comes through --- libs/features/webapp-prompt/webapp-prompt.js | 9 +++++++-- test/features/webapp-prompt/webapp-prompt.test.js | 9 ++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js index c1be12f4a9..418d2ad68d 100644 --- 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 index 1e90c0be96..c3e6bf6c6c 100644 --- 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', '
'); - document.body.insertAdjacentHTML('afterbegin', '
'); + document.body.insertAdjacentHTML('afterbegin', '
'); + document.body.insertAdjacentHTML('afterbegin', '
'); 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;