@meetelise/chat 1.20.39 → 1.20.41

package/src/WebComponent/{Scheduler/me-select.ts → me-select.ts}

@@ -1,6 +1,7 @@
 import { LitElement, html, TemplateResult, css } from "lit";
 import { property, state, query, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { InputStyles } from "./actions/InputStyles";
 
 type MeSelectOption = {
   label: string;
@@ -45,6 +46,12 @@ export class MESelect extends LitElement {
       this.isOpen = !this.isOpen;
       this.activeOption = null;
     }
+
+    if (!this.value) {
+      this.meSelect.style.color = "rgba(32, 32, 32, 0.5)";
+    } else {
+      this.meSelect.style.color = "rgba(32, 32, 32, 1)";
+    }
     this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   };
 
@@ -75,96 +82,89 @@ export class MESelect extends LitElement {
     });
   }
 
-  static styles = css`
-    :host {
-      --light-grey: #e3e3e3;
-      --active-option-color: #f5f7f9;
-      --light-border: 1px solid $light-border-color;
-    }
+  static styles = [
+    css`
+      :host {
+        --light-grey: #e3e3e3;
+        --active-option-color: #f5f7f9;
+        --light-border: 1px solid $light-border-color;
+      }
 
-    * {
-      box-sizing: border-box;
-      user-select: none;
-      font-family: Poppins;
-      font-size: 14px;
-    }
+      ul {
+        padding-left: 0;
+        margin-bottom: 0;
+        max-height: 200px;
+        overflow-y: scroll;
+        position: absolute;
+        min-height: 40px;
+        min-width: 144px;
+        max-width: 400px;
+        width: max-content;
+        background-color: white;
+        z-index: 20;
+        margin-top: 4px;
+        border: var(--light-border);
+        box-sizing: border-box;
+        box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15);
+        border-radius: 10px;
 
-    #select {
-      height: 50px;
-      min-width: 144px;
-      width: fit-content;
-      display: flex;
-      justify-content: space-between;
-      gap: 17px;
-      padding: 14.5px;
-      padding-right: 19.5px;
-      align-items: center;
-      background: white;
-      border: 1px solid #e3e3e3;
-      box-sizing: border-box;
-      box-shadow: 0px 1px 0px rgba(142, 142, 142, 0.2);
-      border-radius: 10px;
-    }
+        font-size: 14px;
+        line-height: 14px;
+        font-family: "Poppins";
+      }
 
-    ul {
-      padding-left: 0;
-      margin-bottom: 0;
-      max-height: 200px;
-      overflow-y: scroll;
-      position: absolute;
-      min-height: 40px;
-      min-width: 144px;
-      max-width: 400px;
-      width: max-content;
-      background-color: white;
-      z-index: 20;
-      margin-top: 4px;
-      border: var(--light-border);
-      box-sizing: border-box;
-      box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15);
-      border-radius: 10px;
-    }
+      #select {
+        width: -webkit-fill-available;
+        height: 49px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: rgba(32, 32, 32, 0.5);
+      }
 
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-      width: 8px;
-    }
+      ::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 8px;
+      }
 
-    ::-webkit-scrollbar-thumb {
-      border-radius: 10px;
-      background-color: rgba(0, 0, 0, 0.4);
-      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-    }
+      ::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background-color: rgba(0, 0, 0, 0.4);
+        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+      }
 
-    .option {
-      list-style: none;
-      padding: 10px;
-    }
+      .option {
+        list-style: none;
+        padding: 10px;
+      }
 
-    .option:first-child {
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
-    }
+      .option:first-child {
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+      }
 
-    .option:last-child {
-      border-bottom-left-radius: 10px;
-      border-bottom-right-radius: 10px;
-    }
+      .option:last-child {
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+      }
 
-    /* TODO: why two diff ones? copied from EWA but don't understand */
-    .option:active {
-      background-color: var(--light-grey);
-    }
+      /* TODO: why two diff ones? copied from EWA but don't understand */
+      .option:active {
+        background-color: var(--light-grey);
+      }
 
