@meetelise/chat 1.20.97 → 1.20.99

package/src/WebComponent/Scheduler/tourSchedulerStyles.ts

@@ -0,0 +1,401 @@
+import { css } from "lit";
+
+// the entire tourScheduler needs a complete rework - it's a mess
+export const tourSchedulerStyles = css`
+  * {
+    box-sizing: border-box;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    padding: 0;
+  }
+
+  .tour-scheduler-full,
+  .tour-scheduler-compact,
+  .tour-scheduler-mobile {
+    background: #ffffff;
+    box-shadow: 0px 16px 18px 10px rgba(21, 21, 21, 0.4);
+    border-radius: 10px;
+    font-family: "Helvetica Neue", Arial;
+    color: #202020;
+
+    max-width: 1000px;
+  }
+  .tour-scheduler-full {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    max-width: 1018px;
+  }
+  .tour-scheduler-compact {
+    position: fixed;
+    left: 5%;
+    top: 50%;
+    transform: translate(0%, -50%);
+    width: 100%;
+    max-width: calc(90% - 340px); /* 340px is width of chat popup */
+  }
+  .tour-scheduler-mobile {
+    position: fixed;
+    left: 6px;
+    right: 0;
+    bottom: 0;
+    top: 6px;
+    height: calc(100% - 12px);
+    width: calc(100% - 12px);
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  #mobile-body-container {
+    flex: 1;
+    box-sizing: border-box;
+    padding: 24px;
+  }
+
+  #mobile-next-bttn {
+    height: 50px;
+    padding: 13px 22px 14px 22px;
+    float: right;
+    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;
+    cursor: pointer;
+  }
+  #mobile-next-bttn:disabled {
+    background: #e7e7e7;
+    box-shadow: none;
+  }
+  #schedule-bttn {
+    float: right;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    cursor: pointer;
+  }
+  #top-header {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+
+    box-sizing: border-box;
+    padding-left: 24px;
+    padding-right: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    border-bottom: 1px solid #e7e7e7;
+  }
+  #tour-header-title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  #close-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+  }
+  #scheduler-container {
+    padding: 24px;
+    height: 500px;
+    overflow-y: auto;
+    position: relative;
+  }
+
+  #book-tour-journey-items {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+  }
+  .journey-header {
+    font-size: 14px;
+    font-weight: 600;
+    padding-bottom: 12px;
+  }
+
+  #tour-type-menu-outer-container {
+    width: 220px;
+  }
+  #date-and-time-menu-outer-container {
+    width: calc(70% - 220px);
+  }
+  #user-info-and-layout-menu-outer-container {
+    width: 30%;
+  }
+
+  #tour-type-menu {
+    align-self: start;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  @media screen and (max-width: 1200px) {
+    #book-tour-journey-items {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    #tour-type-menu-outer-container {
+      width: 320px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid #e7e7e7;
+    }
+    #date-and-time-menu-outer-container {
+      width: 320px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid #e7e7e7;
+    }
+    #user-info-and-layout-menu-outer-container {
+      width: 320px;
+      padding-bottom: 64px;
+    }
+
+    #datePicker {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+  }
+
+  /*
+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;
+  }
+
+  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;
+    gap: 8px;
+  }
+
+  #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;
+  }
+
+  .what-to-view-subheader {
+    font-size: 12px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+  .unitLayoutChoice {
+    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;
+  }
+
+  #tour-scheduler-footer {
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #e7e7e7;
+
+    padding-left: 24px;
+    padding-right: 24px;
+    box-sizing: border-box;
+  }
+
+  .explanation {
+    font-weight: 400;
+    font-size: 12px;
+    padding-right: 24px;
+  }
+  #schedule {
+    width: 145px;
+    height: 50px;
+    justify-self: end;
+  }
+
+  #confirmationMessage {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 24px;
+    box-sizing: border-box;
+    gap: 12px;
+  }
+
+  #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%;
+  }
+`;

package/src/WebComponent/launcher/Launcher.ts

