pr360-questionnaire 2.3.3 → 2.3.5

package/build/questionnaire-test.js

@@ -16995,6 +16995,22 @@ 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: 180px;
+  min-height: auto;
+  padding: 12px 32px;
+  margin: 20px 0;
+  text-align: center;
+}
+.button--booking:hover {
+  background-color: #2d5270;
+  color: #FFFFFF;
+}
 .button--link {
   background-color: transparent;
   border: 0px;
@@ -17453,7 +17469,7 @@ 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--primary u-push-top" href=${this.currentStep.bookingUrl} target="_blank">Book Appointment</a>
+              <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>
           ` : 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>
@@ -32239,6 +32255,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,24 @@ meter::-webkit-meter-optimum-value {
 
   }
 
+  &--booking {
+    background-color: #3B6A8B;
+    color: #FFFFFF;
+    text-decoration: none;
+    display: inline-block;
+    width: auto;
+    min-width: 180px;
+    min-height: auto;
+    padding: 12px 32px;
+    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,22 @@ 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: 180px;
+  min-height: auto;
+  padding: 12px 32px;
+  margin: 20px 0;
+  text-align: center;
+}
+.button--booking:hover {
+  background-color: #2d5270;
+  color: #FFFFFF;
+}
 .button--link {
   background-color: transparent;
   border: 0px;
@@ -7642,7 +7658,7 @@ 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--primary u-push-top" href=${this.currentStep.bookingUrl} target="_blank">Book Appointment</a>
+              <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>
           ` : 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>

package/js/questionnaire.ts

@@ -244,7 +244,7 @@ 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--primary u-push-top" href=${(this.currentStep as Video).bookingUrl} target="_blank">Book Appointment</a>
+              <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>
           ` :
           html`

package/package.json

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

package/test/questionnaire-test.ts

@@ -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"]');