@meetelise/chat 1.52.0 → 1.53.0

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

@@ -195,6 +195,8 @@ export class TourScheduler extends LitElement {
 
   @property({ attribute: false })
   country: string | null = null;
+  @property({ attribute: false })
+  buildingState: string | null = null;
 
   @property({ attribute: true })
   currentLeadSource = ""; // the default lead source based on referrer and query params.
@@ -1645,6 +1647,7 @@ export class TourScheduler extends LitElement {
                       orgLegalName: this.orgLegalName,
                       orgSlug: this.orgSlug,
                       country: this.country,
+                      buildingState: this.buildingState,
                       clickingButtonText: "schedule tour",
                     })}
                   </div>
@@ -1700,6 +1703,7 @@ export class TourScheduler extends LitElement {
                       orgLegalName: this.orgLegalName,
                       orgSlug: this.orgSlug,
                       country: this.country,
+                      buildingState: this.buildingState,
                       clickingButtonText: "schedule tour",
                     })}
                   </div>
@@ -1810,6 +1814,7 @@ export class TourScheduler extends LitElement {
                     orgLegalName: this.orgLegalName,
                     orgSlug: this.orgSlug,
                     country: this.country,
+                    buildingState: this.buildingState,
                     clickingButtonText: "schedule tour",
                   })}
                 `

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

@@ -25,6 +25,8 @@ import { InputStyles } from "./InputStyles";
 import {
   CANADA_PRIVACY_POLICY_URL,
   isCanadianBuilding,
+  isQuebecBuilding,
+  quebecConsentDisclaimer,
 } from "../../disclaimers";
 
 @customElement("call-us-window")
@@ -173,6 +175,8 @@ export class CallUsWindow extends LitElement {
   orgLegalName = "";
   @property({ attribute: false })
   country: string | null = null;
+  @property({ attribute: false })
+  buildingState: string | null = null;
 
   @property({ attribute: true })
   private leadSourceClient: LeadSourceClient | null = null;
@@ -321,7 +325,9 @@ export class CallUsWindow extends LitElement {
       </div>
 
       <div class="text-us-window__description">
-        ${isCanadianBuilding(this.country)
+        ${isQuebecBuilding(this.buildingState)
+          ? quebecConsentDisclaimer("textUs", this.orgLegalName)
+          : isCanadianBuilding(this.country)
           ? html`By providing your number and clicking send, you consent to
               receive recurring commercial electronic messages from or on behalf
               of ${this.orgLegalName} at this number. Messages may be AI or

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

@@ -121,6 +121,8 @@ export class EmailUsWindow extends LitElement {
   orgLegalName = "";
   @property({ attribute: false })
   country: string | null = null;
+  @property({ attribute: false })
+  buildingState: string | null = null;
 
   @property({ attribute: true })
   private leadSourceClient: LeadSourceClient | null = null;
@@ -492,6 +494,7 @@ export class EmailUsWindow extends LitElement {
           orgLegalName: this.orgLegalName,
           orgSlug: this.orgSlug,
           country: this.country,
+          buildingState: this.buildingState,
           clickingButtonText: "send",
         })}
       </details-window>

package/src/WebComponent/launcher/Launcher.ts

