pr360-questionnaire 2.3.4 → 2.3.6

package/build/questionnaire-test.js

@@ -17001,8 +17001,9 @@ meter::-webkit-meter-optimum-value {
   text-decoration: none;
   display: inline-block;
   width: auto;
-  min-width: 200px;
-  padding: 12px 40px;
+  min-width: 180px;
+  min-height: auto;
+  padding: 12px 32px;
   margin: 20px 0;
   text-align: center;
 }
@@ -17369,9 +17370,10 @@ meter::-webkit-meter-optimum-value {
       super(...arguments);
       this.accountActive = true;
       this.visitedNodes = [];
-      this.verificationError = null;
+      this.formError = null;
       this.canSelfBook = false;
       this.hubspotId = "40834387";
+      this.showInsuranceNotes = false;
     }
     get topic() {
       return `questionnaires:${this.siteId}`;
@@ -17438,6 +17440,9 @@ meter::-webkit-meter-optimum-value {
       if (this.outcome) {
         this.trackQuestionnaireCompletion();
       }
+      if (this.providers && !this.insuranceProviderSelect) {
+        this.showInsuranceNotes = this.isOtherInsurance(this.providers[0]);
+      }
     }
     render() {
       return x`
@@ -17488,15 +17493,20 @@ meter::-webkit-meter-optimum-value {
         <h1>${this.siteSource ? `${this.siteSource} can help.` : "We think we can help."}</h1>
         <h2>${this.currentStep.text}</h2>
       </div>
+      ${this.formError ? x`<div class="error">${this.formError}</div>` : ""}
       <form @submit=${this.submitContactInfo}>
         <div class="form">
             <div class="u-margin--top">
               <label for="name">First Name</label>
-              <input type="text" id="first_name" name="first_name" required/>
+              <input type="text" id="first_name" name="first_name" required
+                minlength="2"
+                title="Please enter at least 2 characters"/>
             </div>
             <div class="u-margin--top">
               <label for="name">Last Name</label>
-              <input type="text" id="last_name" name="last_name" required/>
+              <input type="text" id="last_name" name="last_name" required
+                minlength="2"
+                title="Please enter at least 2 characters"/>
             </div>
             <div>
               <label for="email">Email</label>
@@ -17505,8 +17515,8 @@ meter::-webkit-meter-optimum-value {
             <div>
               <label for="phone">Phone</label>
               <input type="tel" id="phone" name="phone" required 
-                pattern="^[0-9]{6,11}$"
-                title="Please enter a valid phone number (6-11 digits)"/>
+                pattern="^[0-9]{9,10}$"
+                title="Please enter a valid phone number (9-10 digits)"/>
             </div>
             <div>
               <label for="zip_code">Zip Code</label>
@@ -17516,12 +17526,18 @@ meter::-webkit-meter-optimum-value {
             </div>
             <div>
               <label for="insurance_provider">Insurance Provider</label>
-              <select id="insurance_provider" name="insurance_provider">
+              <select id="insurance_provider" name="insurance_provider" @change=${this.handleInsuranceChange}>
                 ${this.providers.map((provider) => x`
                   <option value="${provider}">${provider}</option>
                 `)}
               </select>
             </div>
+            ${this.showInsuranceNotes ? x`
+            <div>
+              <label for="insurance_notes">Insurance Information</label>
+              <input type="text" id="insurance_notes" name="insurance_notes" />
+            </div>
+            ` : ""}
           </div>
           <div class="footer u-text-center">
             <button class="button button--primary u-push-top" type="submit">Get Assessment</button>
@@ -17553,7 +17569,7 @@ meter::-webkit-meter-optimum-value {
               <input type="text" id="verification_code" name="verification_code" required
                 pattern="^[a-zA-Z0-9]+$"
                 title="Please enter the verification code" />
-              ${this.verificationError ? x`<div class="error">${this.verificationError}</div>` : ""}
+              ${this.formError ? x`<div class="error">${this.formError}</div>` : ""}
             </div>
           </div>
           <div class="footer u-text-center">
@@ -17626,9 +17642,20 @@ meter::-webkit-meter-optimum-value {
         }
       }));
     }
+    isOtherInsurance(value) {
+      return value?.toLowerCase() === "other";
+    }
+    handleInsuranceChange(event) {
+      const select = event.target;
+      this.showInsuranceNotes = this.isOtherInsurance(select.value);
+      if (!this.showInsuranceNotes && this.insuranceNotesInput) {
+        this.insuranceNotesInput.value = "";
+      }
+    }
     submitContactInfo(event) {
       event.stopPropagation();
       event.preventDefault();
+      this.formError = null;
       if (this.contactInfoForm?.checkValidity()) {
         const email = this.emailInput?.value;
         const hsq = window["_hsq"] = window["_hsq"] || [];
@@ -17642,7 +17669,8 @@ meter::-webkit-meter-optimum-value {
           email,
           zip_code: this.zipCodeInput?.value,
           phone_number: this.phoneInput?.value,
-          insurance_provider: this.insuranceProviderSelect.value
+          insurance_provider: this.insuranceProviderSelect.value,
+          insurance_notes: this.insuranceNotesInput?.value
         };
         window["dataLayer"] = window["dataLayer"] || [];
         window["dataLayer"].push({
@@ -17659,7 +17687,7 @@ meter::-webkit-meter-optimum-value {
       event.preventDefault();
       const code = this.verificationCodeInput?.value;
       if (code) {
-        this.verificationError = null;
+        this.formError = null;
         const nodeId = this.currentStep?.id.replace("verification_", "");
         this.dispatchEvent(new CustomEvent("submitVerification", {
           detail: { verificationCode: code, nodeId }
@@ -17702,7 +17730,7 @@ meter::-webkit-meter-optimum-value {
   ], QuestionnaireElement.prototype, "outcome", 2);
   __decorateClass([
     t3()
-  ], QuestionnaireElement.prototype, "verificationError", 2);
+  ], QuestionnaireElement.prototype, "formError", 2);
   __decorateClass([
     t3()
   ], QuestionnaireElement.prototype, "canSelfBook", 2);
@@ -17746,6 +17774,12 @@ meter::-webkit-meter-optimum-value {
   __decorateClass([
     i4("#insurance_provider")
   ], QuestionnaireElement.prototype, "insuranceProviderSelect", 2);
+  __decorateClass([
+    i4("#insurance_notes")
+  ], QuestionnaireElement.prototype, "insuranceNotesInput", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "showInsuranceNotes", 2);
   __decorateClass([
     i4("#verification_code")
   ], QuestionnaireElement.prototype, "verificationCodeInput", 2);
@@ -17761,7 +17795,7 @@ meter::-webkit-meter-optimum-value {
   QuestionnaireElement = __decorateClass([
     e4("pr360-questionnaire"),
     liveStateDecorator_default({
-      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers", "outcome", "verificationError", "canSelfBook", "bookingUrl", "siteSource"],
+      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers", "outcome", "formError", "canSelfBook", "bookingUrl", "siteSource"],
       events: {
         send: ["answerQuestion", "submitContactInfo", "goBack", "setUtmParams", "submitVerification", "resendCode"]
       },
@@ -32224,7 +32258,7 @@ ${inspect(response)}
         text: "Please enter the verification code we sent to your phone.",
         phoneNumber: "555-123-4567"
       };
-      questionnaireElement.verificationError = "Invalid verification code";
+      questionnaireElement.formError = "Invalid verification code";
       questionnaireElement.links = {
         contact_info_image: "/images/contact.jpg"
       };

package/css/questionnaire.lit.scss

@@ -261,8 +261,9 @@ meter::-webkit-meter-optimum-value {
     text-decoration: none;
     display: inline-block;
     width: auto;
-    min-width: 200px;
-    padding: 12px 40px;
+    min-width: 180px;
+    min-height: auto;
+    padding: 12px 32px;
     margin: 20px 0;
     text-align: center;
 

package/dist/index.js

@@ -7196,8 +7196,9 @@ meter::-webkit-meter-optimum-value {
   text-decoration: none;
   display: inline-block;
   width: auto;
-  min-width: 200px;
-  padding: 12px 40px;
+  min-width: 180px;
+  min-height: auto;
+  padding: 12px 32px;
   margin: 20px 0;
   text-align: center;
 }
@@ -7558,9 +7559,10 @@ meter::-webkit-meter-optimum-value {
       super(...arguments);
       this.accountActive = true;
       this.visitedNodes = [];
-      this.verificationError = null;
+      this.formError = null;
       this.canSelfBook = false;
       this.hubspotId = "40834387";
+      this.showInsuranceNotes = false;
     }
     get topic() {
       return `questionnaires:${this.siteId}`;
@@ -7627,6 +7629,9 @@ meter::-webkit-meter-optimum-value {
       if (this.outcome) {
         this.trackQuestionnaireCompletion();
       }
+      if (this.providers && !this.insuranceProviderSelect) {
+        this.showInsuranceNotes = this.isOtherInsurance(this.providers[0]);
+      }
     }
     render() {
       return x`
@@ -7677,15 +7682,20 @@ meter::-webkit-meter-optimum-value {
         <h1>${this.siteSource ? `${this.siteSource} can help.` : "We think we can help."}</h1>
         <h2>${this.currentStep.text}</h2>
       </div>
+      ${this.formError ? x`<div class="error">${this.formError}</div>` : ""}
       <form @submit=${this.submitContactInfo}>
         <div class="form">
             <div class="u-margin--top">
               <label for="name">First Name</label>
-              <input type="text" id="first_name" name="first_name" required/>
+              <input type="text" id="first_name" name="first_name" required
+                minlength="2"
+                title="Please enter at least 2 characters"/>
             </div>
             <div class="u-margin--top">
               <label for="name">Last Name</label>
-              <input type="text" id="last_name" name="last_name" required/>
+              <input type="text" id="last_name" name="last_name" required
+                minlength="2"
+                title="Please enter at least 2 characters"/>
             </div>
             <div>
               <label for="email">Email</label>
@@ -7694,8 +7704,8 @@ meter::-webkit-meter-optimum-value {
             <div>
               <label for="phone">Phone</label>
               <input type="tel" id="phone" name="phone" required 
-                pattern="^[0-9]{6,11}$"
-                title="Please enter a valid phone number (6-11 digits)"/>
+                pattern="^[0-9]{9,10}$"
+                title="Please enter a valid phone number (9-10 digits)"/>
             </div>
             <div>
               <label for="zip_code">Zip Code</label>
@@ -7705,12 +7715,18 @@ meter::-webkit-meter-optimum-value {
             </div>
             <div>
               <label for="insurance_provider">Insurance Provider</label>
-              <select id="insurance_provider" name="insurance_provider">
+              <select id="insurance_provider" name="insurance_provider" @change=${this.handleInsuranceChange}>
                 ${this.providers.map((provider) => x`
                   <option value="${provider}">${provider}</option>
                 `)}
               </select>
             </div>
+            ${this.showInsuranceNotes ? x`
+            <div>
+              <label for="insurance_notes">Insurance Information</label>
+              <input type="text" id="insurance_notes" name="insurance_notes" />
+            </div>
+            ` : ""}
           </div>
           <div class="footer u-text-center">
             <button class="button button--primary u-push-top" type="submit">Get Assessment</button>
@@ -7742,7 +7758,7 @@ meter::-webkit-meter-optimum-value {
               <input type="text" id="verification_code" name="verification_code" required
                 pattern="^[a-zA-Z0-9]+$"
                 title="Please enter the verification code" />
-              ${this.verificationError ? x`<div class="error">${this.verificationError}</div>` : ""}
+              ${this.formError ? x`<div class="error">${this.formError}</div>` : ""}
             </div>
           </div>
           <div class="footer u-text-center">
@@ -7815,9 +7831,20 @@ meter::-webkit-meter-optimum-value {
         }
       }));
     }
+    isOtherInsurance(value) {
+      return value?.toLowerCase() === "other";
+    }
+    handleInsuranceChange(event) {
+      const select = event.target;
+      this.showInsuranceNotes = this.isOtherInsurance(select.value);
+      if (!this.showInsuranceNotes && this.insuranceNotesInput) {
+        this.insuranceNotesInput.value = "";
+      }
+    }
     submitContactInfo(event) {
       event.stopPropagation();
       event.preventDefault();
+      this.formError = null;
       if (this.contactInfoForm?.checkValidity()) {
         const email = this.emailInput?.value;
         const hsq = window["_hsq"] = window["_hsq"] || [];
@@ -7831,7 +7858,8 @@ meter::-webkit-meter-optimum-value {
           email,
           zip_code: this.zipCodeInput?.value,
           phone_number: this.phoneInput?.value,
-          insurance_provider: this.insuranceProviderSelect.value
+          insurance_provider: this.insuranceProviderSelect.value,
+          insurance_notes: this.insuranceNotesInput?.value
         };
         window["dataLayer"] = window["dataLayer"] || [];
         window["dataLayer"].push({
@@ -7848,7 +7876,7 @@ meter::-webkit-meter-optimum-value {
       event.preventDefault();
       const code = this.verificationCodeInput?.value;
       if (code) {
-        this.verificationError = null;
+        this.formError = null;
         const nodeId = this.currentStep?.id.replace("verification_", "");
         this.dispatchEvent(new CustomEvent("submitVerification", {
           detail: { verificationCode: code, nodeId }
@@ -7891,7 +7919,7 @@ meter::-webkit-meter-optimum-value {
   ], QuestionnaireElement.prototype, "outcome", 2);
   __decorateClass([
     t3()
-  ], QuestionnaireElement.prototype, "verificationError", 2);
+  ], QuestionnaireElement.prototype, "formError", 2);
   __decorateClass([
     t3()
   ], QuestionnaireElement.prototype, "canSelfBook", 2);
@@ -7935,6 +7963,12 @@ meter::-webkit-meter-optimum-value {
   __decorateClass([
     i4("#insurance_provider")
   ], QuestionnaireElement.prototype, "insuranceProviderSelect", 2);
+  __decorateClass([
+    i4("#insurance_notes")
+  ], QuestionnaireElement.prototype, "insuranceNotesInput", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "showInsuranceNotes", 2);
   __decorateClass([
     i4("#verification_code")
   ], QuestionnaireElement.prototype, "verificationCodeInput", 2);
@@ -7950,7 +7984,7 @@ meter::-webkit-meter-optimum-value {
   QuestionnaireElement = __decorateClass([
     e4("pr360-questionnaire"),
     liveStateDecorator_default({
-      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers", "outcome", "verificationError", "canSelfBook", "bookingUrl", "siteSource"],
+      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers", "outcome", "formError", "canSelfBook", "bookingUrl", "siteSource"],
       events: {
         send: ["answerQuestion", "submitContactInfo", "goBack", "setUtmParams", "submitVerification", "resendCode"]
       },

package/js/questionnaire.ts

@@ -44,7 +44,7 @@ export type Answer = {
 
 @customElement('pr360-questionnaire')
 @liveState({
-  properties: ['currentStep', 'visitedNodes', 'phoneNumber', 'links', 'accountActive', 'questionnaireDepth', 'providers', 'outcome', 'verificationError', 'canSelfBook', 'bookingUrl', 'siteSource'],
+  properties: ['currentStep', 'visitedNodes', 'phoneNumber', 'links', 'accountActive', 'questionnaireDepth', 'providers', 'outcome', 'formError', 'canSelfBook', 'bookingUrl', 'siteSource'],
   events: {
     send: ['answerQuestion', 'submitContactInfo', 'goBack', 'setUtmParams', 'submitVerification', 'resendCode']
   },
@@ -79,7 +79,7 @@ export class QuestionnaireElement extends LitElement {
   @state() outcome: string;
 
   @state()
-  verificationError: string | null = null;
+  formError: string | null = null;
 
   @state()
   canSelfBook: boolean = false;
@@ -124,6 +124,12 @@ export class QuestionnaireElement extends LitElement {
   @query('#insurance_provider')
   insuranceProviderSelect: HTMLSelectElement| undefined;
 
+  @query('#insurance_notes')
+  insuranceNotesInput: HTMLTextAreaElement | undefined;
+
+  @state()
+  showInsuranceNotes: boolean = false;
+
   @query('#verification_code')
   verificationCodeInput: HTMLInputElement | undefined;
 
@@ -214,6 +220,10 @@ export class QuestionnaireElement extends LitElement {
     if (this.outcome) {
       this.trackQuestionnaireCompletion();
     }
+
+    if (this.providers && !this.insuranceProviderSelect) {
+      this.showInsuranceNotes = this.isOtherInsurance(this.providers[0]);
+    }
   }
 
   render() {
@@ -266,15 +276,20 @@ export class QuestionnaireElement extends LitElement {
         <h1>${this.siteSource ? `${this.siteSource} can help.` : 'We think we can help.'}</h1>
         <h2>${(this.currentStep as ContactInfo).text}</h2>
       </div>
+      ${this.formError ? html`<div class="error">${this.formError}</div>` : ''}
       <form @submit=${this.submitContactInfo}>
         <div class="form">
             <div class="u-margin--top">
               <label for="name">First Name</label>
-              <input type="text" id="first_name" name="first_name" required/>
+              <input type="text" id="first_name" name="first_name" required
+                minlength="2"
+                title="Please enter at least 2 characters"/>
             </div>
             <div class="u-margin--top">
               <label for="name">Last Name</label>
-              <input type="text" id="last_name" name="last_name" required/>
+              <input type="text" id="last_name" name="last_name" required
+                minlength="2"
+                title="Please enter at least 2 characters"/>
             </div>
             <div>
               <label for="email">Email</label>
@@ -283,8 +298,8 @@ export class QuestionnaireElement extends LitElement {
             <div>
               <label for="phone">Phone</label>
               <input type="tel" id="phone" name="phone" required 
-                pattern="^[0-9]{6,11}$"
-                title="Please enter a valid phone number (6-11 digits)"/>
+                pattern="^[0-9]{9,10}$"
+                title="Please enter a valid phone number (9-10 digits)"/>
             </div>
             <div>
               <label for="zip_code">Zip Code</label>
@@ -294,12 +309,18 @@ export class QuestionnaireElement extends LitElement {
             </div>
             <div>
               <label for="insurance_provider">Insurance Provider</label>
-              <select id="insurance_provider" name="insurance_provider">
+              <select id="insurance_provider" name="insurance_provider" @change=${this.handleInsuranceChange}>
                 ${this.providers.map(provider => html`
                   <option value="${provider}">${provider}</option>
                 `)}
               </select>
             </div>
+            ${this.showInsuranceNotes ? html`
+            <div>
+              <label for="insurance_notes">Insurance Information</label>
+              <input type="text" id="insurance_notes" name="insurance_notes" />
+            </div>
+            ` : ''}
           </div>
           <div class="footer u-text-center">
             <button class="button button--primary u-push-top" type="submit">Get Assessment</button>
@@ -332,7 +353,7 @@ export class QuestionnaireElement extends LitElement {
               <input type="text" id="verification_code" name="verification_code" required
                 pattern="^[a-zA-Z0-9]+$"
                 title="Please enter the verification code" />
-              ${this.verificationError ? html`<div class="error">${this.verificationError}</div>` : ''}
+              ${this.formError ? html`<div class="error">${this.formError}</div>` : ''}
             </div>
           </div>
           <div class="footer u-text-center">
@@ -414,10 +435,24 @@ export class QuestionnaireElement extends LitElement {
     }));
   }
 
+  isOtherInsurance(value: string): boolean {
+    return value?.toLowerCase() === 'other';
+  }
+
+  handleInsuranceChange(event: Event) {
+    const select = event.target as HTMLSelectElement;
+    this.showInsuranceNotes = this.isOtherInsurance(select.value);
+    if (!this.showInsuranceNotes && this.insuranceNotesInput) {
+      this.insuranceNotesInput.value = '';
+    }
+  }
+
   submitContactInfo(event: Event) {
     event.stopPropagation();
     event.preventDefault();
     
+    this.formError = null;
+    
     if (this.contactInfoForm?.checkValidity()) {
       const email = this.emailInput?.value;
 
@@ -433,7 +468,8 @@ export class QuestionnaireElement extends LitElement {
         email: email,
         zip_code: this.zipCodeInput?.value,
         phone_number: this.phoneInput?.value,
-        insurance_provider: this.insuranceProviderSelect.value
+        insurance_provider: this.insuranceProviderSelect.value,
+        insurance_notes: this.insuranceNotesInput?.value
       };
   
       window['dataLayer'] = window['dataLayer'] || [];
@@ -454,7 +490,7 @@ export class QuestionnaireElement extends LitElement {
 
     const code = this.verificationCodeInput?.value;
     if (code) {
-      this.verificationError = null;
+      this.formError = null;
       // Extract node_id from verification id (format: "verification_nodeId")
       const nodeId = this.currentStep?.id.replace('verification_', '');
       this.dispatchEvent(new CustomEvent('submitVerification', {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pr360-questionnaire",
   "description": "An element to render a questionnaire for PatientReach 360.",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",

package/test/questionnaire-test.ts

@@ -120,7 +120,7 @@ describe('questionnaire test', async () => {
       text: "Please enter the verification code we sent to your phone.",
       phoneNumber: "555-123-4567"
     } as Verification;
-    questionnaireElement.verificationError = "Invalid verification code";
+    questionnaireElement.formError = "Invalid verification code";
     questionnaireElement.links = {
       contact_info_image: '/images/contact.jpg'
     };