@meetelise/chat 1.25.1 → 1.25.3

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

@@ -1,280 +0,0 @@
-import { css } from "lit";
-
-export const feeCalculatorStyles = css`
-  :host {
-    display: block;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-    position: relative;
-  }
-
-  .fee-calculator-container {
-    background-color: var(--background-color, #ffffff);
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    width: 45vw;
-    max-width: 1000px;
-    margin: 0 auto;
-  }
-
-  .fee-calculator-container.compact {
-    padding: 12px;
-    max-width: 600px;
-  }
-
-  .calculator-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-  }
-
-  .calculator-header h1 {
-    font-size: 1.2rem;
-    font-weight: normal;
-    color: #333;
-  }
-
-  .calculator-header-right {
-    display: flex;
-    gap: 10px;
-  }
-
-  .calculator-header-divider {
-    height: 1px;
-    background-color: #e0e0e0;
-    margin-bottom: 20px;
-  }
-
-  .calculator-body {
-    padding: 20px 20px 5px 20px;
-    background-color: #f1f3f5;
-    max-height: 50vh;
-    overflow-y: scroll;
-  }
-
-  .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: var(--primary-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.2s;
-  }
-
-  button:hover {
-    background-color: var(--primary-color-dark, #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;
-  }
-
-  .calculator-disclaimer {
-    color: #666;
-    font-size: 0.8rem;
-    text-align: center;
-  }
-
-  .close-circle-button {
-    position: absolute;
-    bottom: -50px;
-    right: 20px;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background-color: var(--primary-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: var(--primary-color-dark, #0069d9);
-  }
-
-  .additional-actions-toggle {
-    position: absolute;
-    bottom: -50px;
-    left: 20px;
-    background-color: var(--primary-color, #007bff);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 10px 16px;
-    font-size: 14px;
-    cursor: pointer;
-    z-index: 10;
-  }
-
-  .additional-actions-toggle:hover {
-    background-color: var(--primary-color-dark, #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.2s;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .action-button:hover {
-    background-color: #e9ecef;
-    border-color: #ced4da;
-  }
-
-  .share-button {
-    color: #347ff7;
-    background-color: white;
-  }
-`;

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

