@meetelise/chat 1.56.0 → 1.58.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/WebComponent/me-chat.ts

@@ -144,6 +144,11 @@ export class MEChat extends LitElement {
    */
   @property({ type: String })
   private declaredBuildingSlug = "";
+  /**
+   * Org-level webchat on a host that knows the page's building by id (Elise
+   * Studio), set with `setDeclaredBuildingId`. Undefined until the host sets it.
+   */
+  private hostDeclaredBuildingId: number | null | undefined = undefined;
   /**
    * Org-level webchat (`centralConvo` started without a building). Stays true
    * after the widget adopts the org's triage general building from
@@ -700,10 +705,16 @@ export class MEChat extends LitElement {
     if (this.centralConvo) {
       const myPubnub = this.myPubnub;
       myPubnub.centralConvo = true;
-      // Not awaited: only needed once the visitor sends a message.
-      void this.fetchDeclaredBuildingId().then((id) => {
-        myPubnub.declaredBuildingId = id;
-      });
+      if (this.hostDeclaredBuildingId !== undefined) {
+        myPubnub.declaredBuildingId = this.hostDeclaredBuildingId;
+      } else {
+        // Not awaited: only needed once the visitor sends a message.
+        void this.fetchDeclaredBuildingId().then((id) => {
+          if (this.hostDeclaredBuildingId === undefined) {
+            myPubnub.declaredBuildingId = id;
+          }
+        });
+      }
     } else {
       this.myPubnub.declaredBuildingId = this.buildingWebchatView.id;
     }
@@ -814,6 +825,16 @@ export class MEChat extends LitElement {
     };
   };
 
+  /**
+   * Org-level webchat: the page's building, sent with later visitor messages as
+   * `declaredBuildingId`. For hosts that move between pages without restarting
+   * the widget; it doesn't change config or the conversation.
+   */
+  setDeclaredBuildingId(id: number | null): void {
+    this.hostDeclaredBuildingId = id;
+    if (this.myPubnub) this.myPubnub.declaredBuildingId = id;
+  }
+
   /** The numeric id of the snippet's building in org-level webchat, if it names one. */
   private fetchDeclaredBuildingId = async (): Promise<number | null> => {
     if (!this.declaredBuildingSlug || !this.orgSlug) return null;

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({

package/src/main/MEChat.ts

@@ -40,7 +40,8 @@ export type StudioWebchatMode = "host_managed_context";
 export type StudioWebchatSessionScopeType =
   | "building"
   | "building_group"
-  | "site";
+  | "site"
+  | "org";
 
 export interface StudioWebchatSessionScope {
   type: StudioWebchatSessionScopeType;
@@ -60,6 +61,11 @@ export interface StudioWebchatContext {
   building?: string | null;
   buildingGroupId?: string | number | null;
   sessionScope?: StudioWebchatSessionScope;
+  /**
+   * Org scope only: the page's building, sent with visitor messages as
+   * `declaredBuildingId`. Null on pages with no single building.
+   */
+  declaredBuildingId?: number | null;
   path?: string;
   pageId?: string;
 }
@@ -323,6 +329,11 @@ export default class MEChat {
       return;
     }
 
+    if (context.sessionScope?.type === "org") {
+      this.updateStudioOrgContext(context, opts, updateToken);
+      return;
+    }
+
     const orgSlug = coerceStudioContextString(context.organization);
     const buildingSlug = coerceStudioContextString(context.building);
 
@@ -368,6 +379,64 @@ export default class MEChat {
     });
   }
 
+  /**
+   * Org-level webchat on a Studio site: one org-anchored widget for the whole
+   * site, started as the org-level pixel starts it. Route changes only move the
+   * page's declared building, so the conversation carries across pages.
+   */
+  static updateStudioOrgContext(
+    context: StudioWebchatContext,
+    opts: Options,
+    updateToken: number
+  ): void {
+    const orgSlug = coerceStudioContextString(context.organization);
+    if (!orgSlug) {
+      this.clearStudioContext({
+        source: "elise_studio",
+        reason: "missing_context",
+        preserveCache: true,
+      });
+      return;
+    }
+
+    const normalizedOrgSlug = normalizeOrgSlug(orgSlug);
+    const sessionScopeKey = context.sessionScope?.key || `org:${orgSlug}`;
+    const declaredBuildingId = coerceDeclaredBuildingId(
+      context.declaredBuildingId
+    );
+
+    if (
+      this.meChat &&
+      this.activeStudioOrgSlug === normalizedOrgSlug &&
+      !this.activeStudioBuildingSlug &&
+      this.activeStudioSessionScopeKey === sessionScopeKey
+    ) {
+      this.meChat.setDeclaredBuildingId(declaredBuildingId);
+      return;
+    }
+
+    void this.removeWidget().then(() => {
+      if (updateToken !== this.studioUpdateToken) return;
+
+      this.activeStudioOrgSlug = normalizedOrgSlug;
+      this.activeStudioBuildingSlug = "";
+      this.activeStudioSessionScopeKey = sessionScopeKey;
+      this.orgSlug = normalizedOrgSlug;
+
+      this.start(
+        {
+          ...opts,
+          studio: undefined,
+          organization: orgSlug,
+          building: undefined,
+          centralConvo: true,
+        },
+        false
+      );
+      this.meChat?.setDeclaredBuildingId(declaredBuildingId);
+    });
+  }
+
   static clearStudioContext(_context?: StudioWebchatClearContext): void {
     void _context;
     this.studioUpdateToken += 1;
@@ -536,6 +605,11 @@ function normalizeOrgSlug(orgSlug: string): string {
     : orgSlug;
 }
 
+function coerceDeclaredBuildingId(value: unknown): number | null {
+  const id = typeof value === "string" ? Number(value) : value;
+  return typeof id === "number" && Number.isInteger(id) && id > 0 ? id : null;
+}
+
 function coerceStudioSessionScopeKey(
   sessionScope: StudioWebchatSessionScope | undefined,
   buildingSlug: string