@meetelise/chat 1.30.0 → 1.30.1

package/src/WebComponent/simple-launcher/simple-launcher-styles.ts

@@ -0,0 +1,34 @@
+import { css } from "lit";
+
+export const simpleLauncherStyles = css`
+  .chat-launcher {
+    position: fixed;
+  }
+  .close-chat-bttn,
+  .open-chat-bttn {
+    width: 48px;
+    height: 48px;
+    border-radius: 100%;
+    background: linear-gradient(
+      180deg,
+      rgba(96, 50, 230, 1) 29%,
+      rgba(140, 88, 229, 1) 63%
+    );
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .close-chat-bttn,
+  .open-chat-bttn {
+    border: none;
+    &:hover {
+      cursor: pointer;
+      filter: brightness(1.1);
+    }
+  }
+`;

package/src/WebComponent/simple-launcher/simple-launcher.ts

@@ -0,0 +1,100 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { isMobile } from "../../utils";
+import { simpleLauncherStyles } from "./simple-launcher-styles";
+
+@customElement("simple-launcher")
+export class SimpleLauncher extends LitElement {
+  static styles = [simpleLauncherStyles];
+
+  @property({ type: Number })
+  private right = 0;
+
+  @property({ type: Number })
+  private bottom = 0;
+
+  @property({ type: Number })
+  private top = 0;
+
+  @property({ type: Number })
+  private left = 0;
+
+  @property({ attribute: true })
+  isChatOpen = false;
+
+  @property({ attribute: true })
+  onClickCloseChat: () => void = () => ({});
+
+  @property({ attribute: true })
+  onClickOpenChat: () => void = () => ({});
+
+  render(): TemplateResult {
+    if (this.isChatOpen) {
+      return html`
+        <div
+          class="chat-launcher"
+          style=${styleMap({
+            top:
+              !isMobile() && !isNaN(this.top)
+                ? `${this.top + 432}px`
+                : undefined,
+            bottom:
+              !isMobile() && !isNaN(this.bottom)
+                ? `${this.bottom - 60}px`
+                : "72px",
+            left:
+              !isMobile() && !isNaN(this.left) ? `${this.left}px` : undefined,
+            right:
+              !isMobile() && !isNaN(this.right) ? `${this.right}px` : "18px",
+          })}
+        >
+          <button class="close-chat-bttn" @click=${this.onClickCloseChat}>
+            <svg
+              width="16"
+              height="10"
+              viewBox="0 0 16 10"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2 2L8 8L14 2"
+                stroke="white"
+                stroke-width="1.5"
+                stroke-linecap="square"
+              />
+            </svg>
+          </button>
+        </div>
+      `;
+    }
+    return html` <div
+      class="chat-launcher"
+      style=${styleMap({
+        top:
+          !isMobile() && !isNaN(this.top) ? `${this.top + 432}px` : undefined,
+        bottom:
+          !isMobile() && !isNaN(this.bottom) ? `${this.bottom - 60}px` : "72px",
+        left: !isMobile() && !isNaN(this.left) ? `${this.left}px` : undefined,
+        right: !isMobile() && !isNaN(this.right) ? `${this.right}px` : "18px",
+      })}
+    >
+      <button class="open-chat-bttn" @click=${this.onClickOpenChat}>
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.9955 2.40005C17.2974 2.40005 21.5955 6.69812 21.5955 12.0001C21.5955 17.302 17.2974 21.6001 11.9955 21.6001C10.2662 21.6001 8.64362 21.1428 7.24219 20.3426C7.15808 20.2946 7.05854 20.2806 6.96499 20.3056L3.09414 21.3428C2.82646 21.4146 2.58151 21.1696 2.65324 20.9019L3.69036 17.0313C3.71543 16.9378 3.70145 16.8382 3.65341 16.7541C2.85293 15.3525 2.39551 13.7297 2.39551 12.0001C2.39551 6.69812 6.69357 2.40005 11.9955 2.40005ZM8.20315 13.0047C8.73335 13.0047 9.16315 12.5749 9.16315 12.0447C9.16315 11.5146 8.73335 11.0848 8.20315 11.0848C7.67296 11.0848 7.24315 11.5146 7.24315 12.0447C7.24315 12.5749 7.67296 13.0047 8.20315 13.0047ZM13.0033 12.0447C13.0033 12.5749 12.5735 13.0047 12.0433 13.0047C11.5131 13.0047 11.0833 12.5749 11.0833 12.0447C11.0833 11.5146 11.5131 11.0848 12.0433 11.0848C12.5735 11.0848 13.0033 11.5146 13.0033 12.0447ZM15.8822 13.0046C16.4124 13.0046 16.8422 12.5749 16.8422 12.0447C16.8422 11.5145 16.4124 11.0848 15.8822 11.0848C15.352 11.0848 14.9222 11.5145 14.9222 12.0447C14.9222 12.5749 15.352 13.0046 15.8822 13.0046Z"
+            fill="white"
+          />
+        </svg>
+      </button>
+    </div>`;
+  }
+}

package/src/WebComponent/utilities-chat.ts

@@ -0,0 +1,270 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, Ref } from "lit/directives/ref.js";
+import { Launcher } from "./launcher/Launcher";
+import "./Scheduler/tour-scheduler";
+import { installLauncher } from "./launcher/Launcher";
+
+import "./MEChat.css";
+import MyPubnub from "../MyPubnub";
+
+import "./actions/minimize-expand-button";
+import "./launcher/mobile-launcher";
+import "./pubnub-chat";
+import {
+  clearChatStorageKey,
+  createChatStorageKey,
+  getChatStorageKey,
+  isChatKeyValid,
+} from "../handleChatId";
+import { isMobile } from "../utils";
+import "./simple-launcher/simple-launcher";
+import { WidgetType } from "../main/MEChat";
+import { fetchFeatureFlagShowUtilities } from "../fetchFeatureFlag";
+
+@customElement("utilities-chat")
+export class UtilitiesChat extends LitElement {
+  static styles = css`
+    :host {
+      all: initial;
+    }
+
+    #__talkjs_launcher:not(.shouldBeVisible) {
+      display: none;
+    }
+
+    .launcherContainer.launcher__mobile {
+      width: 100%;
+      height: 100px;
+    }
+
+    #typeMobile-bttn {
+      position: fixed;
+      right: 24px;
+      bottom: 24px;
+      width: 80px;
+      height: 80px;
+
+      border: 2px solid #f3f6fc;
+      border-radius: 1000px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 40px;
+    }
+    #typeMobile-bttn:hover > #typeMobile-inner {
+      background: #eaecf4;
+      cursor: pointer;
+    }
+    #typeMobile-bttn > #typeMobile-inner {
+      width: 72px;
+      height: 72px;
+
+      background: #ffffff;
+      border: 2px solid #f3f6fc;
+      border-radius: 1000px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+    }
+    #typeMobile-txt {
+      font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+      box-sizing: border-box;
+      font-weight: 300;
+      line-height: 150%;
+      font-size: 16px;
+    }
+  `;
+
+  @property({ type: String })
+  private orgSlug = "";
+
+  @property({ type: Number })
+  private right = undefined;
+
+  @property({ type: Number })
+  private bottom = undefined;
+
+  @property({ type: Number })
+  private top = undefined;
+
+  @property({ type: Number })
+  private left = undefined;
+
+  @state()
+  private launcher: HTMLElement | null = null;
+
+  @state()
+  private currentLeadSource: string | null = null;
+
+  @state()
+  private displayPubnubChat = false;
+
+  @state()
+  private myPubnub: MyPubnub | null = null;
+
+  @state()
+  private requiresConsent = false;
+
+  @state()
+  private privacyPolicyUrl = "http://bit.ly/me_privacy_policy";
+
+  @state()
+  private isLoading = true;
+
+  launcherRef: Ref<Launcher> = createRef();
+
+  firstUpdated = async (): Promise<void> => {
+    const showShouldUtilities = await fetchFeatureFlagShowUtilities(
+      this.orgSlug
+    );
+    if (!showShouldUtilities && !location.href.includes("demo/utilities")) {
+      return;
+    }
+    await this.initializeChatVariables();
+  };
+
+  private initializeChatVariables = async (): Promise<void> => {
+    this.isLoading = true;
+
+    // important to distinguish between a user who has never opened the chat and a user who has opened the chat but closed it
+    const currentChatStorageKey = getChatStorageKey(this.orgSlug);
+    const updatedChatStorageKey = isChatKeyValid(
+      this.orgSlug,
+      currentChatStorageKey
+    )
+      ? currentChatStorageKey
+      : createChatStorageKey(this.orgSlug, false);
+
+    if (!updatedChatStorageKey.leadId) {
+      throw new Error("Lead ID is null");
+    }
+
+    this.myPubnub = new MyPubnub(
+      this.orgSlug,
+      null,
+      this.orgSlug,
+      this.currentLeadSource,
+      updatedChatStorageKey.leadId,
+      null,
+      WidgetType.Utilities
+    );
+
+    if (updatedChatStorageKey.initiatedChat) {
+      await this.myPubnub.initializePubnub(currentChatStorageKey);
+    }
+
+    if (!isMobile()) {
+      this.displayPubnubChat = true;
+    }
+
+    this.attachOnClickToLauncher();
+
+    this.isLoading = false;
+  };
+
+  public async restartConversation(): Promise<void> {
+    this.myPubnub?.handleDisconnect();
+    clearChatStorageKey(this.orgSlug);
+    this.myPubnub = null;
+    this.displayPubnubChat = false;
+    await this.initializeChatVariables();
+  }
+
+  /** Show the chat button on the screen if it was previously hidden. */
+  show(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "";
+  }
+
+  /** Hide the chat button from the screen (but don't remove from the DOM). */
+  hide(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "none";
+  }
+
+  disconnectedCallback(): void {
+    this.myPubnub?.handleDisconnect();
+    super.disconnectedCallback();
+  }
+
+  private attachOnClickToLauncher = () => {
+    const launcher = this.launcherRef.value;
+    if (!launcher) {
+      return;
+    }
+    launcher.onChatTapped = async () => {
+      this.displayPubnubChat = true;
+    };
+  };
+
+  render(): TemplateResult {
+    installLauncher();
+
+    if (this.isLoading) return html``;
+    return html`
+   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+      <div id="aria-describe-info" style="display: none;">
+          EliseAI widget that allows you to chat with a virtual assistant, book
+          a tour, contact the leasing office, and more.
+      </div>
+
+
+      ${
+        this.displayPubnubChat
+          ? html`
+              <pubnub-chat
+                id="pubnub-chat"
+                .channel=${this.myPubnub?.channel}
+                .widgetType=${WidgetType.Utilities}
+                .myPubnub=${this.myPubnub}
+                .buildingSlug=${this.orgSlug}
+                .onClickExit=${() => {
+                  this.displayPubnubChat = false;
+                }}
+                .requiresConsent=${this.requiresConsent}
+                .privacyPolicyUrl=${this.privacyPolicyUrl}
+                .top=${this.top}
+                .bottom=${this.bottom}
+                .left=${this.left}
+                .right=${this.right}
+              ></pubnub-chat>
+            `
+          : html``
+      }
+          <simple-launcher
+          id="healthcare-launcher"
+          .top=${this.top}
+          .bottom=${this.bottom}
+          .left=${this.left}
+          .right=${this.right}
+          .isChatOpen=${this.displayPubnubChat}
+          .onClickCloseChat=${() => {
+            this.displayPubnubChat = false;
+          }}
+          .onClickOpenChat=${() => {
+            this.displayPubnubChat = true;
+          }}
+          
+        ></simple-launcher>
+      </meta>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "utilities-chat": UtilitiesChat;
+  }
+
+  interface Window {
+    RCTPCampaign?: { CampaignDetails: { Source: string } };
+  }
+}

package/src/WebComponent/utilities-styles.ts

@@ -0,0 +1,110 @@
+import { css } from "lit";
+
+export const utiltiesChatStyles = css`
+  #utilities-container {
+    position: fixed;
+
+    z-index: 100001;
+    display: flex;
+    align-items: center;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: -10px 60px 60px 0px #bfbfbf4d;
+
+    box-shadow: 0px 1px 24px 0px #0000001a;
+
+    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+  }
+  .utilities-container__desktop {
+    width: 500px;
+    height: min(700px, calc(100vh - 200px));
+    border-radius: 10px;
+  }
+
+  #utilities-header {
+    height: 60px;
+    width: 100%;
+    background: white;
+    overflow: hidden;
+
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    padding: 24px 16px;
+    justify-content: space-between;
+  }
+
+  .utilities-conversation-body-backdrop {
+    background: #f1f2f4;
+  }
+
+  @media screen and (max-width: 767px) {
+    #conversation-body {
+      background: #efefef;
+      backdrop-filter: none;
+    }
+  }
+
+  .utilities-disclaimer-inner {
+    margin: 0 auto;
+  }
+  .utilities-disclaimer-message {
+    font-size: 12px;
+    color: #737373;
+    line-height: 12px;
+    font-weight: 400;
+    text-align: left;
+    align-self: flex-start;
+  }
+  .utilities-disclaimer-inner > a {
+    color: #737373;
+  }
+
+  #utilities-footer {
+    min-height: 60px;
+    width: 100%;
+    background: white;
+    z-index: 100001;
+  }
+  #utilities-inner-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 16px;
+    gap: 0px;
+  }
+  #utilities-inner-footer > #message-input {
+    width: 100%;
+    max-height: 100px;
+    overflowy: auto;
+
+    font-family: inherit;
+    box-sizing: border-box;
+    font-weight: light;
+    border: none;
+    color: black;
+    background: none;
+
+    padding-right: 6px; /* width of the scrollbar */
+    box-sizing: border-box;
+    z-index: 1000000000000000000000000001;
+    font-size: 14px;
+  }
+  #utilities-inner-footer > #message-input:focus {
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  #utilities-send-message-bttn {
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  .health-bttn-allow-access {
+    padding-right: 28px;
+  }
+`;

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";