@meetelise/chat 1.29.0 → 1.30.1

package/src/WebComponent/FeeCalculator/fee-calculator-styles.ts

@@ -0,0 +1,334 @@
+import { css } from "lit";
+
+export const feeCalculatorStyles = css`
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  .fee-calculator-container {
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 80vw;
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    height: 70vh;
+    overflow: hidden;
+    transition: width 0.15s ease, height 0.15s ease, padding 0.15s ease,
+      margin 0.15s ease;
+  }
+
+  .fee-calculator-container.compact {
+    padding: 12px;
+    max-width: 800px;
+  }
+
+  .calculator-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    transition: margin-bottom 0.15s ease, padding-top 0.15s ease;
+  }
+
+  .calculator-header h1 {
+    font-size: 1.2rem;
+    font-weight: normal;
+    color: #333;
+    transition: font-size 0.15s ease;
+  }
+
+  .calculator-header-right {
+    display: flex;
+    gap: 10px;
+  }
+
+  .calculator-header-divider {
+    height: 1px;
+    background-color: #e0e0e0;
+    transition: margin 0.15s ease;
+  }
+
+  .calculator-content {
+    flex: 1;
+    overflow-y: auto;
+    background-color: #f8f9fa;
+    min-height: 0;
+    transition: padding-top 0.15s ease, width 0.15s ease;
+  }
+
+  .close-button {
+    background: none;
+    border: none;
+    color: #6c757d;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .close-button:hover {
+    background-color: #f0f0f0;
+    color: #000;
+  }
+
+  h1,
+  h2 {
+    margin-top: 0;
+    color: #333;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+    margin-bottom: 8px;
+  }
+
+  .input-group {
+    margin-bottom: 16px;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+  }
+
+  input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+  }
+
+  button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 16px;
+    font-size: 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: background-color 0.15s;
+  }
+
+  button:hover {
+    background-color: #0069d9;
+  }
+
+  button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  .reset-button {
+    background-color: #6c757d;
+    margin-top: 16px;
+  }
+
+  .reset-button:hover {
+    background-color: #5a6268;
+  }
+
+  .calculation-results {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid #eee;
+  }
+
+  .result-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #eee;
+    color: #333;
+  }
+
+  .result-item:last-child {
+    border-bottom: none;
+  }
+
+  .result-item.total {
+    font-weight: bold;
+    font-size: 1.1em;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid #eee;
+  }
+
+  .error-message {
+    color: #dc3545;
+    text-align: center;
+    padding: 16px;
+  }
+
+  .calculator-promos {
+    margin-bottom: 20px;
+  }
+
+  .calculator-charges {
+    margin-bottom: 20px;
+  }
+
+  .fee-disclaimer {
+    color: #666;
+    font-size: 0.8rem;
+    text-align: center;
+    margin-top: 1rem;
+    border-top: 1px solid #e0e0e0;
+  }
+
+  .close-circle-button {
+    position: absolute;
+    bottom: -50px;
+    right: 20px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: #007bff;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    border: none;
+    font-size: 24px;
+    z-index: 10;
+  }
+
+  .close-circle-button:hover {
+    background-color: #0069d9;
+  }
+
+  #calculator-additional-actions {
+    position: fixed;
+    box-sizing: border-box;
+    z-index: 1000000;
+    margin-left: -1rem;
+  }
+
+  .hideActions {
+    display: none;
+  }
+
+  .showActions {
+    display: block;
+  }
+
+  .additional-actions-container {
+    display: flex;
+    justify-content: space-around;
+    gap: 10px;
+  }
+
+  .action-button {
+    flex: 1;
+    background-color: #f8f9fa;
+    color: #333;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 12px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.15s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .action-button:hover {
+    background-color: #e9ecef;
+    border-color: #ced4da;
+  }
+
+  .share-button {
+    color: var(--primary-color, #646987);
+    background-color: var(--background-color, #ffffff);
+  }
+
+  .share-button:hover {
+    background-color: var(--background-color, #ffffff);
+  }
+
+  .apply-button {
+    color: var(--background-color, #646987);
+    background-color: var(--primary-color, #ffffff);
+  }
+
+  .mobile-close-button {
+    display: none;
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    color: #6c757d;
+  }
+
+  @media (max-width: 768px) {
+    .fee-calculator-container {
+      width: 100vw;
+      height: 100vh;
+      padding: 8px;
+      padding-top: 2px;
+      border-radius: 0;
+      margin: 0;
+      max-width: none;
+      box-shadow: none;
+      box-sizing: border-box;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 9999;
+    }
+
+    .calculator-header {
+      margin-bottom: 4px;
+      padding-top: 2px;
+    }
+
+    .calculator-header h1 {
+      font-size: 1.1rem;
+    }
+
+    .calculator-content {
+      padding-top: 2px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .calculator-header-divider {
+      margin: 2px 0;
+    }
+
+    .mobile-close-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+`;

