code optomized

hlxsites · Oct 17, 2024 · ecdc1b1 · ecdc1b1
1 parent b82b7a7
commit ecdc1b1
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 115 deletions.
diff --git a/blocks/forms/formHelper.js b/blocks/forms/formHelper.js
@@ -1,3 +1,5 @@
+import { input } from '../../scripts/dom-helpers.js';
+
 /* Helper functions */
 export const RESOURCEKEYS = ['heading', 'region', 'portalId', 'formId', 'redirectUrl', 'productFamily', 'productPrimaryApplication', 'cmp'];
 
@@ -69,3 +71,108 @@ export const fieldsObj = [
   { newName: 'Campaign_ID', fieldName: 'cmp' },
   { newName: 'cmp', fieldName: 'cmp' },
 ];
+
+/* custom form fields */
+function createCustomField(hubspotFormData, fieldName, newName) {
+  const fieldVal = hubspotFormData.get(fieldName);
+  if (fieldVal && fieldVal !== undefined && fieldVal !== '') {
+    const elementCompany = input({ name: newName, value: fieldVal, type: 'hidden' });
+    return elementCompany;
+  }
+  return 0;
+}
+
+/* create salesforce form */
+export function createSalesforceForm(hubspotForm, formConfig) {
+  const hubspotFormData = new FormData(hubspotForm);
+  const form = document.createElement('form');
+  form.method = 'POST';
+  form.action = 'https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8';
+
+  // Your org ID
+  const elementOID = input({ name: 'oid', value: OID, type: 'hidden' });
+  form.appendChild(elementOID);
+
+  // generate a form from Customize | Leads | Web-to-Lead to figure out more
+  fieldsObj.forEach(({ newName, fieldName }) => {
+    const inputField = createCustomField(hubspotFormData, fieldName, newName);
+    if (inputField && inputField !== 0) {
+      form.appendChild(inputField);
+    }
+  });
+
+  /* qdc */ // test case
+  const qdcCall = hubspotForm.querySelector('input[name="requested_a_salesperson_to_call__c"]').checked;
+  let qdc = '';
+
+  if (qdcCall) {
+    qdc = 'Call';
+  } else {
+    qdc = hubspotFormData.get('requested_qdc_discussion__c') || ''; // test case
+  }
+  if (qdc === '') {
+    qdc = formConfig.qdc || '';
+  }
+
+  const elementqdcrequest = input({ name: QDCRrequest, value: qdc, type: 'hidden' });
+  form.appendChild(elementqdcrequest);
+
+  /* subscribe */
+  let subscribe = hubspotForm.querySelector('input[name="subscribe"]').checked;
+  if (!subscribe) { subscribe = 'false'; }
+  const elementmarketingoptin = input({ name: marketingOptin, value: subscribe, type: 'hidden' });
+  form.appendChild(elementmarketingoptin);
+
+  // SFDC redirects to returnURL in the response to the form post
+  let returnURL = hubspotFormData.get('return_url');
+  if (!returnURL) {
+    returnURL = formConfig.redirectUrl;
+  }
+
+  if (returnURL) {
+    const hsmduri = returnURL;
+    const hsmdkey = 'rfq';
+    const hsmdvalue = qdc;
+
+    const re = new RegExp(`([?&])${hsmdkey}=.*?(&|$)`, 'i');
+    const separator = hsmduri.indexOf('?') !== -1 ? '&' : '?';
+
+    if (hsmduri.match(re)) {
+      returnURL = hsmduri.replace(re, `$1${hsmdkey}=${hsmdvalue}$2`);
+    } else {
+      returnURL = `${hsmduri}${separator}${hsmdkey}=${hsmdvalue}`;
+    }
+
+    returnURL = `${returnURL}&subscribe=${subscribe}`;
+  }
+  const elementRetURL = input({ name: 'retURL', value: returnURL, type: 'hidden' });
+  form.appendChild(elementRetURL);
+
+  // test case
+  const primaryApplicationText = hubspotFormData.get('product_primary_application__c');
+  const productAndPrimaryFtype = hubspotFormData.get('product_and_primary_application_na___service_contracts');
+  let primaryApplication = '';
+  if (productAndPrimaryFtype) {
+    const checkboxes = hubspotForm.getElementsByName('product_and_primary_application_na___service_contracts');
+    for (let i = 0; i < checkboxes.length; i += 1) {
+      if (checkboxes[i].checked) {
+        primaryApplication += `${checkboxes[i].value} , `;
+      }
+    }
+  } else if (primaryApplicationText !== '' && primaryApplicationText !== undefined) {
+    primaryApplication = primaryApplicationText;
+  }
+  const elementprodprimapp = input({ name: prodPrimApp, value: primaryApplication, type: 'hidden' });
+  form.appendChild(elementprodprimapp);
+
+  document.body.appendChild(form);
+
+  const allowedValues = ['Call', 'Demo', 'Quote'];
+  if (allowedValues.includes(qdc)) {
+    form.submit();
+  } else {
+    setTimeout(() => { window.top.location.href = returnURL; }, 200);
+  }
+
+  // return { form, qdc, returnURL };
+}
diff --git a/blocks/forms/forms.css b/blocks/forms/forms.css
@@ -223,6 +223,7 @@ label.privacy {
 
 .hs-submit .actions button {
   width: 100%;
+  margin-bottom: 0;
 }
 
 /* hubspot form */
@@ -242,7 +243,7 @@ label.privacy {
 
 @media only screen and (min-width: 992px) {
   .hs-submit .actions {
-    margin: 10px auto 20px;
+    margin: 10px auto;
     max-width: 543px;
   }
 }

diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js
@@ -1,21 +1,7 @@
-import {
-  button, div, h3, input,
-} from '../../scripts/dom-helpers.js';
+import { button, div, h3 } from '../../scripts/dom-helpers.js';
 import { toCamelCase, toClassName } from '../../scripts/lib-franklin.js';
 import { loadScript } from '../../scripts/scripts.js';
-import {
-  fieldsObj, getDefaultForKey, marketingOptin, OID, prodPrimApp, QDCRrequest, RESOURCEKEYS,
-} from './formHelper.js';
-
-/* custom form fields */
-function createCustomField(hubspotFormData, fieldName, newName) {
-  const fieldVal = hubspotFormData.get(fieldName);
-  if (fieldVal && fieldVal !== undefined && fieldVal !== '') {
-    const elementCompany = input({ name: newName, value: fieldVal, type: 'hidden' });
-    return elementCompany;
-  }
-  return 0;
-}
+import { createSalesforceForm, getDefaultForKey, RESOURCEKEYS } from './formHelper.js';
 
 /* extract data from table  */
 async function extractFormData(block) {
@@ -30,6 +16,12 @@ async function extractFormData(block) {
     if (!blockData[key]) {
       blockData[key] = getDefaultForKey(key);
     }
+    /* change return url's origin */
+    if (key === 'redirectUrl' && blockData[key].includes('hlxsites.hlx.page')) {
+      const redirectOBJ = new URL(blockData[key]);
+      const currentPageOrigin = window.location.origin;
+      blockData[key] = `${currentPageOrigin}${redirectOBJ.pathname}${redirectOBJ.search}`;
+    }
   });
   return blockData;
 }
@@ -58,6 +50,8 @@ function createHubSpotForm(formConfig, target) {
             const mPrimaryApplication = formConfig.productPrimaryApplication;
             const mRequestedQdcDiscussionC = formConfig.qdc;
             const mCmp = formConfig.cmp || valuecmp;
+
+            // change redirect url's origin
             const mReturnUrl = formConfig.redirectUrl;
 
             // Update the form with SFDC values if they exist
@@ -95,99 +89,7 @@ function createHubSpotForm(formConfig, target) {
         });
       },
       onFormSubmit: (hubspotForm) => {
-        setTimeout(() => {
-          const hubspotFormData = new FormData(hubspotForm);
-          const form = document.createElement('form');
-          form.method = 'POST';
-          form.action = 'https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8';
-
-          // Your org ID
-          const elementOID = input({ name: 'oid', value: OID, type: 'hidden' });
-          form.appendChild(elementOID);
-
-          // generate a form from Customize | Leads | Web-to-Lead to figure out more
-          fieldsObj.forEach(({ newName, fieldName }) => {
-            const inputField = createCustomField(hubspotFormData, fieldName, newName);
-            if (inputField && inputField !== 0) {
-              form.appendChild(inputField);
-            }
-          });
-
-          /* qdc */ // test case
-          const qdcCall = hubspotForm.querySelector('input[name="requested_a_salesperson_to_call__c"]').checked;
-          let qdc = '';
-
-          if (qdcCall) {
-            qdc = 'Call';
-          } else {
-            qdc = hubspotFormData.get('requested_qdc_discussion__c') || ''; // test case
-          }
-          if (qdc === '') {
-            qdc = formConfig.qdc || '';
-          }
-
-          const elementqdcrequest = input({ name: QDCRrequest, value: qdc, type: 'hidden' });
-          form.appendChild(elementqdcrequest);
-
-          /* subscribe */
-          let subscribe = hubspotForm.querySelector('input[name="subscribe"]').checked;
-          if (!subscribe) { subscribe = 'false'; }
-          const elementmarketingoptin = input({ name: marketingOptin, value: subscribe, type: 'hidden' });
-          form.appendChild(elementmarketingoptin);
-
-          // SFDC redirects to returnURL in the response to the form post
-          let returnURL = hubspotFormData.get('return_url');
-          if (!returnURL) {
-            returnURL = formConfig.redirectUrl;
-          }
-
-          if (returnURL) {
-            const hsmduri = returnURL;
-            const hsmdkey = 'rfq';
-            const hsmdvalue = qdc;
-
-            const re = new RegExp(`([?&])${hsmdkey}=.*?(&|$)`, 'i');
-            const separator = hsmduri.indexOf('?') !== -1 ? '&' : '?';
-
-            if (hsmduri.match(re)) {
-              returnURL = hsmduri.replace(re, `$1${hsmdkey}=${hsmdvalue}$2`);
-            } else {
-              returnURL = `${hsmduri}${separator}${hsmdkey}=${hsmdvalue}`;
-            }
-
-            returnURL = `${returnURL}&subscribe=${subscribe}`;
-          }
-          const elementRetURL = input({ name: 'retURL', value: returnURL, type: 'hidden' });
-          form.appendChild(elementRetURL);
-
-          // test case
-          const primaryApplicationText = hubspotFormData.get('product_primary_application__c');
-          const productAndPrimaryFtype = hubspotFormData.get('product_and_primary_application_na___service_contracts');
-          let primaryApplication = '';
-          if (productAndPrimaryFtype) {
-            const checkboxes = hubspotForm.getElementsByName('product_and_primary_application_na___service_contracts');
-            for (let i = 0; i < checkboxes.length; i += 1) {
-              if (checkboxes[i].checked) {
-                primaryApplication += `${checkboxes[i].value} , `;
-              }
-            }
-          } else if (primaryApplicationText !== '' && primaryApplicationText !== undefined) {
-            primaryApplication = primaryApplicationText;
-          }
-          const elementprodprimapp = input({ name: prodPrimApp, value: primaryApplication, type: 'hidden' });
-          form.appendChild(elementprodprimapp);
-
-          // Append the form to the body
-          document.body.appendChild(form);
-
-          const allowedValues = ['Call', 'Demo', 'Quote'];
-          if (allowedValues.includes(qdc)) {
-            form.submit();
-          } else {
-            setTimeout(() => { window.top.location.href = returnURL; }, 200);
-          }
-          /* END */
-        }, 1000);
+        createSalesforceForm(hubspotForm, formConfig);
       },
     });
   } catch (e) {
@@ -209,10 +111,7 @@ export default async function decorate(block, index) {
 
   const form = div(
     h3(formHeading),
-    div({
-      id: target,
-      class: 'hubspot-form',
-    }),
+    div({ id: target, class: 'hubspot-form' }),
   );
 
   block.replaceWith(form);

diff --git a/styles/styles.css b/styles/styles.css
@@ -496,7 +496,6 @@ button.primary {
   white-space: break-spaces;
   padding: 14px 18px;
   line-height: 21px;
-  margin-bottom: 20px;
 }
 
 .button-container:has(+ .button-container) a.button.primary {