Merge pull request #934 from adobecom/revert-919-MWPW-158083

Revert "MWPW-158083: Mobile Widget - Acrobat exit modal "
adobecom · Jan 7, 2025 · 6a2dbb3 · 6a2dbb3
2 parents 87e0ccb + 4e93b0d
commit 6a2dbb3
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 210 deletions.
diff --git a/acrobat/blocks/mobile-widget/mobile-widget.js b/acrobat/blocks/mobile-widget/mobile-widget.js
@@ -1,8 +1,6 @@
 import mobileAnalytics from '../../scripts/alloy/mobile-widget.js';
 import mobileAnalyticsShown from '../../scripts/alloy/mobile-widget-shown.js';
-import { setLibs, getEnv, isOldBrowser } from '../../scripts/utils.js';
-
-const miloLibs = setLibs('/libs');
+import { getEnv, isOldBrowser } from '../../scripts/utils.js';
 
 const verbRedirMap = {
   createpdf: 'createpdf',
@@ -34,7 +32,6 @@ const verbRedirMapAnalytics = {
 const EOLBrowserPage = 'https://acrobat.adobe.com/home/index-browser-eol.html';
 const fallBack = 'https://www.adobe.com/go/acrobat-overview';
 
-// Redirect Logic
 function redDir(verb) {
   if (isOldBrowser()) {
     window.location.href = EOLBrowserPage;
@@ -52,7 +49,6 @@ function redDir(verb) {
   window.location.href = newLocation;
 }
 
-// Helper to Create HTML Tags
 function createTag(tag, attributes, html) {
   const el = document.createElement(tag);
   if (html) {
@@ -66,17 +62,8 @@ function createTag(tag, attributes, html) {
   return el;
 }
 
-let aaVerbName = '';
-let appLink = '';
-let modalCtaLink = '';
-let externalLinkHref = null;
-let isAcrobatExitOpen = false;
-let inactivityTimer;
-const inactivityInterval = 20000;
-
-// Mobile Widget Creation
 function createMobileWidget(element, content, verb) {
-  aaVerbName = `${verbRedirMapAnalytics[verb] || verb}`;
+  const aaVerbName = `${verbRedirMapAnalytics[verb] || verb}`;
   const artID = content[1].querySelector('a')?.href || content[1].querySelector('img')?.src;
 
   const wrapper = createTag('div', { class: 'mobile-widget_wrapper' });
@@ -91,6 +78,7 @@ function createMobileWidget(element, content, verb) {
   const artworkWrapper = createTag('div', { class: 'mobile-widget_artwork-wrapper' });
   const copy = createTag('div', { class: 'mobile-widget_copy' }, content[2].textContent);
 
+  let appLink = '';
   if (/iPad|iPhone|iPod/.test(window?.browser?.ua) && !window.MSStream) {
     appLink = content[4].textContent.toString().trim();
   } else if (/android/i.test(window?.browser?.ua)) {
@@ -99,7 +87,7 @@ function createMobileWidget(element, content, verb) {
     appLink = content[4].textContent.toString().trim();
   }
 
-  const mobileCta = createTag('a', { class: 'mobile-widget_cta', href: appLink, target: '_blank' }, content[3].textContent);
+  const mobileCta = createTag('a', { class: 'mobile-widget_cta', href: appLink }, content[3].textContent);
   const ctaWrapper = createTag('div', { class: 'mobile-widget_cta-wrapper' });
 
   titleWrapper.append(titleImg, title);
@@ -118,146 +106,16 @@ function createMobileWidget(element, content, verb) {
   });
 }
 
-window.addEventListener('milo:modal:closed', () => {
-  if (!isAcrobatExitOpen) return;
-  mobileAnalytics(aaVerbName, 'acrobat-exit-modal:closed');
-  isAcrobatExitOpen = false;
-  sessionStorage.setItem('modalDismissed', 'true');
-  if (externalLinkHref) {
-    window.location.href = externalLinkHref;
-    externalLinkHref = '';
-  }
-});
-
-const getPlaceHolders = async () => {
-  const { getConfig } = await import(`${miloLibs}/utils/utils.js`);
-  const config = await getConfig();
-
-  if (!Object.keys(window.mph || {}).length) {
-    const placeholdersPath = `${config.locale.contentRoot}/placeholders.json`;
-    try {
-      const response = await fetch(placeholdersPath);
-      if (response.ok) {
-        const placeholderData = await response.json();
-        placeholderData.data.forEach(({ key, value }) => {
-          window.mph[key] = value.replace(/\u00A0/g, ' ');
-        });
-      }
-    } catch (error) {
-      window.lana?.log(`Failed to load placeholders: ${error?.message}`);
-    }
-  }
-};
-
-async function showModal(event = 'shown') {
-  const mph = window.mph || {};
-  await getPlaceHolders();
-  const { getModal } = await import(`${miloLibs}/blocks/modal/modal.js`);
-  const acrobatIcon = createTag('img', { class: 'modal-icon', src: '/acrobat/img/icons/widget-icon.png' });
-  const acrobatLabel = createTag('p', { class: 'modal-label' }, 'Adobe Acrobat');
-  const acrobatLogo = createTag('div', { class: 'modal-logo' });
-  acrobatLogo.append(acrobatIcon, acrobatLabel);
-  const modalTitle = createTag('h2', { class: 'modal-title' }, mph['acrobat-exit-modal-title'] || 'Before you go, get the free mobile app.');
-  const modalMessage = createTag('p', { class: 'modal-message' }, mph['acrobat-exit-modal-message'] || 'Quickly comment, sign, and share PDFs — all from your phone.');
-  const modalCta = createTag('a', { class: 'modal-cta', href: mph['acrobat-exit-modal-cta-url'] || '/acrobat/mobile-app.html' }, mph['acrobat-exit-modal-cta-label'] || 'Download app');
-  modalCtaLink = modalCta.href;
-  const modalContent = createTag('div', { class: 'modal-content' });
-  modalContent.append(acrobatLogo, modalTitle, modalMessage, modalCta);
-  isAcrobatExitOpen = true;
-  await getModal(null, {
-    id: 'acrobat-exit',
-    content: modalContent,
-    closeEvent: 'Closed',
-    class: 'acrobat-exit',
-  });
-  mobileAnalyticsShown(aaVerbName, `acrobat-exit-modal:shown-${event}`);
-}
-
-const internalDomains = [
-  'adobe.com',
-  'www.adobe.com',
-  'www.stage.adobe.com',
-];
-
-const internalPatterns = [
-  '**--dc--adobecom.aem.page',
-  '**--dc--adobecom.aem.live',
-  '**--dc--adobecom.hlx.page',
-  '**--dc--adobecom.hlx.live',
-];
-
-function isInternalDomain(hostname) {
-  if (internalDomains.includes(hostname)) return true;
-  return internalPatterns.some((pattern) => hostname.includes(pattern));
-}
-
-function isExternalLink(link) {
-  // eslint-disable-next-line compat/compat
-  const linkHost = new URL(link.href).hostname;
-  return !(
-    linkHost === window.location.hostname
-    || isInternalDomain(linkHost)
-  );
-}
-
-function shouldOpenModal(link) {
-  return (
-    link && link.href !== appLink && link.href !== modalCtaLink && isExternalLink(link)
-  );
-}
-
-document.addEventListener('click', (event) => {
-  const link = event.target.closest('a');
-  if (shouldOpenModal(link)) {
-    event.preventDefault();
-    externalLinkHref = link.href;
-    if (!isAcrobatExitOpen) {
-      showModal('external-link');
-    } else {
-      window.location.href = link.href;
-    }
-  }
-});
-
-window.addEventListener('beforeunload', async (event) => {
-  if (sessionStorage.getItem('modalDismissed') === 'true') {
-    return;
-  }
-  event.preventDefault();
-  event.returnValue = '';
-  if (!isAcrobatExitOpen) {
-    await showModal('before-unload');
-  }
-});
-
 export default async function init(element) {
   element.closest('main > div').dataset.section = 'widget';
   const content = Array.from(element.querySelectorAll(':scope > div'));
   const VERB = element.dataset.verb;
   content.forEach((con) => con.classList.add('hide'));
-
-  if (!element.querySelector('.mobile-widget_wrapper')) {
-    createMobileWidget(element, content, VERB);
-  }
-
+  createMobileWidget(element, content, VERB);
+  // Listen for the IMS:Ready event and call redDir if user is signed in
   window.addEventListener('IMS:Ready', async () => {
     if (window.adobeIMS.isSignedInUser()) {
       redDir(VERB);
     }
   });
 }
-
-function resetInactivityTimer() {
-  clearTimeout(inactivityTimer);
-  inactivityTimer = setTimeout(async () => {
-    if (!sessionStorage.getItem('modalDismissed') && !isAcrobatExitOpen) {
-      await showModal('idle');
-    }
-  }, inactivityInterval);
-}
-
-['mousemove', 'click', 'keypress', 'scroll', 'touchstart'].forEach((event) => {
-  document.addEventListener(event, resetInactivityTimer);
-});
-
-resetInactivityTimer();
diff --git a/acrobat/scripts/alloy/mobile-widget-shown.js b/acrobat/scripts/alloy/mobile-widget-shown.js
@@ -23,8 +23,7 @@ if (params.dropzone2) {
   appTags.push('dropzone2');
 }
 
-export default function init(verb, type = 'landing:shown') {
-  const eventName = `acrobat:verb-${verb}:${type}`;
+export default function init(verb) {
   const event = {
     documentUnloading: true,
     data: {
@@ -33,14 +32,14 @@ export default function init(verb, type = 'landing:shown') {
         webInteraction: {
           linkClicks: { value: 1 },
           type: 'other',
-          name: eventName,
+          name: `acrobat:verb-${verb}:landing:shown`,
         },
       },
       _adobe_corpnew: {
         digitalData: {
-          dcweb: { event: { pagename: eventName } },
+          dcweb: { event: { pagename: `acrobat:verb-${verb}:landing:shown` } },
           dcweb2: {
-            event: { pagename: eventName },
+            event: { pagename: `acrobat:verb-${verb}:landing:shown` },
             source: {
               user_agent: navigator.userAgent,
               lang: document.documentElement.lang,

diff --git a/acrobat/scripts/alloy/mobile-widget.js b/acrobat/scripts/alloy/mobile-widget.js
@@ -23,8 +23,7 @@ if (params.dropzone2) {
   appTags.push('dropzone2');
 }
 
-export default function init(verb, type = 'goto-app:clicked') {
-  const eventName = `acrobat:verb-${verb}:${type}`;
+export default function init(verb) {
   const event = {
     documentUnloading: true,
     data: {
@@ -33,14 +32,14 @@ export default function init(verb, type = 'goto-app:clicked') {
         webInteraction: {
           linkClicks: { value: 1 },
           type: 'other',
-          name: eventName,
+          name: `acrobat:verb-${verb}:goto-app:clicked`,
         },
       },
       _adobe_corpnew: {
         digitalData: {
-          dcweb: { event: { pagename: eventName } },
+          dcweb: { event: { pagename: `acrobat:verb-${verb}:goto-app:clicked` } },
           dcweb2: {
-            event: { pagename: eventName },
+            event: { pagename: `acrobat:verb-${verb}:goto-app:clicked` },
             source: {
               user_agent: navigator.userAgent,
               lang: document.documentElement.lang,

diff --git a/acrobat/styles/styles.css b/acrobat/styles/styles.css
@@ -299,56 +299,6 @@ div.how-to ol li::before{
   margin-top: 10px;
 }
 
-.dialog-modal.acrobat-exit .modal-content {
-  padding: 40px 24px;
-}
-
-.dialog-modal.acrobat-exit .modal-content .modal-logo {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 40px;
-}
-
-.modal-logo  .modal-icon {
-  width: 40px;
-  height: auto;
-}
-
-.modal-logo .modal-label {
-  font-weight: 700;
-  line-height: 20px;
-  text-align: left;
-  text-underline-position: from-font;
-  text-decoration-skip-ink: none;
-  margin-left: 16px;
-}
-
-.modal-content .modal-title {
-  margin-block-start: 24px;
-  margin-block-end: 16px;
-}
-
-.modal-content .modal-message {
-  margin-block-start: 16px;
-}
-
-.modal-content .modal-cta {
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 19px;
-  border: solid 2px #0265dc;
-  background-color: #0265dc;
-  border-radius: 24px;
-  text-align: center;
-  color: white;
-  text-decoration: none;
-  padding: 5px 18px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .dialog-modal.extension-modal.backdrop-off {
   width: 30rem;
   max-height: 188px;

diff --git a/test/blocks/mobile-widget/mobile-widget.test.js b/test/blocks/mobile-widget/mobile-widget.test.js
@@ -3,8 +3,6 @@ import { expect } from '@esm-bundle/chai';
 
 const { default: init } = await import('../../../acrobat/blocks/mobile-widget/mobile-widget.js');
 
-sessionStorage.setItem('modalDismissed', 'true');
-
 describe('Mobile widget', () => {
   it('is complete', async () => {
     document.body.innerHTML = await readFile({ path: './mocks/body.html' });