package/src/WebComponent/FeeCalculator/fee-calculator.ts

@@ -0,0 +1,369 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { feeCalculatorStyles } from "./fee-calculator-styles";
+import fetchBuildingWebchatView, {
+  BuildingWebchatView,
+  LayoutOption,
+} from "../../fetchBuildingWebchatView";
+import { BuildingFee, RecurrenceFrequency } from "./model/building-fee";
+import fetchBuildingFees from "../../services/fees/fetchBuildingFees";
+import { ALL_LAYOUTS_OPTION, CALCULATE_DEBOUNCE_MS } from "./constants";
+import {
+  calculateQuote,
+  CalculateQuoteResponse,
+  DesiredAddon,
+  DesiredRentableItem,
+} from "../../services/fees/calculateQuote";
+import { defaultBackgroundColor, defaultPrimaryColor } from "../../themes";
+import debounce from "lodash/debounce";
+import { XOutlineIcon } from "../icons/XOutlineIcon";
+
+import "./components";
+import "./components/fee-calculator-layout/fee-calculator-layout";
+import "../chat-additional-actions";
+
+@customElement("fee-calculator")
+export class FeeCalculator extends LitElement {
+  static styles = feeCalculatorStyles;
+
+  @property({ attribute: true })
+  buildingSlug = "";
+
+  @property({ attribute: true })
+  orgSlug = "";
+
+  @property({ type: String })
+  private primaryColor = defaultPrimaryColor;
+
+  @property({ type: String })
+  private backgroundColor: string = defaultBackgroundColor;
+
+  @property({ attribute: true, type: Boolean })
+  compactDesign = false;
+
+  @property()
+  onCloseClicked: (() => void) | null = null;
+
+  @property()
+  onClickEmailOption: ((e: MouseEvent) => void) | null = null;
+
+  @property()
+  onClickPhoneOption: ((e: MouseEvent) => void) | null = null;
+
+  @property()
+  onClickSSTOption: ((e: MouseEvent) => void) | null = null;
+
+  @property()
+  onClickTextUsOption: ((e: MouseEvent) => void) | null = null;
+
+  @state()
+  private isLoading = false;
+
+  @state()
+  private selectedLayoutIds: number[] = [ALL_LAYOUTS_OPTION];
+
+  @state()
+  private selectedUnitId: number | null = null;
+
+  @state()
+  private desiredAddons: DesiredAddon[] = [];
+
+  @state()
+  private desiredRentableItems: DesiredRentableItem[] = [];
+
+  @state()
+  private leaseTerm = 12;
+
+  @state()
+  private moveInDate: Date | null = null;
+
+  @state()
+  private buildingWebchatView: BuildingWebchatView | null = null;
+
+  @state()
+  enabledChatWidgets: {
+    callDesktop: boolean;
+    chatDesktop: boolean;
+    emailDesktop: boolean;
+    textDesktop: boolean;
+    sstDesktop: boolean;
+  } = {
+    callDesktop: false,
+    chatDesktop: false,
+    emailDesktop: false,
+    textDesktop: false,
+    sstDesktop: false,
+  };
+
+  @state()
+  quote: CalculateQuoteResponse | null = null;
+
+  @state()
+  private groupedFees: Record<RecurrenceFrequency, BuildingFee[]> = {
+    [RecurrenceFrequency.OneTime]: [],
+    [RecurrenceFrequency.Daily]: [],
+    [RecurrenceFrequency.Weekly]: [],
+    [RecurrenceFrequency.BiWeekly]: [],
+    [RecurrenceFrequency.Monthly]: [],
+    [RecurrenceFrequency.Yearly]: [],
+    [RecurrenceFrequency.Unknown]: [],
+  };
+
+  private debouncedCalculateQuote = debounce(async (): Promise<void> => {
+    if (!this.selectedUnitId || !this.moveInDate) return;
+
+    try {
+      this.quote = await calculateQuote({
+        buildingSlug: this.buildingSlug,
+        unitId: this.selectedUnitId,
+        addons: this.desiredAddons,
+        rentableItems: this.desiredRentableItems,
+        leaseTerm: this.leaseTerm,
+        moveInDate: this.moveInDate.toISOString().split("T")[0],
+      });
+    } finally {
+      this.isLoading = false;
+    }
+  }, CALCULATE_DEBOUNCE_MS);
+
+  get layouts(): LayoutOption[] {
+    return this.buildingWebchatView?.layoutOptions ?? [];
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("resize", this.adjustPositionAdditionalActions);
+  }
+
+  disconnectedCallback(): void {
+    window.removeEventListener("resize", this.adjustPositionAdditionalActions);
+    super.disconnectedCallback();
+  }
+
+  firstUpdated = async (): Promise<void> => {
+    this.style.setProperty("--primary-color", this.primaryColor);
+    this.style.setProperty("--background-color", this.backgroundColor);
+
+    await this.setupCalculator();
+  };
+
+  setupCalculator = async (): Promise<void> => {
+    if (!this.buildingSlug || !this.orgSlug) return;
+
+    // TODO(Leo): Faster async loading
+    const [buildingWebchatView, buildingFeeResponse] = await Promise.all([
+      fetchBuildingWebchatView(this.orgSlug, this.buildingSlug),
+      fetchBuildingFees(this.buildingSlug),
+    ]);
+
+    if (!buildingWebchatView || !buildingFeeResponse) return;
+
+    this.buildingWebchatView = buildingWebchatView;
+    this.groupedFees = this.groupFees(buildingFeeResponse.fees);
+
+    this.enabledChatWidgets = {
+      callDesktop: this.buildingWebchatView?.shouldShowPhoneDesktop ?? false,
+      chatDesktop: this.buildingWebchatView?.shouldShowChatDesktop ?? false,
+      emailDesktop: this.buildingWebchatView?.shouldShowEmailDesktop ?? false,
+      sstDesktop: this.buildingWebchatView?.shouldShowSstDesktop ?? false,
+      textDesktop: this.buildingWebchatView?.shouldShowTextDesktop ?? false,
+    };
+  };
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (
+      changedProperties.has("primaryColor") ||
+      changedProperties.has("backgroundColor")
+    ) {
+      this.style.setProperty("--primary-color", this.primaryColor);
+      this.style.setProperty("--background-color", this.backgroundColor);
+    }
+    this.adjustPositionAdditionalActions();
+  }
+
+  calculateQuote = async (): Promise<void> => {
+    if (!this.selectedUnitId || !this.moveInDate) return;
+
+    this.isLoading = true;
+    this.debouncedCalculateQuote();
+  };
+
+  handleUnitSelect = (unitId: number): void => {
+    this.selectedUnitId = unitId;
+    this.calculateQuote();
+  };
+
+  handleMoveInDateChange = (date: Date): void => {
+    this.moveInDate = date;
+    this.calculateQuote();
+  };
+
+  handleLeaseTermChange = (leaseTerm: number): void => {
+    this.leaseTerm = leaseTerm;
+    this.calculateQuote();
+  };
+
+  handleAddonSelect = (addon: DesiredAddon): void => {
+    const isExistingAddon = this.desiredAddons.some((a) => a.id === addon.id);
+    const isRemoving = isExistingAddon && addon.quantity === 0;
+
+    if (isRemoving) {
+      this.desiredAddons = this.desiredAddons.filter((a) => a.id !== addon.id);
+    } else if (isExistingAddon) {
+      this.desiredAddons = this.desiredAddons.map((a) =>
+        a.id === addon.id ? { ...a, quantity: addon.quantity } : a
+      );
+    } else {
+      this.desiredAddons.push(addon);
+    }
+
+    this.calculateQuote();
+  };
+
+  handleRentableItemSelect = (rentableItem: DesiredRentableItem): void => {
+    this.desiredRentableItems = this.desiredRentableItems.filter(
+      (item) => item.id !== rentableItem.id
+    );
+    this.calculateQuote();
+  };
+
+  groupFees = (
+    fees: BuildingFee[]
+  ): Record<RecurrenceFrequency, BuildingFee[]> => {
+    return fees.reduce((acc, fee) => {
+      const feeAppliesToAllLayouts = fee.layoutIds == null;
+      const selectedAllLayouts =
+        this.selectedLayoutIds.includes(ALL_LAYOUTS_OPTION);
+
+      if (!feeAppliesToAllLayouts && !selectedAllLayouts) {
+        const shouldShowFee = fee.layoutIds?.some((id) =>
+          this.selectedLayoutIds.includes(id)
+        );
+        if (!shouldShowFee) return acc;
+      }
+
+      const frequency =
+        fee.blueprint.recurrenceInfo?.frequency || RecurrenceFrequency.Unknown;
+      acc[frequency] = [...(acc[frequency] || []), fee];
+      return acc;
+    }, {} as Record<RecurrenceFrequency, BuildingFee[]>);
+  };
+
+  handleClickEmailOption = (e: MouseEvent): void => {
+    this.handleClose();
+    if (this.onClickEmailOption) this.onClickEmailOption(e);
+  };
+
+  handleClickPhoneOption = (e: MouseEvent): void => {
+    this.handleClose();
+    if (this.onClickPhoneOption) this.onClickPhoneOption(e);
+  };
+
+  handleClickSSTOption = (e: MouseEvent): void => {
+    this.handleClose();
+    if (this.onClickSSTOption) this.onClickSSTOption(e);
+  };
+
+  handleClickTextUsOption = (e: MouseEvent): void => {
+    this.handleClose();
+    if (this.onClickTextUsOption) this.onClickTextUsOption(e);
+  };
+
+  handleClose = (): void => {
+    this.onCloseClicked?.();
+  };
+
+  handleSelectLayout = (layoutIds: number[]): void => {
+    this.selectedLayoutIds = layoutIds;
+  };
+
+  adjustPositionAdditionalActions = (): void => {
+    const additionalActionsElement = this.shadowRoot?.getElementById(
+      "calculator-additional-actions"
+    );
+    if (!additionalActionsElement) return;
+
+    const calculatorContainer = this.shadowRoot?.querySelector(
+      ".fee-calculator-container"
+    );
+
+    const containerCoords = calculatorContainer?.getBoundingClientRect();
+    if (!containerCoords) return;
+
+    additionalActionsElement.style.left = `${containerCoords.left}px`;
+    additionalActionsElement.style.top = `${containerCoords.bottom + 10}px`;
+    additionalActionsElement.style.width = `${containerCoords.width}px`;
+  };
+
+  render(): TemplateResult {
+    const containerClasses = {
+      "fee-calculator-container": true,
+      compact: this.compactDesign,
+    };
+
+    const primaryColorWithFallback = this.primaryColor || "#007bff";
+    const backgroundColorWithFallback = this.backgroundColor || "#ffffff";
+
+    return html`
+      <div
+        class=${classMap(containerClasses)}
+        @keydown=${(e: KeyboardEvent) => e.stopPropagation()}
+        @keyup=${(e: KeyboardEvent) => e.stopPropagation()}
+      >
+        <div class="calculator-header">
+          <h1>Estimated Cost Calculator</h1>
+
+          <div class="calculator-header-right">
+            <button class="share-button">Share</button>
+            <button class="apply-button">Apply</button>
+            <button
+              aria-label="Close fee calculator"
+              class="mobile-close-button"
+              @click=${this.handleClose}
+            >
+              ${XOutlineIcon("black")}
+            </button>
+          </div>
+        </div>
+
+        <div class="calculator-header-divider"></div>
+
+        <div class="calculator-content">
+          <fee-calculator-layout
+            .buildingSlug=${this.buildingSlug}
+            .isLoading=${this.isLoading}
+            .selectedUnitId=${this.selectedUnitId}
+            .groupedFees=${this.groupedFees}
+            .quote=${this.quote}
+            .layoutOptions=${this.layouts}
+            .selectedLayoutIds=${this.selectedLayoutIds}
+            .onSelectLayout=${this.handleSelectLayout}
+            .onUnitSelect=${this.handleUnitSelect}
+            .onMoveInDateChange=${this.handleMoveInDateChange}
+            .onLeaseTermChange=${this.handleLeaseTermChange}
+            .onAddonSelect=${this.handleAddonSelect}
+          ></fee-calculator-layout>
+        </div>
+
+        <div class="fee-disclaimer">
+          <p>Prices subject to change. Additional fees may apply.</p>
+        </div>
+      </div>
+
+      <chat-additional-actions
+        id="calculator-additional-actions"
+        .showChatAdditionalActions=${true}
+        .buildingWebchatView=${this.buildingWebchatView}
+        .primaryColor=${primaryColorWithFallback}
+        .backgroundColor=${backgroundColorWithFallback}
+        .enabledChatWidgets=${this.enabledChatWidgets}
+        .onClose=${() => this.handleClose()}
+        .onClickEmailOption=${this.handleClickEmailOption}
+        .onClickPhoneOption=${this.handleClickPhoneOption}
+        .onClickSSTOption=${this.handleClickSSTOption}
+        .onClickTextUsOption=${this.handleClickTextUsOption}
+      ></chat-additional-actions>
+    `;
+  }
+}

package/src/WebComponent/FeeCalculator/index.ts

@@ -0,0 +1,4 @@
+export { FeeCalculator } from "./fee-calculator";
+
+// TODO(Leo): odd import issue requires this useless function be imported
+export const installFeeCalculator = (): void => undefined;