MWPW-164405 Show multiple success sections

libs/blocks/marketo/marketo.js

@@ -22,6 +22,7 @@ import {
   getConfig,
   createIntersectionObserver,
   SLD,
+  MILO_EVENTS,
 } from '../../utils/utils.js';
 
 const ROOT_MARGIN = 50;
@@ -54,6 +55,7 @@ export const decorateURL = (destination, baseURL = window.location) => {
     let destinationUrl = new URL(destination, baseURL.origin);
     const { hostname, pathname, search, hash } = destinationUrl;
 
+    /* c8 ignore next 3 */
     if (!hostname) {
       throw new Error('URL does not have a valid host');
     }
@@ -94,36 +96,31 @@ 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 showSuccessSection = (formData) => {
+  const show = (sections) => {
+    sections.forEach((section) => section.classList.remove('hide-block'));
+    sections[0]?.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);
+
+  let successSections = document.querySelectorAll(`.section.${successClass}`);
+  show(successSections);
+  document.addEventListener(
+    MILO_EVENTS.DEFERRED,
+    () => {
+      successSections = document.querySelectorAll(`.section.${successClass}`);
+      show(successSections);
+      /* c8 ignore next 3 */
+      if (!document.querySelector(`.section.${successClass}`)) {
+        window.lana?.log(`Error showing Marketo success section ${successClass}`, { tags: 'warn,marketo' });
+      }
+    },
+    false,
+  );
 };
 
 export const formSuccess = (formEl, formData) => {
@@ -229,7 +226,7 @@ export default function init(el) {
 
   if (formData[SUCCESS_TYPE] === 'section' && ungated) {
     el.classList.add('hide-block');
-    showSuccessSection(formData, true);
+    showSuccessSection(formData);
     return;
   }
 

test/blocks/marketo/marketo.test.html

@@ -59,6 +59,15 @@ <h2 id="fill-out-the-form-to-view-the-report">Fill out the form to view the repo
         </div>
       </div>
     </div>
+    <div class="section hide-block form-success">
+      <div class="content" daa-lh="b1|content"><p>Form Success 2</p></div>
+      <div class="section-metadata">
+        <div>
+          <div>style</div>
+          <div>hide block, form success</div>
+        </div>
+      </div>
+    </div>
   </body>
   <script type="module">
     import { runTests } from '@web/test-runner-mocha';
@@ -115,14 +124,15 @@ <h2 id="fill-out-the-form-to-view-the-report">Fill out the form to view the repo
 
         it('shows success section', async () => {
           const form = document.querySelector('form');
-          const section = document.querySelector('.form-success');
+          const sections = document.querySelectorAll('.form-success');
           const formData = {
             'form.success.type': 'section',
             'form.success.section': 'form success',
           };
 
           formSuccess(form, formData);
-          expect(section.classList.contains('hide-block')).to.be.false;
+          expect(sections[0].classList.contains('hide-block')).to.be.false;
+          expect(sections[1].classList.contains('hide-block')).to.be.false;
         });
       });
     });

test/blocks/marketo/marketo.test.js

@@ -2,7 +2,7 @@ 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 { setConfig, MILO_EVENTS } from '../../../libs/utils/utils.js';
 import init, { setPreferences, decorateURL, FORM_PARAM } from '../../../libs/blocks/marketo/marketo.js';
 
 const innerHTML = await readFile({ path: './mocks/body.html' });
@@ -137,6 +137,7 @@ describe('Marketo ungated one page experience', () => {
     init(document.querySelector('.marketo'));
     expect(document.querySelector('#success-section').classList.contains('hide-block')).to.be.true;
     document.querySelector('#success-section').classList.add('form-success');
+    document.dispatchEvent(new Event(MILO_EVENTS.DEFERRED));
     clock.tick(500);
     expect(document.querySelector('#success-section').classList.contains('hide-block')).to.be.false;
   });

test/blocks/marketo/mocks/marketo-utils.js

@@ -72,5 +72,6 @@ export const customFetch = stub();
 
 const PAGE_URL = new URL(window.location.href);
 export const SLD = PAGE_URL.hostname.includes('.aem.') ? 'aem' : 'hlx';
+export const MILO_EVENTS = { DEFERRED: 'milo:deferred' };
 
 export const getConfig = () => ({ base: '' });