@meetelise/chat 1.20.82 → 1.20.84

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/Scheduler/tour-scheduler.ts

@@ -33,6 +33,7 @@ import { classMap } from "lit/directives/class-map.js";
 import postLeadSources from "../../postLeadSources";
 import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
 import { pushGtmEvent } from "../../gtm";
+import disclaimer from "../../disclaimers";
 
 const getHumanReadableLayout = (layout: string) => {
   if (layout == "studio") return "Studio";
@@ -72,6 +73,10 @@ export class TourScheduler extends LitElement {
   virtualToursLink = "";
   @property({ attribute: true })
   orgSlug = "";
+
+  @property({ attribute: true })
+  buildingName = "";
+
   onCloseClicked?: (e: MouseEvent) => void;
 
   @state()
@@ -621,7 +626,7 @@ export class TourScheduler extends LitElement {
         margin: 0;
       }
 
-      p {
+      .explanation {
         font-weight: 400;
         font-size: 12px;
         grid-row: 7;
@@ -630,6 +635,9 @@ export class TourScheduler extends LitElement {
         margin: 0;
         padding-top: 32px;
       }
+      .withDisclaimer {
+        padding-top: 16px;
+      }
 
       #schedule {
         width: 145px;
@@ -1336,10 +1344,20 @@ export class TourScheduler extends LitElement {
             : html`${this.tourTypeMenu()} ${this.dateAndTimeMenu()}
                 ${this.userInfoAndLayoutMenu()}
                 <hr />
-                <p id="explanation">
+                <p
+                  class=${this.phoneInput?.value || this.emailInput?.value
+                    ? "explanation withDisclaimer"
+                    : "explanation"}
+                >
                   We’ll send a confirmation and any follow-ups to your email
                   address.
+                  ${disclaimer({
+                    buildingName: this.buildingName,
+                    phoneNumberInput: this.phoneInput?.value,
+                    emailInput: this.emailInput?.value,
+                  })}
                 </p>
+
                 <action-confirm-button
                   id="schedule"
                   .onClick=${this.submit}
@@ -1383,6 +1401,15 @@ export class TourScheduler extends LitElement {
                     ${currentPage.nextButtonText}
                   </button>`
                 : currentPage.renderNextButton()}`}
+          ${this.mobilePageIndex + 1 === this.mobilePages.length
+            ? html`
+                ${disclaimer({
+                  buildingName: this.buildingName,
+                  phoneNumberInput: this.phoneInput?.value,
+                  emailInput: this.emailInput?.value,
+                })}
+              `
+            : html``}
         </div>
       `;
     }

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

@@ -16,6 +16,7 @@ import { InputStyles } from "./InputStyles";
 import axios from "axios";
 import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
 import { pushGtmEvent } from "../../gtm";
+import disclaimer from "../../disclaimers";
 
 @customElement("email-us-window")
 export class EmailUsWindow extends LitElement {
@@ -100,6 +101,8 @@ export class EmailUsWindow extends LitElement {
   buildingSlug = "";
   @property({ attribute: true })
   orgSlug = "";
+  @property({ attribute: true })
+  buildingName = "";
 
   @property({ attribute: true })
   featureFlagShowDropdown = "";
@@ -446,6 +449,12 @@ export class EmailUsWindow extends LitElement {
               `
             : ""}
         </div>
+
+        ${disclaimer({
+          buildingName: this.buildingName,
+          phoneNumberInput: this.phoneNumber,
+          emailInput: this.email,
+        })}
       </details-window>
     `;
   };

package/src/WebComponent/launcher/Launcher.ts

@@ -60,6 +60,8 @@ export class Launcher extends LitElement {
   @property()
   phoneNumber = "";
   @property({ attribute: true })
+  buildingName = "";
+  @property({ attribute: true })
   chatId = "";
   @property({ attribute: true })
   chatCallUsHeader = "";
@@ -528,6 +530,7 @@ export class Launcher extends LitElement {
                 featureFlagShowDropdown="${this.featureFlagShowDropdown}"
                 ${ref(this.emailUsWindowRef)}
                 .buildingId=${this.buildingId}
+                .buildingName=${this.buildingName}
               >
               </email-us-window>
             </div>`
@@ -559,6 +562,7 @@ export class Launcher extends LitElement {
                 .tourTypeOptions=${this.tourTypeOptions}
                 buildingId=${this.buildingId}
                 featureFlagShowDropdown="${this.featureFlagShowDropdown}"
+                .buildingName=${this.buildingName}
                 ${ref(this.tourSchedulerRef)}
               ></tour-scheduler>
             </div>`

package/src/WebComponent/me-chat.ts

@@ -534,6 +534,7 @@ export class MEChat extends LitElement {
                   phoneNumber="${this.phoneNumberForSource?.number ??
                   this.building?.phoneNumber ??
                   ""}"
+                  buildingName=${this.building?.name ?? ""}
                   textColor="${this.theme.chatHeader.textColor}"
                   backgroundColor="${this.theme.chatPaneBackgroundColor}"
                   orgSlug="${this.orgSlug}"

package/src/disclaimers.ts

@@ -0,0 +1,56 @@
+import { html, TemplateResult } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+
+const disclaimerStyles = {
+  container: {
+    fontSize: "10px",
+    paddingTop: "4px",
+  },
+  link: {
+    color: "#4287f5",
+  },
+};
+
+const disclaimer = ({
+  buildingName,
+  phoneNumberInput,
+  emailInput,
+}: {
+  buildingName: string;
+  phoneNumberInput?: string;
+  emailInput?: string;
+}): TemplateResult => {
+  if (phoneNumberInput) {
+    return html` <div style=${styleMap(disclaimerStyles.container)}>
+      By providing your number and clicking submit, you consent to recurring
+      marketing text messages from or for
+      ${buildingName.length > 0 ? buildingName : "this building"} at this
+      number, which may be sent by an autodialer system. Replies may be AI or
+      human generated. This consent is not required to lease at this property.
+      Msg & Data rates may apply. You consent to this
+      <a
+        style=${styleMap(disclaimerStyles.link)}
+        href="http://bit.ly/me_privacy_policy"
+        target="_blank"
+        rel="noopener noreferrer"
+        >privacy policy</a
+      >, including having your communications recorded by a third party.
+    </div>`;
+  }
+  if (emailInput) {
+    return html` <div style=${styleMap(disclaimerStyles.container)}>
+      By entering your email and clicking submit, you consent to this
+      <a
+        style=${styleMap(disclaimerStyles.link)}
+        href="http://bit.ly/me_privacy_policy"
+        target="_blank"
+        rel="noopener noreferrer"
+        >privacy policy</a
+      >, including having your email address and communications collected and
+      recorded by a third party.
+    </div>`;
+  }
+  return html``;
+};
+
+export default disclaimer;