bhl-forms 0.0.3 → 0.0.4

package/dist/forms/testForm.es.js

@@ -1,6 +1,50 @@
+function merge() {
+  return Object.assign({}, ...arguments)
+}
+
+const text = (updates) => {
+  return merge({
+    $formkit: 'text',
+    validation: 'required',
+    validationMessages: {
+      required: 'Field is required',
+    },
+  }, updates)
+};
+
+const sbsText = (updates) => {
+  updates.labelClass = 'center-label';
+  updates.wrapperClass = 'side-by-side';
+  return text(updates)
+};
+
+// ------ Inputs
+
+const category = () => ({
+  $formkit: 'select',
+  label: 'Category *',
+  name: 'category',
+  id: 'category',
+  validation: 'required',
+  options: [
+    'Fruits',
+    'Vegetables'
+  ]
+});
+
+const firstName = () => ({
+  $formkit: 'text',
+  label: 'First Name *',
+  name: 'First_Name',
+  validation: 'required',
+  validationMessages: {
+    required: 'First Name is required'
+  },
+});
+
 const email = () => ({
   $formkit: 'email',
-  name: 'email',
+  name: 'Email',
   label: 'Email Address *',
   placeholder: 'email@domain.com',
   validation: 'required|email',
@@ -10,34 +54,46 @@ const email = () => ({
   },
 });
 
+const lastName = () => ({
+  $formkit: 'text',
+  label: 'Last Name *',
+  name: 'Last_Name',
+  validation: 'required',
+  validationMessages: {
+    required: 'Last Name is required'
+  },
+});
+
 const phone = () => ({
   $formkit: 'tel',
-  name: 'tel',
+  name: 'Primary_Phone',
   label: 'Phone Number *',
   placeholder: 'xxx-xxx-xxxx',
-  // help: 'Phone number must be in the xxx-xxx-xxxx format.',
-  validation: 'required|matches:/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/',
+  help: '10-digit US phone number, hyphens optional.',
+  validation: 'required|matches:/^[0-9]{3}-?[0-9]{3}-?[0-9]{4}$/',
   validationMessages: {
     required: 'Phone Number is required',
     matches: 'Invalid Phone Number',
   },
 });
 
-const date = () => ({
-  $formkit: 'date',
-  label: 'Date *',
-  name: 'date_inc',
-  validation: 'required',
+const TCPAConsent = () => ({
+  $formkit: 'checkbox',
+  label: '$meta.tcpaLanguage',
+  name: 'TCPA_Opt_In',
+  validation: 'required|accepted',
   validationMessages: {
-    required: 'Date is required',
+    accepted: 'Consent is required',
   },
+  classes: {
+    label: "text-xs text-slate-500"
+  }
 });
 
-const zipcode = () => ({
-  $formkit: 'text',
+const zipcode = () => sbsText({
   label: 'Zip Code *',
   placeholder: '90210',
-  name: 'zip_code',
+  name: 'Zip',
   validation: 'required|matches:/^[0-9]{5}$/',
   validationMessages: {
     required: 'Zip Code is required',
@@ -45,61 +101,80 @@ const zipcode = () => ({
   },
 });
 
-const consent = () => ({
-  $formkit: 'checkbox',
-  label: 'By checking this box, I agree to the Terms of Use.',
-  name: 'consent',
-  validation: 'required|accepted',
-  validationMessages: {
-    accepted: 'You must agree!',
-  },
-  classes: {
-    label: "text-xs text-slate-500"
-  }
-});
-
-const dateAndZip = () => ({
+const stepDefaults = (step) => ({
   $el: 'section',
+  if: '$stepIsEnabled("' + step + '")',
   attrs: {
     style: {
-      if: '$activeStep !== "dateAndZip"',
+      if: '$activeStep !== "' + step + '"',
       then: 'display: none;'
     }
-  },
-  children: [
-    {
-      $formkit: 'group',
-      id: 'dateAndZip',
-      name: 'dateAndZip',
-      children: [
-        zipcode(),
-        date(),
-      ]
-    }
-  ]
+  }
 });
 
-const contactInfo = () => ({
-  $el: 'section',
-  attrs: {
-    style: {
-      if: '$activeStep !== "contactInfo"',
-      then: 'display: none;'
-    }
-  },
-  children: [
+// ...args get merged onto the group since the 'section' node basically
+// disappears in the formkit hierarchy
+function step(name, inputs, ...args) {
+  return merge(
+    stepDefaults(name),
     {
-      $formkit: 'group',
-      id: 'contactInfo',
-      name: 'contactInfo',
       children: [
-        email(),
-        phone(),
-        consent()
-      ]
+        merge({
+          $formkit: 'group',
+          id: name,
+          name: name,
+          children: inputs
+        }, ...args)
+      ],
     }
-  ]
-});
+  )
+}
+
+function categoryAndZip() {
+  return step(
+    'categoryAndZip',
+    [
+      zipcode(),
+      category(),
+    ],
+    ...arguments
+  )
+}
+
+function contactInfo() {
+  return step(
+    'contactInfo',
+    [
+      email(),
+      phone(),
+      TCPAConsent(),
+      {
+        $el: 'img',
+        if: '$activeStep === $lastStep()',
+        attrs: {
+          loading: 'lazy',
+          alt: '',
+          style: { border: 0 },
+          src: 'https://www.jotform.com/uploads/bunker_hill/form_files/SecurePrivacy.61e1c17c976f80.61736956.png',
+          width: '320',
+          height: '100'
+        }
+      },
+    ],
+    ...arguments
+  )
+}
+
+function firstAndLast() {
+  return step(
+    'firstAndLast',
+    [
+      firstName(),
+      lastName(),
+    ],
+    ...arguments
+  )
+}
 
 const formNavigation = () => ({
   $el: 'div',
@@ -113,7 +188,7 @@ const formNavigation = () => ({
       children: 'Previous Step',
       style: {
         if: '$activeStep === $firstStep()',
-        then: 'display: none;'
+        then: 'visibility: hidden;'
       }
     },
     {
@@ -128,6 +203,7 @@ const formNavigation = () => ({
     {
       $formkit: 'submit',
       label: 'Submit Application',
+      if: '$activeStep === $lastStep()',
       style: {
         if: '$activeStep !== $lastStep()',
         then: 'display: none;'
@@ -137,38 +213,69 @@ const formNavigation = () => ({
 });
 
 const formDetails = () => ({
-  $el: 'details',
+  $el: 'pre',
+  if: '$urlParam("fdbg", "") == 1',
   children: [
     {
-      $el: 'summary',
-      children: 'Form data'
+      $el: 'pre',
+      children: '$stringify( $get(form).value )',
+      attrs: {
+        class: 'text-xs',
+        style: 'overflow: scroll'
+      }
     },
     {
       $el: 'pre',
-      children: '$stringify( $get(form).value )'
+      children: ['activeStep: ', '$activeStep'],
+      attrs: {
+        class: 'text-xs',
+        style: 'overflow: scroll'
+      }
     },
     {
       $el: 'pre',
-      children: ['activeStep: ', '$activeStep']
+      children: ['stepHistory: ', '$stepHistory'],
+      attrs: {
+        class: 'text-xs',
+        style: 'overflow: scroll'
+      }
     },
     {
       $el: 'pre',
-      children: ['stepOrder: ', '$stepOrder']
+      children: ['stepQueue: ', '$stepQueue'],
+      attrs: {
+        class: 'text-xs',
+        style: 'overflow: scroll'
+      }
     }
   ]
 });
 
 const schema = [
+  {
+    type: 'meta',
+    data: {
+      tcpaLanguage: "By checking this box, I a) agree to the Terms of Use, and b) consent to be contacted by lawyers, lawyer networks, and partners of this website using live, autodialed, pre-recorded, or artificial voice calls, as well as text messages. Your consent is not required as a condition of purchasing any goods or services. To submit this request without this consent, call 855-506-0847."
+    }
+  },
   {
     $cmp: 'FormKit',
     props: {
       type: 'form',
       id: 'form',
-      onSubmit: '$submit("https://httpbin.org/post")',
-      // onSubmit: '$submit("https://httpbin.org/post", "https://www.google.com?x=${subid}")',
-      // onSubmit: '$mySubmit',
+      // onSubmit: '$submit("https://httpbin.org/post")',
+      // onSubmit: '$submit("https://httpbin.org/post", "https://www.google.com?x=${vertical}")',
+      onSubmit: '$submit("http://localhost:8080/api/v1/form_leads_ext", $prepData)',
       plugins: '$plugins',
       actions: false,
+      prepop: {
+        fromURL: true
+      },
+      errorCodes: {
+        403: "An Error Occurred",
+        409: { abort: false },
+        429: "An Error Occurred"
+      }
     },
     children: [
       {
@@ -187,8 +294,28 @@ const schema = [
       },
       {
         $formkit: 'hidden',
-        name: "subid",
-        value: "1234"
+        name: "vertical",
+        value: "Legal"
+      },
+      {
+        $formkit: 'hidden',
+        name: "TCPA_Language",
+        value: "$meta.tcpaLanguage"
+      },
+      {
+        $formkit: 'hidden',
+        name: "gclid",
+        value: null,
+      },
+      {
+        $formkit: 'hidden',
+        name: "campaignid",
+        value: null,
+      },
+      {
+        $formkit: 'hidden',
+        name: "s",
+        value: null,
       },
       {
         $el: 'div',
@@ -196,7 +323,8 @@ const schema = [
           class: 'form-body'
         },
         children: [
-          dateAndZip(),
+          categoryAndZip(),
+          firstAndLast(),
           contactInfo(),
           formNavigation(),
           formDetails(),