@meetelise/chat 1.25.1 → 1.25.3

package/src/WebComponent/FeeCalculator/components/collapsible-fee-section/collapsible-fee-section-styles.ts

@@ -1,86 +0,0 @@
-import { css } from "lit";
-
-const collapsibleFeeSectionStyles = css`
-  :host {
-    display: block;
-    margin-bottom: 20px;
-  }
-
-  .calculator-fees-collapse-container {
-    width: 100%;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  .calculator-fees-collapse-header {
-    cursor: pointer;
-    padding: 12px 16px;
-    background-color: #ffffff;
-  }
-
-  .calculator-fees-collapse-header > div {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .title,
-  .large-amount {
-    font-size: 1.2rem;
-    font-weight: 510;
-  }
-
-  .details-toggle {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--primary-color, #007bff);
-    font-size: 0.9rem;
-  }
-
-  .chevron {
-    display: inline-flex;
-    transition: transform 0.2s ease;
-    transform: rotate(90deg);
-  }
-
-  .chevron-down {
-    transform: rotate(180deg);
-  }
-
-  .calculator-fees-collapse-content {
-    transition: max-height 0.3s ease, opacity 0.3s ease;
-    overflow: hidden;
-    background-color: #f8f9fa;
-    padding: 0 16px;
-  }
-
-  .calculator-fees-collapse-content.hidden {
-    max-height: 0;
-    opacity: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .calculator-fees-collapse-content.visible {
-    max-height: 500px;
-    opacity: 1;
-    padding-top: 16px;
-    padding-bottom: 16px;
-  }
-
-  .calculator-fees-collapse-footer {
-    padding: 16px;
-    border-top: 1px solid #eee;
-    background-color: #ffffff;
-  }
-
-  .calculator-fees-collapse-footer > div {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-`;
-
-export default collapsibleFeeSectionStyles;

package/src/WebComponent/FeeCalculator/components/collapsible-fee-section/collapsible-fee-section.ts

