From 8ac96f8d362071a5e3d035669066d82c693885a1 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 9 Oct 2024 16:31:20 -0700 Subject: [PATCH 1/7] MWPW-157460 Allow Ungated Marketo One Page Experience --- libs/blocks/marketo/marketo.js | 59 ++++++++++++++----- test/blocks/marketo/marketo.test.js | 22 ++++++- .../marketo/mocks/one-page-experience.html | 55 +++++++++++++++++ 3 files changed, 120 insertions(+), 16 deletions(-) create mode 100644 test/blocks/marketo/mocks/one-page-experience.html diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js index d558cfcdba..1e69bce61e 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; @@ -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 index b986b6b2cb..5beb89f5ca 100644 --- 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 new file mode 100644 index 0000000000..e3fd1cb8f4 --- /dev/null +++ b/test/blocks/marketo/mocks/one-page-experience.html @@ -0,0 +1,55 @@ +
+

Form Success

+
+
+
style
+
hide block, form success
+
+
+
+
+
+
+
+

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.

+
+
+
+
+
+
+ Marketo + Configurator +
+
+
+
Title
+
New Title
+
+
+
Description
+
New Description
+
+
+
Destination Type
+
section
+
+
+
Success Section
+
form success
+
+
+
Success Content
+
Thank you
+
+
+
+
+
style
+
container, xxl spacing, two-up, resource-form
+
+
+
From 3c84bfe03e848f27b8031ab418e5915f8d298cc4 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Mon, 21 Oct 2024 13:25:32 -0700 Subject: [PATCH 2/7] update tests --- test/blocks/marketo/marketo.test.js | 21 ++++++++++++++++++- .../marketo/mocks/one-page-experience.html | 2 +- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/test/blocks/marketo/marketo.test.js b/test/blocks/marketo/marketo.test.js index 5beb89f5ca..6ac6b71e0f 100644 --- a/test/blocks/marketo/marketo.test.js +++ b/test/blocks/marketo/marketo.test.js @@ -1,5 +1,6 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; +import sinon from 'sinon'; import { delay } from '../../helpers/waitfor.js'; import { setConfig } from '../../../libs/utils/utils.js'; import init, { setPreferences, decorateURL, FORM_PARAM } from '../../../libs/blocks/marketo/marketo.js'; @@ -112,7 +113,7 @@ describe('Marketo one page experience', () => { document.body.innerHTML = onePage; }); - it('shows success section if ungated', async () => { + it('shows success section if ungated', () => { const url = new URL(window.location); url.searchParams.set(FORM_PARAM, 'off'); window.history.pushState({}, '', url); @@ -123,4 +124,22 @@ describe('Marketo one page experience', () => { url.searchParams.delete(FORM_PARAM); window.history.pushState({}, '', url); }); + + it('shows success section that appears after marketo if ungated', () => { + const url = new URL(window.location); + url.searchParams.set(FORM_PARAM, 'off'); + window.history.pushState({}, '', url); + document.querySelector('#success-section').classList.remove('form-success'); + const clock = sinon.useFakeTimers(); + + 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; + + url.searchParams.delete(FORM_PARAM); + window.history.pushState({}, '', url); + clock.restore(); + }); }); diff --git a/test/blocks/marketo/mocks/one-page-experience.html b/test/blocks/marketo/mocks/one-page-experience.html index e3fd1cb8f4..8ec8077944 100644 --- a/test/blocks/marketo/mocks/one-page-experience.html +++ b/test/blocks/marketo/mocks/one-page-experience.html @@ -1,4 +1,4 @@ -
+

Form Success

From 22fde56ddcd5d39750d3bd43f5298c5415248487 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Mon, 21 Oct 2024 13:28:30 -0700 Subject: [PATCH 3/7] remove unnecessary preference fix --- libs/blocks/marketo/marketo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js index 1e69bce61e..c1c6220a39 100644 --- a/libs/blocks/marketo/marketo.js +++ b/libs/blocks/marketo/marketo.js @@ -83,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; }; From 0234a96975f94156f8e1e5fd61bed1b3123327bd Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Mon, 21 Oct 2024 17:08:33 -0700 Subject: [PATCH 4/7] cr - variables and remove try catch --- libs/blocks/marketo/marketo.js | 51 ++++++++++--------- test/blocks/marketo/marketo.test.js | 48 ++++++++++------- test/blocks/marketo/mocks/one-page-error.html | 51 +++++++++++++++++++ 3 files changed, 109 insertions(+), 41 deletions(-) create mode 100644 test/blocks/marketo/mocks/one-page-error.html diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js index c1c6220a39..6afc593105 100644 --- a/libs/blocks/marketo/marketo.js +++ b/libs/blocks/marketo/marketo.js @@ -93,32 +93,35 @@ export const setPreferences = (formData) => { }; 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 */ + 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) => { diff --git a/test/blocks/marketo/marketo.test.js b/test/blocks/marketo/marketo.test.js index 6ac6b71e0f..1d10fb5d69 100644 --- a/test/blocks/marketo/marketo.test.js +++ b/test/blocks/marketo/marketo.test.js @@ -1,11 +1,12 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; -import sinon from 'sinon'; +import sinon, { stub } from 'sinon'; import { delay } from '../../helpers/waitfor.js'; import { setConfig } 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' }); +window.lana = { log: stub() }; describe('marketo', () => { beforeEach(() => { @@ -108,38 +109,51 @@ describe('marketo decorateURL', () => { const onePage = await readFile({ path: './mocks/one-page-experience.html' }); -describe('Marketo one page experience', () => { +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(); }); - it('shows success section if ungated', () => { - const url = new URL(window.location); - url.searchParams.set(FORM_PARAM, 'off'); + 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; - - url.searchParams.delete(FORM_PARAM); - window.history.pushState({}, '', url); }); - it('shows success section that appears after marketo if ungated', () => { - const url = new URL(window.location); - url.searchParams.set(FORM_PARAM, 'off'); - window.history.pushState({}, '', url); + it('shows success section that appears after marketo', () => { document.querySelector('#success-section').classList.remove('form-success'); - const clock = sinon.useFakeTimers(); - 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; + }); - url.searchParams.delete(FORM_PARAM); - window.history.pushState({}, '', url); - clock.restore(); + it('logs error if success section is not provided', async () => { + document.body.innerHTML = await readFile({ path: './mocks/one-page-error.html' }); + + 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-error.html b/test/blocks/marketo/mocks/one-page-error.html new file mode 100644 index 0000000000..27d3a933be --- /dev/null +++ b/test/blocks/marketo/mocks/one-page-error.html @@ -0,0 +1,51 @@ +
+

Form Success

+
+
+
style
+
hide block, form success
+
+
+
+
+
+
+
+

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.

+
+
+
+
+ +
+
Title
+
New Title
+
+
+
Description
+
New Description
+
+
+
Destination Type
+
section
+
+
+
Success Content
+
Thank you
+
+
+
+
+
style
+
container, xxl spacing, two-up, resource-form
+
+
+
From e911da76cc4bdb136eb1081ee6f6de7009f16f3c Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Mon, 21 Oct 2024 17:16:47 -0700 Subject: [PATCH 5/7] remove error test html --- test/blocks/marketo/marketo.test.js | 3 +- test/blocks/marketo/mocks/one-page-error.html | 51 ------------------- .../marketo/mocks/one-page-experience.html | 2 +- 3 files changed, 2 insertions(+), 54 deletions(-) delete mode 100644 test/blocks/marketo/mocks/one-page-error.html diff --git a/test/blocks/marketo/marketo.test.js b/test/blocks/marketo/marketo.test.js index 1d10fb5d69..2a8fa9e91d 100644 --- a/test/blocks/marketo/marketo.test.js +++ b/test/blocks/marketo/marketo.test.js @@ -142,8 +142,7 @@ describe('Marketo ungated one page experience', () => { }); it('logs error if success section is not provided', async () => { - document.body.innerHTML = await readFile({ path: './mocks/one-page-error.html' }); - + document.querySelector('#success-data').remove(); init(document.querySelector('.marketo')); expect(window.lana.log.args[0][0]).to.equal('Error showing Marketo success section'); }); diff --git a/test/blocks/marketo/mocks/one-page-error.html b/test/blocks/marketo/mocks/one-page-error.html deleted file mode 100644 index 27d3a933be..0000000000 --- a/test/blocks/marketo/mocks/one-page-error.html +++ /dev/null @@ -1,51 +0,0 @@ -
-

Form Success

-
-
-
style
-
hide block, form success
-
-
-
-
-
-
-
-

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.

-
-
-
-
- -
-
Title
-
New Title
-
-
-
Description
-
New Description
-
-
-
Destination Type
-
section
-
-
-
Success Content
-
Thank you
-
-
-
-
-
style
-
container, xxl spacing, two-up, resource-form
-
-
-
diff --git a/test/blocks/marketo/mocks/one-page-experience.html b/test/blocks/marketo/mocks/one-page-experience.html index 8ec8077944..b7c864380e 100644 --- a/test/blocks/marketo/mocks/one-page-experience.html +++ b/test/blocks/marketo/mocks/one-page-experience.html @@ -37,7 +37,7 @@
Destination Type
section
-
+
Success Section
form success
From 6fb281b687c97202367c8b58d6b54922bf32fa33 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Tue, 22 Oct 2024 11:15:01 -0700 Subject: [PATCH 6/7] add success type check Co-authored-by: Brandon Marshall --- libs/blocks/marketo/marketo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js index 6afc593105..2f163b4238 100644 --- a/libs/blocks/marketo/marketo.js +++ b/libs/blocks/marketo/marketo.js @@ -224,7 +224,7 @@ export default function init(el) { const searchParams = new URLSearchParams(window.location.search); const ungated = searchParams.get(FORM_PARAM) === 'off'; - if (ungated) { + if (formData.[SUCCESS_TYPE] === 'section' && ungated) { el.classList.add('hide-block'); showSuccessSection(formData, false); return; From 6ad911127a6ea436a723e254e412775951705ba9 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Tue, 22 Oct 2024 11:17:05 -0700 Subject: [PATCH 7/7] fix syntax --- libs/blocks/marketo/marketo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js index 2f163b4238..a99f83500a 100644 --- a/libs/blocks/marketo/marketo.js +++ b/libs/blocks/marketo/marketo.js @@ -224,7 +224,7 @@ export default function init(el) { const searchParams = new URLSearchParams(window.location.search); const ungated = searchParams.get(FORM_PARAM) === 'off'; - if (formData.[SUCCESS_TYPE] === 'section' && ungated) { + if (formData[SUCCESS_TYPE] === 'section' && ungated) { el.classList.add('hide-block'); showSuccessSection(formData, false); return;