pr360-questionnaire 2.1.6 → 2.1.7

package/build/questionnaire-test.js

@@ -17382,9 +17382,7 @@ meter::-webkit-meter-optimum-value {
             </div>
             <div>
               <label for="email">Email</label>
-              <input type="email" id="email" name="email" required 
-                pattern="^[^@\s]+@[^@\s]+\\.[^@\s]+$"
-                title="Please enter a valid email address (e.g. user@example.com)"/>
+              <input type="email" id="email" name="email" required />
             </div>
             <div>
               <label for="phone">Phone</label>
@@ -17396,7 +17394,7 @@ meter::-webkit-meter-optimum-value {
               <label for="zip_code">Zip Code</label>
               <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)"/>
+                title="Please enter a valid zip code (5 or 6 digits)"/>
             </div>
             <div>
               <label for="insurance_provider">Insurance Provider</label>
@@ -17484,23 +17482,6 @@ 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"]);
@@ -17511,8 +17492,8 @@ meter::-webkit-meter-optimum-value {
             first_name: this.firstNameInput.value,
             last_name: this.lastNameInput.value,
             email,
-            zip_code: zipCode,
-            phone_number: phone,
+            zip_code: this.zipCodeInput?.value,
+            phone_number: this.phoneInput?.value,
             insurance_provider: this.insuranceProviderSelect.value
           }
         }));

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/dist/index.js

@@ -7571,9 +7571,7 @@ meter::-webkit-meter-optimum-value {
             </div>
             <div>
               <label for="email">Email</label>
-              <input type="email" id="email" name="email" required 
-                pattern="^[^@\s]+@[^@\s]+\\.[^@\s]+$"
-                title="Please enter a valid email address (e.g. user@example.com)"/>
+              <input type="email" id="email" name="email" required />
             </div>
             <div>
               <label for="phone">Phone</label>
@@ -7585,7 +7583,7 @@ meter::-webkit-meter-optimum-value {
               <label for="zip_code">Zip Code</label>
               <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)"/>
+                title="Please enter a valid zip code (5 or 6 digits)"/>
             </div>
             <div>
               <label for="insurance_provider">Insurance Provider</label>
@@ -7673,23 +7671,6 @@ 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"]);
@@ -7700,8 +7681,8 @@ meter::-webkit-meter-optimum-value {
             first_name: this.firstNameInput.value,
             last_name: this.lastNameInput.value,
             email,
-            zip_code: zipCode,
-            phone_number: phone,
+            zip_code: this.zipCodeInput?.value,
+            phone_number: this.phoneInput?.value,
             insurance_provider: this.insuranceProviderSelect.value
           }
         }));

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

@@ -178,9 +178,7 @@ export class QuestionnaireElement extends LitElement {
             </div>
             <div>
               <label for="email">Email</label>
-              <input type="email" id="email" name="email" required 
-                pattern="^[^@\s]+@[^@\s]+\\.[^@\s]+$"
-                title="Please enter a valid email address (e.g. user@example.com)"/>
+              <input type="email" id="email" name="email" required />
             </div>
             <div>
               <label for="phone">Phone</label>
@@ -192,7 +190,7 @@ export class QuestionnaireElement extends LitElement {
               <label for="zip_code">Zip Code</label>
               <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)"/>
+                title="Please enter a valid zip code (5 or 6 digits)"/>
             </div>
             <div>
               <label for="insurance_provider">Insurance Provider</label>
@@ -290,29 +288,6 @@ export class QuestionnaireElement extends LitElement {
     
     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 }]);
@@ -325,8 +300,8 @@ export class QuestionnaireElement extends LitElement {
           first_name: this.firstNameInput.value,
           last_name: this.lastNameInput.value,
           email: email,
-          zip_code: zipCode,
-          phone_number: phone,
+          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.6",
+  "version": "2.1.7",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",