MWPW-157005 Marketo thank you fixes (#2779)

* MWPW-157005 Marketo thank you fixes * PR Changes
adobecom · Sep 2, 2024 · 582c244 · 582c244
1 parent fc58707
commit 582c244
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 13 deletions.
diff --git a/libs/blocks/marketo/marketo.css b/libs/blocks/marketo/marketo.css
@@ -4,18 +4,25 @@
   --marketo-form-border: #6E6E6E;
   --marketo-form-error: #D7373F;
   --marketo-form-selected: #0265DC;
+  --marketo-form-placeholder-height: calc(78px * 3 + 57px); /* 3 rows + submit */
+  --marketo-form-min-height: 215px;
+  --marketo-form-max-height: 10000px;
 }
 
 /* stylelint-disable selector-class-pattern */
 .marketo .marketo-form-wrapper {
   box-sizing: border-box;
   max-width: 600px;
-  min-height: 400px;
+  min-height: var(--marketo-form-min-height);
   margin: 0 auto;
   padding: var(--spacing-l) 30px;
   background-color: var(--marketo-form-background);
 }
 
+.marketo.loading form {
+  min-height: var(--marketo-form-placeholder-height);
+}
+
 .marketo .marketo-title {
   font-size: 28px;
   font-weight: bold;
@@ -29,25 +36,37 @@
 }
 
 .marketo .mktoForm {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  column-gap: 4.6%;
+  align-items: flex-start;
+  max-height: var(--marketo-form-placeholder-height);
+  overflow: hidden;
   font-size: 16px;
   font-weight: bold;
   width: 100%!important;
+  visibility: hidden;
+  opacity: 0;
 }
 
-.marketo form.mktoForm--fade-in {
+.marketo.success .marketo-title,
+.marketo.success .marketo-description,
+.marketo.success form.mktoVisible.mktoForm {
+  display: none;
+}
+
+.marketo form.mktoForm.mktoForm--fade-in {
+  transition: opacity 0.5s ease-in, max-height 0.5s ease-in;
   visibility: hidden;
   opacity: 0;
 }
 
-.marketo form.mktoForm--fade-in.mktoVisible {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  column-gap: 4.6%;
-  align-items: flex-start;
+.marketo form.mktoForm.mktoForm--fade-in.mktoVisible {
+  max-height: var(--marketo-form-max-height);
+  overflow: visible;
   visibility: visible;
   opacity: 1;
-  transition: opacity 1s ease-in, height 1s ease-in;
 }
 
 .marketo .mktoFormRow.mktoFormRowTop.comments,

diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js
@@ -13,9 +13,16 @@
 /*
  * Marketo Form
  */
-import { parseEncodedConfig, loadScript, localizeLink, createTag, createIntersectionObserver } from '../../utils/utils.js';
-
-const ROOT_MARGIN = 1000;
+import {
+  parseEncodedConfig,
+  loadScript,
+  loadLink,
+  localizeLink,
+  createTag,
+  createIntersectionObserver,
+} from '../../utils/utils.js';
+
+const ROOT_MARGIN = 50;
 const FORM_ID = 'form id';
 const BASE_URL = 'marketo host';
 const MUNCHKIN_ID = 'marketo munckin';
@@ -61,6 +68,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}`);
   }
 
@@ -84,9 +92,11 @@ export const setPreferences = (formData) => {
 };
 
 export const formSuccess = (formEl, formData) => {
+  const el = formEl.closest('.marketo');
   const parentModal = formEl?.closest('.dialog-modal');
   const mktoSubmit = new Event('mktoSubmit');
 
+  el.classList.add('success');
   window.dispatchEvent(mktoSubmit);
   window.mktoSubmitted = true;
 
@@ -115,7 +125,9 @@ export const formSuccess = (formEl, formData) => {
 
 const readyForm = (form, formData) => {
   const formEl = form.getFormElem().get(0);
+  const el = formEl.closest('.marketo');
   const isDesktop = matchMedia('(min-width: 900px)');
+  el.classList.remove('loading');
 
   formEl.addEventListener('focus', ({ target }) => {
     /* c8 ignore next 9 */
@@ -216,6 +228,9 @@ export default function init(el) {
 
   fragment.append(formWrapper);
   el.replaceChildren(fragment);
+  el.classList.add('loading');
+
+  loadLink(`https://${baseURL}`, { rel: 'dns-prefetch' });
 
   createIntersectionObserver({
     el,

diff --git a/test/blocks/marketo/marketo.test.html b/test/blocks/marketo/marketo.test.html
@@ -65,7 +65,7 @@ <h2 id="fill-out-the-form-to-view-the-report">Fill out the form to view the repo
     import { expect } from '@esm-bundle/chai';
     import { stub } from 'sinon';
     import { waitForElement } from '../../helpers/waitfor.js';
-    import { loadScript, parseEncodedConfig } from '../../../libs/utils/utils.js';
+    import { loadScript, loadLink, parseEncodedConfig } from '../../../libs/utils/utils.js';
     import init, { setPreferences, formValidate, formSuccess } from '../../../libs/blocks/marketo/marketo.js';
 
     runTests(() => {
@@ -86,6 +86,10 @@ <h2 id="fill-out-the-form-to-view-the-report">Fill out the form to view the repo
           expect(desc).to.exist;
         });
 
+        it('preload Marketo', async () => {
+          expect(loadLink.calledOnce).to.be.true;
+        });
+
         it('loads Marketo script', async () => {
           expect(loadScript.calledOnce).to.be.true;
           expect(loadScript.calledWith('https://engage.adobe.com/js/forms2/js/forms2.min.js')).to.be.true;

diff --git a/test/blocks/marketo/mocks/marketo-utils.js b/test/blocks/marketo/mocks/marketo-utils.js
@@ -63,3 +63,7 @@ export function createIntersectionObserver({ el, callback /* , once = true, opti
 }
 
 export const localizeLink = (href) => href;
+
+export const loadLink = stub().returns(new Promise((resolve) => {
+  resolve();
+}));