pr360-questionnaire 2.1.10 → 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'],
+  properties: ['currentStep', 'visitedNodes', 'phoneNumber', 'links', 'accountActive', 'questionnaireDepth', 'providers', 'outcome', 'verificationError'],
   events: {
-    send: ['answerQuestion', 'submitContactInfo', 'goBack']
+    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;
@@ -68,6 +75,11 @@ export class QuestionnaireElement extends LitElement {
   @state()
   providers: string[];
 
+  @state() outcome: string;
+
+  @state()
+  verificationError: string | null = null;
+
   @property()
   @liveStateConfig('url')
   url: string | undefined;
@@ -102,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;
 
@@ -110,8 +125,69 @@ export class QuestionnaireElement extends LitElement {
     return `questionnaires:${this.siteId}`;
   }
 
+  @liveStateConfig('params')
+  get params() {
+    return this.getUtmParams();
+  }
+
+  get liveStateUrl() {
+    return this.url;
+  }
+
+  private getUtmParams(): Record<string, string> {
+    const urlParams = new URLSearchParams(window.location.search);
+    const utmParams = Object.fromEntries(
+      Array.from(urlParams.entries()).filter(([key, _]) => 
+        key.startsWith('utm_')
+      )
+    );
+    
+    // Add additional UTM tracking data
+    utmParams['utm_url'] = window.location.href;
+    utmParams['utm_referring_page'] = document.referrer || '';
+    
+    return utmParams;
+  }
+
+  private getReferrerUrl(): string {
+    const referrer = document.referrer;
+    
+    if (!referrer) {
+      return '';
+    }
+    
+    const referrerUrl = new URL(referrer);
+    // Don't track internal referrers (same domain)
+    if (referrerUrl.hostname === window.location.hostname) {
+      return '';
+    }
+    return referrer;
+  }
+
+  private trackQuestionnaireCompletion() {
+    window['dataLayer'] = window['dataLayer'] || [];
+    
+    const eventData = {
+      'event': 'questionnaireComplete',
+      'formData': {outcome: this.outcome},
+      'timestamp': new Date().toISOString(),
+      'url': window.location.href
+    };
+    
+    window['dataLayer'].push(eventData);
+  }
+
   connectedCallback() {
     super.connectedCallback();
+    
+    // Send UTM parameters to channel after connection is established
+    setTimeout(() => {
+      const utmParams = this.getUtmParams();
+      this.dispatchEvent(new CustomEvent('setUtmParams', {
+        detail: utmParams
+      }));
+    }, 100);
+    
     if (document.querySelector('script#hs-script-loader') === null) {
       const script = document.createElement('script');
       script.async = true;
@@ -122,6 +198,14 @@ export class QuestionnaireElement extends LitElement {
     }
   }
 
+  updated() {
+    if (this.open) { this.openModal(); }
+    
+    if (this.outcome) {
+      this.trackQuestionnaireCompletion();
+    }
+  }
+
   render() {
     return html`
       ${this.open ? '<div></div>' : html`<button class="button button--begin" ?disabled=${!this.accountActive} part="begin-button" @click=${this.openModal}><slot>Begin</slot></button>`}
@@ -129,15 +213,12 @@ export class QuestionnaireElement extends LitElement {
     `;
   }
 
-  updated() {
-    if (this.open) { this.openModal(); }
-  }
-
   renderCurrentStep() {
     switch (this.currentStep?.type) {
       case "Question": return this.renderQuestion();
       case "ContactInfo": return this.renderContactInfo();
       case "Video": return this.renderVideo();
+      case "Verification": return this.renderVerification();
     }
   }
 
@@ -215,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);
   }
@@ -316,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.10",
+  "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");
+  });
 });