MWPW-157460 Allow Ungated Marketo One Page Experience (#3071)

* MWPW-157460 Allow Ungated Marketo One Page Experience * update tests * remove unnecessary preference fix * cr - variables and remove try catch * remove error test html * add success type check Co-authored-by: Brandon Marshall <bmarshal@adobe.com> * fix syntax --------- Co-authored-by: Brandon Marshall <bmarshal@adobe.com>
adobecom · Oct 30, 2024 · 7255d63 · 7255d63
1 parent ac3a71d
commit 7255d63
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 15 deletions.
diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js
@@ -38,6 +38,7 @@ const FORM_MAP = {
   'co-partner-names': 'program.copartnernames',
   'sfdc-campaign-id': 'program.campaignids.sfdc',
 };
+export const FORM_PARAM = 'form';
 
 export const formValidate = (formEl) => {
   formEl.classList.remove('hide-errors');
@@ -69,7 +70,7 @@ export const decorateURL = (destination, baseURL = window.location) => {
     return destinationUrl.href;
   } catch (e) {
     /* c8 ignore next 4 */
-    window.lana?.log(`Error with Marketo destination URL: ${destination} ${e.message}`);
+    window.lana?.log(`Error with Marketo destination URL: ${destination} ${e.message}`, { tags: 'error,marketo' });
   }
 
   return null;
@@ -91,6 +92,38 @@ export const setPreferences = (formData) => {
   Object.entries(formData).forEach(([key, value]) => setPreference(key, value));
 };
 
+const showSuccessSection = (formData, scroll = true) => {
+  const show = (el) => {
+    el.classList.remove('hide-block');
+    if (scroll) el.scrollIntoView({ behavior: 'smooth' });
+  };
+  const successClass = formData[SUCCESS_SECTION]?.toLowerCase().replaceAll(' ', '-');
+  if (!successClass) {
+    window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' });
+    return;
+  }
+  const section = document.querySelector(`.section.${successClass}`);
+  if (section) {
+    show(section);
+    return;
+  }
+  // For Marquee use case
+  const maxIntervals = 6;
+  let count = 0;
+  const interval = setInterval(() => {
+    const el = document.querySelector(`.section.${successClass}`);
+    if (el) {
+      clearInterval(interval);
+      show(el);
+    }
+    count += 1;
+    if (count > maxIntervals) {
+      clearInterval(interval);
+      window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' });
+    }
+  }, 500);
+};
+
 export const formSuccess = (formEl, formData) => {
   const el = formEl.closest('.marketo');
   const parentModal = formEl?.closest('.dialog-modal');
@@ -108,18 +141,8 @@ export const formSuccess = (formEl, formData) => {
   }
 
   if (formData?.[SUCCESS_TYPE] !== 'section') return true;
-
-  try {
-    const section = formData[SUCCESS_SECTION].toLowerCase().replaceAll(' ', '-');
-    const success = document.querySelector(`.section.${section}`);
-    success.classList.remove('hide-block');
-    success.scrollIntoView({ behavior: 'smooth' });
-    setPreference(SUCCESS_TYPE, 'message');
-  } catch (e) {
-    /* c8 ignore next 2 */
-    window.lana?.log('Error showing Marketo success section', { tags: 'errorType=warn,module=marketo' });
-  }
-
+  showSuccessSection(formData);
+  setPreference(SUCCESS_TYPE, 'message');
   return false;
 };
 
@@ -161,7 +184,7 @@ export const loadMarketo = (el, formData) => {
     .catch(() => {
       /* c8 ignore next 2 */
       el.style.display = 'none';
-      window.lana?.log(`Error loading Marketo form for ${munchkinID}_${formID}`, { tags: 'errorType=error,module=marketo' });
+      window.lana?.log(`Error loading Marketo form for ${munchkinID}_${formID}`, { tags: 'error,marketo' });
     });
 };
 
@@ -198,6 +221,15 @@ export default function init(el) {
     return;
   }
 
+  const searchParams = new URLSearchParams(window.location.search);
+  const ungated = searchParams.get(FORM_PARAM) === 'off';
+
+  if (formData[SUCCESS_TYPE] === 'section' && ungated) {
+    el.classList.add('hide-block');
+    showSuccessSection(formData, false);
+    return;
+  }
+
   formData[SUCCESS_TYPE] = formData[SUCCESS_TYPE] || 'redirect';
 
   if (formData[SUCCESS_TYPE] === 'redirect') {

diff --git a/test/blocks/marketo/marketo.test.js b/test/blocks/marketo/marketo.test.js
@@ -1,10 +1,12 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
+import sinon, { stub } from 'sinon';
 import { delay } from '../../helpers/waitfor.js';
 import { setConfig } from '../../../libs/utils/utils.js';
-import init, { setPreferences, decorateURL } from '../../../libs/blocks/marketo/marketo.js';
+import init, { setPreferences, decorateURL, FORM_PARAM } from '../../../libs/blocks/marketo/marketo.js';
 
 const innerHTML = await readFile({ path: './mocks/body.html' });
+window.lana = { log: stub() };
 
 describe('marketo', () => {
   beforeEach(() => {
@@ -104,3 +106,53 @@ describe('marketo decorateURL', () => {
     expect(result).to.be.null;
   });
 });
+
+const onePage = await readFile({ path: './mocks/one-page-experience.html' });
+
+describe('Marketo ungated one page experience', () => {
+  let url;
+  let clock;
+
+  beforeEach(() => {
+    url = new URL(window.location);
+    url.searchParams.set(FORM_PARAM, 'off');
+    window.history.pushState({}, '', url);
+    document.body.innerHTML = onePage;
+    clock = sinon.useFakeTimers();
+  });
+
+  afterEach(() => {
+    url.searchParams.delete(FORM_PARAM);
+    window.history.pushState({}, '', url);
+    clock.restore();
+  });
+
+  it('shows success section', () => {
+    init(document.querySelector('.marketo'));
+    expect(document.querySelector('.section.form-success').classList.contains('hide-block')).to.be.false;
+  });
+
+  it('shows success section that appears after marketo', () => {
+    document.querySelector('#success-section').classList.remove('form-success');
+    init(document.querySelector('.marketo'));
+    expect(document.querySelector('#success-section').classList.contains('hide-block')).to.be.true;
+    document.querySelector('#success-section').classList.add('form-success');
+    clock.tick(500);
+    expect(document.querySelector('#success-section').classList.contains('hide-block')).to.be.false;
+  });
+
+  it('logs error if success section is not provided', async () => {
+    document.querySelector('#success-data').remove();
+    init(document.querySelector('.marketo'));
+    expect(window.lana.log.args[0][0]).to.equal('Error showing Marketo success section');
+  });
+
+  it('logs error if success section does not appear after maximum intervals', async () => {
+    document.querySelector('#success-section').classList.remove('form-success');
+
+    init(document.querySelector('.marketo'));
+    expect(document.querySelector('#success-section').classList.contains('hide-block')).to.be.true;
+    clock.runAll();
+    expect(window.lana.log.args[0][0]).to.equal('Error showing Marketo success section');
+  });
+});
diff --git a/test/blocks/marketo/mocks/one-page-experience.html b/test/blocks/marketo/mocks/one-page-experience.html
@@ -0,0 +1,55 @@
+<div id="success-section" class="section hide-block form-success">
+  <div class="content" daa-lh="b1|content"><p>Form Success</p></div>
+  <div class="section-metadata">
+    <div>
+      <div>style</div>
+      <div>hide block, form success</div>
+    </div>
+  </div>
+</div>
+<div class="section container xxl spacing two-up resource-form">
+  <div class="columns contained">
+    <div class="row">
+      <div class="col">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus mi id tincidunt pretium. Praesent a porta ex.
+          Etiam eu metus urna. Etiam vulputate nibh nisi, sed gravida diam dictum id. Cras et justo metus. Morbi consectetur
+          diam eu mi ultricies, molestie efficitur quam posuere. Integer iaculis euismod pulvinar.</p>
+      </div>
+    </div>
+  </div>
+  <div class="marketo">
+    <div>
+      <div>
+        <a
+          href="https://milo.adobe.com/tools/marketo#eyJmaWVsZCB2aXNpYmlsaXR5LnBob25lIjoiaGlkZGVuIiwiZmllbGQgZmlsdGVycy5qb2Jfcm9sZSI6ImFsbCIsImZpZWxkIGZpbHRlcnMuZnVuY3Rpb25hbF9hcmVhIjoiYWxsIiwiZmllbGQgZmlsdGVycy5pbmR1c3RyeSI6ImFsbCIsImZpZWxkIGZpbHRlcnMucHJvZHVjdHMiOiJhbGwiLCJmaWVsZCB2aXNpYmlsaXR5LmRlbW8iOiJ2aXNpYmxlIiwicHJvZ3JhbS5jb3BhcnRuZXJuYW1lcyI6IiIsInByb2dyYW0uY2FtcGFpZ25pZHMuZXh0ZXJuYWwiOiIiLCJwcm9ncmFtLmNhbXBhaWduaWRzLnJldG91Y2giOiIiLCJwcm9ncmFtLmNhbXBhaWduaWRzLm9uc2l0ZSI6IiIsInByb2dyYW0uYWRkaXRpb25hbCBmb3JtX2lkIjoiIiwiZm9ybSBpZCI6IjE3MjMiLCJtYXJrZXRvIG11bmNraW4iOiIzNjAtS0NJLTgwNCIsIm1hcmtldG8gaG9zdCI6ImVuZ2FnZS5hZG9iZS5jb20iLCJmb3JtIHR5cGUiOiJtYXJrZXRvX2Zvcm0iLCJmb3JtLnN1YnR5cGUiOiJ3aGl0ZXBhcGVyX2Zvcm0iLCJwcm9ncmFtLmNhbXBhaWduaWRzLnNmZGMiOiIiLCJwcm9ncmFtLnBvaSI6IiJ9">Marketo
+          Configurator</a>
+      </div>
+    </div>
+    <div>
+      <div>Title</div>
+      <div>New Title</div>
+    </div>
+    <div>
+      <div>Description</div>
+      <div>New Description</div>
+    </div>
+    <div>
+      <div>Destination Type</div>
+      <div>section</div>
+    </div>
+    <div id="success-data">
+      <div>Success Section</div>
+      <div>form success</div>
+    </div>
+    <div>
+      <div>Success Content</div>
+      <div>Thank you</div>
+    </div>
+  </div>
+  <div class="section-metadata">
+    <div>
+      <div>style</div>
+      <div>container, xxl spacing, two-up, resource-form</div>
+    </div>
+  </div>
+</div>