feat(catalog): show product availability tooltips

src/app/core/services/catalog/catalog.interface.ts

@@ -67,6 +67,7 @@ export interface CatalogItemVariant {
   event_date_ids?: number[];
   event_dates?: string[];
   maximum_addable_quantity?: number | null;
+  unavailable_message?: string | null;
   minimum_use_date?: string | null;
   maximum_use_date?: string | null;
   effective_minimum_use_date?: string | null;
@@ -114,6 +115,7 @@ export interface CatalogFeaturedItemVariant {
   descripcion?: string | null;
   precio?: string;
   maximum_addable_quantity?: number | null;
+  unavailable_message?: string | null;
   values: Record<string, CatalogVariantValue>;
 }
 
@@ -146,6 +148,7 @@ export interface CatalogFeaturedItem {
   precio: number | string;
   image?: string | null;
   maximum_addable_quantity?: number | null;
+  unavailable_message?: string | null;
   variants?: CatalogFeaturedItemVariant[];
 }
 

src/app/shared/components/product-column-with-image/product-column-with-image.component.html

@@ -31,9 +31,16 @@
   <div
     class="product-column-with-image__body p-3 d-flex flex-column align-items-center text-center flex-grow-1"
   >
-    <h3 class="product-column-with-image__title text-uppercase text-black mb-4">{{ title() }}</h3>
+    <h3 class="product-column-with-image__title text-uppercase text-black mb-4">
+      {{ title() }}
+      @if (unavailableMessage(); as message) {
+        <app-tooltip [message]="message" />
+      }
+    </h3>
 
-    <div class="product-column-with-image__prices d-flex align-items-center justify-content-center gap-2">
+    <div
+      class="product-column-with-image__prices d-flex align-items-center justify-content-center gap-2"
+    >
       <span class="product-column-with-image__price-discounted text-primary">
         {{ formattedDiscountedPrice() }}
       </span>
@@ -53,7 +60,12 @@
     </div>
 
     <div class="product-column-with-image__action mt-auto w-100">
-      <app-button variant="primary" class="w-100" (click)="buy.emit()">
+      <app-button
+        variant="primary"
+        class="w-100"
+        [disabled]="!!unavailableMessage()"
+        (click)="onBuy()"
+      >
         {{ buttonText() }}
       </app-button>
     </div>

src/app/shared/components/product-column-with-image/product-column-with-image.component.ts

@@ -2,10 +2,11 @@ import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 
 import { ButtonComponent } from '../button/button.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 
 @Component({
   selector: 'app-product-column-with-image',
-  imports: [ButtonComponent, NgOptimizedImage],
+  imports: [ButtonComponent, NgOptimizedImage, TooltipComponent],
   templateUrl: './product-column-with-image.component.html',
   styleUrl: './product-column-with-image.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,9 +19,16 @@ export class ProductColumnWithImageComponent {
   readonly transferPrice = input<number | null>(null);
   readonly buttonText = input<string>('Comprar');
   readonly imagePriority = input<boolean>(false);
+  readonly unavailableMessage = input<string | null>(null);
 
   readonly buy = output<void>();
 
+  protected onBuy(): void {
+    if (this.unavailableMessage()) return;
+
+    this.buy.emit();
+  }
+
   readonly discountedPrice = computed(() => {
     const original = this.originalPrice();
     const discount = this.discount();

src/app/shared/components/product-list/product-list.component.html

@@ -13,6 +13,7 @@
           [description]="item.descripcion ?? ''"
           [price]="price(item)"
           [maximumAddableQuantity]="item.maximum_addable_quantity ?? null"
+          [unavailableMessage]="item.unavailable_message ?? null"
           [variants]="item.variants ?? []"
           [saving]="savingProductIds().has(item.id)"
           (buy)="emitRowBuy(item, $event)"
@@ -25,6 +26,7 @@
           [description]="item.descripcion ?? ''"
           [price]="price(item)"
           [maximumAddableQuantity]="item.maximum_addable_quantity ?? null"
+          [unavailableMessage]="item.unavailable_message ?? null"
           [variants]="item.variants ?? []"
           [saving]="savingProductIds().has(item.id)"
           (buy)="emitColumnBuy(item, $event)"
@@ -38,7 +40,8 @@
           [description]="item.descripcion ?? ''"
           [price]="price(item)"
           [imageUrl]="loadImages() ? (item.image ?? null) : null"
-          [disabled]="loading()"
+          [unavailableMessage]="item.unavailable_message ?? null"
+          [disabled]="loading() || !!item.unavailable_message"
           (buy)="emitTicketBuy(item, $event)"
         />
       }
@@ -47,6 +50,7 @@
           [imageUrl]="loadImages() ? (item.image ?? null) : null"
           [title]="item.nombre"
           [originalPrice]="price(item)"
+          [unavailableMessage]="item.unavailable_message ?? null"
           [imagePriority]="loadImages() && index < 4"
           (buy)="emitProductDetailBuy(item)"
         />

src/app/shared/components/product-row-card/product-row-card.component.html

@@ -3,6 +3,9 @@
   <div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1">
     <h3 class="product-row-card__title text-uppercase mb-1 m-0">
       {{ title() }}
+      @if (effectiveUnavailableMessage(); as message) {
+        <app-tooltip [message]="message" />
+      }
     </h3>
     @if (effectiveDescription()) {
       <p class="product-row-card__description m-0 mt-1">

src/app/shared/components/product-row-card/product-row-card.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 import {
   VariantSelectorComponent,
   VariantSelectorVariant,
@@ -19,12 +20,13 @@ export interface Variant extends VariantSelectorVariant {
   descripcion?: string | null;
   precio?: string | number;
   maximum_addable_quantity?: number | null;
+  unavailable_message?: string | null;
 }
 
 @Component({
   selector: 'app-product-row-card',
   standalone: true,
-  imports: [ButtonComponent, QuantitySelectorComponent, VariantSelectorComponent],
+  imports: [ButtonComponent, QuantitySelectorComponent, TooltipComponent, VariantSelectorComponent],
   templateUrl: './product-row-card.component.html',
   styleUrl: './product-row-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -35,6 +37,7 @@ export class ProductRowCardComponent {
   readonly description = input<string>('');
   readonly price = input<number>(0);
   readonly maximumAddableQuantity = input<number | null>(null);
+  readonly unavailableMessage = input<string | null>(null);
   readonly variants = input<Variant[]>([]);
   readonly saving = input(false);
 
@@ -61,6 +64,13 @@ export class ProductRowCardComponent {
     () => this.selectedVariantData()?.maximum_addable_quantity ?? this.maximumAddableQuantity(),
   );
   protected readonly unavailable = computed(() => this.effectiveMaximum() === 0);
+  protected readonly effectiveUnavailableMessage = computed(() => {
+    const selectedVariant = this.selectedVariantData();
+
+    return selectedVariant
+      ? (selectedVariant.unavailable_message ?? null)
+      : this.unavailableMessage();
+  });
 
   readonly formattedPrice = computed(() => this.formatCurrency(this.effectivePrice()));
 

src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html

@@ -1,7 +1,12 @@
 <article class="ticket-selector">
   <header class="ticket-selector__header">
     <div>
-      <h3 class="ticket-selector__title">{{ title() }}</h3>
+      <h3 class="ticket-selector__title">
+        {{ title() }}
+        @if (unavailableMessage(); as message) {
+          <app-tooltip [message]="message" />
+        }
+      </h3>
       @if (description()) {
         <p class="ticket-selector__description">{{ description() }}</p>
       }

src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts

@@ -28,6 +28,7 @@ import { ModalService } from '../../../core/services/modal.service';
 import { ToastService } from '../../../core/services/toast.service';
 import { ButtonComponent } from '../button/button.component';
 import { IconButtonComponent } from '../icon-button/icon-button.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 
 type TicketSelectionStatus =
   | 'selecting'
@@ -56,7 +57,7 @@ interface TicketSelectionRow {
 
 @Component({
   selector: 'app-product-ticket-selector',
-  imports: [ButtonComponent, IconButtonComponent],
+  imports: [ButtonComponent, IconButtonComponent, TooltipComponent],
   templateUrl: './product-ticket-selector.component.html',
   styleUrl: './product-ticket-selector.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -80,6 +81,7 @@ export class ProductTicketSelectorComponent {
   readonly price = input<number>(0);
   readonly imageUrl = input<string | null>(null);
   readonly disabled = input(false);
+  readonly unavailableMessage = input<string | null>(null);
 
   readonly buy = output<number[]>();
 

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.html

@@ -1,6 +1,11 @@
 <article class="product-vertical-with-cart-card">
   <div class="product-vertical-with-cart-card__content">
-    <h3 class="product-vertical-with-cart-card__title">{{ title() }}</h3>
+    <h3 class="product-vertical-with-cart-card__title">
+      {{ title() }}
+      @if (effectiveUnavailableMessage(); as message) {
+        <app-tooltip [message]="message" />
+      }
+    </h3>
 
     @if (effectiveDescription()) {
       <p class="product-vertical-with-cart-card__description">{{ effectiveDescription() }}</p>

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.spec.ts

@@ -56,6 +56,23 @@ describe('ProductVerticalWithCartCardComponent', () => {
     ).toBeNull();
   });
 
+  it('shows the backend availability message with the reusable tooltip', async () => {
+    const fixture = await createComponent();
+    fixture.componentRef.setInput('maximumAddableQuantity', 0);
+    fixture.componentRef.setInput(
+      'unavailableMessage',
+      'Alcanzaste el cupo máximo permitido para este producto.',
+    );
+    fixture.detectChanges();
+
+    const tooltip = (fixture.nativeElement as HTMLElement).querySelector('app-tooltip');
+
+    expect(tooltip?.querySelector('i.fa-solid.fa-circle-info')).not.toBeNull();
+    expect(tooltip?.textContent).toContain(
+      'Alcanzaste el cupo máximo permitido para este producto.',
+    );
+  });
+
   it('updates the quantity with the reusable quantity selector', async () => {
     const fixture = await createComponent();
     const buttons = fixture.nativeElement.querySelectorAll(

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.ts

@@ -10,6 +10,7 @@ import {
 
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 import {
   VariantSelectorComponent,
   VariantSelectorVariant,
@@ -19,11 +20,12 @@ export interface VerticalCartVariant extends VariantSelectorVariant {
   descripcion?: string | null;
   precio?: string | number;
   maximum_addable_quantity?: number | null;
+  unavailable_message?: string | null;
 }
 
 @Component({
   selector: 'app-product-vertical-with-cart-card',
-  imports: [ButtonComponent, QuantitySelectorComponent, VariantSelectorComponent],
+  imports: [ButtonComponent, QuantitySelectorComponent, TooltipComponent, VariantSelectorComponent],
   templateUrl: './product-vertical-with-cart-card.component.html',
   styleUrl: './product-vertical-with-cart-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -33,6 +35,7 @@ export class ProductVerticalWithCartCardComponent {
   readonly description = input<string>('');
   readonly price = input<number>(0);
   readonly maximumAddableQuantity = input<number | null>(null);
+  readonly unavailableMessage = input<string | null>(null);
   readonly variants = input<VerticalCartVariant[]>([]);
   readonly saving = input(false);
 
@@ -59,6 +62,13 @@ export class ProductVerticalWithCartCardComponent {
     () => this.selectedVariantData()?.maximum_addable_quantity ?? this.maximumAddableQuantity(),
   );
   protected readonly unavailable = computed(() => this.effectiveMaximum() === 0);
+  protected readonly effectiveUnavailableMessage = computed(() => {
+    const selectedVariant = this.selectedVariantData();
+
+    return selectedVariant
+      ? (selectedVariant.unavailable_message ?? null)
+      : this.unavailableMessage();
+  });
 
   constructor() {
     effect(() => {