@meetelise/chat 1.20.113 → 1.20.115

package/public/dist/index.js.LICENSE.txt

@@ -39,6 +39,12 @@ object-assign
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
 /**
  * @license
  * Copyright 2020 Google LLC

package/src/MEChat.ts

@@ -1,12 +1,11 @@
 import axios from "axios";
 import { StyleInfo } from "lit/directives/style-map";
-import { ThemeIdString } from "./themes";
-import { tintColor } from "./utils";
 import "./WebComponent/me-chat";
 import { MEChat as MEChatLitElement } from "./WebComponent/me-chat";
 import fetchBuildingInfo from "./fetchBuildingInfo";
 import { fetchFeatureFlagUseOverrideContactUsForm } from "./fetchFeatureFlag";
 import fetchCurrentParsedLeadSource from "./fetchCurrentParsedLeadSource";
+import { tintColor } from "./themes";
 
 /**
  * The interface to MeetElise chat.
@@ -42,7 +41,6 @@ export default class MEChat {
       this.hasBuildingSlug = !!opts.building;
     }
     installFont();
-    installTalkjsMobileStyleFix();
     const meChat = document.createElement("me-chat");
     meChat.setAttribute("orgSlug", opts.organization);
     this.handleBuildingslug(meChat, opts.building);
@@ -51,15 +49,6 @@ export default class MEChat {
     meChat.setAttribute("aria-label", "EliseAI Widget");
     meChat.setAttribute("aria-describedby", "aria-describe-info");
     meChat.setAttribute("aria-modal", "true");
-    if (opts.themeId) {
-      meChat.setAttribute("themeId", opts.themeId);
-    }
-    if (opts.avatarSrc) {
-      meChat.setAttribute("avatarSrc", opts.avatarSrc);
-    }
-    if (opts.mini !== undefined) {
-      meChat.useMiniWidget = opts.mini;
-    }
     if (opts.launcherStyles) {
       meChat.launcherStyles = opts.launcherStyles;
     }
@@ -154,7 +143,6 @@ export default class MEChat {
 export interface Options {
   building: string;
   organization: string;
-  themeId?: ThemeIdString;
   avatarSrc?: string;
   mini?: boolean;
   launcherStyles?: StyleInfo;
@@ -169,16 +157,6 @@ const installFont = () => {
   document.head.appendChild(link);
 };
 
-const installTalkjsMobileStyleFix = () => {
-  const metaTag = document.createElement("meta");
-  metaTag.setAttribute("name", "viewport");
-  metaTag.setAttribute(
-    "content",
-    "width=device-width, initial-scale=1, maximum-scale=2"
-  );
-  document.head.appendChild(metaTag);
-};
-
 const findElementById = (priorityIds: string[]): HTMLElement | null => {
   for (const id of priorityIds) {
     const element = document.getElementById(id);
@@ -392,6 +370,7 @@ const logContactUsFormError = (
     orgSlug,
     buildingSlug,
     reason,
+    url: window.location.href,
   });
 
   fetch(url, {

package/src/MyPubnub.ts

@@ -439,7 +439,10 @@ class MyPubnub {
       return false;
     }
 
-    const expirationDate = addHours(new Date(), this.ttlHours);
+    const expirationDate = addHours(
+      storageValueDeconstructed.timestamp,
+      this.ttlHours
+    );
     return isBefore(storageValueDeconstructed.timestamp, expirationDate);
   };
 }

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

@@ -1,12 +1,22 @@
+import axios from "axios";
 import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref, Ref } from "lit/directives/ref.js";
+import { pushGtmEvent } from "../../gtm";
 import { PhoneBlackStrokeIcon } from "../../svgIcons";
 
 import { getOfficeHourText } from "../OfficeHours";
+import {
+  formatToPhoneInput,
+  isModifierKey,
+  isNumericInput,
+} from "./formatPhoneNumber";
+import { InputStyles } from "./InputStyles";
 
 @customElement("call-us-window")
 export class CallUsWindow extends LitElement {
   static styles = [
+    InputStyles,
     css`
       #call-us-window__content-wrapper {
         font-family: "Helvetica Neue", Arial;
@@ -73,30 +83,88 @@ export class CallUsWindow extends LitElement {
         text-transform: lowercase;
         text-align: right;
       }
+
+      .text-us-wrapper {
+        margin-top: 33px;
+        color: #202020;
+      }
+      .text-us-window__header {
+        font-family: "Helvetica Neue", Arial;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 140%;
+        font-size: 14px;
+        margin: 0;
+      }
+
+      .text-us-window__input-container {
+        margin-top: 8px;
+        margin-bottom: 8px;
+        width: -webkit-fill-available;
+        position: relative;
+      }
+      .text-us-window__submit-text {
+        position: absolute;
+        top: 14px;
+        right: 6px;
+      }
+      .text-us-window__vertical-spacer {
+        height: 20px;
+      }
+      .text-us-window__description,
+      .text-us-window__error {
+        font-family: "Helvetica Neue", Arial;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 14px;
+      }
+
+      .text-us-window__error {
+        color: rgb(255, 49, 3);
+      }
     `,
   ];
 
+  @property({ attribute: true })
+  buildingSlug = "";
+  @property({ attribute: true })
+  orgSlug = "";
+
   @property({ attribute: false })
   onCloseClicked?: (e: MouseEvent) => void;
 
   @property()
-  phoneNumber = "1-855-531-5131";
+  phoneNumberToCall = "1-855-531-5131";
+
+  @property()
+  phoneNumberToText = "";
+
   @property({ attribute: false })
   buildingId = 0;
   @property({ attribute: true })
   chatCallUsHeader = "";
+
+  @property({ attribute: true })
+  hasCallUsEnabled = "";
+
   @property({ attribute: true })
   hasTextUsEnabled = "";
 
   @property({ attribute: true })
   currentLeadSource = "";
 
-  firstUpdated = async (): Promise<void> => {
-    if (!this.buildingId) {
-      return;
-    }
-    this.officeHoursTextInfo = await getOfficeHourText(this.buildingId);
-  };
+  phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
+
+  @state()
+  hasSubmittedForm = false;
+  @state()
+  hasPhoneNumberError = false;
+  @state()
+  hasSubmissionError = false;
+
+  @state()
+  submittingTextUsOption = false;
 
   @property({ attribute: false })
   officeHoursTextInfo: (
@@ -104,6 +172,11 @@ export class CallUsWindow extends LitElement {
     | { dayOfWeek: string; startTime: string; endTime: string }
   )[] = [];
 
+  firstUpdated = async (): Promise<void> => {
+    if (!this.buildingId || !this.hasCallUsEnabled) return;
+    this.officeHoursTextInfo = await getOfficeHourText(this.buildingId);
+  };
+
   getCallLink = (phoneNumber: string): TemplateResult => {
     const rawNumber = (phoneNumber.match(/\d+/g) || []).join("");
     const rawInternationalNumber =
@@ -119,6 +192,126 @@ export class CallUsWindow extends LitElement {
     >`;
   };
 
+  enforcePhoneFormat = (e: KeyboardEvent): void => {
+    if (!isNumericInput(e) && !isModifierKey(e)) {
+      e.preventDefault();
+    }
+  };
+  onSubmitTextUs = async (): Promise<void> => {
+    this.hasPhoneNumberError = false;
+    this.hasSubmissionError = false;
+    if (!this.phoneNumberToText || this.phoneNumberToText.length !== 14) {
+      this.hasPhoneNumberError = true;
+    }
+    if (this.hasPhoneNumberError) {
+      return;
+    }
+    try {
+      this.submittingTextUsOption = true;
+      await createTextWithUs(
+        this.phoneNumberToText,
+        this.buildingId,
+        this.orgSlug,
+        this.buildingSlug,
+        [
+          ...new Set(
+            this.currentLeadSource
+              ? [this.currentLeadSource, "property-website"]
+              : ["property-website"]
+          ),
+        ]
+      );
+      this.hasSubmittedForm = true;
+      this.submittingTextUsOption = false;
+    } catch (e) {
+      this.submittingTextUsOption = false;
+      this.hasSubmissionError = true;
+    }
+  };
+
+  onChangePhoneNumber = (e: Event): void => {
+    if (!e.target || !this.phoneNumberInputRef.value) {
+      return;
+    }
+    if (isModifierKey(e as KeyboardEvent)) {
+      return;
+    }
+    const inputElement = e.target as HTMLInputElement;
+
+    this.phoneNumberToText = formatToPhoneInput(inputElement.value);
+
+    this.phoneNumberInputRef.value.value = this.phoneNumberToText;
+  };
+
+  private renderFormTextUsOption = (): TemplateResult => {
+    return html` <div class="text-us-wrapper">
+      <h1 class="text-us-window__header">Send Us a Text</h1>
+      <div class="text-us-window__input-container">
+        <input
+          ${ref(this.phoneNumberInputRef)}
+          maxlength="14"
+          type="text"
+          placeholder="Enter phone"
+          inputmode="tel"
+          class="webchat-input text-us-window__input-container"
+          .value=${this.phoneNumberToText}
+          @keydown=${this.enforcePhoneFormat}
+          @keyup=${this.onChangePhoneNumber}
+        />
+        <div class="text-us-window__submit-text">
+          <action-confirm-button
+            .onClick=${this.onSubmitTextUs}
+            .isLoading=${this.submittingTextUsOption}
+            text="SEND"
+          ></action-confirm-button>
+        </div>
+        ${this.hasPhoneNumberError
+          ? html`
+              <div class="text-us-window__error">
+                Enter a valid phone number
+              </div>
+            `
+          : ""}
+      </div>
+
+      <div class="text-us-window__description">
+        By entering your number and selecting Send, you consent to be contacted
+        by our AI Leasing Assistant. Your consent to this process is not a
+        requirement for leasing at our property.
+        <div class="text-us-window__description">
+          Message and data rates may apply.
+        </div>
+      </div>
+    </div>`;
+  };
+
+  private renderSubmittedTextUsOption = (): TemplateResult => {
+    return html`
+      <div class="text-us-wrapper">
+        <div class="text-us-window__vertical-spacer"></div>
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.455 16L0 19.5V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0H19C19.2652 0 19.5196 0.105357 19.7071 0.292893C19.8946 0.48043 20 0.734784 20 1V15C20 15.2652 19.8946 15.5196 19.7071 15.7071C19.5196 15.8946 19.2652 16 19 16H4.455ZM2 15.385L3.763 14H18V2H2V15.385ZM10 7V4L14 8L10 12V9H6V7H10Z"
+            fill="#202020"
+          />
+        </svg>
+        <div class="text-us-window__description">
+          Thank you!<br />Look for a text message from our team. We can answer
+          questions and help you book a tour through text.
+        </div>
+        <div class="text-us-window__description">
+          Opt out at anytime by texting “Stop”
+        </div>
+      </div>
+    `;
+  };
+
   render = (): TemplateResult => {
     return html`
       <details-window
@@ -126,43 +319,46 @@ export class CallUsWindow extends LitElement {
         headerText="${this.chatCallUsHeader}"
         .onCloseClick=${this.onCloseClicked}
       >
-        <div id="call-us-window__content-wrapper">
-          <h1 class="call-us-window__call-us-text call-us-window__header">
-            Contact Our Leasing Team
-          </h1>
-          <div class="call-us-window__phone-redirect">
-            ${PhoneBlackStrokeIcon} ${this.getCallLink(this.phoneNumber)}
-          </div>
-          <div class="call-us-window__office-hours-wrapper">
-            <h1 class="call-us-window__oh-header call-us-window__header">
-              Office Hours
-            </h1>
-            ${this.officeHoursTextInfo.map((oh) => {
-              if (typeof oh === "string") {
-                return html`
-                  <div class="call-us-window__day-of-week-wrapper">
-                    <div class="call-us-window__day-of-week">${oh}</div>
-                    <div class="call-us-window__closed">Closed</div>
-                  </div>
-                `;
-              }
-              return html`
-                <div class="call-us-window__day-of-week-wrapper">
-                  <div class="call-us-window__day-of-week">${oh.dayOfWeek}</div>
-                  <div class="call-us-window__open-times">
-                    ${oh.startTime}&nbsp;&ndash;&nbsp;${oh.endTime}
-                  </div>
-                </div>
-              `;
-            })}
-          </div>
-        </div>
+        ${this.hasCallUsEnabled
+          ? html` <div id="call-us-window__content-wrapper">
+              <h1 class="call-us-window__call-us-text call-us-window__header">
+                Contact Our Leasing Team
+              </h1>
+              <div class="call-us-window__phone-redirect">
+                ${PhoneBlackStrokeIcon}
+                ${this.getCallLink(this.phoneNumberToCall)}
+              </div>
+              <div class="call-us-window__office-hours-wrapper">
+                <h1 class="call-us-window__oh-header call-us-window__header">
+                  Office Hours
+                </h1>
+                ${this.officeHoursTextInfo.map((oh) => {
+                  if (typeof oh === "string") {
+                    return html`
+                      <div class="call-us-window__day-of-week-wrapper">
+                        <div class="call-us-window__day-of-week">${oh}</div>
+                        <div class="call-us-window__closed">Closed</div>
+                      </div>
+                    `;
+                  }
+                  return html`
+                    <div class="call-us-window__day-of-week-wrapper">
+                      <div class="call-us-window__day-of-week">
+                        ${oh.dayOfWeek}
+                      </div>
+                      <div class="call-us-window__open-times">
+                        ${oh.startTime}&nbsp;&ndash;&nbsp;${oh.endTime}
+                      </div>
+                    </div>
+                  `;
+                })}
+              </div>
+            </div>`
+          : ""}
         ${this.hasTextUsEnabled
-          ? html` <text-us-window
-              .buildingId=${this.buildingId}
-              inPopup=${!this.hasTextUsEnabled}
-              currentLeadSource="${this.currentLeadSource}"
-            ></text-us-window>`
+          ? this.hasSubmittedForm
+            ? this.renderSubmittedTextUsOption()
+            : this.renderFormTextUsOption()
           : ""}
       </details-window>
     `;
@@ -174,3 +370,45 @@ export const installCallUsWindow = (): void => {
     window.customElements.define("call-us-window", CallUsWindow);
   }
 };
+
+const createTextWithUs = async (
+  rawPhoneNumber: string,
+  buildingId: number,
+  orgSlug: string,
+  buildingSlug: string,
+  leadSources: string[]
+) => {
+  const formattedPhoneNumber =
+    "+1" +
+    rawPhoneNumber
+      .replace("(", "")
+      .replace(")", "")
+      .replace(" ", "")
+      .replace("-", "");
+  const queryParams = new URLSearchParams(window.location.search);
+  const requestBody = {
+    building_id: buildingId,
+    lead_sources: leadSources,
+    phone_number: formattedPhoneNumber,
+    referrer: document.referrer,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    query_params: Object.fromEntries(queryParams.entries()),
+  };
+  pushGtmEvent("textUsSubmitted", {
+    phone: formattedPhoneNumber,
+    originatingSource:
+      leadSources.find((i) => i !== "property-website") || null,
+  });
+  await axios.post(
+    "https://app.meetelise.com/platformApi/state/create/textMe",
+    requestBody,
+    {
+      headers: {
+        ["building-slug"]: buildingSlug,
+        ["org-slug"]: orgSlug,
+        ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG",
+      },
+    }
+  );
+};