@meetelise/chat 1.51.4 → 1.51.5

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

@@ -124,6 +124,8 @@ export class TourScheduler extends LitElement {
   orgSlug = "";
   @property({ attribute: true })
   hasDynamicSchedulingEnabled = false;
+  @property({ attribute: true })
+  bedroomPreferenceRequired = false;
 
   @property({ attribute: true })
   private leadSourceClient: LeadSourceClient | null = null;
@@ -660,13 +662,16 @@ export class TourScheduler extends LitElement {
         !!this.phoneNumberE164
       );
     },
+    layout: (): boolean =>
+      !this.bedroomPreferenceRequired || !!this.selectedLayoutValue,
   };
 
   formIsValidForSubmission = (): boolean => {
     const isValid =
       this.validators.tourType() &&
       this.validators.dateAndTime() &&
-      this.validators.leadInfo();
+      this.validators.leadInfo() &&
+      this.validators.layout();
     return isValid;
   };
 
@@ -1303,7 +1308,9 @@ export class TourScheduler extends LitElement {
         ${this.layoutOptions.length > 0
           ? html` <me-select
               id="layout"
-              placeholder="Bedroom preference (optional)"
+              placeholder=${this.bedroomPreferenceRequired
+                ? "Bedroom preference"
+                : "Bedroom preference (optional)"}
               .options="${this.layoutOptions.map((o) => ({
                 label: o.label,
                 value: layoutValueToCanonical(o.value),

package/src/WebComponent/launcher/Launcher.ts

@@ -151,6 +151,8 @@ export class Launcher extends LitElement {
   @property({ attribute: false })
   layoutOptions: LayoutOption[] = [];
   @property({ attribute: true })
+  bedroomPreferenceRequired = false;
+  @property({ attribute: true })
   hasDynamicSchedulingEnabled = false;
 
   @property({ attribute: true })
@@ -1310,6 +1312,7 @@ export class Launcher extends LitElement {
                 .leadSources="${this.leadSources}"
                 .tourTypeOptions=${this.tourTypeOptions}
                 .layoutOptions=${this.layoutOptions}
+                .bedroomPreferenceRequired=${this.bedroomPreferenceRequired}
                 .orgLegalName=${this.orgLegalName}
                 .country=${this.country}
                 buildingId=${this.buildingId}

package/src/WebComponent/me-chat.ts

@@ -14,6 +14,7 @@ import {
   FeatureFlagsShowDropdown,
   fetchFeatureFlagUseApplicationsLinkReplacement,
   fetchFeatureFlagUseOverrideContactUsForm,
+  fetchTrackedRolloutBedroomPreferenceRequired,
 } from "../fetchFeatureFlag";
 import { HIDE_DATA_LAYER_PII_ORG_IDS, setGtmPiiRedaction } from "../gtm";
 import fetchPhoneNumberFromSource, {
@@ -173,6 +174,8 @@ export class MEChat extends LitElement {
   private featureFlagShowDropdown: FeatureFlagsShowDropdown =
     FeatureFlagsShowDropdown.always;
   @state()
+  private bedroomPreferenceRequired = false;
+  @state()
   private phoneNumberForSource: NumberForSelectedSource | null = null;
   @state()
   private hasMounted = false;
@@ -360,12 +363,17 @@ export class MEChat extends LitElement {
       HIDE_DATA_LAYER_PII_ORG_IDS.includes(buildingDetails.orgId)
     );
 
-    const [leadSources, featureFlagUseApplicationsLinkReplacement, isAip] =
-      await Promise.all([
-        fetchLeadSources(this.orgSlug, this.buildingSlug),
-        fetchFeatureFlagUseApplicationsLinkReplacement(this.buildingSlug),
-        fetchBuildingAip(this.buildingSlug),
-      ]);
+    const [
+      leadSources,
+      featureFlagUseApplicationsLinkReplacement,
+      isAip,
+      bedroomPreferenceRequired,
+    ] = await Promise.all([
+      fetchLeadSources(this.orgSlug, this.buildingSlug),
+      fetchFeatureFlagUseApplicationsLinkReplacement(this.buildingSlug),
+      fetchBuildingAip(this.buildingSlug),
+      fetchTrackedRolloutBedroomPreferenceRequired(this.buildingSlug),
+    ]);
 
     if (this.buildingWebchatView) {
       this.buildingWebchatView.phoneNumber = formatPhoneNumber(
@@ -376,6 +384,7 @@ export class MEChat extends LitElement {
     this.leadSources = leadSources;
     this.featureFlagShowDropdown =
       featureFlagShowDropdown as FeatureFlagsShowDropdown;
+    this.bedroomPreferenceRequired = bedroomPreferenceRequired;
 
     // The backend is cached for ~4 hours, so falling back to the existing api request until the cache propagates all the changes
     const buildingPhoneNumber = buildingDetails.textWithUsPhoneNumber
@@ -1022,6 +1031,7 @@ export class MEChat extends LitElement {
                     ?.tourTypeOptions ?? []}
                   .layoutOptions=${this.buildingWebchatView?.layoutOptions ??
                   []}
+                  .bedroomPreferenceRequired=${this.bedroomPreferenceRequired}
                   .launcherStyles=${this.launcherStyles}
                   .primaryColor=${this.primaryColor}
                   .backgroundColor=${this.backgroundColor}

package/src/fetchFeatureFlag.ts

@@ -114,3 +114,25 @@ export async function fetchFeatureFlagUseApplicationsLinkReplacement(
     return false;
   }
 }
+
+const trackedRolloutEndpoint = (buildingSlug: string): string => {
+  const host = "https://app.meetelise.com";
+  return `${host}/platformApi/webchat/${buildingSlug}/tracked-rollout`;
+};
+
+export async function fetchTrackedRolloutBedroomPreferenceRequired(
+  buildingSlug: string
+): Promise<boolean> {
+  if (!buildingSlug) return false;
+  try {
+    const response = await axios.get(trackedRolloutEndpoint(buildingSlug), {
+      params: {
+        rollout_name: "webchat_bedroom_preference_required",
+        default_value: false,
+      },
+    });
+    return response.data;
+  } catch (_) {
+    return false;
+  }
+}