@meetelise/chat 1.55.2 → 1.56.0

package/src/WebComponent/pubnub-navigation.ts

@@ -0,0 +1,73 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { SimpleNavigationChatMessage } from "../MyPubnub";
+import { isMobile } from "../utils";
+import { takeMeThere } from "../webchatNavigation";
+import { InputStyles } from "./actions/InputStyles";
+import { pubnubChatStyles } from "./pubnub-chat-styles";
+
+/** The "Take me to {label}" button the agent sends after a reply. */
+@customElement("pubnub-navigation")
+export class PubnubNavigation extends LitElement {
+  static styles = [
+    InputStyles,
+    pubnubChatStyles,
+    css`
+      .navigation-button {
+        cursor: pointer;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 12px;
+        background: black;
+        color: white;
+        font-family: inherit;
+        text-align: left;
+        line-height: 1.4;
+      }
+      .navigation-button:hover {
+        opacity: 0.85;
+      }
+      .navigation-button:focus-visible {
+        outline: 2px solid #4d90fe;
+        outline-offset: 2px;
+      }
+    `,
+  ];
+
+  @property({ attribute: false })
+  message: SimpleNavigationChatMessage | undefined;
+
+  @property({ attribute: false })
+  onMount: () => void = () => ({});
+
+  /** Overridable in tests; navigates the same tab by default. */
+  @property({ attribute: false })
+  navigate: (url: string) => void = (url) => window.location.assign(url);
+
+  updated(): void {
+    this.onMount();
+  }
+
+  render(): TemplateResult {
+    if (!this.message) return html``;
+    const { navigation } = this.message;
+    return html`<button
+      type="button"
+      class=${classMap({
+        ["navigation-button"]: true,
+        ["webchat-font__desktop"]: !isMobile(),
+        ["webchat-font__mobile"]: isMobile(),
+      })}
+      @click=${() => takeMeThere(navigation, this.navigate)}
+    >
+      Take me to ${navigation.label}
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pubnub-navigation": PubnubNavigation;
+  }
+}

package/src/feeCalculatorLeaseTerm.test.ts

@@ -0,0 +1,71 @@
+import { expect } from "@esm-bundle/chai";
+import "../public/dist/index";
+import type { FloorPlanSelector } from "./WebComponent/FeeCalculator/components/floor-plan-selector/floor-plan-selector";
+
+describe("floor-plan-selector lease term", () => {
+  let selector: FloorPlanSelector;
+  let sentLeaseTerms: number[];
+
+  const getLeaseTermInput = (): HTMLInputElement => {
+    const input = selector.shadowRoot?.querySelector<HTMLInputElement>(
+      'input[type="number"]'
+    );
+    if (!input) throw new Error("Expected lease term input");
+    return input;
+  };
+
+  const enterLeaseTerm = async (value: string): Promise<void> => {
+    const input = getLeaseTermInput();
+    input.value = value;
+    input.dispatchEvent(new Event("input"));
+    await selector.updateComplete;
+  };
+
+  beforeEach(async () => {
+    sentLeaseTerms = [];
+    selector = document.createElement(
+      "floor-plan-selector"
+    ) as FloorPlanSelector;
+    selector.onLeaseTermChange = (leaseTerm) => sentLeaseTerms.push(leaseTerm);
+    document.body.appendChild(selector);
+    await selector.updateComplete;
+  });
+
+  afterEach(() => {
+    selector.remove();
+  });
+
+  it("starts on the default lease term", () => {
+    expect(getLeaseTermInput().value).to.equal("12");
+  });
+
+  it("sends each lease term the prospect types", async () => {
+    await enterLeaseTerm("1");
+    await enterLeaseTerm("18");
+
+    expect(sentLeaseTerms).to.deep.equal([1, 18]);
+  });
+
+  it("keeps the box empty without sending anything while it is retyped", async () => {
+    await enterLeaseTerm("");
+    // A rerender, for example from new units arriving, must not refill the box.
+    selector.requestUpdate();
+    await selector.updateComplete;
+
+    expect(getLeaseTermInput().value).to.equal("");
+    expect(sentLeaseTerms).to.deep.equal([]);
+
+    await enterLeaseTerm("1");
+    await enterLeaseTerm("18");
+
+    expect(getLeaseTermInput().value).to.equal("18");
+    expect(sentLeaseTerms).to.deep.equal([1, 18]);
+  });
+
+  it("ignores lease terms below one month", async () => {
+    await enterLeaseTerm("0");
+    await enterLeaseTerm("-6");
+
+    expect(sentLeaseTerms).to.deep.equal([]);
+  });
+});

package/src/main/MEChat.ts

@@ -66,7 +66,11 @@ export interface StudioWebchatContext {
 
 export interface StudioWebchatClearContext {
   source?: "elise_studio";
-  reason?: "no_property_for_route" | "webchat_disabled" | "ambiguous_route" | string;
+  reason?:
+    | "no_property_for_route"
+    | "webchat_disabled"
+    | "ambiguous_route"
+    | string;
   preserveCache?: boolean;
 }
 
@@ -209,6 +213,10 @@ export default class MEChat {
         // Centralized webchat is org-anchored: config comes from the org, not a
         // per-building slug or site resolution.
         meChatElement.setAttribute("centralConvo", "true");
+        if (opts.building) {
+          // Page context only: sent with visitor messages as declaredBuildingId.
+          meChatElement.setAttribute("declaredBuildingSlug", opts.building);
+        }
       } else {
         this.handleBuildingslug(
           meChatElement as MEChatLitElement,