@meetelise/chat 1.35.0 → 1.35.2

package/src/WebComponent/FeeCalculator/components/promo-card/promo-card.ts

@@ -0,0 +1,39 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import DollarOutlineIcon from "../../../icons/DollarOutlineIcon";
+
+import promoCardStyles from "./promo-card-styles";
+
+@customElement("promo-card")
+export class PromoCard extends LitElement {
+  static styles = promoCardStyles;
+
+  @property({ type: String })
+  promoAmount = "0";
+
+  @property({ type: String })
+  promoDescription = "";
+
+  @property({ type: String })
+  promoValidity = "";
+
+  render(): TemplateResult {
+    return html`
+      <div class="promo-card">
+        <div class="icon-container">${DollarOutlineIcon()}</div>
+        <div class="content-container">
+          <h2 class="promo-heading">
+            ${this.promoAmount} ${this.promoDescription}
+          </h2>
+          <div class="promo-subtitle">${this.promoValidity}</div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "promo-card": PromoCard;
+  }
+}

package/src/WebComponent/FeeCalculator/constants.ts

@@ -0,0 +1,5 @@
+export const ALL_LAYOUTS_OPTION = -1;
+
+export const CALCULATE_DEBOUNCE_MS = 1000;
+
+export const DEFAULT_LEASE_TERM = 12;

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

@@ -0,0 +1,310 @@
+import { css } from "lit";
+
+export const feeCalculatorStyles = css`
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  .fee-calculator-container {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    height: 80vh;
+    width: 80vw;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: width 0.15s ease, height 0.15s ease, padding 0.15s ease,
+      margin 0.15s ease;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+  }
+
+  .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;
+    color: #333;
+    transition: font-size 0.15s ease;
+  }
+
+  .calculator-header-right {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .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;
+  }
+
+  .incentives-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    margin-bottom: 12px;
+  }
+
+  .incentive-banner {
+    width: 100%;
+    background-color: #e8f2ff;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .incentive-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 3rem;
+    width: 3rem;
+  }
+
+  .incentive-content {
+    flex: 1;
+  }
+
+  .incentive-title {
+    margin: 0;
+    font-size: 1.1rem;
+  }
+
+  .incentive-subtitle {
+    margin: 4px 0 0 0;
+    color: #868e96;
+    font-size: 0.9rem;
+    opacity: 0.9;
+  }
+
+  .close-button {
+    background: none;
+    border: none;
+    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;
+  }
+
+  .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;
+  }
+
+  .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);
+  }
+
+  @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;
+      transform: none;
+      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;
+    }
+  }
+`;

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

@@ -0,0 +1,341 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { feeCalculatorStyles } from "./fee-calculator-styles";
+import fetchBuildingWebchatView, {
+  BuildingWebchatView,
+  LayoutOption,
+} from "../../fetchBuildingWebchatView";
+import fetchBuildingFeesV2 from "../../services/fees/fetchBuildingFeesV2";
+import {
+  ALL_LAYOUTS_OPTION,
+  CALCULATE_DEBOUNCE_MS,
+  DEFAULT_LEASE_TERM,
+} from "./constants";
+import {
+  calculateQuote,
+  CalculateQuoteResponse,
+} from "../../services/fees/calculateQuote";
+import { defaultBackgroundColor, defaultPrimaryColor } from "../../themes";
+import debounce from "lodash/debounce";
+import { XOutlineIcon } from "../icons/XOutlineIcon";
+import { IncentiveV2 } from "../../types/incentive-v2";
+import { Unit } from "../../services/fees/fetchBuildingUnits";
+import { RentableItemSummary } from "./model/rentable-item-summary";
+import { TODAY } from "../../globals";
+import {
+  BuildingFeeFrequency,
+  BuildingFeeView,
+} from "./model/building-fee-view";
+import { DesiredAddon } from "./model/desired-addon";
+import { DesiredRentableItem } from "./model/desired-rentable-item";
+import { ItemQuantity } from "./model/item-quantity";
+
+import "./components";
+import "./components/fee-calculator-layout/fee-calculator-layout";
+import "../chat-additional-actions";
+import "./components/incentive-banner";
+
+@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()
+  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 selectedUnit: Unit | null = null;
+
+  @state()
+  private desiredAddons: DesiredAddon[] = [];
+
+  @state()
+  private desiredRentableItems: DesiredRentableItem[] = [];
+
+  @state()
+  private leaseTerm = DEFAULT_LEASE_TERM;
+
+  @state()
+  private moveInDate: Date | null = TODAY;
+
+  @state()
+  private buildingWebchatView: BuildingWebchatView | null = null;
+
+  @state()
+  private incentives: IncentiveV2[] = [];
+
+  @state()
+  quote: CalculateQuoteResponse | null = null;
+
+  @state()
+  private groupedFees: Record<BuildingFeeFrequency, BuildingFeeView[]> = {
+    [BuildingFeeFrequency.OneTime]: [],
+    [BuildingFeeFrequency.Monthly]: [],
+    [BuildingFeeFrequency.Quarterly]: [],
+    [BuildingFeeFrequency.Annually]: [],
+    [BuildingFeeFrequency.PerOccurrence]: [],
+  };
+
+  @state()
+  private rentableItems: RentableItemSummary[] = [];
+
+  private debouncedCalculateQuote = debounce(async (): Promise<void> => {
+    if (!this.selectedUnit || !this.moveInDate) return;
+
+    // If lead's desired move in date is before the their selected unit's earliest available date
+    // use the unit's earliest available date (otherwise pricing will be incorrect)
+    const moveInDate =
+      this.moveInDate < new Date(this.selectedUnit.earliestAvailable)
+        ? this.selectedUnit.earliestAvailable
+        : this.moveInDate?.toISOString().split("T")[0];
+
+    try {
+      this.quote = await calculateQuote({
+        buildingSlug: this.buildingSlug,
+        unitId: this.selectedUnit.id,
+        addons: this.desiredAddons,
+        rentableItems: this.desiredRentableItems,
+        leaseTerm: this.leaseTerm,
+        moveInDate,
+      });
+    } finally {
+      this.isLoading = false;
+    }
+  }, CALCULATE_DEBOUNCE_MS);
+
+  // TODO(Leo): use layouts from units response instead?
+  get layouts(): LayoutOption[] {
+    return this.buildingWebchatView?.layoutOptions ?? [];
+  }
+
+  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;
+
+    this.isLoading = true;
+    const [buildingWebchatView, buildingFeeResponse] = await Promise.all([
+      fetchBuildingWebchatView(this.orgSlug, this.buildingSlug),
+      fetchBuildingFeesV2(this.buildingSlug),
+    ]);
+
+    if (!buildingWebchatView || !buildingFeeResponse) return;
+
+    this.buildingWebchatView = buildingWebchatView;
+    this.groupedFees = this.groupFees(buildingFeeResponse.fees);
+    this.rentableItems = buildingFeeResponse.rentableItems;
+    // TODO(Leo): Re-enable
+    // this.incentives = buildingFeeResponse.buildingIncentives;
+    this.isLoading = 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);
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.debouncedCalculateQuote.cancel();
+  }
+
+  calculateQuote = async (): Promise<void> => {
+    if (!this.selectedUnit || !this.moveInDate) return;
+
+    this.isLoading = true;
+    this.debouncedCalculateQuote();
+  };
+
+  handleUnitSelect = (unit: Unit): void => {
+    this.selectedUnit = unit;
+    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.quantities.every((q: ItemQuantity) => q.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, quantities: addon.quantities } : a
+      );
+    } else {
+      this.desiredAddons.push(addon);
+    }
+
+    this.calculateQuote();
+  };
+
+  handleRentableItemSelect = (rentableItem: DesiredRentableItem): void => {
+    const isExistingRentableItem = this.desiredRentableItems.some(
+      (item) => item.id === rentableItem.id
+    );
+
+    if (isExistingRentableItem) {
+      this.desiredRentableItems = this.desiredRentableItems.filter(
+        (item) => item.id !== rentableItem.id
+      );
+    } else {
+      this.desiredRentableItems.push(rentableItem);
+    }
+
+    this.calculateQuote();
+  };
+
+  groupFees = (
+    fees: BuildingFeeView[]
+  ): Record<BuildingFeeFrequency, BuildingFeeView[]> => {
+    return fees.reduce((acc, fee) => {
+      const frequency = fee.frequency || BuildingFeeFrequency.OneTime;
+      acc[frequency] = [...(acc[frequency] || []), fee];
+      return acc;
+    }, {} as Record<BuildingFeeFrequency, BuildingFeeView[]>);
+  };
+
+  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;
+  };
+
+  render(): TemplateResult {
+    return html`
+      <div
+        class="fee-calculator-container"
+        @keydown=${(e: KeyboardEvent) => e.stopPropagation()}
+        @keyup=${(e: KeyboardEvent) => e.stopPropagation()}
+      >
+        <div class="calculator-header">
+          <h1>Estimated Cost Calculator</h1>
+
+          <div class="calculator-header-right">
+            <!-- TODO(Leo): Return once reqs are clear; also need apps link -->
+            <!-- <button class="share-button">Share</button> -->
+            <!-- <button class="apply-button">Apply</button> -->
+            <button
+              aria-label="Close fee calculator"
+              class="close-button"
+              @click=${this.handleClose}
+            >
+              ${XOutlineIcon("gray")}
+            </button>
+          </div>
+        </div>
+
+        <div class="calculator-header-divider"></div>
+
+        <div class="calculator-content">
+          ${this.incentives.length
+            ? html`
+                <div class="incentives-container">
+                  ${this.incentives.map(
+                    (incentive) => html`
+                      <incentive-banner
+                        .incentive=${incentive}
+                      ></incentive-banner>
+                    `
+                  )}
+                </div>
+              `
+            : ""}
+
+          <fee-calculator-layout
+            .buildingSlug=${this.buildingSlug}
+            .isLoading=${this.isLoading}
+            .selectedUnit=${this.selectedUnit}
+            .groupedFees=${this.groupedFees}
+            .rentableItems=${this.rentableItems}
+            .quote=${this.quote}
+            .layoutOptions=${this.layouts}
+            .selectedLayoutIds=${this.selectedLayoutIds}
+            .onSelectLayout=${this.handleSelectLayout}
+            .onUnitSelect=${this.handleUnitSelect}
+            .onMoveInDateChange=${this.handleMoveInDateChange}
+            .onLeaseTermChange=${this.handleLeaseTermChange}
+            .onAddonSelect=${this.handleAddonSelect}
+            .onRentableItemSelect=${this.handleRentableItemSelect}
+          ></fee-calculator-layout>
+        </div>
+
+        <div class="fee-disclaimer">
+          <p>Prices subject to change. Additional fees may apply.</p>
+        </div>
+      </div>
+    `;
+  }
+}

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;