@meetelise/chat 1.25.0 → 1.25.2

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

@@ -1,555 +0,0 @@
-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

@@ -1,72 +0,0 @@
-/**
- * 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

@@ -1,93 +0,0 @@
-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>
-    `;
-  }
-}