@meetelise/chat 1.20.39 → 1.20.40

package/src/WebComponent/Launcher.ts

@@ -47,6 +47,8 @@ export class Launcher extends LitElement {
   @property()
   phoneNumber = "";
   @property({ attribute: true })
+  chatId = "";
+  @property({ attribute: true })
   chatCallUsHeader = "";
   @property({ attribute: false })
   buildingId = 0;
@@ -58,6 +60,10 @@ export class Launcher extends LitElement {
   sgtUrl = "";
   @property({ attribute: true })
   buildingABTestType = "";
+  @property({ attribute: false })
+  leadSources: string[] = [];
+  @property({ attribute: false })
+  currentLeadSource = "";
   @property({ attribute: true })
   escortedToursLink = "";
   @property({ attribute: true })
@@ -381,6 +387,9 @@ export class Launcher extends LitElement {
         ${this.isEmailWindowOpen
           ? html`<div class="launcher__window-wrapper">
               <email-us-window
+                chatId="${this.chatId}"
+                .leadSources="${this.leadSources}"
+                currentLeadSource="${this.currentLeadSource}"
                 orgSlug="${this.orgSlug}"
                 buildingSlug="${this.buildingSlug}"
                 ${ref(this.emailUsWindowRef)}
@@ -402,11 +411,13 @@ export class Launcher extends LitElement {
         ${this.isSSTWindowOpen
           ? html`<div class="launcher__window-wrapper">
               <tour-scheduler
+                chatId="${this.chatId}"
                 orgSlug="${this.orgSlug}"
                 buildingSlug="${this.buildingSlug}"
                 sgtUrl="${this.sgtUrl}"
                 escortedToursLink="${this.escortedToursLink}"
                 virtualToursLink="${this.virtualToursLink}"
+                .leadSources="${this.leadSources}"
                 .layoutOptions=${this.layoutOptions}
                 .unitOptions=${this.unitOptions}
                 .tourTypeOptions=${this.tourTypeOptions}

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

@@ -8,7 +8,7 @@ import {
 import "./tour-type-option.ts";
 import "./date-picker.ts";
 import "./time-picker.ts";
-import "./me-select.ts";
+import "../me-select.ts";
 import {
   DateWithTimeZoneOffset,
   getAvailabilitiesGroupedByDay,
@@ -17,7 +17,7 @@ import {
 import { TourAvailabilityResponseRankOrderedSupportedTourTypesEnum } from "@meetelise/rest-sdk";
 import { format } from "date-fns";
 import { DatePicker } from "./date-picker";
-import { MESelect } from "./me-select";
+import { MESelect } from "../me-select";
 import { TimePicker } from "./time-picker";
 import { LabeledOption, UnitV2 } from "../../fetchBuildingInfo";
 import { isMobile } from "../../utils";
@@ -28,6 +28,7 @@ import parseISO from "date-fns/parseISO";
 import compareAsc from "date-fns/compareAsc";
 import { InputStyles } from "../actions/InputStyles";
 import { classMap } from "lit/directives/class-map.js";
+import postLeadSources from "../../postLeadSources";
 
 const getHumanReadableLayout = (layout: string) => {
   if (layout == "studio") return "Studio";
@@ -53,6 +54,8 @@ export class TourScheduler extends LitElement {
   unitOptions: UnitV2[] = [];
   @property({ attribute: false })
   tourTypeOptions: LabeledOption[] = [];
+  @property({ attribute: true })
+  chatId = "";
   @property({ type: Number })
   buildingId = 0;
   @property({ attribute: true })
@@ -96,6 +99,9 @@ export class TourScheduler extends LitElement {
   @state()
   private tourIsBooked = false;
 
+  @property({ attribute: false })
+  leadSources: string[] = [];
+
   @query(".nameContainer#firstName input")
   firstNameInput!: HTMLInputElement;
   @query(".nameContainer#lastName input")
@@ -108,6 +114,8 @@ export class TourScheduler extends LitElement {
   unitTypeSelect!: MESelect;
   @query("me-select#layoutType")
   layoutTypeSelect!: MESelect;
+  @query("me-select#leadSource")
+  selectedLeadSource!: MESelect;
 
   firstUpdated = async (): Promise<void> => {
     const availabilitiesExistForTourType =
@@ -308,13 +316,15 @@ export class TourScheduler extends LitElement {
         this.phoneNumber.length === 14
       );
     },
+    leadSource: (): boolean => !!this.selectedLeadSource?.value,
   };
 
   formIsValidForSubmission = (): boolean => {
     const isValid =
       this.validators.tourType() &&
       this.validators.dateAndTime() &&
-      this.validators.leadInfo();
+      this.validators.leadInfo() &&
+      this.validators.leadSource();
     return isValid;
   };
 
@@ -367,6 +377,13 @@ export class TourScheduler extends LitElement {
           ["org-slug"]: this.orgSlug,
         },
       });
+      await postLeadSources({
+        chatId: this.chatId,
+        website: window.location.origin,
+        referrer: document.referrer,
+        buildingSlug: this.buildingSlug,
+        selectedLeadSource: this.selectedLeadSource.value ?? "",
+      });
       this.isSubmitting = false;
       this.tourIsBooked = true;
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -401,7 +418,7 @@ export class TourScheduler extends LitElement {
         /* grid stuff */
         display: grid;
         grid-template-columns: 229px 432px 305px;
-        grid-template-rows: 44px 54px 32px 195px 167px 1px;
+        grid-template-rows: 44px 54px 32px 245px 117px 1px;
       }
 
       @media screen and (max-width: 1000px) {
@@ -503,8 +520,6 @@ export class TourScheduler extends LitElement {
       #yourInformationMenu input {
         width: 100%;
         height: 49px;
-        border: 1px solid #83818e;
-        padding: 13px 11px 14px 11px;
       }
 
       .unitLayoutChoices {
@@ -514,9 +529,15 @@ export class TourScheduler extends LitElement {
         display: flex;
         flex-direction: column;
       }
+      .unitLayoutChoicesDropdowns {
+        display: flex;
+        justify-content: space-between;
+        gap: 6px;
+      }
 
       .unitLayoutChoice {
         margin-bottom: 12px;
+        width: -webkit-fill-available;
       }
 
       h2.unitLayoutChoice {
@@ -1046,92 +1067,126 @@ export class TourScheduler extends LitElement {
           </div>
         </div>
 
-        <div class="inputContainer" id="email">
-          <input
-            class="webchat-input"
-            type="email"
-            inputmode="email"
-            placeholder="Email"
-            name="email"
-            autocomplete="email"
-            .value=${this.email}
-            @input=${this.onChangeEmail}
-          />
+          <div class="inputContainer" id="email">
+            <input
+              class="webchat-input"
+              type="email"
+              inputmode="email"
+              placeholder="Email"
+              name="email"
+              autocomplete="email"
+              .value=${this.email}
+              @input=${this.onChangeEmail}
+            />
+          </div>
+          <div class="inputContainer" id="phone">
+            <input
+              class="webchat-input"
+              type="tel"
+              inputmode="tel"
+              placeholder="Phone"
+              name="phone"
+              autocomplete="tel-national"
+              maxlength="14"
+              .value=${this.phoneNumber}
+              @keydown=${this.handlePhoneKeydown}
+              @keyup=${this.handlePhoneKeyup}
+              @input=${(e: Event) => {
+                if (!e.target) {
+                  return;
+                }
+                this.phoneNumber = formatToPhone(
+                  (e.target as HTMLInputElement).value
+                );
+              }}
+            />
+          </div>
+          <me-select
+          id="leadSource"
+          placeholder="How did you hear about us?"
+          .options="${this.leadSources.map((i) => ({
+            label: i,
+            value: i,
+          }))}"
+          @change=${() => {
+            this.requestUpdate();
+          }}
+          >
+        </me-select>
         </div>
-        <div class="inputContainer" id="phone">
-          <input
-            class="webchat-input"
-            type="tel"
-            inputmode="tel"
-            placeholder="Phone"
-            name="phone"
-            autocomplete="tel-national"
-            maxlength="14"
-            .value=${this.phoneNumber}
-            @keydown=${this.handlePhoneKeydown}
-            @keyup=${this.handlePhoneKeyup}
-            @input=${(e: Event) => {
-              if (!e.target) {
-                return;
-              }
-              this.phoneNumber = formatToPhone(
-                (e.target as HTMLInputElement).value
-              );
-            }}
-          />
+
+
+        
+
+        <div class="unitLayoutChoices">
+        
+        
+        ${
+          this.layoutOptions.length > 0
+            ? html`<h2 class="unitLayoutChoice">
+                What would you like to view?
+              </h2>`
+            : ""
+        }
+        <div class="unitLayoutChoicesDropdowns">
+          ${
+            this.layoutOptions.length > 0
+              ? html`<div class="unitLayoutChoice">
+                  <div class="unitLayoutOptions">
+                    <me-select
+                      id="layoutType"
+                      placeholder="Select layout"
+                      .options="${sortedLayouts(this.layoutOptions).map(
+                        (i) => ({
+                          label: getHumanReadableLayout(i),
+                          value: i,
+                        })
+                      )}"
+                      defaultOption="Studio"
+                      @change=${() => {
+                        // to revalidate the form.
+                        this.requestUpdate();
+                      }}
+                      >Studio
+                    </me-select>
+                  </div>
+                </div>`
+              : ""
+          }
+          ${
+            this.unitOptions.filter(
+              (i) =>
+                !this.layoutTypeSelect ||
+                i.layout === this.layoutTypeSelect.value
+            ).length > 0
+              ? html`
+                  <me-select
+                    id="unitType"
+                    placeholder="Select unit"
+                    .options="${this.unitOptions
+                      .filter(
+                        (i) =>
+                          !this.layoutTypeSelect ||
+                          i.layout === this.layoutTypeSelect.value
+                      )
+                      .map((i) => ({
+                        label: i.name,
+                        value: i.name,
+                      }))}"
+                    defaultOption="Studio"
+                    @change=${() => {
+                      // to revalidate the form
+                      this.requestUpdate();
+                    }}
+                    >Studio
+                  </me-select>
+                `
+              : ""
+          }
+          </div>
+         
+       
         </div>
-      </div>
-      <div class="unitLayoutChoices">
-        ${this.layoutOptions.length > 0
-          ? html`<div class="unitLayoutChoice">
-              <h2 class="unitLayoutChoice">What would you like to view?</h2>
-              <div class="unitLayoutOptions">
-                <me-select
-                  id="layoutType"
-                  placeholder="Select layout"
-                  .options="${sortedLayouts(this.layoutOptions).map((i) => ({
-                    label: getHumanReadableLayout(i),
-                    value: i,
-                  }))}"
-                  defaultOption="Studio"
-                  @change=${() => {
-                    // to revalidate the form.
-                    this.requestUpdate();
-                  }}
-                  >Studio
-                </me-select>
-              </div>
-            </div>`
-          : ""}
-        ${this.unitOptions.filter(
-          (i) =>
-            !this.layoutTypeSelect || i.layout === this.layoutTypeSelect.value
-        ).length > 0
-          ? html`<div class="unitLayoutChoice">
-              <div class="unitLayoutOptions">
-                <me-select
-                  id="unitType"
-                  placeholder="Select unit"
-                  .options="${this.unitOptions
-                    .filter(
-                      (i) =>
-                        !this.layoutTypeSelect ||
-                        i.layout === this.layoutTypeSelect.value
-                    )
-                    .map((i) => ({
-                      label: i.name,
-                      value: i.name,
-                    }))}"
-                  defaultOption="Studio"
-                  @change=${() => {
-                    // to revalidate the form
-                    this.requestUpdate();
-                  }}
-                  >Studio
-                </me-select>
-              </div>
-            </div>`
-          : ""}
       </div> `;
   }
 
@@ -1199,6 +1254,8 @@ export class TourScheduler extends LitElement {
           class="${classnames("tour-scheduler", {
             loading: this.waitingForAvailabilities,
           })}"
+          @leadsource="${(e: CustomEvent) =>
+            (this.selectedLeadSource = e.detail.selectedLeadSource)}"
         >
           <h1 id="scheduleATour">
             ${this.waitingForAvailabilities

package/src/WebComponent/actions/InputStyles.ts

@@ -5,15 +5,15 @@ export const InputStyles = css`
     outline: none;
     color: #202020;
     font-weight: 400;
-    font-size: 14px;
-    line-height: 14px;
+    font-size: 16px;
+    line-height: 16px;
     font-family: "Poppins";
 
     background: #ffffff;
     border-radius: 20px;
     border: none;
     padding: 0px 20px;
-    border: 1px solid #ffffff;
+    border: 1px solid #83818e;
   }
   .webchat-textarea {
     padding: 20px 20px;
@@ -28,7 +28,7 @@ export const InputStyles = css`
   }
 
   .webchat-input::placeholder {
-    opacity: 0.5;
+    color: rgba(32, 32, 32, 0.5);
     font-family: "Poppins";
     font-size: 16px;
   }

package/src/WebComponent/actions/details-window.ts

@@ -37,10 +37,6 @@ export class DetailsWindow extends LitElement {
       justify-content: space-between;
     }
     .header-text {
-      font-weight: 700;
-      font-size: 14px;
-      line-height: 22px;
-
       font-family: "Helvetica";
       font-style: normal;
       font-weight: 700;
@@ -96,7 +92,6 @@ export class DetailsWindow extends LitElement {
           ["details-window-wrapper"]: !this.useGradientDesign,
         })}
         style=${styleMap({
-          height: this.height,
           width: this.isMobileSized ? "-webkit-fill-available" : this.width,
         })}
       >

package/src/WebComponent/actions/email-us-window.ts

@@ -1,9 +1,12 @@
 import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
 import { installActionConfirmButton } from "./action-confirm-button";
 import { installDetailsWindow } from "./details-window";
+import postLeadSources from "../../postLeadSources";
+import "../me-select.ts";
+import { MESelect } from "../me-select";
 import {
   formatToPhone,
   isModifierKey,
@@ -90,9 +93,14 @@ export class EmailUsWindow extends LitElement {
     InputStyles,
   ];
 
+  @property({ attribute: false })
+  leadSources: string[] = [];
+
   @property({ attribute: false })
   onCloseClicked?: (e: MouseEvent) => void;
 
+  @property({ attribute: true })
+  chatId = "";
   @property({ attribute: false })
   buildingId = 0;
   @property({ attribute: true })
@@ -118,6 +126,9 @@ export class EmailUsWindow extends LitElement {
   @state()
   message = "";
 
+  @query("me-select#leadSource")
+  selectedLeadSource!: MESelect;
+
   @state()
   hasNameError = false;
   @state()
@@ -127,6 +138,8 @@ export class EmailUsWindow extends LitElement {
   @state()
   hasMessageError = false;
   @state()
+  hasLeadSourceError = false;
+  @state()
   hasSubmittedForm = false;
   @state()
   windowHeight = 525;
@@ -192,6 +205,7 @@ export class EmailUsWindow extends LitElement {
     this.hasEmailError = false;
     this.hasPhoneNumberError = false;
     this.hasMessageError = false;
+    this.hasLeadSourceError = false;
     this.hasSubmissionError = false;
     if (!this.firstName || !this.lastName) {
       this.hasNameError = true;
@@ -205,6 +219,9 @@ export class EmailUsWindow extends LitElement {
     if (!this.message) {
       this.hasMessageError = true;
     }
+    if (!this.selectedLeadSource || !this.selectedLeadSource.value) {
+      this.hasLeadSourceError = true;
+    }
     this.windowHeight = 525 + 30 * this.getNumErrors();
   };
 
@@ -217,7 +234,8 @@ export class EmailUsWindow extends LitElement {
       this.hasNameError ||
       this.hasEmailError ||
       this.hasPhoneNumberError ||
-      this.hasMessageError
+      this.hasMessageError ||
+      this.hasLeadSourceError
     ) {
       return;
     }
@@ -235,6 +253,13 @@ export class EmailUsWindow extends LitElement {
         this.orgSlug,
         this.buildingSlug
       );
+      postLeadSources({
+        chatId: this.chatId,
+        website: window.location.origin,
+        referrer: document.referrer,
+        buildingSlug: this.buildingSlug,
+        selectedLeadSource: this.selectedLeadSource.value ?? "",
+      });
       this.hasSubmittedForm = true;
       this.isSubmitting = false;
       // Remove the height of the button when it leaves the loading state
@@ -253,6 +278,7 @@ export class EmailUsWindow extends LitElement {
       this.hasEmailError,
       this.hasPhoneNumberError,
       this.hasMessageError,
+      this.hasLeadSourceError,
       this.hasSubmissionError,
     ].filter((v) => v).length;
   };
@@ -298,7 +324,6 @@ export class EmailUsWindow extends LitElement {
       <details-window
         headerText="Email our leasing team"
         .onCloseClick=${this.onCloseClicked}
-        height="${this.windowHeight}px"
         useGradientDesign="true"
       >
         <div class="email-us-wrapper">
@@ -371,6 +396,22 @@ export class EmailUsWindow extends LitElement {
               `
             : ""}
           <div class="email-us__vertical-spacer"></div>
+          <me-select
+            id="leadSource"
+            placeholder="How did you hear about us?"
+            .options="${this.leadSources.map((i) => ({
+              label: i,
+              value: i,
+            }))}"
+            @change=${() => {
+              this.requestUpdate();
+            }}
+          >
+          </me-select>
+          ${this.hasLeadSourceError
+            ? html` <div class="email-us__error-text">Include a source</div> `
+            : ""}
+          <div class="email-us__vertical-spacer"></div>
           <textarea
             placeholder="Message"
             .value=${this.message}

package/src/WebComponent/me-chat.ts

@@ -10,6 +10,7 @@ import { createChatID, getChatID } from "../chatID";
 import createConversation from "../createConversation";
 import fetchBuildingInfo, { Building } from "../fetchBuildingInfo";
 import fetchBuildingABTestType from "../fetchBuildingABTestType";
+import fetchCurrentParsedLeadSource from "../fetchCurrentParsedLeadSource";
 import { getTheme, Theme, ThemeIdString } from "../themes";
 import { isMobile } from "../utils";
 import { installLauncher } from "./Launcher";
@@ -22,6 +23,7 @@ import { getRawAvailabilities } from "../getAvailabilities";
 import { StyleInfo } from "lit/directives/style-map";
 import addMinutes from "date-fns/addMinutes";
 import formatISO from "date-fns/formatISO";
+import fetchLeadSources from "../fetchLeadSources";
 
 export interface Options {
   building: string;
@@ -131,6 +133,10 @@ export class MEChat extends LitElement {
   @state()
   private buildingABTestType: string | null = null;
   @state()
+  private leadSources: string[] | null = null;
+  @state()
+  private currentLeadSource: string | null = null;
+  @state()
   private hasMounted = false;
   @state()
   private hideLauncher = false;
@@ -138,8 +144,6 @@ export class MEChat extends LitElement {
   private isLoading = true;
   @state()
   private talkjsPopupElement: Element | null = null;
-  @state()
-  private myContactHeader: Element | null = null;
 
   private yardiDNIScriptInterval: NodeJS.Timer | null = null;
   launcherRef: Ref<Launcher> = createRef();
@@ -157,6 +161,8 @@ export class MEChat extends LitElement {
     }
     this.building = await fetchBuildingInfo(this.orgSlug, this.buildingSlug);
     const buildingABTest = await fetchBuildingABTestType(this.buildingSlug);
+    this.leadSources = await fetchLeadSources(this.buildingSlug);
+    this.currentLeadSource = await fetchCurrentParsedLeadSource();
 
     this.buildingABTestType = buildingABTest?.abTestType ?? "";
     getRawAvailabilities(this.building.id); // we're not using this here, just want to cache the result
@@ -435,6 +441,7 @@ export class MEChat extends LitElement {
                 .launcherStyles=${this.launcherStyles}
                 .autoOpenChatWidget=${this.building.autoOpenChatWidget ?? false}
                 chatCallUsHeader=${this.building?.chatCallUsHeader ?? ""}
+                chatId="${this.chatId}"
                 phoneNumber="${this.building?.phoneNumber ?? ""}"
                 textColor="${this.theme.chatHeader.textColor}"
                 backgroundColor="${this.theme.chatPaneBackgroundColor}"
@@ -442,6 +449,8 @@ export class MEChat extends LitElement {
                 buildingSlug="${this.buildingSlug}"
                 sgtUrl="${this.building?.sgtUrl ?? ""}"
                 buildingABTestType="${this.buildingABTestType ?? ""}"
+                currentLeadSource="${this.currentLeadSource ?? ""}"
+                .leadSources="${this.leadSources ?? []}"
                 escortedToursLink="${this.building?.escortedToursLink ?? ""}"
                 virtualToursLink="${this.building?.virtualToursLink ?? ""}"
                 ?hidden=${this.hideLauncher}