pr360-questionnaire 2.1.5 → 2.1.7

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,27 @@ 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 />
             </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 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">
@@ -17492,8 +17492,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: this.zipCodeInput?.value,
+            phone_number: this.phoneInput?.value,
             insurance_provider: this.insuranceProviderSelect.value
           }
         }));
@@ -17531,7 +17531,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 +17545,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 +17575,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/app.scss

@@ -16,6 +16,7 @@
 @import './components/forms';
 @import './components/grid';
 @import './components/questionnaire';
+@import './components/site-rules';
 
 // Imported last to take precedence in the cascade
 @import './base/utilities';

package/css/base/_variables.scss

@@ -25,6 +25,7 @@ $gray: hsl(46, 3%, 58%);
 $gray-dark: hsl(46, 3%, 35%);
 $gray-darkest: hsl(46, 3%, 25%);
 $black: #1d1d1d;
+$danger: #f02e2e;
 
 
 // SPACING

package/css/components/_site-rules.scss

@@ -0,0 +1,189 @@
+  
+#move-rules-modal {
+  .mr-4 {
+    margin-right: 16px ;
+  }
+  .mt-5 {
+    margin-top: 20px;
+  }
+
+  .mb-2 {
+    margin-bottom: 8px;
+  }
+  .text-5 {
+    font-size: 20px
+  }
+  .text-6 {
+    font-size: 24px
+  }
+
+  .title-alignment {
+    display: flex;
+    align-items: center;
+  }
+
+  .rules-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h2 {
+      font-weight: bolder; 
+    }
+  }
+
+  .rules-list {
+    max-height: 400px;
+    overflow-y: scroll;
+    margin-bottom: 8px;
+    border: 1px solid #bebebe;
+    border-radius: 5px;
+    padding: 12px 10px;
+  }
+
+  .modal-title {
+    margin-top: 20px;
+    margin-bottom: 8px;
+    font-weight: bolder; 
+  }
+
+  .empty-list {
+    text-align: center;
+    margin-top: 24px;
+    font-weight: lighter;
+  }
+
+  .row-container:not(:last-child) {
+    margin-bottom: 12px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #d8d8d8;
+  }
+  
+  .row-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 18px;
+  }
+
+  .drag-icon {
+    font-size: 20px;
+    font-weight: bold;
+    margin-right: 12px;
+  }
+
+  .position-text {
+    margin-right: 4px;
+  }
+
+  .text-container {
+    display: flex;
+    align-items: center; 
+    gap: 6px
+ }
+
+  .quick-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    
+  }
+
+  .icon-btn {
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+
+  }
+
+  .site-pill {
+      font-size: 12px;
+      display: inline;
+      font-weight: bold;
+      border-radius: 10px;
+      background: gray;
+      padding: 4px 9px;
+      color: white;
+  }
+
+  .rule-form-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding-top: 10px;
+
+    textarea {
+      resize: both;
+      overflow: auto;
+      max-width: 786px;
+      max-height: 120px;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .rule-form-actions {
+    margin-top: 24px;
+  }
+
+  .zip-list-modal{
+    border: 1px solid #a3a3a3;
+    border-radius: 5px;
+    padding: 12px 10px;
+  }
+
+  .zip-list-box{
+    overflow-y: scroll;
+    border: 1px solid #e2dada;
+    border-radius: 5px;
+    padding: 6px 5px;
+  }
+
+  .close-btn{
+    margin-top: 5px;
+  }
+
+  .alert_error{
+    background-color: #ff2424;
+    padding: 10px 5px;
+    border: 1px solid #0c0909;
+    border-radius: 5px;
+    width: 786px;
+
+    h3 {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #150f0f;
+    }
+  }
+
+
+
+
+  .modal--container{
+    background: $white;
+    width: 850px;
+    position: absolute;
+        top: 20%;
+        left: 43%;
+        margin-left: -330px;
+    padding: $space-md;
+    -webkit-box-shadow: 3px 3px 15px 3px #ACACAC; 
+    box-shadow: 3px 3px 15px 3px #ACACAC;
+
+    @media screen and (max-width: $screen-tablet) {
+        left: 56%;
+    }
+}
+
+.rule-form-modal Select {
+  max-width: 150px;
+}
+}

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,27 @@ 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 />
             </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 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">
@@ -7681,8 +7681,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: this.zipCodeInput?.value,
+            phone_number: this.phoneInput?.value,
             insurance_provider: this.insuranceProviderSelect.value
           }
         }));
@@ -7720,7 +7720,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 +7734,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 +7764,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/app.js

@@ -42,8 +42,16 @@ const SortableHook = {
       ghostClass: "drag-ghost",
       forceFallback: true,
       onEnd: e => {
-        let params = {old: e.oldIndex, new: e.newIndex, ...e.item.dataset}
-        this.pushEventTo(this.el, "reposition", params)
+        // Custom logic for rules list
+        if (this.el.id === "rules-sortable-list") {
+          // Collect the new order of rule positions (or ids)
+          const newOrder = Array.from(this.el.querySelectorAll(".row-container")).map(div => div.dataset.id);
+          this.pushEventTo(this.el, "reorder_rules", {order: newOrder});
+        } else {
+          // Default behavior for other sortable lists
+          let params = {old: e.oldIndex, new: e.newIndex, ...e.item.dataset}
+          this.pushEventTo(this.el, "reposition", params)
+        }
       }
     })
   }
@@ -66,4 +74,4 @@ liveSocket.connect()
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
 
-import './questionnaire.ts';
+import './questionnaire.ts';

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,27 @@ 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 />
             </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 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 +285,10 @@ export class QuestionnaireElement extends LitElement {
   submitContactInfo(event: Event) {
     event.stopPropagation();
     event.preventDefault();
+    
     if (this.contactInfoForm?.checkValidity()) {
       const email = this.emailInput?.value;
+
       const hsq = window['_hsq'] = window['_hsq'] || [];
       hsq.push(['identify', { email: email }]);
       hsq.push(['setPath', '/submit-contact-info']);
@@ -302,8 +300,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: this.zipCodeInput?.value,
+          phone_number: this.phoneInput?.value,
           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.7",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",