@@ -81,6 +81,8 @@ export class Launcher extends LitElement {
   orgLegalName = "";
   @property({ attribute: false })
   country: string | null = null;
+  @property({ attribute: false })
+  buildingState: string | null = null;
   @property({ attribute: true })
   chatCallUsHeader = "";
   @property({ attribute: false })
@@ -1340,6 +1342,7 @@ export class Launcher extends LitElement {
                 .leadSourceMultitouchClient=${this.leadSourceMultitouchClient}
                 .orgLegalName=${this.orgLegalName}
                 .country=${this.country}
+                .buildingState=${this.buildingState}
               >
               </email-us-window>
             </div>`
@@ -1369,6 +1372,7 @@ export class Launcher extends LitElement {
                 .bedroomPreferenceRequired=${this.bedroomPreferenceRequired}
                 .orgLegalName=${this.orgLegalName}
                 .country=${this.country}
+                .buildingState=${this.buildingState}
                 buildingId=${this.buildingId}
                 orgId=${this.orgId}
                 .leadSourceParams=${this.leadSourceParams}
@@ -1414,6 +1418,7 @@ export class Launcher extends LitElement {
                   .leadSourceMultitouchClient=${this.leadSourceMultitouchClient}
                   .orgLegalName=${this.orgLegalName}
                   .country=${this.country}
+                  .buildingState=${this.buildingState}
                 ></call-us-window>
               </div>
             `

package/src/WebComponent/me-chat.ts

@@ -1044,6 +1044,7 @@ export class MEChat extends LitElement {
                     ?.usesDynamicScheduling ?? false}
                   .orgLegalName=${this.buildingWebchatView?.orgLegalName ?? ""}
                   .country=${this.buildingWebchatView?.country ?? null}
+                  .buildingState=${this.buildingWebchatView?.state ?? null}
                   .tourTypeOptions=${this.buildingWebchatView
                     ?.tourTypeOptions ?? []}
                   .layoutOptions=${this.buildingWebchatView?.layoutOptions ??

package/src/disclaimers.ts

@@ -12,6 +12,9 @@ const disclaimerStyles = {
   link: {
     color: "#4287f5",
   },
+  paragraph: {
+    margin: "0 0 4px",
+  },
 };
 
 // States where we need to say "you are interacting with generative AI".
@@ -23,6 +26,129 @@ export const isCanadianBuilding = (
   country: string | null | undefined
 ): boolean => country === "CA";
 
+const QUEBEC_PRIVACY_POLICY_URL = "https://eliseai.com/fr/canada-policy";
+const QUEBEC_TERMS_URL = "https://eliseai.com/fr/msgterms";
+
+export const isQuebecBuilding = (state: string | null | undefined): boolean =>
+  state?.trim().toUpperCase() === "QC";
+
+type QuebecConsentForm = "emailUs" | "textUs" | "scheduleTour";
+
+const disclaimerLink = (href: string, label: string): TemplateResult =>
+  html`<a
+    style=${styleMap(disclaimerStyles.link)}
+    href=${href}
+    target="_blank"
+    rel="noopener noreferrer"
+    >${label}</a
+  >`;
+
+const quebecConsentText = (
+  form: QuebecConsentForm,
+  orgLegalName: string
+): [TemplateResult, TemplateResult] => {
+  const frenchLinks = html`${disclaimerLink(
+    QUEBEC_PRIVACY_POLICY_URL,
+    "Politique relative à la protection des renseignements personnels"
+  )}
+  ainsi qu’à ces ${disclaimerLink(QUEBEC_TERMS_URL, "Conditions générales")}`;
+  const englishLinks = html`${disclaimerLink(
+    QUEBEC_PRIVACY_POLICY_URL,
+    "privacy policy"
+  )}
+  and these ${disclaimerLink(QUEBEC_TERMS_URL, "terms and conditions")}`;
+
+  if (form === "textUs") {
+    return [
+      html`Lorsque vous fournissez votre numéro de téléphone et que vous cliquez
+      sur Envoyer (send), vous consentez à recevoir des messages électroniques
+      et des appels récurrents de nature commerciale de la part de
+      ${orgLegalName} ou en son nom à ce numéro, dans la mesure où cela est
+      permis par les lois applicables. Les messages peuvent être générés par une
+      intelligence artificielle (IA) ou par un humain. Frais std SMS/données
+      applicables. Vous consentez à cette ${frenchLinks}, y compris à ce que
+      notre fournisseur de services, EliseAI, enregistre et utilise votre numéro
+      de téléphone et vos communications afin de générer des réponses et
+      d’améliorer ses services. Vous pouvez retirer votre consentement en tout
+      temps en vous désabonnant ou en communiquant avec nous.`,
+      html`By providing your number and clicking send, you consent to receive
+      recurring commercial electronic messages and calls from or on behalf of
+      ${orgLegalName} at this number, to the extent permitted by applicable law.
+      Messages may be AI or human generated. StdMsg&DataRatesMayApply. You
+      consent to this ${englishLinks}, including having your number and
+      communications recorded and used by our service provider EliseAI to
+      generate responses and improve their services. You may withdraw your
+      consent at any time by unsubscribing or contacting us.`,
+    ];
+  }
+
+  if (form === "scheduleTour") {
+    return [
+      html`Lorsque vous fournissez votre numéro de téléphone ou votre adresse
+      courriel et que vous cliquez sur Planifier une visite (schedule tour),
+      vous consentez à recevoir des messages électroniques et des appels
+      récurrents de nature commerciale de la part de ${orgLegalName} ou en son
+      nom à ce numéro ou à cette adresse courriel, dans la mesure où cela est
+      permis par les lois applicables. Les messages peuvent être générés par une
+      intelligence artificielle (IA) ou par un humain. Frais std SMS/données
+      applicables. Vous consentez à cette ${frenchLinks}, y compris à ce que
+      notre fournisseur de services, EliseAI, enregistre et utilise votre numéro
+      de téléphone, votre adresse courriel et vos communications afin de générer
+      des réponses et d’améliorer ses services. Vous pouvez retirer votre
+      consentement en tout temps en vous désabonnant ou en communiquant avec
+      nous.`,
+      html`By providing your number and/or email address and clicking schedule
+      tour, you consent to receive recurring commercial electronic messages and
+      calls from or on behalf of ${orgLegalName} at the provided number and/or
+      email address, to the extent permitted by applicable law. Messages may be
+      AI or human generated. StdMsg&DataRatesMayApply. You consent to this
+      ${englishLinks}, including having your number, email address, and
+      communications recorded and used by our service provider EliseAI to
+      generate responses and improve their services. You may withdraw your
+      consent at any time by unsubscribing or contacting us.`,
+    ];
+  }
+
+  return [
+    html`Lorsque vous fournissez votre adresse courriel ou votre numéro de
+    téléphone et que vous cliquez sur Envoyer (send), vous consentez à recevoir
+    des messages électroniques et des appels récurrents de nature commerciale de
+    la part de ${orgLegalName} ou en son nom à cette adresse courriel ou à ce
+    numéro, dans la mesure où cela est permis par les lois applicables. Les
+    messages peuvent être générés par une intelligence artificielle (IA) ou par
+    un humain. Vous consentez à cette ${frenchLinks}, y compris à ce que notre
+    fournisseur de services, EliseAI, enregistre et utilise votre adresse
+    courriel, votre numéro de téléphone et vos communications afin de générer
+    des réponses et d’améliorer ses services. Vous pouvez retirer votre
+    consentement en tout temps en vous désabonnant ou en communiquant avec nous.`,
+    html`By providing your email address and/or number and clicking send, you
+    consent to receive recurring commercial electronic messages and calls from
+    or on behalf of ${orgLegalName} at that email address and/or number, to the
+    extent permitted by applicable law. Messages may be AI or human generated.
+    You consent to this ${englishLinks}, including having your email address,
+    number, and communications recorded and used by our service provider EliseAI
+    to generate responses and improve their services. You may withdraw your
+    consent at any time by unsubscribing or contacting us.`,
+  ];
+};
+
+export const quebecConsentDisclaimer = (
+  form: QuebecConsentForm,
+  orgLegalName: string,
+  hasPhoneNumber = false
+): TemplateResult => {
+  const [french, english] = quebecConsentText(form, orgLegalName);
+  const paragraphStyle = styleMap(disclaimerStyles.paragraph);
+  return html`<p style=${paragraphStyle}>${french}</p>
+    <p style=${paragraphStyle}>${english}</p>
+    ${form === "textUs" || hasPhoneNumber
+      ? html`<p style=${paragraphStyle}>
+          Msg freq varies. Text STOP to opt-out of messages. Text HELP for
+          assistance.
+        </p>`
+      : ""}`;
+};
+
 export const CURRENT_CONSENT_ID = "currentConsentId";
 
 const formDisclaimer = ({
@@ -31,6 +157,7 @@ const formDisclaimer = ({
   orgLegalName,
   orgSlug,
   country,
+  buildingState,
   clickingButtonText = "send",
 }: {
   buildingName: string;
@@ -39,8 +166,19 @@ const formDisclaimer = ({
   orgLegalName: string;
   orgSlug: string;
   country?: string | null;
+  buildingState?: string | null;
   clickingButtonText?: string;
 }): TemplateResult => {
+  if (isQuebecBuilding(buildingState)) {
+    return html`<div style=${styleMap(disclaimerStyles.container)}>
+      ${quebecConsentDisclaimer(
+        clickingButtonText === "schedule tour" ? "scheduleTour" : "emailUs",
+        orgLegalName,
+        !!phoneNumberInput
+      )}
+    </div>`;
+  }
+
   const policyUrl = isCanadianBuilding(country)
     ? CANADA_PRIVACY_POLICY_URL
     : "http://bit.ly/me_privacy_policy";

package/src/quebecConsentDisclaimers.test.ts

@@ -0,0 +1,161 @@
+import { expect } from "@esm-bundle/chai";
+import { restore, useFakeXMLHttpRequest } from "sinon/pkg/sinon-esm";
+import "../public/dist/index";
+
+type Region = { state: string | null; country: string | null };
+type Widget = HTMLElement & { updateComplete: Promise<boolean> };
+type WidgetCase = {
+  name: string;
+  tag: string;
+  props: Record<string, string>;
+  propsAfterMount?: Record<string, boolean>;
+  french: string;
+  english: string;
+  ontarioCopy: string;
+  newYorkCopy: string;
+  newYorkLinks: string[];
+};
+
+const ORG = "Test Org Legal Inc.";
+const QUEBEC: Region[] = [
+  { state: "QC", country: "CA" },
+  { state: "qc", country: null },
+];
+const ONTARIO: Region = { state: "ON", country: "CA" };
+const NEW_YORK: Region = { state: "NY", country: "US" };
+
+const FR_PRIVACY =
+  "Politique relative à la protection des renseignements personnels";
+const PHONE_OPT_OUT =
+  "Msg freq varies. Text STOP to opt-out of messages. Text HELP for assistance.";
+
+const EMAIL_US_FR = `Lorsque vous fournissez votre adresse courriel ou votre numéro de téléphone et que vous cliquez sur Envoyer (send), vous consentez à recevoir des messages électroniques et des appels récurrents de nature commerciale de la part de ${ORG} ou en son nom à cette adresse courriel ou à ce numéro, dans la mesure où cela est permis par les lois applicables. Les messages peuvent être générés par une intelligence artificielle (IA) ou par un humain. Vous consentez à cette ${FR_PRIVACY} ainsi qu’à ces Conditions générales, y compris à ce que notre fournisseur de services, EliseAI, enregistre et utilise votre adresse courriel, votre numéro de téléphone et vos communications afin de générer des réponses et d’améliorer ses services. Vous pouvez retirer votre consentement en tout temps en vous désabonnant ou en communiquant avec nous.`;
+const EMAIL_US_EN = `By providing your email address and/or number and clicking send, you consent to receive recurring commercial electronic messages and calls from or on behalf of ${ORG} at that email address and/or number, to the extent permitted by applicable law. Messages may be AI or human generated. You consent to this privacy policy and these terms and conditions, including having your email address, number, and communications recorded and used by our service provider EliseAI to generate responses and improve their services. You may withdraw your consent at any time by unsubscribing or contacting us.`;
+
+const TEXT_US_FR = `Lorsque vous fournissez votre numéro de téléphone et que vous cliquez sur Envoyer (send), vous consentez à recevoir des messages électroniques et des appels récurrents de nature commerciale de la part de ${ORG} ou en son nom à ce numéro, dans la mesure où cela est permis par les lois applicables. Les messages peuvent être générés par une intelligence artificielle (IA) ou par un humain. Frais std SMS/données applicables. Vous consentez à cette ${FR_PRIVACY} ainsi qu’à ces Conditions générales, y compris à ce que notre fournisseur de services, EliseAI, enregistre et utilise votre numéro de téléphone et vos communications afin de générer des réponses et d’améliorer ses services. Vous pouvez retirer votre consentement en tout temps en vous désabonnant ou en communiquant avec nous.`;
+const TEXT_US_EN = `By providing your number and clicking send, you consent to receive recurring commercial electronic messages and calls from or on behalf of ${ORG} at this number, to the extent permitted by applicable law. Messages may be AI or human generated. StdMsg&DataRatesMayApply. You consent to this privacy policy and these terms and conditions, including having your number and communications recorded and used by our service provider EliseAI to generate responses and improve their services. You may withdraw your consent at any time by unsubscribing or contacting us.`;
+
+const SCHEDULE_TOUR_FR = `Lorsque vous fournissez votre numéro de téléphone ou votre adresse courriel et que vous cliquez sur Planifier une visite (schedule tour), vous consentez à recevoir des messages électroniques et des appels récurrents de nature commerciale de la part de ${ORG} ou en son nom à ce numéro ou à cette adresse courriel, dans la mesure où cela est permis par les lois applicables. Les messages peuvent être générés par une intelligence artificielle (IA) ou par un humain. Frais std SMS/données applicables. Vous consentez à cette ${FR_PRIVACY} ainsi qu’à ces Conditions générales, y compris à ce que notre fournisseur de services, EliseAI, enregistre et utilise votre numéro de téléphone, votre adresse courriel et vos communications afin de générer des réponses et d’améliorer ses services. Vous pouvez retirer votre consentement en tout temps en vous désabonnant ou en communiquant avec nous.`;
+const SCHEDULE_TOUR_EN = `By providing your number and/or email address and clicking schedule tour, you consent to receive recurring commercial electronic messages and calls from or on behalf of ${ORG} at the provided number and/or email address, to the extent permitted by applicable law. Messages may be AI or human generated. StdMsg&DataRatesMayApply. You consent to this privacy policy and these terms and conditions, including having your number, email address, and communications recorded and used by our service provider EliseAI to generate responses and improve their services. You may withdraw your consent at any time by unsubscribing or contacting us.`;
+
+const renderedText = (root: ShadowRoot | null | undefined): string =>
+  (root?.textContent ?? "").replace(/\s+/g, " ");
+
+const linkHrefs = (root: ShadowRoot | null | undefined): string[] =>
+  Array.from(root?.querySelectorAll("a") ?? []).map(
+    (a) => `${a.textContent?.trim()} -> ${a.getAttribute("href")}`
+  );
+
+const expectQuebecConsent = (
+  root: ShadowRoot | null | undefined,
+  french: string,
+  english: string
+): void => {
+  const text = renderedText(root);
+  expect(text).to.include(french);
+  expect(text).to.include(english);
+  expect(text.indexOf(french)).to.be.lessThan(text.indexOf(english));
+  expect(text.indexOf(english)).to.be.lessThan(text.indexOf(PHONE_OPT_OUT));
+  expect(linkHrefs(root)).to.include.members([
+    `${FR_PRIVACY} -> https://eliseai.com/fr/canada-policy`,
+    "Conditions générales -> https://eliseai.com/fr/msgterms",
+    "privacy policy -> https://eliseai.com/fr/canada-policy",
+    "terms and conditions -> https://eliseai.com/fr/msgterms",
+  ]);
+};
+
+const expectNoFrench = (root: ShadowRoot | null | undefined): void => {
+  expect(renderedText(root)).not.to.include("Lorsque vous fournissez");
+};
+
+const US_PRIVACY_LINK = "privacy policy -> http://bit.ly/me_privacy_policy";
+const PHONE = "(514) 555-0123";
+
+const WIDGETS: WidgetCase[] = [
+  {
+    name: "Email Us form",
+    tag: "email-us-window",
+    props: { email: "local.test@example.com", phoneNumber: PHONE },
+    french: EMAIL_US_FR,
+    english: EMAIL_US_EN,
+    ontarioCopy: `By providing your email address and/or number and clicking send, you consent to receive recurring commercial electronic messages and calls from or on behalf of ${ORG} at that email address and/or number. Messages may be AI or human generated.`,
+    newYorkCopy: `By providing your number and clicking send, you consent to receive recurring marketing text and voice messages and calls from or on behalf of ${ORG} at this number using artificial voice or an autodialer system.`,
+    newYorkLinks: [US_PRIVACY_LINK],
+  },
+  {
+    name: "Text Us form",
+    tag: "call-us-window",
+    props: { hasTextUsEnabled: "true" },
+    french: TEXT_US_FR,
+    english: TEXT_US_EN,
+    ontarioCopy: `By providing your number and clicking send, you consent to receive recurring commercial electronic messages from or on behalf of ${ORG} at this number.`,
+    newYorkCopy: `By providing your number and clicking send, you consent to receive recurring marketing text and voice messages and calls from or on behalf of ${ORG} at this number using artificial voice or an autodialer system.`,
+    newYorkLinks: [
+      US_PRIVACY_LINK,
+      "terms and conditions -> https://eliseai.com/msgterms",
+    ],
+  },
+  {
+    name: "tour scheduler",
+    tag: "tour-scheduler",
+    props: { phoneNumber: PHONE },
+    propsAfterMount: {
+      waitingForAvailabilities: false,
+      shouldAllowScheduleLoading: false,
+      shouldAllowScheduling: true,
+    },
+    french: SCHEDULE_TOUR_FR,
+    english: SCHEDULE_TOUR_EN,
+    ontarioCopy: `By providing your number and/or email address and clicking schedule tour, you consent to receive recurring commercial electronic messages and calls from or on behalf of ${ORG} at the provided number and/or email address. Messages may be AI or human generated.`,
+    newYorkCopy: `By providing your number and clicking schedule tour, you consent to receive recurring marketing text and voice messages and calls from or on behalf of ${ORG} at this number using artificial voice or an autodialer system.`,
+    newYorkLinks: [US_PRIVACY_LINK],
+  },
+];
+
+const renderWidget = async (
+  widget: WidgetCase,
+  region: Region
+): Promise<Widget> => {
+  const element = document.createElement(widget.tag) as Widget;
+  Object.assign(element, widget.props, {
+    orgLegalName: ORG,
+    country: region.country,
+    buildingState: region.state,
+  });
+  document.body.appendChild(element);
+  Object.assign(element, widget.propsAfterMount);
+  await element.updateComplete;
+  return element;
+};
+
+afterEach(() => {
+  restore();
+});
+
+for (const widget of WIDGETS) {
+  it(`shows legal's French then English consent on the ${widget.name} only for Quebec`, async () => {
+    useFakeXMLHttpRequest();
+
+    for (const region of QUEBEC) {
+      const quebec = await renderWidget(widget, region);
+      expectQuebecConsent(quebec.shadowRoot, widget.french, widget.english);
+      quebec.remove();
+    }
+
+    const ontario = await renderWidget(widget, ONTARIO);
+    expectNoFrench(ontario.shadowRoot);
+    expect(renderedText(ontario.shadowRoot)).to.include(widget.ontarioCopy);
+    expect(linkHrefs(ontario.shadowRoot)).to.include(
+      "privacy policy -> https://eliseai.com/canada-policy"
+    );
+    ontario.remove();
+
+    const newYork = await renderWidget(widget, NEW_YORK);
+    expectNoFrench(newYork.shadowRoot);
+    expect(renderedText(newYork.shadowRoot)).to.include(widget.newYorkCopy);
+    expect(linkHrefs(newYork.shadowRoot)).to.include.members(
+      widget.newYorkLinks
+    );
+    newYork.remove();
+  });
+}