@meetelise/chat 1.11.0 → 1.12.2

package/src/WebComponent/actions/DetailsWindow.ts

@@ -0,0 +1,109 @@
+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`
+    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+    .details-window-wrapper {
+      background: rgba(255, 255, 255, 0.75);
+      box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.25);
+      backdrop-filter: blur(10px);
+      font-family: "Poppins";
+      color: #202020;
+      padding: 20px;
+      border-radius: 10px 0px 0px 10px;
+    }
+
+    .details-window-header {
+      display: flex;
+      justify-content: space-between;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 22px;
+      margin-bottom: 25px;
+    }
+
+    @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;
+
+  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
+        class="details-window-wrapper"
+        style=${styleMap({
+          height: this.height,
+          width: this.isMobileSized ? "-webkit-fill-available" : this.width,
+        })}
+      >
+        <div class="details-window-header">
+          <div>${this.headerText}</div>
+          ${this.onCloseClick
+            ? html`<div @click=${this.onCloseClick}>
+                <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);
+  }
+};

package/src/WebComponent/actions/EmailUsWindow.ts

@@ -0,0 +1,431 @@
+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("email-us-window")
+export class EmailUsWindow extends LitElement {
+  static styles = [
+    css`
+      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+      .email-us__name-input {
+        width: 134px;
+        height: 49px;
+      }
+
+      .email-us__name-wrapper {
+        display: flex;
+      }
+
+      .email-us__horizontal-spacer {
+        margin-left: 2.5px;
+        margin-right: 2.5px;
+      }
+
+      .email-us__contact-input {
+        width: -webkit-fill-available;
+        height: 49px;
+      }
+
+      .email-us__vertical-spacer {
+        margin-top: 15px;
+        margin-bottom: 15px;
+      }
+
+      .email-us__message-input {
+        resize: none;
+        width: -webkit-fill-available;
+        height: 159px;
+        padding: 8px;
+      }
+
+      .email-us__legal-terms {
+        color: #202020;
+        font-family: "Poppins";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 22px;
+      }
+
+      .email-us__legal-term-action {
+        color: #202020;
+      }
+
+      .email-us__submitted-info {
+        font-size: 18px;
+        line-height: 24px;
+        color: #202020;
+      }
+
+      .email-us__error-text {
+        color: #202020;
+        font-family: "Poppins";
+        font-size: 10px;
+        line-height: 22px;
+        margin-top: 8px;
+      }
+
+      @media screen and (max-width: 767px) {
+        .email-us__name-input {
+          width: -webkit-fill-available;
+        }
+      }
+    `,
+    InputStyles,
+  ];
+
+  @property({ attribute: false })
+  onCloseClicked?: (e: MouseEvent) => void;
+
+  @property({ attribute: false })
+  buildingId = 0;
+
+  phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
+
+  @property()
+  privatePolicyUrl = "https://www.meetelise.com/privacy";
+  @property()
+  termsOfServiceUrl = "_blank";
+
+  @state()
+  firstName = "";
+  @state()
+  lastName = "";
+  @state()
+  email = "";
+  @state()
+  phoneNumber = "";
+  @state()
+  message = "";
+
+  @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 = formatToPhone(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;
+    }
+    if (!this.email || !this.email.includes("@")) {
+      this.hasEmailError = true;
+    }
+    if (!this.phoneNumber || this.phoneNumber.length !== 14) {
+      this.hasPhoneNumberError = true;
+    }
+    if (!this.message) {
+      this.hasMessageError = 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;
+      await createEmail(
+        this.firstName,
+        this.lastName,
+        this.email,
+        this.phoneNumber,
+        this.message,
+        this.buildingId
+      );
+      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
+          headerText="Email us"
+          .onCloseClick=${this.onCloseClicked}
+        >
+          <div class="email-us-wrapper">
+            <div class="email-us__vertical-spacer"></div>
+            <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 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
+        headerText="Email us"
+        .onCloseClick=${this.onCloseClicked}
+        height="${this.windowHeight}px"
+      >
+        <div class="email-us-wrapper">
+          <div class="email-us__name-wrapper">
+            <input
+              type="text"
+              class=${classMap({
+                ["webchat-input"]: true,
+                ["email-us__name-input"]: true,
+              })}
+              placeholder="First 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,
+              })}
+              placeholder="Last 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"
+            class=${classMap({
+              ["webchat-input"]: true,
+              ["email-us__contact-input"]: true,
+            })}
+            .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 number"
+            inputmode="tel"
+            class=${classMap({
+              ["webchat-input"]: true,
+              ["email-us__contact-input"]: true,
+            })}
+            .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>
+          <textarea
+            placeholder="Message"
+            .value=${this.message}
+            class=${classMap({
+              ["email-us__message-input"]: true,
+              ["webchat-input"]: true,
+            })}
+            @keyup=${this.onChangeMessage}
+          ></textarea>
+          ${this.hasMessageError
+            ? html` <div class="email-us__error-text">Include a message</div> `
+            : ""}
+          <div class="email-us__vertical-spacer"></div>
+          <action-confirm-button
+            .onClick=${this.onClick}
+            .isLoading=${this.isSubmitting}
+            text="Send message"
+          ></action-confirm-button>
+          ${this.hasSubmissionError
+            ? html`
+                <div class="email-us__error-text">Error submitting message</div>
+              `
+            : ""}
+          <div class="email-us__vertical-spacer"></div>
+          <div class="email-us__legal-terms">
+            <a
+              class="email-us__legal-term-action"
+              href="${this.privatePolicyUrl}"
+              >Privacy Policy</a
+            >
+          </div>
+        </div>
+      </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
+) => {
+  const formattedPhoneNumber =
+    "+1" +
+    rawPhoneNumber
+      .replace("(", "")
+      .replace(")", "")
+      .replace(" ", "")
+      .replace("-", "");
+  const requestBody = {
+    email_address: email,
+    building_id: buildingId,
+    lead_source: "property-website",
+    first_message: message,
+    first_name: firstName,
+    last_name: lastName,
+    phone_number: formattedPhoneNumber,
+  };
+
+  await axios.post(
+    "https://app.meetelise.com/platformApi/state/create/emailMe",
+    requestBody,
+    { headers: { ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG" } }
+  );
+};

package/src/WebComponent/actions/InputStyles.ts

@@ -0,0 +1,31 @@
+import { css } from "lit";
+
+export const InputStyles = css`
+  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+  .webchat-input {
+    border: 1px solid #83818e;
+    outline: none;
+    font-size: 14px;
+    color: #202020;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    font-family: "Poppins";
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .webchat-input:active {
+    border: 1px solid #202020;
+  }
+
+  .webchat-input:focus-within {
+    border: 1px solid #202020;
+  }
+
+  .webchat-input::placeholder {
+    color: #202020;
+    font-family: "Poppins";
+    font-size: 14px;
+  }
+`;