MWPW-157460 Allow Ungated Marketo One Page Experience

adobecom · Oct 21, 2024 · 8ac96f8 · 8ac96f8
1 parent 332c3a5
commit 8ac96f8
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 16 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;
@@ -82,7 +83,7 @@ const setPreference = (key = '', value = '') => {
   const formDataObject = keyParts.reduce((obj, part) => {
     obj[part] = obj[part] || {};
     return obj[part];
-  }, window.mcz_marketoForm_pref);
+  }, window.mcz_marketoForm_pref || {});
   formDataObject[lastKey] = value;
 };
 
@@ -91,6 +92,35 @@ export const setPreferences = (formData) => {
   Object.entries(formData).forEach(([key, value]) => setPreference(key, value));
 };
 
+const showSuccessSection = (formData, scroll = true) => {
+  try {
+    const show = (el) => {
+      el.classList.remove('hide-block');
+      if (scroll) el.scrollIntoView({ behavior: 'smooth' });
+    };
+    const section = formData[SUCCESS_SECTION].toLowerCase().replaceAll(' ', '-');
+    const success = document.querySelector(`.section.${section}`);
+    if (success) {
+      show(success);
+      return;
+    }
+    // For Marquee use case
+    let count = 0;
+    const interval = setInterval(() => {
+      const el = document.querySelector(`.section.${section}`);
+      if (el) {
+        clearInterval(interval);
+        show(el);
+      }
+      count += 1;
+      if (count > 6) clearInterval(interval);
+    }, 500);
+  } catch (e) {
+    /* c8 ignore next 2 */
+    window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' });
+  }
+};
+
 export const formSuccess = (formEl, formData) => {
   const el = formEl.closest('.marketo');
   const parentModal = formEl?.closest('.dialog-modal');
@@ -108,18 +138,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 +181,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 +218,15 @@ export default function init(el) {
     return;
   }
 
+  const searchParams = new URLSearchParams(window.location.search);
+  const ungated = searchParams.get(FORM_PARAM) === 'off';
+
+  if (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
@@ -2,7 +2,7 @@ import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 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' });
 
@@ -104,3 +104,23 @@ describe('marketo decorateURL', () => {
     expect(result).to.be.null;
   });
 });
+
+const onePage = await readFile({ path: './mocks/one-page-experience.html' });
+
+describe('Marketo one page experience', () => {
+  beforeEach(() => {
+    document.body.innerHTML = onePage;
+  });
+
+  it('shows success section if ungated', async () => {
+    const url = new URL(window.location);
+    url.searchParams.set(FORM_PARAM, 'off');
+    window.history.pushState({}, '', url);
+
+    init(document.querySelector('.marketo'));
+    expect(document.querySelector('.section.form-success').classList.contains('hide-block')).to.be.false;
+
+    url.searchParams.delete(FORM_PARAM);
+    window.history.pushState({}, '', url);
+  });
+});
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 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>
+      <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>