pr360-questionnaire 2.3.2 → 2.3.4

package/build/questionnaire-test.js

@@ -16995,6 +16995,21 @@ meter::-webkit-meter-optimum-value {
     margin-bottom: 10px;
   }
 }
+.button--booking {
+  background-color: #3B6A8B;
+  color: #FFFFFF;
+  text-decoration: none;
+  display: inline-block;
+  width: auto;
+  min-width: 200px;
+  padding: 12px 40px;
+  margin: 20px 0;
+  text-align: center;
+}
+.button--booking:hover {
+  background-color: #2d5270;
+  color: #FFFFFF;
+}
 .button--link {
   background-color: transparent;
   border: 0px;
@@ -17453,8 +17468,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>
+              <a class="button button--booking" href=${this.currentStep.bookingUrl} target="_blank">Book Appointment</a>
               <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>
@@ -32223,10 +32238,10 @@ ${inspect(response)}
         id: "video_123",
         type: "Video",
         text: "Based on your assessment, you are likely still losing too much blood.",
-        url: "https://vimeo.com/123456"
+        url: "https://vimeo.com/123456",
+        bookingUrl: "https://booking.example.com/appointment?prospect_id=abc123"
       };
       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"
@@ -32239,6 +32254,7 @@ ${inspect(response)}
       f3(bookingLink?.textContent).to.contain("Book Appointment");
       f3(bookingLink?.getAttribute("target")).to.equal("_blank");
       f3(bookingLink?.classList.contains("button")).to.be.true;
+      f3(bookingLink?.classList.contains("button--booking")).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");

package/css/questionnaire.lit.scss

@@ -255,6 +255,23 @@ meter::-webkit-meter-optimum-value {
 
   }
 
+  &--booking {
+    background-color: #3B6A8B;
+    color: #FFFFFF;
+    text-decoration: none;
+    display: inline-block;
+    width: auto;
+    min-width: 200px;
+    padding: 12px 40px;
+    margin: 20px 0;
+    text-align: center;
+
+    &:hover {
+      background-color: #2d5270;
+      color: #FFFFFF;
+    }
+  }
+
   &--link {
     background-color: transparent;
     border: 0px;

package/dist/index.js

@@ -7190,6 +7190,21 @@ meter::-webkit-meter-optimum-value {
     margin-bottom: 10px;
   }
 }
+.button--booking {
+  background-color: #3B6A8B;
+  color: #FFFFFF;
+  text-decoration: none;
+  display: inline-block;
+  width: auto;
+  min-width: 200px;
+  padding: 12px 40px;
+  margin: 20px 0;
+  text-align: center;
+}
+.button--booking:hover {
+  background-color: #2d5270;
+  color: #FFFFFF;
+}
 .button--link {
   background-color: transparent;
   border: 0px;
@@ -7642,8 +7657,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>
+              <a class="button button--booking" href=${this.currentStep.bookingUrl} target="_blank">Book Appointment</a>
               <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

@@ -21,6 +21,7 @@ export type Video = {
   type: "Video";
   url: string;
   text: string;
+  bookingUrl?: string;
 }
 
 export type ContactInfo = {
@@ -243,8 +244,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>
+              <a class="button button--booking" href=${(this.currentStep as Video).bookingUrl} target="_blank">Book Appointment</a>
               <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.2",
+  "version": "2.3.4",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",

package/test/questionnaire-test.ts

@@ -137,10 +137,10 @@ describe('questionnaire test', async () => {
       id: "video_123",
       type: "Video",
       text: "Based on your assessment, you are likely still losing too much blood.",
-      url: "https://vimeo.com/123456"
+      url: "https://vimeo.com/123456",
+      bookingUrl: "https://booking.example.com/appointment?prospect_id=abc123"
     };
     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'
@@ -157,6 +157,7 @@ describe('questionnaire test', async () => {
     expect(bookingLink?.getAttribute('target')).to.equal('_blank');
     // Should have button styling
     expect(bookingLink?.classList.contains('button')).to.be.true;
+    expect(bookingLink?.classList.contains('button--booking')).to.be.true;
 
     // The message about professional should appear
     const infoDiv = questionnaireElement.shadowRoot?.querySelector('[data-test-id="questionnaire-info"]');