pr360-questionnaire 2.1.11 → 2.2.11

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'],
   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,9 @@ export class QuestionnaireElement extends LitElement {
 
   @state() outcome: string;
 
+  @state()
+  verificationError: string | null = null;
+
   @property()
   @liveStateConfig('url')
   url: string | undefined;
@@ -104,6 +114,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 +218,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();
     }
   }
 
@@ -282,6 +296,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 +429,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.2.11",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",

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");
+  });
 });