bhl-forms 0.11.10 → 0.11.12

package/dist/forms/generalLegalJustAnswer.es.js

@@ -383,14 +383,11 @@ const verticalDate = (updates) => {
   return date(updates)
 };
 
-const email = (scope, vertical, updates = {}) => {
-  const func = vertical ? verticalText : sbsText;
-  const label = vertical ? updates.label : "Email Address:";
-  return func({
-    $formkit: "email",
+const emailFL = (scope, updates = {}) => {
+  return text({
+    $formkit: "FloatingLabelText",
     name: scope ? scope + ":" + "Email" : "Email",
-    label,
-    placeholder: "email@domain.com",
+    placeholder: "Email Address",
     autocomplete: "email",
     "data-tf-sensitive": "false",
     validation: "required|email",
@@ -398,59 +395,72 @@ const email = (scope, vertical, updates = {}) => {
       required: "Email is required",
       email: "Invalid Email",
     },
+    inputClass: "t-text-center",
+    wrapperClass: "t-flex t-justify-center",
     ...updates,
   })
 };
 
-const firstName = (scope, vertical, updates = {}) => {
-  const func = vertical ? verticalText : sbsText;
-  const label = vertical ? updates.label : "First Name:";
-  return func({
-    label,
+const firstNameFL = (scope, updates = {}) => {
+  return text({
+    $formkit: "FloatingLabelText",
     placeholder: "First Name",
     name: scope ? scope + ":" + "First_Name" : "First_Name",
     autocomplete: "given-name",
     validationMessages: {
       required: "First Name is required",
     },
+    inputClass: "t-text-center",
     ...updates,
   })
 };
 
-const lastName = (scope, vertical, updates = {}) => {
-  const func = vertical ? verticalText : sbsText;
-  const label = vertical ? updates.label : "Last Name:";
-  return func({
-    label,
+const lastNameFL = (scope, updates = {}) => {
+  return text({
+    $formkit: "FloatingLabelText",
     placeholder: "Last Name",
     name: scope ? scope + ":" + "Last_Name" : "Last_Name",
     autocomplete: "family-name",
     validationMessages: {
       required: "Last Name is required",
     },
+    inputClass: "t-text-center",
     ...updates,
   })
 };
 
-const phone = (scope, vertical, updates = {}) => {
-  const func = vertical ? verticalText : sbsText;
-  const label = vertical ? updates.label : "Phone Number:";
-  return func({
-    $formkit: "tel",
+const fullNameFLMobileCol = (scope, updates = {}) => {
+  return {
+    $el: "div",
+    attrs: {
+      class: "t-flex t-flex-col sm:t-flex-row t-flex-wrap t-gap-x-[2%] t-justify-center  sm:!t-max-w-[70%]",
+    },
+    children: [
+      firstNameFL(scope, { outerClass: "sm:!t-max-w-[49%]", ...updates }),
+      lastNameFL(scope, { outerClass: "sm:!t-max-w-[49%]", ...updates }),
+    ],
+  }
+};
+
+const phoneFL = (scope, updates = {}) => {
+  return text({
+    $formkit: "FloatingLabelText",
+    datatype: "tel",
     name: scope ? scope + ":" + "Primary_Phone" : "Primary_Phone",
-    label,
-    placeholder: updates.placeholder || "###-###-####",
-    maxlength: 12,
-    help: updates.help || "10-digit phone number, hyphens optional",
+    placeholder: updates.placeholder || "Phone Number",
+    maxlength: 14,
+    help: updates.help || null,
     autocomplete: "tel-national",
     "data-tf-sensitive": "false",
-    validation: "required|matches:/^[0-9]{3}-?[0-9]{3}-?[0-9]{4}$/|valid_phone",
+    validation: "required|matches:/^[0-9]{3}[0-9]{3}[0-9]{4}$/|valid_phone",
     validationMessages: {
       required: "Phone Number is required",
-      matches: "Invalid Phone Format, use ###-###-####",
+      matches: "Invalid Phone Format, use (XXX) YYY-ZZZZ",
       valid_phone: "Invalid Phone Number",
     },
     helpClass: "t-mt-2.5 md:t-text-right md:t-mt-[-2px]",
+    inputClass: "t-text-center",
+    wrapperClass: "t-flex t-justify-center",
     ...updates,
   })
 };
@@ -1287,10 +1297,12 @@ const employeeAtCompany$1 = (scope, vertical, updates = {}) => {
 const employmentAndWorkplaceTOLPDisplay$1 = (scope, vertical, updates = {}) => {
   const func = vertical ? col2RadioCenter : col2Radio;
   const label = vertical ? updates.label : "Select The Workplace Issue:";
+  const _if = vertical ? updates.if : '$get(Type_Of_Legal_Problem).value == "Employment and Workplace"';
   return func(
     merge(
       {
         label,
+        if: _if,
         name: scope ? scope + ":" + "Type_Of_Legal_Problem_Display" : "Type_Of_Legal_Problem_Display",
         options: [
           "Workplace Harassment",
@@ -2516,6 +2528,24 @@ function secureIcon(updates = {}) {
   return merge(secureIconDefault, updates)
 }
 
+function secureIconStandalone(updates = {}) {
+  return {
+    if: "$activeStep === $lastStep()",
+    style: {
+      if: "$activeStep !== $lastStep()",
+      then: "display: none;",
+    },
+    children: [
+      secureIcon({
+        attrs: {
+          class: "t-flex t-justify-center t-items-center t-text-sm t-text-gray-500 t-pb-6 sm:t-pb-8",
+        },
+        ...updates,
+      }),
+    ],
+  }
+}
+
 function crossSellQuestionsStepHeadline(updates) {
   return {
     $el: "h3",
@@ -2549,19 +2579,6 @@ function verticalStepHeadline(updates) {
   }
 }
 
-function verticalStepSubHeadline(updates) {
-  return {
-    $el: "h5",
-    children: updates.subheadline || "",
-    attrs: {
-      class:
-        "t-flex t-justify-center t-text-center !t-text-lg t-font-normal t-text-dark t-pb-5 t-pt-0 t-px-1" +
-        " " +
-        (updates.subheadlineClass || ""),
-    },
-  }
-}
-
 function commentsStepHeadline(updates) {
   return {
     $el: "h3",
@@ -2731,6 +2748,7 @@ function commentsWithBankruptcy(updates = {}) {
       comments(updates.scope, false, {
         label: typeof updates.label === "undefined" ? DEFAULT_COMMENTS_LABEL_LEGAL : updates.label,
         placeholder: updates.placeholder || DEFAULT_COMMENTS_PLACEHOLDER_DYNAMIC_LEGAL,
+        // TODO: this is a mess
         inputClass: typeof updates.inputClass === "undefined" ? "!t-h-32" : updates.inputClass,
       }),
       // TODO: needs scope support
@@ -2751,23 +2769,40 @@ function commentsWithBankruptcy(updates = {}) {
   )
 }
 
-function contactInfo(updates = {}) {
+function contactInfoV2(updates = {}) {
   return step(
     "contactInfo",
     [
       contactStepHeadline(updates),
       contactStepSubHeadline(updates),
       trustedFormScript(),
-      email(updates.scope),
-      phone(updates.scope),
-      TCPAConsent(updates.scope),
-      secureIcon(),
+      {
+        $el: "div",
+        attrs: {
+          class: "t-flex t-flex-col t-justify-center t-items-center",
+        },
+        children: [
+          emailFL(updates.scope, {
+            outerClass: "!t-max-w-[95%] !t-w-[96%] sm:!t-w-[70%]",
+            innerClass: "!t-w-[98%] !t-max-w-[98%] sm:!t-w-[100%] sm:!t-max-w-[100%]",
+          }),
+          phoneFL(updates.scope, {
+            outerClass: "!t-max-w-[95%] !t-w-[96%] sm:!t-w-[70%]",
+            innerClass: "!t-w-[98%] !t-max-w-[98%] sm:!t-w-[100%] sm:!t-max-w-[100%]",
+          }),
+        ],
+      },
+      TCPAConsent(updates.scope, {
+        outerClass: "!t-flex !t-flex-col !t-justify-center !t-items-center",
+        wrapperClass: "t-w-[95%] sm:t-w-[80%]",
+        messagesClass: "t-w-[95%] sm:t-w-[80%]",
+      }),
     ],
     { nextOnEnter: false }
   )
 }
 
-function firstAndLastV3(updates = {}) {
+function firstAndLastV4(updates = {}) {
   return step(
     "firstAndLast",
     [
@@ -2775,12 +2810,13 @@ function firstAndLastV3(updates = {}) {
         headline: updates.headline ?? "Who is looking for help?",
         headlineClass: updates.headlineClass,
       }),
-      verticalStepSubHeadline({
-        subheadline: updates.subheadline ?? "We never share info without consent",
-        subheadlineClass: "!t-text-sm !t-text-gray-500",
-      }),
-      firstName(updates.scope),
-      lastName(updates.scope),
+      {
+        $el: "div",
+        attrs: {
+          class: "t-flex t-flex-col t-justify-center t-items-center t-pt-3",
+        },
+        children: [fullNameFLMobileCol(updates.scope)],
+      },
     ],
     updates
   )
@@ -3164,7 +3200,7 @@ function businessServices(updates = {}) {
   return sqstep(
     "businessServices",
     businessServices$1(updates.scope, true, updates.input),
-    "What legal services do you need?",
+    "What area of law do you need?",
     updates
   )
 }
@@ -3670,13 +3706,17 @@ function criminalChargesFiled(updates = {}) {
   )
 }
 
-const formNavigation = (updates = {}) => ({
+const formNavigationNoFinalBack = (updates = {}) => ({
   $el: "div",
   attrs: {
     class: {
       if: "$activeStep === $firstStep()",
       then: "step-nav " + (updates.firstStepButtonClass || "!t-justify-center sm:!t-justify-between"),
-      else: "step-nav !t-justify-between",
+      else: {
+        if: "$activeStep === $lastStep()",
+        then: "step-nav !t-justify-center ",
+        else: "step-nav !t-justify-between",
+      },
     },
   },
   children: [
@@ -3686,12 +3726,12 @@ const formNavigation = (updates = {}) => ({
       onClick: "$setPreviousStep($prevStepFunc($get(form)))",
       children: "Back",
       outerClass: {
-        if: "$activeStep === $firstStep()",
+        if: "$fns.eq($activeStep, $firstStep()) || $fns.eq($activeStep, $lastStep())",
         then: "t-hidden sm:t-block",
         else: "",
       },
       style: {
-        if: "$activeStep === $firstStep()",
+        if: "$fns.eq($activeStep, $firstStep()) || $fns.eq($activeStep, $lastStep())",
         then: "display: none;",
       },
       classes: {
@@ -3730,7 +3770,8 @@ const formNavigation = (updates = {}) => ({
         then: "display: none;",
       },
       classes: {
-        input: (updates.inputClass || "") + " !t-ml-2 sm:!t-ml-auto f-navigation-input",
+        input: (updates.inputClass || "") + " f-navigation-input !t-w-60",
+        outer: "!t-mt-0 !t-mb-0",
       },
     },
   ],
@@ -4590,7 +4631,7 @@ const nextStepsMapGeneralLegal = {
         "estateLegalServicesNeeded",
         ...nextStepsLegalDefault,
       ],
-      "Property Damage": ["realEstateArea", "wouldLikeLawyerTo", ...nextStepsLegalDefault],
+      "Property Damage": ["wouldLikeLawyerTo", ...nextStepsLegalDefault],
       "Real Estate": ["realEstateTOLPDisplay", "realEstateArea", "wouldLikeLawyerTo", ...nextStepsLegalDefault],
       "Social Security Disability and Insurance": [
         "applicantAge",
@@ -4723,7 +4764,7 @@ const TOLPNextSteps = nextStepsMapGeneralLegal["values"]["Type_Of_Legal_Problem"
   },
 });
 
-({
+const nextStepsMapCivilTolp = {
   values: {
     Type_Of_Legal_Problem: {
       "Defend a Lawsuit": TOLPNextSteps["Defend a Lawsuit"],
@@ -4731,6 +4772,10 @@ const TOLPNextSteps = nextStepsMapGeneralLegal["values"]["Type_Of_Legal_Problem"
     },
     "*": ["lawsuitOtherParty", ...nextStepsLegalDefault],
   },
+};
+
+filterNextStepsMap(nextStepsMapCivilTolp, ["legalCrossSells"], {
+  commentsWithBankruptcy: "comments",
 });
 
 const nextStepsMapCivilTOLPDisplay = {
@@ -4802,6 +4847,27 @@ filterNextStepsMap(
   },
 });
 
+({
+  values: {
+    Type_Of_Legal_Problem: {
+      "Workplace Harassment": TOLPNextSteps["Workplace Harassment"],
+      "Workplace Discrimination": TOLPNextSteps["Workplace Discrimination"],
+    },
+    "*": [...nextStepsLegalDefault],
+  },
+});
+
+({
+  values: {
+    Type_Of_Legal_Problem: {
+      "Probate and Estates": TOLPNextSteps["Probate and Estates"],
+      "Wills and Trusts": TOLPNextSteps["Wills and Trusts"],
+      "Wrongful Death": TOLPNextSteps["Wrongful Death"],
+    },
+    "*": [...nextStepsLegalDefault],
+  },
+});
+
 ({
   values: {
     Type_Of_Legal_Problem_Display: {
@@ -4868,7 +4934,7 @@ meta.data.dynamicSchema = [
   applicantLTDisabilityPolicy(),
   applicantMonthlySalary(),
   applicantOccupation({
-    nextOnInput: false
+    nextOnInput: false,
   }),
   applicantPreviouslyAppliedLtdBenefits(),
   applicantReceivedDisabilityBenefits(),
@@ -4882,19 +4948,19 @@ meta.data.dynamicSchema = [
   childPrimaryCaregiver(),
   childRelationship(),
   civilLawsuitTOLPDisplay({
-    nextStepMap: nextStepsMapCivilTOLPDisplay
+    nextStepMap: nextStepsMapCivilTOLPDisplay,
   }),
   civilRightsType(),
   claimStatus(),
   consumerLawyerType(),
   countryOfCitizenship(),
   crimeCommittedDate({
-    nextOnInput: false
+    nextOnInput: false,
   }),
   criminalChargeType(),
   criminalChargesFiled(),
   criminalTOLPDisplay({
-    nextStepMap: nextStepsMapCriminalTOLPDisplay
+    nextStepMap: nextStepsMapCriminalTOLPDisplay,
   }),
   defaultNotice(),
   degreeOfInterest(),
@@ -4906,7 +4972,7 @@ meta.data.dynamicSchema = [
   employerType(),
   employeeAtCompany(),
   employmentAndWorkplaceTOLPDisplay({
-    nextStepMap: nextStepsMapEmploymentAndWorkplaceTOLPDisplay
+    nextStepMap: nextStepsMapEmploymentAndWorkplaceTOLPDisplay,
   }),
   haveAttorney(),
   haveChildren(),
@@ -4917,7 +4983,7 @@ meta.data.dynamicSchema = [
   immigrationStatus(),
   immigrationType(),
   incidentDate({
-    nextOnInput: false
+    nextOnInput: false,
   }),
   landlordTenantIssue(),
   landlordTenantParty(),
@@ -4936,7 +5002,7 @@ meta.data.dynamicSchema = [
   priorAlcoholOffenses(),
   realEstateArea(),
   realEstateTOLPDisplay({
-    nextStepMap: nextStepsMapRealEstateTOLPDisplay
+    nextStepMap: nextStepsMapRealEstateTOLPDisplay,
   }),
   relationshipToVictim(),
   roleInMatterCriminal(),
@@ -4957,14 +5023,13 @@ meta.data.dynamicSchema = [
   veteransDisabilityInjured(),
   veteransDisabilityRelationship(),
   wouldLikeLawyerTo(),
-  zipcode(),
   commentsWithBankruptcy({
     label: null,
-    headline: 'Please briefly describe your situation:',
-    headlineClass: '!t-text-dark',
+    headline: "Please briefly describe your situation:",
+    headlineClass: "!t-text-dark",
   }),
   legalCrossSells({
-    headlineClass: '!t-text-dark',
+    headlineClass: "!t-text-dark",
     nextStepMap: nextStepsMapLegalCrossSells,
   }),
   autoAndCarAccidentCrossSellQuestions(),
@@ -4976,8 +5041,8 @@ meta.data.dynamicSchema = [
   willsAndTrustsCrossSellQuestions(),
   divorceAndSeparationCrossSellQuestions(),
   childCustodyCrossSellQuestions(),
-  firstAndLastV3({
-    headlineClass: '!t-text-dark'
+  firstAndLastV4({
+    headlineClass: "!t-text-dark",
   }),
 ];
 
@@ -4985,44 +5050,54 @@ const schema = [
   meta,
   formAnchor(),
   {
-    $cmp: 'FormKit',
+    $cmp: "FormKit",
     props: formProps({
-      formId: 'generalLegalSingle',
+      formId: "generalLegalSingle",
       redirectMap: legalRedirectMap(),
       valueOverrideMap: legalAllValueOverrideMap,
-      crossSellOptionMap: legalCrossSellOptionMap
+      crossSellOptionMap: legalCrossSellOptionMap,
     }),
     children: [
       progressBar(),
       headline({
         children: '$urlParam("hl", "Need Legal Help? Start Here!")',
-        if: '$activeStep === $firstStep()'
+        if: "$activeStep === $firstStep()",
       }),
       defaultSubHeadline(),
       ...hiddenInputsLegal,
       {
-        $el: 'div',
+        $el: "div",
         attrs: {
-          class: 'form-body'
+          class: "form-body",
         },
         children: [
           generalTOLP({
             nextOnInput: false,
             nextStepMap: nextStepsMapGeneralLegal,
-            headlineClass: 't-text-lg',
+            headlineClass: "t-text-lg",
             input: {
-              placeholder: 'Select a Category',
-              innerClass: '!t-max-w-[275px] md:!t-max-w-xl'
-            }
+              placeholder: "Select a Category",
+              innerClass: "!t-max-w-[275px] md:!t-max-w-xl",
+              inputClass: "t-text-center",
+            },
           }),
           dynamicSchemaNode(),
-          contactInfo(),
-          formNavigation(),
-          formDetails()
-        ]
-      }
-    ]
-  }
+          zipcode(),
+          contactInfoV2({
+            subheadlineClass: "!t-text-base",
+          }),
+          formNavigationNoFinalBack({
+            startText: "Start Now",
+            submitLabel: "Get Help Now",
+            inputClass: "!t-font-extrabold",
+            firstStepButtonClass: "!t-justify-center",
+          }),
+          secureIconStandalone(),
+          formDetails(),
+        ],
+      },
+    ],
+  },
 ];
 
 const formKitNode = schema.find(item => item.$cmp === "FormKit");