bhl-forms 0.1.33 → 0.2.1

package/dist/forms/ssdi.es.js

@@ -65,7 +65,8 @@ function defaultMetaProps() {
     finalHeadlines: TOLPFinalHeadlines,
     defaultFinalSubHeadline: DEFAULT_FINAL_SUBHEADLINE,
     finalSubHeadlines: TOLPFinalSubHeadlines,
-    trustedFormTOLPs: trustedFormTOLPs
+    // Added everywhere for now
+    // trustedFormTOLPs: trustedFormTOLPs
   })
 }
 
@@ -93,30 +94,90 @@ function formAnchor(updates) {
   )
 }
 
-const headlineDefaults = {
-  $el: 'h1',
+const progressBarDefaults = {
+  $el: 'div',
   attrs: {
-    class: 't-flex t-justify-center t-text-center !t-text-[2rem] t-font-semibold t-pt-5 t-px-7 md:t-px-3'
-  }
+    class: 't-mt-7 t-mb-5 t-w-full t-flex t-flex-col t-justify-center t-items-center',
+    style: {
+      if: '$fns.eq($activeStep, $firstStep()) || $fns.eq($activeStep, $lastStep())',
+      then: 'display: none'
+    },
+  },
+  children: [
+    {
+      $el: 'div',
+      attrs: {
+        class: 't-flex t-justify-center'
+      },
+      children: [
+        {
+          $el: 'span',
+          attrs: {
+            id: 'progress-bar-text',
+            class: 't-text-sm t-mb-1'
+          },
+          children: [
+            "0% Complete"
+          ]
+        },
+      ]
+    },
+    {
+      $el: 'div',
+      attrs: {
+        class: 't-bg-gray-100 t-w-9/12 t-rounded'
+      },
+      children: [
+        {
+          $el: 'div',
+          attrs: {
+            id: 'progress-bar',
+            class: 't-flex t-flex-col t-justify-center t-text-center t-whitespace-nowrap t-w-[10%] t-h-1.5 t-rounded t-text-white t-bg-[#007bff]',
+            style: {
+              transition: 'width 0.5s ease'
+            },
+          },
+        }
+      ]
+    }
+  ]
 };
 
