fix(checkout): redirect expired purchases from checkout

feat(checkout): enhance payment submission with error handling and polling logic
refactor(checkout): update checkout navigation logic to retain purchase state
2026-08-20 17:01:34 -03:00 · 2026-08-20 15:53:33 -03:00 · 2026-08-20 13:53:52 -03:00 · 2026-08-20 12:46:14 -03:00 · 2026-08-20 12:46:14 -03:00 · 2026-08-20 11:09:52 -03:00
32 changed files with 847 additions and 145 deletions
--- a/src/app/core/layout/store-layout/store-footer/store-footer.component.html
+++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.html
@@ -22,14 +22,18 @@

      <div class="col-12 col-md-6 col-xl-5 d-grid gap-3 align-content-start store-layout__contact">
        <div class="d-grid gap-2 store-layout__contact-details">
-          <div class="d-flex align-items-center gap-2">
-            <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
-            <span>Av. San Lorenzo 1542, Rosario</span>
-          </div>
-          <div class="d-flex align-items-center gap-2">
-            <i class="fa-solid fa-phone" aria-hidden="true"></i>
-            <span>54 9 (0341) 6658247</span>
-          </div>
+          @if (address) {
+            <div class="d-flex align-items-center gap-2">
+              <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
+              <span>{{ address }}</span>
+            </div>
+          }
+          @if (phone) {
+            <div class="d-flex align-items-center gap-2">
+              <i class="fa-solid fa-phone" aria-hidden="true"></i>
+              <span>{{ phone }}</span>
+            </div>
+          }
        </div>

        <p class="mb-0 small store-layout__muted-text store-layout__copyright">
--- a/src/app/core/layout/store-layout/store-footer/store-footer.component.ts
+++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.ts
@@ -27,5 +27,7 @@ export class StoreFooterComponent {
  @Input() logoUrl: string | null = null;
  @Input() backgroundImageUrl: string | null = null;
  @Input() storeName: string | null = null;
+  @Input() address: string | null = null;
+  @Input() phone: string | null = null;
  readonly logoutClick = output<void>();
 }
--- a/src/app/core/layout/store-layout/store-layout.component.html
+++ b/src/app/core/layout/store-layout/store-layout.component.html
@@ -67,6 +67,8 @@
    [logoUrl]="tenant()?.footer_logo ?? null"
    [backgroundImageUrl]="tenant()?.footer_bg_image ?? null"
    [storeName]="tenant()?.nombre ?? null"
+    [address]="tenant()?.address ?? null"
+    [phone]="tenant()?.phone ?? null"
    (logoutClick)="onLogoutClick()"
  />
 </div>
