@meetelise/chat 1.20.81 → 1.20.83

package/src/MEChat.ts

@@ -249,17 +249,27 @@ const overrideContactUsForm = async (
     return false;
   };
 
+  const validateFormElements = () => {
+    Object.values(getFormElements()).forEach((el) => {
+      if (el?.getAttribute("aria-required") === "true" && !el.value) {
+        el.className = "form-control required is-invalid";
+      }
+    });
+  };
+
   const isValid = () => {
     return Object.values(getFormElements()).every((el) => {
       if (el === null) return false;
-      if (el.getAttribute("aria-invalid") === null) {
-        logContactUsFormError(
-          buildingSlug,
-          orgSlug,
-          "Missing aria-invalid attribute on " + el.id
-        );
+      if (el.getAttribute("aria-required") === "true" && !el.value) {
+        return false;
       }
-      return el.getAttribute("aria-invalid") !== "true";
+      if (
+        (el.id === "email" || el.id === "phonenumber") &&
+        el.getAttribute("aria-invalid") === "true"
+      ) {
+        return false;
+      }
+      return true;
     });
   };
 
@@ -280,6 +290,8 @@ const overrideContactUsForm = async (
   btn.parentNode?.replaceChild(clonedButton, btn);
 
   clonedButton.onclick = async function (event) {
+    validateFormElements();
+
     if (!isValid()) return;
     event.preventDefault();
 

package/src/WebComponent/me-chat.ts

@@ -14,8 +14,12 @@ import {
   fetchFeatureFlagShowMarketingSourceDropdown,
   fetchFeatureFlagUsePhoneNumberBySource,
 } from "../fetchFeatureFlag";
-import fetchWebchatPreferences from "../fetchWebchatPreferences";
-import fetchBuildingABTestType from "../fetchBuildingABTestType";
+import fetchWebchatPreferences, {
+  DesignConcepts,
+} from "../fetchWebchatPreferences";
+import fetchBuildingABTestType, {
+  abTestTypes,
+} from "../fetchBuildingABTestType";
 import fetchCurrentParsedLeadSource from "../fetchCurrentParsedLeadSource";
 import fetchPhoneNumberFromSource, {
   NumberForSelectedSource,
@@ -202,8 +206,17 @@ export class MEChat extends LitElement {
       if (this.brandColor === null) {
         this.brandColor = webchatPreferences.primaryColor ?? null;
       }
-      if (this.buildingABTestType === null) {
-        this.buildingABTestType = webchatPreferences.designConcept ?? null;
+      this.isMinimized = !!webchatPreferences.autoMinimize;
+      if (webchatPreferences.designConcept) {
+        if (webchatPreferences.designConcept === DesignConcepts.MINIMIZED) {
+          this.isMobile = true;
+        }
+        if (webchatPreferences.designConcept === DesignConcepts.PILLS) {
+          this.buildingABTestType = null; // default design concept is PILLS
+        }
+        if (webchatPreferences.designConcept === DesignConcepts.EMOJI) {
+          this.buildingABTestType = abTestTypes.ConceptEmoji;
+        }
       }
     }
 

package/src/fetchWebchatPreferences.ts

@@ -2,8 +2,15 @@ import axios from "axios";
 
 export interface WebchatPreferences {
   primaryColor: string;
-  designConcept: string;
+  designConcept: DesignConcepts;
   delayOpen: number;
+  autoMinimize: boolean;
+}
+
+export enum DesignConcepts {
+  EMOJI = "emoji",
+  PILLS = "pills",
+  MINIMIZED = "minimized", // this is also mobile
 }
 
 export default async function fetchWebchatPreferences(
@@ -19,6 +26,8 @@ export default async function fetchWebchatPreferences(
         primaryColor: webchatPreferencesResponse.data["primaryColor"],
         designConcept: webchatPreferencesResponse.data["designConcept"],
         delayOpen: +webchatPreferencesResponse.data["delayOpen"],
+        autoMinimize:
+          webchatPreferencesResponse.data["autoMinimize"] === "true",
       };
     }
     return null;