diff --git a/blocks/forms/formHelper.js b/blocks/forms/formHelper.js index b79d37e2d..bdaa9b1d6 100644 --- a/blocks/forms/formHelper.js +++ b/blocks/forms/formHelper.js @@ -42,6 +42,9 @@ export const formMapping = [ { type: 'inquiry', id: 'bbca06dd-57d2-433b-a8c1-d5cd18b4ce28' }, // { type: 'share-story', id: 'a1086f3a-ed6e-47d1-9694-17f8c0a28612' }, { type: 'share-story', id: '5d062792-bb0b-4f11-bc26-f3d3422ae4ec' }, + { type: 'promo', id: '014f34d1-570e-49d9-b1a6-c630c5ef609f' }, + { type: 'ebook-promo', id: 'b83700e4-f00b-4b92-9124-fab2968f60b5' }, + { type: 'app-note-promo', id: 'ed0daf7c-99c6-4fd8-aa32-13d4e053fa64' }, ]; export function getFormId(type) { diff --git a/blocks/forms/forms.css b/blocks/forms/forms.css index 05e7d7598..388641198 100644 --- a/blocks/forms/forms.css +++ b/blocks/forms/forms.css @@ -1,9 +1,16 @@ +/* stylelint-disable no-descending-specificity */ :root { --input-color: #5f696b; --border-color: #bebebe; } -/* stylelint-disable no-descending-specificity */ +.forms.block .no-type-msg { + list-style: none; + padding: 0; + margin: 0; + text-align: left; +} + .hs-form .hs-dependent-field, .hs-form .hs-form-field { line-height: 1.4em; @@ -257,8 +264,8 @@ main form fieldset[class*="form-columns"] .input { order: 1; } -.hubspot-form form div:has(> .hs-richtext > .privacy), -.hubspot-form form fieldset:has(> .hs-richtext > .privacy) { +.hubspot-form form div:has(> .hs-richtext .privacy), +.hubspot-form form fieldset:has(> .hs-richtext .privacy) { order: 2; } diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js index b2b244932..6b4a887ba 100644 --- a/blocks/forms/forms.js +++ b/blocks/forms/forms.js @@ -1,7 +1,9 @@ /* eslint-disable import/no-cycle */ -import { button, div, h3 } from '../../scripts/dom-helpers.js'; +import { + button, div, h3, li, p, ul, +} from '../../scripts/dom-helpers.js'; import { loadCSS, toClassName } from '../../scripts/lib-franklin.js'; -import { loadScript } from '../../scripts/scripts.js'; +import { loadScript, toTitleCase } from '../../scripts/scripts.js'; import { createSalesforceForm, extractFormData, formMapping, getFormFieldValues, getFormId, updateFormFields, @@ -28,7 +30,7 @@ export function createHubSpotForm(formConfig, target, type = '') { const submitButton = button({ type: 'submit', class: 'button primary', - }, submitInput.value || 'Submit'); + }, formConfig.cta || submitInput.value || 'Submit'); submitInput.replaceWith(submitButton); } } @@ -37,7 +39,6 @@ export function createHubSpotForm(formConfig, target, type = '') { onFormSubmit: (hubspotForm) => { createSalesforceForm(hubspotForm, formConfig); if (type === 'newsletter' || type === 'lab-notes') { - console.log('Form submitted'); // eslint-disable-next-line no-undef, quote-props dataLayer.push({ 'event': 'new_subscriber' }); } @@ -60,9 +61,9 @@ export default async function decorate(block, index) { const formConfig = await extractFormData(block); const formHeading = formConfig.heading || ''; const target = toClassName(formHeading) || `hubspot-form-${index}`; - const blockClasses = block.classList.value; + const blockClasses = block.classList.value.split(' '); const formTypes = formMapping.map((item) => item.type); - const formType = formTypes.filter((type) => blockClasses.includes(type))[0]; + const formType = formTypes.find((type) => blockClasses.find((cls) => cls === type)); const form = div( h3(formHeading), @@ -74,5 +75,11 @@ export default async function decorate(block, index) { block.innerHTML = ''; block.appendChild(form); - loadHubSpotScript(createHubSpotForm.bind(null, formConfig, target, formType)); + if (formType) { + loadHubSpotScript(createHubSpotForm.bind(null, formConfig, target, formType)); + } else { + const formTypeList = ul({ class: 'no-type-msg' }, p('Please add one of the following type to the block:')); + formMapping.map((item) => formTypeList.appendChild(li(toTitleCase(item.type)))); + block.appendChild(formTypeList); + } } diff --git a/scripts/scripts.js b/scripts/scripts.js index a92bd8536..b49072bcc 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1350,4 +1350,14 @@ export async function getCountryCode() { return data.country_code; } +/** + * Converts any string to Title Case. + * + * @param {string} str - The input string. + * @returns {string} The formatted string in Title Case. + */ +export function toTitleCase(str) { + return str.toLowerCase().replace(/(?:^|\s|[_-])\w/g, (match) => match.toUpperCase()); +} + loadPage();