@meetelise/chat 1.21.0 → 1.21.2

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

@@ -1,25 +1,45 @@
+import axios from "axios";
 import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { SimplePhoneIcon } from "../../svgIcons";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { createRef, ref, Ref } from "lit/directives/ref.js";
+import { pushGtmEvent } from "../../gtm";
+import { PhoneBlackStrokeIcon } from "../../svgIcons";
+import { isMobile } from "../../utils";
+import LeadSourceClient, {
+  getDefaultLeadSourceAttribution,
+} from "../LeadSourceClient";
 
 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: Poppins;
+      #call-us-window__content-wrapper {
+        font-family: "Helvetica Neue", Arial;
+        font-style: normal;
         color: 11ee1e;
+        font-size: 14px;
       }
-
-      .call-us-window__call-us-text {
-        font-family: "Helvetica";
+      .call-us-window__header {
+        font-family: "Helvetica Neue", Arial;
         font-style: normal;
         font-weight: 700;
-        font-size: 16px;
-        line-height: 24px;
-        color: #202020;
+        line-height: 140%;
+        font-size: 14px;
+        margin: 0;
+      }
+
+      .call-us-window__call-us-text {
+        margin: 0 0 10px;
       }
 
       .call-us-window__phone-redirect {
@@ -27,26 +47,33 @@ export class CallUsWindow extends LitElement {
         justify-content: flex-start;
         align-items: center;
         margin-bottom: 28px;
-        gap: 5px;
+        gap: 8px;
+
+        color: #202020;
+        font-size: 18px;
+        line-height: 24px;
       }
       .call-us-window__phone-redirect > a {
         color: unset;
         text-decoration: underline;
       }
 
-      .call-us-window__office-hours-header,
-      .call-us-window__day-of-week,
+      .call-us-window__office-hours-wrapper {
+        margin: 0 0 16px;
+      }
+
+      .call-us-window__oh-header {
+        line-height: 32px;
+        font-weight: 400;
+      }
       .call-us-window__day-of-week-wrapper {
-        font-family: "Helvetica";
-        font-style: normal;
         font-weight: 400;
-        font-size: 14px;
         line-height: 22px;
         color: #202020;
       }
 
       .call-us-window__day-of-week {
-        width: 112px;
+        width: 100px;
         text-transform: Capitalize;
       }
 
@@ -57,29 +84,96 @@ export class CallUsWindow extends LitElement {
       }
 
       .call-us-window__open-times {
+        width: 123px;
         text-transform: lowercase;
+        text-align: right;
+      }
+
+      .text-us-wrapper {
+        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 = "";
+
+  @property()
+  phoneNumberToText = "";
+
   @property({ attribute: false })
   buildingId = 0;
+  @property({ attribute: false })
+  buildingName = "";
   @property({ attribute: true })
   chatCallUsHeader = "";
+
+  @property({ attribute: true })
+  hasCallUsEnabled = "";
+
   @property({ attribute: true })
   hasTextUsEnabled = "";
 
-  firstUpdated = async (): Promise<void> => {
-    if (!this.buildingId) {
-      return;
-    }
-    this.officeHoursTextInfo = await getOfficeHourText(this.buildingId);
-  };
+  @property({ attribute: true })
+  currentLeadSource = "";
+
+  @property({ attribute: true })
+  private leadSourceClient: LeadSourceClient | null = null;
+
+  phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
+
+  @state()
+  hasSubmittedForm = false;
+  @state()
+  hasPhoneNumberError = false;
+  @state()
+  hasSubmissionError = false;
+
+  @state()
+  submittingTextUsOption = false;
 
   @property({ attribute: false })
   officeHoursTextInfo: (
@@ -87,6 +181,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 =
@@ -102,48 +201,188 @@ 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,
+                  getDefaultLeadSourceAttribution(this.orgSlug),
+                ]
+              : [getDefaultLeadSourceAttribution(this.orgSlug)]
+          ),
+        ],
+        this.leadSourceClient?.chatId
+      );
+      this.leadSourceClient?.checkAndHandleForLogLeadSource({
+        webchatAction: "text-us",
+        stateId: null,
+      });
+      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=${classMap({
+            ["webchat-input"]: true,
+            ["text-us-window__input-container"]: true,
+            ["webchat-font__desktop"]: !isMobile(),
+            ["webchat-font__mobile"]: isMobile(),
+          })}
+          .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 providing your number and clicking send, you consent to recurring
+        marketing text messages and calls from or for ${this.buildingName} at
+        this number, which may be sent by an autodialer system. Replies may be
+        AI or human generated. This consent is not required to lease at this
+        property. Msg & Data rates may apply. You consent to this
+        <a target="_blank" href="http://bit.ly/me_privacy_policy"
+          >privacy policy</a
+        >, including having your communications recorded by a third party.
+      </div>
+    </div>`;
+  };
+
+  private renderSubmittedTextUsOption = (): TemplateResult => {
+    return html`
+      <div id="text-us-container-focus" 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
+        id="details-window"
         height=${this.hasTextUsEnabled ? "600px" : "443px"}
