pr360-questionnaire 2.1.11 → 2.3.0

package/js/calendar.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from "lit";
 import { property } from 'lit/decorators.js'
 import { Calendar } from "@fullcalendar/core";
 import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
 import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
 import momentPlugin from "@fullcalendar/moment";
 
@@ -41,16 +42,16 @@ export class CalendarElement extends LitElement {
     let calendarEl: HTMLElement = document.getElementById('full-calendar')!;
     this.calendar = new Calendar(calendarEl, {
       schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
-      plugins: [resourceTimelinePlugin, momentPlugin, dayGridPlugin],
+      plugins: [resourceTimelinePlugin, momentPlugin, dayGridPlugin, timeGridPlugin],
       slotMinWidth: 70,
       slotMinTime: "08:00",
       slotMaxTime: "20:00",
       stickyHeaderDates: true,
-      initialView: 'dayGridWeek',
+      initialView: 'timeGridWeek',
       headerToolbar: {
         left: 'prev,next today',
         center: "title",
-        right: 'dayGridMonth, dayGridWeek, dayGridDay'
+        right: 'dayGridMonth, timeGridWeek, timeGridDay'
       },
       titleFormat: "dddd, MMM D, YYYY",
       events: JSON.parse(this.events),

package/js/questionnaire.ts

@@ -29,6 +29,13 @@ export type ContactInfo = {
   text: string;
 }
 
+export type Verification = {
+  id: string;
+  type: "Verification";
+  text: string;
+  phoneNumber: string;
+}
+
 export type Answer = {
   id: string;
   text: string;
@@ -36,9 +43,9 @@ export type Answer = {
 
 @customElement('pr360-questionnaire')
 @liveState({
-  properties: ['currentStep', 'visitedNodes', 'phoneNumber', 'links', 'accountActive', 'questionnaireDepth', 'providers', 'outcome'],
+  properties: ['currentStep', 'visitedNodes', 'phoneNumber', 'links', 'accountActive', 'questionnaireDepth', 'providers', 'outcome', 'verificationError', 'canSelfBook', 'bookingUrl', 'siteSource'],
   events: {
-    send: ['answerQuestion', 'submitContactInfo', 'goBack', 'setUtmParams']
+    send: ['answerQuestion', 'submitContactInfo', 'goBack', 'setUtmParams', 'submitVerification', 'resendCode']
   },
   provide: {
     scope: window,
@@ -49,7 +56,7 @@ export class QuestionnaireElement extends LitElement {
   static styles = questionnaireStyles;
 
   @state()
-  currentStep: Question | ContactInfo | Video | undefined;
+  currentStep: Question | ContactInfo | Video | Verification | undefined;
 
   @state()
   accountActive: boolean = true;
@@ -70,6 +77,18 @@ export class QuestionnaireElement extends LitElement {
 
   @state() outcome: string;
 
+  @state()
+  verificationError: string | null = null;
+
+  @state()
+  canSelfBook: boolean = false;
+
+  @state()
+  bookingUrl: string;
+
+  @state()
+  siteSource: string;
+
   @property()
   @liveStateConfig('url')
   url: string | undefined;
@@ -104,6 +123,9 @@ export class QuestionnaireElement extends LitElement {
   @query('#insurance_provider')
   insuranceProviderSelect: HTMLSelectElement| undefined;
 
+  @query('#verification_code')
+  verificationCodeInput: HTMLInputElement | undefined;
+
   @query('form')
   contactInfoForm: HTMLFormElement | undefined;
 
@@ -205,6 +227,7 @@ export class QuestionnaireElement extends LitElement {
       case "Question": return this.renderQuestion();
       case "ContactInfo": return this.renderContactInfo();
       case "Video": return this.renderVideo();
+      case "Verification": return this.renderVerification();
     }
   }
 
@@ -217,8 +240,16 @@ 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="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>
+          ${this.canSelfBook ? 
+            html`
+              <div data-test-id="questionnaire-info"><h4>Thank you for completing the assessment. Based on your results ${this.siteSource || 'we'} would like to help you set up an initial call with a professional.</h4></div>
+              <button class="button--link" type="button" href=${this.bookingUrl} target="_blank">Book Appointment</button>
+              <div data-test-id="site-phone-number"><h4>Or if you'd like to speak with ${this.siteSource || 'us'}, </br> please feel free to</h4><a href="tel:${this.phoneNumber}"><h1>Call ${this.siteSource || 'Us'}</h1></a></div>
+          ` :
+          html`
+            <div data-test-id="questionnaire-info"><h4>Thank you for completing the assessment. ${this.siteSource || 'We'} will 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 ${this.siteSource || 'us'} sooner, </br> please feel free to</h4><a href="tel:${this.phoneNumber}"><h1>Call ${this.siteSource || 'Us'}</h1></a></div>
+          `}
         </div>
       </div>
     </div>
@@ -231,7 +262,7 @@ export class QuestionnaireElement extends LitElement {
       <div class="questionnaire-illustration"><img src=${this.contactInfoImageUrl()}> </div>
       <div class="form__container">
       <div class="header">
-        <h1>We think we can help.</h1>
+        <h1>${this.siteSource ? `${this.siteSource} can help.` : 'We think we can help.'}</h1>
         <h2>${(this.currentStep as ContactInfo).text}</h2>
       </div>
       <form @submit=${this.submitContactInfo}>
@@ -271,7 +302,7 @@ export class QuestionnaireElement extends LitElement {
           </div>
           <div class="footer u-text-center">
             <button class="button button--primary u-push-top" type="submit">Get Assessment</button>
-            <p>By clicking Submit, you acknowledge that you have read and agree to the <a href=${this.links['terms_conditions']} target="_blank">Terms of Use</a>
+            <p>By clicking Get Assessment, you consent to receive text messages (SMS) and phone calls, and you acknowledge that you have read and agree to the <a href=${this.links['terms_conditions']} target="_blank">Terms of Use</a> 
               and the <a href=${this.links['privacy_policy']} target="_blank">Privacy Policy</a></p>
           </div>
         </div>
@@ -282,6 +313,38 @@ export class QuestionnaireElement extends LitElement {
     `;
   }
 
+  renderVerification() {
+    const verification = this.currentStep as Verification;
+    return html`
+    <div class="questionnaire fade-in fade-out">
+      <div class="questionnaire-illustration"><img src=${this.contactInfoImageUrl()}> </div>
+      <div class="form__container">
+        <div class="header">
+          <h1>Verify Your Phone Number</h1>
+          <h2>${verification.text}</h2>
+          <p class="verification-phone-number">We've sent a verification code to ${verification.phoneNumber}</p>
+        </div>
+        <form @submit=${this.submitVerification}>
+          <div class="form verification-form">
+            <div class="verification-input-container">
+              <label for="verification_code">Verification Code</label>
+              <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>` : ''}
+            </div>
+          </div>
+          <div class="footer u-text-center">
+            <button class="button button--primary u-push-top" type="submit">Submit</button>
+            <button class="button--link" type="button" @click=${this.goBackToContactInfo}>Go Back</button>
+            <button class="button--link verification-resend-button" type="button" @click=${this.resendCode}>Resend Code</button>
+          </div>
+        </form>
+      </div>
+    </div>
+    `;
+  }
+
   imageSrc() {
     return this.absolutifyImageUrl((this.currentStep as Question).url);
   }
@@ -383,4 +446,29 @@ export class QuestionnaireElement extends LitElement {
       }));
     }
   }
+
+  submitVerification(event: Event) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    const code = this.verificationCodeInput?.value;
+    if (code) {
+      this.verificationError = null;
+      // Extract node_id from verification id (format: "verification_nodeId")
+      const nodeId = this.currentStep?.id.replace('verification_', '');
+      this.dispatchEvent(new CustomEvent('submitVerification', {
+        detail: { verificationCode: code, nodeId: nodeId }
+      }));
+    }
+  }
+
+  resendCode(event: Event) {
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent('resendCode'));
+  }
+
+  goBackToContactInfo(event: Event) {
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent('goBack'));
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pr360-questionnaire",
   "description": "An element to render a questionnaire for PatientReach 360.",
-  "version": "2.1.11",
+  "version": "2.3.0",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",
@@ -32,6 +32,7 @@
     "mermaid-chart": "launchscout/mermaid-chart",
     "@fullcalendar/core": "^6.1.8",
     "@fullcalendar/daygrid": "^6.1.8",
+    "@fullcalendar/timegrid": "^6.1.8",
     "@fullcalendar/moment": "^6.1.11",
     "@fullcalendar/resource": "^6.1.8",
     "@fullcalendar/resource-timeline": "^6.1.8"

package/test/questionnaire-test.ts

@@ -1,6 +1,6 @@
 import '../js/questionnaire';
 import { expect } from "@esm-bundle/chai";
-import { ContactInfo, QuestionnaireElement} from '../js/questionnaire';
+import { ContactInfo, QuestionnaireElement, Verification} from '../js/questionnaire';
 import { fixture } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import LiveState from 'phx-live-state';
@@ -84,4 +84,51 @@ describe('questionnaire test', async () => {
     console.log(img);
     expect(img?.src).to.equal("https://foo.bar/images/foo");
   });
+
+  it('renders verification screen', async () => {
+    questionnaireElement.currentStep = {
+      id: "verification_123",
+      type: "Verification",
+      text: "Please enter the verification code we sent to your phone.",
+      phoneNumber: "555-123-4567"
+    } as Verification;
+    questionnaireElement.links = {
+      contact_info_image: '/images/contact.jpg'
+    };
+
+    const button = questionnaireElement.querySelector('button');
+    button?.click();
+    await questionnaireElement.updateComplete;
+
+    expect(questionnaireElement.shadowRoot?.textContent).to.contain("Verify Your Phone Number");
+    expect(questionnaireElement.shadowRoot?.textContent).to.contain("555-123-4567");
+    expect(questionnaireElement.shadowRoot?.querySelector('#verification_code')).to.exist;
+    expect(questionnaireElement.shadowRoot?.textContent).to.contain("Submit");
+    expect(questionnaireElement.shadowRoot?.textContent).to.contain("Resend Code");
+    expect(questionnaireElement.shadowRoot?.textContent).to.contain("Go Back");
+    
+    // Verify Go Back button is at top left (button--link class)
+    const goBackButton = Array.from(questionnaireElement.shadowRoot?.querySelectorAll('.button--link') || [])
+      .find(btn => btn.textContent?.includes('Go Back'));
+    expect(goBackButton).to.exist;
+  });
+
+  it('displays verification error when present', async () => {
+    questionnaireElement.currentStep = {
+      id: "verification_123",
+      type: "Verification",
+      text: "Please enter the verification code we sent to your phone.",
+      phoneNumber: "555-123-4567"
+    } as Verification;
+    questionnaireElement.verificationError = "Invalid verification code";
+    questionnaireElement.links = {
+      contact_info_image: '/images/contact.jpg'
+    };
+
+    const button = questionnaireElement.querySelector('button');
+    button?.click();
+    await questionnaireElement.updateComplete;
+
+    expect(questionnaireElement.shadowRoot?.textContent).to.contain("Invalid verification code");
+  });
 });