MWPW-147634 - Add support for a custom Form block endpoint

libs/blocks/form/form.js

@@ -88,6 +88,7 @@ function createButton({ type, label }, thankYou) {
     button.addEventListener('click', async (event) => {
       const form = button.closest('form');
       if (form.checkValidity()) {
+        form.setAttribute('submitted', 'true');
         event.preventDefault();
         button.setAttribute('disabled', '');
         const submission = await submitForm(form);
@@ -232,7 +233,7 @@ function lowercaseKeys(obj) {
   }, {});
 }
 
-async function createForm(formURL, thankYou, formData) {
+async function createForm({ formURL, thankYou, formData, endpoint } = {}) {
   const { pathname } = new URL(formURL);
   let json = formData;
   /* c8 ignore next 4 */
@@ -243,7 +244,7 @@ async function createForm(formURL, thankYou, formData) {
   json.data = json.data.map((obj) => lowercaseKeys(obj));
   const form = createTag('form');
   const rules = [];
-  const [action] = pathname.split('.json');
+  const [action] = endpoint ? [endpoint] : pathname.split('.json');
   form.dataset.action = action;
 
   const typeToElement = {
@@ -290,8 +291,10 @@ async function createForm(formURL, thankYou, formData) {
 }
 
 export default async function decorate(block, formData = null) {
-  const form = block.querySelector('a[href$=".json"]');
+  const [form, endpoint] = block.querySelectorAll(':scope > div:first-child a');
   const thankYou = block.querySelector(':scope > div:last-of-type > div');
   thankYou.remove();
-  if (form) form.replaceWith(await createForm(form.href, thankYou, formData));
+  const config = { formURL: form?.href, thankYou, formData, endpoint: endpoint?.href };
+  if (endpoint) endpoint.parentElement.remove();
+  if (form) form.replaceWith(await createForm(config));
 }

test/blocks/form/form.test.js

@@ -92,14 +92,9 @@ describe('Form Block', async () => {
 
   it('submits successfully', async () => {
     const form = await waitForElement('form');
-    const reqCheck = form.querySelector('.group-container.required input');
-    const submit = form.querySelector('.form-submit-wrapper button');
-    reqCheck.checked = true;
-    reqCheck.closest('.field-wrapper').dispatchEvent(new Event('input'));
-    submit.dispatchEvent(new Event('click'));
+    form.querySelector('.form-submit-wrapper button').dispatchEvent(new Event('click'));
     await new Promise((resolve) => { setTimeout(() => resolve(), 150); });
-    const thanks = document.querySelector('.thank-you');
-    expect(thanks).to.exist;
+    expect(form.getAttribute('submitted')).to.equal('true');
   });
 
   it('clears successfully', async () => {

test/blocks/form/mocks/body.html

@@ -1,6 +1,7 @@
 <div class="form">
   <div>
     <div><a href="https://main--milo--adobecom.hlx.page/drafts/ebartholomew/forms/test-form.json">https://main--milo--adobecom.hlx.page/drafts/ebartholomew/forms/test-form.json</a></div>
+    <div><a href="https://main--milo--adobecom.hlx.page/drafts/ebartholomew/forms/test-form">https://main--milo--adobecom.hlx.page/drafts/ebartholomew/forms/test-form</a></div>
   </div>
   <div>
     <div>Thank you</div>

test/blocks/form/mocks/form-data.json

@@ -1 +1 @@
-{"total":23,"offset":0,"limit":23,"data":[{"Field":"legal","Label":"This is legal text","Placeholder":"","Type":"legal","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"title","Label":"This is a Heading","Placeholder":"","Type":"heading","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"firstName","Label":"First Name:","Placeholder":"First Name","Type":"","Required":"x","Options":"","Rules":"","Default":"","Extra":""},{"Field":"lastName","Label":"Last Name:","Placeholder":"Last Name","Type":"","Required":"x","Options":"","Rules":"","Default":"","Extra":""},{"Field":"email","Label":"Email:","Placeholder":"Email","Type":"email","Required":"x","Options":"","Rules":"","Default":"","Extra":""},{"Field":"favoriteNumber","Label":"What is your favorite number?","Placeholder":"","Type":"number","Required":"x","Options":"","Rules":"","Default":"","Extra":""},{"Field":"favoriteColor","Label":"What is your favorite color?","Placeholder":"Select One","Type":"select","Required":"x","Options":"Purple, Green, Red, Other","Rules":"","Default":"Red","Extra":""},{"Field":"coffeeTea","Label":"Do you prefer coffee or tea?","Placeholder":"","Type":"radio-group","Required":"","Options":"Coffee, Tea","Rules":"","Default":"Coffee","Extra":""},{"Field":"birthday","Label":"Please enter your birthday","Placeholder":"","Type":"date","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"agree","Label":"Do you agree?","Placeholder":"","Type":"checkbox","Required":"x","Options":"Yes","Rules":"","Default":"","Extra":""},{"Field":"genres","Label":"What genres of music do you like? (Check all that apply)","Placeholder":"","Type":"checkbox-group","Required":"","Options":"Hip-Hop, Rock, Alternative, Country, Dance, Pop","Rules":"","Default":"Hip-Hop, Alternative, Dance","Extra":""},{"Field":"tellUs","Label":"Tell us what you think!","Placeholder":"","Type":"text-area","Required":"x","Options":"","Rules":"","Default":"","Extra":""},{"Field":"hiddenFieldEq","Label":"This should be hidden if the number is equal to 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"=\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldNe","Label":"This should be hidden if the number is not equal to 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"!=\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldGt","Label":"This should be hidden if the number is greater than 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \">\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldGe","Label":"This should be hidden if the number is greater than or equal to 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \">=\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldLt","Label":"This should be hidden if the number is less than 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"<\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldLe","Label":"This should be hidden if the number is less than or equal to 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"<=\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldInc","Label":"This should be hidden if \"Pop\" is checked","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"genres\", \"operator\": \"inc\", \"value\": \"Pop\"}}","Default":"","Extra":""},{"Field":"hiddenFieldExc","Label":"This should be hidden if \"Pop\" is NOT checked","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"genres\", \"operator\": \"exc\", \"value\": \"Pop\"}}","Default":"","Extra":""},{"Field":"hiddenField","Label":"This should always be visible because the rule contains an invalid operator","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"foo\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"submit","Label":"Submit","Placeholder":"","Type":"submit","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"clear","Label":"Clear","Placeholder":"","Type":"clear","Required":"","Options":"","Rules":"","Default":"","Extra":""}],":type":"sheet"}
+{"total":23,"offset":0,"limit":23,"data":[{"Field":"legal","Label":"This is legal text","Placeholder":"","Type":"legal","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"title","Label":"This is a Heading","Placeholder":"","Type":"heading","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"firstName","Label":"First Name:","Placeholder":"First Name","Type":"","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"lastName","Label":"Last Name:","Placeholder":"Last Name","Type":"","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"email","Label":"Email:","Placeholder":"Email","Type":"email","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"favoriteNumber","Label":"What is your favorite number?","Placeholder":"","Type":"number","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"favoriteColor","Label":"What is your favorite color?","Placeholder":"Select One","Type":"select","Required":"","Options":"Purple, Green, Red, Other","Rules":"","Default":"Red","Extra":""},{"Field":"coffeeTea","Label":"Do you prefer coffee or tea?","Placeholder":"","Type":"radio-group","Required":"","Options":"Coffee, Tea","Rules":"","Default":"Coffee","Extra":""},{"Field":"birthday","Label":"Please enter your birthday","Placeholder":"","Type":"date","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"agree","Label":"Do you agree?","Placeholder":"","Type":"checkbox","Required":"","Options":"Yes","Rules":"","Default":"","Extra":""},{"Field":"genres","Label":"What genres of music do you like? (Check all that apply)","Placeholder":"","Type":"checkbox-group","Required":"","Options":"Hip-Hop, Rock, Alternative, Country, Dance, Pop","Rules":"","Default":"Hip-Hop, Alternative, Dance","Extra":""},{"Field":"tellUs","Label":"Tell us what you think!","Placeholder":"","Type":"text-area","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"hiddenFieldEq","Label":"This should be hidden if the number is equal to 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"=\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldNe","Label":"This should be hidden if the number is not equal to 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"!=\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldGt","Label":"This should be hidden if the number is greater than 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \">\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldGe","Label":"This should be hidden if the number is greater than or equal to 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \">=\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldLt","Label":"This should be hidden if the number is less than 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"<\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldLe","Label":"This should be hidden if the number is less than or equal to 10","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"<=\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"hiddenFieldInc","Label":"This should be hidden if \"Pop\" is checked","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"genres\", \"operator\": \"inc\", \"value\": \"Pop\"}}","Default":"","Extra":""},{"Field":"hiddenFieldExc","Label":"This should be hidden if \"Pop\" is NOT checked","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"genres\", \"operator\": \"exc\", \"value\": \"Pop\"}}","Default":"","Extra":""},{"Field":"hiddenField","Label":"This should always be visible because the rule contains an invalid operator","Placeholder":"","Type":"","Required":"","Options":"","Rules":"{\"type\": \"hidden\", \"condition\": {\"key\": \"favoriteNumber\", \"operator\": \"foo\", \"value\": \"10\"}}","Default":"","Extra":""},{"Field":"submit","Label":"Submit","Placeholder":"","Type":"submit","Required":"","Options":"","Rules":"","Default":"","Extra":""},{"Field":"clear","Label":"Clear","Placeholder":"","Type":"clear","Required":"","Options":"","Rules":"","Default":"","Extra":""}],":type":"sheet"}