@meetelise/chat 1.25.0 → 1.25.2

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

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

@@ -1,65 +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 { 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

@@ -1,150 +0,0 @@
-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);
-  }
-};