feat(catalog): show product availability tooltips

feat(ui): add reusable information tooltip
fix(checkout): lock reviewed payments and refresh cart on exit
2026-08-21 16:47:29 -03:00 · 2026-08-21 16:47:21 -03:00 · 2026-08-21 16:16:11 -03:00 · 2026-08-21 15:50:18 -03:00 · 2026-08-21 15:50:12 -03:00 · 2026-08-21 14:19:32 -03:00
47 changed files with 836 additions and 589 deletions
--- a/src/app/core/layout/store-layout/store-header/store-header.component.html
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.html
@@ -79,10 +79,13 @@

          @if (displayCart()) {
            <app-cart-icon
-              [quantity]="cartQuantity()"
-              ariaLabel="Carrito de compras"
-              title="Carrito"
-              (click)="cartClick.emit()"
+              [quantity]="cartDisabled() ? null : cartQuantity()"
+              [disabled]="cartDisabled()"
+              [ariaLabel]="
+                cartDisabled() ? 'Carrito no disponible durante el checkout' : 'Carrito de compras'
+              "
+              [title]="cartDisabled() ? 'Carrito no disponible durante el checkout' : 'Carrito'"
+              (click)="onCartClick()"
            />
          }

--- a/src/app/core/layout/store-layout/store-header/store-header.component.ts
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.ts
@@ -39,6 +39,7 @@ export class StoreHeaderComponent {
  readonly displayCategories = input(true);
  readonly displaySeachBar = input(true);
  readonly displayCart = input(true);
+  readonly cartDisabled = input(false);
  readonly cartClick = output<void>();
  readonly ticketsClick = output<void>();
  readonly loginClick = output<void>();
@@ -53,6 +54,14 @@ export class StoreHeaderComponent {
  protected readonly showSearchError = signal(false);
  protected readonly searchControl = new FormControl('', { nonNullable: true });

+  protected onCartClick(): void {
+    if (this.cartDisabled()) {
+      return;
+    }
+
+    this.cartClick.emit();
+  }
+
  @HostListener('document:click', ['$event'])
  protected onDocumentClick(event: MouseEvent): void {
    if (!this.isUserDropdownOpen() && !this.isCategoryDropdownOpen() && !this.isMobileMenuOpen()) {
--- a/src/app/core/layout/store-layout/store-layout.component.html
+++ b/src/app/core/layout/store-layout/store-layout.component.html
@@ -12,7 +12,8 @@
    [displayCategories]="tenant()?.display_categories ?? true"
    [displaySeachBar]="tenant()?.display_seach_bar ?? true"
    [displayCart]="displayCart()"
-    (cartClick)="isCartOpen.set(!isCartOpen())"
+    [cartDisabled]="isCheckoutRoute()"
+    (cartClick)="onCartClick()"
    (ticketsClick)="onTicketsClick()"
    (loginClick)="onLoginClick()"
    (logoutClick)="onLogoutClick()"
@@ -20,7 +21,7 @@
    (categorySelect)="onCategorySelect($event)"
  />

-  @if (displayCart() && isCartOpen()) {
+  @if (displayCart() && !isCheckoutRoute() && isCartOpen()) {
    <div class="store-layout__cart-overlay" (click)="isCartOpen.set(false)"></div>
    <div class="store-layout__cart-dropdown card border-0 shadow-lg">
      <app-cart
--- a/src/app/core/layout/store-layout/store-layout.component.spec.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.spec.ts
@@ -8,6 +8,7 @@ import {
  ParamMap,
  provideRouter,
  Router,
+  UrlSerializer,
 } from '@angular/router';

 import { BehaviorSubject, of } from 'rxjs';
@@ -22,6 +23,7 @@ import { AuthUser } from '../../services/auth/auth.interfaces';
 import { StoreLayoutComponent } from './store-layout.component';
 import { StoreHeaderComponent } from './store-header/store-header.component';
 import { CheckoutService } from '../../services/checkout.service';
+import { TenantUrlSerializer } from '../../services/tenant-url.serializer';

 const tenant: Tenant = {
  id: 1,
@@ -164,6 +166,7 @@ describe('StoreLayoutComponent', () => {
      imports: [StoreLayoutComponent],
      providers: [
        provideRouter([]),
+        { provide: UrlSerializer, useClass: TenantUrlSerializer },
        {
          provide: ActivatedRoute,
          useValue: { queryParamMap: queryParamMapState.asObservable() },
@@ -240,6 +243,33 @@ describe('StoreLayoutComponent', () => {
    expect((fixture.nativeElement as HTMLElement).querySelector('app-cart')).not.toBeNull();
  });

+  it('disables the cart icon and prevents opening the popup during checkout with a tenant base path', () => {
+    tenantState.set({ ...tenant, base_path: 'fiesta' });
+    const router = TestBed.inject(Router);
+    vi.spyOn(router, 'url', 'get').mockReturnValue('/fiesta/checkout?purchase=25');
+
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const cartButton = element.querySelector<HTMLButtonElement>('app-cart-icon button');
+    const header = fixture.debugElement.query(By.directive(StoreHeaderComponent));
+
+    expect(cartButton?.disabled).toBe(true);
+    expect(cartButton?.getAttribute('aria-label')).toBe(
+      'Carrito no disponible durante el checkout',
+    );
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
+
+    header.componentInstance.cartClick.emit();
+    queryParamMapState.next(convertToParamMap({ openCart: 'true' }));
+    fixture.detectChanges();
+
+    expect((fixture.componentInstance as any).isCartOpen()).toBe(false);
+    expect(element.querySelector('app-cart')).toBeNull();
+    expect(element.querySelector('.store-layout__cart-overlay')).toBeNull();
+  });
+
  it('hides the configured header elements when the tenant disables them', () => {
    tenantState.set({
      ...tenant,
--- a/src/app/core/layout/store-layout/store-layout.component.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.ts
@@ -1,6 +1,13 @@
 import { Component, computed, DestroyRef, inject, OnInit, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
+import {
+  ActivatedRoute,
+  NavigationEnd,
+  PRIMARY_OUTLET,
+  Router,
+  RouterOutlet,
+} from '@angular/router';
+import { filter } from 'rxjs';
 import { TenantService } from '../../services/tenant.service';
 import { CartService } from '../../services/cart/cart.service';
 import { StoreFooterComponent, StoreFooterSection } from './store-footer/store-footer.component';
@@ -37,6 +44,7 @@ export class StoreLayoutComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef);

  protected readonly isCartOpen = signal(false);
+  protected readonly isCheckoutRoute = signal(this.isCheckoutUrl(this.router.url));
  protected readonly isCreatingPurchase = signal(false);
  protected readonly displayCart = computed(() => this.tenant()?.display_cart ?? true);
  protected readonly cartEditingPolicy = computed(() => this.tenant()?.cart_editing_policy ?? null);
@@ -149,8 +157,22 @@ export class StoreLayoutComponent implements OnInit {
  });

  ngOnInit(): void {
+    this.router.events
+      .pipe(
+        filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe((event) => {
+        const isCheckoutRoute = this.isCheckoutUrl(event.urlAfterRedirects);
+        this.isCheckoutRoute.set(isCheckoutRoute);
+
+        if (isCheckoutRoute) {
+          this.isCartOpen.set(false);
+        }
+      });
+
    this.route.queryParamMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
-      if (params.get('openCart') === 'true') {
+      if (params.get('openCart') === 'true' && !this.isCheckoutRoute()) {
        this.isCartOpen.set(true);
      }
    });
@@ -160,10 +182,24 @@ export class StoreLayoutComponent implements OnInit {
    });
  }

+  private isCheckoutUrl(url: string): boolean {
+    const primarySegments = this.router.parseUrl(url).root.children[PRIMARY_OUTLET]?.segments ?? [];
+
+    return primarySegments[0]?.path === 'checkout';
+  }
+
  protected onLoginClick(): void {
    void this.router.navigate(['/login']);
  }

+  protected onCartClick(): void {
+    if (this.isCheckoutRoute()) {
+      return;
+    }
+
+    this.isCartOpen.update((isOpen) => !isOpen);
+  }
+
  protected onSearch(term: string): void {
    void this.router.navigate(['/buscar'], {
      queryParams: { q: term, page: 1 },
@@ -236,7 +272,6 @@ export class StoreLayoutComponent implements OnInit {
        cart_id: cart.id,
      });

-      this.cartService.clearCart();
      this.isCartOpen.set(false);
      await this.router.navigate(['/checkout'], {
        queryParams: { purchase: purchase.id },
--- a/src/app/core/services/cart/cart.service.spec.ts
+++ b/src/app/core/services/cart/cart.service.spec.ts
@@ -7,11 +7,13 @@ import { CartService } from './cart.service';
 import { TenantService } from '../tenant.service';
 import { Cart } from './cart.interface';
 import { LOADING_MODE } from '../global-loading/loading-mode';
+import { CatalogAvailabilityService } from '../catalog/catalog-availability.service';

 describe('CartService', () => {
  let service: CartService;
  let httpMock: HttpTestingController;
  let tenantServiceMock: any;
+  let catalogAvailabilityService: CatalogAvailabilityService;

  const mockCart: Cart = {
    id: 123,
@@ -53,6 +55,7 @@ describe('CartService', () => {
    });

    service = TestBed.inject(CartService);
+    catalogAvailabilityService = TestBed.inject(CatalogAvailabilityService);
    httpMock = TestBed.inject(HttpTestingController);
  });

@@ -101,6 +104,9 @@ describe('CartService', () => {
  });

  it('should add item and update signal', () => {
+    const availabilityChanged = vi.fn();
+    catalogAvailabilityService.availabilityChanged$.subscribe(availabilityChanged);
+
    service.addItem(5, 10, 2).subscribe((res) => {
      expect(res.data).toEqual(mockCart);
      expect(service.cart()).toEqual(mockCart);
@@ -115,9 +121,13 @@ describe('CartService', () => {
    });
    expect(req.request.withCredentials).toBe(true);
    req.flush({ data: mockCart });
+    expect(availabilityChanged).toHaveBeenCalledOnce();
  });

  it('should update item quantity and update signal', () => {
+    const availabilityChanged = vi.fn();
+    catalogAvailabilityService.availabilityChanged$.subscribe(availabilityChanged);
+
    const updatedCart = { ...mockCart, subtotal: '30.00' };
    updatedCart.items[0].cantidad = 3;

@@ -131,9 +141,13 @@ describe('CartService', () => {
    expect(req.request.body).toEqual({ cantidad: 3 });
    expect(req.request.withCredentials).toBe(true);
    req.flush({ data: updatedCart });
+    expect(availabilityChanged).toHaveBeenCalledOnce();
  });

  it('should remove item and update signal', () => {
+    const availabilityChanged = vi.fn();
+    catalogAvailabilityService.availabilityChanged$.subscribe(availabilityChanged);
+
    const emptyCart: Cart = {
      id: 123,
      tenant_codigo: 'acme',
@@ -151,5 +165,18 @@ describe('CartService', () => {
    expect(req.request.method).toBe('DELETE');
    expect(req.request.withCredentials).toBe(true);
    req.flush({ data: emptyCart });
+    expect(availabilityChanged).toHaveBeenCalledOnce();
+  });
+
+  it('does not notify an availability change when a cart mutation fails', () => {
+    const availabilityChanged = vi.fn();
+    catalogAvailabilityService.availabilityChanged$.subscribe(availabilityChanged);
+
+    service.removeItem(10).subscribe({ error: vi.fn() });
+
+    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items/10');
+    req.flush({ message: 'Error' }, { status: 500, statusText: 'Server Error' });
+
+    expect(availabilityChanged).not.toHaveBeenCalled();
  });
 });
--- a/src/app/core/services/cart/cart.service.ts
+++ b/src/app/core/services/cart/cart.service.ts
@@ -3,6 +3,7 @@ import { catchError, map, Observable, tap } from 'rxjs';

 import { ApiResponse } from '../api-response.interface';
 import { BaseApiService } from '../base-api.service';
+import { CatalogAvailabilityService } from '../catalog/catalog-availability.service';
 import { TenantService } from '../tenant.service';
 import { Cart } from './cart.interface';

@@ -10,6 +11,7 @@ import { Cart } from './cart.interface';
  providedIn: 'root',
 })
 export class CartService extends BaseApiService {
+  private readonly catalogAvailabilityService = inject(CatalogAvailabilityService);
  private readonly tenantService = inject(TenantService);

  private readonly cartState = signal<Cart | null>(null);
@@ -60,6 +62,7 @@ export class CartService extends BaseApiService {
      .pipe(
        tap((response) => {
          this.cartState.set(response.data);
+          this.catalogAvailabilityService.notifyAvailabilityChanged();
          this.isUpdatingState.set(false);
        }),
        catchError((error) => {
@@ -93,6 +96,7 @@ export class CartService extends BaseApiService {
      .pipe(
        tap((response) => {
          this.cartState.set(response.data);
+          this.catalogAvailabilityService.notifyAvailabilityChanged();
          this.isUpdatingState.set(false);
        }),
        catchError((error) => {
@@ -111,6 +115,7 @@ export class CartService extends BaseApiService {
      .pipe(
        tap((response) => {
          this.cartState.set(response.data);
+          this.catalogAvailabilityService.notifyAvailabilityChanged();
          this.isUpdatingState.set(false);
        }),
        catchError((error) => {
--- a/src/app/core/services/catalog/catalog-availability.service.ts
+++ b/src/app/core/services/catalog/catalog-availability.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CatalogAvailabilityService {
+  private readonly availabilityChangedSubject = new Subject<void>();
+
+  readonly availabilityChanged$: Observable<void> = this.availabilityChangedSubject.asObservable();
+
+  notifyAvailabilityChanged(): void {
+    this.availabilityChangedSubject.next();
+  }
+}
--- a/src/app/core/services/catalog/catalog.interface.ts
+++ b/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[];
 }

--- a/src/app/core/services/checkout.service.ts
+++ b/src/app/core/services/checkout.service.ts
@@ -3,7 +3,6 @@ import { firstValueFrom } from 'rxjs';

 import { environment } from '../../../environments/environment';
 import { BaseApiService } from './base-api.service';
-import { CartItemVariant } from './cart/cart.interface';

 export interface UpdatePurchaseCustomerPayload {
  dni: string;
@@ -74,7 +73,6 @@ export interface PurchaseDetailItemResponse {
  line_total: string;
  source_catalog_item_id: number | null;
  source_variant_id: number | null;
-  variants?: CartItemVariant[];
  item_details: {
    nombre: string;
    descripcion: string | null;
@@ -97,7 +95,7 @@ export interface PurchaseDetailResponse extends PurchaseStatusResponse {
  telefono: string | null;
  nombre_apellido: string | null;
  email: string | null;
-  items_source: 'purchase' | 'cart';
+  items_source: 'purchase';
  items: PurchaseDetailItemResponse[];
  tickets_count?: number;
  has_generated_tickets?: boolean;
@@ -171,104 +169,6 @@ export class CheckoutService extends BaseApiService {
    return purchase;
  }

-  async updateItemQuantity(
-    tenantCode: string,
-    purchaseId: number,
-    itemId: number,
-    quantity: number,
-    cartId: number | null = null,
-    itemsSource: 'purchase' | 'cart' = 'purchase',
-  ): Promise<PurchaseDetailResponse> {
-    if (itemsSource === 'cart' && cartId !== null) {
-      await firstValueFrom(
-        this.http.patch(
-          `${environment.url}tenants/${tenantCode}/checkout-carts/${cartId}/items/${itemId}`,
-          { cantidad: quantity },
-        ),
-      );
-
-      return this.getPurchase(tenantCode, purchaseId);
-    }
-
-    const response = await firstValueFrom(
-      this.http.patch<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>(
-        `${environment.url}tenants/${tenantCode}/compras/${purchaseId}/items/${itemId}`,
-        { quantity },
-      ),
-    );
-
-    const purchase = this.extractResponseData<PurchaseDetailResponse>(response);
-    if (!purchase) {
-      throw new Error('Error al actualizar la cantidad del producto.');
-    }
-
-    return purchase;
-  }
-
-  async updateItemVariant(
-    tenantCode: string,
-    purchaseId: number,
-    itemId: number,
-    variantId: number,
-    quantity: number,
-    cartId: number | null = null,
-    itemsSource: 'purchase' | 'cart' = 'purchase',
-  ): Promise<PurchaseDetailResponse> {
-    if (itemsSource === 'cart' && cartId !== null) {
-      await firstValueFrom(
-        this.http.patch(
-          `${environment.url}tenants/${tenantCode}/checkout-carts/${cartId}/items/${itemId}`,
-          { cantidad: quantity, variant_id: variantId },
-        ),
-      );
-    } else {
-      await firstValueFrom(
-        this.http.patch(
-          `${environment.url}tenants/${tenantCode}/compras/${purchaseId}/items/${itemId}`,
-          { quantity, variant_id: variantId },
-        ),
-      );
-    }
-
-    return this.getPurchase(tenantCode, purchaseId);
-  }
-
-  async removeItem(
-    tenantCode: string,
-    purchaseId: number,
-    itemId: number,
-    cartId: number | null = null,
-    itemsSource: 'purchase' | 'cart' = 'purchase',
-  ): Promise<PurchaseDetailResponse> {
-    const url =
-      itemsSource === 'cart' && cartId !== null
-        ? `${environment.url}tenants/${tenantCode}/checkout-carts/${cartId}/items/${itemId}`
-        : `${environment.url}tenants/${tenantCode}/compras/${purchaseId}/items/${itemId}`;
-
-    await firstValueFrom(this.http.delete(url));
-
-    return this.getPurchase(tenantCode, purchaseId);
-  }
-
-  async prepareItemEditing(
-    tenantCode: string,
-    purchaseId: number,
-  ): Promise<PurchaseDetailResponse> {
-    const response = await firstValueFrom(
-      this.http.post<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>(
-        `${environment.url}tenants/${tenantCode}/compras/${purchaseId}/edit-items`,
-        {},
-      ),
-    );
-
-    const purchase = this.extractResponseData<PurchaseDetailResponse>(response);
-    if (!purchase) {
-      throw new Error('Error al preparar la compra para editarla.');
-    }
-
-    return purchase;
-  }
-
  async completePurchase(tenantCode: string, purchaseId: number): Promise<PurchaseStatusResponse> {
    const response = await firstValueFrom(
      this.http.post<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(
--- a/src/app/features/store/pages/category-items-page/category-items-page.component.spec.ts
+++ b/src/app/features/store/pages/category-items-page/category-items-page.component.spec.ts
@@ -7,6 +7,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';

 import { CartService } from '../../../../core/services/cart/cart.service';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
 import { Tenant } from '../../../../core/services/tenant.interface';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
@@ -107,6 +108,16 @@ describe('CategoryItemsPageComponent', () => {
    expect(Array.isArray(productList.items())).toBe(false);
  });

+  it('reloads the current category page when catalog availability changes', () => {
+    const fixture = TestBed.createComponent(CategoryItemsPageComponent);
+    fixture.detectChanges();
+
+    TestBed.inject(CatalogAvailabilityService).notifyAvailabilityChanged();
+
+    expect(getCategoryItems).toHaveBeenCalledTimes(2);
+    expect(getCategoryItems).toHaveBeenLastCalledWith(7, { page: 1 });
+  });
+
  it('does not request the API when the category id is invalid', () => {
    TestBed.overrideProvider(ActivatedRoute, {
      useValue: {
--- a/src/app/features/store/pages/category-items-page/category-items-page.component.ts
+++ b/src/app/features/store/pages/category-items-page/category-items-page.component.ts
@@ -16,6 +16,7 @@ import {
  finalize,
  map,
  of,
+  startWith,
  switchMap,
  tap,
 } from 'rxjs';
@@ -28,6 +29,7 @@ import {
  CategoryItemsResponse,
 } from '../../../../core/services/catalog/catalog.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import {
@@ -50,6 +52,7 @@ interface CategoryRouteState {
 })
 export class CategoryItemsPageComponent {
  private readonly cartService = inject(CartService);
+  private readonly catalogAvailabilityService = inject(CatalogAvailabilityService);
  private readonly catalogService = inject(CatalogService);
  private readonly injector = inject(Injector);
  private readonly destroyRef = inject(DestroyRef);
@@ -65,22 +68,29 @@ export class CategoryItemsPageComponent {
  protected readonly paginatedLayout: CatalogGroupLayout = 'paginated';

  constructor() {
-    combineLatest([this.route.paramMap, this.route.queryParamMap])
-      .pipe(
-        map(
-          ([params, queryParams]): CategoryRouteState => ({
-            categoryId: this.parsePositiveInteger(params.get('id')),
-            page: this.parsePositiveInteger(queryParams.get('page'), 1),
-          }),
-        ),
-        distinctUntilChanged(
-          (previous, current) =>
-            previous.categoryId === current.categoryId && previous.page === current.page,
-        ),
-        tap(() => {
-          this.results.set(null);
-          this.error.set(null);
+    const routeState$ = combineLatest([this.route.paramMap, this.route.queryParamMap]).pipe(
+      map(
+        ([params, queryParams]): CategoryRouteState => ({
+          categoryId: this.parsePositiveInteger(params.get('id')),
+          page: this.parsePositiveInteger(queryParams.get('page'), 1),
        }),
+      ),
+      distinctUntilChanged(
+        (previous, current) =>
+          previous.categoryId === current.categoryId && previous.page === current.page,
+      ),
+      tap(() => {
+        this.results.set(null);
+        this.error.set(null);
+      }),
+    );
+
+    combineLatest([
+      routeState$,
+      this.catalogAvailabilityService.availabilityChanged$.pipe(startWith(undefined)),
+    ])
+      .pipe(
+        map(([routeState]) => routeState),
        switchMap(({ categoryId, page }) => {
          if (categoryId === 0) {
            this.error.set('La categoría solicitada no es válida.');
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.html
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.html
@@ -5,12 +5,7 @@
  </div>
 } @else {
  <div class="checkout-page">
-    <div
-      class="checkout-page__stepper-col"
-      [class.checkout-page__stepper-col--editing]="isEditingItems()"
-      [attr.aria-hidden]="isEditingItems()"
-      [attr.inert]="isEditingItems() ? '' : null"
-    >
+    <div class="checkout-page__stepper-col">
      <app-stepper #stepper [initialStepIndex]="checkoutStepIndex()">
        <app-step label="Datos" [isValid]="isStep1Valid()">
          <app-checkout-data-step
@@ -24,6 +19,7 @@
          <app-checkout-payment-step
            [paymentMethods]="paymentMethods"
            [selectedPaymentMethod]="selectedPaymentMethod()"
+            [paymentMethodDisabled]="hasSubmittedTransfer()"
            [copiedTransferField]="copiedTransferField()"
            [transferAccount]="transferAccount()"
            [transferDni]="transferDni()"
@@ -45,12 +41,6 @@
      </app-stepper>
    </div>

-    @if (isEditingItems()) {
-      <div class="checkout-page__editing-notice" role="status">
-        <p>Terminá de modificar las cantidades para continuar con el pago.</p>
-      </div>
-    }
-
    <div class="checkout-page__cart-col">
      <app-cart
        title="COMPRA"
@@ -58,23 +48,13 @@
        [subtotal]="cartSubtotal()"
        [discount]="cartDiscount()"
        [total]="cartTotal()"
-        [readonly]="!canModifyCart()"
+        [readonly]="true"
        [allowModify]="true"
        [showModifyWhenReadonly]="true"
-        [allowUpdateQuantity]="canUpdateCartQuantity()"
-        [allowUpdateVariant]="canUpdateCartVariant()"
-        [requireEditingMode]="true"
-        [allowDelete]="canDeleteCartItems()"
-        [persistQuantityChanges]="false"
-        [persistVariantChanges]="false"
-        [persistDeleteChanges]="false"
-        [editing]="isEditingItems()"
-        [editingDisabled]="isUpdatingItem() || isPreparingItemEdit()"
+        [modifyAsAction]="true"
+        [editingDisabled]="isPurchaseModificationDisabled()"
        backgroundColor="transparent"
-        (editingChange)="onEditingItemsChange($event)"
-        (itemQuantityChange)="onPurchaseItemQuantityChange($event)"
-        (itemVariantChange)="onPurchaseItemVariantChange($event)"
-        (itemRemove)="onPurchaseItemRemove($event)"
+        (modify)="onModifyPurchase()"
      />
    </div>
  </div>
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.scss
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.scss
@@ -11,8 +11,7 @@
      order: 1;
    }

-    .checkout-page__stepper-col,
-    .checkout-page__editing-notice {
+    .checkout-page__stepper-col {
      order: 2;
    }
  }
@@ -21,27 +20,6 @@
    min-width: 0;
    border-radius: 4px;
    min-height: 420px;
-
-    &--editing {
-      display: none;
-    }
-  }
-
-  &__editing-notice {
-    display: grid;
-    min-height: 420px;
-    place-items: center;
-    padding: 2rem;
-    border-radius: 4px;
-    background: #f5f5f5;
-    color: #666666;
-    text-align: center;
-
-    p {
-      max-width: 360px;
-      margin: 0;
-      font-size: 14px;
-    }
  }

  &__cart-col {
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts
@@ -7,11 +7,12 @@ import { of } from 'rxjs';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';

 import { AuthService } from '../../../../core/services/auth/auth.service';
-import { CartService } from '../../../../core/services/cart/cart.service';
 import { CheckoutService } from '../../../../core/services/checkout.service';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { GlobalLoadingService } from '../../../../core/services/global-loading/global-loading.service';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
+import { CartService } from '../../../../core/services/cart/cart.service';
 import { CartEditingPolicy } from '../../../../core/services/tenant.interface';
 import { CheckoutPageComponent } from './checkout-page.component';

@@ -19,24 +20,19 @@ describe('CheckoutPageComponent payment validation', () => {
  let checkoutServiceStub: {
    startCheckout: ReturnType<typeof vi.fn>;
    updateCustomerData: ReturnType<typeof vi.fn>;
-    updateItemQuantity: ReturnType<typeof vi.fn>;
-    updateItemVariant: ReturnType<typeof vi.fn>;
-    removeItem: ReturnType<typeof vi.fn>;
-    prepareItemEditing: ReturnType<typeof vi.fn>;
    cancelPurchase: ReturnType<typeof vi.fn>;
    generatePaymentIntent: ReturnType<typeof vi.fn>;
    submitPurchaseForReview: ReturnType<typeof vi.fn>;
    getPurchase: ReturnType<typeof vi.fn>;
    withCustomLoading: ReturnType<typeof vi.fn>;
  };
-  let cartServiceStub: {
-    cart: ReturnType<typeof signal>;
-    isUpdating: ReturnType<typeof signal<boolean>>;
-    loadCart: ReturnType<typeof vi.fn>;
-    clearCart: ReturnType<typeof vi.fn>;
-  };
  let routerStub: { navigate: ReturnType<typeof vi.fn> };
  let toastServiceStub: { danger: ReturnType<typeof vi.fn> };
+  let globalLoadingServiceStub: {
+    start: ReturnType<typeof vi.fn>;
+    stop: ReturnType<typeof vi.fn>;
+  };
+  let cartServiceStub: { loadCart: ReturnType<typeof vi.fn> };
  let routeQueryParamMap: ReturnType<typeof convertToParamMap>;
  let authUserState: ReturnType<typeof signal>;
  let tenantState: ReturnType<
@@ -65,42 +61,21 @@ describe('CheckoutPageComponent payment validation', () => {
        total: '0.00',
      }),
      updateCustomerData: vi.fn(),
-      updateItemQuantity: vi.fn(),
-      updateItemVariant: vi.fn(),
-      removeItem: vi.fn(),
-      prepareItemEditing: vi.fn(),
      cancelPurchase: vi.fn().mockResolvedValue({ status: 'cancelled' }),
      generatePaymentIntent: vi.fn().mockResolvedValue({
        qr_data: { qr_code: 'qr-value' },
      }),
-      submitPurchaseForReview: vi.fn().mockResolvedValue({ status: 'pending_payment' }),
+      submitPurchaseForReview: vi.fn().mockResolvedValue({ status: 'in_review' }),
      getPurchase: vi.fn().mockResolvedValue({ status: 'pending_payment' }),
      withCustomLoading: vi.fn(),
    };
    checkoutServiceStub.withCustomLoading.mockReturnValue(checkoutServiceStub);
-    cartServiceStub = {
-      cart: signal({
-        id: 10,
-        tenant_codigo: 'tenant-test',
-        status: 'active',
-        items: [],
-        subtotal: '0.00',
-      }),
-      isUpdating: signal(false),
-      loadCart: vi.fn().mockReturnValue(of({})),
-      clearCart: vi.fn(),
-    };
-    cartServiceStub.clearCart.mockImplementation(() => {
-      cartServiceStub.cart.set({
-        id: null,
-        tenant_codigo: 'tenant-test',
-        status: 'active',
-        items: [],
-        subtotal: '0.00',
-      });
-    });
    routerStub = { navigate: vi.fn() };
    toastServiceStub = { danger: vi.fn() };
+    globalLoadingServiceStub = { start: vi.fn(), stop: vi.fn() };
+    cartServiceStub = {
+      loadCart: vi.fn().mockReturnValue(of({ id: 30, items: [], subtotal: '0.00' })),
+    };
    routeQueryParamMap = convertToParamMap({});
    authUserState = signal(null);
    tenantState = signal({
@@ -119,10 +94,11 @@ describe('CheckoutPageComponent payment validation', () => {
      providers: [
        { provide: CheckoutService, useValue: checkoutServiceStub },
        { provide: CatalogService, useValue: { getCatalogItem: vi.fn() } },
-        { provide: CartService, useValue: cartServiceStub },
        { provide: TenantService, useValue: { tenant: tenantState } },
        { provide: AuthService, useValue: { user: authUserState } },
+        { provide: GlobalLoadingService, useValue: globalLoadingServiceStub },
        { provide: ToastService, useValue: toastServiceStub },
+        { provide: CartService, useValue: cartServiceStub },
        {
          provide: ActivatedRoute,
          useValue: {
@@ -168,7 +144,6 @@ describe('CheckoutPageComponent payment validation', () => {

    await vi.advanceTimersByTimeAsync(5_000);
    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(2);
-    expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
    expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
    expect(checkoutServiceStub.generatePaymentIntent).toHaveBeenCalledTimes(1);
  });
@@ -240,7 +215,25 @@ describe('CheckoutPageComponent payment validation', () => {
    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(4);
    expect(checkoutServiceStub.getPurchase).toHaveBeenLastCalledWith('tenant-test', 25);
    expect(component.transferValidationStatus()).toBe('error');
-    expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
+    expect(routerStub.navigate).not.toHaveBeenCalled();
+  });
+
+  it('prevents modifying the purchase after Ya transferí is clicked', async () => {
+    const { component } = createComponent();
+    component.selectedPaymentMethod.set('transfer');
+
+    await component.onComplete();
+
+    expect(component.hasSubmittedTransfer()).toBe(true);
+    expect(component.isPurchaseModificationDisabled()).toBe(true);
+
+    await component.selectPaymentMethod('qr');
+    await component.onModifyPurchase();
+
+    expect(component.selectedPaymentMethod()).toBe('transfer');
+    expect(checkoutServiceStub.generatePaymentIntent).not.toHaveBeenCalled();
+    expect(checkoutServiceStub.cancelPurchase).not.toHaveBeenCalled();
+    expect(globalLoadingServiceStub.start).not.toHaveBeenCalled();
    expect(routerStub.navigate).not.toHaveBeenCalled();
  });

@@ -253,7 +246,6 @@ describe('CheckoutPageComponent payment validation', () => {
    await vi.advanceTimersByTimeAsync(3_000);

    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledWith('tenant-test', 25);
-    expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
    expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
  });

@@ -268,7 +260,6 @@ describe('CheckoutPageComponent payment validation', () => {

    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(4);
    expect(component.transferValidationStatus()).toBe('error');
-    expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
    expect(routerStub.navigate).not.toHaveBeenCalled();
  });

@@ -286,19 +277,11 @@ describe('CheckoutPageComponent payment validation', () => {
    expect(component.transferValidationStatus()).toBe('error');
  });

-  it('cancels transfer polling when the payment method changes or the component is destroyed', async () => {
-    const first = createComponent();
-    first.component.selectedPaymentMethod.set('transfer');
-    first.component.onComplete();
-    checkoutServiceStub.generatePaymentIntent.mockResolvedValueOnce({});
-    await first.component.selectPaymentMethod('qr');
-    await vi.advanceTimersByTimeAsync(12_000);
-    expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
-
-    const second = createComponent();
-    second.component.selectedPaymentMethod.set('transfer');
-    second.component.onComplete();
-    second.fixture.destroy();
+  it('cancels transfer polling when the component is destroyed', async () => {
+    const checkout = createComponent();
+    checkout.component.selectedPaymentMethod.set('transfer');
+    await checkout.component.onComplete();
+    checkout.fixture.destroy();
    await vi.advanceTimersByTimeAsync(12_000);
    expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
  });
@@ -477,83 +460,30 @@ describe('CheckoutPageComponent payment validation', () => {
    expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
  });

-  it('updates a purchase item while editing and refreshes checkout totals', async () => {
-    const updatedPurchase = {
-      id: 25,
-      items: [],
-      subtotal: '300.00',
-      total: '300.00',
-    };
-    checkoutServiceStub.updateItemQuantity.mockResolvedValue(updatedPurchase);
-    const { component } = createComponent();
-    component.isEditingItems.set(true);
-
-    await component.onPurchaseItemQuantityChange({
-      item: {
-        cartItemId: 91,
-        imageUrl: null,
-        product: 'Remera',
-        originalPrice: null,
-        discountedPrice: 100,
-        discountPercentage: null,
-        attributes: [],
-        quantity: 2,
-      },
-      quantity: 3,
+  it('shows the API error in a toast when cancelling the purchase fails', async () => {
+    const message = 'La compra venció. Iniciá una nueva compra.';
+    checkoutServiceStub.cancelPurchase.mockRejectedValue({
+      error: { code: 'purchase.expired', message },
    });
+    const { component } = createComponent();

-    expect(checkoutServiceStub.updateItemQuantity).toHaveBeenCalledWith(
-      'tenant-test',
-      25,
-      91,
-      3,
-      null,
-      'purchase',
+    await component.onModifyPurchase();
+
+    expect(toastServiceStub.danger).toHaveBeenCalledWith(message);
+    expect(routerStub.navigate).not.toHaveBeenCalled();
+    expect(globalLoadingServiceStub.start).toHaveBeenCalledOnce();
+    expect(globalLoadingServiceStub.stop).toHaveBeenCalledOnce();
+    expect(component.isCancellingPurchase()).toBe(false);
+  });
+
+  it('cancels the current purchase and opens the active cart when Modificar is clicked', async () => {
+    let finishNavigation!: (navigated: boolean) => void;
+    routerStub.navigate.mockReturnValue(
+      new Promise<boolean>((resolve) => {
+        finishNavigation = resolve;
+      }),
    );
-    expect(component.createdPurchase()).toBe(updatedPurchase);
-    expect(component.isUpdatingItem()).toBe(false);
-  });
-
-  it('keeps the payment step selected while editing and regenerates payment afterward', async () => {
-    const editablePurchase = {
-      id: 25,
-      status: 'created',
-      items: [],
-      subtotal: '100.00',
-      total: '100.00',
-    };
-    checkoutServiceStub.prepareItemEditing.mockResolvedValue(editablePurchase);
    const { component } = createComponent();
-    component.stepper = { currentStepIndex: signal(1) };
-    const selectPaymentMethod = vi
-      .spyOn(component, 'selectPaymentMethod')
-      .mockResolvedValue(undefined);
-
-    await component.onEditingItemsChange(true);
-
-    expect(checkoutServiceStub.prepareItemEditing).toHaveBeenCalledWith('tenant-test', 25);
-    expect(component.isEditingItems()).toBe(true);
-    expect(component.createdPurchase()).toBe(editablePurchase);
-
-    await component.onEditingItemsChange(false);
-
-    expect(component.stepper.currentStepIndex()).toBe(1);
-    expect(selectPaymentMethod).toHaveBeenCalledWith('qr');
-    expect(component.isEditingItems()).toBe(false);
-  });
-
-  it('shows Modificar and returns to the home cart when checkout editing is disabled', async () => {
-    tenantState.set({
-      codigo: 'tenant-test',
-      checkout_editing_policy: {
-        code: 'disabled',
-        allow_modify: false,
-        allow_delete: false,
-        allow_update_quantity: false,
-        allow_update_variant: false,
-      },
-    });
-    const { fixture, component } = createComponent();
    component.createdPurchase.set({
      id: 25,
      status: 'created',
@@ -577,23 +507,26 @@ describe('CheckoutPageComponent payment validation', () => {
      subtotal: '200.00',
      total: '200.00',
    });
-    fixture.detectChanges();
+    const modification = component.onModifyPurchase();
+    await Promise.resolve();
+    await Promise.resolve();

-    const modifyButton = (fixture.nativeElement as HTMLElement).querySelector('.cart-edit-btn');
-    expect(modifyButton?.textContent?.trim()).toBe('Modificar');
-    expect(
-      (fixture.nativeElement as HTMLElement).querySelector('app-quantity-selector'),
-    ).toBeNull();
-
-    await component.onEditingItemsChange(true);
-
-    expect(component.canUpdateCartQuantity()).toBe(false);
-    expect(component.canModifyCart()).toBe(false);
-    expect(component.isEditingItems()).toBe(false);
-    expect(checkoutServiceStub.prepareItemEditing).not.toHaveBeenCalled();
+    expect(checkoutServiceStub.cancelPurchase).toHaveBeenCalledWith('tenant-test', 25);
+    expect(cartServiceStub.loadCart).toHaveBeenCalledOnce();
+    expect(globalLoadingServiceStub.start).toHaveBeenCalledOnce();
+    expect(globalLoadingServiceStub.stop).not.toHaveBeenCalled();
+    expect(component.createdPurchaseId()).toBeNull();
+    expect(component.createdPurchase()).toBeNull();
    expect(routerStub.navigate).toHaveBeenCalledWith(['/'], {
      queryParams: { openCart: true },
    });
+
+    finishNavigation(true);
+    await modification;
+
+    expect(globalLoadingServiceStub.stop).toHaveBeenCalledOnce();
+
+    await component.canDeactivate();
  });

  it('updates customer data on the existing purchase before payment', async () => {
@@ -630,14 +563,27 @@ describe('CheckoutPageComponent payment validation', () => {
    expect(component.stepper.next).toHaveBeenCalledOnce();
  });

-  it('keeps the checkout purchase intact when navigating away', async () => {
+  it('cancels the current purchase when navigating away from checkout', async () => {
    const { component } = createComponent();

    await expect(component.canDeactivate()).resolves.toBe(true);

-    expect(checkoutServiceStub.cancelPurchase).not.toHaveBeenCalled();
-    expect(cartServiceStub.loadCart).toHaveBeenCalled();
-    expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
+    expect(checkoutServiceStub.cancelPurchase).toHaveBeenCalledWith('tenant-test', 25);
+    expect(cartServiceStub.loadCart).toHaveBeenCalledOnce();
+    expect(component.createdPurchaseId()).toBeNull();
+    expect(globalLoadingServiceStub.start).toHaveBeenCalledOnce();
+    expect(globalLoadingServiceStub.stop).toHaveBeenCalledOnce();
+  });
+
+  it('prevents leaving checkout when the purchase cannot be cancelled', async () => {
+    checkoutServiceStub.cancelPurchase.mockRejectedValue({
+      error: { message: 'No se pudo cancelar la compra.' },
+    });
+    const { component } = createComponent();
+
+    await expect(component.canDeactivate()).resolves.toBe(false);
+
+    expect(toastServiceStub.danger).toHaveBeenCalledWith('No se pudo cancelar la compra.');
    expect(component.createdPurchaseId()).toBe(25);
  });

--- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts
@@ -20,9 +20,9 @@ import {
  PurchaseDetailResponse,
 } from '../../../../core/services/checkout.service';
 import { AuthService } from '../../../../core/services/auth/auth.service';
-import { CartService } from '../../../../core/services/cart/cart.service';
+import { GlobalLoadingService } from '../../../../core/services/global-loading/global-loading.service';
 import { ToastService } from '../../../../core/services/toast.service';
-import { BankAccount } from '../../../../core/services/tenant.interface';
+import { CartService } from '../../../../core/services/cart/cart.service';
 import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
 import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
@@ -65,9 +65,10 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
  private readonly tenantService = inject(TenantService);
  private readonly checkoutService = inject(CheckoutService);
  private readonly authService = inject(AuthService);
+  private readonly globalLoadingService = inject(GlobalLoadingService);
+  private readonly toastService = inject(ToastService);
  private readonly cartService = inject(CartService);
  private readonly qrPollingIntervalMs = 5_000;
-  private readonly toastService = inject(ToastService);
  private readonly qrPollingMaxAttempts = 9;
  private readonly transferPollingIntervalMs = 3_000;
  private readonly transferPollingMaxAttempts = 4;
@@ -80,6 +81,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
  private transferPollingRunId = 0;
  private paymentMethodRequestId = 0;
  private navigationStarted = false;
+  private cancelPurchasePromise: Promise<boolean> | null = null;

  @ViewChild(StepperComponent) stepper!: StepperComponent;

@@ -93,19 +95,6 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
  protected readonly createdPurchase = signal<PurchaseDetailResponse | null>(null);
  protected readonly isLoadingPurchase = signal(true);
  protected readonly checkoutStepIndex = signal(0);
-  protected readonly canUpdateCartQuantity = computed(
-    () => this.tenantService.tenant()?.checkout_editing_policy?.allow_update_quantity ?? false,
-  );
-  protected readonly canUpdateCartVariant = computed(
-    () => this.tenantService.tenant()?.checkout_editing_policy?.allow_update_variant ?? false,
-  );
-  protected readonly canDeleteCartItems = computed(
-    () => this.tenantService.tenant()?.checkout_editing_policy?.allow_delete ?? false,
-  );
-  protected readonly canModifyCart = computed(
-    () => this.tenantService.tenant()?.checkout_editing_policy?.allow_modify ?? false,
-  );
-
  protected readonly cartSubtotal = computed(() => {
    const purchase = this.createdPurchase();
    return purchase ? parseFloat(purchase.subtotal) : 0;
@@ -134,9 +123,11 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
  protected readonly transferDni = signal<string>('');

  protected readonly isUpdatingPurchase = signal(false);
-  protected readonly isEditingItems = signal(false);
-  protected readonly isUpdatingItem = signal(false);
-  protected readonly isPreparingItemEdit = signal(false);
+  protected readonly isCancellingPurchase = signal(false);
+  protected readonly hasSubmittedTransfer = signal(false);
+  protected readonly isPurchaseModificationDisabled = computed(
+    () => this.isCancellingPurchase() || this.hasSubmittedTransfer(),
+  );
  protected readonly createdPurchaseId = signal<number | null>(null);
  protected readonly isGeneratingIntent = signal(false);
  protected readonly isPaymentLoading = computed(() => this.isGeneratingIntent());
@@ -198,191 +189,29 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      })),
      quantity: item.quantity,
      variantId: item.source_variant_id,
-      variants: item.variants,
    };
  }

-  protected async onEditingItemsChange(editing: boolean): Promise<void> {
-    if (this.isUpdatingItem() || this.isPreparingItemEdit()) {
+  protected async onModifyPurchase(): Promise<void> {
+    if (this.isPurchaseModificationDisabled()) {
      return;
    }

-    if (editing && !this.canModifyCart()) {
-      const tenant = this.tenantService.tenant();
-      const purchaseId = this.createdPurchaseId();
-
-      if (!tenant || !purchaseId) {
-        return;
-      }
-
-      this.isPreparingItemEdit.set(true);
-      try {
-        await this.checkoutService.cancelPurchase(tenant.codigo, purchaseId);
-        this.createdPurchaseId.set(null);
-        this.createdPurchase.set(null);
-        await firstValueFrom(this.cartService.loadCart());
-        await this.router.navigate(['/'], {
-          queryParams: { openCart: true },
-        });
-      } catch (error) {
-        this.handleCheckoutError(error, 'No se pudo restaurar el carrito para editarlo.');
-      } finally {
-        this.isPreparingItemEdit.set(false);
-      }
-
-      return;
-    }
-
-    if (!editing) {
-      this.isEditingItems.set(false);
-
-      if (this.stepper?.currentStepIndex() === 1) {
-        void this.selectPaymentMethod(this.selectedPaymentMethod());
-      }
-
-      return;
-    }
-
-    this.isEditingItems.set(true);
-    this.stopQrPolling();
-    this.stopTransferPolling();
-    this.qrData.set(null);
-    this.qrPaymentStatus.set('idle');
-    this.transferAccount.set(null);
-    this.transferValidationStatus.set('idle');
-
-    const tenant = this.tenantService.tenant();
-    const purchaseId = this.createdPurchaseId();
-
-    if (!tenant || !purchaseId) {
-      this.isEditingItems.set(false);
-      return;
-    }
-
-    this.isPreparingItemEdit.set(true);
+    this.globalLoadingService.start();
    try {
-      const purchase = await this.checkoutService.prepareItemEditing(tenant.codigo, purchaseId);
-      this.createdPurchase.set(purchase);
-    } catch (error) {
-      this.handleCheckoutError(error, 'No se pudo preparar la compra para editarla.');
-      this.isEditingItems.set(false);
+      const cancelled = await this.cancelCurrentPurchase();
+      if (!cancelled) return;
+
+      await this.router.navigate(['/'], {
+        queryParams: { openCart: true },
+      });
    } finally {
-      this.isPreparingItemEdit.set(false);
-    }
-  }
-
-  protected async onPurchaseItemQuantityChange(event: {
-    item: CartItemMock;
-    quantity: number;
-  }): Promise<void> {
-    const tenant = this.tenantService.tenant();
-    const purchaseId = this.createdPurchaseId();
-    const itemId = event.item.cartItemId;
-
-    if (
-      !this.canUpdateCartQuantity() ||
-      !tenant ||
-      !purchaseId ||
-      !itemId ||
-      this.isUpdatingItem() ||
-      !this.isEditingItems()
-    ) {
-      return;
-    }
-
-    this.isUpdatingItem.set(true);
-    try {
-      const purchase = await this.checkoutService.updateItemQuantity(
-        tenant.codigo,
-        purchaseId,
-        itemId,
-        event.quantity,
-        this.createdPurchase()?.cart_id ?? null,
-        this.createdPurchase()?.items_source ?? 'purchase',
-      );
-      this.createdPurchase.set(purchase);
-    } catch (error) {
-      this.handleCheckoutError(error, 'No se pudo actualizar la cantidad del producto.');
-    } finally {
-      this.isUpdatingItem.set(false);
-    }
-  }
-
-  protected async onPurchaseItemVariantChange(event: {
-    item: CartItemMock;
-    variantId: number;
-  }): Promise<void> {
-    const tenant = this.tenantService.tenant();
-    const purchase = this.createdPurchase();
-    const itemId = event.item.cartItemId;
-
-    if (
-      !this.canUpdateCartVariant() ||
-      !tenant ||
-      !purchase ||
-      !itemId ||
-      this.isUpdatingItem() ||
-      !this.isEditingItems()
-    ) {
-      return;
-    }
-
-    this.isUpdatingItem.set(true);
-    try {
-      this.createdPurchase.set(
-        await this.checkoutService.updateItemVariant(
-          tenant.codigo,
-          purchase.id,
-          itemId,
-          event.variantId,
-          event.item.quantity,
-          purchase.cart_id,
-          purchase.items_source,
-        ),
-      );
-    } catch (error) {
-      this.handleCheckoutError(error, 'No se pudo actualizar la variante del producto.');
-    } finally {
-      this.isUpdatingItem.set(false);
-    }
-  }
-
-  protected async onPurchaseItemRemove(event: { item: CartItemMock }): Promise<void> {
-    const tenant = this.tenantService.tenant();
-    const purchase = this.createdPurchase();
-    const itemId = event.item.cartItemId;
-
-    if (
-      !this.canDeleteCartItems() ||
-      !tenant ||
-      !purchase ||
-      !itemId ||
-      this.isUpdatingItem() ||
-      !this.isEditingItems()
-    ) {
-      return;
-    }
-
-    this.isUpdatingItem.set(true);
-    try {
-      this.createdPurchase.set(
-        await this.checkoutService.removeItem(
-          tenant.codigo,
-          purchase.id,
-          itemId,
-          purchase.cart_id,
-          purchase.items_source,
-        ),
-      );
-    } catch (error) {
-      this.handleCheckoutError(error, 'No se pudo eliminar el producto de la compra.');
-    } finally {
-      this.isUpdatingItem.set(false);
+      this.globalLoadingService.stop();
    }
  }

  protected async onStep1Continue(): Promise<void> {
-    if (this.form.invalid || this.isUpdatingPurchase() || this.isEditingItems()) return;
+    if (this.form.invalid || this.isUpdatingPurchase()) return;

    const tenant = this.tenantService.tenant();
    const purchaseId = this.createdPurchaseId();
@@ -405,39 +234,77 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      // Auto trigger intent for default option
      void this.selectPaymentMethod(this.selectedPaymentMethod());
    } catch (error) {
-      this.handleCheckoutError(error, 'No se pudieron actualizar los datos de la compra.');
+      console.error('Failed to create purchase:', error);
+      this.showRequestError(error, 'No se pudieron actualizar los datos de la compra.');
    } finally {
      this.isUpdatingPurchase.set(false);
    }
  }

  protected async onCancel(): Promise<void> {
-    if (await this.canDeactivate()) {
-      void this.router.navigate(['/']);
-    }
+    void this.router.navigate(['/']);
  }

  public async canDeactivate(): Promise<boolean> {
    this.stopQrPolling();
    this.stopTransferPolling();

+    if (this.cancelPurchasePromise) {
+      return this.cancelPurchasePromise;
+    }
+
    if (this.navigationStarted) {
      return true;
    }

-    // The checkout cart remains attached to its purchase. Once the user adds a
-    // new item, the cart API creates a separate active cart automatically.
+    this.globalLoadingService.start();
    try {
-      await firstValueFrom(this.cartService.loadCart());
-    } catch (error) {
-      console.error('Failed to load the active cart after leaving checkout:', error);
+      return await this.cancelCurrentPurchase();
+    } finally {
+      this.globalLoadingService.stop();
+    }
+  }
+
+  private cancelCurrentPurchase(): Promise<boolean> {
+    if (this.cancelPurchasePromise) {
+      return this.cancelPurchasePromise;
    }

-    return true;
+    this.cancelPurchasePromise = this.performPurchaseCancellation().finally(() => {
+      this.cancelPurchasePromise = null;
+    });
+
+    return this.cancelPurchasePromise;
+  }
+
+  private async performPurchaseCancellation(): Promise<boolean> {
+    const tenant = this.tenantService.tenant();
+    const purchaseId = this.createdPurchaseId();
+    if (!tenant || !purchaseId) {
+      return true;
+    }
+
+    this.isCancellingPurchase.set(true);
+
+    try {
+      await this.checkoutService.cancelPurchase(tenant.codigo, purchaseId);
+      await firstValueFrom(this.cartService.loadCart());
+      this.createdPurchaseId.set(null);
+      this.createdPurchase.set(null);
+
+      this.navigationStarted = true;
+      return true;
+    } catch (error) {
+      console.error('Failed to cancel the current purchase:', error);
+      this.showRequestError(error, 'No se pudo cancelar la compra.');
+      return false;
+    } finally {
+      this.isCancellingPurchase.set(false);
+    }
  }

  protected async selectPaymentMethod(method: PaymentMethod): Promise<void> {
-    if (this.navigationStarted || this.isEditingItems()) {
+    if (this.navigationStarted || this.hasSubmittedTransfer()) {
      return;
    }

@@ -481,14 +348,15 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
        this.startQrPolling();
      }
    } catch (error) {
-      this.handleCheckoutError(error, 'No se pudo generar la intenci\u00f3n de pago.');
+      console.error('Failed to generate payment intent:', error);
+      this.showRequestError(error, 'No se pudo generar el pago.');
    } finally {
      this.isGeneratingIntent.set(false);
    }
  }

  protected async generateTransferIntent(dni: string): Promise<void> {
-    if (this.isEditingItems()) {
+    if (this.hasSubmittedTransfer()) {
      return;
    }

@@ -518,7 +386,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
        });
      }
    } catch (error) {
-      this.handleCheckoutError(error, 'No se pudo generar la intenci\u00f3n de transferencia.');
+      console.error('Failed to generate transfer payment intent:', error);
+      this.showRequestError(error, 'No se pudo generar el pago por transferencia.');
    } finally {
      this.isGeneratingIntent.set(false);
    }
@@ -549,13 +418,13 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      !purchaseId ||
      !tenant ||
      this.navigationStarted ||
-      this.isEditingItems() ||
      this.transferValidationStatus() === 'checking'
    ) {
      return;
    }

    this.stopTransferPolling();
+    this.hasSubmittedTransfer.set(true);
    this.transferValidationStatus.set('checking');
    this.transferPollingAttempts = 0;

@@ -579,7 +448,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
    } catch (error) {
      const expired = this.handleCheckoutError(
        error,
-        'No se pudo enviar la compra a revisi\u00f3n.',
+        'No se pudo enviar el pago para su validación.',
      );

      if (!expired && runId === this.transferPollingRunId) {
@@ -771,6 +640,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      return;
    }

+    this.createdPurchaseId.set(purchaseId);
+
    try {
      const purchase = await this.checkoutService
        .withCustomLoading()
@@ -778,6 +649,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {

      if (
        (purchase.status === 'pending_payment' && purchase.expires_at === null) ||
+        purchase.status === 'in_review' ||
        purchase.status === 'paid' ||
        purchase.status === 'cancelled' ||
        purchase.status === 'rejected' ||
@@ -811,30 +683,41 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      }
    } catch (error) {
      console.error('Failed to load purchase:', error);
+      this.showRequestError(error, 'No se pudo cargar la compra.');
      void this.router.navigate(['/']);
    }
  }

+  private showRequestError(error: unknown, fallbackMessage: string): void {
+    const payload =
+      typeof error === 'object' && error !== null && 'error' in error
+        ? (error as { error?: { message?: unknown } }).error
+        : undefined;
+    const message =
+      typeof payload?.message === 'string' && payload.message.trim()
+        ? payload.message
+        : fallbackMessage;
+
+    this.toastService.danger(message);
+  }
+
  private handleCheckoutError(error: unknown, fallbackMessage: string): boolean {
    if (!(error instanceof HttpErrorResponse)) {
      this.toastService.danger(fallbackMessage);
-
      return false;
    }

    const response = error.error as ApiErrorResponse | null;

    if (response?.code === 'purchase.expired' || this.hasExpiredPurchase()) {
-      this.navigationStarted = true;
      this.stopQrPolling();
      this.stopTransferPolling();
      this.toastService.danger(
        response?.code === 'purchase.expired' && response.message
          ? response.message
-          : 'La compra venci\u00f3. Inici\u00e1 una nueva compra.',
+          : 'La compra venció. Iniciá una nueva compra.',
      );
      void this.router.navigate(['/']);
-
      return true;
    }

@@ -843,7 +726,6 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      : undefined;

    this.toastService.danger(validationMessage ?? response?.message ?? fallbackMessage);
-
    return false;
  }

--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
@@ -7,13 +7,18 @@

      <div class="payment-methods__list" role="radiogroup" aria-label="Metodo de pago">
        @for (method of paymentMethods(); track method.id) {
-          <label class="payment-method" [class.is-selected]="selectedPaymentMethod() === method.id">
+          <label
+            class="payment-method"
+            [class.is-selected]="selectedPaymentMethod() === method.id"
+            [class.is-disabled]="paymentMethodDisabled()"
+          >
            <input
              class="payment-method__radio"
              type="radio"
              name="payment-method"
              [value]="method.id"
              [checked]="selectedPaymentMethod() === method.id"
+              [disabled]="paymentMethodDisabled()"
              (change)="selectPaymentMethod(method.id)"
            />

--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss
@@ -63,10 +63,14 @@
  cursor: pointer;
  transition: color 0.2s ease;

-  &:hover {
+  &:not(.is-disabled):hover {
    color: #4f4f4f;
  }

+  &.is-disabled {
+    cursor: default;
+  }
+
  &.is-selected {
    color: var(--tenant-primary, #6376f3);
  }
@@ -79,6 +83,10 @@
    cursor: pointer;
  }

+  &.is-disabled &__radio {
+    cursor: default;
+  }
+
  &__label {
    min-width: 0;
    font-size: 13px;
@@ -91,11 +99,13 @@
    font-size: 0.95rem;
    opacity: 0;
    transform: translateX(-4px);
-    transition: opacity 0.2s ease, transform 0.2s ease;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
  }

  &.is-selected &__chevron,
-  &:hover &__chevron {
+  &:not(.is-disabled):hover &__chevron {
    opacity: 1;
    transform: translateX(0);
  }
@@ -140,6 +150,4 @@
    font-weight: 700;
    line-height: 1.35;
  }
-
 }
-
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts
@@ -17,11 +17,12 @@ import {
  imports: [CheckoutPaymentQrComponent, CheckoutPaymentTransferComponent],
  templateUrl: './checkout-payment-step.component.html',
  styleUrl: './checkout-payment-step.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CheckoutPaymentStepComponent {
  readonly paymentMethods = input.required<ReadonlyArray<PaymentMethodOption>>();
  readonly selectedPaymentMethod = input.required<PaymentMethod>();
+  readonly paymentMethodDisabled = input<boolean>(false);
  readonly copiedTransferField = input<TransferField | null>(null);
  readonly transferAccount = input<TransferAccount | null>(null);
  readonly transferDni = input<string>('');
@@ -40,6 +41,10 @@ export class CheckoutPaymentStepComponent {
  readonly generateTransferIntent = output<string>();

  protected selectPaymentMethod(method: PaymentMethod): void {
+    if (this.paymentMethodDisabled()) {
+      return;
+    }
+
    this.paymentMethodChange.emit(method);
  }

--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
@@ -9,6 +9,7 @@ import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';

 import { CatalogItemDetail } from '../../../../core/services/catalog/catalog.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
 import { CartService } from '../../../../core/services/cart/cart.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { ProductDetailPageComponent } from './product-detail-page.component';
@@ -176,6 +177,21 @@ describe('ProductDetailPageComponent', () => {
    expect(element.querySelector('.product-carousel__discount-badge')).toBeNull();
  });

+  it('reloads product availability when the cart changes', async () => {
+    catalogServiceStub.getCatalogItem.mockReturnValue(
+      of({ ...mockProduct, maximum_addable_quantity: 4 }),
+    );
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    TestBed.inject(CatalogAvailabilityService).notifyAvailabilityChanged();
+    fixture.detectChanges();
+
+    expect(catalogServiceStub.getCatalogItem).toHaveBeenCalledWith(1, undefined);
+    expect(fixture.componentInstance['selectedVariantMax']()).toBe(4);
+  });
+
  it('shows error message if the resolver cannot load the product', async () => {
    resolveProductError(PRODUCT_DETAIL_ERROR_MESSAGE);
    await configureTestingModule();
@@ -510,9 +526,9 @@ describe('ProductDetailPageComponent', () => {
    await configureTestingModule();
    const fixture = TestBed.createComponent(ProductDetailPageComponent);
    fixture.detectChanges();
-    const buyButton = Array.from(fixture.nativeElement.querySelectorAll('app-button button')).find(
-      (button) => button.textContent?.trim() === 'Comprar',
-    ) as HTMLButtonElement;
+    const buyButton = Array.from(
+      fixture.nativeElement.querySelectorAll('app-button button') as NodeListOf<HTMLButtonElement>,
+    ).find((button) => button.textContent?.trim() === 'Comprar') as HTMLButtonElement;

    buyButton.click();
    await Promise.resolve();
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
@@ -17,6 +17,7 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { Subscription } from 'rxjs';

 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { CartService } from '../../../../core/services/cart/cart.service';
 import {
@@ -51,6 +52,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
  private readonly route = inject(ActivatedRoute);
  private readonly router = inject(Router);
  private readonly catalogService = inject(CatalogService);
+  private readonly catalogAvailabilityService = inject(CatalogAvailabilityService);
  private readonly toastService = inject(ToastService);
  private readonly cartService = inject(CartService);
  private readonly checkoutService = inject(CheckoutService);
@@ -64,6 +66,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {

  private routeSub: Subscription | null = null;
  private productSub: Subscription | null = null;
+  private availabilityChangedSub: Subscription | null = null;
  private carouselResizeObserver: ResizeObserver | null = null;
  private observedCarouselPreview: HTMLElement | null = null;
  private measurementTimer: ReturnType<typeof setTimeout> | null = null;
@@ -150,6 +153,10 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
  }

  ngOnInit(): void {
+    this.availabilityChangedSub = this.catalogAvailabilityService.availabilityChanged$.subscribe(
+      () => this.refreshProductAvailability(),
+    );
+
    this.routeSub = this.route.data.subscribe((data) => {
      const resolvedData = data['productDetailData'] as ProductDetailResolvedData | undefined;

@@ -160,6 +167,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
  }

  ngOnDestroy(): void {
+    this.availabilityChangedSub?.unsubscribe();
    this.routeSub?.unsubscribe();
    this.productSub?.unsubscribe();
    this.carouselResizeObserver?.disconnect();
@@ -196,6 +204,32 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
      });
  }

+  private refreshProductAvailability(): void {
+    const currentProduct = this.product();
+    if (!currentProduct) {
+      return;
+    }
+
+    const variantId = this.selectedVariant()?.id;
+    this.productSub?.unsubscribe();
+    this.productSub = this.catalogService
+      .withCustomLoading()
+      .getCatalogItem(currentProduct.id, variantId)
+      .subscribe({
+        next: (product) => {
+          this.applyProduct(product, false);
+
+          const maximum = this.selectedVariantMax();
+          if (maximum !== null && this.quantity() > maximum) {
+            this.quantity.set(Math.max(1, maximum));
+          }
+        },
+        error: () => {
+          // Keep the last known availability if the silent refresh fails.
+        },
+      });
+  }
+
  private applyResolvedData(resolvedData: ProductDetailResolvedData): void {
    this.productSub?.unsubscribe();
    this.loading.set(false);
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.spec.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.spec.ts
@@ -15,6 +15,7 @@ import {
 describe('productDetailResolver', () => {
  const product: CatalogItemDetail = {
    id: 1,
+    type: 'product',
    category_id: 10,
    brand_id: null,
    slug: 'auriculares-bluetooth',
--- a/src/app/features/store/pages/search-page/search-page.component.spec.ts
+++ b/src/app/features/store/pages/search-page/search-page.component.spec.ts
@@ -7,6 +7,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';

 import { CartService } from '../../../../core/services/cart/cart.service';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
 import { Tenant } from '../../../../core/services/tenant.interface';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
@@ -108,6 +109,16 @@ describe('SearchPageComponent', () => {
    );
  });

+  it('repeats the current search when catalog availability changes', () => {
+    const fixture = TestBed.createComponent(SearchPageComponent);
+    fixture.detectChanges();
+
+    TestBed.inject(CatalogAvailabilityService).notifyAvailabilityChanged();
+
+    expect(searchCatalog).toHaveBeenCalledTimes(2);
+    expect(searchCatalog).toHaveBeenLastCalledWith({ q: 'running', page: 1 });
+  });
+
  it('renders the search title and query subtitle with the category header layout', () => {
    const fixture = TestBed.createComponent(SearchPageComponent);
    fixture.detectChanges();
--- a/src/app/features/store/pages/search-page/search-page.component.ts
+++ b/src/app/features/store/pages/search-page/search-page.component.ts
@@ -9,7 +9,17 @@ import {
  signal,
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { catchError, distinctUntilChanged, finalize, map, of, switchMap, tap } from 'rxjs';
+import {
+  catchError,
+  combineLatest,
+  distinctUntilChanged,
+  finalize,
+  map,
+  of,
+  startWith,
+  switchMap,
+  tap,
+} from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

 import { CartService } from '../../../../core/services/cart/cart.service';
@@ -22,6 +32,7 @@ import {
  CatalogProductLayout,
 } from '../../../../core/services/catalog/catalog.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
 import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
@@ -46,6 +57,7 @@ interface SearchRouteState {
 export class SearchPageComponent {
  private readonly minSearchLength = 3;
  private readonly cartService = inject(CartService);
+  private readonly catalogAvailabilityService = inject(CatalogAvailabilityService);
  private readonly catalogService = inject(CatalogService);
  private readonly injector = inject(Injector);
  private readonly destroyRef = inject(DestroyRef);
@@ -86,26 +98,33 @@ export class SearchPageComponent {
  });

  constructor() {
-    this.route.queryParamMap
-      .pipe(
-        map(
-          (params): SearchRouteState => ({
-            query: params.get('q')?.trim() ?? '',
-            page: this.parsePage(params.get('page')),
-          }),
-        ),
-        distinctUntilChanged(
-          (previous, current) => previous.query === current.query && previous.page === current.page,
-        ),
-        tap(({ query }) => {
-          this.query.set(query);
-          this.results.set(null);
-          this.error.set(
-            query.length >= this.minSearchLength
-              ? null
-              : `Ingresá al menos ${this.minSearchLength} caracteres para buscar.`,
-          );
+    const routeState$ = this.route.queryParamMap.pipe(
+      map(
+        (params): SearchRouteState => ({
+          query: params.get('q')?.trim() ?? '',
+          page: this.parsePage(params.get('page')),
        }),
+      ),
+      distinctUntilChanged(
+        (previous, current) => previous.query === current.query && previous.page === current.page,
+      ),
+      tap(({ query }) => {
+        this.query.set(query);
+        this.results.set(null);
+        this.error.set(
+          query.length >= this.minSearchLength
+            ? null
+            : `Ingresá al menos ${this.minSearchLength} caracteres para buscar.`,
+        );
+      }),
+    );
+
+    combineLatest([
+      routeState$,
+      this.catalogAvailabilityService.availabilityChanged$.pipe(startWith(undefined)),
+    ])
+      .pipe(
+        map(([routeState]) => routeState),
        switchMap(({ query, page }) => {
          if (query.length < this.minSearchLength) {
            return of(null);
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
@@ -12,6 +12,7 @@ import {
  CatalogFeaturedItem,
 } from '../../../../core/services/catalog/catalog.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
 import { Tenant } from '../../../../core/services/tenant.interface';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
@@ -78,12 +79,14 @@ function provideActivatedRoute(catalogData: StoreHomeCatalogResolvedData) {
 const pageOneItems: CatalogFeaturedItem[] = [
  {
    id: 1,
+    type: 'product',
    nombre: 'Auriculares Bluetooth',
    precio: '24999.00',
    image: '/catalog/auriculares.jpg',
  },
  {
    id: 2,
+    type: 'product',
    nombre: 'Teclado Mecanico',
    precio: '18999.00',
    image: null,
@@ -159,6 +162,30 @@ describe('StoreHomePageComponent', () => {
    );
  });

+  it('reloads the catalog when availability changes', async () => {
+    const refreshedCatalog = createCatalog();
+    const catalogServiceStub = {
+      getCatalog: vi.fn().mockReturnValue(of(refreshedCatalog)),
+      getFeaturedGroupItems: vi.fn(),
+      withCustomLoading: vi.fn(),
+    };
+    catalogServiceStub.withCustomLoading.mockReturnValue(catalogServiceStub);
+
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        provideActivatedRoute({ response: createCatalog(), error: null }),
+        { provide: CatalogService, useValue: catalogServiceStub },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+    TestBed.inject(CatalogAvailabilityService).notifyAvailabilityChanged();
+
+    expect(catalogServiceStub.getCatalog).toHaveBeenCalledOnce();
+  });
+
  it('renders the carousel URLs received in tenant extras', async () => {
    const carousel = ['https://example.com/carousel-1.webp', 'https://example.com/carousel-2.webp'];

@@ -378,7 +405,9 @@ describe('StoreHomePageComponent', () => {
  });

  it('requests another page for the selected featured group', async () => {
-    const pageTwoItems = [{ id: 3, nombre: 'Mouse Gamer', precio: '15999.00', image: null }];
+    const pageTwoItems: CatalogFeaturedItem[] = [
+      { id: 3, type: 'product', nombre: 'Mouse Gamer', precio: '15999.00', image: null },
+    ];
    const catalogServiceStub = {
      getCatalog: vi.fn(),
      getFeaturedGroupItems: vi.fn().mockReturnValue(of(createItemsPage(pageTwoItems, 2, 2))),
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.ts
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.ts
@@ -15,6 +15,7 @@ import { finalize, Subscription } from 'rxjs';
 import { CartService } from '../../../../core/services/cart/cart.service';
 import { AuthService } from '../../../../core/services/auth/auth.service';
 import { CatalogFeaturedGroup } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
@@ -49,6 +50,7 @@ import {
 })
 export class StoreHomePageComponent implements OnInit, OnDestroy {
  private readonly cartService = inject(CartService);
+  private readonly catalogAvailabilityService = inject(CatalogAvailabilityService);
  private readonly catalogService = inject(CatalogService);
  private readonly injector = inject(Injector);
  private readonly route = inject(ActivatedRoute);
@@ -96,9 +98,13 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
  protected readonly hasMainCarouselImages = computed(() => this.mainCarouselImages().length > 0);

  private catalogRequestSubscription: Subscription | null = null;
+  private availabilityChangedSubscription: Subscription | null = null;
  private readonly groupRequestSubscriptions = new Map<number, Subscription>();

  ngOnInit(): void {
+    this.availabilityChangedSubscription =
+      this.catalogAvailabilityService.availabilityChanged$.subscribe(() => this.loadCatalog(true));
+
    const resolvedData = this.route.snapshot.data['catalogData'] as
      | StoreHomeCatalogResolvedData
      | undefined;
@@ -112,6 +118,7 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
  }

  ngOnDestroy(): void {
+    this.availabilityChangedSubscription?.unsubscribe();
    this.catalogRequestSubscription?.unsubscribe();
    this.groupRequestSubscriptions.forEach((subscription) => subscription.unsubscribe());
  }
@@ -264,20 +271,27 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
    });
  }

-  private loadCatalog(): void {
-    this.loading.set(true);
-    this.error.set(null);
+  private loadCatalog(silent = false): void {
+    if (!silent) {
+      this.loading.set(true);
+      this.error.set(null);
+    }
    this.catalogRequestSubscription?.unsubscribe();

    this.catalogRequestSubscription = this.catalogService
      .withCustomLoading()
      .getCatalog()
      .subscribe({
-        next: (catalog) => this.catalog.set(catalog),
+        next: (catalog) => {
+          this.catalog.set(catalog);
+          this.error.set(null);
+        },
        error: () => {
-          this.catalog.set([]);
+          if (!silent) {
+            this.catalog.set([]);
+            this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
+          }
          this.loading.set(false);
-          this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
        },
        complete: () => this.loading.set(false),
      });
--- a/src/app/shared/components/cart-icon/cart-icon.component.html
+++ b/src/app/shared/components/cart-icon/cart-icon.component.html
@@ -1,7 +1,9 @@
 <button
  type="button"
  [disabled]="disabled()"
+  [class.cart-icon--disabled]="disabled()"
  [attr.aria-label]="ariaLabel()"
+  [attr.aria-disabled]="disabled()"
  class="cart-icon"
 >
  <div class="cart-icon__container">
--- a/src/app/shared/components/cart-icon/cart-icon.component.scss
+++ b/src/app/shared/components/cart-icon/cart-icon.component.scss
@@ -14,7 +14,9 @@
  color: #666666;
  cursor: pointer;
  outline: none;
-  transition: color 0.15s ease-in-out, transform 0.1s ease-in-out;
+  transition:
+    color 0.15s ease-in-out,
+    transform 0.1s ease-in-out;
  border-radius: 4px;

  // Active state subtle scale down
@@ -29,10 +31,12 @@
  }

  // Disabled state
-  &:disabled {
-    color: #A0A0A0;
+  &:disabled,
+  &.cart-icon--disabled {
+    color: #b8b8b8;
    cursor: not-allowed;
    pointer-events: none;
+    opacity: 0.45;
  }
 }

@@ -59,6 +63,11 @@
  line-height: 1;
 }

+.cart-icon:disabled .cart-icon__glyph,
+.cart-icon--disabled .cart-icon__glyph {
+  color: #b8b8b8;
+}
+
 .cart-icon__badge {
  position: absolute;
  top: -8px;
--- a/src/app/shared/components/cart-icon/cart-icon.component.spec.ts
+++ b/src/app/shared/components/cart-icon/cart-icon.component.spec.ts
@@ -6,7 +6,7 @@ import { CartIconComponent } from './cart-icon.component';
 describe('CartIconComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [CartIconComponent]
+      imports: [CartIconComponent],
    }).compileComponents();
  });

@@ -20,7 +20,7 @@ describe('CartIconComponent', () => {

    return {
      fixture,
-      element: fixture.nativeElement as HTMLElement
+      element: fixture.nativeElement as HTMLElement,
    };
  }

@@ -47,9 +47,11 @@ describe('CartIconComponent', () => {
  });

  it('disables the button when disabled is true', () => {
-    const { element } = setup(undefined, true);
+    const { element } = setup(3, true);
    const button = element.querySelector('button');
    expect(button?.disabled).toBe(true);
+    expect(button?.classList).toContain('cart-icon--disabled');
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
  });

  it('enables the button when disabled is false', () => {
--- a/src/app/shared/components/cart-icon/cart-icon.component.ts
+++ b/src/app/shared/components/cart-icon/cart-icon.component.ts
@@ -5,7 +5,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
  imports: [],
  templateUrl: './cart-icon.component.html',
  styleUrl: './cart-icon.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CartIconComponent {
  readonly quantity = input<number | null | undefined>(undefined);
@@ -13,6 +13,10 @@ export class CartIconComponent {
  readonly ariaLabel = input<string>('Carrito de compras');

  protected readonly hasQuantity = computed(() => {
+    if (this.disabled()) {
+      return false;
+    }
+
    const q = this.quantity();
    return q !== null && q !== undefined && q > 0;
  });
--- a/src/app/shared/components/cart/cart.component.html
+++ b/src/app/shared/components/cart/cart.component.html
@@ -9,17 +9,17 @@
      @if (
        allowModify() &&
        (!readonly() || showModifyWhenReadonly()) &&
-        requireEditingMode() &&
+        (requireEditingMode() || modifyAsAction()) &&
        items().length > 0
      ) {
        <button
          class="btn btn-link p-0 border-0 cart-edit-btn"
          type="button"
-          [attr.aria-pressed]="editing()"
+          [attr.aria-pressed]="modifyAsAction() ? null : editing()"
          [disabled]="editingDisabled()"
          (click)="toggleEditing()"
        >
-          {{ editing() ? 'Listo' : 'Modificar' }}
+          {{ !modifyAsAction() && editing() ? 'Listo' : 'Modificar' }}
        </button>
      }

--- a/src/app/shared/components/cart/cart.component.spec.ts
+++ b/src/app/shared/components/cart/cart.component.spec.ts
@@ -367,6 +367,57 @@ describe('CartComponent', () => {
    expect(editingChange).toHaveBeenLastCalledWith(false);
  });

+  it('emits Modificar as an action without toggling to Listo', async () => {
+    await TestBed.configureTestingModule({
+      imports: [CartComponent],
+      providers: [
+        {
+          provide: CartService,
+          useValue: {
+            cart: signal(null).asReadonly(),
+            updateItemQuantity: vi.fn(),
+            removeItem: vi.fn(),
+          },
+        },
+        { provide: ModalService, useValue: {} },
+        {
+          provide: ToastService,
+          useValue: { success: vi.fn(), info: vi.fn(), danger: vi.fn() },
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(CartComponent);
+    fixture.componentRef.setInput('items', [
+      {
+        cartItemId: 10,
+        imageUrl: null,
+        product: 'Producto de prueba',
+        originalPrice: null,
+        discountedPrice: 1000,
+        discountPercentage: null,
+        attributes: [],
+        quantity: 1,
+      },
+    ]);
+    fixture.componentRef.setInput('readonly', true);
+    fixture.componentRef.setInput('showModifyWhenReadonly', true);
+    fixture.componentRef.setInput('modifyAsAction', true);
+    const modify = vi.fn();
+    fixture.componentInstance.modify.subscribe(modify);
+    fixture.detectChanges();
+
+    const modifyButton = fixture.debugElement.query(By.css('.cart-edit-btn'));
+    expect(modifyButton.nativeElement.textContent.trim()).toBe('Modificar');
+
+    modifyButton.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(modify).toHaveBeenCalledOnce();
+    expect(modifyButton.nativeElement.textContent.trim()).toBe('Modificar');
+    expect(fixture.componentInstance.editing()).toBe(false);
+  });
+
  it('allows editing directly when the optional Modificar toggle is disabled', async () => {
    await TestBed.configureTestingModule({
      imports: [CartComponent],
--- a/src/app/shared/components/cart/cart.component.ts
+++ b/src/app/shared/components/cart/cart.component.ts
@@ -56,6 +56,7 @@ export class CartComponent {
  readonly allowUpdateQuantity = input<boolean>(true);
  readonly allowModify = input<boolean>(true);
  readonly showModifyWhenReadonly = input<boolean>(false);
+  readonly modifyAsAction = input<boolean>(false);
  readonly requireEditingMode = input<boolean>(false);
  readonly allowUpdateVariant = input<boolean>(true);
  readonly allowDelete = input<boolean>(true);
@@ -66,6 +67,7 @@ export class CartComponent {
  readonly editing = model<boolean>(false);

  readonly closed = output<void>();
+  readonly modify = output<void>();
  readonly itemQuantityChange = output<{
    item: CartItemMock;
    index: number;
@@ -257,6 +259,11 @@ export class CartComponent {
      return;
    }

+    if (this.modifyAsAction()) {
+      this.modify.emit();
+      return;
+    }
+
    const editing = !this.editing();
    this.editing.set(editing);
  }
--- a/src/app/shared/components/product-column-with-image/product-column-with-image.component.html
+++ b/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>
--- a/src/app/shared/components/product-column-with-image/product-column-with-image.component.ts
+++ b/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();
--- a/src/app/shared/components/product-list/product-list.component.html
+++ b/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)"
        />
--- a/src/app/shared/components/product-row-card/product-row-card.component.html
+++ b/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">
--- a/src/app/shared/components/product-row-card/product-row-card.component.ts
+++ b/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()));

--- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html
+++ b/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>
      }
--- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts
+++ b/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[]>();

--- a/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.html
+++ b/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>
--- a/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.spec.ts
+++ b/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(
--- a/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.ts
+++ b/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(() => {
--- a/src/app/shared/components/tooltip/tooltip.component.html
+++ b/src/app/shared/components/tooltip/tooltip.component.html
@@ -0,0 +1,11 @@
+<button
+  type="button"
+  class="tooltip-trigger"
+  [attr.aria-describedby]="tooltipId"
+  [attr.aria-label]="message()"
+>
+  <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+  <span class="tooltip-message" [id]="tooltipId" role="tooltip">
+    {{ message() }}
+  </span>
+</button>
--- a/src/app/shared/components/tooltip/tooltip.component.scss
+++ b/src/app/shared/components/tooltip/tooltip.component.scss
@@ -0,0 +1,62 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.25rem;
+  vertical-align: middle;
+}
+
+.tooltip-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--tenant-primary, var(--color-primary, #0d6efd));
+  font-size: 1em;
+  line-height: inherit;
+
+  &:focus-visible {
+    border-radius: 50%;
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  &:hover .tooltip-message,
+  &:focus-visible .tooltip-message {
+    visibility: visible;
+    opacity: 1;
+    transform: translate(-50%, -0.25rem);
+  }
+}
+
+.tooltip-message {
+  position: absolute;
+  z-index: 1100;
+  bottom: calc(100% + 0.625rem);
+  left: 50%;
+  width: max-content;
+  max-width: min(16rem, 75vw);
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--tenant-primary, var(--color-primary, #0d6efd));
+  background: #fff;
+  color: #212529;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.35;
+  text-align: center;
+  text-transform: none;
+  letter-spacing: normal;
+  white-space: normal;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 0);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0.15s ease;
+}
--- a/src/app/shared/components/tooltip/tooltip.component.spec.ts
+++ b/src/app/shared/components/tooltip/tooltip.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, getTestBed } from '@angular/core/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+
+import { TooltipComponent } from './tooltip.component';
+
+describe('TooltipComponent', () => {
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  afterEach(() => TestBed.resetTestingModule());
+
+  it('renders the reusable danger information tooltip', async () => {
+    await TestBed.configureTestingModule({ imports: [TooltipComponent] }).compileComponents();
+    const fixture = TestBed.createComponent(TooltipComponent);
+    fixture.componentRef.setInput('message', 'Este producto no tiene stock disponible.');
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const trigger = element.querySelector('.tooltip-trigger');
+    const message = element.querySelector('.tooltip-message');
+
+    expect(trigger?.querySelector('i.fa-solid.fa-circle-info')).not.toBeNull();
+    expect(message?.textContent?.trim()).toBe('Este producto no tiene stock disponible.');
+    expect(trigger?.getAttribute('aria-describedby')).toBe(message?.id);
+  });
+});
--- a/src/app/shared/components/tooltip/tooltip.component.ts
+++ b/src/app/shared/components/tooltip/tooltip.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+let nextTooltipId = 0;
+
+@Component({
+  selector: 'app-tooltip',
+  templateUrl: './tooltip.component.html',
+  styleUrl: './tooltip.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TooltipComponent {
+  readonly message = input.required<string>();
+  protected readonly tooltipId = `app-tooltip-${nextTooltipId++}`;
+}
Author	SHA1	Message	Date
ncoronel	8089298383	feat(catalog): show product availability tooltips	2026-08-21 16:47:29 -03:00
ncoronel	d51db00247	feat(ui): add reusable information tooltip	2026-08-21 16:47:21 -03:00
ncoronel	88c3a08a23	fix(checkout): lock reviewed payments and refresh cart on exit	2026-08-21 16:16:11 -03:00
ncoronel	21e89805d0	fix(checkout): lock modifications after transfer submission	2026-08-21 15:50:18 -03:00
ncoronel	195ac73aed	fix(checkout): disable cart access	2026-08-21 15:50:12 -03:00
ncoronel	c24a8b946d	feat(catalog): refresh availability after cart changes	2026-08-21 14:19:32 -03:00
ncoronel	70060f65ec	feat(cart): notify catalog availability changes	2026-08-21 14:19:28 -03:00
ncoronel	02ff829c06	refactor(checkout): cancel purchase without reloading cart	2026-08-21 13:42:59 -03:00
ncoronel	69c836a578	refactor(cart): preserve cart when checkout starts	2026-08-21 13:42:59 -03:00
ncoronel	87cc430f05	revert(checkout): keep tenant editing policy contract	2026-08-21 11:09:00 -03:00
ncoronel	3e9e35c681	refactor(checkout): remove purchase item editing client	2026-08-21 11:05:39 -03:00
ncoronel	0bd6dc3b22	fix(checkout): restore cart on every exit	2026-08-21 11:04:09 -03:00
ncoronel	f056c32f49	feat(checkout): improve error handling for expired purchases and refactor toast service usage	2026-08-21 10:29:47 -03:00
ncoronel	11df4dbe72	Merge branch 'feature/restore-cart-on-modify' into develop	2026-08-21 10:14:37 -03:00
ncoronel	9b69a1d387	feat(checkout): add error handling for expired purchases in checkout process	2026-08-21 10:10:20 -03:00
ncoronel	b14f34d3e8	test(checkout): cover cart restoration before editing	2026-08-20 16:30:09 -03:00
ncoronel	d636b2b82b	feat(checkout): restore cart before modifying items	2026-08-20 16:28:58 -03:00