@meetelise/chat 1.35.0 → 1.35.2

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

@@ -0,0 +1,467 @@
+import axios from "axios";
+import { css, html, LitElement, TemplateResult } from "lit";
+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 { isMobile } from "../../utils";
+import { PhoneOutlineIcon } from "../icons/PhoneOutlineIcon";
+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: "Helvetica Neue", Arial;
+        font-style: normal;
+        color: 11ee1e;
+        font-size: 14px;
+      }
+      .call-us-window__header {
+        font-family: "Helvetica Neue", Arial;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 140%;
+        font-size: 14px;
+        margin: 0;
+      }
+
+      .call-us-window__call-us-text {
+        margin: 0 0 10px;
+      }
+
+      .call-us-window__phone-redirect {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-bottom: 28px;
+        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-wrapper {
+        margin: 0 0 16px;
+      }
+
+      .call-us-window__oh-header {
+        line-height: 32px;
+        font-weight: 400;
+      }
+      .call-us-window__day-of-week-wrapper {
+        font-weight: 400;
+        line-height: 22px;
+        color: #202020;
+      }
+
+      .call-us-window__day-of-week {
+        width: 100px;
+        text-transform: Capitalize;
+      }
+
+      .call-us-window__day-of-week-wrapper {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+      }
+
+      .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()
+  phoneNumberToCall = "";
+
+  @property()
+  phoneNumberToText = "";
+
+  @property({ attribute: false })
+  buildingId = 0;
+  @property({ attribute: false })
+  buildingName = "";
+  @property({ attribute: true })
+  chatCallUsHeader = "";
+
+  @property({ attribute: true })
+  hasCallUsEnabled = "";
+
+  @property({ attribute: true })
+  hasTextUsEnabled = "";
+
+  @property({ attribute: true })
+  currentLeadSource = "";
+
+  @property({ attribute: true })
+  orgLegalName = "";
+
+  @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: (
+    | string
+    | { 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 =
+      rawNumber.length < 11 ? `1${rawNumber}` : rawNumber;
+    const formattedInternationalNumber = `+${
+      rawInternationalNumber[0]
+    }-${rawInternationalNumber.slice(1, 4)}-${rawInternationalNumber.slice(
+      4,
+      7
+    )}-${rawInternationalNumber.slice(7)}`;
+    return html`<a href="tel:${formattedInternationalNumber}"
+      >${phoneNumber}</a
+    >`;
+  };
+
+  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">
+        ${this.orgSlug === "greystar"
+          ? html`By providing your phone number and clicking send, you consent
+              to receive recurring marketing calls and voice and text messages
+              from Greystar or on its behalf at this number using artificial
+              voice and/or an autodialer. Messages may be AI or human-generated.
+              Your phone number and communications are shared with and recorded
+              and used by EliseAI. You are not required to provide your phone
+              number or consent to these terms to lease at this property. Msg &
+              Data rates may apply. You consent to
+              <a
+                href="https://www.greystar.com/privacy"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Greystar's Global Privacy Policy</a
+              >
+              and
+              <a
+                href="http://bit.ly/me_privacy_policy"
+                target="_blank"
+                rel="noopener noreferrer"
+                >EliseAI's Privacy Policy</a
+              >.`
+          : html`By providing your number and clicking send, you consent to
+              receive recurring marketing calls and voice and text messages from
+              or on behalf of ${this.orgLegalName} at this number using
+              artificial voice or an autodialer system. Messages 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 number and communications recorded and
+              used 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"}
+        .onCloseClick=${this.onCloseClicked}
+      >
+        ${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">
+                ${PhoneOutlineIcon("black")}
+                ${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
+          ? this.hasSubmittedForm
+            ? this.renderSubmittedTextUsOption()
+            : this.renderFormTextUsOption()
+          : ""}
+      </details-window>
+    `;
+  };
+}
+
+export const installCallUsWindow = (): void => {
+  if (!window.customElements.get("call-us-window")) {
+    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/collapse-expand-button.ts

@@ -0,0 +1,65 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { defaultPrimaryColor } from "../../themes";
+import { ChevronLeftIcon } from "../icons/ChevronLeftIcon";
+import { ChevronRightIcon } from "../icons/ChevronRightIcon";
+
+@customElement("collapse-expand-button")
+export class CollapseExpandButton extends LitElement {
+  static styles = [
+    css`
+      .button-container {
+        width: 36px;
+        height: 36px;
+        background: #ffffff;
+        border: 1px solid rgba(95, 95, 95, 0.2);
+        border-radius: 1000px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+      .inner-container {
+        width: 30px;
+        height: 30px;
+        border-radius: 1000px;
+        border: 1px solid rgba(255, 255, 255, 0.7);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .button-container:hover {
+        filter: brightness(90%);
+      }
+    `,
+  ];
+
+  @property({ attribute: true })
+  onClick: () => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  primaryColor: string = defaultPrimaryColor;
+
+  @property({ attribute: true })
+  toExpand = false;
+
+  render(): TemplateResult {
+    return html`
+      <div class=${"button-container"} @click=${this.onClick}>
+        <div
+          class="inner-container"
+          style=${styleMap({
+            background: this.primaryColor,
+          })}
+        >
+          ${this.toExpand
+            ? ChevronRightIcon("black")
+            : ChevronLeftIcon("black")}
+        </div>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,150 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { isMobile } from "../../utils";
+
+@customElement("details-window")
+export class DetailsWindow extends LitElement {
+  static styles = css`
+    .details-window-wrapper {
+      background: rgba(255, 255, 255, 0.9);
+      box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.25);
+      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 {
+      background: rgba(0, 0, 0 0.75);
+      border-width: 3px 0px 3px 3px;
+      border-style: solid;
+      border-color: #ffffff;
+      box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.25);
+      border-radius: 10px 0px 0px 10px;
+      padding: 16px;
+      display: block;
+      background: linear-gradient(
+        154.34deg,
+        rgba(255, 255, 255, 1) 0.55%,
+        rgba(0, 0, 0, 1) 160.1%
+      );
+    }
+    .details-window-header {
+      display: flex;
+      justify-content: space-between;
+    }
+    .header-text {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 22px;
+
+      font-family: "Helvetica", Arial;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 140%;
+
+      color: #202020;
+      margin-bottom: 14px;
+    }
+
+    @media screen and (max-width: 767px) {
+      .details-window-wrapper {
+        border-radius: 0px 0px 0px 0px;
+      }
+    }
+  `;
+  @property({ type: String })
+  height = "425px";
+
+  @property({ type: String })
+  width = "326px";
+
+  @property({ type: Boolean })
+  useRoundedBorders = true;
+
+  @property({ type: String })
+  headerText = "";
+
+  @property({ attribute: false })
+  onCloseClick?: (e: MouseEvent) => void;
+
+  @state()
+  isMobileSized = false;
+
+  @property({ attribute: true })
+  useGradientDesign = false;
+
+  async firstUpdated(): Promise<void> {
+    // Give the browser a chance to paint
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    this.isMobileSized = isMobile();
+    window.addEventListener("resize", () => {
+      this.isMobileSized = isMobile();
+    });
+  }
+
+  render(): TemplateResult {
+    return html`
+      <div
+        id="details-window-inner"
+        class="details-window-wrapper"
+        style=${styleMap({
+          width: this.isMobileSized ? "-webkit-fill-available" : this.width,
+        })}
+      >
+        <div class="details-window-header">
+          ${this.headerText
+            ? html` <div class="header-text">${this.headerText}</div>`
+            : ""}
+          ${this.onCloseClick
+            ? html`<div @click=${this.onCloseClick} class="close-window-button">
+                <svg
+                  width="19"
+                  height="19"
+                  viewBox="0 0 19 19"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <line
+                    x1="0.986863"
+                    y1="18.2746"
+                    x2="18.2929"
+                    y2="0.968589"
+                    stroke="#202020"
+                    stroke-width="2"
+                  />
+                  <path
+                    d="M1.01394 0.999974L18.0103 18.0242"
+                    stroke="#202020"
+                    stroke-width="2"
+                  />
+                </svg>
+              </div>`
+            : ""}
+        </div>
+        <slot class="details-window__slot-content"></slot>
+      </div>
+    `;
+  }
+}
+
+export const installDetailsWindow = (): void => {
+  if (!window.customElements.get("details-window")) {
+    window.customElements.define("details-window", DetailsWindow);
+  }
+};