-    .option.active {
-      background-color: var(--active-option-color);
-    }
-  `;
+      .option.active {
+        background-color: var(--active-option-color);
+      }
+    `,
+    InputStyles,
+  ];
   render(): TemplateResult {
     return html`
       <div>
         <div
           id="select"
+          class="webchat-input"
           tabindex="0"
           @click=${() => (this.isOpen = !this.isOpen)}
           @keydown="${(e: KeyboardEvent) => {

package/src/analytics.ts

@@ -37,22 +37,6 @@ export default class Analytics {
     };
   }
 
-  campaignSources(): CampaignSources {
-    const queryParams = new URL(window.location.href).searchParams;
-    const yardiCampaignSource =
-      window.RCTPCampaign?.CampaignDetails?.Source ?? null;
-    const entrataCampaignSource = queryParams.get("switch_cls[id]");
-    const realpageCampaignSource = queryParams.get("ilm");
-    const utmCampaignSource = queryParams.get("utm_source");
-
-    return {
-      entrataCampaignSource,
-      realpageCampaignSource,
-      utmCampaignSource,
-      yardiCampaignSource,
-    };
-  }
-
   /**
    * Send an event. Takes one argument, the event type name.
    */
@@ -72,9 +56,25 @@ export default class Analytics {
           building: this.building,
           referrer: document.referrer,
           featureFlags: this.featureFlags,
-          campaignSources: this.campaignSources(),
+          campaignSources: getCampaignSources(),
         }),
       }
     );
   }
 }
+
+export const getCampaignSources = (): CampaignSources => {
+  const queryParams = new URL(window.location.href).searchParams;
+  const yardiCampaignSource =
+    window.RCTPCampaign?.CampaignDetails?.Source ?? null;
+  const entrataCampaignSource = queryParams.get("switch_cls[id]");
+  const realpageCampaignSource = queryParams.get("ilm");
+  const utmCampaignSource = queryParams.get("utm_source");
+
+  return {
+    entrataCampaignSource,
+    realpageCampaignSource,
+    utmCampaignSource,
+    yardiCampaignSource,
+  };
+};

package/src/fetchBuildingABTestType.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-export interface BuildingABType {
+interface BuildingABType {
   abTestType: string;
 }
 export default async function fetchBuildingABTestType(

package/src/fetchCurrentParsedLeadSource.ts

@@ -0,0 +1,20 @@
+import axios from "axios";
+import { getUrlQueryParameters } from "./postLeadSources";
+
+export default async function fetchCurrentParsedLeadSource(): Promise<
+  string | null
+> {
+  const host = "https://app.meetelise.com";
+  try {
+    const currentParsedLeadSourceResponse = await axios.get(
+      `${host}/platformApi/webchat/current-parsed-lead-source`,
+      {
+        params: { webchat_query_params: getUrlQueryParameters() },
+      }
+    );
+
+    return currentParsedLeadSourceResponse.data;
+  } catch (_) {
+    return null;
+  }
+}

package/src/fetchLeadSources.ts

@@ -0,0 +1,17 @@
+import axios from "axios";
+export interface BuildingABType {
+  abTestType: string;
+}
+export default async function fetchLeadSources(
+  buildingSlug: string
+): Promise<string[] | null> {
+  const host = "https://app.meetelise.com";
+  try {
+    const leadSourcesResponse = await axios.get(
+      `${host}/platformApi/webchat/${buildingSlug}/lead-sources`
+    );
+    return leadSourcesResponse.data;
+  } catch (_) {
+    return null;
+  }
+}

package/src/postLeadSources.ts

@@ -0,0 +1,40 @@
+import axios from "axios";
+export interface BuildingABType {
+  abTestType: string;
+}
+export default async function postLeadSources({
+  chatId,
+  website,
+  referrer,
+  buildingSlug,
+  selectedLeadSource,
+}: {
+  chatId: string;
+  website: string;
+  referrer: string;
+  buildingSlug: string;
+  selectedLeadSource: string;
+}): Promise<string | null> {
+  const host = "https://app.meetelise.com";
+  try {
+    const abTestTypeResponse = await axios.post(
+      `${host}/platformApi/webchat/lead-sourced`,
+      {
+        chat_id: chatId,
+        website: website,
+        referrer: referrer,
+        query_params: getUrlQueryParameters(),
+        building_slug: buildingSlug,
+        timestamp: new Date(),
+        selected_lead_source: selectedLeadSource,
+      }
+    );
+    return abTestTypeResponse.data;
+  } catch (_) {
+    return null;
+  }
+}
+
+export function getUrlQueryParameters(): { [queryKey: string]: string } | null {
+  return Object.fromEntries(new URLSearchParams(window.location.search));
+}

package/tsconfig.json

@@ -8,7 +8,8 @@
     "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     "lib": [
       "esnext",
-      "dom"
+      "dom",
+      "dom.iterable"
     ] /* Specify library files to be included in the compilation. */,
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */