@meetelise/chat 1.35.0 → 1.35.2

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

@@ -0,0 +1,39 @@
+import { css } from "lit";
+import commonAddonStyles from "../common-addon-styles";
+
+export default [
+  commonAddonStyles,
+  css`
+    .quantity-controls-container {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .quantity-control {
+      width: 100%;
+      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;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `,
+];

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

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

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

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

@@ -0,0 +1,98 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    height: 100%;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .addon-container {
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    align-items: center;
+    height: 100%;
+    display: flex;
+  }
+
+  .addon-inner-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin: 12px;
+    width: 100%;
+  }
+
+  .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;
+  }
+
+  .quantity-control.unavailable {
+    background-color: #f9f9f9;
+    border-color: #e0e0e0;
+    cursor: not-allowed;
+  }
+
+  .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;
+  }
+
+  .unavailable-text {
+    color: #9ca3af;
+    font-style: italic;
+    cursor: not-allowed;
+  }
+`;

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

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

@@ -0,0 +1,136 @@
+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";
+
+const DEFAULT_MAX_QUANTITY = 10;
+
+@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 Math.min(
+      this.totalAvailableItems - this.quantity,
+      DEFAULT_MAX_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;
+
+    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: 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.displayName}</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 ${!hasAvailableItems
+                ? "unavailable"
+                : ""}"
+            >
+              <button
+                class="quantity-button"
+                @click=${this.handleDecrement}
+                ?disabled=${this.quantity <= 0}
+                aria-label="Decrease quantity"
+              >
+                <span class="operator-sign">&minus;</span>
+              </button>
+              ${hasAvailableItems
+                ? html`<span class="quantity-value">${this.quantity}</span>`
+                : html`<span class="quantity-value unavailable-text"
+                    >Not available</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;
+  }
+}