diff --git a/blocks/talk-to-an-expert-form/talk-to-an-expert-form.css b/blocks/talk-to-an-expert-form/talk-to-an-expert-form.css new file mode 100644 index 000000000..981ebc465 --- /dev/null +++ b/blocks/talk-to-an-expert-form/talk-to-an-expert-form.css @@ -0,0 +1,332 @@ +.container { + width: 100% +} + +@media (min-width: 640px) { + .container { + max-width: 640px + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px + } +} + +.btn-lg { + padding-top: .625rem; + padding-bottom: .625rem; + font-size: 1.125rem; + line-height: 1.75rem +} + +.talk-to-an-expert-form-wrapper :is(.absolute) { + position: absolute +} + +.talk-to-an-expert-form-wrapper :is(.relative) { + position: relative +} + +.talk-to-an-expert-form-wrapper :is(.z-10) { + z-index: 10 +} + +.talk-to-an-expert-form-wrapper :is(.col-span-1) { + grid-column: span 1 / span 1 +} + +.talk-to-an-expert-form-wrapper :is(.mx-0) { + margin-left: 0px; + margin-right: 0px +} + +.talk-to-an-expert-form-wrapper :is(.mx-auto) { + margin-left: auto; + margin-right: auto +} + +.talk-to-an-expert-form-wrapper :is(.my-0) { + margin-top: 0px; + margin-bottom: 0px +} + +.talk-to-an-expert-form-wrapper :is(.my-2) { + margin-top: 0.5rem; + margin-bottom: 0.5rem +} + +.talk-to-an-expert-form-wrapper :is(.mt-1) { + margin-top: 0.25rem +} + +.talk-to-an-expert-form-wrapper :is(.mt-5) { + margin-top: 1.25rem +} + +.talk-to-an-expert-form-wrapper :is(.mt-6) { + margin-top: 1.5rem +} + +.talk-to-an-expert-form-wrapper :is(.box-border) { + box-sizing: border-box +} + +.talk-to-an-expert-form-wrapper :is(.block) { + display: block +} + +.talk-to-an-expert-form-wrapper :is(.flex) { + display: flex +} + +.talk-to-an-expert-form-wrapper :is(.grid) { + display: grid +} + +.talk-to-an-expert-form-wrapper :is(.hidden) { + display: none +} + +.talk-to-an-expert-form-wrapper :is(.h-3) { + height: 0.75rem +} + +.talk-to-an-expert-form-wrapper :is(.max-h-48) { + max-height: 12rem +} + +.talk-to-an-expert-form-wrapper :is(.w-3) { + width: 0.75rem +} + +.talk-to-an-expert-form-wrapper :is(.w-full) { + width: 100% +} + +.talk-to-an-expert-form-wrapper :is(.max-w-4xl) { + max-width: 56rem +} + +.talk-to-an-expert-form-wrapper :is(.cursor-pointer) { + cursor: pointer +} + +.talk-to-an-expert-form-wrapper :is(.grid-cols-1) { + grid-template-columns: repeat(1, minmax(0, 1fr)) +} + +.talk-to-an-expert-form-wrapper :is(.items-center) { + align-items: center +} + +.talk-to-an-expert-form-wrapper :is(.items-baseline) { + align-items: baseline +} + +.talk-to-an-expert-form-wrapper :is(.justify-between) { + justify-content: space-between +} + +.talk-to-an-expert-form-wrapper :is(.gap-x-4) { + -moz-column-gap: 1rem; + column-gap: 1rem +} + +.talk-to-an-expert-form-wrapper :is(.gap-y-6) { + row-gap: 1.5rem +} + +.talk-to-an-expert-form-wrapper :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) +} + +.talk-to-an-expert-form-wrapper :is(.overflow-hidden) { + overflow: hidden +} + +.talk-to-an-expert-form-wrapper :is(.overflow-scroll) { + overflow: scroll +} + +.talk-to-an-expert-form-wrapper :is(.rounded-full) { + border-radius: 9999px +} + +.talk-to-an-expert-form-wrapper :is(.rounded-lg) { + border-radius: 0.5rem +} + +.talk-to-an-expert-form-wrapper :is(.rounded-xl) { + border-radius: 0.75rem +} + +.talk-to-an-expert-form-wrapper :is(.border) { + border-width: 1px +} + +.talk-to-an-expert-form-wrapper :is(.border-solid) { + border-style: solid +} + +.talk-to-an-expert-form-wrapper :is(.border-gray-300) { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)) +} + +.talk-to-an-expert-form-wrapper :is(.bg-danaherlightblue-50) { + --tw-bg-opacity: 1; + background-color: rgb(239 251 253 / var(--tw-bg-opacity)) +} + +.talk-to-an-expert-form-wrapper :is(.bg-white) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) +} + +.talk-to-an-expert-form-wrapper :is(.p-4) { + padding: 1rem +} + +.talk-to-an-expert-form-wrapper :is(.p-6) { + padding: 1.5rem +} + +.talk-to-an-expert-form-wrapper :is(.px-2) { + padding-left: 0.5rem; + padding-right: 0.5rem +} + +.talk-to-an-expert-form-wrapper :is(.px-4) { + padding-left: 1rem; + padding-right: 1rem +} + +.talk-to-an-expert-form-wrapper :is(.px-6) { + padding-left: 1.5rem; + padding-right: 1.5rem +} + +.talk-to-an-expert-form-wrapper :is(.py-2) { + padding-top: 0.5rem; + padding-bottom: 0.5rem +} + +.talk-to-an-expert-form-wrapper :is(.py-4) { + padding-top: 1rem; + padding-bottom: 1rem +} + +.talk-to-an-expert-form-wrapper :is(.pl-2) { + padding-left: 0.5rem +} + +.talk-to-an-expert-form-wrapper :is(.text-base) { + font-size: 1rem; + line-height: 1.5rem +} + +.talk-to-an-expert-form-wrapper :is(.text-sm) { + font-size: 0.875rem; + line-height: 1.25rem +} + +.talk-to-an-expert-form-wrapper :is(.font-extralight) { + font-weight: 200 +} + +.talk-to-an-expert-form-wrapper :is(.font-medium) { + font-weight: 500 +} + +.talk-to-an-expert-form-wrapper :is(.font-normal) { + font-weight: 200 +} + +.talk-to-an-expert-form-wrapper :is(.leading-4) { + line-height: 1rem +} + +.talk-to-an-expert-form-wrapper :is(.text-danaherpurple-500) { + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)) +} + +.talk-to-an-expert-form-wrapper :is(.text-gray-600) { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)) +} + +.talk-to-an-expert-form-wrapper :is(.text-gray-700) { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)) +} + +.talk-to-an-expert-form-wrapper :is(.text-red-500) { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)) +} + +.talk-to-an-expert-form-wrapper :is(.shadow) { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) +} + +.hover\:bg-danaherpurple-50:hover { + background-color: #EADEFF +} + +.talk-to-an-expert-form-wrapper :is(.hover\:bg-danaherpurple-50:hover) { + --tw-bg-opacity: 1; + background-color: rgb(234 222 255 / var(--tw-bg-opacity)) +} + +.talk-to-an-expert-form-wrapper :is(.focus\:outline-none:focus) { + outline: 2px solid transparent; + outline-offset: 2px +} + +.talk-to-an-expert-form-wrapper :is(.focus\:ring-danaherpurple-500:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(117 35 255 / var(--tw-ring-opacity)) +} + +.talk-to-an-expert-form-wrapper :is(.peer:checked ~ .peer-checked\:block) { + display: block +} + +@media (min-width: 768px) { + .talk-to-an-expert-form-wrapper :is(.md\:col-span-2) { + grid-column: span 2 / span 2 + } + + .talk-to-an-expert-form-wrapper :is(.md\:ml-2) { + margin-left: 0.5rem + } + + .talk-to-an-expert-form-wrapper :is(.md\:grid-cols-2) { + grid-template-columns: repeat(2, minmax(0, 1fr)) + } +} \ No newline at end of file diff --git a/blocks/talk-to-an-expert-form/talk-to-an-expert-form.js b/blocks/talk-to-an-expert-form/talk-to-an-expert-form.js new file mode 100644 index 000000000..c2e466f0f --- /dev/null +++ b/blocks/talk-to-an-expert-form/talk-to-an-expert-form.js @@ -0,0 +1,350 @@ +import { + a, div, form, input, label, span, strong, textarea, +} from '../../scripts/dom-builder.js'; +import { + decorateIcons, +} from '../../scripts/lib-franklin.js'; + +const roles = ['Select', 'C-Suite', 'Vice President', 'Associate Vice President', 'Executive Director', 'Director', + 'Department Head / Group Lead', 'Principal Scientist', 'Operations Manager', 'Lab Manager', 'Scientist', 'Senior Scientist', + 'Associate Scientist', 'Graduate Student', 'Academia']; + +const countries = ['Select', 'United States', 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antigua and Barbuda', 'Argentina', 'Armenia', + 'Australia', 'Austria', 'Azerbaijan', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', + 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cape Verde', 'Cambodia', 'Cameroon', 'Canada', 'Central African Republic', + 'Chad', 'Channel Islands', 'Chile', 'China', 'Colombia', 'Comoros', 'Costa Rica', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Cote d Ivoire', 'Denmark', + 'Djibouti', 'Dominica', 'Dominican Republic', 'DR Congo', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Eswatini', 'Ethiopia', + 'Faeroe Islands', 'Finland', 'France', 'French Guiana', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Greece', + 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Holy See', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', + 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Korea', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', + 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macao', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', + 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro', 'Morocco', 'Mozambique', 'Myanmar', 'Namibia', 'Nepal', + 'Netherlands', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'North Macedonia', 'Norway', 'Oman', 'Pakistan', 'Panama', 'Papua New Guinea', + 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Vincent and the Grenadines', + 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Somalia', + 'South Africa', 'South Korea', 'South Sudan', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', + 'Thailand', 'Timor-Leste', 'Togo', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', + 'Uruguay', 'Uzbekistan', 'Venezuela', 'Vietnam', 'Western Sahara', 'Yemen', 'Zambia', 'Zimbabwe']; + +const buildInputElement = (lable, field, inputType, inputName, autoCmplte, required, dtName) => { + const dataRequired = required ? span({ class: 'text-red-500' }, '*') : ''; + return div( + { class: 'space-y-2' }, + label( + { for: lable, class: 'font-normal text-sm leading-4' }, + field, + dataRequired, + ), + input( + { + type: inputType, + name: inputName, + autocomplete: autoCmplte, + 'data-required': required, + class: 'input-focus text-base w-full block px-2 py-4 text-gray-600 font-extralight border border-solid border-gray-300', + }, + ), + span( + { id: 'msg', 'data-name': dtName, class: 'mt-1 text-sm font-normal leading-4 text-danaherpurple-500' }, + ), + ); +}; + +function createDropdown(itemsList) { + const list = document.createElement('ul'); + list.classList.add(...'absolute w-full max-h-48 overflow-scroll hidden peer-checked:block z-10 bg-white py-2 text-sm text-gray-700 rounded-lg shadow'.split(' ')); + itemsList.forEach((item) => { + const li = document.createElement('li'); + li.classList.add(...'block px-4 py-2 hover:bg-danaherpurple-50 cursor-pointer'.split(' ')); + li.textContent = item; + list.append(li); + }); + return list; +} + +function buildSelectElement(lableFor, fieldName, inputType, inputId, dataName, inputList) { + const selectIcon = div( + { class: 'space-y-2' }, + label( + { + for: lableFor, + class: 'font-normal text-sm leading-4', + }, + fieldName, + span({ class: 'text-red-500' }, '*'), + ), + div( + { class: 'relative bg-white' }, + input( + { + type: inputType, + id: inputId, + class: 'peer hidden', + }, + ), + label( + { + for: inputId, + class: 'w-full flex justify-between items-center p-4 text-base text-gray-600 font-extralight border border-solid border-gray-300 cursor-pointer focus:outline-none focus:ring-danaherpurple-500', + }, + span({ class: 'text-gray-600' }, 'Select'), + span({ class: 'icon icon-dropdown w-3 h-3' }), + ), + createDropdown(inputList), + span( + { + id: 'msg', + 'data-name': dataName, + class: 'mt-1 text-sm font-normal leading-4 text-danaherpurple-500', + }, + ), + ), + ); + return selectIcon; +} + +function emailOptIn() { + const emailOptin = div( + { class: 'flex items-baseline' }, + input( + { + type: 'checkbox', + name: 'Email_Opt_In', + class: 'input-focus-checkbox', + value: 'true', + 'data-required': false, + }, + ), + label( + { + for: 'DHLS_Interest', + class: 'pl-2', + }, + 'I would like to receive more information via email about products and services offered by DH Life Sciences, LLC.', + ), + ); + return emailOptin; +} + +function tnc() { + const tncEl = div( + { class: 'flex items-center mt-5' }, + span( + { + style: 'font-family: helvetica, arial, sans-serif; font-size: 13px;', + }, + 'By submitting this form, you agree to the ', + span( + { + style: 'color: #000000;', + }, + 'By clicking the Submit button below and proceeding I confirm that I have reviewed and agree with the', + ), + strong( + a({ + 'aria-label': 'Link Terms of Use', + title: 'https://lifesciences.danaher.com/us/en/legal/terms-of-use.html', + href: 'https://lifesciences.danaher.com/us/en/legal/terms-of-use.html', + target: '_blank', + rel: 'noopener noreferrer', + class: 'fui-Link ___m14voj0 f3rmtva f1ern45e f1deefiw f1n71otn f1q5o8ev f1h8hb77 f1vxd6vx f1ewtqcl fyind8e f1k6fduh f1w7gpdv fk6fouc fjoy568 figsok6 f1hu3pq6 f11qmguv f19f4twv f1tyq0we f1g0x7ka fhxju0i f1qch9an f1cnd47f fqv5qza f1vmzxwi f1o700av f13mvf36 f9n3di6 f1ids18y fygtlnl f1deo86v f12x56k7 f1iescvh ftqa4ok f50u1b5 fs3pq8b f1hghxdh f1tymzes f1x7u7e9 f1cmlufx f10aw75t fsle3fq', + tabindex: '-1', + }, 'Terms of Use'), + ), + span({ style: 'color: #000000;' }, ' and the '), + strong( + a( + { + 'aria-label': 'Link Privacy Policy', + title: 'https://lifesciences.danaher.com/us/en/legal/privacy-policy.html', + href: 'https://lifesciences.danaher.com/us/en/legal/privacy-policy.html', + target: '_blank', + rel: 'noopener noreferrer', + class: 'fui-Link ___m14voj0 f3rmtva f1ern45e f1deefiw f1n71otn f1q5o8ev f1h8hb77 f1vxd6vx f1ewtqcl fyind8e f1k6fduh f1w7gpdv fk6fouc fjoy568 figsok6 f1hu3pq6 f11qmguv f19f4twv f1tyq0we f1g0x7ka fhxju0i f1qch9an f1cnd47f fqv5qza f1vmzxwi f1o700av f13mvf36 f9n3di6 f1ids18y fygtlnl f1deo86v f12x56k7 f1iescvh ftqa4ok f50u1b5 fs3pq8b f1hghxdh f1tymzes f1x7u7e9 f1cmlufx f10aw75t fsle3fq', + tabindex: '-1', + }, + 'Privacy Policy', + ), + ), + ), + ); + return tncEl; +} + +function getInquiry() { + const currentDate = new Date(); + const year = currentDate.getUTCFullYear(); + const month = String(currentDate.getUTCMonth() + 1).padStart(2, '0'); + const day = String(currentDate.getUTCDate()).padStart(2, '0'); + const hour = String(currentDate.getUTCHours()).padStart(2, '0'); + const min = String(currentDate.getUTCMinutes()).padStart(2, '0'); + const sec = String(currentDate.getUTCSeconds()).padStart(2, '0'); + const milli = String(currentDate.getUTCMilliseconds()).padStart(3, '0'); + const inquiry = year + month + day + hour + min + sec + milli; + document.getElementsByName('Inquiry_Number')[0].value = inquiry; + // eslint-disable-next-line + window.dataLayer?.push({ event: 'formSubmit', formId: 'TTAE', inquiry: inquiry }); +} + +function formValidate() { + let isValid = true; + document.querySelectorAll('[data-required]').forEach((el) => { + if (el.dataset.required === 'true') { + const msgEl = document.querySelector(`[data-name=${el.name}]`); + if (msgEl !== null) { + if (el.value.length === 0) { + msgEl.innerHTML = 'This field is required'; + isValid = false; + } else { + msgEl.innerHTML = ''; + } + } + } + }); + return isValid; +} + +function loadUTMParams() { + document.getElementsByName('UTM_Content')[0].value = localStorage.getItem('danaher_utm_content'); + document.getElementsByName('UTM_Campaign')[0].value = localStorage.getItem('danaher_utm_campaign'); + document.getElementsByName('UTM_Medium')[0].value = localStorage.getItem('danaher_utm_medium'); + document.getElementsByName('UTM_Term')[0].value = localStorage.getItem('danaher_utm_term'); + document.getElementsByName('UTM_Source')[0].value = localStorage.getItem('danaher_utm_source'); + document.getElementsByName('UTM_NLC')[0].value = localStorage.getItem('danaher_utm_nlc'); + document.getElementsByName('Page_Track_URL')[0].value = localStorage.getItem('danaher_utm_previouspage'); +} + +async function loadSFDCForm(block) { + const formIdEl = block?.firstElementChild; + const formId = formIdEl?.firstElementChild?.nextElementSibling?.textContent; + const formNameEl = formIdEl?.nextElementSibling; + const formName = formNameEl?.firstElementChild?.nextElementSibling?.textContent; + const clientIdEl = formNameEl?.nextElementSibling; + const clientId = clientIdEl?.firstElementChild?.nextElementSibling?.textContent; + const deExternalKeyEl = clientIdEl?.nextElementSibling; + const deExternalKey = deExternalKeyEl?.firstElementChild?.nextElementSibling?.textContent; + const actionEl = deExternalKeyEl?.nextElementSibling; + const action = actionEl?.firstElementChild?.nextElementSibling?.textContent; + const inquiryTypeEl = actionEl?.nextElementSibling?.nextElementSibling; + const inquiryType = inquiryTypeEl?.firstElementChild?.nextElementSibling?.textContent; + const successUrlEl = inquiryTypeEl?.nextElementSibling; + const successUrl = successUrlEl?.firstElementChild?.nextElementSibling?.textContent; + const errorUrlEl = successUrlEl?.nextElementSibling; + const errorUrl = errorUrlEl?.firstElementChild?.nextElementSibling?.textContent; + const formEl = div( + { class: 'relative my-2 mx-0 md:ml-2' }, + form( + { + id: `${formId}`, + name: `${formName}`, + action: 'https://cl.s13.exct.net/DEManager.aspx', + method: 'post', + class: 'text-sm w-full max-w-4xl box-border overflow-hidden rounded-xl my-0 mx-auto p-6', + style: 'background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%;', + }, + input({ type: 'hidden', name: '_clientID', value: `${clientId}` }), + input({ type: 'hidden', name: '_deExternalKey', value: `${deExternalKey}` }), + input({ type: 'hidden', name: '_action', value: `${action}` }), + input({ type: 'hidden', name: '_returnXML', value: '1' }), + input({ type: 'hidden', name: 'Inquiry_Type', value: `${inquiryType}` }), + input({ type: 'hidden', name: 'Inquiry_Number' }), + input({ type: 'hidden', name: 'UTM_Content' }), + input({ type: 'hidden', name: 'UTM_Campaign' }), + input({ type: 'hidden', name: 'UTM_Medium' }), + input({ type: 'hidden', name: 'UTM_Term' }), + input({ type: 'hidden', name: 'UTM_Source' }), + input({ type: 'hidden', name: 'UTM_NLC' }), + input({ type: 'hidden', name: 'Page_Track_URL' }), + input({ type: 'hidden', name: 'Job_Role', 'data-required': true }), + input({ type: 'hidden', name: 'Country', 'data-required': true }), + input({ type: 'hidden', name: '_successURL', value: `${successUrl}` }), + input({ type: 'hidden', name: '_errorURL', value: `${errorUrl}` }), + div( + { class: 'container mx-auto grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-6' }, + buildInputElement('First_Name', 'First name', 'text', 'First_Name', 'given-name', true, 'First_Name'), + buildInputElement('Last_Name', 'Last name', 'text', 'Last_Name', 'family-name', true, 'Last_Name'), + buildInputElement('Email_Address', 'Email address', 'text', 'Email_Address', 'email', true, 'Email_Address'), + buildInputElement('Phone_Number', 'Phone number', 'text', 'Phone_Number', 'tel', false, 'Phone_Number'), + buildInputElement('Company_Name', 'Company name', 'text', 'Company_Name', 'organization', true, 'Company_Name'), + buildInputElement('Postal_Code', 'ZIP / Postal code', 'text', 'Postal_Code', 'postal-code', true, 'Postal_Code'), + buildSelectElement('Job_Role', 'Job role', 'checkbox', 'Job_Role', 'Job_Role', roles), + buildSelectElement('Country', 'Country', 'checkbox', 'Country', 'Country', countries), + div( + { class: 'space-y-2 col-span-1 md:col-span-2' }, + label( + { + for: 'OpCo_Comments', + class: 'font-normal text-sm leading-4', + }, + 'Additional information (please provide as many details as possible):', + ), + textarea( + { + name: 'OpCo_Comments', + autocomplete: 'off', + 'data-required': false, + rows: '3', + cols: '50', + class: 'input-focus text-base w-full block px-2 py-4 font-extralight border border-solid border-gray-300', + }, + ), + emailOptIn(), + tnc(), + ), + ), + input( + { + type: 'submit', + name: 'submit', + value: 'Submit', + class: 'btn btn-lg font-medium btn-primary-purple rounded-full px-6 mt-6', + }, + ), + ), + ); + block.innerHTML = ''; + decorateIcons(formEl); + block.append(formEl); + loadUTMParams(); + + document.querySelector('#TTAE').addEventListener('submit', (event) => { + if (formValidate()) { + getInquiry(); + } else { + event.preventDefault(); + } + }); + + document.querySelectorAll('input#Job_Role + label + ul > li').forEach((el) => { + el.addEventListener('click', () => { + const dropdownInput = document.querySelector('input[name="Job_Role"]'); + if (el.innerText === 'Select') { + dropdownInput.value = ''; + } else { + dropdownInput.value = el.innerText; + } + const dropdownLabel = document.querySelector('input#Job_Role + label'); + dropdownLabel.children[0].innerHTML = el.innerText; + dropdownLabel.click(); + }); + }); + + document.querySelectorAll('input#Country + label + ul > li').forEach((el) => { + el.addEventListener('click', () => { + const dropdownInput = document.querySelector('input[name="Country"]'); + if (el.innerText === 'Select') { + dropdownInput.value = ''; + } else { + dropdownInput.value = el.innerText; + } + const dropdownLabel = document.querySelector('input#Country + label'); + dropdownLabel.children[0].innerHTML = el.innerText; + dropdownLabel.click(); + }); + }); +} + +export default function decorate(block) { + block.classList.add('relative'); + loadSFDCForm(block); +} diff --git a/build-css.js b/build-css.js index 5da46c60a..bc9be2a95 100644 --- a/build-css.js +++ b/build-css.js @@ -211,6 +211,11 @@ const fileMappings = [ output: './blocks/timeline/timeline.css', wrapper: 'timeline-wrapper', }, + { + content: ['./blocks/talk-to-an-expert-form/talk-to-an-expert-form.js'], + output: './blocks/talk-to-an-expert-form/talk-to-an-expert-form.css', + wrapper: 'talk-to-an-expert-form-wrapper', + }, { input: './templates/application/application-dev.css', output: './templates/application/application.css', diff --git a/icons/dropdown.svg b/icons/dropdown.svg new file mode 100644 index 000000000..254831957 --- /dev/null +++ b/icons/dropdown.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index c392022fe..ecfcbb22b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -727,7 +727,7 @@ body.appear { width: 100%; } -main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container) { +main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container) { padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 2rem; @@ -735,7 +735,7 @@ main .section:not(.stretch, .product-hero-container, .workflow-carousel-containe } @media (min-width: 768px) { - main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container) { + main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container) { padding-top: 3rem; padding-bottom: 3rem; } @@ -2017,6 +2017,30 @@ main .section .product-hero-wrapper .product-hero .product-hero-content .vertica } } +main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div input.input-focus:focus, + main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div textarea.input-focus:focus { + border-width: 1px; + border-style: solid; + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); + outline: 2px solid transparent; + outline-offset: 2px; +} + +main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div input.input-focus-checkbox { + margin-top: 1rem; + margin-bottom: 1rem; + height: 16px; + width: 16px; + border-radius: 0.25rem; + border-width: 1px; + accent-color: #7523FF; +} + +main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul { + overflow-y: scroll; +} + .pointer-events-none { pointer-events: none; } diff --git a/styles/tailwind.css b/styles/tailwind.css index a54f3df9a..b3d625564 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -88,7 +88,7 @@ @apply h-full w-full; } - main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container) { + main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container) { @apply px-6 py-8 md:py-12; } @@ -555,6 +555,20 @@ main .section .product-hero-wrapper .product-hero .product-hero-content .vertical-gallery-container .image-content > picture > img{ @apply w-[290px] lg:w-[400px]; } + + main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div input.input-focus:focus, + main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div textarea.input-focus:focus { + @apply border border-solid border-danaherpurple-500 outline-none; + } + + main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div input.input-focus-checkbox { + @apply mt-4 mb-4 w-[16px] h-[16px] border rounded accent-danaherpurple-500; + } + + main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul { + @apply overflow-y-scroll; + } + } @layer utilities { diff --git a/tools/actions/convert/test/fixtures/expert-bak-converted.html b/tools/actions/convert/test/fixtures/expert-bak-converted.html new file mode 100644 index 000000000..40902ad97 --- /dev/null +++ b/tools/actions/convert/test/fixtures/expert-bak-converted.html @@ -0,0 +1,119 @@ + + +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
:dam-Bookmark:
+
Overview
+
+
+
:dam-Refresh:
+
Process Steps
+
+
+
:dam-Cube:
+
Products
+
+
+
:dam-Chat:
+
Talk to an Expert
+
+
+
+
+
+
+

Speak to one of our world-leading life sciences experts

+

Whether you need to transform your workflows with intelligent instruments or explore how to turn scientific data into actionable insights, having expert advice at your fingertips is crucial to success. Get to know some of the leading experts from our life sciences companies below, then use the contact form to arrange a consultation.

+
+
+
+
+
+
id
+
TTAE
+
+
+
name
+
TTAE
+
+
+
_clientID
+
546006278
+
+
+
_deExternalKey
+
TTAE
+
+
+
_action
+
add
+
+
+
_returnXML
+
1
+
+
+
Inquiry_Type
+
Talk to an Expert
+
+
+
_successURL
+
https://stage.lifesciences.danaher.com/us/en/solutions/mabs/cell-line-development.html
+
+
+
_errorURL
+
https://help.salesforce.com/s/articleView?id=sf.mc\_es\_demanager.htm
+
+
+
+
+
Title
+
Cell Line Development Talk to an Expert | Danaher Life Sciences
+
+
+
canonical
+
https://lifesciences.danaher.com/us/en/solutions/mabs/cell-line-development/expert-bak.html
+
+
+
Image
+
+ +
+
+
+
creationDate
+
Fri, 02 Aug 2024 04:44:38 GMT
+
+
+
updateDate
+
Fri, 02 Aug 2024 04:47:54 GMT
+
+
+
+
+ + + \ No newline at end of file diff --git a/tools/actions/convert/test/fixtures/expert-bak.html b/tools/actions/convert/test/fixtures/expert-bak.html new file mode 100644 index 000000000..42b9c08f4 --- /dev/null +++ b/tools/actions/convert/test/fixtures/expert-bak.html @@ -0,0 +1,1166 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Cell Line Development Talk to an Expert | Danaher Life Sciences + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+ + + + + + + +
+
+ + + + +
+ +
+ + + + +
+
+ + + +
+ + +
+ + +
+ + +
+ +
+ +
+ +
+
+
+
+
+ + + + + + + + + +
+ + +
+ + +
+ + + +
+
+
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ + + +
+
+ + +
+ + +
+
+ By clicking the Submit button below and proceeding I confirm that I have reviewed and agree with the Terms of Use and the Privacy Policy. +
+
+
+ +
+
+ + + document.querySelectorAll('input#Job_Role + label + ul > li').forEach(function (el) { + el.addEventListener('click', function () { + const dropdownInput = document.querySelector('input[name="Job_Role"]'); + if (el.innerText === 'Select') { + dropdownInput.value = ''; + } else { + dropdownInput.value = el.innerText; + } + const dropdownLabel = document.querySelector('input#Job_Role + label'); + dropdownLabel.children[0].innerHTML = el.innerText; + dropdownLabel.click(); + }); + }); + + document.querySelectorAll('input#Country + label + ul > li').forEach(function (el) { + el.addEventListener('click', function () { + const dropdownInput = document.querySelector('input[name="Country"]'); + if (el.innerText === 'Select') { + dropdownInput.value = ''; + } else { + dropdownInput.value = el.innerText; + } + const dropdownLabel = document.querySelector('input#Country + label'); + dropdownLabel.children[0].innerHTML = el.innerText; + dropdownLabel.click(); + }); + }); + + + function fm_valid() { + var isValid = true; + document.querySelectorAll('[data-required]').forEach(function (el) { + if(el.dataset.required == 'true') { + const msgEl = document.querySelector('[data-name="' + el.name + '"]'); + console.log(msgEl); + if (el.value.length == 0) { + const name = el.name; + msgEl.innerHTML = "This field is required"; + isValid = false; + } else { + msgEl.innerHTML = ""; + } + } + }); + return isValid; + } + + window.onload = () => { + document.getElementsByName("UTM_Content")[0].value = localStorage.getItem("danaher_utm_content"); + document.getElementsByName("UTM_Campaign")[0].value = localStorage.getItem("danaher_utm_campaign"); + document.getElementsByName("UTM_Medium")[0].value = localStorage.getItem("danaher_utm_medium"); + document.getElementsByName("UTM_Term")[0].value = localStorage.getItem("danaher_utm_term"); + document.getElementsByName("UTM_Source")[0].value = localStorage.getItem("danaher_utm_source"); + document.getElementsByName("UTM_NLC")[0].value = localStorage.getItem("danaher_utm_nlc"); + document.getElementsByName("Page_Track_URL")[0].value = localStorage.getItem("danaher_utm_previouspage"); + }; + + document.querySelector("#TTAE").addEventListener("submit", function(event){ + if (fm_valid()) { + getInquiry(); + } else { + event.preventDefault(); + } + }); + + function getInquiry() { + const currentDate = new Date(); + const year = currentDate.getUTCFullYear(); + const month = String(currentDate.getUTCMonth() + 1).padStart(2, '0'); + const day = String(currentDate.getUTCDate()).padStart(2, '0'); + const hour = String(currentDate.getUTCHours()).padStart(2, '0'); + const min = String(currentDate.getUTCMinutes()).padStart(2, '0'); + const sec = String(currentDate.getUTCSeconds()).padStart(2, '0'); + const milli = String(currentDate.getUTCMilliseconds()).padStart(3, '0'); + const inquiry = year + month + day + hour + min + sec + milli; + document.getElementsByName("Inquiry_Number")[0].value = inquiry; + document.getElementByName("TTAE").submit(); + } + + + + + + .input-focus:focus { + border: 1px solid #7523FF !important; + outline: none; + } + .input-focus-checkbox { + margin-top: 14px; + margin-bottom: 14px; + width: 16px; + height: 16px; + border: 1px; + radius: 4px; + accent-color: #7523FF; + } + + .prior:checked ~ .prior-checked\:block { + display: block; + } + + .max-h-48 { + max-height: 12rem; + } + + .overflow-scroll { + overflow-y: scroll; + } + +
+
+
+
+ + +
+
+ +
+ + + +
+ + + + + + +
+
+ + + + +
+ +
+ + + +
+
+
+ +
+
+ + +
+ +
+ +
+ +
+
+ + + +
+ + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tools/actions/convert/test/fixtures/solutions-converted.html b/tools/actions/convert/test/fixtures/solutions-converted.html index dbf87ee6b..4f1d127dd 100644 --- a/tools/actions/convert/test/fixtures/solutions-converted.html +++ b/tools/actions/convert/test/fixtures/solutions-converted.html @@ -40,7 +40,7 @@

We see a way to identify high producing cell lines in <15 minutes

We see a way to access multidimensional data in minutes instead of weeks

The Intabio ZT system couples icIEF separation and UV detection with high resolution mass spectrometry on the ZenoTOF 7600 system

-

Discover Inatbio ZT

+

Discover Intabio ZT

Request a Quote

@@ -69,15 +69,16 @@

We see a way to access multidimensional data in minutes instead of weeks

Cell Line Development

-

WHY IT MATTERS

-

Leverage a partner with an extensive portfolio and accelerate your Cell Line Development

+

WHY IT MATTERS

+

Leverage a partner with an extensive portfolio and accelerate your Cell Line Development

Antibody drugs, including mAbs, bi- and trispecific antibodies, and antibody-drug conjugates, are a changing how we treat cancer and autoimmune diseases. Antibodies are derived from engineered producer cell lines.

-

Cell line development (CLD) is no simple task. Putting a lifesaving biologic, such as a targeted monoclonal antibody, on the market requires years of drug discovery research, development, clinical trials and scaling up for commercialization. Establishing cell lines is a long process, with numerous steps and challenges. Our Danaher Life Sciences companies support biopharma and service providers in their endeavor to accelerate the CLD process with its comprehensive platform of best-in-class science and technology companies. We recognize the necessity for solutions that eliminate bottlenecks faster and aim to address this with our extensive instrument, software, and services portfolio.

-

CUSTOMER SUCCESS STORY

+

Cell line development (CLD) is no simple task. Putting a lifesaving biologic, such as a targeted monoclonal antibody, on the market requires years of drug discovery research, development, clinical trials and scaling up for commercialization. Establishing cell lines is a long process, with numerous steps and challenges.

+

Our Danaher Life Sciences companies support biopharma and service providers in their endeavor to accelerate the CLD process with its comprehensive platform of best-in-class science and technology companies. We recognize the necessity for solutions that eliminate bottlenecks faster and aim to address this with our extensive instrument, software, and services portfolio.

+

CUSTOMER SUCCESS STORY

- Danaher Corporation + Danaher Corporation

Customer Success Story: Implementation of Digital Workflows for Efficient Cell Line Development

@@ -88,8 +89,8 @@

Customer Success Story: Implementation of Digital Workflows for Efficient Ce

-

THE PROCESS

-

The Cell Line Development Workflow

+

THE PROCESS

+

The Cell Line Development Workflow

Innovative and integrated solutions in automation, analytics, and digital tools to improve efficiency and productivity

@@ -120,8 +121,8 @@

One lab, three paths to faster cell line development outcomes

/fragments/workflow_tabs/mabs/cell_line_developmen/workflow-carousels/digital
-

Resources

-

Resources for Cell Line Development

+

Resources

+

Resources for Cell Line Development

Method validation and references

@@ -131,7 +132,7 @@

Method validation and references

Beckman Coulter Life Sciences

Automation of IgG Quantification using the Biomek i7 Hybrid Automated Workstation

-

Application Note, Application Bulletin

+

Application Note

Download

@@ -290,17 +291,6 @@

FIND OUT MORE

thankyou
mktoForm_1007
-
-
-

Thank you, your submission has been submitted.

-
-
-
-
We will get in touch with you shortly.
-
-
-
While you wait please check out our latest insights and innovations
-
@@ -308,15 +298,6 @@

Thank you, your submission has been submitted.

container-two-col
-
-
-
-
-
style
-
bg-white
-
-
-
Title
@@ -342,11 +323,11 @@

Thank you, your submission has been submitted.

updateDate
-
Tue, 06 Feb 2024 07:37:11 GMT
+
Thu, 01 Aug 2024 06:42:14 GMT
- + \ No newline at end of file diff --git a/tools/actions/convert/test/fixtures/solutions.html b/tools/actions/convert/test/fixtures/solutions.html index d9a72b410..d3b391c15 100644 --- a/tools/actions/convert/test/fixtures/solutions.html +++ b/tools/actions/convert/test/fixtures/solutions.html @@ -38,97 +38,16 @@ - + - - - + Cell Line Development (CLD) - Workflow Optimization Solutions | Danaher Life Sciences @@ -144,7 +63,6 @@ - @@ -152,7 +70,7 @@ dataLayer = [{ 'user': {"customerID":"","accountType":"guest","marketCode":"","company":"","role":"","city":"","state":"","country":"","postalCode":"","lastVisit":""} },{ - 'page': {"title":"Cell Line Development (CLD) - Workflow Optimization Solutions | Danaher Life Sciences","language":"en","locale":"US","level":"top","type":"webpage","keywords":"","creationDate":"Apr 13, 2023 02:13:01 PM","updateDate":"Feb 06, 2024 07:37:11 AM"} + 'page': {"title":"Cell Line Development (CLD) - Workflow Optimization Solutions | Danaher Life Sciences","language":"en","locale":"US","level":"top","type":"webpage","keywords":"","creationDate":"Apr 13, 2023 02:13:01 PM","updateDate":"Aug 01, 2024 06:42:14 AM"} }]; @@ -208,6 +126,11 @@ window.localStorage.setItem('danaher_utm_previouspage',utm_previouspage); } + let nlc = getParameterByName('nlc'); + if(nlc != null){ + window.localStorage.setItem('danaher_utm_nlc',nlc); + } + @@ -328,7 +251,7 @@ + @@ -1920,14 +1774,14 @@

Subscribe - + - + diff --git a/tools/actions/convert/test/fixtures/talk-to-expert-converted.html b/tools/actions/convert/test/fixtures/talk-to-expert-converted.html index 181a4b518..bef2892c8 100644 --- a/tools/actions/convert/test/fixtures/talk-to-expert-converted.html +++ b/tools/actions/convert/test/fixtures/talk-to-expert-converted.html @@ -59,17 +59,6 @@

Speak to one of our world-leading life sciences experts

thankyou
mktoForm_1007
-
-
-

Thank you, your submission has been submitted.

-
-
-
-
We will get in touch with you shortly.
-
-
-
While you wait please check out our latest insights and innovations
-
@@ -92,15 +81,15 @@

Thank you, your submission has been submitted.

creationDate
-
Thu, 24 Aug 2023 10:26:00 GMT
+
Thu, 13 Apr 2023 14:13:06 GMT
updateDate
-
Mon, 12 Feb 2024 10:43:44 GMT
+
Tue, 04 Jul 2023 11:42:45 GMT
- + \ No newline at end of file diff --git a/tools/actions/convert/test/fixtures/talk-to-expert.html b/tools/actions/convert/test/fixtures/talk-to-expert.html index 624461454..1776eb021 100644 --- a/tools/actions/convert/test/fixtures/talk-to-expert.html +++ b/tools/actions/convert/test/fixtures/talk-to-expert.html @@ -19,7 +19,7 @@ - + @@ -38,7 +38,7 @@ - + @@ -47,6 +47,7 @@ + mRNA Manufacturing Services | Danaher Life Sciences @@ -54,7 +55,7 @@ - + @@ -62,7 +63,6 @@ - @@ -70,7 +70,7 @@ dataLayer = [{ 'user': {"customerID":"","accountType":"guest","marketCode":"","company":"","role":"","city":"","state":"","country":"","postalCode":"","lastVisit":""} },{ - 'page': {"title":"mRNA Manufacturing Services | Danaher Life Sciences","language":"en","locale":"US","level":"top","type":"webpage","keywords":"","creationDate":"Aug 24, 2023 10:26:00 AM","updateDate":"Feb 12, 2024 10:43:44 AM"} + 'page': {"title":"mRNA Manufacturing Services | Danaher Life Sciences","language":"en","locale":"US","level":"top","type":"webpage","keywords":"","creationDate":"Apr 13, 2023 02:13:06 PM","updateDate":"Jul 04, 2023 11:42:45 AM"} }]; @@ -126,6 +126,11 @@ window.localStorage.setItem('danaher_utm_previouspage',utm_previouspage); } + let nlc = getParameterByName('nlc'); + if(nlc != null){ + window.localStorage.setItem('danaher_utm_nlc',nlc); + } + @@ -238,7 +243,7 @@ + @@ -743,14 +729,14 @@

