pr360-questionnaire 2.1.5 → 2.1.6

package/build/questionnaire-test.js

@@ -17311,14 +17311,6 @@ meter::-webkit-meter-optimum-value {
       this.visitedNodes = [];
       this.hubspotId = "40834387";
     }
-    get providers() {
-      return this.getAttribute("providers")?.split(",") || [];
-    }
-    set providers(value) {
-      if (value !== null && value !== void 0) {
-        this.setAttribute("providers", value.join(","));
-      }
-    }
     get topic() {
       return `questionnaires:${this.siteId}`;
     }
@@ -17390,19 +17382,29 @@ meter::-webkit-meter-optimum-value {
             </div>
             <div>
               <label for="email">Email</label>
-              <input type="email" id="email" name="email" required/>
+              <input type="email" id="email" name="email" required 
+                pattern="^[^@\s]+@[^@\s]+\\.[^@\s]+$"
+                title="Please enter a valid email address (e.g. user@example.com)"/>
             </div>
             <div>
               <label for="phone">Phone</label>
-              <input type="tel" id="phone" name="phone" required/>
+              <input type="tel" id="phone" name="phone" required 
+                pattern="^[0-9]{6,11}$"
+                title="Please enter a valid phone number (6-11 digits)"/>
             </div>
             <div>
               <label for="zip_code">Zip Code</label>
-              <input type="text" id="zip_code" name="zip_code" required/>
+              <input type="text" id="zip_code" name="zip_code" required 
+                pattern="^[0-9]{5,6}$"
+                title="Please enter a valid US zip code (5 or 6 digits)"/>
             </div>
             <div>
               <label for="insurance_provider">Insurance Provider</label>
-              <input type="text" id="insurance_provider" name="insurance_provider"/>
+              <select id="insurance_provider" name="insurance_provider">
+                ${this.providers.map((provider) => x`
+                  <option value="${provider}">${provider}</option>
+                `)}
+              </select>
             </div>
           </div>
           <div class="footer u-text-center">
@@ -17482,6 +17484,23 @@ meter::-webkit-meter-optimum-value {
       event.preventDefault();
       if (this.contactInfoForm?.checkValidity()) {
         const email = this.emailInput?.value;
+        const phone = this.phoneInput?.value;
+        const zipCode = this.zipCodeInput?.value;
+        const emailRegex = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+        if (!emailRegex.test(email)) {
+          alert("Please enter a valid email address");
+          return;
+        }
+        const phoneRegex = /^\d{6,}$/;
+        if (!phoneRegex.test(phone)) {
+          alert("Phone number must contain only numbers and be at least 6 digits long");
+          return;
+        }
+        const zipCodeRegex = /^\d{5,6}$/;
+        if (!zipCodeRegex.test(zipCode)) {
+          alert("Zip code must be 5 or 6 digits");
+          return;
+        }
         const hsq = window["_hsq"] = window["_hsq"] || [];
         hsq.push(["identify", { email }]);
         hsq.push(["setPath", "/submit-contact-info"]);
@@ -17492,8 +17511,8 @@ meter::-webkit-meter-optimum-value {
             first_name: this.firstNameInput.value,
             last_name: this.lastNameInput.value,
             email,
-            zip_code: this.zipCodeInput.value,
-            phone_number: this.phoneInput.value,
+            zip_code: zipCode,
+            phone_number: phone,
             insurance_provider: this.insuranceProviderSelect.value
           }
         }));
