From c5668231663daa210bdb1f771b30d8d427a79262 Mon Sep 17 00:00:00 2001 From: Brandon Marshall Date: Mon, 12 Aug 2024 02:22:03 -0700 Subject: [PATCH] MWPW-142166 One Page Gated (#2673) * MWPW-142166 One Page Gated * PR Changes --- libs/blocks/marketo/marketo.js | 93 ++++++++++++++++----------- test/blocks/marketo/marketo.test.html | 26 +++++++- 2 files changed, 79 insertions(+), 40 deletions(-) diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js index a6cfb7a2e7..1602d0694a 100644 --- a/libs/blocks/marketo/marketo.js +++ b/libs/blocks/marketo/marketo.js @@ -19,14 +19,20 @@ const ROOT_MARGIN = 1000; const FORM_ID = 'form id'; const BASE_URL = 'marketo host'; const MUNCHKIN_ID = 'marketo munckin'; +const SUCCESS_TYPE = 'form.success.type'; +const SUCCESS_CONTENT = 'form.success.content'; +const SUCCESS_SECTION = 'form.success.section'; const FORM_MAP = { - 'destination-url': 'form.success.content', + 'success-type': SUCCESS_TYPE, + 'destination-type': SUCCESS_TYPE, + 'success-content': SUCCESS_CONTENT, + 'destination-url': SUCCESS_CONTENT, + 'success-section': SUCCESS_SECTION, 'co-partner-names': 'program.copartnernames', 'sfdc-campaign-id': 'program.campaignids.sfdc', }; -export const formValidate = (form) => { - const formEl = form.getFormElem().get(0); +export const formValidate = (formEl) => { formEl.classList.remove('hide-errors'); formEl.classList.add('show-warnings'); }; @@ -61,9 +67,24 @@ export const decorateURL = (destination, baseURL = window.location) => { return null; }; -export const formSuccess = (form) => { - const formEl = form.getFormElem().get(0); - const parentModal = formEl.closest('.dialog-modal'); +const setPreference = (key = '', value = '') => { + if (!value || !key.includes('.')) return; + const keyParts = key.split('.'); + const lastKey = keyParts.pop(); + const formDataObject = keyParts.reduce((obj, part) => { + obj[part] = obj[part] || {}; + return obj[part]; + }, window.mcz_marketoForm_pref); + formDataObject[lastKey] = value; +}; + +export const setPreferences = (formData) => { + window.mcz_marketoForm_pref = window.mcz_marketoForm_pref || {}; + Object.entries(formData).forEach(([key, value]) => setPreference(key, value)); +}; + +export const formSuccess = (formEl, formData) => { + const parentModal = formEl?.closest('.dialog-modal'); const mktoSubmit = new Event('mktoSubmit'); window.dispatchEvent(mktoSubmit); @@ -76,10 +97,23 @@ export const formSuccess = (form) => { return false; } - return true; + 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' }); + } + + return false; }; -const readyForm = (form) => { +const readyForm = (form, formData) => { const formEl = form.getFormElem().get(0); const isDesktop = matchMedia('(min-width: 900px)'); @@ -95,41 +129,27 @@ const readyForm = (form) => { const offsetPosition = targetPosition + window.pageYOffset - pageTop - window.innerHeight / 2; window.scrollTo(0, offsetPosition); }, true); - form.onValidate(() => formValidate(form)); - form.onSuccess(() => formSuccess(form)); -}; - -const setPreference = (key, value) => { - if (value && key?.includes('.')) { - const keyParts = key.split('.'); - const lastKey = keyParts.pop(); - const formDataObject = keyParts.reduce((obj, part) => { - obj[part] = obj[part] || {}; - return obj[part]; - }, window.mcz_marketoForm_pref); - formDataObject[lastKey] = value; - } -}; - -export const setPreferences = (formData) => { - window.mcz_marketoForm_pref = window.mcz_marketoForm_pref || {}; - Object.entries(formData).forEach(([key, value]) => setPreference(key, value)); + form.onValidate(() => formValidate(formEl)); + form.onSuccess(() => formSuccess(formEl, formData)); }; export const loadMarketo = (el, formData) => { const baseURL = formData[BASE_URL]; + const munchkinID = formData[MUNCHKIN_ID]; + const formID = formData[FORM_ID]; loadScript(`https://${baseURL}/js/forms2/js/forms2.min.js`) .then(() => { const { MktoForms2 } = window; if (!MktoForms2) throw new Error('Marketo forms not loaded'); - MktoForms2.loadForm(`//${baseURL}`, formData[MUNCHKIN_ID], formData[FORM_ID]); + MktoForms2.loadForm(`//${baseURL}`, munchkinID, formID); MktoForms2.whenReady((form) => { readyForm(form, formData); }); }) .catch(() => { - /* c8 ignore next */ + /* c8 ignore next 2 */ el.style.display = 'none'; + window.lana?.log(`Error loading Marketo form for ${munchkinID}_${formID}`, { tags: 'errorType=error,module=marketo' }); }); }; @@ -137,7 +157,6 @@ export default function init(el) { const children = Array.from(el.querySelectorAll(':scope > div')); const encodedConfigDiv = children.shift(); const link = encodedConfigDiv.querySelector('a'); - let formData = {}; if (!link?.href) { el.style.display = 'none'; @@ -145,8 +164,7 @@ export default function init(el) { } const encodedConfig = link.href.split('#')[1]; - - formData = parseEncodedConfig(encodedConfig); + const formData = parseEncodedConfig(encodedConfig); children.forEach((element) => { const key = element.children[0]?.textContent.trim().toLowerCase().replaceAll(' ', '-'); @@ -168,13 +186,12 @@ export default function init(el) { return; } - if (formData['form.success.content']) { - const destinationUrl = decorateURL(formData['form.success.content']); + formData[SUCCESS_TYPE] = formData[SUCCESS_TYPE] || 'redirect'; - if (destinationUrl) { - formData['form.success.type'] = 'redirect'; - formData['form.success.content'] = destinationUrl; - } + if (formData[SUCCESS_TYPE] === 'redirect') { + const destinationUrl = decorateURL(formData[SUCCESS_CONTENT]); + + if (destinationUrl) formData[SUCCESS_CONTENT] = destinationUrl; } setPreferences(formData); diff --git a/test/blocks/marketo/marketo.test.html b/test/blocks/marketo/marketo.test.html index ef3f7c66c0..862ee6f6e1 100644 --- a/test/blocks/marketo/marketo.test.html +++ b/test/blocks/marketo/marketo.test.html @@ -9,6 +9,15 @@ +
+

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 @@ -89,15 +98,28 @@

Fill out the form to view the repo it('validates form', () => { expect(window.MktoForms2.onValidate.calledOnce).to.be.true; - formValidate(window.MktoForms2); const form = document.querySelector('form'); + formValidate(form); expect(form.classList.contains('show-warnings')).to.be.true; }); it('submits successfully', async () => { - formSuccess(window.MktoForms2); + const form = document.querySelector('form'); + formSuccess(form); expect(window.mktoSubmitted).to.be.true; }); + + it('shows success section', async () => { + const form = document.querySelector('form'); + const section = document.querySelector('.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; + }); }); });