@meetelise/chat 1.9.1 → 1.12.0

package/src/WebComponent/actions/TextUsWindow.ts

@@ -0,0 +1,226 @@
+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 { installActionConfirmButton } from "./ActionConfirmButton";
+import { installDetailsWindow } from "./DetailsWindow";
+import {
+  formatToPhone,
+  isModifierKey,
+  isNumericInput,
+} from "./formatPhoneNumber";
+import { InputStyles } from "./InputStyles";
+import axios from "axios";
+
+@customElement("text-us-window")
+export class TextUsWindow extends LitElement {
+  static styles = [
+    css`
+      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+      .text-us-wrapper {
+        font-family: "Poppins";
+        color: #202020;
+      }
+
+      .text-us-window__description {
+        font-size: 18px;
+        line-height: 24px;
+        margin-top: 32px;
+      }
+
+      .text-us-window__phone-input {
+        width: -webkit-fill-available;
+        height: 49px;
+      }
+
+      .text-us-window__vertical-spacer {
+        height: 20px;
+      }
+
+      .text-us-window__subtext {
+        font-size: 12px;
+        line-height: 22px;
+      }
+
+      .text-us-window__error {
+        font-size: 10px;
+        line-height: 22px;
+        margin-top: 8px;
+      }
+    `,
+    InputStyles,
+  ];
+
+  @property({ attribute: false })
+  onCloseClicked?: (e: MouseEvent) => void;
+
+  @property({ attribute: false })
+  buildingId = 0;
+
+  phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
+
+  @state()
+  phoneNumber = "";
+  @state()
+  hasSubmittedForm = false;
+  @state()
+  hasPhoneNumberError = false;
+  @state()
+  hasSubmissionError = false;
+  @state()
+  isSubmitting = false;
+
+  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 = formatToPhone(inputElement.value);
+
+    this.phoneNumberInputRef.value.value = this.phoneNumber;
+  };
+
+  enforceFormat = (e: KeyboardEvent): void => {
+    if (!isNumericInput(e) && !isModifierKey(e)) {
+      e.preventDefault();
+    }
+  };
+
+  validateFormFields = (): void => {
+    this.hasPhoneNumberError = false;
+    this.hasSubmissionError = false;
+    if (!this.phoneNumber || this.phoneNumber.length !== 14) {
+      this.hasPhoneNumberError = true;
+    }
+  };
+
+  onClick = async (): Promise<void> => {
+    this.validateFormFields();
+    if (this.hasPhoneNumberError) {
+      return;
+    }
+    try {
+      this.isSubmitting = true;
+      await createTextWithUs(this.phoneNumber, this.buildingId);
+      this.hasSubmittedForm = true;
+      this.isSubmitting = false;
+    } catch (e) {
+      this.isSubmitting = false;
+      this.hasSubmissionError = true;
+    }
+  };
+
+  render = (): TemplateResult => {
+    installDetailsWindow();
+    installActionConfirmButton();
+    if (this.hasSubmittedForm) {
+      return html`
+        <details-window
+          headerText="Text us"
+          .onCloseClick=${this.onCloseClicked}
+        >
+          <div 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__vertical-spacer"></div>
+            <div class="text-us-window__subtext">
+              Opt out at anytime by texting “Stop”
+            </div>
+          </div>
+        </details-window>
+      `;
+    }
+
+    return html`
+      <details-window headerText="Text us" .onCloseClick=${this.onCloseClicked}>
+        <div class="text-us-wrapper">
+          <div class="text-us-window__description">
+            Have questions? <br />
+            Our team can answer via <br />text message.
+          </div>
+          <div class="text-us-window__vertical-spacer"></div>
+          <input
+            ${ref(this.phoneNumberInputRef)}
+            maxlength="14"
+            type="text"
+            placeholder="Phone number"
+            inputmode="tel"
+            class=${classMap({
+              ["webchat-input"]: true,
+              ["text-us-window__phone-input"]: true,
+            })}
+            .value=${this.phoneNumber}
+            @keydown=${this.enforceFormat}
+            @keyup=${this.onChangePhoneNumber}
+          />
+          ${this.hasPhoneNumberError
+            ? html`
+                <div class="text-us-window__error">
+                  Enter a valid phone number
+                </div>
+              `
+            : ""}
+          <div class="text-us-window__vertical-spacer"></div>
+          <action-confirm-button
+            .onClick=${this.onClick}
+            .isLoading=${this.isSubmitting}
+            text="Send"
+          ></action-confirm-button>
+          <div class="text-us-window__vertical-spacer"></div>
+          <div class="text-us-window__subtext">
+            By entering your number and checking the box, you consent to be
+            contacted by our AI Leasing Assistant. Your consent to this process
+            is not a requirement for leasing at our property. Message and data
+            rates may apply.
+          </div>
+        </div>
+      </details-window>
+    `;
+  };
+}
+
+export const installTextUsWindow = (): void => {
+  if (!window.customElements.get("text-us-window")) {
+    window.customElements.define("text-us-window", TextUsWindow);
+  }
+};
+
+const createTextWithUs = async (rawPhoneNumber: string, buildingId: number) => {
+  const formattedPhoneNumber =
+    "+1" +
+    rawPhoneNumber
+      .replace("(", "")
+      .replace(")", "")
+      .replace(" ", "")
+      .replace("-", "");
+  const requestBody = {
+    building_id: buildingId,
+    lead_source: "property-website",
+    phone_number: formattedPhoneNumber,
+  };
+
+  await axios.post(
+    "https://app.meetelise.com/platformApi/state/create/textMe",
+    requestBody,
+    { headers: { ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG" } }
+  );
+};

package/src/WebComponent/actions/formatPhoneNumber.ts

@@ -0,0 +1,42 @@
+/**
+ * For now, only handles the US phone number case.....
+ */
+export const formatToPhone = (phoneNumber: string): string => {
+  const input = phoneNumber.replace(/\D/g, "").substring(0, 10);
+  const zip = input.substring(0, 3);
+  const middle = input.substring(3, 6);
+  const last = input.substring(6, 10);
+
+  if (input.length > 6) {
+    return `(${zip}) ${middle}-${last}`;
+  }
+  if (input.length > 3) {
+    return `(${zip}) ${middle}`;
+  }
+  if (input.length > 0) {
+    return `(${zip}`;
+  }
+  return "";
+};
+
+export const isNumericInput = (event: KeyboardEvent): boolean => {
+  const key = event.keyCode;
+  return (key >= 48 && key <= 57) || (key >= 96 && key <= 105);
+};
+
+export const isModifierKey = (event: KeyboardEvent): boolean => {
+  const key = event.keyCode;
+  // Allow left, up, right, down, Backspace, Tab, Enter, Delete, Ctrl/Command + A,C,V,X,Z, Shift, Home, End
+  return (
+    event.shiftKey === true ||
+    key === 35 ||
+    key === 36 || // Allow
+    key === 8 ||
+    key === 9 ||
+    key === 13 ||
+    key === 46 ||
+    (key > 36 && key < 41) ||
+    ((event.ctrlKey === true || event.metaKey === true) &&
+      (key === 65 || key === 67 || key === 86 || key === 88 || key === 90))
+  );
+};

package/src/WebComponent/inHouseLauncherStyles.ts

@@ -0,0 +1,300 @@
+import { css } from "lit";
+
+export const inHousLauncherStyles = css`
+  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+  :host {
+    --glowBarHeight: 11.2px;
+    --enterAnimationDuration: 0.5s;
+    --desktopZIndex: 100000;
+  }
+
+  @keyframes slideInFromRight {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  .launcher {
+    font-family: Poppins;
+    user-select: none;
+    position: fixed;
+  }
+  .launcher:not(.miniLauncher) {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.8);
+    color: #202020;
+    backdrop-filter: blur(10px);
+    box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25);
+  }
+  .launcher:not(.miniLauncher).in-house-launcher__mobile {
+    width: 100%;
+    bottom: 0px;
+    left: 0px;
+    padding: 5px;
+  }
+  .launcher:not(.miniLauncher).in-house-launcher__desktop {
+    width: 245px;
+    height: 112px;
+    padding-left: 10px;
+  }
+  .launcher.in-house-launcher__desktop {
+    right: 0px;
+    overflow: hidden;
+    border-radius: 10px 0px 0px 10px;
+    bottom: 40px;
+    z-index: 100000;
+  }
+  .launcher.in-house-launcher__desktop.firstMount {
+    animation: slideInFromRight var(--enterAnimationDuration);
+  }
+  .launcher .glowBar {
+    overflow: hidden;
+    background-position: center;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    height: 11.2px;
+    width: 100%;
+    object-fit: fill;
+    border-top-left-radius: 10px;
+  }
+
+  .launcher .glowBar + * {
+    margin-top: calc(var(--glowBarHeight) + 8px);
+  }
+  .launcher .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 6px;
+  }
+  .launcher .content .header {
+    display: flex;
+    align-items: center;
+  }
+  .launcher .content .header .headerText {
+    font-weight: 600;
+    font-size: 20px;
+  }
+  .launcher .content .subtitle {
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .miniLauncher {
+    display: flex;
+    align-items: center;
+    background-color: #202020;
+    position: fixed;
+  }
+  .miniLauncher:hover {
+    background: radial-gradient(
+      36.85% 65.32% at 50% 106.31%,
+      #03ecc4 0%,
+      rgba(131, 129, 142, 1) 100%
+    );
+  }
+  .miniLauncher.firstMount {
+    animation: slideInFromRight 0.5s;
+  }
+  .miniLauncher.in-house-launcher__desktop {
+    padding-right: 20px;
+    right: 0px;
+    overflow: hidden;
+    bottom: 40px;
+    z-index: var(--desktopZIndex);
+  }
+  .miniLauncher.in-house-launcher__mobile {
+    right: 10px;
+    bottom: 20px;
+  }
+
+  .in-house-launcher__primary-action-text {
+    font-family: "Poppins";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 22px;
+    cursor: pointer;
+  }
+
+  .in-house-launcher__primary-action:hover {
+    color: #350da6;
+  }
+
+  .in-house-launcher__primary-action {
+    transition: color 0.5s cubic-bezier(0.2, 0.19, 0.27, 0.98),
+      fill 0.5s cubic-bezier(0.2, 0.19, 0.27, 0.98);
+    cursor: pointer;
+  }
+
+  .in-house-launcher__primary-action:hover path {
+    fill: #350da6;
+  }
+
+  .in-house-launcher__primary-action:hover .in-house-launcher__ask-underline {
+    background: #350da6;
+  }
+
+  .in-house-launcher__ask-underline {
+    width: 47px;
+    height: 3px;
+    background: #1e1e1e;
+    transition: background 0.5s cubic-bezier(0.2, 0.19, 0.27, 0.98);
+  }
+
+  .in-house-launcher__filler-text {
+    font-size: 10px;
+    line-height: 22px;
+    color: #1e1e1e;
+  }
+
+  .in-house-launcher__call-to-action-option {
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 22px;
+
+    color: #1e1e1e;
+    border-bottom: 2px solid #1e1e1e;
+    width: fit-content;
+    height: fit-content;
+    cursor: pointer;
+    transition: color 0.2s cubic-bezier(0.2, 0.19, 0.27, 0.98);
+  }
+
+  .in-house-launcher__call-to-action-option:hover {
+    color: #350da6;
+    border-bottom: 2px solid #350da6;
+  }
+
+  .in-house-launcher__call-to-actions-wrapper {
+    width: 100%;
+    display: flex;
+  }
+
+  .in-house-launcher__call-to-actions-wrapper
+    > .in-house-launcher__call-to-action-option:not(:last-child) {
+    margin-right: 15px;
+  }
+
+  .in-house-launcher__window-wrapper {
+    position: fixed;
+    right: 0;
+    bottom: 172px;
+  }
+
+  .in-house-launcher__mini-launcher-wrapper {
+    position: fixed;
+    right: 0px;
+    bottom: 40px;
+    z-index: 100000;
+    display: flex;
+    align-items: center;
+  }
+
+  .in-house-launcher__mini-option {
+    position: relative;
+    // This is so that the pseudo elements we created will be visible despite being beneath the element it is a pseudo element for
+    border: 4px solid transparent;
+    height: 48px;
+    width: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(240, 240, 240, 0.9);
+    background-clip: padding-box;
+    padding: 4px;
+    box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+  }
+
+  .in-house-launcher__mini-option-wrapper {
+    margin-right: 12px;
+  }
+
+  .in-house-launcher__mini-option:not(:hover)::before {
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    background: #ffffff;
+    content: "";
+    z-index: -1;
+    border-radius: 50%;
+  }
+
+  .in-house-launcher__secondary-option {
+    width: 30px;
+    height: 30px;
+  }
+
+  .in-house-launcher__mini-option-wrapper {
+    background-clip: padding-box;
+  }
+
+  .in-house-launcher__mini-option:hover {
+    border: none;
+  }
+
+  .in-house-launcher__mini-option:hover::before {
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    background: linear-gradient(to right, #350da6, #8c58e5, #e66933);
+    background-size: cover;
+    content: "";
+    z-index: -1;
+    border-radius: 50%;
+  }
+
+  @media screen and (max-width: 767px) {
+    .launcher:not(.miniLauncher).in-house-launcher__desktop {
+      width: 100%;
+    }
+
+    .launcher.in-house-launcher__desktop {
+      bottom: 0px;
+    }
+
+    .launcher.in-house-launcher__desktop {
+      border-radius: 0px;
+    }
+
+    .launcher .glowBar {
+      top: 3px;
+      left: 0;
+      border-top-left-radius: 0px;
+    }
+
+    .launcher .content {
+      flex-direction: row;
+      padding-top: 15px;
+      padding-bottom: 15px;
+    }
+
+    .in-house-launcher__primary-action-text {
+      font-size: 18px;
+      flex-grow: 1;
+    }
+
+    .in-house-launcher__call-to-actions-wrapper {
+      width: fit-content;
+    }
+
+    .in-house-launcher__ask-underline {
+      width: 35px;
+    }
+
+    .in-house-launcher__window-wrapper {
+      left: 0;
+      bottom: 0;
+    }
+  }
+`;

package/src/WebComponent/index.ts

@@ -0,0 +1,2 @@
+export { InHouseLauncher } from "./InHouseLauncher";
+import "./MEChat";

package/src/WebComponent/utils.ts

@@ -0,0 +1,82 @@
+/** Pass in the year and the 0-indexed number of the month. E.g., for January 2022,
+ * `getDaysInMonth(2022, 0)`.
+ */
+export const getDaysInMonth = (year: number, month: number): number => {
+  // In the Date constructor, day 0 is the last day of the
+  // previous month. We get the date of next month's day 0
+  // to find out how many days this month has.
+  return new Date(year, month + 1, 0).getDate();
+};
+
+/** Pass in the year and the 0-indexed number of the month. E.g., for January 2022,
+ * `getDaysInMonth(2022, 0)`. Returns the 0-indexed day of the week of the first
+ * day of the month, e.g. `0` for Sunday.
+ */
+export const getMonthStartDay = (year: number, month: number): number =>
+  new Date(year, month, 1).getDay();
+
+/** Pass in the year and the 0-indexed number of the month. E.g., for January 2022,
+ * `getDaysInMonth(2022, 0)`. Returns the 0-indexed day of the week of the last day
+ * of the month, e.g. `0` for Sunday.
+ */
+export const getMonthEndDay = (year: number, month: number): number => {
+  const monthStartDay = getMonthStartDay(year, month);
+  const daysInMonth = getDaysInMonth(year, month);
+  return (monthStartDay + (daysInMonth % 7) - 1) % 7;
+};
+
+/** Takes a 0-indexed month and returns the previous month.
+ *
+ * @example
+ * getPreviousMonth(5) -> 4 // June -> May
+ *
+ * @example
+ * getPreviousMonth(0) -> 11 // January -> December
+ *
+ */
+export const getPreviousMonth = (month: number): number =>
+  month > 0 ? month - 1 : 11;
+
+/** Pass in the year and the 0-indexed number of the month. E.g., for January 2022,
+ * `getDaysInMonth(2022, 0)`. Returns the 0-indexed day of the week, e.g. `0` for Sunday.
+ */
+export const getDaysInPreviousMonth = (year: number, month: number): number =>
+  getDaysInMonth(month > 0 ? year : year - 1, getPreviousMonth(month));
+
+export const dayNames = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+];
+export const monthNames = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+export type Month =
+  | "January"
+  | "February"
+  | "March"
+  | "April"
+  | "May"
+  | "June"
+  | "July"
+  | "August"
+  | "September"
+  | "October"
+  | "November"
+  | "December";