@@ -17531,7 +17550,7 @@ meter::-webkit-meter-optimum-value {
   ], QuestionnaireElement.prototype, "phoneNumber", 2);
   __decorateClass([
     t3()
-  ], QuestionnaireElement.prototype, "insuranceProvider", 2);
+  ], QuestionnaireElement.prototype, "providers", 2);
   __decorateClass([
     n5(),
     liveStateConfig("url")
@@ -17545,10 +17564,6 @@ meter::-webkit-meter-optimum-value {
   __decorateClass([
     n5({ type: Boolean })
   ], QuestionnaireElement.prototype, "open", 2);
-  __decorateClass([
-    n5({ type: Array }),
-    liveStateConfig("providers")
-  ], QuestionnaireElement.prototype, "providers", 1);
   __decorateClass([
     i4("#question-modal")
   ], QuestionnaireElement.prototype, "modal", 2);
@@ -17579,7 +17594,7 @@ meter::-webkit-meter-optimum-value {
   QuestionnaireElement = __decorateClass([
     e4("pr360-questionnaire"),
     liveStateDecorator_default({
-      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth"],
+      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers"],
       events: {
         send: ["answerQuestion", "submitContactInfo", "goBack"]
       },

package/css/components/_tables.scss

@@ -668,4 +668,7 @@ table.prospects-table {
         margin: 4px 0;
         border-color: rgba(255, 255, 255, 0.2);
     }
+}
+.field-div{
+    margin-top: 10px;
 }

package/dist/index.js

@@ -7500,14 +7500,6 @@ meter::-webkit-meter-optimum-value {
       this.visitedNodes = [];
       this.hubspotId = "40834387";
     }
-    get providers() {
-      return this.getAttribute("providers")?.split(",") || [];
-    }
-    set providers(value) {
-      if (value !== null && value !== void 0) {
-        this.setAttribute("providers", value.join(","));
-      }
-    }
     get topic() {
       return `questionnaires:${this.siteId}`;
     }
@@ -7579,19 +7571,29 @@ meter::-webkit-meter-optimum-value {
             </div>
             <div>
               <label for="email">Email</label>
-              <input type="email" id="email" name="email" required/>
+              <input type="email" id="email" name="email" required 
+                pattern="^[^@\s]+@[^@\s]+\\.[^@\s]+$"
+                title="Please enter a valid email address (e.g. user@example.com)"/>
             </div>
             <div>
               <label for="phone">Phone</label>
-              <input type="tel" id="phone" name="phone" required/>
+              <input type="tel" id="phone" name="phone" required 
+                pattern="^[0-9]{6,11}$"
+                title="Please enter a valid phone number (6-11 digits)"/>
             </div>
             <div>
               <label for="zip_code">Zip Code</label>
-              <input type="text" id="zip_code" name="zip_code" required/>
+              <input type="text" id="zip_code" name="zip_code" required 
+                pattern="^[0-9]{5,6}$"
+                title="Please enter a valid US zip code (5 or 6 digits)"/>
             </div>
             <div>
               <label for="insurance_provider">Insurance Provider</label>
-              <input type="text" id="insurance_provider" name="insurance_provider"/>
+              <select id="insurance_provider" name="insurance_provider">
+                ${this.providers.map((provider) => x`
+                  <option value="${provider}">${provider}</option>
+                `)}
+              </select>
             </div>
           </div>
           <div class="footer u-text-center">
@@ -7671,6 +7673,23 @@ meter::-webkit-meter-optimum-value {
       event.preventDefault();
       if (this.contactInfoForm?.checkValidity()) {
         const email = this.emailInput?.value;
+        const phone = this.phoneInput?.value;
+        const zipCode = this.zipCodeInput?.value;
+        const emailRegex = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+        if (!emailRegex.test(email)) {
+          alert("Please enter a valid email address");
+          return;
+        }
+        const phoneRegex = /^\d{6,}$/;
+        if (!phoneRegex.test(phone)) {
+          alert("Phone number must contain only numbers and be at least 6 digits long");
+          return;
+        }
+        const zipCodeRegex = /^\d{5,6}$/;
+        if (!zipCodeRegex.test(zipCode)) {
+          alert("Zip code must be 5 or 6 digits");
+          return;
+        }
         const hsq = window["_hsq"] = window["_hsq"] || [];
         hsq.push(["identify", { email }]);
         hsq.push(["setPath", "/submit-contact-info"]);
@@ -7681,8 +7700,8 @@ meter::-webkit-meter-optimum-value {
             first_name: this.firstNameInput.value,
             last_name: this.lastNameInput.value,
             email,
-            zip_code: this.zipCodeInput.value,
-            phone_number: this.phoneInput.value,
+            zip_code: zipCode,
+            phone_number: phone,
             insurance_provider: this.insuranceProviderSelect.value
           }
         }));
@@ -7720,7 +7739,7 @@ meter::-webkit-meter-optimum-value {
   ], QuestionnaireElement.prototype, "phoneNumber", 2);
   __decorateClass([
     t3()
-  ], QuestionnaireElement.prototype, "insuranceProvider", 2);
+  ], QuestionnaireElement.prototype, "providers", 2);
   __decorateClass([
     n5(),
     liveStateConfig("url")
@@ -7734,10 +7753,6 @@ meter::-webkit-meter-optimum-value {
   __decorateClass([
     n5({ type: Boolean })
   ], QuestionnaireElement.prototype, "open", 2);
-  __decorateClass([
-    n5({ type: Array }),
-    liveStateConfig("providers")
-  ], QuestionnaireElement.prototype, "providers", 1);
   __decorateClass([
     i4("#question-modal")
   ], QuestionnaireElement.prototype, "modal", 2);
@@ -7768,7 +7783,7 @@ meter::-webkit-meter-optimum-value {
   QuestionnaireElement = __decorateClass([
     e4("pr360-questionnaire"),
     liveStateDecorator_default({
-      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth"],
+      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers"],
       events: {
         send: ["answerQuestion", "submitContactInfo", "goBack"]
       },

package/js/questionnaire.ts

@@ -36,7 +36,7 @@ export type Answer = {
 
 @customElement('pr360-questionnaire')
 @liveState({
-  properties: ['currentStep', 'visitedNodes', 'phoneNumber', 'links', 'accountActive', 'questionnaireDepth'],
+  properties: ['currentStep', 'visitedNodes', 'phoneNumber', 'links', 'accountActive', 'questionnaireDepth', 'providers'],
   events: {
     send: ['answerQuestion', 'submitContactInfo', 'goBack']
   },
@@ -66,7 +66,7 @@ export class QuestionnaireElement extends LitElement {
   phoneNumber: string;
 
   @state()
-  insuranceProvider: string;
+  providers: string[];
 
   @property()
   @liveStateConfig('url')
@@ -81,18 +81,6 @@ export class QuestionnaireElement extends LitElement {
   @property({ type: Boolean })
   open: boolean;
 
-  @property({ type: Array })
-  @liveStateConfig('providers')
-  get providers(): string[] {
-    return this.getAttribute('providers')?.split(',') || [];
-  }
-
-  set providers(value: string[]) {
-    if (value !== null && value !== undefined) {
-      this.setAttribute('providers', value.join(','));
-    }
-  }
-
   @query('#question-modal')
   modal: HTMLDialogElement | undefined;
 
@@ -190,19 +178,29 @@ export class QuestionnaireElement extends LitElement {
             </div>
             <div>
               <label for="email">Email</label>
-              <input type="email" id="email" name="email" required/>
+              <input type="email" id="email" name="email" required 
+                pattern="^[^@\s]+@[^@\s]+\\.[^@\s]+$"
+                title="Please enter a valid email address (e.g. user@example.com)"/>
             </div>
             <div>
               <label for="phone">Phone</label>
-              <input type="tel" id="phone" name="phone" required/>
+              <input type="tel" id="phone" name="phone" required 
+                pattern="^[0-9]{6,11}$"
+                title="Please enter a valid phone number (6-11 digits)"/>
             </div>
             <div>
               <label for="zip_code">Zip Code</label>
-              <input type="text" id="zip_code" name="zip_code" required/>
+              <input type="text" id="zip_code" name="zip_code" required 
+                pattern="^[0-9]{5,6}$"
+                title="Please enter a valid US zip code (5 or 6 digits)"/>
             </div>
             <div>
               <label for="insurance_provider">Insurance Provider</label>
-              <input type="text" id="insurance_provider" name="insurance_provider"/>
+              <select id="insurance_provider" name="insurance_provider">
+                ${this.providers.map(provider => html`
+                  <option value="${provider}">${provider}</option>
+                `)}
+              </select>
             </div>
           </div>
           <div class="footer u-text-center">
@@ -289,8 +287,33 @@ export class QuestionnaireElement extends LitElement {
   submitContactInfo(event: Event) {
     event.stopPropagation();
     event.preventDefault();
+    
     if (this.contactInfoForm?.checkValidity()) {
       const email = this.emailInput?.value;
+      const phone = this.phoneInput?.value;
+      const zipCode = this.zipCodeInput?.value;
+
+      // Email validation
+      const emailRegex = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+      if (!emailRegex.test(email)) {
+        alert('Please enter a valid email address');
+        return;
+      }
+
+      // Phone validation
+      const phoneRegex = /^\d{6,}$/;
+      if (!phoneRegex.test(phone)) {
+        alert('Phone number must contain only numbers and be at least 6 digits long');
+        return;
+      }
+
+      // Zip code validation
+      const zipCodeRegex = /^\d{5,6}$/;
+      if (!zipCodeRegex.test(zipCode)) {
+        alert('Zip code must be 5 or 6 digits');
+        return;
+      }
+
       const hsq = window['_hsq'] = window['_hsq'] || [];
       hsq.push(['identify', { email: email }]);
       hsq.push(['setPath', '/submit-contact-info']);
@@ -302,8 +325,8 @@ export class QuestionnaireElement extends LitElement {
           first_name: this.firstNameInput.value,
           last_name: this.lastNameInput.value,
           email: email,
-          zip_code: this.zipCodeInput.value,
-          phone_number: this.phoneInput.value,
+          zip_code: zipCode,
+          phone_number: phone,
           insurance_provider: this.insuranceProviderSelect.value
         }
       }));

package/package.json

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