basic decoration for additional content form step

blocks/event-materials-component/event-materials-component.js

@@ -3,7 +3,7 @@ import { getIcon, generateToolTip } from '../../utils/utils.js';
 
 const { createTag } = await import(`${getLibs()}/utils/utils.js`);
 
-async function decorateSWCTextField(row, id, extraOptions) {
+async function decorateSWCTextField(row, extraOptions) {
   const miloLibs = getLibs();
   await Promise.all([
     import(`${miloLibs}/deps/lit-all.min.js`),
@@ -12,7 +12,6 @@ async function decorateSWCTextField(row, id, extraOptions) {
 
   row.classList.add('text-field-row');
 
-  const existingFileInput = document.querySelectorAll('.material-file-input');
   const cols = row.querySelectorAll(':scope > div');
   if (!cols.length) return;
   const [placeholderCol, maxLengthCol] = cols;
@@ -27,7 +26,7 @@ async function decorateSWCTextField(row, id, extraOptions) {
   const isRequired = attrTextEl?.textContent.trim().endsWith('*');
 
   const input = createTag('sp-textfield', {
-    id, class: 'text-input', placeholder: text, ...extraOptions
+    ...extraOptions, class: 'text-input', placeholder: text
   });
 
   if (isRequired) input.required = true;
@@ -82,7 +81,7 @@ export default function init(el) {
   const rows = el.querySelectorAll(':scope > div');
   rows.forEach(async (r, i) => {
     if (i === 0) decorateFileDropzone(r);
-    if (i === 1) await decorateSWCTextField(r, `event-material-url-${blockIndex}`);
-    if (i === 2) await decorateSWCTextField(r, `event-material-name-${blockIndex}`, { quiet: true, size: 'xl' });
+    if (i === 1) await decorateSWCTextField(r, { id: `event-material-url-${blockIndex}` });
+    if (i === 2) await decorateSWCTextField(r, { id: `event-material-name-${blockIndex}`, quiet: true, size: 'xl' });
   });
 }

blocks/product-promotion-component/product-promotion-component.js

@@ -0,0 +1,9 @@
+import { getLibs } from '../../scripts/utils.js';
+import { getIcon, generateToolTip } from '../../utils/utils.js';
+
+const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+
+export default function init(el) {
+  el.classList.add('form-component');
+  generateToolTip(el);
+}

blocks/registration-details-component/registration-details-component.css

@@ -0,0 +1,40 @@
+.registration-details-component .attendee-fields-wrapper {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  padding-bottom: 24px;
+  margin-bottom: 40px;
+  border-bottom: 3px solid var(--stroke-color-divider);
+}
+
+.registration-details-component .attendee-count-wrapper {
+  display: flex;
+  gap: 16px;
+}
+
+.registration-details-component .attendee-count-wrapper input {
+  max-width: 64px;
+}
+
+.registration-details-component .rsvp-field-wrapper sp-textfield {
+  width: 100%;
+}
+
+.registration-details-component .rsvp-field-wrapper .attr-text {
+  text-align: right;
+}
+
+.registration-details-component fieldset.checkboxes-wrapper {
+  display: flex;
+  gap: 32px;
+}
+
+.registration-details-component .attendee-fields-wrapper fieldset.checkboxes-wrapper {
+  flex-direction: column;
+  gap: 0; 
+}
+
+.registration-details-component .rsvp-checkboxes {
+  margin-top: 40px;
+  border-top: 3px solid var(--stroke-color-divider);
+}

blocks/registration-details-component/registration-details-component.js

@@ -0,0 +1,90 @@
+import { getLibs } from '../../scripts/utils.js';
+import { generateToolTip, handlize } from '../../utils/utils.js';
+
+const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+
+function decorateAttendeeFields(row) {
+  row.classList.add('attendee-fields-wrapper');
+  const cols = row.querySelectorAll(':scope > div');
+
+  cols.forEach((c, i) => {
+    if (i === 0) {
+      c.classList.add('attendee-count-wrapper');
+      const input = createTag('input', { id: 'attendee-count-input', name: 'attendee-count-input', class: 'number-input', type: 'number' });
+      const label = createTag('label', { for: 'attendee-count-input', class: 'number-input-label' }, c.textContent.trim());
+      c.innerHTML = '';
+      c.append(input, label)
+    }
+  })
+}
+
+function decorateSWCTextField(row, options) {
+  row.classList.add('text-field-row');
+
+  const cols = row.querySelectorAll(':scope > div');
+  if (!cols.length) return;
+  const [placeholderCol, maxLengthCol] = cols;
+  const text = placeholderCol.textContent.trim();
+
+  let maxCharNum, attrTextEl;
+  if (maxLengthCol) {
+    attrTextEl = createTag('div', { class: 'attr-text' }, maxLengthCol.textContent.trim());
+    maxCharNum = maxLengthCol.querySelector('strong')?.textContent.trim();
+  }
+
+  const isRequired = attrTextEl?.textContent.trim().endsWith('*');
+
+  const inputOptions = {
+    ...options, class: 'text-input', placeholder: text, 
+  }
+  if (isRequired) inputOptions.required = true;
+  if (maxCharNum) inputOptions.maxlength = maxCharNum;
+
+  const input = createTag('sp-textfield', inputOptions);
+
+
+  const wrapper = createTag('div', { class: 'rsvp-field-wrapper' });
+  row.innerHTML = '';
+  wrapper.append(input);
+  if (attrTextEl) wrapper.append(attrTextEl);
+  row.append(wrapper);
+}
+
+function decorateAllCheckboxes(el) {
+  const uls = el.querySelectorAll('ul');
+
+  uls.forEach((ul) => {
+    const fieldset = createTag('fieldset', { class: 'checkboxes-wrapper' });
+    ul.parentElement.replaceChild(fieldset, ul);
+    const lis = ul.querySelectorAll('li');
+
+    lis.forEach((li) => {
+      const checkbox = createTag('sp-checkbox', { id: `registration-${handlize(li.textContent)}` }, li.textContent.trim());
+      fieldset.append(checkbox);
+    })
+  })
+}
+
+function decorateRSVPFields(row) {
+  row.classList.add('rsvp-checkboxes');
+}
+
+export default async function init(el) {
+  const miloLibs = getLibs();
+  await Promise.all([
+    import(`${miloLibs}/deps/lit-all.min.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
+  ]);
+
+  el.classList.add('form-component');
+  generateToolTip(el);
+  decorateAllCheckboxes(el);
+
+  const rows = el.querySelectorAll(':scope > div');
+  rows.forEach((r, i) => {
+    if (i === 1) decorateAttendeeFields(r);
+    if (i === 2 || i === 3 || i === 4) decorateSWCTextField(r, { quiet: true, size: 'xl' });
+    if (i === 5) decorateRSVPFields(r);
+  });
+}