--- a/src/app/core/layout/store-layout/store-layout.component.scss
+++ b/src/app/core/layout/store-layout/store-layout.component.scss
@@ -21,6 +21,8 @@

 .store-layout__cart-dropdown {
  position: absolute;
+  display: flex;
+  flex-direction: column;
  top: 100px;
  right: calc((100% - 1320px) / 2 + 1.5rem);
  width: 100%;
@@ -34,6 +36,10 @@
  overflow: hidden;
  animation: store-layout-slide-down 0.2s ease-out;

+  > app-cart {
+    min-height: 0;
+  }
+
  @media (max-width: 1400px) {
    right: 1.5rem;
  }
--- a/src/app/core/layout/store-layout/store-layout.component.spec.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.spec.ts
@@ -2,9 +2,15 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { provideRouter, Router } from '@angular/router';
+import {
+  ActivatedRoute,
+  convertToParamMap,
+  ParamMap,
+  provideRouter,
+  Router,
+} from '@angular/router';

-import { of } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';

 import { Tenant } from '../../services/tenant.interface';
 import { TenantService } from '../../services/tenant.service';
@@ -22,6 +28,8 @@ const tenant: Tenant = {
  codigo: 'test',
  nombre: 'Test Tenant',
  dominio: 'localhost',
+  address: 'Calle Test 123, Rosario',
+  phone: '+54 341 555 1234',
  primary_color: '#6376F3',
  secondary_color: '#A0A0A0',
  danger_color: '#FF8888',
@@ -140,11 +148,13 @@ describe('StoreLayoutComponent', () => {
  let cartState = signal<Cart | null>(null);
  let authUserState = signal<AuthUser | null>(null);
  let checkoutServiceStub: { startCheckout: ReturnType<typeof vi.fn> };
+  let queryParamMapState: BehaviorSubject<ParamMap>;

  beforeEach(async () => {
    tenantState = signal<Tenant | null>(tenant);
    cartState = signal<Cart | null>(null);
    authUserState = signal<AuthUser | null>(null);
+    queryParamMapState = new BehaviorSubject(convertToParamMap({}));
    const isAuthenticatedState = signal(false);
    checkoutServiceStub = {
      startCheckout: vi.fn().mockResolvedValue({ id: 55 }),
@@ -154,6 +164,10 @@ describe('StoreLayoutComponent', () => {
      imports: [StoreLayoutComponent],
      providers: [
        provideRouter([]),
+        {
+          provide: ActivatedRoute,
+          useValue: { queryParamMap: queryParamMapState.asObservable() },
+        },
        {
          provide: TenantService,
          useValue: {
@@ -213,6 +227,19 @@ describe('StoreLayoutComponent', () => {
    expect(compiled.querySelector('app-store-footer .store-layout__footer')).not.toBeNull();
  });

+  it('opens the cart when requested through the openCart query parameter', () => {
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    expect((fixture.componentInstance as any).isCartOpen()).toBe(false);
+
+    queryParamMapState.next(convertToParamMap({ openCart: 'true' }));
+    fixture.detectChanges();
+
+    expect((fixture.componentInstance as any).isCartOpen()).toBe(true);
+    expect((fixture.nativeElement as HTMLElement).querySelector('app-cart')).not.toBeNull();
+  });
+
  it('hides the configured header elements when the tenant disables them', () => {
    tenantState.set({
      ...tenant,
@@ -274,6 +301,12 @@ describe('StoreLayoutComponent', () => {
    expect(compiled.querySelector('.fa-whatsapp')).not.toBeNull();
    expect(compiled.querySelector('.fa-facebook')).not.toBeNull();
    expect(compiled.querySelector('.fa-linkedin-in')).not.toBeNull();
+    expect(compiled.querySelector('.store-layout__contact-details')?.textContent).toContain(
+      tenant.address,
+    );
+    expect(compiled.querySelector('.store-layout__contact-details')?.textContent).toContain(
+      tenant.phone,
+    );
  });

  it('navigates to search results when the search button is clicked', () => {
--- a/src/app/core/layout/store-layout/store-layout.component.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.ts
@@ -1,5 +1,6 @@
-import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import { Router, RouterOutlet } from '@angular/router';
+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 { TenantService } from '../../services/tenant.service';
 import { CartService } from '../../services/cart/cart.service';
 import { StoreFooterComponent, StoreFooterSection } from './store-footer/store-footer.component';
@@ -32,6 +33,8 @@ export class StoreLayoutComponent implements OnInit {
  private readonly checkoutService = inject(CheckoutService);
  private readonly toastService = inject(ToastService);
  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+  private readonly destroyRef = inject(DestroyRef);

  protected readonly isCartOpen = signal(false);
  protected readonly isCreatingPurchase = signal(false);
@@ -146,6 +149,12 @@ export class StoreLayoutComponent implements OnInit {
  });

  ngOnInit(): void {
+    this.route.queryParamMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
+      if (params.get('openCart') === 'true') {
+        this.isCartOpen.set(true);
+      }
+    });
+
    this.cartService.loadCart().subscribe({
      error: (err) => console.error('Error loading cart', err),
    });
@@ -178,8 +187,8 @@ export class StoreLayoutComponent implements OnInit {
  protected async onLogoutClick(): Promise<void> {
    const isLeavingCheckout = this.router.url.startsWith('/checkout');

-    // Checkout must be left while the authenticated session is still valid so
-    // its CanDeactivate guard can cancel the pending purchase.
+    // Leave checkout before closing the authenticated session so its component
+    // can stop payment polling cleanly. The checkout itself remains pending.
    if (isLeavingCheckout) {
      const navigationSucceeded = await this.router.navigate(['/']);

--- a/src/app/core/services/catalog/catalog.interface.ts
+++ b/src/app/core/services/catalog/catalog.interface.ts
@@ -66,7 +66,7 @@ export interface CatalogItemVariant {
  event_date_id?: number | null;
  event_date_ids?: number[];
  event_dates?: string[];
-  stock_tecnico: number | null;
+  maximum_addable_quantity?: number | null;
  minimum_use_date?: string | null;
  maximum_use_date?: string | null;
  effective_minimum_use_date?: string | null;
@@ -98,7 +98,7 @@ export interface CatalogItemDetail {
  attributes: ProductAttribute[];
  variants: CatalogItemVariant[];
  selected_variant?: SelectedCatalogItemVariant;
-  stock_tecnico?: number | null;
+  maximum_addable_quantity?: number | null;
  images?: string[];
 }

@@ -113,7 +113,7 @@ export interface CatalogFeaturedItemVariant {
  id: number;
  descripcion?: string | null;
  precio?: string;
-  stock_tecnico: number | null;
+  maximum_addable_quantity?: number | null;
  values: Record<string, CatalogVariantValue>;
 }

@@ -145,7 +145,7 @@ export interface CatalogFeaturedItem {
  descripcion?: string | null;
  precio: number | string;
  image?: string | null;
-  stock_tecnico?: number | null;
+  maximum_addable_quantity?: number | null;
  variants?: CatalogFeaturedItemVariant[];
 }

@@ -155,6 +155,7 @@ export type CatalogFeaturedItems =

 export interface CatalogFeaturedGroup {
  id: number;
+  code: string;
  title: string;
  layout: CatalogProductLayout;
  group_layout: CatalogGroupLayout;
--- a/src/app/core/services/checkout.service.ts
+++ b/src/app/core/services/checkout.service.ts
@@ -3,6 +3,7 @@ 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;
@@ -73,6 +74,7 @@ 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;
@@ -95,7 +97,7 @@ export interface PurchaseDetailResponse extends PurchaseStatusResponse {
  telefono: string | null;
  nombre_apellido: string | null;
  email: string | null;
-  items_source: 'purchase';
+  items_source: 'purchase' | 'cart';
  items: PurchaseDetailItemResponse[];
  tickets_count?: number;
  has_generated_tickets?: boolean;
@@ -174,7 +176,20 @@ export class CheckoutService extends BaseApiService {
    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}`,
@@ -190,6 +205,51 @@ export class CheckoutService extends BaseApiService {
    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,
--- a/src/app/core/services/tenant.interface.ts
+++ b/src/app/core/services/tenant.interface.ts
@@ -113,6 +113,8 @@ export interface Tenant {
  dominio: string;
  base_path?: string;
  site_title?: string | null;
+  address?: string | null;
+  phone?: string | null;
  favicon?: string | null;
  primary_color: string;
  secondary_color: string;
@@ -138,6 +140,7 @@ export interface Tenant {
  display_seach_bar?: boolean;
  display_cart?: boolean;
  cart_editing_policy?: CartEditingPolicy;
+  checkout_editing_policy?: CartEditingPolicy;
  display_cart_item_images?: boolean;
  social_media?: SocialMedia[];
  menues?: Menu[];
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
@@ -232,7 +232,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1001,
        precio: 250000,
-        stock_tecnico: 1,
+        maximum_addable_quantity: 1,
        values: {
          tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
          sector: ticketOption('a', 'Sector A'),
@@ -243,7 +243,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1002,
        precio: 250000,
-        stock_tecnico: 1,
+        maximum_addable_quantity: 1,
        values: {
          tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
          sector: ticketOption('a', 'Sector A'),
@@ -254,7 +254,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1003,
        precio: 250000,
-        stock_tecnico: 1,
+        maximum_addable_quantity: 1,
        values: {
          tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
          sector: ticketOption('c', 'Sector C'),
@@ -265,7 +265,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1004,
        precio: 200000,
-        stock_tecnico: 1,
+        maximum_addable_quantity: 1,
        values: {
          tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
          sector: ticketOption('a', 'Sector A'),
@@ -276,7 +276,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1005,
        precio: 200000,
-        stock_tecnico: 0,
+        maximum_addable_quantity: 0,
        values: {
          tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
          sector: ticketOption('a', 'Sector A'),
@@ -287,7 +287,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1006,
        precio: 100000,
-        stock_tecnico: 1,
+        maximum_addable_quantity: 1,
        values: {
          tipo: ticketOption('general', 'General'),
          sector: ticketOption('b', 'Sector B'),
@@ -298,7 +298,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1007,
        precio: 100000,
-        stock_tecnico: 1,
+        maximum_addable_quantity: 1,
        values: {
          tipo: ticketOption('general', 'General'),
          sector: ticketOption('b', 'Sector B'),
@@ -309,7 +309,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1008,
        precio: 90000,
-        stock_tecnico: 1,
+        maximum_addable_quantity: 1,
        values: {
          tipo: ticketOption('general', 'General'),
          sector: ticketOption('d', 'Sector D'),
@@ -320,7 +320,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1009,
        precio: 65000,
-        stock_tecnico: 1,
+        maximum_addable_quantity: 1,
        values: {
          tipo: ticketOption('general', 'General'),
          sector: ticketOption('d', 'Sector D'),
@@ -331,7 +331,7 @@ export class ReutilizablesTestPageComponent {
      {
        id: 1010,
        precio: 40000,
-        stock_tecnico: 1,
+        maximum_addable_quantity: 1,
        values: {
          tipo: ticketOption('general', 'General'),
          sector: ticketOption('d', 'Sector D'),
--- a/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.spec.ts
+++ b/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.spec.ts
@@ -31,7 +31,7 @@ describe('ProductAttributeSelectorComponent', () => {
    fixture.componentRef.setInput('variants', [
      {
        id: 1,
-        stock_tecnico: null,
+        maximum_addable_quantity: null,
        values: { size: 'S' },
      },
    ]);
@@ -51,12 +51,12 @@ describe('ProductAttributeSelectorComponent', () => {
    fixture.componentRef.setInput('variants', [
      {
        id: 1,
-        stock_tecnico: 0,
+        maximum_addable_quantity: 0,
        values: { size: 'S' },
      },
      {
        id: 2,
-        stock_tecnico: 2,
+        maximum_addable_quantity: 2,
        values: { size: 'M' },
      },
    ]);
@@ -92,9 +92,9 @@ describe('ProductAttributeSelectorComponent', () => {
    ]);
    fixture.componentRef.setInput('inventoryPolicy', 'unlimited');
    fixture.componentRef.setInput('variants', [
-      { id: 1, stock_tecnico: null, values: { event_date: '1' } },
-      { id: 2, stock_tecnico: null, values: { event_date: '2' } },
-      { id: 3, stock_tecnico: null, values: { event_date: ['1', '2'] } },
+      { id: 1, maximum_addable_quantity: null, values: { event_date: '1' } },
+      { id: 2, maximum_addable_quantity: null, values: { event_date: '2' } },
+      { id: 3, maximum_addable_quantity: null, values: { event_date: ['1', '2'] } },
    ]);
    fixture.detectChanges();

@@ -135,8 +135,8 @@ describe('ProductAttributeSelectorComponent', () => {
    ]);
    fixture.componentRef.setInput('inventoryPolicy', 'unlimited');
    fixture.componentRef.setInput('variants', [
-      { id: 1, stock_tecnico: null, values: { size: 'S', internal_type: 'adult' } },
-      { id: 2, stock_tecnico: null, values: { size: 'M', internal_type: 'child' } },
+      { id: 1, maximum_addable_quantity: null, values: { size: 'S', internal_type: 'adult' } },
+      { id: 2, maximum_addable_quantity: null, values: { size: 'M', internal_type: 'child' } },
    ]);
    fixture.detectChanges();

--- a/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.ts
+++ b/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.ts
@@ -227,7 +227,7 @@ export class ProductAttributeSelectorComponent {
  }

  private isVariantAvailable(variant: CatalogItemVariant): boolean {
-    return this.inventoryPolicy() === 'unlimited' || (variant.stock_tecnico ?? 0) > 0;
+    return variant.maximum_addable_quantity !== 0;
  }

  private findFirstHexValue(value: unknown): string | null {
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.html
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.html
@@ -59,18 +59,22 @@
        [discount]="cartDiscount()"
        [total]="cartTotal()"
        [readonly]="!canModifyCart()"
-        [allowModify]="canModifyCart()"
+        [allowModify]="true"
+        [showModifyWhenReadonly]="true"
        [allowUpdateQuantity]="canUpdateCartQuantity()"
-        [requireEditingMode]="
-          createdPurchase()?.status === 'created' || createdPurchase()?.status === 'pending_payment'
-        "
-        [allowDelete]="false"
+        [allowUpdateVariant]="canUpdateCartVariant()"
+        [requireEditingMode]="true"
+        [allowDelete]="canDeleteCartItems()"
        [persistQuantityChanges]="false"
+        [persistVariantChanges]="false"
+        [persistDeleteChanges]="false"
        [editing]="isEditingItems()"
        [editingDisabled]="isUpdatingItem() || isPreparingItemEdit()"
        backgroundColor="transparent"
        (editingChange)="onEditingItemsChange($event)"
        (itemQuantityChange)="onPurchaseItemQuantityChange($event)"
+        (itemVariantChange)="onPurchaseItemVariantChange($event)"
+        (itemRemove)="onPurchaseItemRemove($event)"
      />
    </div>
  </div>
--- 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
@@ -1,3 +1,4 @@
+import { HttpErrorResponse } from '@angular/common/http';
 import { signal } from '@angular/core';
 import { getTestBed, TestBed } from '@angular/core/testing';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
@@ -10,6 +11,7 @@ import { CartService } from '../../../../core/services/cart/cart.service';
 import { CheckoutService } from '../../../../core/services/checkout.service';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
 import { TenantService } from '../../../../core/services/tenant.service';
+import { ToastService } from '../../../../core/services/toast.service';
 import { CartEditingPolicy } from '../../../../core/services/tenant.interface';
 import { CheckoutPageComponent } from './checkout-page.component';

@@ -18,9 +20,12 @@ describe('CheckoutPageComponent payment validation', () => {
    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>;
  };
@@ -31,12 +36,13 @@ describe('CheckoutPageComponent payment validation', () => {
    clearCart: ReturnType<typeof vi.fn>;
  };
  let routerStub: { navigate: ReturnType<typeof vi.fn> };
+  let toastServiceStub: { danger: ReturnType<typeof vi.fn> };
  let routeQueryParamMap: ReturnType<typeof convertToParamMap>;
  let authUserState: ReturnType<typeof signal>;
  let tenantState: ReturnType<
    typeof signal<{
      codigo: string;
-      cart_editing_policy?: CartEditingPolicy;
+      checkout_editing_policy?: CartEditingPolicy;
    }>
  >;

@@ -60,11 +66,14 @@ describe('CheckoutPageComponent payment validation', () => {
      }),
      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' }),
      getPurchase: vi.fn().mockResolvedValue({ status: 'pending_payment' }),
      withCustomLoading: vi.fn(),
    };
@@ -91,11 +100,12 @@ describe('CheckoutPageComponent payment validation', () => {
      });
    });
    routerStub = { navigate: vi.fn() };
+    toastServiceStub = { danger: vi.fn() };
    routeQueryParamMap = convertToParamMap({});
    authUserState = signal(null);
    tenantState = signal({
      codigo: 'tenant-test',
-      cart_editing_policy: {
+      checkout_editing_policy: {
        code: 'full',
        allow_modify: true,
        allow_delete: true,
@@ -112,6 +122,7 @@ describe('CheckoutPageComponent payment validation', () => {
        { provide: CartService, useValue: cartServiceStub },
        { provide: TenantService, useValue: { tenant: tenantState } },
        { provide: AuthService, useValue: { user: authUserState } },
+        { provide: ToastService, useValue: toastServiceStub },
        {
          provide: ActivatedRoute,
          useValue: {
@@ -209,19 +220,28 @@ describe('CheckoutPageComponent payment validation', () => {
    expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
  });

-  it('checks the purchase detail once when the transfer was made', async () => {
+  it('polls a transfer every three seconds up to four attempts', async () => {
    checkoutServiceStub.getPurchase.mockResolvedValue({ status: 'pending_payment' });
    const { component } = createComponent();
    component.selectedPaymentMethod.set('transfer');

    await component.onComplete();
-    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledWith('tenant-test', 25);
+    expect(component.transferValidationStatus()).toBe('checking');
+    expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledWith('tenant-test', 25);
+    expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
+
+    for (let attempt = 1; attempt <= 3; attempt += 1) {
+      await vi.advanceTimersByTimeAsync(3_000);
+      expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(attempt);
+      expect(component.transferValidationStatus()).toBe('checking');
+    }
+
+    await vi.advanceTimersByTimeAsync(3_000);
+    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();
-
-    await vi.advanceTimersByTimeAsync(30_000);
-    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
  });

  it('navigates after a transfer is confirmed as paid', async () => {
@@ -230,25 +250,59 @@ describe('CheckoutPageComponent payment validation', () => {
    component.selectedPaymentMethod.set('transfer');

    await component.onComplete();
+    await vi.advanceTimersByTimeAsync(3_000);

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

-  it('shows a retryable state when transfer validation fails', async () => {
+  it('keeps polling after transfer validation requests fail', async () => {
    vi.spyOn(console, 'error').mockImplementation(() => undefined);
    checkoutServiceStub.getPurchase.mockRejectedValue(new Error('network error'));
    const { component } = createComponent();
    component.selectedPaymentMethod.set('transfer');

    await component.onComplete();
+    await vi.advanceTimersByTimeAsync(12_000);

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

+  it('does not poll when submitting a transfer for review fails', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    checkoutServiceStub.submitPurchaseForReview.mockRejectedValue(new Error('network error'));
+    const { component } = createComponent();
+    component.selectedPaymentMethod.set('transfer');
+
+    await component.onComplete();
+    await vi.advanceTimersByTimeAsync(12_000);
+
+    expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledWith('tenant-test', 25);
+    expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
+    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();
+    await vi.advanceTimersByTimeAsync(12_000);
+    expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
+  });
+
  it('loads purchase items but prefills customer data from the user', async () => {
    const purchase = {
      id: 25,
@@ -448,7 +502,14 @@ describe('CheckoutPageComponent payment validation', () => {
      quantity: 3,
    });

-    expect(checkoutServiceStub.updateItemQuantity).toHaveBeenCalledWith('tenant-test', 25, 91, 3);
+    expect(checkoutServiceStub.updateItemQuantity).toHaveBeenCalledWith(
+      'tenant-test',
+      25,
+      91,
+      3,
+      null,
+      'purchase',
+    );
    expect(component.createdPurchase()).toBe(updatedPurchase);
    expect(component.isUpdatingItem()).toBe(false);
  });
@@ -481,10 +542,10 @@ describe('CheckoutPageComponent payment validation', () => {
    expect(component.isEditingItems()).toBe(false);
  });

-  it('does not allow item editing when the tenant disables cart editing', async () => {
+  it('shows Modificar and returns to the home cart when checkout editing is disabled', async () => {
    tenantState.set({
      codigo: 'tenant-test',
-      cart_editing_policy: {
+      checkout_editing_policy: {
        code: 'disabled',
        allow_modify: false,
        allow_delete: false,
@@ -492,7 +553,37 @@ describe('CheckoutPageComponent payment validation', () => {
        allow_update_variant: false,
      },
    });
-    const { component } = createComponent();
+    const { fixture, component } = createComponent();
+    component.createdPurchase.set({
+      id: 25,
+      status: 'created',
+      items: [
+        {
+          id: 91,
+          quantity: 2,
+          unit_price: '100.00',
+          line_total: '200.00',
+          source_catalog_item_id: 8,
+          source_variant_id: null,
+          item_details: {
+            nombre: 'Remera',
+            descripcion: null,
+            slug: 'remera',
+            imagen: null,
+            attributes: [],
+          },
+        },
+      ],
+      subtotal: '200.00',
+      total: '200.00',
+    });
+    fixture.detectChanges();
+
+    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);

@@ -500,6 +591,9 @@ describe('CheckoutPageComponent payment validation', () => {
    expect(component.canModifyCart()).toBe(false);
    expect(component.isEditingItems()).toBe(false);
    expect(checkoutServiceStub.prepareItemEditing).not.toHaveBeenCalled();
+    expect(routerStub.navigate).toHaveBeenCalledWith(['/'], {
+      queryParams: { openCart: true },
+    });
  });

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

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

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

-    expect(checkoutServiceStub.cancelPurchase).toHaveBeenCalledWith('tenant-test', 25);
+    expect(checkoutServiceStub.cancelPurchase).not.toHaveBeenCalled();
    expect(cartServiceStub.loadCart).toHaveBeenCalled();
    expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
-    expect(component.createdPurchaseId()).toBeNull();
+    expect(component.createdPurchaseId()).toBe(25);
+  });
+
+  it('shows the API message and redirects home when a checkout operation finds an expired purchase', async () => {
+    checkoutServiceStub.generatePaymentIntent.mockRejectedValue(
+      new HttpErrorResponse({
+        status: 422,
+        error: {
+          code: 'purchase.expired',
+          message: 'La compra venci\u00f3. Inici\u00e1 una nueva compra.',
+        },
+      }),
+    );
+    const { component } = createComponent();
+
+    await component.selectPaymentMethod('qr');
+
+    expect(toastServiceStub.danger).toHaveBeenCalledWith(
+      'La compra venci\u00f3. Inici\u00e1 una nueva compra.',
+    );
+    expect(routerStub.navigate).toHaveBeenCalledWith(['/']);
+    expect(component.isGeneratingIntent()).toBe(false);
+  });
+
+  it('treats a generic customer-data error as expired when the local deadline passed', () => {
+    const { component } = createComponent();
+    component.createdPurchase.set({
+      id: 25,
+      status: 'created',
+      expires_at: new Date(Date.now() - 1_000).toISOString(),
+      items: [],
+      subtotal: '100.00',
+      total: '100.00',
+    });
+
+    const handled = component.handleCheckoutError(
+      new HttpErrorResponse({
+        status: 422,
+        error: {
+          errors: {
+            purchase: ['La compra ya no se puede modificar.'],
+          },
+        },
+      }),
+      'No se pudieron actualizar los datos de la compra.',
+    );
+
+    expect(handled).toBe(true);
+    expect(toastServiceStub.danger).toHaveBeenCalledWith(
+      'La compra venci\u00f3. Inici\u00e1 una nueva compra.',
+    );
+    expect(routerStub.navigate).toHaveBeenCalledWith(['/']);
  });
 });
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts
@@ -8,6 +8,7 @@ import {
  signal,
  ViewChild,
 } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
 import { FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { firstValueFrom, startWith } from 'rxjs';
@@ -20,6 +21,7 @@ import {
 } from '../../../../core/services/checkout.service';
 import { AuthService } from '../../../../core/services/auth/auth.service';
 import { CartService } from '../../../../core/services/cart/cart.service';
+import { ToastService } from '../../../../core/services/toast.service';
 import { BankAccount } from '../../../../core/services/tenant.interface';
 import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
@@ -36,6 +38,12 @@ import {
  TransferValidationStatus,
 } from './checkout-page.models';

+interface ApiErrorResponse {
+  code?: string;
+  message?: string;
+  errors?: Record<string, string[]>;
+}
+
@Component({
  selector: 'app-checkout-page',
  standalone: true,
@@ -59,11 +67,17 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
  private readonly authService = inject(AuthService);
  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;

  private qrPollingTimeoutId: ReturnType<typeof setTimeout> | null = null;
  private qrPollingAttempts = 0;
  private qrPollingRunId = 0;
+  private transferPollingTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  private transferPollingAttempts = 0;
+  private transferPollingRunId = 0;
  private paymentMethodRequestId = 0;
  private navigationStarted = false;

@@ -80,10 +94,16 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
  protected readonly isLoadingPurchase = signal(true);
  protected readonly checkoutStepIndex = signal(0);
  protected readonly canUpdateCartQuantity = computed(
-    () => this.tenantService.tenant()?.cart_editing_policy?.allow_update_quantity ?? false,
+    () => 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()?.cart_editing_policy?.allow_modify ?? false,
+    () => this.tenantService.tenant()?.checkout_editing_policy?.allow_modify ?? false,
  );

  protected readonly cartSubtotal = computed(() => {
@@ -161,6 +181,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {

  ngOnDestroy(): void {
    this.stopQrPolling();
+    this.stopTransferPolling();
  }

  private mapPurchaseItemToMock(item: PurchaseDetailItemResponse): CartItemMock {
@@ -176,6 +197,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
        value: attribute.value === null ? '' : String(attribute.value),
      })),
      quantity: item.quantity,
+      variantId: item.source_variant_id,
+      variants: item.variants,
    };
  }

@@ -185,6 +208,28 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
    }

    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;
    }

@@ -200,6 +245,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {

    this.isEditingItems.set(true);
    this.stopQrPolling();
+    this.stopTransferPolling();
    this.qrData.set(null);
    this.qrPaymentStatus.set('idle');
    this.transferAccount.set(null);
@@ -218,7 +264,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      const purchase = await this.checkoutService.prepareItemEditing(tenant.codigo, purchaseId);
      this.createdPurchase.set(purchase);
    } catch (error) {
-      console.error('Failed to prepare purchase item editing:', error);
+      this.handleCheckoutError(error, 'No se pudo preparar la compra para editarla.');
      this.isEditingItems.set(false);
    } finally {
      this.isPreparingItemEdit.set(false);
@@ -251,10 +297,85 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
        purchaseId,
        itemId,
        event.quantity,
+        this.createdPurchase()?.cart_id ?? null,
+        this.createdPurchase()?.items_source ?? 'purchase',
      );
      this.createdPurchase.set(purchase);
    } catch (error) {
-      console.error('Failed to update purchase item quantity:', 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);
    }
@@ -284,8 +405,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      // Auto trigger intent for default option
      void this.selectPaymentMethod(this.selectedPaymentMethod());
    } catch (error) {
-      console.error('Failed to create purchase:', error);
-      // Here we could show an alert or toast
+      this.handleCheckoutError(error, 'No se pudieron actualizar los datos de la compra.');
    } finally {
      this.isUpdatingPurchase.set(false);
    }
@@ -299,34 +419,21 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {

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

    if (this.navigationStarted) {
      return true;
    }

-    const purchaseId = this.createdPurchaseId();
-    const tenant = this.tenantService.tenant();
-
-    if (!purchaseId || !tenant) {
-      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.
    try {
-      await this.checkoutService.cancelPurchase(tenant.codigo, purchaseId);
-      this.createdPurchaseId.set(null);
-      this.createdPurchase.set(null);
-
-      try {
-        await firstValueFrom(this.cartService.loadCart());
-      } catch (error) {
-        console.error('Failed to restore cart after cancelling checkout:', error);
-      }
-
-      return true;
+      await firstValueFrom(this.cartService.loadCart());
    } catch (error) {
-      console.error('Failed to cancel purchase:', error);
-      return false;
+      console.error('Failed to load the active cart after leaving checkout:', error);
    }
+
+    return true;
  }

  protected async selectPaymentMethod(method: PaymentMethod): Promise<void> {
@@ -335,6 +442,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
    }

    this.stopQrPolling();
+    this.stopTransferPolling();
    this.qrPaymentStatus.set('idle');
    this.transferValidationStatus.set('idle');
    this.selectedPaymentMethod.set(method);
@@ -373,7 +481,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
        this.startQrPolling();
      }
    } catch (error) {
-      console.error('Failed to generate payment intent:', error);
+      this.handleCheckoutError(error, 'No se pudo generar la intenci\u00f3n de pago.');
    } finally {
      this.isGeneratingIntent.set(false);
    }
@@ -392,6 +500,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
    }

    this.transferDni.set(dni);
+    this.stopTransferPolling();
    this.transferValidationStatus.set('idle');
    this.isGeneratingIntent.set(true);
    try {
@@ -409,7 +518,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
        });
      }
    } catch (error) {
-      console.error('Failed to generate transfer payment intent:', error);
+      this.handleCheckoutError(error, 'No se pudo generar la intenci\u00f3n de transferencia.');
    } finally {
      this.isGeneratingIntent.set(false);
    }
@@ -446,22 +555,97 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      return;
    }

+    this.stopTransferPolling();
    this.transferValidationStatus.set('checking');
+    this.transferPollingAttempts = 0;
+
+    const runId = this.transferPollingRunId;

    try {
      const purchase = await this.checkoutService
        .withCustomLoading()
-        .getPurchase(tenant.codigo, purchaseId);
+        .submitPurchaseForReview(tenant.codigo, purchaseId);
+
+      if (runId !== this.transferPollingRunId) {
+        return;
+      }

      if (purchase.status === 'paid') {
        this.navigateToPurchaseStatus(purchaseId);
        return;
      }

-      this.transferValidationStatus.set('error');
+      this.scheduleTransferPoll(runId);
+    } catch (error) {
+      const expired = this.handleCheckoutError(
+        error,
+        'No se pudo enviar la compra a revisi\u00f3n.',
+      );
+
+      if (!expired && runId === this.transferPollingRunId) {
+        this.transferValidationStatus.set('error');
+      }
+    }
+  }
+
+  private scheduleTransferPoll(runId: number): void {
+    this.transferPollingTimeoutId = setTimeout(() => {
+      this.transferPollingTimeoutId = null;
+      void this.checkTransferPayment(runId);
+    }, this.transferPollingIntervalMs);
+  }
+
+  private async checkTransferPayment(runId: number): Promise<void> {
+    if (runId !== this.transferPollingRunId) {
+      return;
+    }
+
+    const purchaseId = this.createdPurchaseId();
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant || this.selectedPaymentMethod() !== 'transfer') {
+      this.stopTransferPolling();
+      return;
+    }
+
+    this.transferPollingAttempts += 1;
+
+    try {
+      const purchase = await this.checkoutService
+        .withCustomLoading()
+        .getPurchase(tenant.codigo, purchaseId);
+
+      if (runId !== this.transferPollingRunId) {
+        return;
+      }
+
+      if (purchase.status === 'paid') {
+        this.navigateToPurchaseStatus(purchaseId);
+        return;
+      }
    } catch (error) {
      console.error('Failed to validate transfer payment:', error);
+    }
+
+    if (runId !== this.transferPollingRunId) {
+      return;
+    }
+
+    if (this.transferPollingAttempts >= this.transferPollingMaxAttempts) {
+      this.stopTransferPolling();
      this.transferValidationStatus.set('error');
+      return;
+    }
+
+    this.scheduleTransferPoll(runId);
+  }
+
+  private stopTransferPolling(): void {
+    this.transferPollingRunId += 1;
+
+    if (this.transferPollingTimeoutId !== null) {
+      clearTimeout(this.transferPollingTimeoutId);
+      this.transferPollingTimeoutId = null;
    }
  }

@@ -575,6 +759,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {

    this.navigationStarted = true;
    this.stopQrPolling();
+    this.stopTransferPolling();

    void this.router.navigate(['/checkout/status', purchaseId]);
  }
@@ -629,4 +814,54 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
      void this.router.navigate(['/']);
    }
  }
+
+  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.',
+      );
+      void this.router.navigate(['/']);
+
+      return true;
+    }
+
+    const validationMessage = response?.errors
+      ? Object.values(response.errors).flat().find(Boolean)
+      : undefined;
+
+    this.toastService.danger(validationMessage ?? response?.message ?? fallbackMessage);
+
+    return false;
+  }
+
+  private hasExpiredPurchase(): boolean {
+    const purchase = this.createdPurchase();
+
+    if (!purchase) {
+      return false;
+    }
+
+    if (purchase.status === 'expired') {
+      return true;
+    }
+
+    if (!purchase.expires_at) {
+      return false;
+    }
+
+    return Date.parse(purchase.expires_at) <= Date.now();
+  }
 }
--- 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
@@ -1,5 +1,6 @@
 import { TestBed, getTestBed } from '@angular/core/testing';
 import { signal } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 import { By } from '@angular/platform-browser';
@@ -36,7 +37,7 @@ describe('ProductDetailPageComponent', () => {
    has_tickets: false,
    minimum_use_date: null,
    maximum_use_date: null,
-    stock_tecnico: 10,
+    maximum_addable_quantity: 10,
    attributes: [],
    variants: [],
  };
@@ -190,10 +191,10 @@ describe('ProductDetailPageComponent', () => {
    const detailProduct: CatalogItemDetail = {
      ...mockProduct,
      images: ['https://example.com/product.png'],
-      variants: [{ id: 123, stock_tecnico: 10, values: {} }],
+      variants: [{ id: 123, maximum_addable_quantity: 10, values: {} }],
      selected_variant: {
        id: 123,
-        stock_tecnico: 10,
+        maximum_addable_quantity: 10,
        images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
        values: {},
      },
@@ -294,10 +295,12 @@ describe('ProductDetailPageComponent', () => {
          ],
        },
      ],
-      variants: [{ id: 123, stock_tecnico: 10, values: { color: 'beige', material: 'Cuero' } }],
+      variants: [
+        { id: 123, maximum_addable_quantity: 10, values: { color: 'beige', material: 'Cuero' } },
+      ],
      selected_variant: {
        id: 123,
-        stock_tecnico: 10,
+        maximum_addable_quantity: 10,
        images: ['https://example.com/variant1.png'],
        values: {
          color: 'beige',
@@ -334,8 +337,8 @@ describe('ProductDetailPageComponent', () => {
      purpose: 'entry',
      has_tickets: true,
      variants: [
-        { id: 101, event_date_id: 20, stock_tecnico: 10, values: { event_date: '20' } },
-        { id: 102, event_date_id: 21, stock_tecnico: 10, values: { event_date: '21' } },
+        { id: 101, event_date_id: 20, maximum_addable_quantity: 10, values: { event_date: '20' } },
+        { id: 102, event_date_id: 21, maximum_addable_quantity: 10, values: { event_date: '21' } },
      ],
      attributes: [
        {
@@ -366,7 +369,7 @@ describe('ProductDetailPageComponent', () => {
      selected_variant: {
        id: 101,
        event_date_id: 20,
-        stock_tecnico: 10,
+        maximum_addable_quantity: 10,
        images: [],
        values: {},
      },
@@ -410,7 +413,7 @@ describe('ProductDetailPageComponent', () => {

    fixture.componentInstance['selectedVariant'].set({
      id: 1,
-      stock_tecnico: 10,
+      maximum_addable_quantity: 10,
      values: {},
    });
    fixture.detectChanges();
@@ -493,19 +496,45 @@ describe('ProductDetailPageComponent', () => {
    });
  });

+  it('shows the backend purchase-limit message for a direct checkout', async () => {
+    checkoutServiceStub.startCheckout.mockRejectedValue(
+      new HttpErrorResponse({
+        status: 422,
+        error: {
+          code: 'purchase.limit_exceeded',
+          message: 'Podés agregar hasta 2 unidades más de “Auriculares Bluetooth”.',
+          maximum_addable_quantity: 2,
+        },
+      }),
+    );
+    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;
+
+    buyButton.click();
+    await Promise.resolve();
+
+    expect(toastServiceStub.danger).toHaveBeenCalledWith(
+      'Podés agregar hasta 2 unidades más de “Auriculares Bluetooth”.',
+    );
+  });
+
  it('calls CartService.addItem when variant is selected and Add to Cart is clicked', async () => {
    const detailProduct: CatalogItemDetail = {
      ...mockProduct,
      variants: [
        {
          id: 123,
-          stock_tecnico: 5,
+          maximum_addable_quantity: 5,
          values: {},
        },
      ],
      selected_variant: {
        id: 123,
-        stock_tecnico: 5,
+        maximum_addable_quantity: 5,
        images: [],
        values: {},
      },
@@ -538,7 +567,7 @@ describe('ProductDetailPageComponent', () => {
    resolveProduct({
      ...mockProduct,
      variants: [],
-      stock_tecnico: 4,
+      maximum_addable_quantity: 4,
    });

    await configureTestingModule();
@@ -564,13 +593,13 @@ describe('ProductDetailPageComponent', () => {
      variants: [
        {
          id: 123,
-          stock_tecnico: 5,
+          maximum_addable_quantity: 5,
          values: {},
        },
      ],
      selected_variant: {
        id: 123,
-        stock_tecnico: 5,
+        maximum_addable_quantity: 5,
        images: [],
        values: {},
      },
@@ -602,7 +631,7 @@ describe('ProductDetailPageComponent', () => {
  it('allows unlimited variants to increase quantity without a maximum', async () => {
    const unlimitedVariant = {
      id: 321,
-      stock_tecnico: null,
+      maximum_addable_quantity: null,
      values: {},
    };
    resolveProduct({
@@ -610,7 +639,7 @@ describe('ProductDetailPageComponent', () => {
      inventory_policy: 'unlimited',
      selected_variant: {
        id: 321,
-        stock_tecnico: null,
+        maximum_addable_quantity: null,
        images: [],
        values: {},
      },
@@ -634,7 +663,7 @@ describe('ProductDetailPageComponent', () => {
  it('caps an unlimited variant at the per-user purchase limit', async () => {
    const unlimitedVariant = {
      id: 322,
-      stock_tecnico: null,
+      maximum_addable_quantity: 2,
      values: {},
    };
    resolveProduct({
@@ -643,7 +672,7 @@ describe('ProductDetailPageComponent', () => {
      max_units_per_user: 2,
      selected_variant: {
        id: 322,
-        stock_tecnico: null,
+        maximum_addable_quantity: 2,
        images: [],
        values: { event_date: '20' },
      },
@@ -667,14 +696,14 @@ describe('ProductDetailPageComponent', () => {
  it('disables purchase actions for tracked variants without stock', async () => {
    const trackedVariant = {
      id: 654,
-      stock_tecnico: 0,
+      maximum_addable_quantity: 0,
      values: {},
    };
    resolveProduct({
      ...mockProduct,
      selected_variant: {
        id: 654,
-        stock_tecnico: 0,
+        maximum_addable_quantity: 0,
        images: [],
        values: {},
      },
--- 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
@@ -98,27 +98,23 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
    const variant = this.selectedVariant();
    if (!prod) return 0;

-    const stockLimit = variant
-      ? variant.stock_tecnico
+    return variant
+      ? (variant.maximum_addable_quantity ?? null)
      : prod.variants.length === 0
-        ? (prod.stock_tecnico ?? null)
+        ? (prod.maximum_addable_quantity ?? null)
        : 0;
-    const userLimit = prod.max_units_per_user ?? null;
-
-    if (stockLimit === null) return userLimit;
-    if (userLimit === null) return stockLimit;
-    return Math.min(stockLimit, userLimit);
  });
  protected readonly selectedVariantAvailable = computed(() => {
    const prod = this.product();
    if (!prod) return false;
+    if (this.selectedVariantMax() === 0) return false;

    const variant = this.selectedVariant();
-    if (variant) return this.isVariantAvailable(variant, prod);
+    if (variant) return this.isVariantAvailable(variant);
    if (prod.purpose === 'entry') return false;
    if (prod.variants.length > 0) return false;

-    return prod.inventory_policy === 'unlimited' || (prod.stock_tecnico ?? 0) > 0;
+    return this.selectedVariantMax() !== 0;
  });
  protected readonly descriptionExpanded = signal(false);
  protected readonly descriptionMaxHeight = signal(0);
@@ -333,14 +329,18 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
      });
    } catch (error) {
      console.error('Failed to create direct purchase:', error);
-      this.toastService.danger('No se pudo iniciar la compra directa.');
+      const message =
+        error instanceof HttpErrorResponse && typeof error.error?.message === 'string'
+          ? error.error.message
+          : 'No se pudo iniciar la compra directa.';
+      this.toastService.danger(message);
    } finally {
      this.creatingDirectPurchase.set(false);
    }
  }

-  private isVariantAvailable(variant: CatalogItemVariant, product: CatalogItemDetail): boolean {
-    return product.inventory_policy === 'unlimited' || (variant.stock_tecnico ?? 0) > 0;
+  private isVariantAvailable(variant: CatalogItemVariant): boolean {
+    return variant.maximum_addable_quantity !== 0;
  }

  protected toggleDescription(): void {
--- 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
@@ -28,7 +28,7 @@ describe('productDetailResolver', () => {
    has_tickets: false,
    minimum_use_date: null,
    maximum_use_date: null,
-    stock_tecnico: 0,
+    maximum_addable_quantity: 0,
    attributes: [],
    variants: [],
  };
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.html
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.html
@@ -23,7 +23,7 @@
  </p>
 } @else {
  @for (group of catalog(); track group.id) {
-    <app-store-section [title]="group.title">
+    <app-store-section [attr.id]="group.code" [title]="group.title">
      <app-product-list
        [layout]="group.layout"
        [groupLayout]="group.group_layout"
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.scss
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.scss
@@ -11,6 +11,10 @@ app-store-section + app-store-section {
  margin-top: clamp(3rem, 6vw, 5rem);
 }

+app-store-section[id] {
+  scroll-margin-top: 8rem;
+}
+
 :host > .store-home__additional-info:not(:first-child) {
  margin-top: clamp(3rem, 6vw, 5rem);
 }
--- 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
@@ -58,6 +58,7 @@ function createCatalog(
  return [
    {
      id: 7,
+      code: 'destacados',
      title: 'Destacados',
      layout: 'column_with_image',
      group_layout: 'paginated',
@@ -149,6 +150,7 @@ describe('StoreHomePageComponent', () => {
    const element = fixture.nativeElement as HTMLElement;

    expect(catalogServiceStub.getCatalog).not.toHaveBeenCalled();
+    expect(element.querySelector('app-store-section')?.id).toBe('destacados');
    expect(element.querySelector('.store-section__title')?.textContent?.trim()).toBe('Destacados');
    expect(element.querySelectorAll('app-product-column-with-image')).toHaveLength(2);
    expect(element.textContent).toContain('Auriculares Bluetooth');
--- 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
@@ -224,6 +224,11 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
        return;
      }

+      if (error instanceof HttpErrorResponse && typeof error.error?.message === 'string') {
+        this.toastService.danger(error.error.message);
+        return;
+      }
+
      this.toastService.danger('No se pudo iniciar la compra directa.');
    } finally {
      this.creatingDirectPurchase.set(false);
--- a/src/app/shared/components/cart/cart.component.html
+++ b/src/app/shared/components/cart/cart.component.html
@@ -1,12 +1,17 @@
 <section
-  class="d-flex flex-column h-100 overflow-hidden text-secondary"
+  class="d-flex flex-column overflow-hidden text-secondary cart-shell"
  [style.background-color]="backgroundColor()"
 >
  <header class="d-flex align-items-center p-3 justify-content-between bg-transparent cart-header">
    <h2 class="m-0 text-uppercase fw-bold cart-title">{{ title() }}</h2>

    <div class="d-flex align-items-center cart-header-actions">
-      @if (!readonly() && allowModify() && requireEditingMode() && items().length > 0) {
+      @if (
+        allowModify() &&
+        (!readonly() || showModifyWhenReadonly()) &&
+        requireEditingMode() &&
+        items().length > 0
+      ) {
        <button
          class="btn btn-link p-0 border-0 cart-edit-btn"
          type="button"
--- a/src/app/shared/components/cart/cart.component.scss
+++ b/src/app/shared/components/cart/cart.component.scss
@@ -1,7 +1,15 @@
 :host {
-  display: block;
+  display: flex;
  width: 100%;
-  height: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.cart-shell {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: 100%;
 }

 .cart-header {
--- a/src/app/shared/components/cart/cart.component.ts
+++ b/src/app/shared/components/cart/cart.component.ts
@@ -55,10 +55,13 @@ export class CartComponent {
  readonly readonly = input<boolean>(false);
  readonly allowUpdateQuantity = input<boolean>(true);
  readonly allowModify = input<boolean>(true);
+  readonly showModifyWhenReadonly = input<boolean>(false);
  readonly requireEditingMode = input<boolean>(false);
  readonly allowUpdateVariant = input<boolean>(true);
  readonly allowDelete = input<boolean>(true);
  readonly persistQuantityChanges = input<boolean>(true);
+  readonly persistVariantChanges = input<boolean>(true);
+  readonly persistDeleteChanges = input<boolean>(true);
  readonly editingDisabled = input<boolean>(false);
  readonly editing = model<boolean>(false);

@@ -68,6 +71,12 @@ export class CartComponent {
    index: number;
    quantity: number;
  }>();
+  readonly itemVariantChange = output<{
+    item: CartItemMock;
+    index: number;
+    variantId: number;
+  }>();
+  readonly itemRemove = output<{ item: CartItemMock; index: number }>();

  protected readonly quantityOverrides = signal<Record<number, number>>({});
  protected readonly variantOverrides = signal<Record<number, number>>({});
@@ -179,6 +188,12 @@ export class CartComponent {

    if (!item || !cartItemId || variantId === this.getItemVariant(item)) return;

+    this.itemVariantChange.emit({ item, index, variantId });
+
+    if (!this.persistVariantChanges()) {
+      return;
+    }
+
    this.variantOverrides.update((overrides) => ({ ...overrides, [cartItemId]: variantId }));
    this.cartService
      .updateItemVariant(cartItemId, this.getItemQuantity(item), variantId)
@@ -221,7 +236,14 @@ export class CartComponent {
      })
      .subscribe((confirmed) => {
        if (confirmed) {
-          this.removeItem(target.cartItemId);
+          const item = this.items()[index];
+          if (item) {
+            this.itemRemove.emit({ item, index });
+          }
+
+          if (this.persistDeleteChanges()) {
+            this.removeItem(target.cartItemId);
+          }
        }
      });
  }
--- a/src/app/shared/components/product-list/product-list.component.html
+++ b/src/app/shared/components/product-list/product-list.component.html
@@ -12,6 +12,7 @@
          [title]="item.nombre"
          [description]="item.descripcion ?? ''"
          [price]="price(item)"
+          [maximumAddableQuantity]="item.maximum_addable_quantity ?? null"
          [variants]="item.variants ?? []"
          [saving]="savingProductIds().has(item.id)"
          (buy)="emitRowBuy(item, $event)"
@@ -23,6 +24,7 @@
          [title]="item.nombre"
          [description]="item.descripcion ?? ''"
          [price]="price(item)"
+          [maximumAddableQuantity]="item.maximum_addable_quantity ?? null"
          [variants]="item.variants ?? []"
          [saving]="savingProductIds().has(item.id)"
          (buy)="emitColumnBuy(item, $event)"
--- a/src/app/shared/components/product-list/product-list.component.spec.ts
+++ b/src/app/shared/components/product-list/product-list.component.spec.ts
@@ -193,8 +193,8 @@ describe('ProductListComponent', () => {
    const itemWithVariants: ProductListItem = {
      ...items[0],
      variants: [
-        { id: 91, stock_tecnico: 3, values: { fecha: '10 de octubre' } },
-        { id: 92, stock_tecnico: 4, values: { fecha: '11 de octubre' } },
+        { id: 91, maximum_addable_quantity: 3, values: { fecha: '10 de octubre' } },
+        { id: 92, maximum_addable_quantity: 4, values: { fecha: '11 de octubre' } },
      ],
    };
    const fixture = await render('column_with_cart', [itemWithVariants]);
@@ -214,6 +214,58 @@ describe('ProductListComponent', () => {
    });
  });

+  it('caps the quantity at the selected variant maximum', async () => {
+    const itemWithVariants: ProductListItem = {
+      ...items[0],
+      variants: [
+        {
+          id: 91,
+          maximum_addable_quantity: 2,
+          values: { fecha: '10 de octubre' },
+        },
+      ],
+    };
+    const fixture = await render('column_with_cart', [itemWithVariants]);
+    await fixture.whenStable();
+    fixture.detectChanges();
+    const increase = fixture.nativeElement.querySelector(
+      '.quantity-selector__button:last-child',
+    ) as HTMLButtonElement;
+
+    increase.click();
+    fixture.detectChanges();
+
+    expect(
+      (fixture.nativeElement as HTMLElement).querySelector('.quantity-selector__value')
+        ?.textContent,
+    ).toContain('2');
+    expect(increase.disabled).toBe(true);
+  });
+
+  it('disables purchase actions when the selected variant maximum is zero', async () => {
+    const unavailableItem: ProductListItem = {
+      ...items[0],
+      variants: [
+        {
+          id: 91,
+          maximum_addable_quantity: 0,
+          values: { fecha: '10 de octubre' },
+        },
+      ],
+    };
+    const fixture = await render('row', [unavailableItem]);
+    await fixture.whenStable();
+    fixture.detectChanges();
+    const buttons = Array.from(
+      (fixture.nativeElement as HTMLElement).querySelectorAll<HTMLButtonElement>(
+        '.product-row-card__buttons button',
+      ),
+    );
+
+    expect(buttons).toHaveLength(2);
+    expect(buttons.every((button) => button.disabled)).toBe(true);
+  });
+
  it('renders pagination and emits the requested page', async () => {
    const fixture = await render('row');
    const pageChangeSpy = vi.fn();
@@ -252,7 +304,7 @@ describe('ProductListComponent', () => {
        {
          id: 401,
          precio: '10000.00',
-          stock_tecnico: 1,
+          maximum_addable_quantity: 1,
          values: {
            tipo: { value: 'vip', label: 'VIP' },
            sector: { value: 'a', label: 'Sector A' },
@@ -263,7 +315,7 @@ describe('ProductListComponent', () => {
        {
          id: 402,
          precio: '12000.00',
-          stock_tecnico: 1,
+          maximum_addable_quantity: 1,
          values: {
            tipo: { value: 'vip', label: 'VIP' },
            sector: { value: 'a', label: 'Sector A' },
--- 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
@@ -21,7 +21,11 @@
          [(selectedVariant)]="selectedVariant"
        />

-        <app-quantity-selector [(quantity)]="quantity"></app-quantity-selector>
+        <app-quantity-selector
+          [(quantity)]="quantity"
+          [max]="effectiveMaximum()"
+          [disabled]="unavailable()"
+        />
      </div>

      <span class="product-row-card__price text-primary">
@@ -31,10 +35,16 @@

    <div class="product-row-card__buttons">
      <div class="product-row-card__btn-wrapper">
-        <app-button variant="primary" (click)="onBuy()"> Comprar </app-button>
+        <app-button variant="primary" [disabled]="unavailable()" (click)="onBuy()">
+          Comprar
+        </app-button>
      </div>
      <div class="product-row-card__btn-wrapper">
-        <app-button variant="secondary" [disabled]="saving()" (click)="onAddToCart()">
+        <app-button
+          variant="secondary"
+          [disabled]="saving() || unavailable()"
+          (click)="onAddToCart()"
+        >
          {{ saving() ? 'Guardando' : 'Agregar al carrito' }}
        </app-button>
      </div>
--- 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
@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  model,
+  output,
+} from '@angular/core';
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
 import {
@@ -10,7 +18,7 @@ export interface Variant extends VariantSelectorVariant {
  label?: string;
  descripcion?: string | null;
  precio?: string | number;
-  stock_tecnico?: number | null;
+  maximum_addable_quantity?: number | null;
 }

@Component({
@@ -26,6 +34,7 @@ export class ProductRowCardComponent {
  readonly title = input<string>('');
  readonly description = input<string>('');
  readonly price = input<number>(0);
+  readonly maximumAddableQuantity = input<number | null>(null);
  readonly variants = input<Variant[]>([]);
  readonly saving = input(false);

@@ -48,11 +57,25 @@ export class ProductRowCardComponent {

    return Number.isFinite(variantPrice) ? variantPrice : this.price();
  });
+  protected readonly effectiveMaximum = computed(
+    () => this.selectedVariantData()?.maximum_addable_quantity ?? this.maximumAddableQuantity(),
+  );
+  protected readonly unavailable = computed(() => this.effectiveMaximum() === 0);

  readonly formattedPrice = computed(() => this.formatCurrency(this.effectivePrice()));

+  constructor() {
+    effect(() => {
+      const maximum = this.effectiveMaximum();
+
+      if (maximum !== null && maximum > 0 && this.quantity() > maximum) {
+        this.quantity.set(maximum);
+      }
+    });
+  }
+
  protected onAddToCart(): void {
-    if (this.saving()) {
+    if (this.saving() || this.unavailable()) {
      return;
    }

@@ -63,6 +86,8 @@ export class ProductRowCardComponent {
  }

  protected onBuy(): void {
+    if (this.unavailable()) return;
+
    this.buy.emit({
      quantity: this.quantity(),
      variant: this.selectedVariant(),
--- 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
@@ -361,7 +361,7 @@ export class ProductTicketSelectorComponent {
    return {
      id: item.variant.id,
      precio: item.variant.precio,
-      stock_tecnico: item.variant.stock_tecnico,
+      maximum_addable_quantity: item.variant.stock_tecnico,
      values: item.variant.values,
    };
  }
--- 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
@@ -11,13 +11,21 @@
    @if (!hasVariants()) {
      <div class="product-vertical-with-cart-card__summary">
        <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
-        <app-quantity-selector [(quantity)]="quantity" />
+        <app-quantity-selector
+          [(quantity)]="quantity"
+          [max]="effectiveMaximum()"
+          [disabled]="unavailable()"
+        />
      </div>
    } @else {
      <div class="product-vertical-with-cart-card__variants">
        <div class="product-vertical-with-cart-card__summary">
          <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
-          <app-quantity-selector [(quantity)]="quantity" />
+          <app-quantity-selector
+            [(quantity)]="quantity"
+            [max]="effectiveMaximum()"
+            [disabled]="unavailable()"
+          />
        </div>

        <div class="product-vertical-with-cart-card__variant-selectors">
@@ -29,14 +37,14 @@
    <div class="product-vertical-with-cart-card__actions">
      <app-button
        variant="primary"
-        [disabled]="hasVariants() && selectedVariant() === null"
+        [disabled]="unavailable() || (hasVariants() && selectedVariant() === null)"
        (click)="onBuy()"
      >
        Comprar
      </app-button>
      <app-button
        variant="secondary"
-        [disabled]="saving() || (hasVariants() && selectedVariant() === null)"
+        [disabled]="saving() || unavailable() || (hasVariants() && selectedVariant() === null)"
        (click)="onAddToCart()"
      >
        {{ saving() ? 'Guardando' : 'Agregar al carrito' }}
--- 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
@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  model,
+  output,
+} from '@angular/core';

 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
@@ -10,6 +18,7 @@ import {
 export interface VerticalCartVariant extends VariantSelectorVariant {
  descripcion?: string | null;
  precio?: string | number;
+  maximum_addable_quantity?: number | null;
 }

@Component({
@@ -23,6 +32,7 @@ export class ProductVerticalWithCartCardComponent {
  readonly title = input<string>('');
  readonly description = input<string>('');
  readonly price = input<number>(0);
+  readonly maximumAddableQuantity = input<number | null>(null);
  readonly variants = input<VerticalCartVariant[]>([]);
  readonly saving = input(false);

@@ -45,9 +55,23 @@ export class ProductVerticalWithCartCardComponent {
  });
  protected readonly formattedPrice = computed(() => this.formatCurrency(this.effectivePrice()));
  protected readonly hasVariants = computed(() => this.variants().length > 0);
+  protected readonly effectiveMaximum = computed(
+    () => this.selectedVariantData()?.maximum_addable_quantity ?? this.maximumAddableQuantity(),
+  );
+  protected readonly unavailable = computed(() => this.effectiveMaximum() === 0);
+
+  constructor() {
+    effect(() => {
+      const maximum = this.effectiveMaximum();
+
+      if (maximum !== null && maximum > 0 && this.quantity() > maximum) {
+        this.quantity.set(maximum);
+      }
+    });
+  }

  protected onAddToCart(): void {
-    if (this.saving()) {
+    if (this.saving() || this.unavailable()) {
      return;
    }

@@ -55,6 +79,8 @@ export class ProductVerticalWithCartCardComponent {
  }

  protected onBuy(): void {
+    if (this.unavailable()) return;
+
    this.buy.emit({ quantity: this.quantity(), variant: this.selectedVariant() });
  }
Author	SHA1	Message	Date
ncoronel	4251ca8a8a	fix(checkout): redirect expired purchases from checkout	2026-08-20 17:01:34 -03:00
ncoronel	cfa1091116	feat(checkout): enhance payment submission with error handling and polling logic	2026-08-20 15:53:33 -03:00
ncoronel	d0b1607ff4	refactor(checkout): update checkout navigation logic to retain purchase state	2026-08-20 13:53:52 -03:00
ncoronel	92546a28c0	feat(catalog): add anchor IDs to featured groups	2026-08-20 12:46:14 -03:00
ncoronel	ce26fb5d1a	feat(tenant): display contact details in store footer	2026-08-20 12:46:14 -03:00
ncoronel	38a57adf55	feat(checkout): implement transfer payment polling with cancellation	2026-08-20 11:09:52 -03:00
ncoronel	e1d9590905	feat(checkout): map editing policy to cart controls	2026-08-20 10:56:33 -03:00
ncoronel	00a01e1a8e	feat(cart): open header cart from query param	2026-08-20 10:56:27 -03:00
ncoronel	56e011bc7a	feat(cart): update cart layout styles for improved responsiveness and structure	2026-08-20 08:42:41 -03:00
ncoronel	5c6a03b10d	feat(catalog): replace stock_tecnico with maximum_addable_quantity across components and services	2026-08-19 17:00:03 -03:00