@meetelise/chat 1.20.97 → 1.20.99

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, PropertyValueMap, TemplateResult } from "lit";
+import { html, LitElement, PropertyValueMap, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import {
   shortcutKeyIsPressed,
@@ -34,6 +34,7 @@ import postLeadSources from "../../postLeadSources";
 import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
 import { pushGtmEvent } from "../../gtm";
 import disclaimer from "../../disclaimers";
+import { tourSchedulerStyles } from "./tourSchedulerStyles";
 
 const getHumanReadableLayout = (layout: string) => {
   if (layout == "studio") return "Studio";
@@ -117,6 +118,9 @@ export class TourScheduler extends LitElement {
   @property({ attribute: true })
   featureFlagShowDropdown = "";
 
+  @property({ attribute: true })
+  compactDesign = false;
+
   @query(".nameContainer#firstName input")
   firstNameInput!: HTMLInputElement;
   @query(".nameContainer#lastName input")
@@ -461,405 +465,11 @@ export class TourScheduler extends LitElement {
     }
   };
 
-  static styles = [
-    css`
-      * {
-        box-sizing: border-box;
-      }
-
-      .tour-scheduler {
-        position: fixed;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 1018px;
-        height: 573px;
-        background: #ffffff;
-        box-shadow: 0px 16px 18px 10px rgba(21, 21, 21, 0.4);
-        border-radius: 10px;
-        font-family: "Helvetica Neue", Arial;
-        color: #202020;
-        padding: 0 25px 0 27px;
-
-        /* grid stuff */
-        display: grid;
-        grid-template-columns: 229px 432px 305px;
-        grid-template-rows: 44px 54px 32px 245px 117px 1px;
-      }
-
-      @media screen and (max-width: 1000px) {
-        .tour-scheduler {
-          transform: translate(-50%, -50%) scale(0.8, 0.6);
-        }
-      }
-
-      h1,
-      h2 {
-        margin: 0;
-      }
-
-      .tour-scheduler > :is(h1, h2) {
-        align-self: end;
-      }
-
-      h1 {
-        font-size: 14px;
-        font-weight: 700;
-      }
-
-      h1#scheduleATour {
-        grid-row: 1 / 2;
-        grid-column: 1;
-        align-self: end;
-        z-index: 1; // idk why, but it's invisible on the confirmation page otherwise
-      }
-
-      button#closeButton {
-        grid-row: 1 / 2;
-        grid-column: 3;
-        background: none;
-        border: none;
-        align-self: end;
-        justify-self: end;
-        z-index: 1; // idk why, but it's invisible on the confirmation page otherwise
-      }
-
-      /*
-    makes button fit size of SVG:
-      https://stackoverflow.com/questions/45423874/button-height-is-greater-than-the-nested-contents-height
-    otherwise there's some empty space at the bottom of the button, which interferes with vertical centering
-    */
-      button#closeButton > svg {
-        vertical-align: middle;
-      }
-
-      #tourTypeMenu {
-        grid-row: 4 / 5;
-        grid-column: 1;
-        align-self: start;
-        display: flex;
-        flex-direction: column;
-        gap: 15px;
-      }
-
-      h2 {
-        font-weight: 600;
-        font-size: 14px;
-        grid-row: label-row;
-      }
-
-      h2#tourType {
-        grid-column: 1;
-        grid-row: 2;
-      }
-
-      h2#dateAndTime {
-        grid-column: 2;
-        grid-row: 2;
-      }
-
-      h2#yourInformation {
-        grid-column: 3;
-        grid-row: 2;
-      }
-
-      #datePicker {
-        display: flex;
-      }
-
-      #dateAndTimeMenu {
-        grid-row: 4 / 5;
-        grid-column: 2;
-        align-self: start;
-        display: flex;
-        flex-direction: column;
-      }
-
-      #yourInformationMenu {
-        grid-row: 4 / 5;
-        grid-column: 3;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-      }
-
-      #yourInformationMenu input {
-        width: 100%;
-        height: 49px;
-      }
-
-      .unitLayoutChoices {
-        grid-row: 5 / 6;
-        grid-column: 3;
-        align-self: start;
-        display: flex;
-        flex-direction: column;
-      }
-      .unitLayoutChoicesDropdowns {
-        display: flex;
-        justify-content: space-between;
-        gap: 6px;
-      }
-
-      .unitLayoutChoice {
-        margin-bottom: 12px;
-        width: -webkit-fill-available;
-      }
-
-      h2.unitLayoutChoice {
-        margin-bottom: 7px;
-      }
-
-      .unitLayoutOptions {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      hr {
-        grid-row: 6;
-        grid-column: 1 / 5;
-        /* remove side margins because of this
-       * (https://stackoverflow.com/questions/34365271/hr-inside-container-with-display-flex-become-corrupted)
-       * and top/bottom margins to position the line exactly at the gridline
-       */
-        margin: 0;
-      }
-
-      .explanation {
-        font-weight: 400;
-        font-size: 12px;
-        grid-row: 7;
-        grid-column: 1 / 3;
-        align-self: start;
-        margin: 0;
-        padding-top: 32px;
-      }
-      .withDisclaimer {
-        padding-top: 16px;
-      }
-
-      #schedule {
-        width: 145px;
-        height: 50px;
-        grid-row: 7;
-        grid-column: 3;
-        justify-self: end;
-        align-self: start;
-        margin-top: 18px;
-      }
-
-      #confirmationMessage {
-        grid-row: 3;
-        width: 625px;
-      }
-
-      #confirmationMessage > p {
-        font-size: 18px;
-      }
-
-      /* Loading styles: pulsing gray overlay on all the form elements */
-
-      @keyframes spin {
-        0% {
-          transform: none;
-        }
-        50% {
-          transform: rotateZ(180deg);
-        }
-        100% {
-          transform: rotateZ(360deg);
-        }
-      }
-
-      svg#loadingIcon {
-        animation: spin 2s infinite linear;
-      }
-
-      .tour-scheduler.loading #scheduleATour {
-        display: flex;
-        gap: 10px;
-      }
-
-      @keyframes loadingPulse {
-        0% {
-          background-color: #e7e7e7;
-        }
-        50% {
-          background-color: white;
-        }
-        100% {
-          background-color: #e7e7e7;
-        }
-      }
-
-      tour-type-option,
-      date-picker,
-      #yourInformationMenu .inputContainer {
-        position: relative;
-      }
-
-      .tour-scheduler.loading
-        :is(tour-type-option, date-picker, #yourInformationMenu
-          .inputContainer)::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        z-index: 1;
-        animation: loadingPulse 2s infinite;
-      }
-
-      .tour-scheduler.loading tour-type-option::after {
-        border-radius: 10px;
-        width: 200px;
-      }
-
-      .tour-scheduler.loading date-picker::after {
-        border-radius: 10px;
-        width: 205px;
-      }
-
-      .tour-scheduler.loading #yourInformationMenu .inputContainer input {
-        visibility: hidden;
-      }
-
-      .tour-scheduler.loading time-picker {
-        display: none;
-      }
-
-      #namesWrapper {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .nameContainer {
-        width: 48%;
-      }
-
-      .nameInput {
-        width: 100%;
-      }
-
-      @media (max-width: 767px) {
-        /* TODO: separate styles into general, desktop-specific, and mobile-specific.
-      basically everything I have "unset" or "initial" on should become desktop-specific. the grid layout is only for desktop.
-      */
-        .tour-scheduler {
-          position: fixed;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          top: initial;
-          height: 93vh;
-          width: 100vw;
-          background: #ffffff;
-          transform: none;
-          box-shadow: none;
-          border-radius: 0;
-          padding: 25px 20px 0 22px;
-          display: flex;
-          flex-direction: column;
-        }
-
-        #topControls {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-
-        .tour-scheduler > :is(h1, h2) {
-          align-self: unset;
-        }
-
-        /* TODO: this and :disabled is duplicated from Schedule button. make a class,
-      or better a component, for the button styles
-      */
-        button#next {
-          height: 50px;
-          /* width: 74px; */
-          padding: 13px 22px 14px 22px;
-          align-self: flex-start;
-          background: #202020;
-          border: 1px solid #ffffff;
-          border-radius: 10px;
-          font-family: "Helvetica Neue", Arial;
-          font-weight: 700;
-          font-size: 14px;
-          color: #ffffff;
-          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-          margin-top: 22px;
-        }
-
-        button#next:disabled {
-          background: #e7e7e7;
-          box-shadow: none;
-        }
-
-        h1#scheduleATour {
-          grid-row: unset;
-          grid-column: unset;
-          align-self: unset;
-        }
-
-        button#closeButton {
-          grid-row: unset;
-          grid-column: unset;
-          align-self: unset;
-          justify-self: unset;
-        }
-
-        h2 {
-          grid-row: unset;
-          margin-top: 37px;
-          margin-bottom: 25px;
-        }
-
-        #tourTypeMenu {
-          display: flex;
-          flex-direction: column;
-          gap: 15px;
-          margin-bottom: 36px;
-        }
-
-        h2#tourType {
-          grid-column: unset;
-          grid-row: unset;
-        }
-
-        #datePicker {
-          display: flex;
-          flex-direction: column;
-          gap: 18px;
-        }
-
-        time-picker {
-          /* so the Next button doesn't jump when the date is selected and the time slots appear */
-          height: 93px;
-        }
-
-        #dateAndTimeMenu {
-          grid-row: unset;
-          grid-column: unset;
-          align-self: unset;
-          display: unset;
-          flex-direction: unset;
-        }
-
-        #confirmationMessage {
-          grid-row: unset;
-          width: 90%;
-          margin-top: 37px;
-        }
-      }
-    `,
-    InputStyles,
-  ];
+  static styles = [tourSchedulerStyles, InputStyles];
 
   tourTypeMenu(): TemplateResult {
-    return html`<h2 id="tourType">Tour Type</h2>
-      <div id="tourTypeMenu">
+    return html`<h2 class="journey-header">Tour Type</h2>
+      <div id="tour-type-menu">
         ${this.shouldShowTourType[TourType.Guided]
           ? html` <tour-type-option
               heading="Guided tour"
@@ -981,8 +591,8 @@ export class TourScheduler extends LitElement {
       </div>`;
   }
 
-  dateAndTimeMenu(horizontal = false): TemplateResult {
-    return html`<h2 id="dateAndTime">Date and Time</h2>
+  dateAndTimeMenu(): TemplateResult {
+    return html`<h2 class="journey-header">Date and Time</h2>
       <div id="dateAndTimeMenu">
         <div id="datePicker">
           <date-picker
@@ -998,7 +608,6 @@ export class TourScheduler extends LitElement {
           ></date-picker>
           <time-picker
             ?selecteddateexists=${!!this.selectedDate}
-            ?horizontal=${horizontal}
             .options=${this.selectedDate
               ? this.availabilitiesGroupedByDay[
                   format(this.selectedDate, "y-MM-dd")
@@ -1038,7 +647,7 @@ export class TourScheduler extends LitElement {
   }
 
   closeButton(): TemplateResult {
-    return html`<button id="closeButton" @click=${this.onCloseClicked}>
+    return html`<button id="close-button" @click=${this.onCloseClicked}>
       <svg
         width="19"
         height="19"
@@ -1081,7 +690,7 @@ export class TourScheduler extends LitElement {
         this.mobilePageIndex++;
       },
       render: (): TemplateResult => {
-        return html`${this.dateAndTimeMenu(true)}`;
+        return html`${this.dateAndTimeMenu()}`;
       },
     },
     {
@@ -1089,7 +698,7 @@ export class TourScheduler extends LitElement {
       // last page gets <action-confirm-button> instead of the regular button
       nextButtonText: null,
       renderNextButton: (): TemplateResult => html`<action-confirm-button
-        id="schedule"
+        id="schedule-bttn"
         .onClick=${this.submit}
         .isLoading=${this.isSubmitting}
         height="50px"
@@ -1105,7 +714,7 @@ export class TourScheduler extends LitElement {
   ];
 
   userInfoAndLayoutMenu(): TemplateResult {
-    return html`<h2 id="yourInformation">Your information</h2>
+    return html`<h2 class="journey-header">Your Information</h2>
       <div id="yourInformationMenu">
         <div id="namesWrapper">
           <div class="nameContainer" id="firstName">
@@ -1195,7 +804,7 @@ export class TourScheduler extends LitElement {
         <div class="unitLayoutChoices">
         ${
           this.layoutOptions.length > 0
-            ? html`<h2 class="unitLayoutChoice">
+            ? html`<h2 class="what-to-view-subheader">
                 What would you like to view?
               </h2>`
             : ""
@@ -1286,9 +895,8 @@ export class TourScheduler extends LitElement {
             fill="#202020"
           />
         </svg>
+        <p>Thank you!</p>
         <p>
-          Thank you!
-          <br />
           Your
           ${{
             [TourType.Guided]: "guided",
@@ -1325,59 +933,75 @@ export class TourScheduler extends LitElement {
     if (!isMobile()) {
       return html`
         <div
-          class="${classnames("tour-scheduler", {
+          class="${classnames({
+            "tour-scheduler-full": !this.compactDesign,
+            "tour-scheduler-compact": this.compactDesign,
             loading: this.waitingForAvailabilities,
           })}"
           @leadsource="${(e: CustomEvent) =>
             (this.selectedLeadSource = e.detail.selectedLeadSource)}"
         >
-          <h1 id="scheduleATour">
-            ${this.waitingForAvailabilities
-              ? html`${this.loadingIcon()} Searching availabilities...`
-              : "Schedule a tour"}
-          </h1>
-          ${this.closeButton()}
+          <div id="top-header">
+            <h1 id="tour-header-title">
+              ${this.waitingForAvailabilities
+                ? html`${this.loadingIcon()} Searching availabilities...`
+                : "Schedule a Tour"}
+            </h1>
+            ${this.closeButton()}
+          </div>
+
           ${this.tourIsBooked
             ? html`
                 <div class="tour-scheduler">${this.confirmationMessage()}</div>
               `
-            : html`${this.tourTypeMenu()} ${this.dateAndTimeMenu()}
-                ${this.userInfoAndLayoutMenu()}
-                <hr />
-                <p
-                  class=${this.phoneInput?.value || this.emailInput?.value
-                    ? "explanation withDisclaimer"
-                    : "explanation"}
-                >
-                  We’ll send a confirmation and any follow-ups to your email
-                  address.
-                  ${disclaimer({
-                    buildingName: this.buildingName,
-                    phoneNumberInput: this.phoneInput?.value,
-                    emailInput: this.emailInput?.value,
-                  })}
-                </p>
-
-                <action-confirm-button
-                  id="schedule"
-                  .onClick=${this.submit}
-                  .isLoading=${this.isSubmitting}
-                  height="50px"
-                  width="145px"
-                  text="Schedule tour"
-                  ?disabled=${!this.formIsValidForSubmission()}
-                ></action-confirm-button>`}
+            : html`
+                <div id="scheduler-container">
+                  <div id="book-tour-journey-items">
+                    <div id="tour-type-menu-outer-container">
+                      ${this.tourTypeMenu()}
+                    </div>
+                    <div id="date-and-time-menu-outer-container">
+                      ${this.dateAndTimeMenu()}
+                    </div>
+
+                    <div id="user-info-and-layout-menu-outer-container">
+                      ${this.userInfoAndLayoutMenu()}
+                    </div>
+                  </div>
+                </div>
+                <div id="tour-scheduler-footer">
+                  <p class="explanation">
+                    We’ll send a confirmation and any follow-ups to your email
+                    address.
+                    ${disclaimer({
+                      buildingName: this.buildingName,
+                      phoneNumberInput: this.phoneInput?.value,
+                      emailInput: this.emailInput?.value,
+                    })}
+                  </p>
+
+                  <action-confirm-button
+                    id="schedule-bttn"
+                    .onClick=${this.submit}
+                    .isLoading=${this.isSubmitting}
+                    height="50px"
+                    width="145px"
+                    text="Schedule tour"
+                    ?disabled=${!this.formIsValidForSubmission()}
+                  ></action-confirm-button>
+                </div>
+              `}
         </div>
       `;
     } else {
       const currentPage = this.mobilePages[this.mobilePageIndex];
       return html`
         <div
-          class="${classnames("tour-scheduler", {
+          class="${classnames("tour-scheduler-mobile", {
             loading: this.waitingForAvailabilities,
           })}"
         >
-          <div id="topControls">
+          <div id="top-header">
             <h1 id="scheduleATour">
               ${this.waitingForAvailabilities
                 ? html`${this.loadingIcon()} Searching availabilities...`
@@ -1385,31 +1009,34 @@ export class TourScheduler extends LitElement {
             </h1>
             ${this.closeButton()}
           </div>
-          ${this.tourIsBooked
-            ? this.confirmationMessage()
-            : html` ${currentPage.render()}
-              ${!currentPage.renderNextButton
-                ? html` <button
-                    id="next"
-                    @click=${currentPage.nextButtonAction}
-                    ?disabled=${(() => {
-                      return (
-                        !currentPage.validate() || this.waitingForAvailabilities
-                      );
-                    })()}
-                  >
-                    ${currentPage.nextButtonText}
-                  </button>`
-                : currentPage.renderNextButton()}`}
-          ${this.mobilePageIndex + 1 === this.mobilePages.length
-            ? html`
-                ${disclaimer({
-                  buildingName: this.buildingName,
-                  phoneNumberInput: this.phoneInput?.value,
-                  emailInput: this.emailInput?.value,
-                })}
-              `
-            : html``}
+          <div id="mobile-body-container">
+            ${this.tourIsBooked
+              ? this.confirmationMessage()
+              : html` ${currentPage.render()}
+                ${!currentPage.renderNextButton
+                  ? html` <button
+                      id="mobile-next-bttn"
+                      @click=${currentPage.nextButtonAction}
+                      ?disabled=${(() => {
+                        return (
+                          !currentPage.validate() ||
+                          this.waitingForAvailabilities
+                        );
+                      })()}
+                    >
+                      ${currentPage.nextButtonText}
+                    </button>`
+                  : currentPage.renderNextButton()}`}
+            ${this.mobilePageIndex + 1 === this.mobilePages.length
+              ? html`
+                  ${disclaimer({
+                    buildingName: this.buildingName,
+                    phoneNumberInput: this.phoneInput?.value,
+                    emailInput: this.emailInput?.value,
+                  })}
+                `
+              : html``}
+          </div>
         </div>
       `;
     }

package/src/WebComponent/Scheduler/tour-type-option.ts

@@ -16,7 +16,7 @@ export class TourTypeOption extends LitElement {
     css`
       .tour-type-option {
         height: 90px;
-        width: 200px;
+        width: 100%;
         background: #e7e7e7;
         border: 1px solid #ffffff;
         border-radius: 10px;