@@ -1,256 +0,0 @@
-import { LitElement, html, TemplateResult } from "lit";
-import { customElement, property, query, 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 "./components";
-import "../chat-additional-actions";
-
-@customElement("fee-calculator")
-export class FeeCalculator extends LitElement {
-  static styles = feeCalculatorStyles;
-
-  @property({ attribute: true })
-  buildingSlug = "";
-
-  @property({ attribute: true })
-  orgSlug = "";
-
-  @property({ attribute: true })
-  primaryColor = "#007bff";
-
-  @property({ attribute: true })
-  backgroundColor = "#ffffff";
-
-  @property({ attribute: true, type: Boolean })
-  compactDesign = false;
-
-  @property()
-  onCloseClicked: ((e: MouseEvent) => void) | null = null;
-
-  @state()
-  private isLoading = false;
-
-  @state()
-  private buildingWebchatView: BuildingWebchatView | null = null;
-
-  @state()
-  private groupedFees: Record<RecurrenceFrequency, BuildingFee[]> = {
-    [RecurrenceFrequency.OneTime]: [],
-    [RecurrenceFrequency.Daily]: [],
-    [RecurrenceFrequency.Weekly]: [],
-    [RecurrenceFrequency.BiWeekly]: [],
-    [RecurrenceFrequency.Monthly]: [],
-    [RecurrenceFrequency.Yearly]: [],
-    [RecurrenceFrequency.Unknown]: [],
-  };
-
-  get layouts(): LayoutOption[] {
-    return this.buildingWebchatView?.layoutOptions ?? [];
-  }
-
-  @state()
-  private enabledChatWidgets: {
-    callDesktop: boolean;
-    callMobile: boolean;
-    chatMobile: boolean;
-    chatDesktop: boolean;
-    emailDesktop: boolean;
-    emailMobile: boolean;
-    textDesktop: boolean;
-    textMobile: boolean;
-    sstDesktop: boolean;
-    sstMobile: boolean;
-  } = {
-    callDesktop: false,
-    callMobile: false,
-    chatMobile: false,
-    chatDesktop: false,
-    emailDesktop: false,
-    emailMobile: false,
-    textDesktop: false,
-    textMobile: false,
-    sstDesktop: false,
-    sstMobile: false,
-  };
-
-  @query("#baseAmountInput")
-  baseAmountInput!: HTMLInputElement;
-
-  @query("#feePercentageInput")
-  feePercentageInput!: HTMLInputElement;
-
-  constructor() {
-    super();
-  }
-
-  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;
-
-    const [buildingWebchatView, fees] = await Promise.all([
-      fetchBuildingWebchatView(this.orgSlug, this.buildingSlug),
-      fetchBuildingFees(this.buildingSlug),
-    ]);
-
-    if (!buildingWebchatView || !fees) return;
-
-    this.buildingWebchatView = buildingWebchatView;
-    this.groupedFees = this.groupFees(fees);
-  };
-
-  groupFees = (
-    fees: BuildingFee[]
-  ): Record<RecurrenceFrequency, BuildingFee[]> => {
-    return fees.reduce((acc, fee) => {
-      const frequency =
-        fee.blueprint.recurrenceInfo?.frequency || RecurrenceFrequency.Unknown;
-      acc[frequency] = [...(acc[frequency] || []), fee];
-      return acc;
-    }, {} as Record<RecurrenceFrequency, BuildingFee[]>);
-  };
-
-  handleClose = (e: MouseEvent): void => {
-    e.preventDefault();
-    if (this.onCloseClicked) {
-      this.onCloseClicked(e);
-    }
-  };
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    window.addEventListener("resize", this.adjustPositionAdditionalActions);
-  }
-
-  disconnectedCallback(): void {
-    window.removeEventListener("resize", this.adjustPositionAdditionalActions);
-    super.disconnectedCallback();
-  }
-
-  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();
-  }
-
-  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)}>
-        <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>
-          </div>
-        </div>
-
-        <div class="calculator-header-divider"></div>
-
-        <floor-plan-selector
-          .primaryColor=${this.primaryColor}
-          .floorPlans=${this.layouts}
-          .selectedLayoutId=${-1}
-        ></floor-plan-selector>
-
-        <div class="calculator-body">
-          <div class="calculator-promos">
-            <promo-card
-              .primaryColor=${this.primaryColor}
-              promoAmount="(Example) $500"
-              promoDescription="off first month"
-              promoValidity="Valid through Mar 1, 2025 for all units"
-            ></promo-card>
-          </div>
-
-          <div class="calculator-charges">
-            <collapsible-fee-section
-              .primaryColor=${this.primaryColor}
-              title="Monthly Charges"
-              totalLabel="Est. Total Charge"
-              .buildingFees=${this.groupedFees[RecurrenceFrequency.Monthly]}
-            ></collapsible-fee-section>
-          </div>
-
-          <div class="calculator-charges">
-            <collapsible-fee-section
-              .primaryColor=${this.primaryColor}
-              title="Prior to Move-in"
-              totalLabel="Total Due at Signing"
-              .buildingFees=${this.groupedFees[RecurrenceFrequency.OneTime]}
-            ></collapsible-fee-section>
-          </div>
-
-          <div class="calculator-disclaimer">
-            <p>Prices subject to change. Additional fees may apply.</p>
-          </div>
-        </div>
-      </div>
-
-      <chat-additional-actions
-        id="calculator-additional-actions"
-        .showChatAdditionalActions=${!this.isLoading}
-        .buildingWebchatView=${this.buildingWebchatView}
-        .primaryColor=${primaryColorWithFallback}
-        .backgroundColor=${backgroundColorWithFallback}
-        .enabledChatWidgets=${this.enabledChatWidgets}
-        .onClickMinimize=${(): void => {
-          /* TODO */
-        }}
-        .onClickEmailOption=${(): void => {
-          /* TODO */
-        }}
-        .onClickPhoneOption=${(): void => {
-          /* TODO */
-        }}
-        .onClickSSTOption=${(): void => {
-          /* TODO */
-        }}
-        .onClose=${this.handleClose}
-      ></chat-additional-actions>
-    `;
-  }
-}

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;

package/src/WebComponent/FeeCalculator/model/building-fee.ts

@@ -1,83 +0,0 @@
-import { TransactionCategory } from "./transaction-category";
-
-export interface BuildingFee {
-  id: number;
-  buildingId: number;
-  blueprint: FeeBlueprint;
-  unitIds: number[] | null;
-  layoutIds: number[] | null;
-  startDate: Date | null;
-  endDate: Date | null;
-  source: string | null;
-  timeCreated: Date;
-  externalKey: string | null;
-  syncActive: boolean;
-  hiddenReason: string | null;
-  refundable: boolean | null;
-  required?: boolean;
-}
-
-interface FeeBlueprint {
-  transactionId: number | null;
-  transactionAmount: number | null;
-  flowDirection: TransactionFlow;
-  transactionDescription: string | null;
-  category: TransactionCategory;
-  recurrenceInfo: RecurrenceInfo | null;
-  adjustmentInfo: AdjustmentInfo | null;
-  triggerInfo: TriggerInfo | null;
-  addOnInfo: AddOnInfo | null;
-  priceType: PriceType;
-  handledByThirdParty: boolean;
-  handledByThirdPartyReasoning: string | null;
-  leaseStartDate: Date | null;
-  leaseEndDate: Date | null;
-}
-
-interface AdjustmentInfo {
-  reason: string;
-  percentage: number;
-}
-
-export enum RecurrenceFrequency {
-  OneTime = "OneTime",
-  Daily = "Daily",
-  Weekly = "Weekly",
-  BiWeekly = "BiWeekly",
-  Monthly = "Monthly",
-  Yearly = "Yearly",
-  Unknown = "Unknown",
-}
-
-interface RecurrenceInfo {
-  frequency: RecurrenceFrequency;
-  startDate: Date | null;
-  endDate: Date | null;
-}
-
-interface TriggerInfo {
-  triggerEvent: string;
-  maxDaysBeforeEvent: number;
-  maxDaysAfterEvent: number;
-  triggerEventEmbedding: number[] | null;
-  startDate: Date | null;
-  endDate: Date | null;
-}
-
-interface AddOnInfo {
-  addOnType: string;
-  maxUnitsCharged: number | null;
-  minUnitsCharged: number | null;
-  addOnTypeEmbedding: number[] | null;
-}
-
-enum TransactionFlow {
-  Debit = "Debit",
-  Credit = "Credit",
-}
-
-enum PriceType {
-  Fixed = "Fixed",
-  UsageBased = "UsageBased",
-  Varies = "Varies",
-}

package/src/WebComponent/FeeCalculator/model/transaction-category.ts

@@ -1,23 +0,0 @@
-export enum TransactionCategory {
-  AdminFee = "AdminFee",
-  ApplicationFee = "ApplicationFee",
-  Concession = "Concession",
-  Insurance = "Insurance",
-  LateFee = "LateFee",
-  Legal = "Legal",
-  NonSufficientFundFee = "NSF",
-  Other = "Other",
-  Parking = "Parking",
-  Penalty = "Penalty",
-  Pest = "Pest",
-  PetDeposit = "PetDeposit",
-  PetRent = "PetRent",
-  Refund = "Refund",
-  Relet = "Relet",
-  Rent = "Rent",
-  SecurityDeposit = "SecurityDeposit",
-  Storage = "Storage",
-  Trash = "Trash",
-  Utility = "Utility",
-  WaterSewer = "WaterSewer",
-}