@@ -1,94 +0,0 @@
-import { LitElement, html, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { ChevronRightIcon } from "../../../icons/ChevronRightIcon";
-import { BuildingFee } from "../../model/building-fee";
-
-import "../fee-item/fee-item";
-import collapsibleFeeSectionStyles from "./collapsible-fee-section-styles";
-import { formatCurrency } from "../../../../utils";
-
-@customElement("collapsible-fee-section")
-export class CollapsibleFeeSection extends LitElement {
-  static styles = collapsibleFeeSectionStyles;
-
-  @property({ type: String })
-  primaryColor = "#007bff";
-
-  @property({ type: String })
-  title = "Fees";
-
-  @property({ type: String })
-  totalLabel = "Total";
-
-  @property({ type: Array })
-  buildingFees: BuildingFee[] = [];
-
-  @state()
-  private isDetailsVisible = false;
-
-  get totalAmount(): string {
-    return formatCurrency(
-      this.buildingFees.reduce(
-        (acc, item) => acc + (item.blueprint?.transactionAmount ?? 0),
-        0
-      )
-    );
-  }
-
-  toggleDetails = (): void => {
-    this.isDetailsVisible = !this.isDetailsVisible;
-  };
-
-  get detailsText(): string {
-    return this.isDetailsVisible ? "Hide Details" : "Fees & Cost Breakdown";
-  }
-
-  render(): TemplateResult {
-    return html`
-      <div class="calculator-fees-collapse-container">
-        <div
-          class="calculator-fees-collapse-header"
-          @click=${this.toggleDetails}
-        >
-          <div>
-            <h1 class="title">${this.title}</h1>
-            <div class="details-toggle">
-              <span>${this.detailsText}</span>
-              <span
-                class="chevron ${this.isDetailsVisible ? "chevron-down" : ""}"
-              >
-                ${ChevronRightIcon(this.primaryColor)}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="calculator-fees-collapse-content ${this.isDetailsVisible
-            ? "visible"
-            : "hidden"}"
-        >
-          ${this.buildingFees.map(
-            (item) => html`
-              <fee-item .feeItem=${item}></fee-item>
-              <hr />
-            `
-          )}
-        </div>
-
-        <div class="calculator-fees-collapse-footer">
-          <div>
-            <h1 class="title">${this.totalLabel}</h1>
-            <h1 class="large-amount">${this.totalAmount}</h1>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "collapsible-fee-section": CollapsibleFeeSection;
-  }
-}

package/src/WebComponent/FeeCalculator/components/fee-item/fee-item-styles.ts

@@ -1,47 +0,0 @@
-import { css } from "lit";
-
-const feeItemStyles = css`
-  :host {
-    display: block;
-  }
-
-  .fee-item {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  }
-
-  .result-item:last-child {
-    border-bottom: none;
-    margin-bottom: 0;
-  }
-
-  .fee-info {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .required-label {
-    color: #868e96;
-    font-size: 0.8rem;
-  }
-
-  .fee-name {
-    font-size: 1rem;
-    font-weight: 500;
-    margin: 0.4rem 0;
-  }
-
-  .fee-description {
-    color: #868e96;
-    font-size: 0.8rem;
-  }
-
-  .fee-amount {
-    font-size: 1rem;
-    align-self: center;
-  }
-`;
-
-export default feeItemStyles;

package/src/WebComponent/FeeCalculator/components/fee-item/fee-item.ts

@@ -1,50 +0,0 @@
-import { LitElement, html, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { BuildingFee } from "../../model/building-fee";
-import { formatCurrency, sentenceTitleCase } from "../../../../utils";
-
-import feeItemStyles from "./fee-item-styles";
-
-@customElement("fee-item")
-export class FeeItemComponent extends LitElement {
-  static styles = feeItemStyles;
-
-  @property({ type: Object })
-  feeItem: BuildingFee | null = null;
-
-  get feeName(): string {
-    const category = this.feeItem?.blueprint.category;
-    if (!category) return "Fee";
-    return sentenceTitleCase(category);
-  }
-
-  get feeAmount(): string {
-    const amount = this.feeItem?.blueprint.transactionAmount;
-    return formatCurrency(amount ?? 0);
-  }
-
-  render(): TemplateResult {
-    if (!this.feeItem) return html``;
-
-    return html`
-      <div class="fee-item">
-        <div class="fee-info">
-          ${this.feeItem.required
-            ? html`<div class="required-label">Required</div>`
-            : ""}
-          <div class="fee-name">${this.feeName}</div>
-          <div class="fee-description">
-            ${this.feeItem.blueprint.transactionDescription}
-          </div>
-        </div>
-        <div class="fee-amount">${this.feeAmount}</div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "fee-item": FeeItemComponent;
-  }
-}

package/src/WebComponent/FeeCalculator/components/floor-plan-selector/floor-plan-selector-styles.ts

@@ -1,46 +0,0 @@
-import { css } from "lit";
-
-const floorPlanSelectorStyles = css`
-  :host {
-    display: block;
-    margin-bottom: 16px;
-  }
-
-  .floor-plan-selector {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .floor-plan-selector-label {
-    font-size: 0.9rem;
-    margin-bottom: 8px;
-  }
-
-  .floor-plan-selector-badges {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .floor-plan-badge {
-    padding: 6px 12px;
-    border-radius: 16px;
-    font-size: 0.9rem;
-    cursor: pointer;
-    background-color: #f0f0f0;
-    border: 1px solid #ddd;
-    transition: all 0.2s ease;
-  }
-
-  .floor-plan-badge:hover {
-    background-color: #e6e6e6;
-  }
-
-  .floor-plan-badge.selected {
-    background-color: var(--primary-color, #007bff);
-    color: white;
-    border-color: var(--primary-color, #007bff);
-  }
-`;
-
-export default floorPlanSelectorStyles;

package/src/WebComponent/FeeCalculator/components/floor-plan-selector/floor-plan-selector.ts

@@ -1,70 +0,0 @@
-import { LitElement, html, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { LayoutOption } from "../../../../fetchBuildingWebchatView";
-
-import floorPlanSelectorStyles from "./floor-plan-selector-styles";
-
-@customElement("floor-plan-selector")
-export class FloorPlanSelector extends LitElement {
-  static styles = floorPlanSelectorStyles;
-
-  @property({ type: Array })
-  floorPlans: LayoutOption[] = [];
-
-  @property({ type: Number })
-  selectedLayoutId: number | null = null;
-
-  @property({ type: String })
-  primaryColor = "#007bff";
-
-  @property({ type: String })
-  allOptionId = "all";
-
-  private handleFloorPlanClick(id: number) {
-    this.selectedLayoutId = id;
-    this.dispatchEvent(
-      new CustomEvent("floor-plan-selected", {
-        detail: { id },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private get displayOptions(): LayoutOption[] {
-    const allOption: LayoutOption = {
-      value: -1,
-      label: "All",
-    };
-
-    return [allOption, ...this.floorPlans].sort((a, b) => a.value - b.value);
-  }
-
-  render(): TemplateResult {
-    return html`
-      <div class="floor-plan-selector">
-        <div class="floor-plan-selector-label">Select Floor Plan</div>
-        <div class="floor-plan-selector-badges">
-          ${this.displayOptions.map(
-            (opt) => html`
-              <div
-                class="floor-plan-badge ${opt.value === this.selectedLayoutId
-                  ? "selected"
-                  : ""}"
-                @click=${() => this.handleFloorPlanClick(opt.value)}
-              >
-                ${opt.label}
-              </div>
-            `
-          )}
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "floor-plan-selector": FloorPlanSelector;
-  }
-}

package/src/WebComponent/FeeCalculator/components/index.ts

@@ -1,3 +0,0 @@
-export * from "./promo-card/promo-card";
-export * from "./floor-plan-selector/floor-plan-selector";
-export * from "./collapsible-fee-section/collapsible-fee-section";

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

@@ -1,39 +0,0 @@
-import { css } from "lit";
-
-const promoCardStyles = css`
-  :host {
-    display: block;
-    margin-bottom: 20px;
-  }
-
-  .promo-card {
-    background-color: #e6f2ff;
-    border-radius: 8px;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-  }
-
-  .icon-container {
-    display: flex;
-    justify-content: center;
-    margin-right: 16px;
-  }
-
-  .content-container {
-    flex: 1;
-  }
-
-  .promo-heading {
-    font-size: 1.2rem;
-    font-weight: normal;
-    margin: 0 0 4px 0;
-  }
-
-  .promo-subtitle {
-    color: #868e96;
-    font-size: 0.8rem;
-  }
-`;
-
-export default promoCardStyles;

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

@@ -1,39 +0,0 @@
-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;
-  }
-}