@meetelise/chat 1.34.2 → 1.34.4

package/src/WebComponent/FeeCalculator/components/addons/addon-item-matrix-qty-selector/addon-item-matrix-qty-selector-styles.ts

@@ -1,35 +0,0 @@
-import { css } from "lit";
-import commonAddonStyles from "../common-addon-styles";
-
-export default [
-  commonAddonStyles,
-  css`
-    .quantity-controls-container {
-      display: flex;
-      gap: 12px;
-    }
-
-    .quantity-control {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      border: 1px solid #dee2e6;
-      border-radius: 4px;
-    }
-
-    .quantity-buttons {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    .quantity-value {
-      min-width: 80px;
-      text-align: center;
-      font-size: 0.875rem;
-      color: #374151;
-    }
-  `,
-];

package/src/WebComponent/FeeCalculator/components/addons/addon-item-matrix-qty-selector/addon-item-matrix-qty-selector.ts

@@ -1,206 +0,0 @@
-import { LitElement, html, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { BuildingFeeView, DesiredAddon, PricingRule } from "../../../model";
-
-import styles from "./addon-item-matrix-qty-selector-styles";
-
-@customElement("addon-item-matrix-qty-selector")
-export class AddonItemMatrixQtySelector extends LitElement {
-  static styles = styles;
-
-  @property({ type: Object })
-  set feeItem(value: BuildingFeeView | null) {
-    const oldValue = this._feeItem;
-    this._feeItem = value;
-    // Reset quantities when fee item changes
-    if (value !== oldValue) {
-      this.quantities = {};
-      this._availableTypes = this.getAvailableTypes();
-    }
-    this.requestUpdate("feeItem", oldValue);
-  }
-  get feeItem(): BuildingFeeView | null {
-    return this._feeItem;
-  }
-  private _feeItem: BuildingFeeView | null = null;
-
-  @property()
-  onQuantityChange: ((addon: DesiredAddon) => void) | null = null;
-
-  @state()
-  private quantities: Record<string, number> = {};
-
-  // Cache available types to prevent recalculation on each render
-  private _availableTypes: string[] = [];
-
-  private get matrixRules(): PricingRule[] {
-    return this.feeItem?.customMatrixData?.pricingRules ?? [];
-  }
-
-  private getAvailableTypes(): string[] {
-    const availableTypes = new Set<string>();
-    this.matrixRules.forEach((rule) => {
-      rule.combination.quantities.forEach((q) =>
-        availableTypes.add(q.itemType)
-      );
-    });
-    // Convert to sorted array for consistent ordering
-    return Array.from(availableTypes).sort();
-  }
-
-  private get itemTypes(): string[] {
-    return this._availableTypes;
-  }
-
-  private getMaxQuantityForType(itemType: string): number {
-    let max = 0;
-    this.matrixRules.forEach((rule) => {
-      const itemQty = rule.combination.quantities.find(
-        (q) => q.itemType === itemType
-      );
-      if (itemQty) {
-        max = Math.max(max, itemQty.quantity);
-      }
-    });
-    return max;
-  }
-
-  private isValidCombination(type: string, newQuantity: number): boolean {
-    const proposedQuantities = { ...this.quantities, [type]: newQuantity };
-
-    const relevantRules = this.matrixRules.filter((rule) =>
-      rule.combination.quantities.some((q) => q.itemType === type)
-    );
-
-    return relevantRules.some((rule) => {
-      const ruleQuantities = new Map(
-        rule.combination.quantities.map((q) => [q.itemType, q.quantity])
-      );
-
-      return Array.from(ruleQuantities.entries()).every(
-        ([itemType, quantity]) => {
-          const proposedQty = proposedQuantities[itemType] ?? 0;
-          return proposedQty === quantity;
-        }
-      );
-    });
-  }
-
-  private handleIncrement(type: string): void {
-    const currentQty = this.quantities[type] ?? 0;
-    const newQty = currentQty + 1;
-
-    if (newQty > this.getMaxQuantityForType(type)) return;
-    if (!this.isValidCombination(type, newQty)) return;
-
-    const newQuantities = { ...this.quantities };
-    newQuantities[type] = newQty;
-    this.quantities = newQuantities;
-
-    this.notifyQuantityChange();
-  }
-
-  private handleDecrement(type: string): void {
-    const currentQty = this.quantities[type] ?? 0;
-    if (currentQty <= 0) return;
-
-    const newQty = currentQty - 1;
-    if (!this.isValidCombination(type, newQty)) return;
-
-    const newQuantities = { ...this.quantities };
-    newQuantities[type] = newQty;
-    this.quantities = newQuantities;
-
-    this.notifyQuantityChange();
-  }
-
-  private notifyQuantityChange(): void {
-    if (!this.onQuantityChange || !this.feeItem) return;
-
-    // Include all available types, using 0 as default quantity if not set
-    // e.g. { "dog": 1, "cat": 2 }
-    const quantities = this.itemTypes.map((type) => ({
-      itemType: type,
-      quantity: this.quantities[type] ?? 0,
-    }));
-
-    this.onQuantityChange({
-      id: this.feeItem.id ?? 0,
-      quantities,
-    });
-  }
-
-  private formatItemType(type: string): string {
-    return type
-      .split(/[_-]/)
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-      .join(" ");
-  }
-
-  private pluralize(type: string, quantity: number): string {
-    const formattedType = this.formatItemType(type);
-    return `${quantity} ${formattedType}${quantity !== 1 ? "s" : ""}`;
-  }
-
-  private renderQuantitySelector(type: string): TemplateResult {
-    const quantity = this.quantities[type] ?? 0;
-    const maxQty = this.getMaxQuantityForType(type);
-    const canIncrement =
-      this.isValidCombination(type, quantity + 1) && quantity < maxQty;
-
-    return html`
-      <div class="quantity-control">
-        <div class="quantity-buttons">
-          <button
-            class="quantity-button"
-            @click=${() => this.handleDecrement(type)}
-            ?disabled=${quantity <= 0}
-            aria-label="Decrease ${type} quantity"
-          >
-            <span class="operator-sign">&minus;</span>
-          </button>
-          <span class="quantity-value">${this.pluralize(type, quantity)}</span>
-          <button
-            class="quantity-button"
-            @click=${() => this.handleIncrement(type)}
-            ?disabled=${!canIncrement}
-            aria-label="Increase ${type} quantity"
-          >
-            <span class="operator-sign">+</span>
-          </button>
-        </div>
-      </div>
-    `;
-  }
-
-  render(): TemplateResult {
-    if (!this.feeItem || !this.matrixRules.length) return html``;
-
-    const types = this.itemTypes;
-    if (!types.length) return html``;
-
-    return html`
-      <div class="addon-container">
-        <div class="addon-inner-container">
-          <div class="addon-header">
-            <div class="addon-header-left">
-              <p class="addon-title">${this.feeItem.feeName}</p>
-            </div>
-          </div>
-
-          <div class="addon-body">
-            <div class="quantity-controls-container">
-              ${types.map((type) => this.renderQuantitySelector(type))}
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "addon-item-matrix-qty-selector": AddonItemMatrixQtySelector;
-  }
-}

package/src/WebComponent/FeeCalculator/components/addons/addon-item-qty-selector/addon-item-qty-selector-styles.ts

@@ -1,6 +0,0 @@
-import { css } from "lit";
-import commonAddonStyles from "../common-addon-styles";
-
-export default css`
-  ${commonAddonStyles}
-`;

package/src/WebComponent/FeeCalculator/components/addons/addon-item-qty-selector/addon-item-qty-selector.ts

@@ -1,101 +0,0 @@
-import { LitElement, html, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { BuildingFeeView, DesiredAddon } from "../../../model";
-
-import styles from "./addon-item-qty-selector-styles";
-
-const DEFAULT_MAX_QUANTITY = 10;
-
-@customElement("addon-item-qty-selector")
-export class AddonItemQtySelector extends LitElement {
-  static styles = styles;
-
-  @property({ type: Object })
-  feeItem: BuildingFeeView | null = null;
-
-  @property()
-  onQuantityChange: ((addon: DesiredAddon) => void) | null = null;
-
-  @state()
-  private quantity = 0;
-
-  private get maxQuantity(): number {
-    return this.feeItem?.maxAmount ?? DEFAULT_MAX_QUANTITY;
-  }
-
-  private handleIncrement(): void {
-    if (this.quantity >= this.maxQuantity) return;
-    this.quantity += 1;
-    this.notifyQuantityChange();
-  }
-
-  private handleDecrement(): void {
-    if (this.quantity <= 0) return;
-    this.quantity = Math.max(0, this.quantity - 1);
-    this.notifyQuantityChange();
-  }
-
-  private notifyQuantityChange(): void {
-    if (!this.onQuantityChange || !this.feeItem) return;
-
-    this.onQuantityChange({
-      id: this.feeItem.id ?? 0,
-      quantities: [
-        {
-          itemType: this.feeItem.category ?? "",
-          quantity: this.quantity,
-        },
-      ],
-    });
-  }
-
-  render(): TemplateResult {
-    if (!this.feeItem) return html``;
-
-    return html`
-      <div class="addon-container">
-        <div class="addon-inner-container">
-          <div class="addon-header">
-            <div class="addon-header-left">
-              <p class="addon-title">${this.feeItem.feeName}</p>
-            </div>
-
-            ${this.maxQuantity > 0 && this.maxQuantity !== DEFAULT_MAX_QUANTITY
-              ? html` <div class="addon-header-right">
-                  <p>${this.maxQuantity} Max</p>
-                </div>`
-              : ""}
-          </div>
-
-          <div class="addon-body">
-            <div class="quantity-control">
-              <button
-                class="quantity-button"
-                @click=${this.handleDecrement}
-                ?disabled=${this.quantity <= 0}
-                aria-label="Decrease quantity"
-              >
-                <span class="operator-sign">&minus;</span>
-              </button>
-              <span class="quantity-value">${this.quantity}</span>
-              <button
-                class="quantity-button"
-                @click=${this.handleIncrement}
-                ?disabled=${this.quantity >= this.maxQuantity}
-                aria-label="Increase quantity"
-              >
-                <span class="operator-sign">+</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "addon-item-qty-selector": AddonItemQtySelector;
-  }
-}

package/src/WebComponent/FeeCalculator/components/addons/common-addon-styles.ts

@@ -1,82 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: block;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .addon-container {
-    border: 1px solid #e5e7eb;
-    border-radius: 0.375rem;
-    align-items: center;
-  }
-
-  .addon-inner-container {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin: 12px;
-  }
-
-  .addon-header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .addon-header-right {
-    color: #838385;
-  }
-
-  .addon-title {
-    font-size: 0.875rem;
-    color: #374151;
-  }
-
-  .addon-body {
-    width: 100%;
-  }
-
-  .quantity-control {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: 1px solid #dee2e6;
-    border-radius: 0.2;
-  }
-
-  .operator-sign {
-    display: inline-block;
-    line-height: 1;
-    position: relative;
-    transform: translateY(2px);
-    width: 1rem;
-    text-align: center;
-  }
-
-  .quantity-button {
-    font-size: 1.2rem;
-    padding: 0.5rem;
-    background: none;
-    border: none;
-    color: #347ff7;
-    cursor: pointer;
-  }
-
-  .quantity-button:hover {
-    background-color: #f3f4f6;
-  }
-
-  .quantity-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .quantity-value {
-    padding: 0.25rem;
-    font-size: 0.875rem;
-  }
-`;

package/src/WebComponent/FeeCalculator/components/addons/rentable-item-qty-selector/rentable-item-qty-selector-styles.ts

@@ -1,9 +0,0 @@
-import { css } from "lit";
-
-const rentableItemQuantitySelectorStyles = css`
-  :host {
-    display: block;
-  }
-`;
-
-export default rentableItemQuantitySelectorStyles;

package/src/WebComponent/FeeCalculator/components/addons/rentable-item-qty-selector/rentable-item-qty-selector.ts

@@ -1,124 +0,0 @@
-import { html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { DesiredRentableItem, RentableItemSummary } from "../../../model";
-
-import commonAddonStyles from "../common-addon-styles";
-
-@customElement("rentable-item-qty-selector")
-export class RentableItemQtySelector extends LitElement {
-  static styles = commonAddonStyles;
-
-  @property({ type: Object })
-  rentableItem: RentableItemSummary | null = null;
-
-  @property({ type: Function })
-  onSelect: ((rentableItem: DesiredRentableItem) => void) | null = null;
-
-  @state()
-  private quantity = 0;
-
-  @state()
-  selectedItemIds: Set<string> = new Set();
-
-  get totalAvailableItems(): number {
-    return (
-      this.rentableItem?.allItems?.filter((item) => item.available).length ?? 0
-    );
-  }
-
-  get quantityLeft(): number {
-    return this.totalAvailableItems - this.quantity;
-  }
-
-  get atMaxUnits(): boolean {
-    return this.quantity >= this.totalAvailableItems;
-  }
-
-  get atMinUnits(): boolean {
-    return this.quantity <= 0;
-  }
-
-  private handleIncrement(): void {
-    if (this.atMaxUnits) return;
-    this.quantity += 1;
-    this.emitChange();
-  }
-
-  private handleDecrement(): void {
-    if (this.atMinUnits) return;
-    this.quantity = Math.max(0, this.quantity - 1);
-    this.emitChange();
-  }
-
-  private emitChange(): void {
-    if (!this.rentableItem) return;
-
-    // Find first item that is available
-    const firstAvailableItem = this.rentableItem.allItems.find(
-      (item) => item.available && !this.selectedItemIds.has(item.id)
-    );
-
-    if (!firstAvailableItem) return;
-
-    this.selectedItemIds.add(firstAvailableItem.id);
-
-    this.onSelect?.({
-      id: parseInt(firstAvailableItem.id),
-      type: this.rentableItem.type,
-    });
-  }
-
-  render(): TemplateResult {
-    if (!this.rentableItem) return html``;
-
-    const hasAvailableItems = this.totalAvailableItems > 0;
-
-    return html`
-      <div class="addon-container">
-        <div class="addon-inner-container">
-          <div class="addon-header">
-            <div class="addon-header-left">
-              <p class="addon-title">${this.rentableItem.type}</p>
-            </div>
-
-            ${this.quantityLeft > 0
-              ? html`
-                  <div class="addon-header-right">
-                    <p>${this.quantityLeft} Max</p>
-                  </div>
-                `
-              : ""}
-          </div>
-
-          <div class="addon-body">
-            <div class="quantity-control">
-              <button
-                class="quantity-button"
-                @click=${this.handleDecrement}
-                ?disabled=${this.quantity <= 0}
-                aria-label="Decrease quantity"
-              >
-                <span class="operator-sign">&minus;</span>
-              </button>
-              <span class="quantity-value">${this.quantity}</span>
-              <button
-                class="quantity-button"
-                @click=${this.handleIncrement}
-                ?disabled=${!hasAvailableItems || this.atMaxUnits}
-                aria-label="Increase quantity"
-              >
-                <span class="operator-sign">+</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rentable-item-qty-selector": RentableItemQtySelector;
-  }
-}

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