-function headline(updates) {
+function progressBar(updates) {
   return merge(
-    headlineDefaults,
+    progressBarDefaults,
     updates
   )
 }
 
-const subHeadlineDefaults = {
-  $el: 'h3',
-  attrs: {
-    class: 't-flex t-justify-center t-text-center !t-text-[1.2rem] t-font-medium t-text-blue-500 t-px-10'
+function headlineDefaults(updates = {}) {
+  return {
+    $el: 'h1',
+    attrs: {
+      class: 't-flex t-justify-center t-text-center !t-text-[2rem] t-font-semibold t-pt-5 t-px-7 md:t-px-3' + ' ' + (updates.headlineClass || '')
+    }
   }
-};
+}
 
-function subHeadline(updates) {
+function headline(updates = {}) {
   return merge(
-    subHeadlineDefaults,
+    headlineDefaults(updates),
+    updates
+  )
+}
+
+function subHeadlineDefaults(updates = {}) {
+  return {
+    $el: 'h3',
+    attrs: {
+      class: 't-flex t-justify-center t-text-center !t-text-[1.2rem] t-font-medium t-text-blue-500 t-px-10' + ' ' + (updates.subHeadlineClass || '')
+    }
+  }
+}
+
+function subHeadline(updates = {}) {
+  return merge(
+    subHeadlineDefaults(updates),
     updates
   )
 }
@@ -366,61 +427,6 @@ const TOLPFinalSubHeadlines = {
   // 'Non-Workplace Discrimination': '',
 };
 
-
-const trustedFormTOLPs = {
-  'Adoption': true,
-  // 'Asbestos and Mesothelioma': '',
-  // 'Auto and Car Accidents': '',
-  // 'Bankruptcy': '',
-  // 'Birth Certificate and Name Change': '',
-  // 'Business Lawyers': '',
-  'Child Custody and Support': true,
-  'Child Custody': true,
-  'Child Support': true,
-  // 'Civil Rights and Discrimination': '',
-  // 'Civil Lawsuit': '',
-  // 'Consumer Lawyers': '',
-  // 'Copyrights and Trademarks': '',
-  // 'Criminal and Felony': '',
-  // 'Debt and Collections': '',
-  'Divorce and Separation': true,
-  // 'DUI and DWI': '',
-  // 'Elder Law': '',
-  // 'Employment and Workplace': '',
-  // 'Expungement': '',
-  'Family Issues': true,
-  // 'Foreclosure': '',
-  'Guardianship': true,
-  // 'Harassment and Discrimination': '',
-  // 'Identity Theft': '',
-  // 'Immigration and Visas': '',
-  // 'Insurance': '',
-  // 'Landlord and Tenant': '',
-  // 'Lemon Law': '',
-  // 'Long Term Disability': '',
-  // 'Medical Malpractice': '',
-  // 'Nursing Home Abuse': '',
-  // 'Patents and Intellectual Property': '',
-  // 'Personal Injury': '',
-  // 'Power of Attorney': '',
-  // 'Probate and Estates': '',
-  // 'Product Liability': '',
-  // 'Property Damage': '',
-  // 'Real Estate': '',
-  // 'Social Security Disability and Insurance': '',
-  // 'Tax and IRS': '',
-  // 'Traffic and Tickets': '',
-  // 'Unemployment': '',
-  // 'Vaccination Injury': '',
-  // 'Veteran\'s Disability': '',
-  // 'Victim of a Crime': '',
-  // 'Wills and Trusts': '',
-  // 'Workers Compensation': '',
-  // 'Wrongful Death': '',
-  // 'Wrongful Termination': '',
-  'Not Sure or Other': true,
-};
-
 // ------ Common Base Settings
 
 const checkbox = (updates) => {
@@ -454,18 +460,21 @@ const radio = (updates) => {
   }, updates)
 };
 
-const sbs2ItemRadio = (updates) => {
-  updates.legendClass = 'legend-left t-pb-1 required';
-  updates.fieldsetClass = '$reset side-by-side t-items-center';
-  updates.optionsClass = 't-mt-1 t-grid t-grid-cols-1 md:t-grid-cols-2-125 t-items-center';
-  updates.innerClass = 't-flex t-items-center';
-  updates.optionClass = 't-pr-1';
+const vertical2ItemRadio = (updates) => {
+  updates.legendClass = 'legend-left';
+  updates.fieldsetClass = '$reset vertical t-items-center';
+  updates.optionsClass = 't-flex t-justify-center t-my-4';
+  updates.optionClass = 'radiobtn t-mx-5';
+  updates.wrapperClass = '$reset formkit-wrapper t-mb-0';
+  updates.labelClass = 't-font-semibold t-text-[#1e448f]';
+  updates.decoratorIcon = false;
+  updates.messagesClass = 't-flex t-justify-center';
   return radio(updates)
 };
 
-const sbsYesNoRadio = (updates) => {
+const verticalYesNoRadio = (updates) => {
   updates.options = ['Yes', 'No'];
-  return sbs2ItemRadio(updates)
+  return vertical2ItemRadio(updates)
 };
 
 const select = (updates) => {
@@ -481,14 +490,14 @@ const select = (updates) => {
   }, updates)
 };
 
-const sbsSelect = (updates) => {
+const verticalSelect = (updates) => {
   updates.labelClass = 'required';
-  updates.wrapperClass = 'side-by-side t-items-center';
-  updates.innerClass = 'select-height-content';
-  updates.helpClass = 't-mt-2.5 md:t-text-right md:t-mt-[-5px]';
+  updates.wrapperClass = 't-flex t-justify-center';
+  updates.messagesClass = 't-flex t-justify-center';
   return select(updates)
 };
 
+
 const text = (updates) => {
   return merge({
     $formkit: 'text',
@@ -519,10 +528,9 @@ const textArea = (updates) => {
   }, updates)
 };
 
-
-const applicantAge = () => sbsSelect({
-  label: 'Age of Applicant?',
+const applicantAgeVertical = () => verticalSelect({
   name: 'Applicant_Age',
+  value: "50",
   options: [
     "18",
     "19",
@@ -592,19 +600,19 @@ const comments = (updates) => textArea(
   }, updates)
 );
 
-const disabilityConditionStopWork = () => sbsYesNoRadio({
+const disabilityConditionStopWorkVertical = () => verticalYesNoRadio({
   name: 'Disability_Condition_Stop_Work',
-  label: 'Do You Expect To Be Out Of Work For At Least a Year Due To Your Health?'
+  // label: 'Do You Expect To Be Out Of Work For At Least a Year Due To Your Health?'
 });
 
-const disabilityWorkHistory = () => sbsYesNoRadio({
+const disabilityWorkHistoryVertical = () => verticalYesNoRadio({
   name: 'Disability_Work_History',
-  label: 'Have You Had a Full-Time Job Within the Past 5 Years?'
+  // label: 'Have You Had a Full-Time Job Within the Past 5 Years?'
 });
 
-const doctorTreatment = () => sbsYesNoRadio({
+const doctorTreatmentVertical = () => verticalYesNoRadio({
   name: 'Doctor_Treatment',
-  label: 'Have You Recently Been Treated by a Doctor, Hospital or Clinic?'
+  // label: 'Have You Recently Been Treated by a Doctor, Hospital or Clinic?'
 });
 
 const email = () => sbsText({
@@ -631,9 +639,9 @@ const firstName = () => sbsText({
   }
 });
 
-const haveAttorney = () => sbsYesNoRadio({
+const haveAttorneyVertical = () => verticalYesNoRadio({
   name: 'Have_Attorney',
-  label: 'Already Working with An Attorney?'
+  // label: 'Already Working with An Attorney?'
 });
 
 const lastName = () => sbsText({
@@ -664,9 +672,9 @@ const phone = () => sbsText({
   helpClass: "t-mt-2.5 md:t-text-right md:t-mt-[-2px]"
 });
 
-const socialSecurityDisabilityReceivingBenefits = () => sbsYesNoRadio({
+const socialSecurityDisabilityReceivingBenefitsVertical = () => verticalYesNoRadio({
   name: 'Social_Security_Disability_Receiving_Benefits',
-  label: 'Are You Currently Receiving Social Security Disability Benefits?'
+  // label: 'Are You Currently Receiving Social Security Disability Benefits?'
 });
 
 const TCPAConsent = () => ({
@@ -684,9 +692,8 @@ const TCPAConsent = () => ({
   }
 });
 
-const zipcode = () => sbsText({
-  label: 'Zip Code:',
-  placeholder: '#####',
+const zipcodeCenter = () => text({
+  placeholder: 'Please Enter Your Zip Code',
   name: 'Zip',
   maxlength: 5,
   inputmode: "numeric",
@@ -695,10 +702,13 @@ const zipcode = () => sbsText({
   validationMessages: {
     required: 'Zip Code is required',
     matches: 'Invalid Zip Code'
-  }
+  },
+  wrapperClass: 't-flex t-justify-center',
+  messagesClass: 't-flex t-justify-center'
 });
 
 const NEXT_ON_ENTER = '$onEnter($setNextStep($fireStepEvent($get(form)), $preStepFunc($get(form))))';
+const NEXT_ON_INPUT = '$onInput($setNextStep($fireStepEvent($get(form)), $preStepFunc($get(form))))';
 
 const isInput = (n) => { return (n.type !== 'group' && n.type !== 'section' && n.type !== 'form' && n.$formkit !== 'hidden' && !n.children) };
 
@@ -733,22 +743,23 @@ const stepDefaults = (step) => ({
   }
 });
 
-function questionsStepHeadline(updates) {
+function verticalStepHeadline(updates) {
   return {
     $el: 'h3',
     children: updates.headline || 'Tell Us About Your Case',
     attrs: {
-      class: 't-flex t-justify-center t-text-center t-text-2xl t-font-bold t-text-blue-500 t-pb-5 t-pt-0 t-px-3'
+      class: 't-flex t-justify-center t-text-center t-text-2xl t-font-bold t-text-dark t-pb-5 t-pt-0 t-px-3'
     }
   }
 }
 
+
 function commentsStepHeadline(updates) {
   return {
     $el: 'h3',
     children: updates.headline || 'Additional Case Details',
     attrs: {
-      class: 't-flex t-justify-center t-text-center t-text-2xl t-font-bold t-text-blue-500 t-pb-5 t-pt-0 t-px-3'
+      class: 't-flex t-justify-center t-text-center t-text-2xl t-font-bold t-text-blue-500 t-pb-5 t-pt-0 t-px-3' + ' ' + (updates.headlineClass || '')
     }
   }
 }
@@ -758,7 +769,7 @@ function firstAndLastStepHeadline(updates) {
     $el: 'h3',
     children: updates.headline || 'Please Provide a Contact Name',
     attrs: {
-      class: 't-flex t-justify-center t-text-center t-text-2xl t-font-bold t-text-blue-500 t-pb-5 t-pt-0 t-px-3'
+      class: 't-flex t-justify-center t-text-center t-text-2xl t-font-bold t-text-blue-500 t-pb-5 t-pt-0 t-px-3' + ' ' + (updates.headlineClass || '')
     }
   }
 }
@@ -783,13 +794,44 @@ function contactStepSubHeadline(updates) {
   }
 }
 
-function step(name, inputs, nextOnEnter = true) {
+const TRUSTED_FORM_JS = `(function() {
+  if (window.xxTrustedFormLoaded) {
+    return
+  }
+  var vid = '';
+  if (typeof window.zar !== 'undefined') {
+    vid = window.zar.getVID();
+  }
+  window.xxTrustedFormLoaded = true;
+  var sandbox = document.location.hostname.indexOf('localhost') > -1 ? 'true' : 'false'
+  var tf = document.createElement('script');
+  tf.type = 'text/javascript'; tf.async = true;
+  tf.src = ("https:" == document.location.protocol ? 'https' : 'http') + "://api.trustedform.com/trustedform.js?field=xxTrustedFormCertUrl&identifier=" + vid + "&ping_field=xxTrustedFormPingUrl&provideReferrer=false&invert_field_sensitivity=true&sandbox=" + sandbox + "&l=" + new Date().getTime() + Math.random();
+  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tf, s);
+})();`;
+
+function trustedFormScript() {
+  return {
+    $el: 'script',
+    // if: '$activeStep === $lastStep() && $getKey($meta, "trustedFormTOLPs." + $get(Type_Of_Legal_Problem).value, false) == true',
+    // Added everywhere:
+    if: '$activeStep === $lastStep()',
+    children: TRUSTED_FORM_JS
+  }
+}
+
+function step(name, inputs, nextOnEnter = true, nextOnInput = false) {
   if (typeof nextOnEnter === 'undefined') {
     nextOnEnter = true;
   }
-  if (inputs && inputs.length && nextOnEnter) {
+  if (inputs && inputs.length && (nextOnEnter || nextOnInput)) {
     const lastInput = findLastInput(inputs[inputs.length - 1]);
-    lastInput.onKeypress = NEXT_ON_ENTER;
+    if (nextOnEnter === true) {
+      lastInput.onKeypress = NEXT_ON_ENTER;
+    }
+    if (nextOnInput === true) {
+      lastInput.onInput = NEXT_ON_INPUT;
+    }
   }
 
   return merge(
@@ -813,7 +855,7 @@ function commentsWithBankruptcyV2(updates = {}) {
     [
       commentsStepHeadline(updates),
       comments({
-        label: updates.label || DEFAULT_COMMENTS_LABEL,
+        label: updates.label === undefined ? DEFAULT_COMMENTS_LABEL : updates.label,
         placeholder: updates.placeholder || DEFAULT_COMMENTS_PLACEHOLDER_DYNAMIC
       }),
       bankruptcyCrossSell()
@@ -828,6 +870,8 @@ function contactInfoV2(updates = {}) {
     [
       contactStepHeadline(updates),
       contactStepSubHeadline(updates),
+      // Added TF everywhere
+      trustedFormScript(),
       email(),
       phone(),
       TCPAConsent(),
@@ -859,9 +903,10 @@ function ssdiTOLPAndZip(updates = {}) {
         id: "Type_Of_Legal_Problem",
         value: "Social Security Disability and Insurance"
       },
-      zipcode()
+      zipcodeCenter()
     ],
-    updates.nextOnEnter
+    updates.nextOnEnter,
+    updates.nextOnInput
   )
 }
 
@@ -869,10 +914,11 @@ function ssdiApplicantAge(updates = {}) {
   return step(
     'ssdiApplicantAge',
     [
-      questionsStepHeadline(updates),
-      applicantAge(),
+      verticalStepHeadline(updates),
+      applicantAgeVertical(),
     ],
-    updates.nextOnEnter
+    updates.nextOnEnter,
+    updates.nextOnInput
   )
 }
 
@@ -880,10 +926,11 @@ function ssdiDisabilityConditionStopWork(updates = {}) {
   return step(
     'ssdiDisabilityConditionStopWork',
     [
-      questionsStepHeadline(updates),
-      disabilityConditionStopWork(),
+      verticalStepHeadline(updates),
+      disabilityConditionStopWorkVertical(),
     ],
-    updates.nextOnEnter
+    updates.nextOnEnter,
+    updates.nextOnInput
   )
 }
 
@@ -891,10 +938,11 @@ function ssdiDisabilityWorkHistory(updates = {}) {
   return step(
     'ssdiDisabilityWorkHistory',
     [
-      questionsStepHeadline(updates),
-      disabilityWorkHistory(),
+      verticalStepHeadline(updates),
+      disabilityWorkHistoryVertical(),
     ],
-    updates.nextOnEnter
+    updates.nextOnEnter,
+    updates.nextOnInput
   )
 }
 
@@ -902,10 +950,11 @@ function ssdiSocialSecurityDisabilityReceivingBenefits(updates = {}) {
   return step(
     'ssdiSocialSecurityDisabilityReceivingBenefits',
     [
-      questionsStepHeadline(updates),
-      socialSecurityDisabilityReceivingBenefits(),
+      verticalStepHeadline(updates),
+      socialSecurityDisabilityReceivingBenefitsVertical(),
     ],
-    updates.nextOnEnter
+    updates.nextOnEnter,
+    updates.nextOnInput
   )
 }
 
@@ -913,10 +962,11 @@ function ssdiDoctorTreatment(updates = {}) {
   return step(
     'ssdiDoctorTreatment',
     [
-      questionsStepHeadline(updates),
-      doctorTreatment(),
+      verticalStepHeadline(updates),
+      doctorTreatmentVertical(),
     ],
-    updates.nextOnEnter
+    updates.nextOnEnter,
+    updates.nextOnInput
   )
 }
 
@@ -925,10 +975,11 @@ function ssdiHaveAttorney(updates = {}) {
   return step(
     'ssdiHaveAttorney',
     [
-      questionsStepHeadline(updates),
-      haveAttorney(),
+      verticalStepHeadline(updates),
+      haveAttorneyVertical(),
     ],
-    updates.nextOnEnter
+    updates.nextOnEnter,
+    updates.nextOnInput
   )
 }
 
@@ -941,7 +992,7 @@ const formNavigationV2 = () => ({
     {
       $formkit: 'button',
       name: 'back_button',
-      onClick: '$setPreviousStep($scrollAnchor($get(form)))',
+      onClick: '$setPreviousStep($prevStepFunc($get(form)))',
       children: 'Back',
       style: {
         if: '$activeStep === $firstStep()',
@@ -1031,13 +1082,15 @@ const schema = [
       },
     }),
     children: [
+      progressBar(),
       headline({
         children: '$urlParam("hl", "Start Your FREE Case Application Now")',
-        if: '$activeStep === $firstStep()'
+        if: '$activeStep === $firstStep()',
+        headlineClass: '!t-text-dark'
       }),
       subHeadline({
-        children: '$urlParam("shl", "Complete the Application to Find Out If We Can Assist You in Obtaining $3,148 Per Month in Disability Benefits")',
-        if: '$activeStep === $firstStep()'
+        children: '$urlParam("shl", "Find Out If We Can Assist You in Obtaining $3,148 Per Month in Disability Benefits")',
+        if: '$activeStep === $firstStep()',
       }),
       ...hiddenInputsLegal,
       {
@@ -1047,16 +1100,39 @@ const schema = [
         },
         children: [
           ssdiTOLPAndZip(),
-          ssdiApplicantAge(),
-          ssdiDisabilityConditionStopWork(),
-          ssdiDisabilityWorkHistory(),
-          ssdiSocialSecurityDisabilityReceivingBenefits(),
-          ssdiDoctorTreatment(),
-          ssdiHaveAttorney(),
+          ssdiApplicantAge({
+            nextOnInput: true,
+            headline: 'What is the Age of the Applicant?'
+          }),
+          ssdiDisabilityConditionStopWork({
+            nextOnInput: true,
+            headline: "Do You Expect To Be Out Of Work For At Least a Year Due To Your Health?"
+          }),
+          ssdiDisabilityWorkHistory({
+            nextOnInput: true,
+            headline: "Have You Had a Full-Time Job Within the Past 5 Years?"
+          }),
+          ssdiSocialSecurityDisabilityReceivingBenefits({
+            nextOnInput: true,
+            headline: "Are You Currently Receiving Social Security Disability Benefits?"
+          }),
+          ssdiDoctorTreatment({
+            nextOnInput: true,
+            headline: "Have You Recently Been Treated by a Doctor, Hospital or Clinic?"
+          }),
+          ssdiHaveAttorney({
+            nextOnInput: true,
+            headline: "Already Working with An Attorney?"
+          }),
           commentsWithBankruptcyV2({
-            nextOnEnter: false
+            nextOnEnter: false,
+            label: null,
+            headline: 'Please briefly describe your situation:',
+            headlineClass: '!t-text-dark'
+          }),
+          firstAndLastV2({
+            headlineClass: '!t-text-dark'
           }),
-          firstAndLastV2(),
           contactInfoV2({
             headline: 'Submit Your Free Application',
             subheadline: 'Based on your input you may qualify for SSDI benefits. Please verify your contact information.',