refactor(checkout): remove unused completion request

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -152,9 +152,9 @@
     </div>
   </div>
 
-  @if (displayCategories()) {
-    <div class="store-layout__categories d-none d-md-block">
-      <div class="container-xl px-3 px-md-4">
+  <div class="store-layout__categories d-none d-md-block">
+    <div class="container-xl h-100 px-3 px-md-4 d-flex align-items-center">
+      @if (displayCategories()) {
         <div class="store-layout__category-menu">
           <button
             type="button"
@@ -175,7 +175,18 @@
             (categorySelect)="onCategorySelect($event)"
           />
         </div>
-      </div>
+      }
+
+      @if (checkoutRemainingTime(); as remainingTime) {
+        <div
+          class="store-layout__checkout-timer ms-auto d-none d-md-flex align-items-baseline gap-3"
+          role="timer"
+          aria-label="Tiempo restante de compra"
+        >
+          <span class="store-layout__checkout-timer-label">Tiempo restante de compra:</span>
+          <span class="store-layout__checkout-timer-value">{{ remainingTime }}</span>
+        </div>
+      }
     </div>
-  }
+  </div>
 </header>

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -10,6 +10,26 @@
   border-bottom: 1px solid var(--border-color);
 }
 
+.store-layout__categories {
+  height: 3.5rem;
+}
+
+.store-layout__checkout-timer {
+  color: var(--tenant-primary);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.store-layout__checkout-timer-label {
+  font-size: 13px;
+}
+
+.store-layout__checkout-timer-value {
+  font-size: 20px;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
 .store-layout__brand-slot {
   min-width: 150px;
 }

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

@@ -1,4 +1,13 @@
-import { Component, ElementRef, HostListener, inject, input, output, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  ElementRef,
+  HostListener,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { AuthUser } from '../../../services/auth/auth.interfaces';
 import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
@@ -40,6 +49,7 @@ export class StoreHeaderComponent {
   readonly displaySeachBar = input(true);
   readonly displayCart = input(true);
   readonly cartDisabled = input(false);
+  readonly checkoutRemainingSeconds = input<number | null>(null);
   readonly cartClick = output<void>();
   readonly ticketsClick = output<void>();
   readonly loginClick = output<void>();
@@ -53,6 +63,18 @@ export class StoreHeaderComponent {
   protected readonly minSearchLength = 3;
   protected readonly showSearchError = signal(false);
   protected readonly searchControl = new FormControl('', { nonNullable: true });
+  protected readonly checkoutRemainingTime = computed(() => {
+    const remainingSeconds = this.checkoutRemainingSeconds();
+
+    if (remainingSeconds === null) {
+      return null;
+    }
+
+    const minutes = Math.floor(remainingSeconds / 60);
+    const seconds = remainingSeconds % 60;
+
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  });
 
   protected onCartClick(): void {
     if (this.cartDisabled()) {

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

@@ -13,6 +13,7 @@
     [displaySeachBar]="tenant()?.display_seach_bar ?? true"
     [displayCart]="displayCart()"
     [cartDisabled]="isCheckoutRoute()"
+    [checkoutRemainingSeconds]="checkoutRemainingSeconds()"
     (cartClick)="onCartClick()"
     (ticketsClick)="onTicketsClick()"
     (loginClick)="onLoginClick()"

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

@@ -24,6 +24,7 @@ import { AuthUser } from '../../services/auth/auth.interfaces';
 import { StoreLayoutComponent } from './store-layout.component';
 import { StoreHeaderComponent } from './store-header/store-header.component';
 import { CheckoutService } from '../../services/checkout.service';
+import { CheckoutCountdownService } from '../../services/checkout-countdown.service';
 import { TenantUrlSerializer } from '../../services/tenant-url.serializer';
 
 const tenant: Tenant = {
@@ -150,6 +151,7 @@ describe('StoreLayoutComponent', () => {
   let tenantState = signal<Tenant | null>(tenant);
   let cartState = signal<Cart | null>(null);
   let authUserState = signal<AuthUser | null>(null);
+  let checkoutRemainingSecondsState = signal<number | null>(null);
   let checkoutServiceStub: { startCheckout: ReturnType<typeof vi.fn> };
   let queryParamMapState: BehaviorSubject<ParamMap>;
 
@@ -157,6 +159,7 @@ describe('StoreLayoutComponent', () => {
     tenantState = signal<Tenant | null>(tenant);
     cartState = signal<Cart | null>(null);
     authUserState = signal<AuthUser | null>(null);
+    checkoutRemainingSecondsState = signal<number | null>(null);
     queryParamMapState = new BehaviorSubject(convertToParamMap({}));
     const isAuthenticatedState = signal(false);
     checkoutServiceStub = {
@@ -215,6 +218,12 @@ describe('StoreLayoutComponent', () => {
           provide: CheckoutService,
           useValue: checkoutServiceStub,
         },
+        {
+          provide: CheckoutCountdownService,
+          useValue: {
+            remainingSeconds: checkoutRemainingSecondsState.asReadonly(),
+          },
+        },
       ],
     }).compileComponents();
   });
@@ -271,6 +280,22 @@ describe('StoreLayoutComponent', () => {
     expect(element.querySelector('.store-layout__cart-overlay')).toBeNull();
   });
 
+  it('shows the synchronized countdown in the header whenever one is active', () => {
+    checkoutRemainingSecondsState.set(587);
+
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelector('.store-layout__checkout-timer-label')?.textContent).toContain(
+      'Tiempo restante de compra:',
+    );
+    expect(element.querySelector('.store-layout__checkout-timer-value')?.textContent?.trim()).toBe(
+      '09:47',
+    );
+  });
+
   it('hides the configured header elements when the tenant disables them', () => {
     tenantState.set({
       ...tenant,

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

@@ -24,6 +24,7 @@ import {
 } from '../../services/checkout.service';
 import { ToastService } from '../../services/toast.service';
 import { Category } from '../../services/tenant.interface';
+import { CheckoutCountdownService } from '../../services/checkout-countdown.service';
 
 @Component({
   selector: 'app-store-layout',
@@ -42,6 +43,7 @@ export class StoreLayoutComponent implements OnInit {
   private readonly cartService = inject(CartService);
   private readonly authService = inject(AuthService);
   private readonly checkoutService = inject(CheckoutService);
+  private readonly checkoutCountdownService = inject(CheckoutCountdownService);
   private readonly toastService = inject(ToastService);
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
@@ -49,6 +51,7 @@ export class StoreLayoutComponent implements OnInit {
 
   protected readonly isCartOpen = signal(false);
   protected readonly isCheckoutRoute = signal(this.isCheckoutUrl(this.router.url));
+  protected readonly checkoutRemainingSeconds = this.checkoutCountdownService.remainingSeconds;
   protected readonly isCreatingPurchase = signal(false);
   protected readonly displayCart = computed(() => this.tenant()?.display_cart ?? true);
   protected readonly cartEditingPolicy = computed(() => this.tenant()?.cart_editing_policy ?? null);
@@ -287,7 +290,7 @@ export class StoreLayoutComponent implements OnInit {
       this.toastService.danger(message);
 
       if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) {
-        this.cartService.loadCart().subscribe({
+        this.cartService.loadCart(true).subscribe({
           error: (refreshError) => console.error('Error refreshing expired cart', refreshError),
         });
       }

src/app/core/services/cart/cart.service.spec.ts

@@ -83,6 +83,20 @@ describe('CartService', () => {
     req.flush({ data: mockCart });
   });
 
+  it('refreshes catalog availability only after the expired cart has been reloaded', () => {
+    const availabilityChanged = vi.fn();
+    catalogAvailabilityService.availabilityChanged$.subscribe(availabilityChanged);
+
+    service.loadCart(true).subscribe();
+
+    expect(availabilityChanged).not.toHaveBeenCalled();
+    const req = httpMock.expectOne('http://api.test/tenants/acme/cart');
+    req.flush({ data: mockCart });
+
+    expect(service.cart()).toEqual(mockCart);
+    expect(availabilityChanged).toHaveBeenCalledOnce();
+  });
+
   it('propagates a custom loading mode to the request context', () => {
     service.withCustomLoading().loadCart().subscribe();
 

src/app/core/services/cart/cart.service.ts

@@ -34,14 +34,19 @@ export class CartService extends BaseApiService {
     });
   }
 
-  loadCart(): Observable<Cart> {
+  loadCart(refreshCatalogAvailability = false): Observable<Cart> {
     return this.http
       .get<ApiResponse<Cart>>(`${this.tenantApiUrl}/cart`, {
         withCredentials: true,
       })
       .pipe(
         map((response) => response.data),
-        tap((cart) => this.cartState.set(cart)),
+        tap((cart) => {
+          this.cartState.set(cart);
+          if (refreshCatalogAvailability) {
+            this.catalogAvailabilityService.notifyAvailabilityChanged();
+          }
+        }),
       );
   }
 

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

@@ -14,7 +14,6 @@ import {
   CatalogItemDetail,
   CatalogVariantOptionsResponse,
   CategoryItemsResponse,
-  Product,
 } from './catalog.interface';
 
 type HttpParamValue = string | number | boolean | readonly (string | number | boolean)[];
@@ -33,12 +32,6 @@ export class CatalogService extends BaseApiService {
     return this.tenantService.getTenantApiUrl();
   }
 
-  getProductos(params?: ApiPaginationQueryParams): Observable<ApiPaginatedResponse<Product[]>> {
-    return this.http.get<ApiPaginatedResponse<Product[]>>(`${this.tenantApiUrl}/productos`, {
-      params: this.buildHttpParams(params),
-    });
-  }
-
   getCatalog(): Observable<CatalogFeaturedGroup[]> {
     return this.http.get<CatalogFeaturedGroup[]>(`${this.tenantApiUrl}/catalog`);
   }

src/app/core/services/checkout-countdown.service.spec.ts

@@ -0,0 +1,69 @@
+import { TestBed } from '@angular/core/testing';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { CheckoutCountdownService } from './checkout-countdown.service';
+
+describe('CheckoutCountdownService', () => {
+  let service: CheckoutCountdownService;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-08-27T12:00:00.000Z'));
+    TestBed.configureTestingModule({ providers: [CheckoutCountdownService] });
+    service = TestBed.inject(CheckoutCountdownService);
+  });
+
+  afterEach(() => {
+    service.clear();
+    vi.useRealTimers();
+  });
+
+  it('counts down from the checkout server timing without depending on the client clock', () => {
+    service.synchronize({
+      expires_at: '2026-08-27T15:10:00.000Z',
+      expires_in_seconds: 600,
+      server_time: '2026-08-27T15:00:00.000Z',
+    });
+
+    expect(service.remainingSeconds()).toBe(600);
+
+    vi.advanceTimersByTime(1_000);
+
+    expect(service.remainingSeconds()).toBe(599);
+  });
+
+  it('recalculates against the deadline after a delayed browser interval', () => {
+    service.synchronize({
+      expires_at: null,
+      expires_in_seconds: 10,
+      server_time: '2026-08-27T15:00:00.000Z',
+    });
+
+    vi.setSystemTime(new Date('2026-08-27T12:00:07.000Z'));
+    vi.advanceTimersByTime(1_000);
+
+    expect(service.remainingSeconds()).toBe(2);
+  });
+
+  it('clears the countdown when checkout has no expiration', () => {
+    service.synchronize({
+      expires_at: null,
+      expires_in_seconds: null,
+      server_time: '2026-08-27T15:00:00.000Z',
+    });
+
+    expect(service.remainingSeconds()).toBeNull();
+  });
+
+  it('keeps the active countdown when a partial checkout response omits timing fields', () => {
+    service.synchronize({
+      expires_at: null,
+      expires_in_seconds: 10,
+      server_time: '2026-08-27T15:00:00.000Z',
+    });
+
+    service.synchronize({});
+
+    expect(service.remainingSeconds()).toBe(10);
+  });
+});

src/app/core/services/checkout-countdown.service.ts

@@ -0,0 +1,97 @@
+import { Injectable, OnDestroy, signal } from '@angular/core';
+
+export interface CheckoutTiming {
+  expires_at: string | null;
+  expires_in_seconds: number | null;
+  server_time: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CheckoutCountdownService implements OnDestroy {
+  private readonly remainingSecondsState = signal<number | null>(null);
+  private deadlineMs: number | null = null;
+  private intervalId: ReturnType<typeof setInterval> | null = null;
+
+  readonly remainingSeconds = this.remainingSecondsState.asReadonly();
+
+  synchronize(timing: Partial<CheckoutTiming>): void {
+    const remainingSeconds = this.resolveRemainingSeconds(timing);
+
+    if (remainingSeconds === undefined) {
+      return;
+    }
+
+    if (remainingSeconds === null) {
+      this.clear();
+      return;
+    }
+
+    this.stopInterval();
+    this.deadlineMs = Date.now() + remainingSeconds * 1_000;
+    this.updateRemainingSeconds();
+
+    if (remainingSeconds > 0) {
+      this.intervalId = setInterval(() => this.updateRemainingSeconds(), 1_000);
+    }
+  }
+
+  clear(): void {
+    this.stopInterval();
+    this.deadlineMs = null;
+    this.remainingSecondsState.set(null);
+  }
+
+  ngOnDestroy(): void {
+    this.clear();
+  }
+
+  private resolveRemainingSeconds(timing: Partial<CheckoutTiming>): number | null | undefined {
+    if (timing.expires_at === null && timing.expires_in_seconds === null) {
+      return null;
+    }
+
+    const expiresAt =
+      typeof timing.expires_at === 'string' ? Date.parse(timing.expires_at) : Number.NaN;
+    const serverTime =
+      typeof timing.server_time === 'string' ? Date.parse(timing.server_time) : Number.NaN;
+
+    if (Number.isFinite(expiresAt) && Number.isFinite(serverTime)) {
+      return Math.max(0, Math.ceil((expiresAt - serverTime) / 1_000));
+    }
+
+    if (
+      typeof timing.expires_in_seconds === 'number' &&
+      Number.isFinite(timing.expires_in_seconds)
+    ) {
+      return Math.max(0, Math.ceil(timing.expires_in_seconds));
+    }
+
+    if (Number.isFinite(expiresAt)) {
+      return Math.max(0, Math.ceil((expiresAt - Date.now()) / 1_000));
+    }
+
+    return undefined;
+  }
+
+  private updateRemainingSeconds(): void {
+    if (this.deadlineMs === null) {
+      return;
+    }
+
+    const remainingSeconds = Math.max(0, Math.ceil((this.deadlineMs - Date.now()) / 1_000));
+    this.remainingSecondsState.set(remainingSeconds);
+
+    if (remainingSeconds === 0) {
+      this.stopInterval();
+    }
+  }
+
+  private stopInterval(): void {
+    if (this.intervalId !== null) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+}

src/app/core/services/checkout.service.spec.ts

@@ -1,9 +1,10 @@
 import { provideHttpClient } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { environment } from '../../../environments/environment';
+import { CatalogAvailabilityService } from './catalog/catalog-availability.service';
 import { CheckoutService } from './checkout.service';
 
 describe('CheckoutService', () => {
@@ -38,4 +39,59 @@ describe('CheckoutService', () => {
 
     await expect(purchasePromise).resolves.toMatchObject({ id: 55 });
   });
+
+  it('refreshes catalog availability when starting checkout fails', async () => {
+    const catalogAvailabilityService = TestBed.inject(CatalogAvailabilityService);
+    const notifyAvailabilityChanged = vi.spyOn(
+      catalogAvailabilityService,
+      'notifyAvailabilityChanged',
+    );
+    const purchasePromise = service.startCheckout('desfile', { cart_id: 12 });
+    const request = httpMock.expectOne(`${environment.url}tenants/desfile/compras/start-checkout`);
+
+    request.flush(
+      { message: 'No hay stock disponible.' },
+      { status: 422, statusText: 'Unprocessable Entity' },
+    );
+
+    await expect(purchasePromise).rejects.toBeTruthy();
+    expect(notifyAvailabilityChanged).toHaveBeenCalledOnce();
+  });
+
+  it('waits for the expired cart refresh before refreshing catalog availability', async () => {
+    const catalogAvailabilityService = TestBed.inject(CatalogAvailabilityService);
+    const notifyAvailabilityChanged = vi.spyOn(
+      catalogAvailabilityService,
+      'notifyAvailabilityChanged',
+    );
+    const purchasePromise = service.startCheckout('desfile', { cart_id: 12 });
+    const request = httpMock.expectOne(`${environment.url}tenants/desfile/compras/start-checkout`);
+
+    request.flush(
+      {
+        code: 'stock_reservation.expired',
+        message: 'La reserva de stock venció.',
+      },
+      { status: 422, statusText: 'Unprocessable Entity' },
+    );
+
+    await expect(purchasePromise).rejects.toBeTruthy();
+    expect(notifyAvailabilityChanged).not.toHaveBeenCalled();
+  });
+
+  it('preserves checkout timing fields when completing a purchase', async () => {
+    const purchasePromise = service.completePurchase('desfile', 55);
+    const request = httpMock.expectOne(`${environment.url}tenants/desfile/compras/55/complete`);
+    const response = {
+      status: 'pending_payment',
+      expires_at: '2026-08-26T20:00:00.000Z',
+      expires_in_seconds: 900,
+      server_time: '2026-08-26T19:45:00.000Z',
+    };
+
+    expect(request.request.method).toBe('POST');
+    request.flush({ data: response });
+
+    await expect(purchasePromise).resolves.toEqual(response);
+  });
 });

src/app/core/services/checkout.service.ts

@@ -1,10 +1,11 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
 
 import { environment } from '../../../environments/environment';
 import { ApiPaginatedResponse } from './api-paginated-response.interface';
 import { ApiPaginationQueryParams } from './api-pagination-query-params.interface';
 import { BaseApiService } from './base-api.service';
+import { CatalogAvailabilityService } from './catalog/catalog-availability.service';
 
 export interface UpdatePurchaseCustomerPayload {
   dni: string;
@@ -70,6 +71,9 @@ export type StartCheckoutPayload =
 
 export interface PurchaseStatusResponse {
   status: string | null;
+  expires_at: string | null;
+  expires_in_seconds: number | null;
+  server_time: string;
 }
 
 export interface PurchaseSummaryResponse extends PurchaseStatusResponse {
@@ -106,7 +110,6 @@ export interface PurchaseDetailResponse extends PurchaseStatusResponse {
   user_id: number;
   created_at: string | null;
   payment_method: string | null;
-  expires_at: string | null;
   dni: string | null;
   transfer_payer_dni: string | null;
   telefono: string | null;
@@ -124,24 +127,34 @@ export interface PurchaseDetailResponse extends PurchaseStatusResponse {
   providedIn: 'root',
 })
 export class CheckoutService extends BaseApiService {
+  private readonly catalogAvailabilityService = inject(CatalogAvailabilityService);
+
   async startCheckout(
     tenantCode: string,
     payload: StartCheckoutPayload,
   ): Promise<PurchaseDetailResponse> {
-    const response = await firstValueFrom(
-      this.http.post<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>(
-        `${environment.url}tenants/${tenantCode}/compras/start-checkout`,
-        payload,
-      ),
-    );
+    try {
+      const response = await firstValueFrom(
+        this.http.post<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>(
+          `${environment.url}tenants/${tenantCode}/compras/start-checkout`,
+          payload,
+        ),
+      );
 
-    const purchase = this.extractResponseData<PurchaseDetailResponse>(response);
+      const purchase = this.extractResponseData<PurchaseDetailResponse>(response);
 
-    if (!purchase?.id) {
-      throw new Error('Error al crear la compra.');
+      if (!purchase?.id) {
+        throw new Error('Error al crear la compra.');
+      }
+
+      return purchase;
+    } catch (error) {
+      const responseBody = (error as { error?: unknown } | null)?.error;
+      if (!isExpiredStockReservationResponse(responseBody)) {
+        this.catalogAvailabilityService.notifyAvailabilityChanged();
+      }
+      throw error;
     }
-
-    return purchase;
   }
 
   async generatePaymentIntent(
@@ -186,25 +199,6 @@ export class CheckoutService extends BaseApiService {
     return purchase;
   }
 
-  async completePurchase(tenantCode: string, purchaseId: number): Promise<PurchaseStatusResponse> {
-    const response = await firstValueFrom(
-      this.http.post<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(
-        `${environment.url}tenants/${tenantCode}/compras/${purchaseId}/complete`,
-        {},
-      ),
-    );
-
-    const purchase = this.extractResponseData<PurchaseStatusResponse>(response);
-
-    if (!purchase) {
-      throw new Error('Error al finalizar la compra.');
-    }
-
-    return {
-      status: purchase.status ?? null,
-    };
-  }
-
   async submitPurchaseForReview(
     tenantCode: string,
     purchaseId: number,
@@ -221,7 +215,7 @@ export class CheckoutService extends BaseApiService {
       throw new Error('Error al enviar la compra a revisi\u00f3n.');
     }
 
-    return { status: purchase.status ?? null };
+    return purchase;
   }
 
   async cancelPurchase(tenantCode: string, purchaseId: number): Promise<PurchaseStatusResponse> {
@@ -237,7 +231,7 @@ export class CheckoutService extends BaseApiService {
       throw new Error('Error al cancelar la compra.');
     }
 
-    return { status: purchase.status ?? null };
+    return purchase;
   }
 
   async getPurchases(

src/app/features/store/pages/category-items-page/category-items-page.component.ts

@@ -180,7 +180,7 @@ export class CategoryItemsPageComponent {
       this.toastService.danger(message);
 
       if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) {
-        this.cartService.loadCart().subscribe({
+        this.cartService.loadCart(true).subscribe({
           error: (refreshError) => console.error('Error refreshing expired cart', refreshError),
         });
       }

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

@@ -46,6 +46,17 @@
     </div>
 
     <div class="checkout-page__cart-col">
+      @if (checkoutRemainingTime(); as remainingTime) {
+        <div
+          class="checkout-page__mobile-countdown d-flex d-md-none align-items-baseline justify-content-center gap-3"
+          role="timer"
+          aria-label="Tiempo restante de compra"
+        >
+          <span class="checkout-page__mobile-countdown-label">Tiempo restante de compra:</span>
+          <span class="checkout-page__mobile-countdown-value">{{ remainingTime }}</span>
+        </div>
+      }
+
       <app-cart
         title="COMPRA"
         [items]="mappedCartItems()"

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

@@ -28,6 +28,24 @@
     display: flex;
     flex-direction: column;
   }
+
+  &__mobile-countdown {
+    flex: 0 0 auto;
+    margin-bottom: 1.5rem;
+    color: var(--tenant-primary);
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  &__mobile-countdown-label {
+    font-size: 13px;
+  }
+
+  &__mobile-countdown-value {
+    font-size: 20px;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
 }
 
 .checkout-page__loading {

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

@@ -14,6 +14,7 @@ import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { CartService } from '../../../../core/services/cart/cart.service';
 import { CartEditingPolicy } from '../../../../core/services/tenant.interface';
+import { CheckoutCountdownService } from '../../../../core/services/checkout-countdown.service';
 import { CheckoutPageComponent } from './checkout-page.component';
 
 describe('CheckoutPageComponent payment validation', () => {
@@ -129,6 +130,35 @@ describe('CheckoutPageComponent payment validation', () => {
     return { fixture, component: fixture.componentInstance as any };
   }
 
+  it('does not expose an active countdown until the purchase timing is loaded', async () => {
+    const countdown = TestBed.inject(CheckoutCountdownService);
+    countdown.synchronize({
+      expires_at: null,
+      expires_in_seconds: 600,
+      server_time: new Date().toISOString(),
+    });
+    checkoutServiceStub.getPurchase.mockResolvedValue({
+      id: 25,
+      status: 'created',
+      expires_at: '2026-08-27T15:10:00.000Z',
+      expires_in_seconds: 600,
+      server_time: '2026-08-27T15:00:00.000Z',
+      items: [],
+      subtotal: '0.00',
+      total: '0.00',
+    });
+    routeParamMap = convertToParamMap({ id: 25 });
+
+    const { component } = createComponent();
+
+    expect(component.checkoutRemainingTime()).toBeNull();
+
+    await Promise.resolve();
+
+    expect(countdown.remainingSeconds()).toBe(600);
+    expect(component.checkoutRemainingTime()).toBe('10:00');
+  });
+
   it('polls QR after five seconds and navigates only when payment is paid', async () => {
     checkoutServiceStub.getPurchase
       .mockResolvedValueOnce({ status: 'pending_payment' })

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

@@ -28,6 +28,7 @@ import { StepComponent } from '../../../../shared/components/stepper/step.compon
 import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
 import { CheckoutDataStepComponent } from './checkout-data-step.component';
 import { CheckoutPaymentStepComponent } from './checkout-payment-step.component';
+import { CheckoutCountdownService } from '../../../../core/services/checkout-countdown.service';
 import {
   CheckoutForm,
   PaymentMethod,
@@ -64,6 +65,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
   private readonly router = inject(Router);
   private readonly tenantService = inject(TenantService);
   private readonly checkoutService = inject(CheckoutService);
+  private readonly checkoutCountdownService = inject(CheckoutCountdownService);
   private readonly authService = inject(AuthService);
   private readonly globalLoadingService = inject(GlobalLoadingService);
   private readonly toastService = inject(ToastService);
@@ -95,6 +97,28 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
   protected readonly createdPurchase = signal<PurchaseDetailResponse | null>(null);
   protected readonly isLoadingPurchase = signal(true);
   protected readonly checkoutStepIndex = signal(0);
+  protected readonly checkoutRemainingTime = computed(() => {
+    const purchase = this.createdPurchase();
+
+    if (
+      !purchase ||
+      (typeof purchase.expires_at !== 'string' &&
+        typeof purchase.expires_in_seconds !== 'number')
+    ) {
+      return null;
+    }
+
+    const remainingSeconds = this.checkoutCountdownService.remainingSeconds();
+
+    if (remainingSeconds === null) {
+      return null;
+    }
+
+    const minutes = Math.floor(remainingSeconds / 60);
+    const seconds = remainingSeconds % 60;
+
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  });
   protected readonly cartSubtotal = computed(() => {
     const purchase = this.createdPurchase();
     return purchase ? parseFloat(purchase.subtotal) : 0;
@@ -228,6 +252,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
         nombre_apellido: formValue.nombre,
       });
       this.createdPurchase.set(purchase);
+      this.checkoutCountdownService.synchronize(purchase);
 
       this.stepper.next();
 
@@ -281,6 +306,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
     const tenant = this.tenantService.tenant();
     const purchaseId = this.createdPurchaseId();
     if (!tenant || !purchaseId) {
+      this.checkoutCountdownService.clear();
       return true;
     }
 
@@ -291,6 +317,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
       await firstValueFrom(this.cartService.loadCart());
       this.createdPurchaseId.set(null);
       this.createdPurchase.set(null);
+      this.checkoutCountdownService.clear();
 
       this.navigationStarted = true;
       return true;
@@ -299,11 +326,12 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
 
       if (this.isStockReservationExpiredError(error)) {
         this.showRequestError(error, 'La reserva de stock venció.');
-        this.cartService.loadCart().subscribe({
+        this.cartService.loadCart(true).subscribe({
           error: (refreshError) => console.error('Error refreshing expired cart', refreshError),
         });
         this.createdPurchaseId.set(null);
         this.createdPurchase.set(null);
+        this.checkoutCountdownService.clear();
         this.navigationStarted = true;
         return true;
       }
@@ -451,6 +479,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
         return;
       }
 
+      this.checkoutCountdownService.synchronize(purchase);
+
       if (purchase.status === 'paid') {
         this.navigateToPurchaseStatus(purchaseId);
         return;
@@ -500,6 +530,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
         return;
       }
 
+      this.checkoutCountdownService.synchronize(purchase);
+
       if (purchase.status === 'paid') {
         this.navigateToPurchaseStatus(purchaseId);
         return;
@@ -586,6 +618,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
         return;
       }
 
+      this.checkoutCountdownService.synchronize(purchase);
+
       if (purchase.status === 'paid') {
         this.handleConfirmedPayment(purchaseId);
         return;
@@ -659,6 +693,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
     this.navigationStarted = true;
     this.stopQrPolling();
     this.stopTransferPolling();
+    this.checkoutCountdownService.clear();
 
     void this.router.navigate(['/checkout/status', purchaseId]);
   }
@@ -696,6 +731,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
 
       this.createdPurchaseId.set(purchase.id);
       this.createdPurchase.set(purchase);
+      this.checkoutCountdownService.synchronize(purchase);
       this.checkoutStepIndex.set(purchase.status === 'pending_payment' ? 1 : 0);
 
       if (
@@ -779,6 +815,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
       this.navigationStarted = true;
       this.stopQrPolling();
       this.stopTransferPolling();
+      this.checkoutCountdownService.clear();
       void this.router.navigate(['/checkout/status', purchaseId], {
         queryParams: { status: 'expired' },
       });

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

@@ -212,7 +212,7 @@ export class SearchPageComponent {
       this.toastService.danger(message);
 
       if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) {
-        this.cartService.loadCart().subscribe({
+        this.cartService.loadCart(true).subscribe({
           error: (refreshError) => console.error('Error refreshing expired cart', refreshError),
         });
       }

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

@@ -224,7 +224,7 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
 
       if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) {
         this.toastService.danger(error.error.message);
-        this.cartService.loadCart().subscribe({
+        this.cartService.loadCart(true).subscribe({
           error: (refreshError) => console.error('Error refreshing expired cart', refreshError),
         });
         return;

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

@@ -330,7 +330,7 @@ export class CartComponent {
       return;
     }
 
-    this.cartService.loadCart().subscribe({
+    this.cartService.loadCart(true).subscribe({
       error: (refreshError) => console.error('Error refreshing expired cart', refreshError),
     });
   }