pr360-questionnaire 2.3.0 → 2.3.1

package/build/questionnaire-test.js

@@ -17453,8 +17453,8 @@ meter::-webkit-meter-optimum-value {
           <vimeo-video controls src=${this.currentStep.url} class="questionnaire--video"></vimeo-video>
           ${this.canSelfBook ? x`
               <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>
+              <a class="button button--primary" href=${this.bookingUrl} target="_blank">Book Appointment</a>
           ` : x`
             <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>
@@ -32218,6 +32218,33 @@ ${inspect(response)}
       await questionnaireElement.updateComplete;
       f3(questionnaireElement.shadowRoot?.textContent).to.contain("Invalid verification code");
     });
+    it("renders Book Appointment as clickable link when canSelfBook is true", async () => {
+      questionnaireElement.currentStep = {
+        id: "video_123",
+        type: "Video",
+        text: "Based on your assessment, you are likely still losing too much blood.",
+        url: "https://vimeo.com/123456"
+      };
+      questionnaireElement.canSelfBook = true;
+      questionnaireElement.bookingUrl = "https://booking.example.com/appointment?prospect_id=abc123";
+      questionnaireElement.phoneNumber = "555-123-4567";
+      questionnaireElement.links = {
+        contact_info_image: "/images/contact.jpg"
+      };
+      const button = questionnaireElement.querySelector("button");
+      button?.click();
+      await questionnaireElement.updateComplete;
+      const bookingLink = questionnaireElement.shadowRoot?.querySelector('a[href="https://booking.example.com/appointment?prospect_id=abc123"]');
+      f3(bookingLink).to.exist;
+      f3(bookingLink?.textContent).to.contain("Book Appointment");
+      f3(bookingLink?.getAttribute("target")).to.equal("_blank");
+      f3(bookingLink?.classList.contains("button")).to.be.true;
+      const infoDiv = questionnaireElement.shadowRoot?.querySelector('[data-test-id="questionnaire-info"]');
+      f3(infoDiv).to.exist;
+      f3(infoDiv?.textContent).to.contain("set up an initial call with a professional");
+      const phoneDiv = questionnaireElement.shadowRoot?.querySelector('[data-test-id="site-phone-number"]');
+      f3(phoneDiv).to.exist;
+    });
   });
 })();
 /*! Bundled license information:

package/dist/index.js

@@ -7642,8 +7642,8 @@ meter::-webkit-meter-optimum-value {
           <vimeo-video controls src=${this.currentStep.url} class="questionnaire--video"></vimeo-video>
           ${this.canSelfBook ? x`
               <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>
+              <a class="button button--primary" href=${this.bookingUrl} target="_blank">Book Appointment</a>
           ` : x`
             <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>

package/js/questionnaire.ts

@@ -243,8 +243,8 @@ export class QuestionnaireElement extends LitElement {
           ${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>
+              <a class="button button--primary" href=${this.bookingUrl} target="_blank">Book Appointment</a>
           ` :
           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>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pr360-questionnaire",
   "description": "An element to render a questionnaire for PatientReach 360.",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",

package/test/questionnaire-test.ts

@@ -131,4 +131,40 @@ describe('questionnaire test', async () => {
 
     expect(questionnaireElement.shadowRoot?.textContent).to.contain("Invalid verification code");
   });
+
+  it('renders Book Appointment as clickable link when canSelfBook is true', async () => {
+    questionnaireElement.currentStep = {
+      id: "video_123",
+      type: "Video",
+      text: "Based on your assessment, you are likely still losing too much blood.",
+      url: "https://vimeo.com/123456"
+    };
+    questionnaireElement.canSelfBook = true;
+    questionnaireElement.bookingUrl = "https://booking.example.com/appointment?prospect_id=abc123";
+    questionnaireElement.phoneNumber = "555-123-4567";
+    questionnaireElement.links = {
+      contact_info_image: '/images/contact.jpg'
+    };
+
+    const button = questionnaireElement.querySelector('button');
+    button?.click();
+    await questionnaireElement.updateComplete;
+
+    // Book Appointment should be an anchor tag with the booking URL
+    const bookingLink = questionnaireElement.shadowRoot?.querySelector('a[href="https://booking.example.com/appointment?prospect_id=abc123"]');
+    expect(bookingLink).to.exist;
+    expect(bookingLink?.textContent).to.contain("Book Appointment");
+    expect(bookingLink?.getAttribute('target')).to.equal('_blank');
+    // Should have button styling
+    expect(bookingLink?.classList.contains('button')).to.be.true;
+
+    // The message about professional should appear
+    const infoDiv = questionnaireElement.shadowRoot?.querySelector('[data-test-id="questionnaire-info"]');
+    expect(infoDiv).to.exist;
+    expect(infoDiv?.textContent).to.contain("set up an initial call with a professional");
+
+    // Phone number section should also exist
+    const phoneDiv = questionnaireElement.shadowRoot?.querySelector('[data-test-id="site-phone-number"]');
+    expect(phoneDiv).to.exist;
+  });
 });