Subscribe - + - + diff --git a/tools/importer/transformers/embedScript.js b/tools/importer/transformers/embedScript.js index e65d119bd..518ee75ae 100644 --- a/tools/importer/transformers/embedScript.js +++ b/tools/importer/transformers/embedScript.js @@ -1,4 +1,52 @@ /* global WebImporter */ +const marketoFormIds = (form, forms, document, index) => { + const formIdEl = document.createElement('div'); + const thankYouIdEl = document.createElement('div'); + if (index === 0) { + formIdEl.textContent = form?.getAttribute('id'); + forms.push([['marketo'], formIdEl]); + } else { + thankYouIdEl.textContent = form?.getAttribute('id'); + forms.push([['thankyou'], thankYouIdEl]); + } +}; + +const marketoForm = (scriptEl, forms, document) => { + const pEls = scriptEl?.querySelector('div.mktoForm > div#thankyou'); + const firstPEl = pEls?.firstElementChild; + if (firstPEl) { + const h2El = document.createElement('h2'); + h2El.textContent = firstPEl?.innerHTML; + forms.push([h2El]); + } + const secondPEl = pEls?.firstElementChild?.nextElementSibling; + if (secondPEl) { + const strongEl = document.createElement('strong'); + strongEl.textContent = secondPEl?.innerHTML; + forms.push([strongEl]); + } + const thirdPEl = pEls?.lastElementChild; + if (thirdPEl) { + const pEl = document.createElement('p'); + pEl.textContent = thirdPEl?.innerHTML; + forms.push([pEl]); + } +}; + +const sfdcForm = (form, forms, document) => { + const formId = document.createElement('div'); + const formName = document.createElement('div'); + formId.textContent = form?.getAttribute('id'); + forms.push([['id'], formId]); + formName.textContent = form?.getAttribute('name'); + forms.push([['name'], formName]); + form.querySelectorAll('input[type="hidden"]').forEach((field) => { + if (field?.value !== '') { + forms.push([[field?.name], field?.value]); + } + }); +}; + const embedScript = (main, document) => { const scriptEls = main.querySelectorAll('div.script'); if (scriptEls.length > 0) { @@ -14,41 +62,21 @@ const embedScript = (main, document) => { scriptEl.innerHTML = ''; scriptEl.append(block); } - const forms = []; + let formName = ''; const mktoForms = scriptEl.querySelectorAll('form'); if (mktoForms.length > 0) { mktoForms.forEach((form, index) => { - const formIdEl = document.createElement('div'); - const thankYouIdEl = document.createElement('div'); - if (index === 0) { - formIdEl.textContent = form?.getAttribute('id'); - forms.push([['marketo'], formIdEl]); + if (form?.getAttribute('id') === 'TTAE') { + sfdcForm(form, forms, document); + formName = 'Talk to an Expert Form'; } else { - thankYouIdEl.textContent = form?.getAttribute('id'); - forms.push([['thankyou'], thankYouIdEl]); + marketoFormIds(form, forms, document, index); + formName = 'Marketo Form'; } }); - const pEls = scriptEl?.querySelector('div.mktoForm > div#thankyou'); - const firstPEl = pEls?.firstElementChild; - if (firstPEl) { - const h2El = document.createElement('h2'); - h2El.textContent = firstPEl?.innerHTML; - forms.push([h2El]); - } - const secondPEl = pEls?.firstElementChild?.nextElementSibling; - if (secondPEl) { - const strongEl = document.createElement('strong'); - strongEl.textContent = secondPEl?.innerHTML; - forms.push([strongEl]); - } - const thirdPEl = pEls?.lastElementChild; - if (thirdPEl) { - const pEl = document.createElement('p'); - pEl.textContent = thirdPEl?.innerHTML; - forms.push([pEl]); - } - const cells = [['Marketo Form'], ...forms]; + if (formName === 'Marketo') marketoForm(scriptEl, forms, document); + const cells = [[`${formName}`], ...forms]; const block = WebImporter.DOMUtils.createTable(cells, document); scriptEl.innerHTML = ''; scriptEl.append(block);