refactor(checkout): update checkout navigation logic to retain purchase state

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">
+          @if (address) {
             <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>
+              <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>54 9 (0341) 6658247</span>
+              <span>{{ phone }}</span>
             </div>
+          }
         </div>
 
         <p class="mb-0 small store-layout__muted-text store-layout__copyright">

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

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>

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', () => {

src/app/core/layout/store-layout/store-layout.component.ts

@@ -1,5 +1,6 @@
-import { Component, computed, inject, OnInit, signal } from '@angular/core';
+import { Component, computed, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { Router, RouterOutlet } from '@angular/router';
+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
+    // Leave checkout before closing the authenticated session so its component
-    // its CanDeactivate guard can cancel the pending purchase.
+    // can stop payment polling cleanly. The checkout itself remains pending.
     if (isLeavingCheckout) {
       const navigationSucceeded = await this.router.navigate(['/']);
 

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

@@ -155,6 +155,7 @@ export type CatalogFeaturedItems =
 
 export interface CatalogFeaturedGroup {
   id: number;
+  code: string;
   title: string;
   layout: CatalogProductLayout;
   group_layout: CatalogGroupLayout;

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,

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[];

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]="
+        [allowUpdateVariant]="canUpdateCartVariant()"
-          createdPurchase()?.status === 'created' || createdPurchase()?.status === 'pending_payment'
+        [requireEditingMode]="true"
-        "
+        [allowDelete]="canDeleteCartItems()"
-        [allowDelete]="false"
         [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>

src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts

@@ -18,6 +18,8 @@ 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>;
@@ -36,7 +38,7 @@ describe('CheckoutPageComponent payment validation', () => {
   let tenantState: ReturnType<
     typeof signal<{
       codigo: string;
-      cart_editing_policy?: CartEditingPolicy;
+      checkout_editing_policy?: CartEditingPolicy;
     }>
   >;
 
@@ -60,6 +62,8 @@ 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({
@@ -95,7 +99,7 @@ describe('CheckoutPageComponent payment validation', () => {
     authUserState = signal(null);
     tenantState = signal({
       codigo: 'tenant-test',
-      cart_editing_policy: {
+      checkout_editing_policy: {
         code: 'full',
         allow_modify: true,
         allow_delete: true,
@@ -209,19 +213,27 @@ 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();
+    component.onComplete();
-    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledWith('tenant-test', 25);
+    expect(component.transferValidationStatus()).toBe('checking');
+    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 () => {
@@ -229,26 +241,46 @@ describe('CheckoutPageComponent payment validation', () => {
     const { component } = createComponent();
     component.selectedPaymentMethod.set('transfer');
 
-    await component.onComplete();
+    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();
+    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('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 +480,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 +520,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 +531,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 +569,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 +608,14 @@ 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);
   });
 });

src/app/features/store/pages/checkout-page/checkout-page.component.ts

@@ -60,10 +60,15 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
   private readonly cartService = inject(CartService);
   private readonly qrPollingIntervalMs = 5_000;
   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 +85,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 +172,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.stopQrPolling();
+    this.stopTransferPolling();
   }
 
   private mapPurchaseItemToMock(item: PurchaseDetailItemResponse): CartItemMock {
@@ -176,6 +188,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 +199,9 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
     }
 
     if (editing && !this.canModifyCart()) {
+      await this.router.navigate(['/'], {
+        queryParams: { openCart: true },
+      });
       return;
     }
 
@@ -200,6 +217,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);
@@ -251,6 +269,8 @@ 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) {
@@ -260,6 +280,79 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
     }
   }
 
+  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) {
+      console.error('Failed to update purchase item variant:', error);
+    } 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) {
+      console.error('Failed to remove purchase item:', error);
+    } finally {
+      this.isUpdatingItem.set(false);
+    }
+  }
+
   protected async onStep1Continue(): Promise<void> {
     if (this.form.invalid || this.isUpdatingPurchase() || this.isEditingItems()) return;
 
@@ -299,34 +392,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();
+    // The checkout cart remains attached to its purchase. Once the user adds a
-    const tenant = this.tenantService.tenant();
+    // new item, the cart API creates a separate active cart automatically.
-
-    if (!purchaseId || !tenant) {
-      return true;
-    }
-
-    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);
+      console.error('Failed to load the active cart after leaving checkout:', error);
     }
 
     return true;
-    } catch (error) {
-      console.error('Failed to cancel purchase:', error);
-      return false;
-    }
   }
 
   protected async selectPaymentMethod(method: PaymentMethod): Promise<void> {
@@ -335,6 +415,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
     }
 
     this.stopQrPolling();
+    this.stopTransferPolling();
     this.qrPaymentStatus.set('idle');
     this.transferValidationStatus.set('idle');
     this.selectedPaymentMethod.set(method);
@@ -392,6 +473,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
     }
 
     this.transferDni.set(dni);
+    this.stopTransferPolling();
     this.transferValidationStatus.set('idle');
     this.isGeneratingIntent.set(true);
     try {
@@ -432,7 +514,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
     }
   }
 
-  protected async onComplete(): Promise<void> {
+  protected onComplete(): void {
     const purchaseId = this.createdPurchaseId();
     const tenant = this.tenantService.tenant();
 
@@ -446,22 +528,72 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
       return;
     }
 
+    this.stopTransferPolling();
     this.transferValidationStatus.set('checking');
+    this.transferPollingAttempts = 0;
+
+    const runId = this.transferPollingRunId;
+    this.scheduleTransferPoll(runId);
+  }
+
+  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;
       }
-
-      this.transferValidationStatus.set('error');
     } 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 +707,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
 
     this.navigationStarted = true;
     this.stopQrPolling();
+    this.stopTransferPolling();
 
     void this.router.navigate(['/checkout/status', purchaseId]);
   }

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"

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

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

src/app/shared/components/cart/cart.component.html

@@ -6,7 +6,12 @@
     <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"

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,8 +236,15 @@ export class CartComponent {
       })
       .subscribe((confirmed) => {
         if (confirmed) {
+          const item = this.items()[index];
+          if (item) {
+            this.itemRemove.emit({ item, index });
+          }
+
+          if (this.persistDeleteChanges()) {
             this.removeItem(target.cartItemId);
           }
+        }
       });
   }