@meetelise/chat 1.20.52 → 1.20.53

package/src/WebComponent/Launcher.ts

@@ -65,6 +65,8 @@ export class Launcher extends LitElement {
   sgtUrl = "";
   @property({ attribute: true })
   buildingABTestType = "";
+  @property({ attribute: true })
+  featureFlagShowDropdown = "";
   @property({ attribute: false })
   leadSources: string[] = [];
   @property({ attribute: true })
@@ -542,6 +544,7 @@ export class Launcher extends LitElement {
                   currentLeadSource="${this.currentLeadSource}"
                   orgSlug="${this.orgSlug}"
                   buildingSlug="${this.buildingSlug}"
+                  featureFlagShowDropdown="${this.featureFlagShowDropdown}"
                   ${ref(this.emailUsWindowRef)}
                   .buildingId=${this.buildingId}
                 >
@@ -578,6 +581,7 @@ export class Launcher extends LitElement {
                   .unitOptions=${this.unitOptions}
                   .tourTypeOptions=${this.tourTypeOptions}
                   buildingId=${this.buildingId}
+                  featureFlagShowDropdown="${this.featureFlagShowDropdown}"
                   ${ref(this.tourSchedulerRef)}
                 ></tour-scheduler>
               </div>`

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

@@ -29,6 +29,7 @@ import compareAsc from "date-fns/compareAsc";
 import { InputStyles } from "../actions/InputStyles";
 import { classMap } from "lit/directives/class-map.js";
 import postLeadSources from "../../postLeadSources";
+import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
 
 const getHumanReadableLayout = (layout: string) => {
   if (layout == "studio") return "Studio";
@@ -105,6 +106,9 @@ export class TourScheduler extends LitElement {
   @property({ attribute: true })
   currentLeadSource = ""; // the default lead source based on referrer and query params
 
+  @property({ attribute: true })
+  featureFlagShowDropdown = "";
+
   @query(".nameContainer#firstName input")
   firstNameInput!: HTMLInputElement;
   @query(".nameContainer#lastName input")
@@ -1110,7 +1114,11 @@ export class TourScheduler extends LitElement {
             />
           </div>
           ${
-            this.leadSources.length > 0
+            this.leadSources.length > 0 &&
+            (this.featureFlagShowDropdown === FeatureFlagsShowDropdown.always ||
+              (this.featureFlagShowDropdown ===
+                FeatureFlagsShowDropdown.onAttributionFailure &&
+                this.currentLeadSource.length === 0))
               ? html` <me-select
                   id="leadSource"
                   value="${this.currentLeadSource}"

package/src/WebComponent/actions/email-us-window.ts

@@ -14,6 +14,7 @@ import {
 } from "./formatPhoneNumber";
 import { InputStyles } from "./InputStyles";
 import axios from "axios";
+import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
 
 @customElement("email-us-window")
 export class EmailUsWindow extends LitElement {
@@ -99,6 +100,9 @@ export class EmailUsWindow extends LitElement {
   @property({ attribute: true })
   orgSlug = "";
 
+  @property({ attribute: true })
+  featureFlagShowDropdown = "";
+
   phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
 
   @property()
@@ -388,7 +392,11 @@ export class EmailUsWindow extends LitElement {
               `
             : ""}
           <div class="email-us__vertical-spacer"></div>
-          ${this.leadSources.length > 0
+          ${this.leadSources.length > 0 &&
+          (this.featureFlagShowDropdown === FeatureFlagsShowDropdown.always ||
+            (this.featureFlagShowDropdown ===
+              FeatureFlagsShowDropdown.onAttributionFailure &&
+              this.currentLeadSource.length === 0))
             ? html`
                 <me-select
                   id="leadSource"

package/src/WebComponent/me-chat.ts

@@ -9,6 +9,9 @@ import Analytics from "../analytics";
 import { createChatID, getChatID } from "../chatID";
 import createConversation from "../createConversation";
 import fetchBuildingInfo, { Building } from "../fetchBuildingInfo";
+import fetchFeatureFlag, {
+  FeatureFlagsShowDropdown,
+} from "../fetchFeatureFlag";
 import fetchBuildingABTestType, {
   abTestTypes,
 } from "../fetchBuildingABTestType";
@@ -144,6 +147,9 @@ export class MEChat extends LitElement {
   @state()
   private currentLeadSource: string | null = null;
   @state()
+  private featureFlagShowDropdown: FeatureFlagsShowDropdown =
+    FeatureFlagsShowDropdown.always;
+  @state()
   private hasMounted = false;
   @state()
   private hideLauncher = false;
@@ -169,6 +175,8 @@ export class MEChat extends LitElement {
     this.building = await fetchBuildingInfo(this.orgSlug, this.buildingSlug);
     const buildingABTest = await fetchBuildingABTestType(this.buildingSlug);
     this.leadSources = await fetchLeadSources(this.buildingSlug);
+
+    this.featureFlagShowDropdown = await fetchFeatureFlag(this.buildingSlug);
     this.currentLeadSource = await fetchCurrentParsedLeadSource(
       this.buildingSlug,
       document.referrer
@@ -178,12 +186,6 @@ export class MEChat extends LitElement {
         this.leadSources.push(this.currentLeadSource);
       }
     }
-    if (this.leadSources.length === 0) {
-      this.leadSources = ["Other"];
-      if (!this.currentLeadSource) {
-        this.currentLeadSource = this.leadSources[0];
-      }
-    }
     this.buildingABTestType = buildingABTest?.abTestType ?? "";
     getRawAvailabilities(this.building.id); // we're not using this here, just want to cache the result
     this.chatId = getChatID(this.orgSlug, this.buildingSlug);
@@ -473,6 +475,7 @@ export class MEChat extends LitElement {
                 sgtUrl="${this.building?.sgtUrl ?? ""}"
                 buildingABTestType="${this.buildingABTestType ?? ""}"
                 currentLeadSource="${this.currentLeadSource ?? ""}"
+                featureFlagShowDropdown="${this.featureFlagShowDropdown}"
                 .leadSources="${this.leadSources ?? []}"
                 escortedToursLink="${this.building?.escortedToursLink ?? ""}"
                 virtualToursLink="${this.building?.virtualToursLink ?? ""}"

package/src/fetchFeatureFlag.ts

@@ -0,0 +1,31 @@
+import axios from "axios";
+export enum FeatureFlagsShowDropdown {
+  onAttributionFailure = "on-attribution-failure",
+  never = "never", // note, the dropdown will NOT show up if there are also no lead sources (list)!
+  always = "always",
+}
+export default async function fetchFeatureFlag(
+  buildingSlug: string
+): Promise<FeatureFlagsShowDropdown> {
+  const host = "https://app.meetelise.com";
+  try {
+    const featureFlagResponse = await axios.get(
+      `${host}/platformApi/webchat/${buildingSlug}/chat-ui-feature-flag`,
+      {
+        params: {
+          building_slug: buildingSlug,
+          flag_type: "string",
+          feature_flag: "webchat-marketing-source-dropdown-configuration",
+          default_str: "always",
+          default_bool: true,
+        },
+      }
+    );
+    if (featureFlagResponse.data in FeatureFlagsShowDropdown) {
+      return featureFlagResponse.data;
+    }
+    return FeatureFlagsShowDropdown.always;
+  } catch (_) {
+    return FeatureFlagsShowDropdown.always;
+  }
+}