@meetelise/chat 1.20.136 → 1.20.138

package/src/MyPubnub.ts

@@ -3,12 +3,14 @@ import Pubnub, { ListenerParameters, MessageEvent } from "pubnub";
 
 import axios from "axios";
 import { Building } from "./fetchBuildingInfo";
+import parseISO from "date-fns/parseISO";
+import { v4 as uuid } from "uuid";
 import addHours from "date-fns/addHours";
 import isAfter from "date-fns/isAfter";
+import formatISO from "date-fns/formatISO";
+import isBefore from "date-fns/isBefore";
 import { LogType, sendLoggingEvent } from "./analytics";
 
-import { createChatStorageKey, getChatStorageKey } from "./handleChatIds";
-
 interface TokenResponse {
   auth: {
     result: {
@@ -38,7 +40,7 @@ export interface ChatMessage {
   timetoken: number;
 }
 
-export interface ChatInfo {
+interface ChatInfo {
   leadId: string | null;
   timestamp: Date | null;
   buildingSlug: string | null;
@@ -114,7 +116,7 @@ class MyPubnub {
   }
 
   async initializePubnub(): Promise<Pubnub | undefined> {
-    const storedChatKeyValues = getChatStorageKey(true, this.buildingSlug);
+    const storedChatKeyValues = this.getChatStorageKey();
     if (!storedChatKeyValues.leadId) {
       // eslint-disable-next-line no-console
       sendLoggingEvent({
@@ -143,8 +145,9 @@ class MyPubnub {
         addHours(new Date(), this.ttlHours)
       )
     ) {
-      createChatStorageKey(this.buildingSlug, this.leadUserId);
+      this.createChatStorageKey(this.leadUserId);
     }
+
     const pubnubToken = await this.fetchToken(this.leadUserId, this.channel);
     if (!pubnubToken) return;
 
@@ -379,6 +382,80 @@ class MyPubnub {
   isLeadMessage = (message: ChatMessage): boolean =>
     message.publisher.includes("lead_") &&
     message.message.customType === "lead_message";
+
+  clearChatStorageKey = (): void =>
+    localStorage.removeItem("com.eliseai.webchat.slug=" + this.buildingSlug);
+
+  createChatStorageKey = (existingUserId?: string): ChatInfo => {
+    const storageTimestamp = formatISO(new Date());
+    const leadUserId = existingUserId ?? `lead_${uuid()}_${this.buildingSlug}`;
+    localStorage.setItem(
+      "com.eliseai.webchat.slug=" + this.buildingSlug,
+      JSON.stringify({
+        buildingSlug: this.buildingSlug,
+        leadId: leadUserId,
+        timestamp: storageTimestamp,
+      })
+    );
+    return {
+      leadId: leadUserId,
+      timestamp: parseISO(storageTimestamp),
+      buildingSlug: this.buildingSlug,
+    };
+  };
+  getChatStorageKey = (createNewIfNotExist = true): ChatInfo => {
+    const eliseaiLocalStorageValue = localStorage.getItem(
+      "com.eliseai.webchat.slug=" + this.buildingSlug
+    );
+    if (eliseaiLocalStorageValue) {
+      try {
+        const eliseaiLocalStorageValueParsed = JSON.parse(
+          eliseaiLocalStorageValue
+        );
+        const lsBuildingSlug = eliseaiLocalStorageValueParsed.buildingSlug;
+        const lsLeadId = eliseaiLocalStorageValueParsed.leadId;
+        const lsExpiration = new Date(eliseaiLocalStorageValueParsed.timestamp);
+
+        if (
+          this.isChatKeyValid({
+            leadId: lsLeadId,
+            timestamp: lsExpiration,
+            buildingSlug: lsBuildingSlug,
+          })
+        )
+          return {
+            leadId: lsLeadId,
+            timestamp: lsExpiration,
+            buildingSlug: lsBuildingSlug,
+          };
+      } catch (_) {
+        // eslint-disable-next-line no-console
+        console.warn("Error getting chat storage key");
+      }
+    }
+
+    if (createNewIfNotExist) return this.createChatStorageKey();
+    return {
+      leadId: null,
+      timestamp: null,
+      buildingSlug: null,
+    };
+  };
+  isChatKeyValid = (storageValueDeconstructed: ChatInfo): boolean => {
+    if (
+      storageValueDeconstructed.buildingSlug !== this.buildingSlug ||
+      !storageValueDeconstructed.leadId ||
+      !storageValueDeconstructed.timestamp
+    ) {
+      return false;
+    }
+
+    const expirationDate = addHours(
+      storageValueDeconstructed.timestamp,
+      this.ttlHours
+    );
+    return !isBefore(expirationDate, Date.now());
+  };
 }
 
 export default MyPubnub;

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -22,9 +22,7 @@ import { TimePicker } from "./time-picker";
 import { LabeledOption, UnitV2 } from "../../fetchBuildingInfo";
 import { isMobile } from "../../utils";
 import axios from "axios";
-import isNumber from "lodash/isNumber";
 import mapValues from "lodash/mapValues";
-import isString from "lodash/isString";
 import classnames from "classnames";
 import parseISO from "date-fns/parseISO";
 import compareAsc from "date-fns/compareAsc";
@@ -38,22 +36,6 @@ import { tourSchedulerStyles } from "./tourSchedulerStyles";
 import { defaultBrandColor } from "../../themes";
 import { LogType, sendLoggingEvent } from "../../analytics";
 
-const getHumanReadableLayout = (layout: string) => {
-  if (layout == "studio") return "Studio";
-  return {
-    "1br": "1 bedroom",
-    "2br": "2 bedroom",
-    "3br": "3 bedroom",
-    "4br": "4 bedroom",
-    "5br": "5 bedroom",
-    "6br": "6 bedroom",
-    "7br": "7 bedroom",
-    "8br": "8 bedroom",
-    "9br": "9 bedroom",
-    "10br": "10 bedroom",
-  }[layout];
-};
-
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
   @property({ attribute: false })
@@ -134,10 +116,6 @@ export class TourScheduler extends LitElement {
   emailInput!: HTMLInputElement;
   @query(".inputContainer#phone input")
   phoneInput!: HTMLInputElement;
-  @query("me-select#unitType")
-  unitTypeSelect!: MESelect;
-  @query("me-select#layoutType")
-  layoutTypeSelect!: MESelect;
   @query("me-select#leadSource")
   selectedLeadSource!: MESelect;
 
@@ -455,13 +433,6 @@ export class TourScheduler extends LitElement {
       lastName: this.lastNameInput.value,
       tourType: tourTypeForSubmission[this.tourType],
       tourTime: `${this.selectedTime.datetime}${this.selectedTime.offset}`,
-      layouts: this.layoutTypeSelect.value
-        ? [this.layoutTypeSelect.value]
-        : null,
-      unitNumbers:
-        this.unitTypeSelect && this.unitTypeSelect.value
-          ? [this.unitTypeSelect.value]
-          : null,
       originatingSource:
         leadSources.find((i) => i !== "property-website") || null,
     });
@@ -474,13 +445,6 @@ export class TourScheduler extends LitElement {
       last_name: this.lastNameInput.value,
       tour_type: tourTypeForSubmission[this.tourType],
       tour_time: `${this.selectedTime.datetime}${this.selectedTime.offset}`, // e.g., "2022-06-27T09:00:00-07:00"
-      layouts: this.layoutTypeSelect.value
-        ? [this.layoutTypeSelect.value]
-        : null,
-      unit_numbers:
-        this.unitTypeSelect && this.unitTypeSelect.value
-          ? [this.unitTypeSelect.value]
-          : null,
       lead_sources: [
         ...new Set(
           parsedLeadSource
@@ -793,12 +757,12 @@ export class TourScheduler extends LitElement {
         <div id="namesWrapper">
           <div class="nameContainer" id="firstName">
             <input
-               class=${classMap({
-                 ["webchat-input"]: true,
-                 ["nameInput"]: true,
-                 ["webchat-font__desktop"]: !isMobile(),
-                 ["webchat-font__mobile"]: isMobile(),
-               })}
+              class=${classMap({
+                ["webchat-input"]: true,
+                ["nameInput"]: true,
+                ["webchat-font__desktop"]: !isMobile(),
+                ["webchat-font__mobile"]: isMobile(),
+              })}
               type="text"
               placeholder="First name"
               name="firstName"
@@ -823,139 +787,67 @@ export class TourScheduler extends LitElement {
           </div>
         </div>
 
-          <div class="inputContainer" id="email">
-            <input
-              class=${classMap({
-                ["webchat-input"]: true,
-                ["webchat-font__desktop"]: !isMobile(),
-                ["webchat-font__mobile"]: isMobile(),
-              })}
-              type="email"
-              inputmode="email"
-              placeholder="Email"
-              name="email"
-              autocomplete="email"
-              .value=${this.email}
-              @input=${this.onChangeEmail}
-            />
-          </div>
-          <div class="inputContainer" id="phone">
-            <input
-              class=${classMap({
-                ["webchat-input"]: true,
-                ["webchat-font__desktop"]: !isMobile(),
-                ["webchat-font__mobile"]: isMobile(),
-              })}
-              type="tel"
-              inputmode="tel"
-              placeholder="Phone"
-              name="phone"
-              autocomplete="tel-national"
-              maxlength="14"
-              .value=${this.phoneNumber}
-              @keydown=${this.handlePhoneKeydown}
-              @keyup=${this.handlePhoneKeyup}
-              @input=${(e: Event) => {
-                if (!e.target) {
-                  return;
-                }
-                this.phoneNumber = formatToPhoneInput(
-                  (e.target as HTMLInputElement).value
-                );
-              }}
-            />
-          </div>
-          ${
-            this.leadSources.length > 0 &&
-            (this.featureFlagShowDropdown === FeatureFlagsShowDropdown.always ||
-              (this.featureFlagShowDropdown ===
-                FeatureFlagsShowDropdown.onAttributionFailure &&
-                this.currentLeadSource.length === 0))
-              ? html` <me-select
-                  id="leadSource"
-                  value="${this.currentLeadSource}"
-                  placeholder="How did you hear about us?"
-                  .options="${this.leadSources.map((i) => ({
-                    label: i,
-                    value: i,
-                  }))}"
-                  @change=${() => {
-                    this.requestUpdate();
-                  }}
-                >
-                </me-select>`
-              : ""
-          }
+        <div class="inputContainer" id="email">
+          <input
+            class=${classMap({
+              ["webchat-input"]: true,
+              ["webchat-font__desktop"]: !isMobile(),
+              ["webchat-font__mobile"]: isMobile(),
+            })}
+            type="email"
+            inputmode="email"
+            placeholder="Email"
+            name="email"
+            autocomplete="email"
+            .value=${this.email}
+            @input=${this.onChangeEmail}
+          />
         </div>
-        <div class="unitLayoutChoices">
-        ${
-          this.layoutOptions.length > 0
-            ? html`<h2 class="what-to-view-subheader">
-                What would you like to view?
-              </h2>`
-            : ""
-        }
-        <div class="unitLayoutChoicesDropdowns">
-          ${
-            this.layoutOptions.length > 0
-              ? html`<div class="unitLayoutChoice">
-                  <div class="unitLayoutOptions">
-                    <me-select
-                      id="layoutType"
-                      placeholder="Select layout"
-                      .options="${sortedLayouts(this.layoutOptions).map(
-                        (i) => ({
-                          label: getHumanReadableLayout(i),
-                          value: i,
-                        })
-                      )}"
-                      defaultOption="Studio"
-                      @change=${() => {
-                        // to revalidate the form.
-                        this.requestUpdate();
-                      }}
-                      >Studio
-                    </me-select>
-                  </div>
-                </div>`
-              : ""
-          }
-          ${
-            this.unitOptions.filter(
-              (i) =>
-                !this.layoutTypeSelect ||
-                i.layout === this.layoutTypeSelect.value
-            ).length > 0
-              ? html`
-                  <div class="unitLayoutChoice">
-                    <me-select
-                      id="unitType"
-                      placeholder="Select unit"
-                      .options="${this.unitOptions
-                        .filter(
-                          (i) =>
-                            !this.layoutTypeSelect ||
-                            i.layout === this.layoutTypeSelect.value
-                        )
-                        .map((i) => ({
-                          label: i.name,
-                          value: i.name,
-                        }))}"
-                      defaultOption="Studio"
-                      @change=${() => {
-                        // to revalidate the form
-                        this.requestUpdate();
-                      }}
-                      >Studio
-                    </me-select>
-                  </div>
-                `
-              : ""
-          }
-          </div>
-         
-       
+        <div class="inputContainer" id="phone">
+          <input
+            class=${classMap({
+              ["webchat-input"]: true,
+              ["webchat-font__desktop"]: !isMobile(),
+              ["webchat-font__mobile"]: isMobile(),
+            })}
+            type="tel"
+            inputmode="tel"
+            placeholder="Phone"
+            name="phone"
+            autocomplete="tel-national"
+            maxlength="14"
+            .value=${this.phoneNumber}
+            @keydown=${this.handlePhoneKeydown}
+            @keyup=${this.handlePhoneKeyup}
+            @input=${(e: Event) => {
+              if (!e.target) {
+                return;
+              }
+              this.phoneNumber = formatToPhoneInput(
+                (e.target as HTMLInputElement).value
+              );
+            }}
+          />
         </div>
+        ${this.leadSources.length > 0 &&
+        (this.featureFlagShowDropdown === FeatureFlagsShowDropdown.always ||
+          (this.featureFlagShowDropdown ===
+            FeatureFlagsShowDropdown.onAttributionFailure &&
+            this.currentLeadSource.length === 0))
+          ? html` <me-select
+              id="leadSource"
+              value="${this.currentLeadSource}"
+              placeholder="How did you hear about us?"
+              .options="${this.leadSources.map((i) => ({
+                label: i,
+                value: i,
+              }))}"
+              @change=${() => {
+                this.requestUpdate();
+              }}
+            >
+            </me-select>`
+          : ""}
       </div> `;
   }
 
@@ -1195,43 +1087,3 @@ const tourTypeForSubmission = {
   [TourType.Self]: "self-guided-tour",
   [TourType.Virtual]: "live-virtual-tour",
 };
-
-const getLayoutOrder = (layout: string) => {
-  return {
-    studio: 0,
-    "1br": 1,
-    "2br": 2,
-    "3br": 3,
-    "4br": 4,
-    "5br": 5,
-    "6br": 6,
-    "7br": 7,
-    "8br": 8,
-    "9br": 9,
-    "10br": 10,
-  }[layout];
-};
-
-const getLayoutFromOrder = (order: number) => {
-  return {
-    0: "studio",
-    1: "1br",
-    2: "2br",
-    3: "3br",
-    4: "4br",
-    5: "5br",
-    6: "6br",
-    7: "7br",
-    8: "8br",
-    9: "9br",
-    10: "10br",
-  }[order];
-};
-
-const sortedLayouts = (layouts: string[]) => {
-  const layoutOrder = layouts
-    .map((layout) => getLayoutOrder(layout))
-    .filter(isNumber)
-    .sort();
-  return layoutOrder.map((order) => getLayoutFromOrder(order)).filter(isString);
-};

package/src/WebComponent/Scheduler/tourSchedulerStyles.ts

@@ -236,38 +236,6 @@ otherwise there's some empty space at the bottom of the button, which interferes
     height: 49px;
   }
 
-  .unitLayoutChoices {
-    grid-row: 5 / 6;
-    grid-column: 3;
-    align-self: start;
-    display: flex;
-    flex-direction: column;
-  }
-  .unitLayoutChoicesDropdowns {
-    display: flex;
-    justify-content: space-between;
-    gap: 6px;
-  }
-
-  .what-to-view-subheader {
-    font-size: 12px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-  }
-  .unitLayoutChoice {
-    width: -webkit-fill-available;
-  }
-
-  h2.unitLayoutChoice {
-    margin-bottom: 7px;
-  }
-
-  .unitLayoutOptions {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
   hr {
     grid-row: 6;
     grid-column: 1 / 5;

package/src/WebComponent/me-chat.ts

@@ -40,11 +40,6 @@ import "./actions/minimize-expand-button";
 import "./launcher/mobile-launcher";
 import "./pubnub-chat";
 import { getBuildingPhoneNumber } from "../getBuildingPhoneNumber";
-import {
-  clearChatStorageKey,
-  getChatStorageKey,
-  isChatKeyValid,
-} from "../handleChatIds";
 
 @customElement("me-chat")
 export class MEChat extends LitElement {
@@ -321,13 +316,7 @@ export class MEChat extends LitElement {
       this.orgSlug,
       this.currentLeadSource
     );
-    if (
-      // handle if we already have a valid session to open up to
-      isChatKeyValid(
-        getChatStorageKey(false, this.buildingSlug),
-        this.buildingSlug
-      )
-    ) {
+    if (this.myPubnub.isChatKeyValid(this.myPubnub.getChatStorageKey(false))) {
       await this.myPubnub.initializePubnub();
     }
     this.attachOnClickToLauncher();
@@ -354,22 +343,18 @@ export class MEChat extends LitElement {
   };
 
   private async handleChatInitializeAnalytics(): Promise<void> {
-    // Although we may create the chat id here, we DO NOT create a channel here. We only create a channel when the user
-    // actually sends a message. This is to prevent unnecessary channels from being created.
     this.analytics = new Analytics(
       this.orgSlug,
       this.buildingSlug,
-      `webchat_lead_${getChatStorageKey(true, this.buildingSlug).leadId}`, // important to get unique visitors to the website
+      this.myPubnub?.channel ?? "", // this will be empty if the user does not have a current chat session.
       this.currentLeadSource
     );
-    // ping both the load and the heartbeat events for legacy support
-    this.analytics.ping("load");
     this.analytics.ping("webchat_heartbeat");
   }
 
   public async restartConversation(): Promise<void> {
     this.myPubnub?.handleDisconnect();
-    clearChatStorageKey(this.buildingSlug);
+    this.myPubnub?.clearChatStorageKey();
     this.myPubnub = null;
     this.displayPubnubChat = false;
     await this.initializeChatVariables();

package/src/analytics.ts

@@ -14,7 +14,7 @@ export interface CampaignSources {
 }
 
 /**
- * A connection to the MeetElise API to send analytics events.
+ * A connection to the MeetElise API to send analytics events
  */
 export default class Analytics {
   private org: string;

package/src/handleChatIds.ts

@@ -1,98 +0,0 @@
-import isBefore from "date-fns/isBefore";
-import addHours from "date-fns/addHours";
-import { ChatInfo } from "./MyPubnub";
-
-import parseISO from "date-fns/parseISO";
-import { v4 as uuid } from "uuid";
-
-import formatISO from "date-fns/formatISO";
-
-export const ttlHoursChat = 24;
-
-export const isChatKeyValid = (
-  storageValueDeconstructed: ChatInfo,
-  buildingSlug: string
-): boolean => {
-  if (
-    storageValueDeconstructed.buildingSlug !== buildingSlug ||
-    !storageValueDeconstructed.leadId ||
-    !storageValueDeconstructed.timestamp
-  ) {
-    return false;
-  }
-
-  const expirationDate = addHours(
-    storageValueDeconstructed.timestamp,
-    ttlHoursChat
-  );
-  return !isBefore(expirationDate, Date.now());
-};
-
-export const getChatStorageKey = (
-  createNewIfNotExist = true,
-  buildingSlug: string
-): ChatInfo => {
-  const eliseaiLocalStorageValue = localStorage.getItem(
-    "com.eliseai.webchat.slug=" + buildingSlug
-  );
-  if (eliseaiLocalStorageValue) {
-    try {
-      const eliseaiLocalStorageValueParsed = JSON.parse(
-        eliseaiLocalStorageValue
-      );
-      const lsBuildingSlug = eliseaiLocalStorageValueParsed.buildingSlug;
-      const lsLeadId = eliseaiLocalStorageValueParsed.leadId;
-      const lsExpiration = new Date(eliseaiLocalStorageValueParsed.timestamp);
-
-      if (
-        isChatKeyValid(
-          {
-            leadId: lsLeadId,
-            timestamp: lsExpiration,
-            buildingSlug: lsBuildingSlug,
-          },
-          buildingSlug
-        )
-      )
-        return {
-          leadId: lsLeadId,
-          timestamp: lsExpiration,
-          buildingSlug: lsBuildingSlug,
-        };
-    } catch (_) {
-      // eslint-disable-next-line no-console
-      console.warn("Error getting chat storage key");
-    }
-  }
-
-  if (createNewIfNotExist) return createChatStorageKey(buildingSlug);
-  return {
-    leadId: null,
-    timestamp: null,
-    buildingSlug: null,
-  };
-};
-
-export const clearChatStorageKey = (buildingSlug: string): void =>
-  localStorage.removeItem("com.eliseai.webchat.slug=" + buildingSlug);
-
-export const createChatStorageKey = (
-  buildingSlug: string,
-  existingUserId?: string
-): ChatInfo => {
-  const storageTimestamp = formatISO(new Date());
-  const leadUserId = existingUserId ?? `lead_${uuid()}_${buildingSlug}`;
-  localStorage.setItem(
-    "com.eliseai.webchat.slug=" + buildingSlug,
-    JSON.stringify({
-      buildingSlug: buildingSlug,
-      leadId: leadUserId,
-      timestamp: storageTimestamp,
-    })
-  );
-  return {
-    leadId: leadUserId,
-    timestamp: parseISO(storageTimestamp),
-    buildingSlug: buildingSlug,
-  };
-};