@meetelise/chat 1.34.2 → 1.34.4

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

@@ -1,310 +0,0 @@
-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

@@ -1,341 +0,0 @@
-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

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