@@ -101,6 +101,10 @@ export class Launcher extends LitElement {
   unitOptions: UnitV2[] = [];
   @property({ attribute: false })
   tourTypeOptions: LabeledOption[] = [];
+
+  @property({ attribute: true })
+  showTourNextToChat = false;
+
   @property({ attribute: false })
   onChatTapped: () => void = () => {
     return;
@@ -161,6 +165,14 @@ export class Launcher extends LitElement {
         this.hasSSTEnabled = true;
       }
     }
+
+    // If we have the SST tour popup open next to the chat widget, we want to close it
+    if (
+      (this.isEmailWindowOpen || this.isCallUsWindowOpen) &&
+      this.isSSTWindowOpen
+    ) {
+      this.onCloseSSTWindow();
+    }
   };
 
   attachOnClickToEmailUsWindow = (): void => {
@@ -233,6 +245,13 @@ export class Launcher extends LitElement {
 
   onCloseSSTWindow = (): void => {
     this.isSSTWindowOpen = false;
+    if (this.showTourNextToChat) {
+      this.dispatchEvent(
+        new CustomEvent("closeShowTourNextToChat", {
+          bubbles: true,
+        })
+      );
+    }
   };
 
   renderSSTOption = (): TemplateResult => {
@@ -563,6 +582,9 @@ export class Launcher extends LitElement {
                 buildingId=${this.buildingId}
                 featureFlagShowDropdown="${this.featureFlagShowDropdown}"
                 .buildingName=${this.buildingName}
+                .compactDesign=${this.showTourNextToChat
+                  ? this.showTourNextToChat
+                  : ""}
                 ${ref(this.tourSchedulerRef)}
               ></tour-scheduler>
             </div>`
@@ -581,7 +603,9 @@ export class Launcher extends LitElement {
               </div>
             `
           : ""}
-        ${!this.isCallToActionWindowOpen() ? this.renderActionPills() : ""}
+        ${!this.isCallToActionWindowOpen() && !this.showTourNextToChat
+          ? this.renderActionPills()
+          : ""}
       </div>
     `;
   }

package/src/WebComponent/me-chat.ts

@@ -163,6 +163,9 @@ export class MEChat extends LitElement {
   @state()
   private chatProvider: ChatProviders = ChatProviders.TALKJS;
 
+  @state()
+  private showTourNextToChat = false;
+
   @state()
   private displayPubnubChat = false;
 
@@ -393,6 +396,7 @@ export class MEChat extends LitElement {
     await popup.mount({ show: false });
     popup.on("close", () => {
       this.hideLauncher = false;
+      this.showTourNextToChat = false;
     });
     const talkjsPopupElement = document.querySelector(".__talkjs_popup");
     this.talkjsPopupElement = talkjsPopupElement;
@@ -520,16 +524,26 @@ export class MEChat extends LitElement {
       this.displayPubnubChat = false;
     }
     this.hideLauncher = false;
+    this.showTourNextToChat = false;
 
     this.launcherRef.value?.onClickEmailOption(e);
   };
 
   handleTourClicked = (e: MouseEvent): void => {
-    if (this.chatProvider === ChatProviders.TALKJS) {
-      this.popup?.hide();
-    } else if (this.chatProvider === ChatProviders.PUBNUB) {
-      this.displayPubnubChat = false;
+    if (this.showTourNextToChat) {
+      this.launcherRef.value?.onClickSSTOption(e);
+      return;
     }
+    if (!this.hideLauncher) {
+      if (this.chatProvider === ChatProviders.TALKJS) {
+        this.popup?.hide();
+      } else if (this.chatProvider === ChatProviders.PUBNUB) {
+        this.displayPubnubChat = false;
+      }
+    } else {
+      this.showTourNextToChat = true;
+    }
+
     this.hideLauncher = false;
     this.launcherRef.value?.onClickSSTOption(e);
   };
@@ -540,8 +554,8 @@ export class MEChat extends LitElement {
     } else if (this.chatProvider === ChatProviders.PUBNUB) {
       this.displayPubnubChat = false;
     }
+    this.showTourNextToChat = false;
     this.hideLauncher = false;
-
     this.launcherRef.value?.onClickPhoneOption(e);
   };
 
@@ -587,6 +601,7 @@ export class MEChat extends LitElement {
     e.preventDefault();
     e.stopPropagation();
     this.isMinimized = !this.isMinimized;
+    this.showTourNextToChat = false;
   };
 
   render(): TemplateResult {
@@ -615,6 +630,7 @@ export class MEChat extends LitElement {
                   .onClickExit=${() => {
                     this.displayPubnubChat = false;
                     this.hideLauncher = false;
+                    this.showTourNextToChat = false;
                   }}
                   .onMount=${() => {
                     this.adjustTopHeaderContactCoords();
@@ -623,7 +639,7 @@ export class MEChat extends LitElement {
                 ></pubnub-chat>
                 ${this.renderChatAdditionalActions(
                   "chatAdditionalActionsPubnub",
-                  showChatAdditionalActions
+                  showChatAdditionalActions || this.showTourNextToChat
                 )}
               `
             : ""
@@ -673,6 +689,11 @@ export class MEChat extends LitElement {
                   .leadSources="${this.leadSources ?? []}"
                   escortedToursLink="${this.building?.escortedToursLink ?? ""}"
                   virtualToursLink="${this.building?.virtualToursLink ?? ""}"
+                  .showTourNextToChat="${this.showTourNextToChat ?? ""}"
+                  @closeShowTourNextToChat=${() => {
+                    this.showTourNextToChat = false;
+                    this.hideLauncher = true;
+                  }}
                   ?hidden=${this.hideLauncher}
                   ?hasCallUsEnabled=${!this.building?.chatWidgets
                     ? true
@@ -699,7 +720,7 @@ export class MEChat extends LitElement {
           this.chatProvider === ChatProviders.TALKJS
             ? this.renderChatAdditionalActions(
                 "chatAdditionalActionsTalkjs",
-                showChatAdditionalActions
+                showChatAdditionalActions || this.showTourNextToChat
               )
             : ""
         }
@@ -748,6 +769,7 @@ export class MEChat extends LitElement {
           } else if (this.chatProvider === ChatProviders.TALKJS) {
             this.popup?.hide();
           }
+          this.showTourNextToChat = false;
           this.hideLauncher = false;
         }}
       ></minimize-expand-button>

package/src/WebComponent/me-select.ts

@@ -93,7 +93,7 @@ export class MESelect extends LitElement {
       ul {
         padding-left: 0;
         margin-bottom: 0;
-        max-height: 200px;
+        max-height: 140px;
         overflow-y: scroll;
         position: absolute;
         min-height: 40px;
@@ -113,6 +113,10 @@ export class MESelect extends LitElement {
         font-family: "Helvetica Neue", Arial;
       }
 
+      #outer-select-container {
+        position: relative;
+      }
+
       #select {
         width: -webkit-fill-available;
         display: flex;
@@ -170,7 +174,7 @@ export class MESelect extends LitElement {
   };
   render(): TemplateResult {
     return html`
-      <div>
+      <div id="outer-select-container">
         <div
           id="select"
           class="webchat-input"

package/src/WebComponent/pubnub-chat-styles.ts

@@ -168,7 +168,8 @@ export const pubnubChatStyles = css`
   }
 
   #footer {
-    height: 70px;
+    min-height: 70px;
+    max-height: 200px;
     width: 100%;
     background: black;
 
@@ -181,8 +182,13 @@ export const pubnubChatStyles = css`
     z-index: 100001;
   }
   #message-input {
-    height: 40px;
     width: 100%;
+    height: auto;
+    max-height: 100%;
+
+    resize: none;
+
+    font-family: inherit;
     box-sizing: border-box;
     font-weight: 300;
     font-size: 14px;
@@ -190,6 +196,9 @@ export const pubnubChatStyles = css`
     border: none;
     color: white;
     background: none;
+
+    padding-right: 6px; /* width of the scrollbar */
+    box-sizing: border-box;
     z-index: 1000000000000000000000000001;
   }
   #message-input:focus {

package/src/WebComponent/pubnub-chat.ts

@@ -36,7 +36,7 @@ export class PubnubChat extends LitElement {
   onMount: () => void = () => ({});
 
   @query("#message-input", true)
-  messageInput!: HTMLInputElement;
+  messageInput!: HTMLTextAreaElement;
 
   @query("#conversation-body", true)
   messageBody!: HTMLDivElement;
@@ -63,6 +63,7 @@ export class PubnubChat extends LitElement {
 
   sendMessage = async (message: string): Promise<void> => {
     this.messageInput.value = "";
+    this.autoResizeMessageInput();
     await this.myPubnub?.sendMessage(message);
   };
   firstUpdated(): void {
@@ -87,6 +88,11 @@ export class PubnubChat extends LitElement {
     this.scrollToChatBottom();
   }
 
+  autoResizeMessageInput = (): void => {
+    this.messageInput.style.height = "auto";
+    this.messageInput.style.height = this.messageInput.scrollHeight + "px";
+  };
+
   render(): TemplateResult {
     if (!this.buildingSlug || !this.building) {
       return html``; // error here
@@ -167,13 +173,18 @@ export class PubnubChat extends LitElement {
           </ul>
         </div>
         <div id="footer">
-          <input
+          <textarea
             id="message-input"
             placeholder="Ask a question..."
             @keydown=${(e: KeyboardEvent) => {
-              if (e.key === "Enter") this.sendMessage(this.messageInput.value);
+              if (e.key === "Enter") {
+                e.preventDefault();
+                this.sendMessage(this.messageInput.value);
+              }
             }}
-          />
+            @input=${() => this.autoResizeMessageInput()}
+            rows="1"
+          ></textarea>
           <button
             id="send-message-bttn"
             @click=${() => this.sendMessage(this.messageInput.value)}