pr360-questionnaire 2.1.6 → 2.1.10

package/js/app.js

@@ -24,8 +24,9 @@ import topbar from "../vendor/topbar"
 import Prism from './prism';
 import 'mermaid-chart';
 import Sortable from "../vendor/Sortable.js"
-import { ShowHistory } from "../vendor/ShowHistory.js";
 import "./tooltip_position.js";
+import PhoenixCustomEvent from 'phoenix-custom-event-hook';
+import live_select from "live_select";
 
 const PrismHook = {
   mounted() { this.highlight() },
@@ -42,15 +43,304 @@ 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)
+        }
       }
     })
   }
 }
 
+const TableTooltipHook = {
+  mounted() {
+    this.tooltip = null;
+    this.tooltipTimeout = null;
+    
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    
+    this.el.addEventListener('mouseenter', this.handleMouseEnter);
+    this.el.addEventListener('mousemove', this.handleMouseMove);
+    this.el.addEventListener('mouseleave', this.handleMouseLeave);
+  },
+  
+  destroyed() {
+    this.el.removeEventListener('mouseenter', this.handleMouseEnter);
+    this.el.removeEventListener('mousemove', this.handleMouseMove);
+    this.el.removeEventListener('mouseleave', this.handleMouseLeave);
+    this.removeTooltip();
+  },
+  
+  handleMouseEnter(event) {
+    const content = this.el.textContent.trim();
+    const title = this.el.getAttribute('title');
+    const displayText = title || content;
+    
+    // Only show tooltip if content is actually truncated
+    if (this.el.scrollWidth > this.el.clientWidth || displayText !== content) {
+      this.showTooltip(event, displayText);
+    }
+  },
+  
+  handleMouseMove(event) {
+    if (this.tooltip) {
+      this.positionTooltip(event);
+    }
+  },
+  
+  handleMouseLeave() {
+    this.removeTooltip();
+  },
+  
+  showTooltip(event, text) {
+    this.removeTooltip();
+    
+    this.tooltip = document.createElement('div');
+    this.tooltip.className = 'table-tooltip';
+    this.tooltip.textContent = text;
+    this.tooltip.style.cssText = `
+      position: fixed;
+      background-color: #007bff;
+      color: #fff;
+      padding: 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      white-space: nowrap;
+      z-index: 1060;
+      pointer-events: none;
+      max-width: 300px;
+      word-wrap: break-word;
+      white-space: normal;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      text-align: left;
+      line-height: 1.4;
+    `;
+    
+    // Add arrow element
+    this.arrow = document.createElement('div');
+    this.arrow.style.cssText = `
+      position: absolute;
+      left: 20px;
+      bottom: -16px;
+      border-width: 8px;
+      border-style: solid;
+      border-color: #007bff transparent transparent transparent;
+    `;
+    
+    this.tooltip.appendChild(this.arrow);
+    document.body.appendChild(this.tooltip);
+    this.positionTooltip(event);
+  },
+  
+  positionTooltip(event) {
+    if (!this.tooltip) return;
+    
+    const rect = this.tooltip.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    
+    // Position tooltip above the cursor by default (like status history)
+    let left = event.clientX - 20; // Align arrow with cursor
+    let top = event.clientY - rect.height - 24; // Position above with margin for arrow
+    
+    // Adjust if tooltip would go off screen
+    if (left + rect.width > viewportWidth - 20) {
+      left = viewportWidth - rect.width - 20;
+    }
+    
+    if (left < 20) {
+      left = 20;
+    }
+    
+    // If tooltip would go off screen at the top, position it below
+    if (top < 20) {
+      top = event.clientY + 20;
+      // Update arrow to point upward
+      if (this.arrow) {
+        this.arrow.style.cssText = `
+          position: absolute;
+          left: 20px;
+          top: -16px;
+          border-width: 8px;
+          border-style: solid;
+          border-color: transparent transparent #007bff transparent;
+        `;
+      }
+    } else {
+      // Arrow points downward (default)
+      if (this.arrow) {
+        this.arrow.style.cssText = `
+          position: absolute;
+          left: 20px;
+          bottom: -16px;
+          border-width: 8px;
+          border-style: solid;
+          border-color: #007bff transparent transparent transparent;
+        `;
+      }
+    }
+    
+    this.tooltip.style.left = `${left}px`;
+    this.tooltip.style.top = `${top}px`;
+  },
+  
+  removeTooltip() {
+    if (this.tooltip) {
+      document.body.removeChild(this.tooltip);
+      this.tooltip = null;
+      this.arrow = null;
+    }
+  }
+}
+
+const ProspectsTableSyncHook = {
+  mounted() {
+    this.mainTable = document.getElementById('prospects-main');
+    this.stickyTable = document.getElementById('prospects-sticky');
+    
+    if (!this.mainTable || !this.stickyTable) return;
+    
+    this.handleMainTableHover = this.handleMainTableHover.bind(this);
+    this.handleStickyTableHover = this.handleStickyTableHover.bind(this);
+    this.syncRowHeights = this.syncRowHeights.bind(this);
+    this.handleInputOrResize = this.handleInputOrResize.bind(this);
+
+    // Add event listeners to main table rows
+    this.mainTable.querySelectorAll('tbody tr').forEach(row => {
+      row.addEventListener('mouseenter', this.handleMainTableHover);
+      row.addEventListener('mouseleave', this.handleMainTableHover);
+    });
+    // Add event listeners to sticky table rows
+    this.stickyTable.querySelectorAll('tbody tr').forEach(row => {
+      row.addEventListener('mouseenter', this.handleStickyTableHover);
+      row.addEventListener('mouseleave', this.handleStickyTableHover);
+    });
+
+    // Sync row heights initially and on resize
+    this.syncRowHeights();
+    window.addEventListener('resize', this.syncRowHeights);
+
+    // Listen for input/resize events in main table (for expanding textareas)
+    this.mainTable.querySelectorAll('input, textarea').forEach(el => {
+      el.addEventListener('input', this.handleInputOrResize);
+    });
+
+    // MutationObserver to watch for modal open/close
+    this.modalObserver = new MutationObserver(() => {
+      // Defer to next frame to allow DOM/layout to settle
+      requestAnimationFrame(this.syncRowHeights);
+    });
+    // Watch for changes to the modal-blur-overlay (added/removed)
+    this.modalObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  },
+
+  destroyed() {
+    if (this.mainTable) {
+      this.mainTable.querySelectorAll('tbody tr').forEach(row => {
+        row.removeEventListener('mouseenter', this.handleMainTableHover);
+        row.removeEventListener('mouseleave', this.handleMainTableHover);
+      });
+      this.mainTable.querySelectorAll('input, textarea').forEach(el => {
+        el.removeEventListener('input', this.handleInputOrResize);
+      });
+    }
+    if (this.stickyTable) {
+      this.stickyTable.querySelectorAll('tbody tr').forEach(row => {
+        row.removeEventListener('mouseenter', this.handleStickyTableHover);
+        row.removeEventListener('mouseleave', this.handleStickyTableHover);
+      });
+    }
+    window.removeEventListener('resize', this.syncRowHeights);
+    if (this.modalObserver) {
+      this.modalObserver.disconnect();
+    }
+  },
+
+  syncRowHeights() {
+    // Sync header row height
+    const mainHeader = this.mainTable.querySelector('thead tr');
+    const stickyHeader = this.stickyTable.querySelector('thead tr');
+    if (mainHeader && stickyHeader) {
+      const mainHeaderHeight = mainHeader.offsetHeight;
+      stickyHeader.style.height = mainHeaderHeight + 'px';
+      stickyHeader.style.minHeight = mainHeaderHeight + 'px';
+      stickyHeader.style.maxHeight = mainHeaderHeight + 'px';
+    }
+    // Sync body row heights
+    const mainRows = this.mainTable.querySelectorAll('tbody tr');
+    const stickyRows = this.stickyTable.querySelectorAll('tbody tr');
+    for (let i = 0; i < mainRows.length; i++) {
+      const mainHeight = mainRows[i].offsetHeight;
+      stickyRows[i].style.height = mainHeight + 'px';
+      stickyRows[i].style.minHeight = mainHeight + 'px';
+      stickyRows[i].style.maxHeight = mainHeight + 'px';
+    }
+  },
+
+  handleInputOrResize() {
+    // Defer to next frame to allow textarea/input to resize first
+    requestAnimationFrame(this.syncRowHeights);
+  },
+
+  handleMainTableHover(event) {
+    const prospectId = event.target.closest('tr').dataset.prospectId;
+    if (!prospectId) return;
+    const stickyRow = this.stickyTable.querySelector(`tr[data-prospect-id="${prospectId}"]`);
+    if (stickyRow) {
+      if (event.type === 'mouseenter') {
+        stickyRow.style.backgroundColor = '#f0f4ff';
+      } else {
+        stickyRow.style.backgroundColor = '';
+      }
+    }
+  },
+
+  handleStickyTableHover(event) {
+    const prospectId = event.target.closest('tr').dataset.prospectId;
+    if (!prospectId) return;
+    const mainRow = this.mainTable.querySelector(`tr[data-prospect-id="${prospectId}"]`);
+    if (mainRow) {
+      if (event.type === 'mouseenter') {
+        mainRow.style.backgroundColor = '#f0f4ff';
+      } else {
+        mainRow.style.backgroundColor = '';
+      }
+    }
+  }
+}
+
+const ScrollToSelectedProspectHook = {
+  mounted() {
+    this.scrollToSelected();
+  },
+  updated() {
+    this.scrollToSelected();
+  },
+  scrollToSelected() {
+    const selectedId = this.el.getAttribute('data-selected-prospect-id');
+    if (!selectedId) return;
+    const row = this.el.querySelector(`tr[data-prospect-id=\"${selectedId}\"]`);
+    if (row) {
+      row.scrollIntoView({ behavior: 'auto', block: 'center' });
+      row.classList.add('prospect-row-focused');
+      setTimeout(() => row.classList.remove('prospect-row-focused'), 700);
+    }
+  }
+};
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: {Prism: PrismHook, Sortable: SortableHook, ShowHistory: ShowHistory}})
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: {Prism: PrismHook, Sortable: SortableHook, PhoenixCustomEvent, TableTooltip: TableTooltipHook, ProspectsTableSync: ProspectsTableSyncHook, ScrollToSelectedProspect: ScrollToSelectedProspectHook, ...live_select}})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -66,4 +356,5 @@ liveSocket.connect()
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
 
