@meetelise/chat 1.56.0 → 1.57.0

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

@@ -206,6 +206,16 @@ export class TourScheduler extends LitElement {
   brokerEmail = "";
   @state()
   brokerFirmName = "";
+  @state()
+  brokerPhone = "";
+  @state()
+  brokerPhoneE164: string | null = null;
+  @state()
+  brokerPhoneCountry: string | null = null;
+  @state()
+  brokerPhoneIsValid = false;
+  @state()
+  brokerPhoneHasBlurred = false;
 
   @property({ attribute: false })
   leadSources: string[] = [];
@@ -669,25 +679,44 @@ export class TourScheduler extends LitElement {
     this.email = (e.target as HTMLInputElement).value;
   };
 
+  onChangeBrokerPhone = (
+    event: CustomEvent<InternationalPhoneChangeDetail>
+  ): void => {
+    this.brokerPhone = event.detail.formattedValue;
+    this.brokerPhoneE164 = event.detail.e164;
+    this.brokerPhoneCountry = event.detail.country;
+    this.brokerPhoneIsValid = event.detail.isValid;
+  };
+
   /**
    * A broker usually starts typing their own details before ticking the box, so ticking it moves
-   * the name and email into the broker's empty details and leaves the client's fields empty. Once
-   * the broker's details are filled, re-ticking leaves both sections alone, as on the email form.
+   * the name, email and phone into the broker's empty details and leaves the client's fields empty.
+   * Once the broker's details are filled, re-ticking leaves both sections alone, as on the email form.
    */
   onToggleBrokerReferral = (e: Event): void => {
     const isBrokerReferral = (e.target as HTMLInputElement).checked;
     const brokerIsEmpty =
-      !this.brokerFirstName && !this.brokerLastName && !this.brokerEmail;
+      !this.brokerFirstName &&
+      !this.brokerLastName &&
+      !this.brokerEmail &&
+      !this.brokerPhone;
     const clientIsEmpty =
-      !this.firstNameInputValue && !this.lastNameInputValue && !this.email;
+      !this.firstNameInputValue &&
+      !this.lastNameInputValue &&
+      !this.email &&
+      !this.phoneNumber;
     if (isBrokerReferral && brokerIsEmpty) {
       this.brokerFirstName = this.firstNameInputValue;
       this.brokerLastName = this.lastNameInputValue;
       this.brokerEmail = this.email;
+      this.brokerPhone = this.phoneNumber;
+      this.brokerPhoneE164 = this.phoneNumberE164;
+      this.brokerPhoneCountry = this.phoneCountry;
+      this.brokerPhoneIsValid = this.phoneNumberIsValid;
+      this.brokerPhoneHasBlurred = this.phoneNumberHasBlurred;
       this.firstNameInputValue = "";
       this.lastNameInputValue = "";
       this.email = "";
-      // There's no broker phone field: what was typed is the broker's, not the client's.
       this.phoneNumber = "";
       this.phoneNumberE164 = null;
       this.phoneNumberIsValid = false;
@@ -696,9 +725,18 @@ export class TourScheduler extends LitElement {
       this.firstNameInputValue = this.brokerFirstName;
       this.lastNameInputValue = this.brokerLastName;
       this.email = this.brokerEmail;
+      this.phoneNumber = this.brokerPhone;
+      this.phoneNumberE164 = this.brokerPhoneE164;
+      this.phoneCountry = this.brokerPhoneCountry;
+      this.phoneNumberIsValid = this.brokerPhoneIsValid;
+      this.phoneNumberHasBlurred = this.brokerPhoneHasBlurred;
       this.brokerFirstName = "";
       this.brokerLastName = "";
       this.brokerEmail = "";
+      this.brokerPhone = "";
+      this.brokerPhoneE164 = null;
+      this.brokerPhoneIsValid = false;
+      this.brokerPhoneHasBlurred = false;
     }
     this.isBrokerReferral = isBrokerReferral;
   };
@@ -710,7 +748,8 @@ export class TourScheduler extends LitElement {
           this.brokerFirstName,
           this.brokerLastName,
           this.brokerEmail,
-          this.brokerFirmName
+          this.brokerFirmName,
+          this.brokerPhoneE164 ?? ""
         )
       : null;
 
@@ -729,9 +768,12 @@ export class TourScheduler extends LitElement {
       !this.bedroomPreferenceRequired || !!this.selectedLayoutValue,
     broker: (): boolean => {
       const broker = this.brokerReferral();
+      // The broker's phone is optional, but one that's been typed has to be valid.
       return (
         !broker ||
-        (!brokerNameIsMissing(broker) && !brokerEmailError(broker, this.email))
+        (!brokerNameIsMissing(broker) &&
+          !brokerEmailError(broker, this.email) &&
+          (!this.brokerPhone || this.brokerPhoneIsValid))
       );
     },
   };
@@ -1318,7 +1360,7 @@ export class TourScheduler extends LitElement {
 
   renderBrokerToggle = (): TemplateResult => html`
     <label class="broker-toggle">
-      <span>Are you an agent or locator?</span>
+      <span>Are you a broker or locator?</span>
       <input
         type="checkbox"
         role="switch"
@@ -1392,6 +1434,25 @@ export class TourScheduler extends LitElement {
         />
         ${emailError ? html`<p class="error-message">${emailError}</p>` : ""}
       </div>
+      <div class="inputContainer">
+        <international-phone-input
+          placeholder="Your phone (optional)"
+          .country=${this.brokerPhoneCountry ?? this.country}
+          .value=${this.brokerPhone}
+          .invalid=${this.brokerPhoneHasBlurred &&
+          !!this.brokerPhone &&
+          !this.brokerPhoneIsValid}
+          @phone-change=${this.onChangeBrokerPhone}
+          @phone-blur=${() => {
+            this.brokerPhoneHasBlurred = true;
+          }}
+        ></international-phone-input>
+        ${this.brokerPhoneHasBlurred &&
+        !!this.brokerPhone &&
+        !this.brokerPhoneIsValid
+          ? html`<p class="error-message">Invalid phone number</p>`
+          : ""}
+      </div>
       <div class="inputContainer">
         <input
           class=${inputClasses()}
@@ -1405,6 +1466,7 @@ export class TourScheduler extends LitElement {
           }}
         />
       </div>
+      ${this.renderBrokerToggle()}
       <div class="section-label">Your client</div>
     `;
   }
@@ -1488,7 +1550,9 @@ export class TourScheduler extends LitElement {
             ? html`<p class="error-message">Invalid phone number</p>`
             : ""}
         </div>
-        ${this.brokerIntakeEnabled ? this.renderBrokerToggle() : ""}
+        ${this.brokerIntakeEnabled && !isReferral
+          ? this.renderBrokerToggle()
+          : ""}
         ${this.layoutOptions.length > 0
           ? html` <me-select
               id="layout"

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

@@ -243,6 +243,16 @@ export class EmailUsWindow extends LitElement {
   brokerEmail = "";
   @state()
   brokerFirmName = "";
+  @state()
+  brokerPhone = "";
+  @state()
+  brokerPhoneE164: string | null = null;
+  @state()
+  brokerPhoneCountry: string | null = null;
+  @state()
+  brokerPhoneIsValid = false;
+  @state()
+  hasBrokerPhoneError = false;
 
   @query("me-select#leadSource")
   selectedLeadSource!: MESelect;
@@ -303,6 +313,15 @@ export class EmailUsWindow extends LitElement {
     this.phoneCountry = e.detail.country;
   };
 
+  onChangeBrokerPhone = (
+    e: CustomEvent<InternationalPhoneChangeDetail>
+  ): void => {
+    this.brokerPhone = e.detail.formattedValue;
+    this.brokerPhoneE164 = e.detail.e164;
+    this.brokerPhoneCountry = e.detail.country;
+    this.brokerPhoneIsValid = e.detail.isValid;
+  };
+
   onChangeMessage = (e: Event): void => {
     if (!e.target) {
       return;
@@ -313,36 +332,49 @@ export class EmailUsWindow extends LitElement {
 
   /**
    * A broker usually starts typing their own details before ticking the box, so ticking it moves
-   * the name and email into the broker's empty details and leaves the client's fields empty. Once
+   * the name, email and phone into the broker's empty details and leaves the client's fields empty. Once
    * the broker's details are filled, re-ticking leaves both sections alone: the main fields then
    * hold the client. Unticking with the client's fields still empty moves the details back.
    */
   onToggleBrokerReferral = (e: Event): void => {
     const isBrokerReferral = (e.target as HTMLInputElement).checked;
     const brokerIsEmpty =
-      !this.brokerFirstName && !this.brokerLastName && !this.brokerEmail;
+      !this.brokerFirstName &&
+      !this.brokerLastName &&
+      !this.brokerEmail &&
+      !this.brokerPhone;
     if (isBrokerReferral && brokerIsEmpty) {
       this.brokerFirstName = this.firstName;
       this.brokerLastName = this.lastName;
       this.brokerEmail = this.email;
+      this.brokerPhone = this.phoneNumber;
+      this.brokerPhoneE164 = this.phoneNumberE164;
+      this.brokerPhoneCountry = this.phoneCountry;
+      this.brokerPhoneIsValid = !!this.phoneNumberE164;
       this.firstName = "";
       this.lastName = "";
       this.email = "";
-      // There's no broker phone field: what was typed is the broker's, not the client's.
       this.phoneNumber = "";
       this.phoneNumberE164 = null;
     } else if (
       !isBrokerReferral &&
       !this.firstName &&
       !this.lastName &&
-      !this.email
+      !this.email &&
+      !this.phoneNumber
     ) {
       this.firstName = this.brokerFirstName;
       this.lastName = this.brokerLastName;
       this.email = this.brokerEmail;
+      this.phoneNumber = this.brokerPhone;
+      this.phoneNumberE164 = this.brokerPhoneE164;
+      this.phoneCountry = this.brokerPhoneCountry;
       this.brokerFirstName = "";
       this.brokerLastName = "";
       this.brokerEmail = "";
+      this.brokerPhone = "";
+      this.brokerPhoneE164 = null;
+      this.brokerPhoneIsValid = false;
     }
     this.isBrokerReferral = isBrokerReferral;
     this.hasNameError = false;
@@ -350,6 +382,7 @@ export class EmailUsWindow extends LitElement {
     this.hasPhoneNumberError = false;
     this.hasBrokerNameError = false;
     this.brokerEmailError = null;
+    this.hasBrokerPhoneError = false;
     this.windowHeight = this.baseHeight() + 30 * this.getNumErrors();
   };
 
@@ -372,7 +405,7 @@ export class EmailUsWindow extends LitElement {
   baseHeight = (): number =>
     525 +
     // The broker's rows, less the 79px the compact message box gives back.
-    (this.brokerIntakeEnabled && this.isBrokerReferral ? 170 - 79 : 0);
+    (this.brokerIntakeEnabled && this.isBrokerReferral ? 222 - 79 : 0);
 
   /** The broker's details to send, only when the submitter says they're referring a client. */
   brokerReferral = (): BrokerReferral | null =>
@@ -381,7 +414,8 @@ export class EmailUsWindow extends LitElement {
           this.brokerFirstName,
           this.brokerLastName,
           this.brokerEmail,
-          this.brokerFirmName
+          this.brokerFirmName,
+          this.brokerPhoneE164 ?? ""
         )
       : null;
 
@@ -393,10 +427,13 @@ export class EmailUsWindow extends LitElement {
     this.hasSubmissionError = false;
     this.hasBrokerNameError = false;
     this.brokerEmailError = null;
+    this.hasBrokerPhoneError = false;
     const broker = this.brokerReferral();
     if (broker) {
       this.hasBrokerNameError = brokerNameIsMissing(broker);
       this.brokerEmailError = brokerEmailError(broker, this.email);
+      // The broker's phone is optional, but one that's been typed has to be valid.
+      this.hasBrokerPhoneError = !!this.brokerPhone && !this.brokerPhoneIsValid;
     }
     if (!this.firstName || !this.lastName) {
       this.hasNameError = true;
@@ -421,7 +458,8 @@ export class EmailUsWindow extends LitElement {
       this.hasPhoneNumberError ||
       this.hasMessageError ||
       this.hasBrokerNameError ||
-      this.brokerEmailError
+      this.brokerEmailError ||
+      this.hasBrokerPhoneError
     ) {
       return;
     }
@@ -496,12 +534,13 @@ export class EmailUsWindow extends LitElement {
       this.hasSubmissionError,
       this.hasBrokerNameError,
       !!this.brokerEmailError,
+      this.hasBrokerPhoneError,
     ].filter((v) => v).length;
   };
 
   renderBrokerToggle = (): TemplateResult => html`
     <label class="email-us__broker-toggle">
-      <span>Are you an agent or locator?</span>
+      <span>Are you a broker or locator?</span>
       <input
         type="checkbox"
         role="switch"
@@ -563,6 +602,19 @@ export class EmailUsWindow extends LitElement {
                 </div>`
               : ""}
             <div class="email-us__vertical-spacer"></div>
+            <international-phone-input
+              placeholder="Your phone (optional)"
+              .country=${this.brokerPhoneCountry ?? this.country}
+              .value=${this.brokerPhone}
+              .invalid=${this.hasBrokerPhoneError}
+              @phone-change=${this.onChangeBrokerPhone}
+            ></international-phone-input>
+            ${this.hasBrokerPhoneError
+              ? html`<div class="email-us__error-text">
+                  Enter a valid phone number
+                </div>`
+              : ""}
+            <div class="email-us__vertical-spacer"></div>
             <input
               type="text"
               class=${inputClasses("email-us__contact-input")}
@@ -572,6 +624,8 @@ export class EmailUsWindow extends LitElement {
               @input=${this.onChangeBrokerField("brokerFirmName")}
             />
             <div class="email-us__vertical-spacer"></div>
+            ${this.renderBrokerToggle()}
+            <div class="email-us__vertical-spacer"></div>
             <div class="email-us__section-label">Your client</div>
           `
         : ""}
@@ -706,7 +760,7 @@ export class EmailUsWindow extends LitElement {
               `
             : ""}
           <div class="email-us__vertical-spacer"></div>
-          ${this.brokerIntakeEnabled
+          ${this.brokerIntakeEnabled && !this.isBrokerReferral
             ? html`${this.renderBrokerToggle()}
                 <div class="email-us__vertical-spacer"></div>`
             : ""}

package/src/WebComponent/actions/international-phone-input.ts

@@ -130,6 +130,9 @@ export class InternationalPhoneInput extends LitElement {
   @property({ type: Boolean })
   invalid = false;
 
+  @property({ type: String })
+  placeholder = "Phone";
+
   @state()
   private selectedCountry = "US";
 
@@ -287,7 +290,7 @@ export class InternationalPhoneInput extends LitElement {
           class="webchat-input"
           type="tel"
           inputmode="tel"
-          placeholder="Phone"
+          placeholder=${this.placeholder}
           name="phone"
           autocomplete="tel-national"
           maxlength="30"

package/src/WebComponent/brokerReferral.ts

@@ -6,6 +6,8 @@ export type BrokerReferral = {
   lastName: string;
   email: string;
   firmName: string;
+  /** E.164, or "" when the form has no broker phone or it was left empty. */
+  phone: string;
 };
 
 /** The broker's typed details, trimmed, as a referral. */
@@ -13,12 +15,14 @@ export const toBrokerReferral = (
   firstName: string,
   lastName: string,
   email: string,
-  firmName: string
+  firmName: string,
+  phone = ""
 ): BrokerReferral => ({
   firstName: firstName.trim(),
   lastName: lastName.trim(),
   email: email.trim(),
   firmName: firmName.trim(),
+  phone,
 });
 
 export const brokerNameIsMissing = (broker: BrokerReferral): boolean =>
@@ -51,5 +55,6 @@ export const brokerRequestFields = (
         broker_last_name: broker.lastName,
         broker_email: broker.email,
         broker_firm_name: broker.firmName || null,
+        ...(broker.phone ? { broker_phone: broker.phone } : {}),
       }
     : {};

package/src/brokerReferralSubmission.test.ts

@@ -85,6 +85,43 @@ it("sends a broker referral with the client as the prospect and the broker field
   expect(JSON.stringify(event)).not.to.contain("bea@realty.example.com");
 });
 
+it("sends the broker's phone on a referral email when they gave one", async () => {
+  const requests = captureRequests();
+  const emailUs = createForm({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+    brokerPhone: "(312) 555-0199",
+    brokerPhoneE164: "+13125550199",
+    brokerPhoneIsValid: true,
+  });
+
+  const submission = emailUs.onClick();
+
+  expect(requests).to.have.length(1);
+  expect(JSON.parse(requests[0].requestBody ?? "{}")).to.include({
+    broker_phone: "+13125550199",
+  });
+  requests[0].respond(200, { "Content-Type": "application/json" }, "{}");
+  await submission;
+});
+
+it("won't send a referral email with an invalid broker phone", async () => {
+  const requests = captureRequests();
+  const emailUs = createForm({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+    brokerPhone: "555",
+    brokerPhoneE164: null,
+    brokerPhoneIsValid: false,
+  });
+
+  await emailUs.onClick();
+
+  expect(requests).to.have.length(0);
+});
+
 it("sends no broker fields when broker intake is off, whatever the form holds", async () => {
   const requests = captureRequests();
   const emailUs = createForm({
@@ -224,9 +261,15 @@ it("moves what a broker typed into their own details when they tick the referral
   fill("Email", "bea@realty.example.com");
   await emailUs.updateComplete;
 
-  const checkbox = emailUs.shadowRoot?.querySelector(
-    "#broker-referral-toggle"
-  ) as HTMLInputElement;
+  // The switch moves when ticked (under Brokerage), so find it again for each click.
+  const checkbox = {
+    click: () =>
+      (
+        emailUs.shadowRoot?.querySelector(
+          "#broker-referral-toggle"
+        ) as HTMLInputElement
+      ).click(),
+  };
   checkbox.click();
   await emailUs.updateComplete;
 
@@ -257,9 +300,15 @@ it("keeps a filled client when the referral box is unticked and ticked again", a
   Object.assign(emailUs, { brokerIntakeEnabled: true, buildingId: 445038 });
   document.body.appendChild(emailUs);
   await emailUs.updateComplete;
-  const checkbox = emailUs.shadowRoot?.querySelector(
-    "#broker-referral-toggle"
-  ) as HTMLInputElement;
+  // The switch moves when ticked (under Brokerage), so find it again for each click.
+  const checkbox = {
+    click: () =>
+      (
+        emailUs.shadowRoot?.querySelector(
+          "#broker-referral-toggle"
+        ) as HTMLInputElement
+      ).click(),
+  };
   checkbox.click();
   await emailUs.updateComplete;
   Object.assign(emailUs, {
@@ -357,6 +406,44 @@ it("books a broker's tour with the client as the prospect and the broker fields"
   expect(JSON.stringify(event)).not.to.contain("bea@realty.example.com");
 });
 
+it("sends the broker's phone on a referral tour when they gave one", async () => {
+  const requests = captureRequests();
+  const tour = createTour({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+    brokerPhone: "(312) 555-0199",
+    brokerPhoneE164: "+13125550199",
+    brokerPhoneIsValid: true,
+  });
+
+  const submission = tour.submit();
+
+  expect(requests).to.have.length(1);
+  expect(JSON.parse(requests[0].requestBody ?? "{}")).to.include({
+    phone_number: "+13125550100",
+    broker_phone: "+13125550199",
+  });
+  requests[0].respond(200, { "Content-Type": "application/json" }, "{}");
+  await submission;
+});
+
+it("won't book a referral tour with an invalid broker phone", async () => {
+  const requests = captureRequests();
+  const tour = createTour({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+    brokerPhone: "555",
+    brokerPhoneE164: null,
+    brokerPhoneIsValid: false,
+  });
+
+  await tour.submit();
+
+  expect(requests).to.have.length(0);
+});
+
 it("books a tour with no broker fields when broker intake is off, whatever the form holds", async () => {
   const requests = captureRequests();
   const tour = createTour({