bhl-forms 0.11.12 → 0.11.14

package/dist/forms/generalHomeImprovement.es.js

@@ -9,13 +9,13 @@ function HomeImprovementRedirectUrl() {
 const DEFAULT_COMMENTS_LABEL = "Please briefly describe your issue in a few words:";
 const DEFAULT_COMMENTS_PLACEHOLDER_DYNAMIC =
   '$getKey($meta, "commentsPlaceholders." + $get(Category).value, $meta.defaultCommentsPlaceholder)';
-const DEFAULT_FINAL_HEADLINE_DYNAMIC_LEGAL =
-  '$getKey($meta, "finalHeadlines." + $get(Type_Of_Legal_Problem).value, $meta.defaultFinalHeadline)';
-const DEFAULT_FINAL_SUBHEADLINE_DYNAMIC_LEGAL =
-  '$getKey($meta, "finalSubHeadlines." + $get(Type_Of_Legal_Problem).value, $meta.defaultFinalSubHeadline)';
+const DEFAULT_FINAL_HEADLINE_DYNAMIC =
+  '$getKey($meta, "finalHeadlines." + ($get(Type_Of_Legal_Problem).value || $get(Category).value), $meta.defaultFinalHeadline)';
+const DEFAULT_FINAL_SUBHEADLINE_DYNAMIC =
+  '$getKey($meta, "finalSubHeadlines." + ($get(Type_Of_Legal_Problem).value || $get(Category).value), $meta.defaultFinalSubHeadline)';
 
 const DEFAULT_COMMENTS_PLACEHOLDER_DYNAMIC_HOME_IMPROVEMENT = DEFAULT_COMMENTS_PLACEHOLDER_DYNAMIC;
-const DEFAULT_FINAL_HEADLINE_HOME_IMPROVEMENT = "We Found Contractors!";
+const DEFAULT_FINAL_HEADLINE_HOME_IMPROVEMENT = "We Found Matching Contractors!";
 const DEFAULT_FINAL_SUBHEADLINE_HOME_IMPROVEMENT = "Compare quotes and save. Verify contact info:";
 // This version has a link to a providers page, starting without that
 // export const TCPA_LANGUAGE_HOME_IMPROVEMENT =
@@ -271,14 +271,11 @@ const address$1 = (scope, vertical, 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",
@@ -286,59 +283,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,
   })
 };
