@meetelise/chat 1.24.2 → 1.25.0

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

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

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

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

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

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

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

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

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

@@ -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;
+  }
+}