-        headerText="${this.chatCallUsHeader}"
         .onCloseClick=${this.onCloseClicked}
-        useGradientDesign="true"
       >
-        <div class="call-us-window__content-wrapper">
-          <div class="call-us-window__call-us-text">
-            Contact our leasing team
-          </div>
-          <div class="call-us-window__phone-redirect">
-            ${SimplePhoneIcon} ${this.getCallLink(this.phoneNumber)}
-          </div>
-          <div class="call-us-window__office-hours-wrapper">
-            <div class="call-us-window__office-hours-header">Office hours</div>
-          </div>
-          ${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>
+        ${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>
+              <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}
-            ></text-us-window>`
+          ? this.hasSubmittedForm
+            ? this.renderSubmittedTextUsOption()
+            : this.renderFormTextUsOption()
           : ""}
       </details-window>
     `;
@@ -155,3 +394,47 @@ export const installCallUsWindow = (): void => {
     window.customElements.define("call-us-window", CallUsWindow);
   }
 };
+
+const createTextWithUs = async (
+  rawPhoneNumber: string,
+  buildingId: number,
+  orgSlug: string,
+  buildingSlug: string,
+  leadSources: string[],
+  chatId?: string | null
+) => {
+  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()),
+    conversation_tracking_id: chatId,
+  };
+  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",
+      },
+    }
+  );
+};

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

@@ -1,6 +1,5 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { isMobile } from "../../utils";
 
@@ -8,13 +7,25 @@ import { isMobile } from "../../utils";
 export class DetailsWindow extends LitElement {
   static styles = css`
     .details-window-wrapper {
-      background: rgba(255, 255, 255, 0.75);
+      background: rgba(255, 255, 255, 0.9);
       box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.25);
-      backdrop-filter: blur(10px);
-      font-family: "Poppins";
-      color: #202020;
-      padding: 20px;
+      backdrop-filter: blur(5px);
+      /* Note: backdrop-filter has minimal browser support */
+
       border-radius: 10px 0px 0px 10px;
+      padding: 49px 18px 24px;
+    }
+
+    .close-window-button {
+      position: absolute;
+      top: 22px;
+      right: 20px;
+      cursor: pointer;
+      width: 20px;
+      height: 20px;
+    }
+    .close-window-button:hover {
+      filter: brightness(90%);
     }
 
     .gradient-window-wrapper {
@@ -37,14 +48,17 @@ export class DetailsWindow extends LitElement {
       justify-content: space-between;
     }
     .header-text {
-      font-family: "Helvetica";
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 22px;
+
+      font-family: "Helvetica", Arial;
       font-style: normal;
       font-weight: 700;
-      font-size: 16px;
-      line-height: 24px;
+      font-size: 14px;
+      line-height: 140%;
 
       color: #202020;
-      margin-top: 20px;
       margin-bottom: 14px;
     }
 
@@ -87,18 +101,18 @@ export class DetailsWindow extends LitElement {
   render(): TemplateResult {
     return html`
       <div
-        class=${classMap({
-          ["gradient-window-wrapper"]: this.useGradientDesign,
-          ["details-window-wrapper"]: !this.useGradientDesign,
-        })}
+        id="details-window-inner"
+        class="details-window-wrapper"
         style=${styleMap({
           width: this.isMobileSized ? "-webkit-fill-available" : this.width,
         })}
       >
         <div class="details-window-header">
-          <div class="header-text">${this.headerText}</div>
+          ${this.headerText
+            ? html` <div class="header-text">${this.headerText}</div>`
+            : ""}
           ${this.onCloseClick
-            ? html`<div @click=${this.onCloseClick}>
+            ? html`<div @click=${this.onCloseClick} class="close-window-button">
                 <svg
                   width="19"
                   height="19"