PR Changes

adobecom · Feb 14, 2025 · 39a5d7c · 39a5d7c
1 parent 4bf5c4f
commit 39a5d7c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 34 deletions.
diff --git a/libs/blocks/marketo/marketo-multi.js b/libs/blocks/marketo/marketo-multi.js
@@ -1,4 +1,5 @@
 import { createTag } from '../../utils/utils.js';
+import { debounce } from '../../utils/action.js';
 
 const VALIDATION_STEP = {
   name: '2',
@@ -16,24 +17,21 @@ function updateStepDetails(formEl, step, totalSteps) {
   formEl.classList.remove('show-warnings');
   formEl.dataset.step = step;
   formEl.querySelector('.step-details .step').textContent = `Step ${step} of ${totalSteps}`;
+  formEl.querySelector('#mktoButton_new').textContent = step === totalSteps ? 'Submit' : 'Next';
 }
 
 function showPreviousStep(formEl, totalSteps) {
   const currentStep = parseInt(formEl.dataset.step, 10);
   const previousStep = currentStep - 1;
-  const submitButton = formEl.querySelector('#mktoButton_new');
   const backBtn = formEl.querySelector('.back-btn');
 
   updateStepDetails(formEl, previousStep, totalSteps);
-  submitButton.textContent = 'Next';
-
   if (previousStep === 1) backBtn?.remove();
 }
 
 const showNextStep = (formEl, currentStep, totalSteps) => {
   if (currentStep === totalSteps) return;
   const nextStep = currentStep + 1;
-  const submitButton = formEl.querySelector('#mktoButton_new');
   const stepDetails = formEl.querySelector('.step-details');
 
   if (!stepDetails.querySelector('.back-btn')) {
@@ -43,10 +41,6 @@ const showNextStep = (formEl, currentStep, totalSteps) => {
   }
 
   updateStepDetails(formEl, nextStep, totalSteps);
-
-  if (nextStep === totalSteps) {
-    setTimeout(() => { submitButton.textContent = 'Submit'; }, 200);
-  }
 };
 
 export const formValidate = (formEl) => {
@@ -62,26 +56,35 @@ export const formValidate = (formEl) => {
   return currentStep === totalSteps;
 };
 
-export const onRender = (form, totalSteps) => {
-  const formEl = form.getFormElem().get(0);
-  if (!formEl) return;
+function setValidationSteps(formEl, totalSteps) {
+  formEl.querySelectorAll('.mktoFormRowTop').forEach((row) => {
+    const rowAttr = row.getAttribute('data-mktofield') || row.getAttribute('data-mkto_vis_src');
+    const step = VALIDATION_STEP[rowAttr] ? Math.min(VALIDATION_STEP[rowAttr], totalSteps) : 1;
+    row.setAttribute('data-validate', step);
+  });
+}
 
+function onRender(formEl, totalSteps) {
+  const currentStep = parseInt(formEl.dataset.step, 10);
   const submitButton = formEl.querySelector('#mktoButton_new');
-  if (submitButton && formEl.dataset.step === '1') submitButton.textContent = 'Next';
+  if (submitButton) submitButton.textContent = currentStep === totalSteps ? 'Submit' : 'Next';
+  formEl.querySelector('.step-details .step').textContent = `Step ${currentStep} of ${totalSteps}`;
 
-  if (!formEl.querySelector('.step-details')) {
-    const stepEl = createTag('p', { class: 'step' }, `Step 1 of ${totalSteps}`);
-    const stepDetails = createTag('div', { class: 'step-details' }, stepEl);
-    formEl.append(stepDetails);
-  }
+  setValidationSteps(formEl, totalSteps);
+}
+
+const readyForm = (form, totalSteps) => {
+  const formEl = form.getFormElem().get(0);
+  form.onValidate(() => formValidate(formEl));
+
+  const stepEl = createTag('p', { class: 'step' }, `Step 1 of ${totalSteps}`);
+  const stepDetails = createTag('div', { class: 'step-details' }, stepEl);
+  formEl.append(stepDetails);
 
-  setTimeout(() => {
-    formEl.querySelectorAll('.mktoFormRowTop').forEach((row) => {
-      const rowAttr = row.getAttribute('data-mktofield') || row.getAttribute('data-mkto_vis_src');
-      const step = VALIDATION_STEP[rowAttr] ? Math.min(VALIDATION_STEP[rowAttr], totalSteps) : 1;
-      row.setAttribute('data-validate', step);
-    });
-  }, 100);
+  const debouncedOnRender = debounce(() => onRender(formEl, totalSteps), 10);
+  const observer = new MutationObserver(debouncedOnRender);
+  observer.observe(formEl, { childList: true, subtree: true });
+  debouncedOnRender();
 };
 
 export default (el) => {
@@ -91,6 +94,5 @@ export default (el) => {
   formEl.dataset.step = 1;
 
   const { MktoForms2 } = window;
-  MktoForms2.whenRendered((form) => { onRender(form, totalSteps); });
-  MktoForms2.whenReady((form) => { form.onValidate(() => formValidate(formEl)); });
+  MktoForms2.whenReady((form) => { readyForm(form, totalSteps); });
 };
diff --git a/libs/blocks/marketo/marketo.css b/libs/blocks/marketo/marketo.css
@@ -128,9 +128,9 @@
 }
 
 .marketo.multi-step .step-details button {
-  background: none!important;
+  background: none;
   border: none;
-  padding: 0!important;
+  padding: 0;
   text-decoration: underline;
   cursor: pointer;
   color: var(--link-color-dark);

diff --git a/test/blocks/marketo/marketo-multi.test.js b/test/blocks/marketo/marketo-multi.test.js
@@ -11,14 +11,11 @@ describe('marketo multi-step', () => {
   beforeEach(() => {
     document.body.innerHTML = innerHTML;
     clock = sinon.useFakeTimers();
-    window.MktoForms2 = {
-      whenRendered: stub().callsFake((callback) => callback({ getFormElem: () => ({ get: () => document.querySelector('form') }) })),
-      whenReady: stub().callsFake((callback) => callback({ onValidate: () => {} })),
-    };
+    window.MktoForms2 = { whenReady: stub().callsFake((callback) => callback({ onValidate: () => {}, getFormElem: () => ({ get: () => document.querySelector('form') }) })) };
 
     const el = document.querySelector('.marketo');
     init(el);
-    clock.tick(200);
+    clock.tick(300);
   });
 
   afterEach(() => {
@@ -32,7 +29,6 @@ describe('marketo multi-step', () => {
 
     expect(stepDetails).to.exist;
     expect(stepDetails.textContent).to.equal('Step 1 of 2');
-    expect(window.MktoForms2.whenRendered.calledOnce).to.be.true;
     expect(window.MktoForms2.whenReady.calledOnce).to.be.true;
 
     const step1 = el.querySelector('.mktoFormRowTop[data-validate="1"]');
@@ -77,5 +73,6 @@ describe('marketo multi-step', () => {
 
     expect(formEl.dataset.step).to.equal('1');
     expect(formEl.querySelector('.back-btn')).to.be.null;
+    expect(formEl.querySelector('.step-details .step').textContent).to.equal('Step 1 of 2');
   });
 });