-import './questionnaire.ts';
+import './questionnaire.ts';
+import './calendar.js';

package/js/calendar.ts

@@ -0,0 +1,84 @@
+import { html, LitElement } from "lit";
+import { property } from 'lit/decorators.js'
+import { Calendar } from "@fullcalendar/core";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
+import momentPlugin from "@fullcalendar/moment";
+
+export type CalendarEvent = {
+  id: string;
+  type: "Event";
+  date: string;
+  startTime: string;
+  endTime: string;
+}
+
+export type Date = {
+  type: "Date";
+  text: string;
+}
+
+export type Organization = {
+  id: string;
+  type: "Organization";
+  text: string;
+}
+
+export class CalendarElement extends LitElement {
+  @property()
+
+  @property({ attribute: "date" })
+  date: string;
+
+  @property({ attribute: "data-events" })
+  events: string;
+
+  @property({ attribute: "calendar" })
+  calendar: Calendar;
+
+   firstUpdated() {
+    super.firstUpdated(null);
+    let calendarEl: HTMLElement = document.getElementById('full-calendar')!;
+    this.calendar = new Calendar(calendarEl, {
+      schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
+      plugins: [resourceTimelinePlugin, momentPlugin, dayGridPlugin],
+      slotMinWidth: 70,
+      slotMinTime: "08:00",
+      slotMaxTime: "20:00",
+      stickyHeaderDates: true,
+      initialView: 'dayGridWeek',
+      headerToolbar: {
+        left: 'prev,next today',
+        center: "title",
+        right: 'dayGridMonth, dayGridWeek, dayGridDay'
+      },
+      titleFormat: "dddd, MMM D, YYYY",
+      events: JSON.parse(this.events),
+      eventClick: function (info) {
+        info.el.dispatchEvent(
+          new CustomEvent("show_event", {
+            bubbles: true,
+            detail: { id: info.event.id },
+          }),
+        );
+      },
+    });
+     this.calendar.render();
+  }
+
+  render() {
+    return html`<div id="full-calendar"></div>`;
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  updated() {
+    this.calendar.gotoDate(this.date);
+    this.calendar.getEventSources()[0].remove();
+    this.calendar.addEventSource({ events: JSON.parse(this.events) });
+  }
+}
+
+customElements.define("pr360-calendar", CalendarElement);

package/js/questionnaire.ts

@@ -150,7 +150,8 @@ export class QuestionnaireElement extends LitElement {
           <div class="questionnaire-illustration"><img src=${this.contactInfoImageUrl()}> </div>
           <div class="questionnaire--question"><h2 class="u-padding--bt">${(this.currentStep as Video).text}</h2></div>
           <vimeo-video controls src=${(this.currentStep as Video).url} class="questionnaire--video"></vimeo-video>
-          <div data-test-id="site-phone-number"><h4>To speak to a clinical specialist, call </h4><a href="tel:${this.phoneNumber}"><h1>${this.formatPhoneNumber(this.phoneNumber)}</h1></a>.</div>
+          <div data-test-id="questionnaire-info"><h4>Thank you for completing the assessment. We'll be calling you within 24 hours with more information.</h4></div>
+          <div data-test-id="site-phone-number"><h4>If you'd like to speak with us sooner, </br> please feel free to</h4><a href="tel:${this.phoneNumber}"><h1>Call Us</h1></a></div>
         </div>
       </div>
     </div>
@@ -178,9 +179,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 +191,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,57 +289,31 @@ 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 }]);
       hsq.push(['setPath', '/submit-contact-info']);
       hsq.push(['trackPageView']);
 
