From 23ad1f722326a31d504d50ba99a3a2cd310be777 Mon Sep 17 00:00:00 2001 From: Anian Weber Date: Fri, 8 Dec 2023 13:51:25 +0100 Subject: [PATCH] SPIN-126 // Prototype for hubspot integration --- blocks/form/form.js | 196 ++------------------------------------------ 1 file changed, 8 insertions(+), 188 deletions(-) diff --git a/blocks/form/form.js b/blocks/form/form.js index 0894e3f..c2b113f 100644 --- a/blocks/form/form.js +++ b/blocks/form/form.js @@ -1,192 +1,12 @@ -function createSelect(fd) { - const select = document.createElement('select'); - select.id = fd.Field; - if (fd.Placeholder) { - const ph = document.createElement('option'); - ph.textContent = fd.Placeholder; - ph.setAttribute('selected', ''); - ph.setAttribute('disabled', ''); - select.append(ph); - } - fd.Options.split(',').forEach((o) => { - const option = document.createElement('option'); - option.textContent = o.trim(); - option.value = o.trim(); - select.append(option); - }); - if (fd.Mandatory === 'x') { - select.setAttribute('required', 'required'); - } - return select; -} - -function constructPayload(form) { - const payload = {}; - [...form.elements].forEach((fe) => { - if (fe.type === 'checkbox') { - if (fe.checked) payload[fe.id] = fe.value; - } else if (fe.id) { - payload[fe.id] = fe.value; - } - }); - return payload; -} - -async function submitForm(form) { - const payload = constructPayload(form); - const resp = await fetch(form.dataset.action, { - method: 'POST', - cache: 'no-cache', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ data: payload }), - }); - await resp.text(); - return payload; -} - -function createButton(fd) { - const button = document.createElement('button'); - button.textContent = fd.Label; - button.classList.add('button'); - if (fd.Type === 'submit') { - button.addEventListener('click', async (event) => { - const form = button.closest('form'); - const formBlock = button.closest('.form.block'); - if (form.checkValidity()) { - event.preventDefault(); - button.setAttribute('disabled', ''); - await submitForm(form); - const formThankYou = formBlock.querySelector('.form-thank-you'); - if (formThankYou) { - formBlock.querySelector('.form-content').classList.add('hidden'); - formThankYou.classList.remove('hidden'); - } - - window.location.hash = '#form'; - } - }); - } - return button; -} - -function createHeading(fd) { - const heading = document.createElement('h3'); - heading.textContent = fd.Label; - return heading; -} +import { loadScript } from '../../scripts/lib-franklin.js'; -function createInput(fd) { - const input = document.createElement('input'); - input.type = fd.Type; - input.id = fd.Field; - input.setAttribute('placeholder', fd.Placeholder); - if (fd.Mandatory === 'x') { - input.setAttribute('required', 'required'); - } - return input; -} - -function createTextArea(fd) { - const input = document.createElement('textarea'); - input.id = fd.Field; - input.setAttribute('placeholder', fd.Placeholder); - if (fd.Mandatory === 'x') { - input.setAttribute('required', 'required'); - } - return input; -} +export default async function decorate() { + await loadScript('https://js.hsforms.net/forms/embed/v2.js'); -function createLabel(fd) { - const label = document.createElement('label'); - label.setAttribute('for', fd.Field); - label.textContent = fd.Label; - if (fd.Mandatory === 'x') { - label.classList.add('required'); - } - return label; -} - -function applyRules(form, rules) { - const payload = constructPayload(form); - rules.forEach((field) => { - const { type, condition: { key, operator, value } } = field.rule; - if (type === 'visible') { - if (operator === 'eq') { - if (payload[key] === value) { - form.querySelector(`.${field.fieldId}`).classList.remove('hidden'); - } else { - form.querySelector(`.${field.fieldId}`).classList.add('hidden'); - } - } - } + window.hbspt.forms.create({ + region: 'na1', + portalId: '3458432', + formId: 'a9f10e4b-6c50-442b-ae10-df1b06d21e6f', + target: '.form', }); } - -async function createForm(formURL) { - const { pathname } = new URL(formURL); - const resp = await fetch(pathname); - const json = await resp.json(); - const form = document.createElement('form'); - const rules = []; - // eslint-disable-next-line prefer-destructuring - form.dataset.action = pathname.split('.json')[0]; - json.data.forEach((fd) => { - fd.Type = fd.Type || 'text'; - const fieldWrapper = document.createElement('div'); - const style = fd.Style ? ` form-${fd.Style}` : ''; - const fieldId = `form-${fd.Type}-wrapper${style}`; - fieldWrapper.className = fieldId; - fieldWrapper.classList.add('field-wrapper'); - switch (fd.Type) { - case 'select': - fieldWrapper.append(createLabel(fd)); - fieldWrapper.append(createSelect(fd)); - break; - case 'heading': - fieldWrapper.append(createHeading(fd)); - break; - case 'checkbox': - fieldWrapper.append(createInput(fd)); - fieldWrapper.append(createLabel(fd)); - break; - case 'text-area': - fieldWrapper.append(createLabel(fd)); - fieldWrapper.append(createTextArea(fd)); - break; - case 'submit': - fieldWrapper.append(createButton(fd)); - break; - default: - fieldWrapper.append(createInput(fd)); - fieldWrapper.append(createLabel(fd)); - } - - if (fd.Rules) { - try { - rules.push({ fieldId, rule: JSON.parse(fd.Rules) }); - } catch (e) { - // eslint-disable-next-line no-console - console.warn(`Invalid Rule ${fd.Rules}: ${e}`); - } - } - form.append(fieldWrapper); - }); - - form.addEventListener('change', () => applyRules(form, rules)); - applyRules(form, rules); - - return (form); -} - -export default async function decorate(block) { - const form = block.querySelector('a[href$=".json"]'); - block.id = 'form'; - if (form) { - form.parentElement.replaceWith(await createForm(form.href)); - } - const formRows = block.querySelectorAll('.form>div'); - formRows[0].classList.add('form-content'); - formRows[1].classList.add('form-thank-you', 'hidden'); -}