bhl-forms 0.11.11 → 0.11.12

package/dist/forms/childAndFamilySingle.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,59 +364,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,
   })
 };
@@ -1129,6 +1139,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",
@@ -1162,19 +1190,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",
@@ -1344,6 +1359,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
@@ -1364,23 +1380,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",
     [
@@ -1388,12 +1421,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
   )
@@ -1593,13 +1627,17 @@ function lawyerPaymentMethod(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: [
@@ -1609,12 +1647,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: {
@@ -1653,7 +1691,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",
       },
     },
   ],
@@ -2487,6 +2526,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: {
@@ -2547,7 +2607,6 @@ const legalCrossSellOptionMap = CROSS_SELL_OPTION_MAP_LEGAL;
 const meta = defaultMetaPropsLegal();
 
 meta.data.dynamicSchema = [
-  zipcode(),
   maritalStatus(),
   haveChildren(),
   childRelationship(),
@@ -2558,11 +2617,11 @@ meta.data.dynamicSchema = [
   lawyerPaymentMethod(),
   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,
   }),
   // Note: this is purposefully limited to a subset of values
@@ -2574,8 +2633,8 @@ meta.data.dynamicSchema = [
   ssdiCrossSellQuestions(),
   powerOfAttorneyCrossSellQuestions(),
   willsAndTrustsCrossSellQuestions(),
-  firstAndLastV3({
-    headlineClass: '!t-text-dark'
+  firstAndLastV4({
+    headlineClass: "!t-text-dark",
   }),
 ];
 
@@ -2583,40 +2642,49 @@ const schema = [
   meta,
   formAnchor(),
   {
-    $cmp: 'FormKit',
+    $cmp: "FormKit",
     props: formProps({
-      formId: 'childAndFamilySingle',
+      formId: "childAndFamilySingle",
       redirectMap: legalRedirectMap(),
-      crossSellOptionMap: legalCrossSellOptionMap
+      crossSellOptionMap: legalCrossSellOptionMap,
     }),
     children: [
       progressBar(),
       headline({
         children: '$urlParam("hl", "Get Child & Family Help Today")',
-        if: '$activeStep === $firstStep()',
+        if: "$activeStep === $firstStep()",
       }),
       subHeadline({
         children: '$urlParam("shl", "Select a Category to Start!")',
-        if: '$activeStep === $firstStep()',
+        if: "$activeStep === $firstStep()",
       }),
       ...hiddenInputsLegal,
       {
-        $el: 'div',
+        $el: "div",
         attrs: {
-          class: 'form-body'
+          class: "form-body",
         },
         children: [
           childAndFamilyTOLP({
-            nextStepMap: nextStepsMapChildAndFamily
+            nextStepMap: nextStepsMapChildAndFamily,
           }),
           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 };