@meetelise/chat 1.30.0 → 1.30.1

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

@@ -0,0 +1,555 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+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 "../me-select.ts";
+import { MESelect } from "../me-select";
+import {
+  formatToPhoneInput,
+  isModifierKey,
+  isNumericInput,
+} from "./formatPhoneNumber";
+import { InputStyles } from "./InputStyles";
+import axios from "axios";
+import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
+import { pushGtmEvent } from "../../gtm";
+import disclaimer from "../../disclaimers";
+import { isMobile } from "../../utils";
+import LeadSourceClient, {
+  getDefaultLeadSourceAttribution,
+} from "../LeadSourceClient";
+
+@customElement("email-us-window")
+export class EmailUsWindow extends LitElement {
+  static styles = [
+    css`
+      .email-us__name-input,
+      .email-us__contact_input,
+      .email-us_message-input {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .email-us__name-input {
+        width: 50%;
+      }
+
+      .email-us__name-wrapper {
+        display: flex;
+        gap: 4px;
+      }
+
+      .email-us__contact-input {
+        width: 100%;
+        width: -webkit-fill-available;
+        width: -moz-available;
+      }
+
+      .email-us__vertical-spacer {
+        margin-top: 8px;
+        margin-bottom: 8px;
+      }
+
+      .action-bttn-container {
+        margin-top: 19px;
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      .email-us__message-input {
+        resize: none;
+        width: 100%;
+        width: -webkit-fill-available;
+        width: -moz-available;
+        height: 159px;
+      }
+
+      .email-us__submitted-info {
+        font-size: 18px;
+        line-height: 24px;
+        color: #202020;
+      }
+
+      .email-us__error-text {
+        margin-top: 4px;
+        font-family: "Helvetica", Arial;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+
+        color: rgb(235, 64, 52);
+      }
+
+      .email-us__center_icon {
+        display: flex;
+        justify-content: center;
+      }
+
+      @media screen and (max-width: 767px) {
+        .email-us__name-input {
+          width: 50%;
+        }
+      }
+    `,
+    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 })
+  buildingSlug = "";
+  @property({ attribute: true })
+  orgSlug = "";
+  @property({ attribute: true })
+  buildingName = "";
+  @property({ attribute: true })
+  orgLegalName = "";
+
+  @property({ attribute: true })
+  private leadSourceClient: LeadSourceClient | null = null;
+
+  @property({ attribute: true })
+  featureFlagShowDropdown = "";
+
+  phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
+
+  @property()
+  privatePolicyUrl = "https://www.meetelise.com/privacy";
+  @property()
+  termsOfServiceUrl = "_blank";
+
+  @state()
+  firstName = "";
+  @state()
+  lastName = "";
+  @state()
+  email = "";
+  @state()
+  phoneNumber = "";
+  @state()
+  message = "";
+
+  @query("me-select#leadSource")
+  selectedLeadSource!: MESelect;
+
+  @property({ attribute: true })
+  currentLeadSource = ""; // the default lead source based on referrer and query params
+
+  @state()
+  hasNameError = false;
+  @state()
+  hasEmailError = false;
+  @state()
+  hasPhoneNumberError = false;
+  @state()
+  hasMessageError = false;
+  @state()
+  hasSubmittedForm = false;
+  @state()
+  windowHeight = 525;
+  @state()
+  hasSubmissionError = false;
+  @state()
+  isSubmitting = false;
+
+  onChangeFirstName = (e: Event): void => {
+    if (!e.target) {
+      return;
+    }
+
+    this.firstName = (e.target as HTMLInputElement).value;
+  };
+
+  onChangeLastName = (e: Event): void => {
+    if (!e.target) {
+      return;
+    }
+
+    this.lastName = (e.target as HTMLInputElement).value;
+  };
+
+  onChangeEmail = (e: Event): void => {
+    if (!e.target) {
+      return;
+    }
+
+    this.email = (e.target as HTMLInputElement).value;
+  };
+
+  onChangePhoneNumber = (e: Event): void => {
+    if (!e.target || !this.phoneNumberInputRef.value) {
+      return;
+    }
+    if (isModifierKey(e as KeyboardEvent)) {
+      return;
+    }
+    const inputElement = e.target as HTMLInputElement;
+
+    this.phoneNumber = formatToPhoneInput(inputElement.value);
+
+    this.phoneNumberInputRef.value.value = this.phoneNumber;
+  };
+
+  onChangeMessage = (e: Event): void => {
+    if (!e.target) {
+      return;
+    }
+
+    this.message = (e.target as HTMLTextAreaElement).value;
+  };
+
+  enforceFormat = (e: KeyboardEvent): void => {
+    if (!isNumericInput(e) && !isModifierKey(e)) {
+      e.preventDefault();
+    }
+  };
+
+  validateFormFields = (): void => {
+    this.hasNameError = false;
+    this.hasEmailError = false;
+    this.hasPhoneNumberError = false;
+    this.hasMessageError = false;
+    this.hasSubmissionError = false;
+    if (!this.firstName || !this.lastName) {
+      this.hasNameError = true;
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!this.email || !emailRegex.test(this.email)) {
+      this.hasEmailError = true;
+    }
+    if (!this.phoneNumber || this.phoneNumber.length !== 14) {
+      this.hasPhoneNumberError = true;
+    }
+    this.windowHeight = 525 + 30 * this.getNumErrors();
+  };
+
+  onClick = async (): Promise<void> => {
+    if (this.isSubmitting) {
+      return;
+    }
+    this.validateFormFields();
+    if (
+      this.hasNameError ||
+      this.hasEmailError ||
+      this.hasPhoneNumberError ||
+      this.hasMessageError
+    ) {
+      return;
+    }
+    try {
+      this.isSubmitting = true;
+      // Height of the button when it's in the loading state
+      this.windowHeight = 525 + 60;
+      const parsedLeadSource =
+        this.selectedLeadSource && this.selectedLeadSource.value
+          ? this.selectedLeadSource.value
+          : this.currentLeadSource;
+      await createEmail(
+        this.firstName,
+        this.lastName,
+        this.email,
+        this.phoneNumber,
+        this.message,
+        this.buildingId,
+        this.orgSlug,
+        this.buildingSlug,
+        [
+          ...new Set(
+            parsedLeadSource
+              ? [
+                  parsedLeadSource,
+                  getDefaultLeadSourceAttribution(this.orgSlug),
+                ]
+              : [getDefaultLeadSourceAttribution(this.orgSlug)]
+          ),
+        ],
+        this.leadSourceClient?.chatId
+      );
+      this.leadSourceClient?.checkAndHandleForLogLeadSource({
+        webchatAction: "email-us",
+        stateId: null,
+      });
+      this.hasSubmittedForm = true;
+      this.isSubmitting = false;
+      // Remove the height of the button when it leaves the loading state
+      this.windowHeight = 525;
+    } catch (e) {
+      this.hasSubmissionError = true;
+      this.isSubmitting = false;
+      // Remove the height of the button when it leaves the loading state
+      this.windowHeight = 525;
+    }
+  };
+
+  getNumErrors = (): number => {
+    return [
+      this.hasNameError,
+      this.hasEmailError,
+      this.hasPhoneNumberError,
+      this.hasMessageError,
+      this.hasSubmissionError,
+    ].filter((v) => v).length;
+  };
+
+  render = (): TemplateResult => {
+    installDetailsWindow();
+    installActionConfirmButton();
+
+    if (this.hasSubmittedForm) {
+      return html`
+        <details-window
+          id="details-window"
+          headerText=""
+          useGradientDesign="true"
+          .onCloseClick=${this.onCloseClicked}
+        >
+          <div class="email-us-wrapper">
+            <div class="email-us__vertical-spacer"></div>
+            <div class="email-us__center_icon">
+              <svg
+                width="22"
+                height="18"
+                viewBox="0 0 22 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M22 17.007C21.9982 17.2696 21.8931 17.521 21.7075 17.7068C21.5219 17.8926 21.2706 17.9979 21.008 18H2.992C2.72881 17.9997 2.4765 17.895 2.29049 17.7088C2.10448 17.5226 2 17.2702 2 17.007V16H20V4.3L12 11.5L2 2.5V1C2 0.734784 2.10536 0.48043 2.29289 0.292893C2.48043 0.105357 2.73478 0 3 0H21C21.2652 0 21.5196 0.105357 21.7071 0.292893C21.8946 0.48043 22 0.734784 22 1V17.007ZM4.434 2L12 8.81L19.566 2H4.434ZM0 12H8V14H0V12ZM0 7H5V9H0V7Z"
+                  fill="#202020"
+                />
+              </svg>
+            </div>
+            <div class="email-us__vertical-spacer"></div>
+            <div class="email-us__submitted-info">
+              Thank you for your message. A member of our leasing team will
+              contact you.
+            </div>
+          </div>
+        </details-window>
+      `;
+    }
+
+    return html`
+      <details-window
+        id="details-window"
+        headerText="Email Our Leasing Team"
+        .onCloseClick=${this.onCloseClicked}
+        height="${this.windowHeight}px"
+      >
+        <div class="email-us-wrapper" id="email-us-form">
+          <div class="email-us__name-wrapper">
+            <input
+              type="text"
+              class=${classMap({
+                ["webchat-input"]: true,
+                ["email-us__name-input"]: true,
+                ["webchat-font__desktop"]: !isMobile(),
+                ["webchat-font__mobile"]: isMobile(),
+              })}
+              placeholder="First name"
+              autocomplete="given-name"
+              value="${this.firstName}"
+              @keyup=${this.onChangeFirstName}
+            />
+            <div class="email-us__horizontal-spacer"></div>
+            <input
+              type="text"
+              class=${classMap({
+                ["webchat-input"]: true,
+                ["email-us__name-input"]: true,
+                ["webchat-font__desktop"]: !isMobile(),
+                ["webchat-font__mobile"]: isMobile(),
+              })}
+              placeholder="Last name"
+              autocomplete="family-name"
+              value="${this.lastName}"
+              @keyup=${this.onChangeLastName}
+            />
+          </div>
+          ${this.hasNameError
+            ? html`
+                <div class="email-us__error-text">Enter your full name</div>
+              `
+            : ""}
+          <div class="email-us__vertical-spacer"></div>
+          <input
+            type="email"
+            placeholder="Email"
+            autocomplete="email"
+            class=${classMap({
+              ["webchat-input"]: true,
+              ["email-us__contact-input"]: true,
+              ["webchat-font__desktop"]: !isMobile(),
+              ["webchat-font__mobile"]: isMobile(),
+            })}
+            .value=${this.email}
+            @keyup=${this.onChangeEmail}
+          />
+          ${this.hasEmailError
+            ? html`
+                <div class="email-us__error-text">
+                  Enter valid email address
+                </div>
+              `
+            : ""}
+          <div class="email-us__vertical-spacer"></div>
+          <input
+            ${ref(this.phoneNumberInputRef)}
+            type="text"
+            placeholder="Phone"
+            autocomplete="tel-national"
+            inputmode="tel"
+            class=${classMap({
+              ["webchat-input"]: true,
+              ["email-us__contact-input"]: true,
+              ["webchat-font__desktop"]: !isMobile(),
+              ["webchat-font__mobile"]: isMobile(),
+            })}
+            .value=${this.phoneNumber}
+            maxlength="14"
+            @keydown=${this.enforceFormat}
+            @keyup=${this.onChangePhoneNumber}
+          />
+          ${this.hasPhoneNumberError
+            ? html`
+                <div class="email-us__error-text">
+                  Enter a valid phone number
+                </div>
+              `
+            : ""}
+          <div class="email-us__vertical-spacer"></div>
+          ${this.leadSources.length > 0 &&
+          (this.featureFlagShowDropdown === FeatureFlagsShowDropdown.always ||
+            (this.featureFlagShowDropdown ===
+              FeatureFlagsShowDropdown.onAttributionFailure &&
+              this.currentLeadSource.length === 0))
+            ? html`
+                <me-select
+                  id="leadSource"
+                  placeholder="How did you hear about us?"
+                  value="${this.currentLeadSource}"
+                  .options="${this.leadSources.map((i) => ({
+                    label: i,
+                    value: i,
+                  }))}"
+                  @change=${() => {
+                    this.requestUpdate();
+                  }}
+                >
+                </me-select>
+              `
+            : ""}
+          <div class="email-us__vertical-spacer"></div>
+          <textarea
+            placeholder="Your message..."
+            .value=${this.message}
+            class=${classMap({
+              ["email-us__message-input"]: true,
+              ["webchat-input"]: true,
+              ["webchat-textarea"]: true,
+              ["webchat-font__desktop"]: !isMobile(),
+              ["webchat-font__mobile"]: isMobile(),
+            })}
+            @keyup=${this.onChangeMessage}
+          ></textarea>
+          ${this.hasMessageError
+            ? html` <div class="email-us__error-text">Include a message</div> `
+            : ""}
+          <div class="action-bttn-container">
+            <action-confirm-button
+              .onClick=${this.onClick}
+              .isLoading=${this.isSubmitting}
+              text="SEND"
+            ></action-confirm-button>
+          </div>
+          ${this.hasSubmissionError
+            ? html`
+                <div class="email-us__error-text">Error submitting message</div>
+              `
+            : ""}
+        </div>
+
+        ${disclaimer({
+          buildingName: this.buildingName,
+          phoneNumberInput: this.phoneNumber,
+          emailInput: this.email,
+          orgLegalName: this.orgLegalName,
+        })}
+      </details-window>
+    `;
+  };
+}
+
+export const installEmailUsWindow = (): void => {
+  if (!window.customElements.get("email-us-window")) {
+    window.customElements.define("email-us-window", EmailUsWindow);
+  }
+};
+
+const createEmail = async (
+  firstName: string,
+  lastName: string,
+  email: string,
+  rawPhoneNumber: string,
+  message: 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 = {
+    email_address: email,
+    building_id: buildingId,
+    lead_sources: leadSources,
+    first_message: message,
+    first_name: firstName,
+    last_name: lastName,
+    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("emailUsSubmitted", {
+    firstName,
+    lastName,
+    email,
+    phone: formattedPhoneNumber,
+    message,
+    originatingSource:
+      leadSources.find((i) => i !== "property-website") || null,
+  });
+  await axios.post(
+    "https://app.meetelise.com/platformApi/state/create/emailMe",
+    requestBody,
+    {
+      headers: {
+        ["building-slug"]: buildingSlug,
+        ["org-slug"]: orgSlug,
+        ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG",
+      },
+    }
+  );
+};

package/src/WebComponent/actions/formatPhoneNumber.ts

@@ -0,0 +1,72 @@
+/**
+ * For now, only handles the US phone number case.....
+ * Formats into phone number as you type
+ */
+export const formatToPhoneInput = (phoneNumber: string): string => {
+  const input = phoneNumber.replace(/\D/g, "").substring(0, 10);
+  const areaCode = input.substring(0, 3);
+  const middle = input.substring(3, 6);
+  const last = input.substring(6, 10);
+
+  if (input.length > 5) {
+    return `(${areaCode}) ${middle}-${last}`;
+  }
+  if (input.length > 2) {
+    return `(${areaCode}) ${middle}`;
+  }
+  if (input.length > 0) {
+    return `(${areaCode}`;
+  }
+  return "";
+};
+
+/**
+ * Formats a phone number into a human-readable format.
+ */
+export const formatPhoneNumber = (phoneNumberString: string): string => {
+  const cleaned = ("" + phoneNumberString).replace(/\D/g, "");
+  const match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
+  if (match) {
+    const intlCode = match[1] ? "+1 " : "";
+    return [intlCode, "(", match[2], ") ", match[3], "-", match[4]].join("");
+  }
+  return phoneNumberString;
+};
+
+export const isNumericInput = (event: KeyboardEvent): boolean => {
+  const key = event.keyCode;
+  return (key >= 48 && key <= 57) || (key >= 96 && key <= 105);
+};
+
+export const isPrintableCharacter = (event: KeyboardEvent): boolean =>
+  event.key.length === 1;
+
+/** Returns true if any key is pressed whose only function when typing text would be as part of a keyboard shortcut.
+ * For example, `Shift` or `f` would not suffice, because these are used for typing text.
+ * But `Command` or `Control` would.
+ */
+export const shortcutKeyIsPressed = (event: KeyboardEvent): boolean =>
+  event.altKey || event.ctrlKey || event.metaKey;
+
+export const isModifierKey = (event: KeyboardEvent): boolean => {
+  const key = event.keyCode;
+  // TODO: whitelisting specific keyboard shortcuts is brittle (e.g. this is missing Cmd + R to reload)
+  // Allow left, up, right, down, Backspace, Tab, Enter, Delete, Ctrl/Command + A,C,L,V,X,Z, Shift, Home, End
+  return (
+    event.shiftKey ||
+    key === 35 ||
+    key === 36 || // Allow
+    key === 8 ||
+    key === 9 ||
+    key === 13 ||
+    key === 46 ||
+    (key > 36 && key < 41) ||
+    ((event.ctrlKey || event.metaKey) &&
+      (key === 65 ||
+        key === 67 ||
+        key === 76 ||
+        key === 86 ||
+        key === 88 ||
+        key === 90))
+  );
+};

package/src/WebComponent/actions/minimize-expand-button.ts

@@ -0,0 +1,93 @@
+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 { ChevronRightIcon } from "../icons/ChevronRightIcon";
+import { XOutlineIcon } from "../icons/XOutlineIcon";
+
+@customElement("minimize-expand-button")
+export class MinimizeExpandButton extends LitElement {
+  static styles = [
+    css`
+      .button-container {
+        width: 56px;
+        height: 56px;
+
+        background: #ffffff;
+        border: 1px solid rgba(95, 95, 95, 0.2);
+        border-radius: 1000px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .mini {
+        width: 36px;
+        height: 36px;
+      }
+      .inner-container {
+        width: 46px;
+        height: 46px;
+
+        border-radius: 1000px;
+        border: 1px solid rgba(255, 255, 255, 0.7);
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+      .mini > .inner-container {
+        width: 30px;
+        height: 30px;
+      }
+      .x-icon,
+      .chevron-up {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 1000px;
+      }
+      .chevron-up {
+        transform: rotate(-90deg);
+      }
+      .button-container:hover {
+        cursor: pointer;
+        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=${this.toExpand ? "button-container mini" : "button-container"}
+        @click=${this.onClick}
+      >
+        <div
+          class="inner-container"
+          style=${styleMap({
+            background: this.primaryColor,
+          })}
+        >
+          ${this.toExpand
+            ? html`<div class="chevron-up">${ChevronRightIcon("white")}</div>`
+            : html` <div class="x-icon">${XOutlineIcon("white")}</div>`}
+        </div>
+      </div>
+    `;
+  }
+}