bhl-forms 0.11.10 → 0.11.12

package/dist/forms/harassmentAndDiscrimination.es.js

@@ -352,14 +352,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",
@@ -367,64 +364,77 @@ 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,
   })
 };
 
-const zipcode = (scope, vertical, updates = {}) => {
+const zipcode$1 = (scope, vertical, updates = {}) => {
   const func = vertical ? verticalText : sbsText;
   const label = vertical ? updates.label : "Zip Code:";
   const help = vertical ? updates.help ?? "We try to match you with local help" : null;
@@ -612,7 +622,7 @@ const comments = (scope, vertical, updates) =>
     )
   );
 
-const degreeOfInterest = (scope, vertical, updates = {}) => {
+const degreeOfInterest$1 = (scope, vertical, updates = {}) => {
   const func = vertical ? col2RadioCenter : sbsSelect;
   const label = vertical ? updates.label : "How Likely Are You to Pay if Your Issue Could be Resolved?";
   const help = vertical ? updates.help : "No payment necessary to speak with lawyers.";
@@ -631,7 +641,7 @@ const degreeOfInterest = (scope, vertical, updates = {}) => {
 };
 
 const degreeOfInterestHelp = (scope, vertical, updates = {}) =>
-  degreeOfInterest(scope, vertical, merge(updates, { help: "No payment necessary to speak with lawyers." }));
+  degreeOfInterest$1(scope, vertical, merge(updates, { help: "No payment necessary to speak with lawyers." }));
 
 const disabilityConditionStopWork = (scope, vertical, updates = {}) => {
   const func = vertical ? verticalYesNoRadio : sbsYesNoRadio;
@@ -677,7 +687,7 @@ const doctorTreatment = (scope, vertical, updates = {}) => {
   )
 };
 
-const employerType = (scope, vertical, updates = {}) => {
+const employerType$1 = (scope, vertical, updates = {}) => {
   const func = vertical ? col2RadioCenter : sbsSelect;
   const label = vertical ? updates.label : "The Employer Is a:";
   return func(
@@ -700,7 +710,7 @@ const employerType = (scope, vertical, updates = {}) => {
   )
 };
 
-const employeeAtCompany = (scope, vertical, updates = {}) => {
+const employeeAtCompany$1 = (scope, vertical, updates = {}) => {
   const func = vertical ? verticalYesNoRadio : sbsYesNoRadio;
   const label = vertical ? updates.label : "Do You Still Work at the Company?";
   return func(
@@ -736,7 +746,7 @@ const estateLegalServicesNeeded = (scope, vertical, updates = {}) => {
   )
 };
 
-const harassmentAndDiscriminationTOLP = (scope, vertical, updates = {}) => {
+const harassmentAndDiscriminationTOLP$1 = (scope, vertical, updates = {}) => {
   const func = vertical ? col2RadioCenter : col2Radio;
   const label = vertical ? updates.label : "Type of Help Needed:";
   return func(
@@ -759,7 +769,7 @@ const harassmentAndDiscriminationTOLP = (scope, vertical, updates = {}) => {
   )
 };
 
-const haveAttorney = (scope, vertical, updates = {}) => {
+const haveAttorney$1 = (scope, vertical, updates = {}) => {
   const func = vertical ? verticalYesNoRadio : sbsYesNoRadio;
   const label = vertical ? updates.label : "Already Working with An Attorney?";
   return func(
@@ -859,7 +869,7 @@ const maritalStatus = (scope, vertical, updates = {}) => {
   )
 };
 
-const numEmployeesOfBusiness = (scope, vertical, updates = {}) => {
+const numEmployeesOfBusiness$1 = (scope, vertical, updates = {}) => {
   const func = vertical ? col2RadioCenter : sbsSelect;
   const label = vertical ? updates.label : "Total Employees of Business? (estimated)";
   return func(
@@ -1068,13 +1078,11 @@ const group = (name, updates) => {
   )
 };
 
-const defaultQuestions = () => [haveAttorney(), degreeOfInterestHelp()];
-
 const AutoAndCarAccidentsQuestions = (condition, scope) =>
   group("AutoAndCarAccidentsQuestions", {
     if: condition || '$get(Type_Of_Legal_Problem).value == "Auto and Car Accidents"',
     children: [
-      haveAttorney(scope),
+      haveAttorney$1(scope),
       incidentDate(scope),
       atFault(scope),
       primaryInjury(scope),
@@ -1087,11 +1095,11 @@ const ChildCustodyQuestions = (condition, scope) =>
   group("ChildCustodyQuestions", {
     if: condition || '$get(Type_Of_Legal_Problem).value == "Child Custody"',
     children: [
-      haveAttorney(scope),
+      haveAttorney$1(scope),
       childRelationship(scope),
       childHome(scope),
       childPrimaryCaregiver(scope),
-      degreeOfInterest(scope),
+      degreeOfInterest$1(scope),
       lawyerPaymentMethod(scope),
     ],
   });
@@ -1100,10 +1108,10 @@ const DivorceQuestions = (condition, scope) =>
   group("DivorceQuestions", {
     if: condition || '$get(Type_Of_Legal_Problem).value == "Divorce and Separation"',
     children: [
-      haveAttorney(scope),
+      haveAttorney$1(scope),
       maritalStatus(scope),
       haveChildren(scope),
-      degreeOfInterest(scope),
+      degreeOfInterest$1(scope),
       lawyerPaymentMethod(scope),
     ],
   });
@@ -1112,7 +1120,7 @@ const DUIAndDWIQuestions = (condition, scope) =>
   group("DUIAndDWIQuestions", {
     if: condition || '$get(Type_Of_Legal_Problem).value == "DUI and DWI"',
     children: [
-      haveAttorney(scope),
+      haveAttorney$1(scope),
       incidentDate(scope),
       priorAlcoholOffenses(scope),
       typeOfAlcoholTest(scope),
@@ -1122,53 +1130,11 @@ const DUIAndDWIQuestions = (condition, scope) =>
     ],
   });
 
-const SexualHarassmentQuestions = (condition, scope) =>
-  group("SexualHarassmentQuestions", {
-    if: condition || '$get(Type_Of_Legal_Problem).value == "Sexual Harassment"',
-    children: defaultQuestions(),
-  });
-
-const WorkplaceHarassmentQuestions = (condition, scope) =>
-  group("WorkplaceHarassmentQuestions", {
-    if: condition || '$get(Type_Of_Legal_Problem).value == "Workplace Harassment"',
-    children: [
-      haveAttorney(scope),
-      numEmployeesOfBusiness(scope),
-      employerType(scope),
-      employeeAtCompany(scope),
-      degreeOfInterestHelp(scope),
-    ],
-  });
-
-const NonWorkplaceHarassmentQuestions = (condition, scope) =>
-  group("NonWorkplaceHarassmentQuestions", {
-    if: condition || '$get(Type_Of_Legal_Problem).value == "Non-Workplace Harassment"',
-    children: defaultQuestions(),
-  });
-
-const WorkplaceDiscriminationQuestions = (condition, scope) =>
-  group("WorkplaceDiscriminationQuestions", {
-    if: condition || '$get(Type_Of_Legal_Problem).value == "Workplace Discrimination"',
-    children: [
-      haveAttorney(scope),
-      numEmployeesOfBusiness(scope),
-      employerType(scope),
-      employeeAtCompany(scope),
-      degreeOfInterestHelp(scope),
-    ],
-  });
-
-const NonWorkplaceDiscriminationQuestions = (condition, scope) =>
-  group("NonWorkplaceDiscriminationQuestions", {
-    if: condition || '$get(Type_Of_Legal_Problem).value == "Non-Workplace Discrimination"',
-    children: defaultQuestions(),
-  });
-
 const PersonalInjuryQuestions = (condition, scope) =>
   group("PersonalInjuryQuestions", {
     if: condition || '$get(Type_Of_Legal_Problem).value == "Personal Injury"',
     children: [
-      haveAttorney(scope),
+      haveAttorney$1(scope),
       incidentDate(scope),
       claimStatus(scope),
       atFault(scope),
@@ -1180,14 +1146,14 @@ const PersonalInjuryQuestions = (condition, scope) =>
 const PowerofAttorneyQuestions = (condition, scope) =>
   group("PowerofAttorneyQuestions", {
     if: condition || '$get(Type_Of_Legal_Problem).value == "Power of Attorney"',
-    children: [haveAttorney(scope), degreeOfInterestHelp(scope)],
+    children: [haveAttorney$1(scope), degreeOfInterestHelp(scope)],
   });
 
 const SocialSecurityDisabilityAndInsuranceQuestions = (condition, scope) =>
   group("SocialSecurityDisabilityAndInsuranceQuestions", {
     if: condition || '$get(Type_Of_Legal_Problem).value == "Social Security Disability and Insurance"',
     children: [
-      haveAttorney(scope),
+      haveAttorney$1(scope),
       applicantAge(scope),
       disabilityConditionStopWork(scope),
       disabilityWorkHistory(scope),
@@ -1200,7 +1166,7 @@ const WillsAndTrustsQuestions = (condition, scope) =>
   group("WillsAndTrustsQuestions", {
     if: condition || '$get(Type_Of_Legal_Problem).value == "Wills and Trusts"',
     children: [
-      haveAttorney(scope),
+      haveAttorney$1(scope),
       valueOfAssets(scope),
       typeOfAssets(scope),
       roleInMatterProbate(scope),
@@ -1213,7 +1179,7 @@ const WorkersCompensationQuestions = (condition, scope) =>
   group("WorkersCompensationQuestions", {
     if: condition || '$get(Type_Of_Legal_Problem).value == "Workers Compensation"',
     children: [
-      haveAttorney(scope),
+      haveAttorney$1(scope),
       incidentDate(scope),
       claimStatus(scope),
       primaryInjury(scope),
@@ -1222,12 +1188,6 @@ const WorkersCompensationQuestions = (condition, scope) =>
     ],
   });
 
-const NotSureOrOtherQuestions = (condition, scope) =>
-  group("NotSureOrOtherQuestions", {
-    if: condition || '$get(Type_Of_Legal_Problem).value == "Not Sure or Other"',
-    children: [haveAttorney(scope), degreeOfInterestHelp(scope)],
-  });
-
 const NEXT_ON_ENTER = "$onEnter($setNextStep($fireStepEvent($get(form)), $preStepFunc($get(form))))";
 const NEXT_ON_INPUT = "$onInput($setNextStep($fireStepEvent($get(form)), $preStepFunc($get(form))))";
 
@@ -1289,13 +1249,21 @@ function secureIcon(updates = {}) {
   return merge(secureIconDefault, updates)
 }
 
-function questionsStepHeadline(updates) {
+function secureIconStandalone(updates = {}) {
   return {
-    $el: "h3",
-    children: updates.headline || "Tell Us About Your Situation",
-    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-1",
+    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,
+      }),
+    ],
   }
 }
 
@@ -1319,6 +1287,19 @@ function crossSellQuestionsStepSubHeadline(updates) {
   }
 }
 
+function verticalStepHeadline(updates) {
+  return {
+    $el: "h3",
+    children: updates.headline || "Tell Us About Your Situation",
+    attrs: {
+      class:
+        "t-flex t-justify-center t-text-center t-text-lg sm:t-text-xl t-font-bold t-text-dark t-pb-5 t-pt-0 t-px-1" +
+        " " +
+        (updates.headlineClass || ""),
+    },
+  }
+}
+
 function commentsStepHeadline(updates) {
   return {
     $el: "h3",
@@ -1461,6 +1442,25 @@ function step(name, inputs, updates = {}) {
   })
 }
 
+// Single question step
+function sqstep(name, input, defaultHeadline, updates = {}) {
+  if (typeof updates.nextOnInput === "undefined") {
+    updates.nextOnInput = true;
+  }
+
+  return step(
+    name,
+    [
+      verticalStepHeadline({
+        headline: updates.headline ?? defaultHeadline,
+        headlineClass: updates.headlineClass,
+      }),
+      ...(Array.isArray(input) ? input : [input]),
+    ],
+    updates
+  )
+}
+
 function commentsWithBankruptcy(updates = {}) {
   return step(
     "commentsWithBankruptcy",
@@ -1469,6 +1469,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
@@ -1489,30 +1490,63 @@ 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 firstAndLastV2(updates = {}) {
+function firstAndLastV4(updates = {}) {
   return step(
     "firstAndLast",
-    [firstAndLastStepHeadline(updates), firstName(updates.scope), lastName(updates.scope)],
+    [
+      firstAndLastStepHeadline({
+        headline: updates.headline ?? "Who is looking for help?",
+        headlineClass: updates.headlineClass,
+      }),
+      {
+        $el: "div",
+        attrs: {
+          class: "t-flex t-flex-col t-justify-center t-items-center t-pt-3",
+        },
+        children: [fullNameFLMobileCol(updates.scope)],
+      },
+    ],
     updates
   )
 }
 
+function zipcode(updates = {}) {
+  return sqstep("zipcode", zipcode$1(updates.scope, true, updates.input), "Please verify your Zip Code", updates)
+}
+
 function autoAndCarAccidentCrossSellQuestions(updates = {}) {
   return step(
     "autoAndCarAccidentCrossSellQuestions",
@@ -1681,22 +1715,10 @@ function workersCompensationCrossSellQuestions(updates = {}) {
   )
 }
 
-function harassmentAndDiscriminationTOLPAndZip(updates = {}) {
-  return step("harassmentAndDiscriminationTOLPAndZip", [harassmentAndDiscriminationTOLP(), zipcode()], updates)
-}
-
-function harassmentAndDiscriminationTOLPQuestions(updates = {}) {
+function harassmentAndDiscriminationTOLP(updates = {}) {
   return step(
-    "TOLPQuestions",
-    [
-      questionsStepHeadline(updates),
-      SexualHarassmentQuestions(),
-      WorkplaceHarassmentQuestions(),
-      NonWorkplaceHarassmentQuestions(),
-      WorkplaceDiscriminationQuestions(),
-      NonWorkplaceDiscriminationQuestions(),
-      NotSureOrOtherQuestions(),
-    ],
+    "harassmentAndDiscriminationTOLP",
+    [harassmentAndDiscriminationTOLP$1(updates.scope, true, updates.input)],
     updates
   )
 }
@@ -1707,13 +1729,62 @@ function legalCrossSells(updates = {}) {
   return step("legalCrossSells", [legalCrossSellsStepHeadline(updates), legalCrossSells$1()], updates)
 }
 
-const formNavigation = (updates = {}) => ({
+function haveAttorney(updates = {}) {
+  return sqstep(
+    "haveAttorney",
+    haveAttorney$1(updates.scope, true, updates.input),
+    "Already working with an attorney?",
+    updates
+  )
+}
+
+function degreeOfInterest(updates = {}) {
+  return sqstep(
+    "degreeOfInterest",
+    degreeOfInterest$1(updates.scope, true, updates.input),
+    "Could you pay if your issue could be resolved?",
+    updates
+  )
+}
+
+function employerType(updates = {}) {
+  return sqstep(
+    "employerType",
+    employerType$1(updates.scope, true, updates.input),
+    "What type of employer is it?",
+    updates
+  )
+}
+
+function employeeAtCompany(updates = {}) {
+  return sqstep(
+    "employeeAtCompany",
+    employeeAtCompany$1(updates.scope, true, updates.input),
+    "Do you/they still work at the company?",
+    updates
+  )
+}
+
+function numEmployeesOfBusiness(updates = {}) {
+  return sqstep(
+    "numEmployeesOfBusiness",
+    numEmployeesOfBusiness$1(updates.scope, true, updates.input),
+    "How many employees does the business have?",
+    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: [
@@ -1723,12 +1794,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: {
@@ -1767,7 +1838,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",
       },
     },
   ],
@@ -1921,6 +1993,58 @@ function formAnchor(updates) {
   return merge(formAnchorDefaults, updates)
 }
 
+const progressBarDefaults = {
+  $el: "div",
+  attrs: {
+    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 progressBar(updates) {
+  return merge(progressBarDefaults, updates)
+}
+
 function headlineDefaults(updates = {}) {
   return {
     $el: "h1",
@@ -2347,7 +2471,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",
@@ -2431,12 +2555,6 @@ filterNextStepsMap(nextStepsMapGeneralLegal, ["legalCrossSells"], {
   commentsWithBankruptcy: "comments",
 });
 
-const nextStepsMapLegalLegacy = {
-  values: {
-    "*": ["TOLPQuestions", "commentsWithBankruptcy", "legalCrossSells", "firstAndLast", "contactInfo"],
-  },
-};
-
 const TOLPNextSteps = nextStepsMapGeneralLegal["values"]["Type_Of_Legal_Problem"];
 
 ({
@@ -2486,7 +2604,7 @@ const TOLPNextSteps = nextStepsMapGeneralLegal["values"]["Type_Of_Legal_Problem"
   },
 });
 
-({
+const nextStepsMapCivilTolp = {
   values: {
     Type_Of_Legal_Problem: {
       "Defend a Lawsuit": TOLPNextSteps["Defend a Lawsuit"],
@@ -2494,6 +2612,10 @@ const TOLPNextSteps = nextStepsMapGeneralLegal["values"]["Type_Of_Legal_Problem"
     },
     "*": ["lawsuitOtherParty", ...nextStepsLegalDefault],
   },
+};
+
+filterNextStepsMap(nextStepsMapCivilTolp, ["legalCrossSells"], {
+  commentsWithBankruptcy: "comments",
 });
 
 const nextStepsMapCivilTOLPDisplay = {
@@ -2565,6 +2687,27 @@ filterNextStepsMap(
   },
 });
 
+const nextStepsMapHarassmentAndDiscrimination = {
+  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: {
@@ -2625,10 +2768,18 @@ const legalCrossSellOptionMap = CROSS_SELL_OPTION_MAP_LEGAL;
 const meta = defaultMetaPropsLegal();
 
 meta.data.dynamicSchema = [
-  harassmentAndDiscriminationTOLPQuestions(),
-  commentsWithBankruptcy(),
+  numEmployeesOfBusiness(),
+  employerType(),
+  employeeAtCompany(),
+  haveAttorney(),
+  degreeOfInterest(),
+  commentsWithBankruptcy({
+    label: null,
+    headline: "Please briefly describe your situation:",
+    headlineClass: "!t-text-dark",
+  }),
   legalCrossSells({
-    headlineClass: '!t-text-dark',
+    headlineClass: "!t-text-dark",
     nextStepMap: nextStepsMapLegalCrossSells,
   }),
   autoAndCarAccidentCrossSellQuestions(),
@@ -2640,40 +2791,53 @@ meta.data.dynamicSchema = [
   willsAndTrustsCrossSellQuestions(),
   divorceAndSeparationCrossSellQuestions(),
   childCustodyCrossSellQuestions(),
-  firstAndLastV2(),
+  firstAndLastV4({
+    headlineClass: "!t-text-dark",
+  }),
 ];
 
 const schema = [
   meta,
   formAnchor(),
   {
-    $cmp: 'FormKit',
+    $cmp: "FormKit",
     props: formProps({
-      formId: 'harassmentAndDiscrimination',
+      formId: "harassmentAndDiscrimination",
       redirectMap: legalRedirectMap(),
-      crossSellOptionMap: legalCrossSellOptionMap
+      crossSellOptionMap: legalCrossSellOptionMap,
     }),
     children: [
+      progressBar(),
       defaultHeadline(),
       defaultSubHeadline(),
       ...hiddenInputsLegal,
       {
-        $el: 'div',
+        $el: "div",
         attrs: {
-          class: 'form-body'
+          class: "form-body",
         },
         children: [
-          harassmentAndDiscriminationTOLPAndZip({
-            nextStepMap: nextStepsMapLegalLegacy
+          harassmentAndDiscriminationTOLP({
+            nextOnInput: false,
+            nextStepMap: nextStepsMapHarassmentAndDiscrimination,
           }),
           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(),
+        ],
+      },
+    ],
+  },
 ];
 
 export { schema as default };