From 6fab4aad91459ff8d769547d01b023f7c56afe9c Mon Sep 17 00:00:00 2001 From: bluedeepart Date: Mon, 20 Jan 2025 11:58:53 +0530 Subject: [PATCH 1/3] initial commit --- blocks/forms/formHelper.js | 3 +++ blocks/forms/forms.css | 9 ++++++++- blocks/forms/forms.js | 17 ++++++++++++----- scripts/scripts.js | 10 ++++++++++ 4 files changed, 33 insertions(+), 6 deletions(-) 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..e53bf460c 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; diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js index b2b244932..0cc9efc2d 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' }); } @@ -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(); From bf6a27c23ab43bce80035e1d5e75d25ad2b6180d Mon Sep 17 00:00:00 2001 From: bluedeepart Date: Mon, 20 Jan 2025 16:32:50 +0530 Subject: [PATCH 2/3] fixed form type value --- blocks/forms/forms.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js index 0cc9efc2d..6b4a887ba 100644 --- a/blocks/forms/forms.js +++ b/blocks/forms/forms.js @@ -61,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), From 443455669aa0c5276ef2e12d5297e9f0095f639e Mon Sep 17 00:00:00 2001 From: bluedeepart Date: Mon, 20 Jan 2025 17:14:46 +0530 Subject: [PATCH 3/3] fixed styling --- blocks/forms/forms.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/forms/forms.css b/blocks/forms/forms.css index e53bf460c..388641198 100644 --- a/blocks/forms/forms.css +++ b/blocks/forms/forms.css @@ -264,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; }