@@ -1,142 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    --transition-timing: 0.2s ease;
-  }
-
-  .fee-calculator-layout {
-    display: flex;
-    margin-top: 20px;
-    gap: 20px;
-    transition: margin-top var(--transition-timing),
-      padding var(--transition-timing), gap var(--transition-timing),
-      width var(--transition-timing), height var(--transition-timing);
-  }
-
-  .sidepanel {
-    flex: 0 0 300px;
-    display: flex;
-    margin-left: 20px;
-    flex-direction: column;
-    max-width: 50%;
-    gap: 20px;
-    transition: width var(--transition-timing),
-      max-width var(--transition-timing), margin var(--transition-timing);
-  }
-
-  .sidepanel-section {
-    padding: 16px;
-    border-radius: 4px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    background-color: white;
-    transition: border-radius var(--transition-timing),
-      width var(--transition-timing), margin var(--transition-timing);
-  }
-
-  .sidepanel-section-title {
-    margin-top: 0;
-    margin-bottom: 12px;
-    font-size: 16px;
-    font-weight: 500;
-    color: #333;
-  }
-
-  .sidepanel-addons-container {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .fees-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background-color: #f8f9fa;
-    gap: 16px;
-    transition: width var(--transition-timing), margin var(--transition-timing),
-      padding var(--transition-timing);
-    min-height: 300px;
-  }
-
-  .sidepanel-loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    min-height: 5rem;
-  }
-
-  .loading-container {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    flex: 1;
-    padding-top: 16px;
-  }
-
-  .empty-state {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 16px;
-    height: 100%;
-    min-height: 300px;
-  }
-
-  @media (max-width: 768px) {
-    .fee-calculator-layout {
-      flex-direction: column;
-      gap: 10px;
-      width: 100%;
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    .sidepanel {
-      max-width: 100%;
-      order: 1;
-      flex: none;
-      width: 100%;
-      margin: 0;
-      box-sizing: border-box;
-    }
-
-    .fees-container {
-      order: 2;
-      min-height: auto;
-      width: 100%;
-      margin: 0;
-      box-sizing: border-box;
-    }
-
-    .sidepanel-section {
-      border-radius: 0;
-      margin: 0 0 8px 0;
-      padding: 16px;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    .loading-container {
-      height: auto;
-      min-height: 100px;
-      padding-top: 20px;
-      align-items: flex-start;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    .empty-state {
-      height: auto;
-      min-height: 100px;
-      width: 100%;
-      box-sizing: border-box;
-    }
-  }
-`;