@@ -1645,6 +1655,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",
@@ -1668,19 +1696,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",
@@ -1710,7 +1725,7 @@ function firstAndLastStepHeadline(updates) {
 function contactStepHeadline(updates) {
   return {
     $el: "h3",
-    children: updates.headline || DEFAULT_FINAL_HEADLINE_DYNAMIC_LEGAL,
+    children: updates.headline || DEFAULT_FINAL_HEADLINE_DYNAMIC,
     attrs: {
       class:
         "t-flex t-justify-center t-text-center t-text-2xl t-font-bold t-text-blue-500 t-pb-3 t-pt-4 t-px-1" +
@@ -1724,7 +1739,7 @@ function contactStepHeadline(updates) {
 function contactStepSubHeadline(updates) {
   return {
     $el: "h5",
-    children: updates.subheadline || DEFAULT_FINAL_SUBHEADLINE_DYNAMIC_LEGAL,
+    children: updates.subheadline || DEFAULT_FINAL_SUBHEADLINE_DYNAMIC,
     attrs: {
       class:
         "t-flex t-justify-center t-text-center !t-text-lg t-font-semibold t-pb-6 t-pt-0 t-px-3" +
@@ -1845,29 +1860,48 @@ function commentsHeadline(updates = {}) {
         label: typeof updates.label === "undefined" ? DEFAULT_COMMENTS_LABEL : updates.label,
         placeholder: updates.placeholder || DEFAULT_COMMENTS_PLACEHOLDER_DYNAMIC,
         inputClass: typeof updates.inputClass === "undefined" ? "!t-h-32" : updates.inputClass,
+        innerClass: typeof updates.innerClass === "undefined" ? "t-max-w-xl" : updates.innerClass,
+        wrapperClass: typeof updates.wrapperClass === "undefined" ? undefined : updates.wrapperClass,
       }),
     ],
     mergedUpdates
   )
 }
 
-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",
     [
@@ -1875,12 +1909,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
   )
@@ -1895,7 +1930,7 @@ function zipcode(updates = {}) {
 function homeImprovementCrossSellsStepHeadline(updates) {
   return {
     $el: "h3",
-    children: updates.headline || "Interested in free quotes for other projects?",
+    children: updates.headline || "Do you need quotes for other projects?",
     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" +
@@ -2651,13 +2686,17 @@ function numberOfWindows(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: [
@@ -2667,12 +2706,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: {
@@ -2711,7 +2750,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",
       },
     },
   ],
@@ -2836,7 +2876,6 @@ function defaultMetaPropsHomeImprovement(category = null) {
 function defaultMetaPropsHomeImprovementGeneral(defaultSteps = nextStepsHomeImprovementDefault) {
   const meta = defaultMetaPropsHomeImprovement();
   meta.data.dynamicSchema = [
-    zipcode(),
     timeframe(),
     ownHome(),
     address(),
@@ -2899,9 +2938,12 @@ function defaultMetaPropsHomeImprovementGeneral(defaultSteps = nextStepsHomeImpr
       label: null,
       headline: "Please briefly describe your project:",
       headlineClass: "!t-text-dark",
+      wrapperClass: "t-flex t-justify-center",
+      innerClass: "t-w-full",
     }),
-    firstAndLastV3({
+    firstAndLastV4({
       headlineClass: "!t-text-dark",
+      headline: "Who is looking for quotes?",
     }),
   ];
   return meta
@@ -3542,7 +3584,7 @@ const HomeImprovementCommentsPlaceholders = {
 
 const HomeImprovementFinalHeadlines = {
   // 'Additions': '',
-  Appliances: "We Have Appliance Pros Standing By!",
+  // Appliances: "We Have Appliance Pros Standing By!",
   // 'Appraisals': '',
   // 'Cabinets': '',
   // 'Carpentry': '',
@@ -3559,7 +3601,7 @@ const HomeImprovementFinalHeadlines = {
   // 'Flooring': '',
   // 'Foundations': '',
   // 'Garage Doors': '',
-  // 'General Contractors': '',
+  // "General Contractors": "Connect With Top Contractors!",
   // 'Gutters': '',
   // 'Handyman': '',
   // 'Holiday Decorators': '',
@@ -3585,7 +3627,7 @@ const HomeImprovementFinalHeadlines = {
   // 'Pools': '',
   // 'Plumbing': '',
   // 'Pressure Washing': '',
-  // 'Remodeling': '',
+  // Remodeling: "Connect With Top Remodelers!",
   // 'Roofing': '',
   // 'Sheds': '',
   // 'Siding': '',
@@ -3598,60 +3640,60 @@ const HomeImprovementFinalHeadlines = {
 };
 
 const HomeImprovementFinalSubHeadlines = {
-  // 'Additions': '',
-  Appliances: "Who needs appliance help?",
-  // 'Appraisals': '',
-  // 'Cabinets': '',
-  // 'Carpentry': '',
-  // 'Carpets': '',
-  // 'Cleaning': '',
-  // 'Countertops': '',
-  // 'Decks and Porches': '',
-  // 'Demolition': '',
-  // 'Doors': '',
-  // 'Driveways': '',
-  // 'Drywall and Plaster': '',
-  // 'Electrical': '',
-  // 'Fencing': '',
-  // 'Flooring': '',
-  // 'Foundations': '',
-  // 'Garage Doors': '',
-  // 'General Contractors': '',
-  // 'Gutters': '',
-  // 'Handyman': '',
-  // 'Holiday Decorators': '',
-  // 'Smart Home': '',
-  // 'Home Builders': '',
-  // 'Home Inspection': '',
-  // 'Home Organization': '',
-  // 'Home Security': '',
-  // 'Home Staging': '',
-  // 'Home Theater': '',
-  // 'Home Warranties': '',
-  // 'Hot Tubs': '',
-  // 'Heating and Cooling': '',
-  // 'Insulation': '',
-  // 'Junk Removal': '',
-  // 'Landscaping': '',
-  // 'Locksmiths': '',
-  // 'Masonry and Concrete': '',
-  // 'Restoration': '',
-  // 'Moving': '',
-  // 'Painting': '',
-  // 'Pest Control': '',
-  // 'Pools': '',
-  // 'Plumbing': '',
-  // 'Pressure Washing': '',
-  // 'Remodeling': '',
-  // 'Roofing': '',
-  // 'Sheds': '',
-  // 'Siding': '',
-  // 'Solar': '',
-  // 'Tiling': '',
-  // 'Walk-in Tubs': '',
-  // 'Waterproofing': '',
-  // 'Window Cleaning': '',
-  // 'Windows': '',
+  Additions: "Get your dream addition started today!",
+  Appliances: "Expert appliance repair and installation.",
+  Appraisals: "Accurate home appraisals at your service.",
+  Cabinets: "Transform your kitchen with new cabinets.",
+  Carpentry: "Custom carpentry solutions for your home.",
+  Carpets: "Upgrade your home with new carpets.",
+  Cleaning: "Professional cleaning services for a spotless home.",
+  Countertops: "Install beautiful countertops in your kitchen.",
+  "Decks and Porches": "Build the perfect outdoor space.",
+  Demolition: "Safe and efficient demolition services.",
+  Doors: "Enhance your home with new doors.",
+  Driveways: "Repair or install a new driveway.",
+  "Drywall and Plaster": "Expert drywall and plaster services.",
+  Electrical: "Reliable electrical services for your home.",
+  Fencing: "Secure your property with new fencing.",
+  Flooring: "Install stunning new floors.",
+  Foundations: "Foundation repair and maintenance.",
+  "Garage Doors": "Upgrade your garage with new doors.",
+  "General Contractors": "Top contractors for your home projects.",
+  Gutters: "Clean and repair your gutters.",
+  Handyman: "Handyman services for all your needs.",
+  "Holiday Decorators": "Get your home ready for the holidays.",
+  "Smart Home": "Upgrade to a smart home today.",
+  "Home Builders": "Build your custom dream home.",
+  "Home Inspection": "Thorough home inspections for peace of mind.",
+  "Home Organization": "Organize your home with expert help.",
+  "Home Security": "Protect your home with a security system.",
+  "Home Staging": "Stage your home for a quick sale.",
+  "Home Theater": "Create the ultimate home theater.",
+  "Home Warranties": "Get a warranty for your home.",
+  "Hot Tubs": "Install a relaxing hot tub.",
+  "Heating and Cooling": "HVAC repair and installation.",
+  Insulation: "Improve your home's insulation.",
+  "Junk Removal": "Remove unwanted junk from your property.",
+  Landscaping: "Transform your yard with expert landscaping.",
+  Locksmiths: "Professional locksmith services.",
+  "Masonry and Concrete": "Expert masonry and concrete work.",
+  Restoration: "Restore your home after damage.",
+  Moving: "Reliable moving services.",
+  Painting: "Professional painting services.",
+  "Pest Control": "Effective pest control solutions.",
+  Pools: "Install or repair your pool.",
+  Plumbing: "Expert plumbing services.",
+  "Pressure Washing": "Pressure wash your home's exterior.",
+  Remodeling: "Remodel your home with top professionals.",
+  Roofing: "Repair or replace your roof.",
+  Sheds: "Build a new shed for extra storage.",
+  Siding: "Upgrade your home's siding.",
+  Solar: "Install solar panels and save on energy.",
+  Tiling: "Install beautiful new tiles.",
+  "Walk-in Tubs": "Install a convenient walk-in tub.",
+  Waterproofing: "Waterproof your home to prevent damage.",
+  "Window Cleaning": "Professional window cleaning services.",
+  Windows: "Replace your windows with energy-efficient options.",
 };
 
 const nextStepsHomeImprovementDefault = [
@@ -3829,6 +3871,7 @@ const schema = [
       subHeadline({
         children: '$urlParam("shl", "Fast. Reliable. Local. Free")',
         if: "$activeStep === $firstStep()",
+        subheadlineClass: "!t-font-bold !t-text-[#465f87]",
       }),
       ...hiddenInputsHomeImprovement,
       {
@@ -3844,13 +3887,27 @@ const schema = [
             input: {
               placeholder: "Select a Category",
               innerClass: "!t-max-w-[275px] md:!t-max-w-xl",
+              inputClass: "t-text-center",
             },
           }),
           dynamicSchemaNode("Category"),
-          contactInfo(),
-          formNavigation({
+          zipcode({
+            input: {
+              help: "We'll match you with local contractors.",
+            },
+          }),
+          contactInfoV2({
+            headline: '$:"We Found Pros in " + $get(Zip).value + "!"',
+            headlineClass: "!t-text-[#465f87]",
+            subheadlineClass: "!t-text-base !t-text-[#353739]",
+          }),
+          formNavigationNoFinalBack({
             startText: "Get Quotes",
+            submitLabel: "Get Quotes",
+            inputClass: "!t-text-black !t-font-extrabold !t-bg-[#ffce51]",
+            firstStepButtonClass: "!t-justify-center",
           }),
+          secureIconStandalone(),
           formDetails(),
         ],
       },