feat(catalog): show product availability tooltips

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()));