Form Success
diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js index d558cfcdba..a99f83500a 100644 --- 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 index b986b6b2cb..2a8fa9e91d 100644 --- 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 new file mode 100644 index 0000000000..b7c864380e --- /dev/null +++ b/test/blocks/marketo/mocks/one-page-experience.html @@ -0,0 +1,55 @@ +
+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.
+