pr360-questionnaire 2.2.11 → 2.3.1

package/build/questionnaire-test.js

@@ -17355,6 +17355,7 @@ meter::-webkit-meter-optimum-value {
       this.accountActive = true;
       this.visitedNodes = [];
       this.verificationError = null;
+      this.canSelfBook = false;
       this.hubspotId = "40834387";
     }
     get topic() {
@@ -17450,8 +17451,14 @@ meter::-webkit-meter-optimum-value {
           <div class="questionnaire-illustration"><img src=${this.contactInfoImageUrl()}> </div>
           <div class="questionnaire--question"><h2 class="u-padding--bt">${this.currentStep.text}</h2></div>
           <vimeo-video controls src=${this.currentStep.url} class="questionnaire--video"></vimeo-video>
-          <div data-test-id="questionnaire-info"><h4>Thank you for completing the assessment. We'll 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 us sooner, </br> please feel free to</h4><a href="tel:${this.phoneNumber}"><h1>Call Us</h1></a></div>
+          ${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>
+              <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>
+          `}
         </div>
       </div>
     </div>
@@ -17463,7 +17470,7 @@ meter::-webkit-meter-optimum-value {
       <div class="questionnaire-illustration"><img src=${this.contactInfoImageUrl()}> </div>
       <div class="form__container">
       <div class="header">
-        <h1>We think we can help.</h1>
+        <h1>${this.siteSource ? `${this.siteSource} can help.` : "We think we can help."}</h1>
         <h2>${this.currentStep.text}</h2>
       </div>
       <form @submit=${this.submitContactInfo}>
@@ -17503,7 +17510,7 @@ meter::-webkit-meter-optimum-value {
           </div>
           <div class="footer u-text-center">
             <button class="button button--primary u-push-top" type="submit">Get Assessment</button>
-            <p>By clicking Submit, you acknowledge that you have read and agree to the <a href=${this.links["terms_conditions"]} target="_blank">Terms of Use</a>
+            <p>By clicking Get Assessment, you consent to receive text messages (SMS) and phone calls, and you acknowledge that you have read and agree to the <a href=${this.links["terms_conditions"]} target="_blank">Terms of Use</a> 
               and the <a href=${this.links["privacy_policy"]} target="_blank">Privacy Policy</a></p>
           </div>
         </div>
@@ -17681,6 +17688,15 @@ meter::-webkit-meter-optimum-value {
   __decorateClass([
     t3()
   ], QuestionnaireElement.prototype, "verificationError", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "canSelfBook", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "bookingUrl", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "siteSource", 2);
   __decorateClass([
     n5(),
     liveStateConfig("url")
@@ -17730,7 +17746,7 @@ meter::-webkit-meter-optimum-value {
   QuestionnaireElement = __decorateClass([
     e4("pr360-questionnaire"),
     liveStateDecorator_default({
-      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers", "outcome", "verificationError"],
+      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers", "outcome", "verificationError", "canSelfBook", "bookingUrl", "siteSource"],
       events: {
         send: ["answerQuestion", "submitContactInfo", "goBack", "setUtmParams", "submitVerification", "resendCode"]
       },
@@ -32202,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/css/app.scss

@@ -20,6 +20,8 @@
 @import './components/questionnaire';
 @import './components/site-rules';
 @import './components/network-live';
+@import './components/dropdown';
+@import './components/booking';
 
 // Imported last to take precedence in the cascade
 @import './base/utilities';

package/css/base/_layout.scss

@@ -9,30 +9,84 @@ body {
 header,
 .header {
     display: grid;
-        gap: $space-sm;
-        align-items: end;
-        grid-template-columns: 1fr auto auto auto auto auto;
+        gap: $space-xs;
+        grid-template-columns: auto 1fr;
+        grid-template-areas: "logo nav";
     font-size: $small-font-size;
     padding: $space-sm $space-md;
     margin-bottom: $space-md;
     background-color: $white;
     box-shadow: 5px 5px 20px 3px rgba(131, 131, 131, 0.198);
 
+    .logo {
+        grid-area: logo;
+        font-weight: bold;
+        align-self: center;
+        margin: 0;
+    }
+
+    .main-nav {
+        grid-area: nav;
+        display: flex;
+        gap: $space-lg;
+        align-items: center;
+        justify-content: flex-end;
+
+        a {
+            white-space: nowrap;
+        }
+    }
+
+    // User menu dropdown styling in nav bar
+    .user-menu-dropdown {
+        .dropdown__toggle {
+            background-color: transparent;
+            border: 1px solid $gray-lighter;
+            font-size: 0.8125rem;
+            font-weight: 600;
+            color: $gray-dark;
+            padding: $space-xs $space-sm;
+            
+            &:hover {
+                background-color: $gray-lightest;
+                border-color: $gray-light;
+            }
+        }
+
+        .dropdown__menu {
+            min-width: 200px;
+        }
+    }
+
     @media screen and (max-width: $screen-tablet) {
-        grid-template-columns: auto auto auto auto 1fr;
+        grid-template-columns: 1fr;
         grid-template-rows: auto auto;
-        grid-template-areas: "logo settings"
-        "nav nav";
+        grid-template-areas: 
+            "logo"
+            "nav";
 
-        nav {
-            grid-area: nav;
+        .logo {
+            text-align: center;
             margin-bottom: $space-xs;
         }
 
-        .logo {grid-area: logo;}
+        .main-nav {
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+    }
 
-        .user-links {grid-area: settings;}
+    // Public header variant (no navigation)
+    &--public {
+        display: flex;
+        justify-content: center;
+        padding: $space-md;
 
+        .logo {
+            text-align: center;
+            font-size: 1.25rem;
+            color: $color-primary;
+        }
     }
 }
 

package/css/components/_booking.scss

@@ -0,0 +1,449 @@
+// Booking Page - matches questionnaire styling
+// Colors from questionnaire.lit.scss
+$booking-primary: #3B6A8B;
+$booking-bg: #F0F5F7;
+$booking-white: #FFFFFF;
+$booking-gray: rgb(132, 132, 132);
+$booking-border: #8c8c8c;
+$booking-hover: #D6E2E5;
+$booking-light: #EDF3F4;
+
+.booking-page {
+  background-color: $booking-bg;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 55px 20px;
+  font-family: 'Lato', Helvetica, sans-serif;
+}
+
+.booking-card {
+  width: 45vw;
+  min-height: 55vh;
+  background-color: $booking-white;
+  padding: 50px;
+  border-radius: 45px;
+  box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.1);
+  position: relative;
+
+  @media screen and (max-width: 1210px) {
+    width: 55vw;
+  }
+
+  @media screen and (max-width: 900px) {
+    width: 75vw;
+    padding: 30px;
+  }
+
+  @media screen and (max-width: 600px) {
+    width: 90vw;
+    padding: 25px 20px;
+    border-radius: 25px;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: rgba(24, 24, 24, 0.88);
+    text-align: center;
+    margin: 0 0 5px;
+  }
+
+  h2 {
+    font-weight: 400;
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.2rem;
+    color: $booking-primary;
+    text-align: center;
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: 1rem;
+    color: rgba(24, 24, 24, 0.88);
+    margin: 0 0 10px;
+  }
+}
+
+.booking-subtitle {
+  font-size: 0.9rem;
+  color: $booking-gray;
+  text-align: center;
+  margin: 8px 0 25px;
+}
+
+// Navigation buttons
+.booking-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.booking-nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  color: $booking-primary;
+  font-family: 'Lato', Helvetica, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 5px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: $booking-light;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.booking-nav-spacer {
+  width: 80px;
+}
+
+// Days list
+.booking-days {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.booking-day {
+  border: 1px solid $booking-border;
+  border-radius: 5px;
+  overflow: hidden;
+  transition: border-color 0.2s ease;
+
+  &.expanded {
+    border-color: $booking-primary;
+  }
+}
+
+.booking-day-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 15px 20px;
+  background: $booking-white;
+  border: none;
+  cursor: pointer;
+  font-family: 'Lato', Helvetica, sans-serif;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: $booking-light;
+  }
+
+  .expanded & {
+    background-color: $booking-light;
+    border-bottom: 1px solid $booking-border;
+  }
+}
+
+.booking-day-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.booking-day-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: rgba(24, 24, 24, 0.88);
+}
+
+.booking-day-date {
+  font-size: 0.875rem;
+  color: $booking-gray;
+}
+
+.booking-day-count {
+  font-size: 0.875rem;
+  color: $booking-primary;
+  font-weight: 400;
+}
+
+// Slots container
+.booking-day-slots {
+  display: none;
+  padding: 15px 20px;
+  background: $booking-light;
+  flex-wrap: wrap;
+  gap: 10px;
+
+  .expanded & {
+    display: flex;
+  }
+}
+
+.booking-slot {
+  font-family: 'Lato', Helvetica, sans-serif;
+  font-size: 0.9rem;
+  font-weight: 400;
+  padding: 10px 18px;
+  background: $booking-white;
+  border: 1px solid $booking-border;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: rgba(24, 24, 24, 0.88);
+
+  &:hover {
+    border-color: $booking-primary;
+    background-color: $booking-white;
+  }
+
+  &.selected {
+    background-color: $booking-primary;
+    border-color: $booking-primary;
+    color: $booking-white;
+  }
+}
+
+.booking-slot-duration {
+  color: $booking-gray;
+  font-size: 0.8rem;
+
+  .selected & {
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+
+// Empty state
+.booking-empty {
+  text-align: center;
+  padding: 40px 20px;
+
+  p {
+    font-size: 1rem;
+    color: $booking-gray;
+    margin-bottom: 20px;
+  }
+}
+
+// Actions
+.booking-actions {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.booking-selection-summary {
+  font-size: 0.875rem;
+  color: $booking-primary;
+  margin-top: 10px;
+  text-align: center;
+}
+
+// Buttons matching questionnaire style
+.booking-page .button {
+  font-family: sofia-pro, SofiaProWeb, Helvetica, Arial, sans-serif;
+  background-color: $booking-light;
+  border-radius: 0.5rem;
+  color: $booking-primary;
+  font-size: 1rem;
+  font-weight: 300;
+  transition: transform 150ms, background-color 150ms;
+  padding: 10px 35px;
+  min-width: 150px;
+  width: 25vw;
+  min-height: 55px;
+  border: unset;
+  cursor: pointer;
+
+  @media screen and (max-width: 1210px) {
+    width: 35vw;
+  }
+
+  @media screen and (max-width: 700px) {
+    width: 60vw;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: $booking-hover;
+  }
+
+  &--primary {
+    background-color: $booking-primary;
+    color: $booking-white;
+
+    &:hover:not(:disabled) {
+      background-color: darken($booking-primary, 8%);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// Modal styling
+.booking-confirm-modal {
+  text-align: center;
+  padding: 20px 0;
+
+  h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: rgba(24, 24, 24, 0.88);
+    margin: 0 0 5px;
+  }
+
+  h2 {
+    font-weight: 400;
+    margin: 0 0 25px;
+    font-size: 1rem;
+    color: $booking-primary;
+  }
+}
+
+.booking-confirm-details {
+  background: $booking-light;
+  border-radius: 10px;
+  padding: 20px 25px;
+  margin-bottom: 25px;
+}
+
+.booking-confirm-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.booking-confirm-label {
+  font-size: 0.875rem;
+  color: $booking-gray;
+}
+
+.booking-confirm-value {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgba(24, 24, 24, 0.88);
+}
+
+.booking-confirm-actions {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+
+  .button {
+    width: auto;
+    min-width: 120px;
+  }
+}
+
+// Confirmation page (show)
+.booking-card--confirmed {
+  text-align: center;
+
+  .booking-confirm-details {
+    text-align: left;
+    margin: 25px 0;
+  }
+}
+
+.booking-success-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 20px;
+  color: #22c55e;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.booking-next-steps {
+  background: $booking-light;
+  border-radius: 10px;
+  padding: 25px;
+  margin-top: 25px;
+  text-align: left;
+
+  h3 {
+    margin-bottom: 15px;
+  }
+
+  p {
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: $booking-gray;
+    margin: 0 0 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Info icon for existing appointments
+.booking-info-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 20px;
+  color: $booking-primary;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// Contact information section
+.booking-contact-info {
+  background: $booking-white;
+  border: 1px solid $booking-border;
+  border-radius: 8px;
+  padding: 15px 20px;
+  margin: 15px 0;
+}
+
+.booking-contact-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  font-size: 0.9rem;
+  color: rgba(24, 24, 24, 0.88);
+
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  }
+
+  .contact-icon {
+    width: 20px;
+    height: 20px;
+    color: $booking-primary;
+    flex-shrink: 0;
+  }
+
+  span {
+    font-weight: 500;
+  }
+}
+
+.booking-contact-note {
+  font-size: 0.8rem !important;
+  font-style: italic;
+  color: $booking-gray;
+  margin-top: 15px !important;
+}

package/css/components/_buttons.scss

@@ -28,5 +28,87 @@ button, .button {
         background-color: transparent;
         
     }
+
+    &--compact {
+        padding: 8px 12px;
+        font-size: 14px;
+    }
  
-}   
+}
+
+.toggle-filter {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    background-color: #f9fafb;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+        background-color: #f3f4f6;
+    }
+
+    &__label {
+        font-size: 13px;
+        font-weight: 500;
+        color: #374151;
+        user-select: none;
+    }
+}
+
+.toggle-switch {
+    position: relative;
+    width: 44px;
+    height: 24px;
+    cursor: pointer;
+
+    input[type="checkbox"] {
+        opacity: 0;
+        width: 0;
+        height: 0;
+        position: absolute;
+
+        &:checked + .toggle-switch__slider {
+            background-color: $color-primary;
+
+            &:before {
+                transform: translateX(20px);
+            }
+        }
+    }
+
+    &__slider {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #cbd5e1;
+        border-radius: 24px;
+        transition: all 0.3s ease;
+
+        &:before {
+            content: "";
+            position: absolute;
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            border-radius: 50%;
+            transition: transform 0.3s ease;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+    }
+
+    &:hover .toggle-switch__slider {
+        background-color: #94a3b8;
+    }
+
+    input[type="checkbox"]:checked + .toggle-switch__slider:hover {
+        background-color: darken($color-primary, 10%);
+    }
+}

package/css/components/_dropdown.scss

@@ -0,0 +1,103 @@
+// Dropdown menu component
+.dropdown {
+  position: relative;
+  display: inline-block;
+
+  &__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: $space-xs $space-sm;
+    background-color: $white;
+    border: 1px solid $gray-lighter;
+    border-radius: $border-radius;
+    color: $gray-dark;
+    cursor: pointer;
+    transition: $transition;
+    min-width: 80px;
+    font-size: 14px;
+    gap: $space-xs;
+
+    &:hover {
+      background-color: $gray-lightest;
+      border-color: $gray-light;
+      color: $color-primary;
+    }
+
+    .icon-text {
+      font-size: 12px;
+      line-height: 1;
+    }
+  }
+
+  &__menu {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    margin-top: $space-xs;
+    background-color: $white;
+    border: 1px solid $gray-lighter;
+    border-radius: $border-radius;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    min-width: 180px;
+    z-index: 1000;
+    padding: $space-xs 0;
+
+    &--show {
+      display: block;
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: $space-sm;
+    padding: $space-sm $space-md;
+    color: $gray-dark;
+    text-decoration: none;
+    cursor: pointer;
+    transition: $transition;
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+    font-size: 14px;
+
+    .icon-text {
+      font-size: 16px;
+      line-height: 1;
+      width: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &:hover:not(&--danger) {
+      background-color: $gray-lightest;
+      color: $color-primary;
+    }
+
+    &--danger {
+      color: $gray-dark;
+      
+      &:hover {
+        background-color: lighten($danger, 45%) !important;
+        color: $danger !important;
+      }
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__divider {
+    height: 1px;
+    background-color: $gray-lighter;
+    margin: $space-xs 0;
+  }
+}
+

package/css/components/_inputs.scss

@@ -47,4 +47,9 @@ input {
         input {
             height: 15px;
         }
+
+    &--inline {
+        display: flex;
+        gap: 2rem;
+    }
 }

package/css/components/_modal.scss

@@ -7,6 +7,7 @@
     background-color: rgba(0, 0, 0, .2);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
+    z-index: 9998;
 }
 
 .modal--container{
@@ -26,6 +27,13 @@
     }
 }
 
+// Ensure FullCalendar sticky headers stay below modals
+.fc-col-header-cell,
+.fc-col-header,
+.fc-scrollgrid-sync-table {
+    z-index: 1 !important;
+}
+
 // Style the onboarding email textarea to match other form fields but with better formatting
 textarea[name="network_form[onboarding_email]"] {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;

package/css/components/_tables.scss

@@ -44,20 +44,7 @@ table {
     overflow: visible;
 
     &_links {
-        display: flex;
-        justify-content: space-between;
-        align-items: baseline;
-
-        & span {
-            display: flex;
-            gap: 25px;
-        }
-
-        & div {
-            display: flex;
-            align-items: baseline;
-            gap: 10px;
-        }
+        margin-bottom: $space-md;
     }
 
     h4 {
@@ -77,6 +64,42 @@ table {
     }
 }
 
+// Prospects toolbar layout
+.prospects-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+
+    &__left {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__right {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-shrink: 0;
+    }
+}
+
+// Toolbar links
+.toolbar-link {
+    font-size: 14px;
+    color: $color-primary;
+    text-decoration: none;
+    white-space: nowrap;
+    
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
 table.org-users {
     margin-bottom: 10vh;
 }
@@ -90,7 +113,7 @@ table {
             border-bottom: 1px solid $gray-lighter;
 
             td {
-                padding: $space-sm 0;
+                padding: $space-sm $space-md $space-sm 0;
             }
         }
     }
@@ -98,6 +121,7 @@ table {
     thead {
         tr {
             th {
+                padding-right: $space-md;
                 text-align: left;
                 color: $gray;
                 font-weight: 400;
@@ -223,6 +247,15 @@ table {
     cursor: default !important;
 }
 
+// Highlight prospects with nil status in red
+.prospects-table tbody tr.prospect-nil-status {
+    background-color: #ffe6e6 !important;
+}
+
+.prospects-table--main tbody tr.prospect-nil-status:hover {
+    background-color: #ffd1d1 !important;
+}
+
 .prospects-table tr,
 .prospects-table td {
     overflow: visible !important;
@@ -406,4 +439,79 @@ table {
   pointer-events: none !important;
   filter: blur(1px) !important;
   transition: opacity 0.2s, filter 0.2s;
+}
+
+// User table styles
+.user-table {
+  tbody {
+    tr {
+      td:first-child {
+        padding-left: 0;
+        min-width: 150px;
+      }
+
+      td:nth-child(2) {
+        min-width: 200px;
+      }
+
+      td:nth-child(3) {
+        min-width: 150px;
+      }
+    }
+  }
+}
+
+// Icon buttons for table actions
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: $space-xs;
+  background-color: transparent;
+  border: 1px solid $gray-lighter;
+  border-radius: $border-radius;
+  color: $gray-dark;
+  cursor: pointer;
+  transition: $transition;
+  min-width: 36px;
+  min-height: 36px;
+  text-decoration: none;
+
+  .icon-text {
+    font-size: 16px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover {
+    background-color: $gray-lightest;
+    border-color: $gray-light;
+    color: $color-primary;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &--danger {
+    &:hover {
+      background-color: lighten($danger, 45%);
+      border-color: $danger;
+      color: $danger;
+    }
+  }
+}
+
+// Table actions container
+.table-actions {
+  display: flex;
+  gap: $space-sm;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
 }

package/dist/index.js

@@ -7544,6 +7544,7 @@ meter::-webkit-meter-optimum-value {
       this.accountActive = true;
       this.visitedNodes = [];
       this.verificationError = null;
+      this.canSelfBook = false;
       this.hubspotId = "40834387";
     }
     get topic() {
@@ -7639,8 +7640,14 @@ meter::-webkit-meter-optimum-value {
           <div class="questionnaire-illustration"><img src=${this.contactInfoImageUrl()}> </div>
           <div class="questionnaire--question"><h2 class="u-padding--bt">${this.currentStep.text}</h2></div>
           <vimeo-video controls src=${this.currentStep.url} class="questionnaire--video"></vimeo-video>
-          <div data-test-id="questionnaire-info"><h4>Thank you for completing the assessment. We'll 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 us sooner, </br> please feel free to</h4><a href="tel:${this.phoneNumber}"><h1>Call Us</h1></a></div>
+          ${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>
+              <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>
+          `}
         </div>
       </div>
     </div>
@@ -7652,7 +7659,7 @@ meter::-webkit-meter-optimum-value {
       <div class="questionnaire-illustration"><img src=${this.contactInfoImageUrl()}> </div>
       <div class="form__container">
       <div class="header">
-        <h1>We think we can help.</h1>
+        <h1>${this.siteSource ? `${this.siteSource} can help.` : "We think we can help."}</h1>
         <h2>${this.currentStep.text}</h2>
       </div>
       <form @submit=${this.submitContactInfo}>
@@ -7692,7 +7699,7 @@ meter::-webkit-meter-optimum-value {
           </div>
           <div class="footer u-text-center">
             <button class="button button--primary u-push-top" type="submit">Get Assessment</button>
-            <p>By clicking Submit, you acknowledge that you have read and agree to the <a href=${this.links["terms_conditions"]} target="_blank">Terms of Use</a>
+            <p>By clicking Get Assessment, you consent to receive text messages (SMS) and phone calls, and you acknowledge that you have read and agree to the <a href=${this.links["terms_conditions"]} target="_blank">Terms of Use</a> 
               and the <a href=${this.links["privacy_policy"]} target="_blank">Privacy Policy</a></p>
           </div>
         </div>
@@ -7870,6 +7877,15 @@ meter::-webkit-meter-optimum-value {
   __decorateClass([
     t3()
   ], QuestionnaireElement.prototype, "verificationError", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "canSelfBook", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "bookingUrl", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "siteSource", 2);
   __decorateClass([
     n5(),
     liveStateConfig("url")
@@ -7919,7 +7935,7 @@ meter::-webkit-meter-optimum-value {
   QuestionnaireElement = __decorateClass([
     e4("pr360-questionnaire"),
     liveStateDecorator_default({
-      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers", "outcome", "verificationError"],
+      properties: ["currentStep", "visitedNodes", "phoneNumber", "links", "accountActive", "questionnaireDepth", "providers", "outcome", "verificationError", "canSelfBook", "bookingUrl", "siteSource"],
       events: {
         send: ["answerQuestion", "submitContactInfo", "goBack", "setUtmParams", "submitVerification", "resendCode"]
       },

package/js/calendar.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from "lit";
 import { property } from 'lit/decorators.js'
 import { Calendar } from "@fullcalendar/core";
 import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
 import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
 import momentPlugin from "@fullcalendar/moment";
 
@@ -41,16 +42,16 @@ export class CalendarElement extends LitElement {
     let calendarEl: HTMLElement = document.getElementById('full-calendar')!;
     this.calendar = new Calendar(calendarEl, {
       schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
-      plugins: [resourceTimelinePlugin, momentPlugin, dayGridPlugin],
+      plugins: [resourceTimelinePlugin, momentPlugin, dayGridPlugin, timeGridPlugin],
       slotMinWidth: 70,
       slotMinTime: "08:00",
       slotMaxTime: "20:00",
       stickyHeaderDates: true,
-      initialView: 'dayGridWeek',
+      initialView: 'timeGridWeek',
       headerToolbar: {
         left: 'prev,next today',
         center: "title",
-        right: 'dayGridMonth, dayGridWeek, dayGridDay'
+        right: 'dayGridMonth, timeGridWeek, timeGridDay'
       },
       titleFormat: "dddd, MMM D, YYYY",
       events: JSON.parse(this.events),

package/js/questionnaire.ts

@@ -43,7 +43,7 @@ export type Answer = {
 
 @customElement('pr360-questionnaire')
 @liveState({
-  properties: ['currentStep', 'visitedNodes', 'phoneNumber', 'links', 'accountActive', 'questionnaireDepth', 'providers', 'outcome', 'verificationError'],
+  properties: ['currentStep', 'visitedNodes', 'phoneNumber', 'links', 'accountActive', 'questionnaireDepth', 'providers', 'outcome', 'verificationError', 'canSelfBook', 'bookingUrl', 'siteSource'],
   events: {
     send: ['answerQuestion', 'submitContactInfo', 'goBack', 'setUtmParams', 'submitVerification', 'resendCode']
   },
@@ -80,6 +80,15 @@ export class QuestionnaireElement extends LitElement {
   @state()
   verificationError: string | null = null;
 
+  @state()
+  canSelfBook: boolean = false;
+
+  @state()
+  bookingUrl: string;
+
+  @state()
+  siteSource: string;
+
   @property()
   @liveStateConfig('url')
   url: string | undefined;
@@ -231,8 +240,16 @@ export class QuestionnaireElement extends LitElement {
           <div class="questionnaire-illustration"><img src=${this.contactInfoImageUrl()}> </div>
           <div class="questionnaire--question"><h2 class="u-padding--bt">${(this.currentStep as Video).text}</h2></div>
           <vimeo-video controls src=${(this.currentStep as Video).url} class="questionnaire--video"></vimeo-video>
-          <div data-test-id="questionnaire-info"><h4>Thank you for completing the assessment. We'll 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 us sooner, </br> please feel free to</h4><a href="tel:${this.phoneNumber}"><h1>Call Us</h1></a></div>
+          ${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>
+              <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>
+            <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>
+          `}
         </div>
       </div>
     </div>
@@ -245,7 +262,7 @@ export class QuestionnaireElement extends LitElement {
       <div class="questionnaire-illustration"><img src=${this.contactInfoImageUrl()}> </div>
       <div class="form__container">
       <div class="header">
-        <h1>We think we can help.</h1>
+        <h1>${this.siteSource ? `${this.siteSource} can help.` : 'We think we can help.'}</h1>
         <h2>${(this.currentStep as ContactInfo).text}</h2>
       </div>
       <form @submit=${this.submitContactInfo}>
@@ -285,7 +302,7 @@ export class QuestionnaireElement extends LitElement {
           </div>
           <div class="footer u-text-center">
             <button class="button button--primary u-push-top" type="submit">Get Assessment</button>
-            <p>By clicking Submit, you acknowledge that you have read and agree to the <a href=${this.links['terms_conditions']} target="_blank">Terms of Use</a>
+            <p>By clicking Get Assessment, you consent to receive text messages (SMS) and phone calls, and you acknowledge that you have read and agree to the <a href=${this.links['terms_conditions']} target="_blank">Terms of Use</a> 
               and the <a href=${this.links['privacy_policy']} target="_blank">Privacy Policy</a></p>
           </div>
         </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pr360-questionnaire",
   "description": "An element to render a questionnaire for PatientReach 360.",
-  "version": "2.2.11",
+  "version": "2.3.1",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",
@@ -32,6 +32,7 @@
     "mermaid-chart": "launchscout/mermaid-chart",
     "@fullcalendar/core": "^6.1.8",
     "@fullcalendar/daygrid": "^6.1.8",
+    "@fullcalendar/timegrid": "^6.1.8",
     "@fullcalendar/moment": "^6.1.11",
     "@fullcalendar/resource": "^6.1.8",
     "@fullcalendar/resource-timeline": "^6.1.8"

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