+      const formData = {
+        nodeId: this.currentStep?.id,
+        first_name: this.firstNameInput.value,
+        last_name: this.lastNameInput.value,
+        email: email,
+        zip_code: this.zipCodeInput?.value,
+        phone_number: this.phoneInput?.value,
+        insurance_provider: this.insuranceProviderSelect.value
+      };
+  
+      window['dataLayer'] = window['dataLayer'] || [];
+      window['dataLayer'].push({
+        'event': 'questionnaireSubmission',
+        'formData': formData
+      });
+
       this.dispatchEvent(new CustomEvent('submitContactInfo', {
-        detail: {
-          nodeId: this.currentStep?.id,
-          first_name: this.firstNameInput.value,
-          last_name: this.lastNameInput.value,
-          email: email,
-          zip_code: zipCode,
-          phone_number: phone,
-          insurance_provider: this.insuranceProviderSelect.value
-        }
+        detail: formData
       }));
     }
   }
-
-  formatPhoneNumber(phoneNumber: string) {
-    switch (phoneNumber.length) {
-      case 10:
-        return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6)}`
-      case 11:
-        return `${phoneNumber.slice(0, 1)}-${phoneNumber.slice(1, 4)}-${phoneNumber.slice(4, 7)}-${phoneNumber.slice(7)}`
-      default:
-        return phoneNumber
-    }
-  }
 }

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.10",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",
@@ -25,9 +25,16 @@
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
+    "live_select":  "file:../deps/live_select",
+    "phoenix-custom-event-hook": "^0.0.6",
     "phx-live-state": "^0.9.2",
     "vimeo-video-element": "^1.0.1",
-    "mermaid-chart": "launchscout/mermaid-chart"
+    "mermaid-chart": "launchscout/mermaid-chart",
+    "@fullcalendar/core": "^6.1.8",
+    "@fullcalendar/daygrid": "^6.1.8",
+    "@fullcalendar/moment": "^6.1.11",
+    "@fullcalendar/resource": "^6.1.8",
+    "@fullcalendar/resource-timeline": "^6.1.8"
   },
   "devDependencies": {
     "@open-wc/testing": "^3.2.0",

package/vendor/ShowHistory.js

@@ -1,15 +0,0 @@
-export const ShowHistory = {
-    mounted() {
-        const id = this.el.dataset.id
-        const target = this.el.dataset.target
-
-        this.el.addEventListener("mouseenter", () => {
-          this.pushEventTo(target, "show_history_tooltip", { id })
-        })
-    
-        this.el.addEventListener("mouseleave", () => {
-          this.pushEventTo(target, "hide_history_tooltip", { })
-        })
-    },
-  }
-