feat(qr-modal): implement QR modal component and integrate with tickets page

src/app/core/services/auth/auth.interceptor.spec.ts

@@ -1,4 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { computed, signal } from '@angular/core';
@@ -69,7 +69,7 @@ describe('authInterceptor', () => {
     httpController.verify();
   });
 
-  it('clears the local session when an authenticated request returns 401', () => {
+  it('propagates a 401 without clearing the local session', () => {
     const authService = createAuthServiceStub('expired-token');
 
     TestBed.configureTestingModule({
@@ -83,14 +83,21 @@ describe('authInterceptor', () => {
     const client = TestBed.inject(HttpClient);
     const httpController = TestBed.inject(HttpTestingController);
 
+    let receivedError: unknown;
+    let receivedStatus: number | null = null;
     client.get(`${environment.url}me`).subscribe({
-      error: () => undefined
+      error: (error: HttpErrorResponse) => {
+        receivedError = error;
+        receivedStatus = error.status;
+      }
     });
 
     const request = httpController.expectOne(`${environment.url}me`);
     request.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
 
-    expect(authService.clearSession).toHaveBeenCalledTimes(1);
+    expect(receivedError).toBeInstanceOf(HttpErrorResponse);
+    expect(receivedStatus).toBe(401);
+    expect(authService.clearSession).not.toHaveBeenCalled();
     httpController.verify();
   });
 });

src/app/core/services/auth/auth.interceptor.ts

@@ -1,12 +1,6 @@
-import {
+import { HttpEvent, HttpHandlerFn, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
-  HttpErrorResponse,
-  HttpEvent,
-  HttpHandlerFn,
-  HttpInterceptorFn,
-  HttpRequest
-} from '@angular/common/http';
 import { inject } from '@angular/core';
-import { Observable, catchError, throwError } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import { AuthService } from './auth.service';
 
@@ -25,13 +19,5 @@ export const authInterceptor: HttpInterceptorFn = (
       })
     : request;
 
-  return next(authenticatedRequest).pipe(
+  return next(authenticatedRequest);
-    catchError((error: unknown) => {
-      if (error instanceof HttpErrorResponse && error.status === 401 && token) {
-        authService.clearSession();
-      }
-
-      return throwError(() => error);
-    })
-  );
 };

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

@@ -95,7 +95,7 @@ describe('AuthService', () => {
     httpController.verify();
   });
 
-  it('clears the session when bootstrap receives 401 from /me', async () => {
+  it('propagates a 401 from /me without clearing the session', async () => {
     cookieStore['shopit.auth.token'] = 'expired-token';
 
     TestBed.configureTestingModule({
@@ -116,11 +116,11 @@ describe('AuthService', () => {
 
     request.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
 
-    await expect(bootstrapPromise).resolves.toBeUndefined();
+    await expect(bootstrapPromise).rejects.toMatchObject({ status: 401 });
     expect(service.user()).toBeNull();
-    expect(service.token()).toBeNull();
+    expect(service.token()).toBe('expired-token');
-    expect(service.isAuthenticated()).toBe(false);
+    expect(service.isAuthenticated()).toBe(true);
-    expect(cookieStore['shopit.auth.token']).toBeUndefined();
+    expect(cookieStore['shopit.auth.token']).toBe('expired-token');
 
     httpController.verify();
   });
@@ -168,7 +168,7 @@ describe('AuthService', () => {
     httpController.verify();
   });
 
-  it('clears local session even when logout request fails', () => {
+  it('propagates logout errors without clearing the local session', () => {
     TestBed.configureTestingModule({
       providers: [
         provideHttpClient(),
@@ -202,9 +202,9 @@ describe('AuthService', () => {
     expect(logoutRequest.request.method).toBe('POST');
     logoutRequest.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
 
-    expect(service.token()).toBeNull();
+    expect(service.token()).toBe('plain-text-token');
-    expect(service.user()).toBeNull();
+    expect(service.user()?.email).toBe('ada@example.com');
-    expect(cookieStore['shopit.auth.token']).toBeUndefined();
+    expect(cookieStore['shopit.auth.token']).toBe('plain-text-token');
 
     httpController.verify();
   });

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

@@ -1,4 +1,4 @@
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 import { computed, inject, Injectable, PLATFORM_ID, signal, TransferState, makeStateKey } from '@angular/core';
 import { firstValueFrom, map, Observable, of, tap } from 'rxjs';
@@ -57,10 +57,7 @@ export class AuthService {
     }
 
     return this.http.post<void>(`${environment.url}logout`, {}).pipe(
-      tap({
+      tap(() => this.clearSession())
-        next: () => this.clearSession(),
-        error: () => this.clearSession()
-      })
     );
   }
 
@@ -78,19 +75,10 @@ export class AuthService {
       return;
     }
 
-    try {
     const user = await firstValueFrom(this.loadCurrentUser());
     if (isPlatformServer(this.platformId)) {
       this.transferState.set(AUTH_USER_SSR_STATE_KEY, user);
     }
-    } catch (error) {
-      if (this.isUnauthorizedError(error)) {
-        this.clearSession();
-        return;
-      }
-
-      throw error;
-    }
   }
 
   loadCurrentUser(): Observable<AuthUser> {
@@ -115,8 +103,4 @@ export class AuthService {
     this.userState.set(user);
     this.cookieService.set(AUTH_TOKEN_COOKIE_KEY, token);
   }
-
-  private isUnauthorizedError(error: unknown): error is HttpErrorResponse {
-    return error instanceof HttpErrorResponse && error.status === 401;
-  }
 }

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

@@ -24,7 +24,7 @@ export interface PurchaseSummaryResponse extends PurchaseStatusResponse {
 
 export interface PurchaseDetailAttributeResponse {
   name: string;
-  value: string | null;
+  value: string | number | boolean | null;
 }
 
 export interface PurchaseDetailItemResponse {
@@ -32,16 +32,15 @@ export interface PurchaseDetailItemResponse {
   quantity: number;
   unit_price: string;
   line_total: string;
-  product: {
+  source_catalog_item_id: number | null;
-    id: number;
+  source_variant_id: number | null;
+  item_details: {
     nombre: string;
+    descripcion: string | null;
     slug: string;
     imagen: string | null;
-  } | null;
-  variant: {
-    id: number;
     attributes: PurchaseDetailAttributeResponse[];
-  } | null;
+  };
 }
 
 export interface PurchaseDetailResponse extends PurchaseStatusResponse {
@@ -52,10 +51,11 @@ export interface PurchaseDetailResponse extends PurchaseStatusResponse {
   created_at: string | null;
   payment_method: string | null;
   dni: string | null;
+  transfer_payer_dni: string | null;
   telefono: string | null;
   nombre_apellido: string | null;
   email: string | null;
-  items_source: 'purchase' | 'cart' | null;
+  items_source: 'purchase';
   items: PurchaseDetailItemResponse[];
   subtotal: string;
   total: string;

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

@@ -23,12 +23,9 @@ export class CookieService {
     return null;
   }
 
-  set(name: string, value: string, days = 7): void {
+  set(name: string, value: string): void {
     if (isPlatformBrowser(this.platformId)) {
-      const date = new Date();
+      this.document.cookie = `${name}=${value};path=/;SameSite=Lax`;
-      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-      const expires = `expires=${date.toUTCString()}`;
-      this.document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax`;
     }
   }
 

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

@@ -1,37 +1,23 @@
 import '@angular/compiler';
 import { Component, inject } from '@angular/core';
 import { TestBed, getTestBed } from '@angular/core/testing';
-import {
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
-  BrowserTestingModule,
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
-import {
-  afterEach,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  vi
-} from 'vitest';
 import { firstValueFrom } from 'rxjs';
 
 import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
 import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
+import { QrModalComponent } from '../../shared/components/qr-modal/qr-modal.component';
 import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component';
-import {
+import { MODAL_DATA, ModalRef, ModalService } from './modal.service';
-  MODAL_DATA,
-  ModalRef,
-  ModalService
-} from './modal.service';
 
 @Component({
-  template: ''
+  template: '',
 })
 class FirstTestModalComponent {}
 
 @Component({
-  template: ''
+  template: '',
 })
 class SecondTestModalComponent {}
 
@@ -40,10 +26,7 @@ describe('ModalService', () => {
 
   beforeAll(() => {
     try {
-      getTestBed().initTestEnvironment(
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
-        BrowserTestingModule,
-        platformBrowserTesting()
-      );
     } catch {
       // Test environment may already be initialized by another setup entrypoint.
     }
@@ -55,7 +38,7 @@ describe('ModalService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ModalService]
+      providers: [ModalService],
     });
 
     service = TestBed.inject(ModalService);
@@ -66,7 +49,7 @@ describe('ModalService', () => {
       title: 'Confirmar compra',
       data: { productId: 10 },
       size: 'lg',
-      closeOnBackdrop: false
+      closeOnBackdrop: false,
     });
 
     const activeModal = service.activeModal();
@@ -80,7 +63,7 @@ describe('ModalService', () => {
       size: 'lg',
       closeOnBackdrop: false,
       closeOnEscape: true,
-      showCloseButton: true
+      showCloseButton: true,
     });
   });
 
@@ -115,7 +98,7 @@ describe('ModalService', () => {
     firstRef.afterClosed$.subscribe(firstClosedSpy);
 
     const secondRef = service.open(SecondTestModalComponent, {
-      title: 'Segundo modal'
+      title: 'Segundo modal',
     });
 
     expect(firstClosedSpy).toHaveBeenCalledWith(undefined);
@@ -126,7 +109,7 @@ describe('ModalService', () => {
 
   it('injects MODAL_DATA and ModalRef into opened components through the host injector contract', () => {
     const ref = service.open(DataTestModalComponent, {
-      data: { amount: 3 }
+      data: { amount: 3 },
     });
 
     const activeModal = service.activeModal();
@@ -138,7 +121,7 @@ describe('ModalService', () => {
   it('opens the standard confirm modal with default labels', () => {
     const result$ = service.openConfirm({
       title: 'Confirmar compra',
-      content: 'Esto confirmara la compra actual.'
+      content: 'Esto confirmara la compra actual.',
     });
 
     const activeModal = service.activeModal();
@@ -150,19 +133,19 @@ describe('ModalService', () => {
       data: {
         content: 'Esto confirmara la compra actual.',
         confirmLabel: 'Confirmar',
-        cancelLabel: 'Cancelar'
+        cancelLabel: 'Cancelar',
       },
       size: 'md',
       closeOnBackdrop: true,
       closeOnEscape: true,
-      showCloseButton: true
+      showCloseButton: true,
     });
   });
 
   it('maps the confirm modal close result to true', async () => {
     const result$ = service.openConfirm({
       title: 'Confirmar compra',
-      content: 'Esto confirmara la compra actual.'
+      content: 'Esto confirmara la compra actual.',
     });
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
@@ -175,7 +158,7 @@ describe('ModalService', () => {
   it('maps dismissing a confirm modal to false', async () => {
     const result$ = service.openConfirmDelete({
       title: 'Eliminar producto',
-      content: 'Se eliminara el producto.'
+      content: 'Se eliminara el producto.',
     });
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
@@ -194,7 +177,7 @@ describe('ModalService', () => {
       size: 'lg',
       closeOnBackdrop: false,
       closeOnEscape: false,
-      showCloseButton: false
+      showCloseButton: false,
     });
 
     const activeModal = service.activeModal();
@@ -205,19 +188,19 @@ describe('ModalService', () => {
       data: {
         content: 'Se eliminara el producto.',
         confirmLabel: 'Eliminar',
-        cancelLabel: 'Conservar'
+        cancelLabel: 'Conservar',
       },
       size: 'lg',
       closeOnBackdrop: false,
       closeOnEscape: false,
-      showCloseButton: false
+      showCloseButton: false,
     });
   });
 
   it('opens the simple modal with default button label', () => {
     service.openSimple({
       title: 'Aviso',
-      content: 'Este es un aviso simple.'
+      content: 'Este es un aviso simple.',
     });
 
     const activeModal = service.activeModal();
@@ -227,19 +210,19 @@ describe('ModalService', () => {
       title: 'Aviso',
       data: {
         content: 'Este es un aviso simple.',
-        buttonLabel: 'Entendido'
+        buttonLabel: 'Entendido',
       },
       size: 'md',
       closeOnBackdrop: true,
       closeOnEscape: true,
-      showCloseButton: true
+      showCloseButton: true,
     });
   });
 
   it('maps the simple modal close result to undefined', async () => {
     const result$ = service.openSimple({
       title: 'Aviso',
-      content: 'Este es un aviso simple.'
+      content: 'Este es un aviso simple.',
     });
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
@@ -248,10 +231,35 @@ describe('ModalService', () => {
 
     await expect(resultPromise).resolves.toBeUndefined();
   });
+
+  it('opens the QR modal with the ticket information and compact size', () => {
+    service.openQr({
+      title: 'Entrada general',
+      id: 42,
+      date: '09 de octubre',
+      ticket: 'ticket-payload',
+    });
+
+    const activeModal = service.activeModal();
+
+    expect(activeModal?.component).toBe(QrModalComponent);
+    expect(activeModal?.config).toEqual({
+      title: 'Entrada general',
+      data: {
+        id: 42,
+        date: '09 de octubre',
+        ticket: 'ticket-payload',
+      },
+      size: 'qr',
+      closeOnBackdrop: true,
+      closeOnEscape: true,
+      showCloseButton: true,
+    });
+  });
 });
 
 @Component({
-  template: ''
+  template: '',
 })
 class DataTestModalComponent {
   readonly data = inject(MODAL_DATA);

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

@@ -2,14 +2,11 @@ import { InjectionToken, Injectable, Type, signal } from '@angular/core';
 import { Observable, Subject, map } from 'rxjs';
 import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
 import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
+import { QrModalComponent } from '../../shared/components/qr-modal/qr-modal.component';
 import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component';
 
-export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type ModalSize = 'qr' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type ModalDismissReason =
+export type ModalDismissReason = 'backdrop' | 'escape' | 'programmatic' | 'replaced';
-  | 'backdrop'
-  | 'escape'
-  | 'programmatic'
-  | 'replaced';
 
 export interface ModalConfig<TData = unknown> {
   title?: string;
@@ -20,8 +17,7 @@ export interface ModalConfig<TData = unknown> {
   showCloseButton?: boolean;
 }
 
-export interface NormalizedModalConfig<TData = unknown>
+export interface NormalizedModalConfig<TData = unknown> extends Omit<
-  extends Omit<
   ModalConfig<TData>,
   'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
 > {
@@ -37,8 +33,7 @@ export interface ConfirmModalData {
   cancelLabel: string;
 }
 
-export interface ConfirmModalConfig
+export interface ConfirmModalConfig extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
-  extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
   content: string;
   confirmLabel?: string;
   cancelLabel?: string;
@@ -49,12 +44,24 @@ export interface SimpleModalData {
   buttonLabel: string;
 }
 
-export interface SimpleModalConfig
+export interface SimpleModalConfig extends Omit<ModalConfig<SimpleModalData>, 'data'> {
-  extends Omit<ModalConfig<SimpleModalData>, 'data'> {
   content: string;
   buttonLabel?: string;
 }
 
+export interface QrModalData {
+  id: string | number;
+  date: string;
+  ticket: string;
+}
+
+export interface QrModalConfig extends Omit<ModalConfig<QrModalData>, 'data' | 'title'> {
+  title: string;
+  id: string | number;
+  date: string;
+  ticket: string;
+}
+
 export interface ActiveModalState<TResult = unknown, TData = unknown> {
   component: Type<unknown>;
   config: NormalizedModalConfig<TData>;
@@ -70,25 +77,24 @@ const DEFAULT_MODAL_CONFIG: Pick<
   size: 'md',
   closeOnBackdrop: true,
   closeOnEscape: true,
-  showCloseButton: true
+  showCloseButton: true,
 };
 
 const DEFAULT_CONFIRM_MODAL_LABELS = {
   confirmLabel: 'Confirmar',
-  cancelLabel: 'Cancelar'
+  cancelLabel: 'Cancelar',
 } satisfies Pick<ConfirmModalData, 'confirmLabel' | 'cancelLabel'>;
 
 export class ModalRef<TResult = unknown> {
   private readonly afterClosedSubject = new Subject<TResult | undefined>();
   private closed = false;
 
-  readonly afterClosed$: Observable<TResult | undefined> =
+  readonly afterClosed$: Observable<TResult | undefined> = this.afterClosedSubject.asObservable();
-    this.afterClosedSubject.asObservable();
   readonly dismissReason = signal<ModalDismissReason | null>(null);
 
   constructor(
     private readonly closeHandler: (result?: TResult) => void,
-    private readonly dismissHandler: (reason: ModalDismissReason) => void
+    private readonly dismissHandler: (reason: ModalDismissReason) => void,
   ) {}
 
   close(result?: TResult): void {
@@ -120,7 +126,7 @@ export class ModalRef<TResult = unknown> {
 }
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ModalService {
   private readonly activeModalState = signal<ActiveModalState | null>(null);
@@ -128,35 +134,31 @@ export class ModalService {
 
   open<TComponent, TResult = unknown, TData = unknown>(
     component: Type<TComponent>,
-    config: ModalConfig<TData> = {}
+    config: ModalConfig<TData> = {},
   ): ModalRef<TResult> {
     this.activeModalState()?.ref.dismiss('replaced');
 
     let ref!: ModalRef<TResult>;
     ref = new ModalRef<TResult>(
       (result) => this.close(ref, result),
-      (reason) => this.dismiss(ref, reason)
+      (reason) => this.dismiss(ref, reason),
     );
 
     this.activeModalState.set({
       component,
       config: this.normalizeConfig(config),
-      ref: ref as ModalRef<unknown>
+      ref: ref as ModalRef<unknown>,
     });
 
     return ref;
   }
 
   openConfirm(config: ConfirmModalConfig): Observable<boolean> {
-    return this.openConfirmRef(config).afterClosed$.pipe(
+    return this.openConfirmRef(config).afterClosed$.pipe(map((result) => result === true));
-      map((result) => result === true)
-    );
   }
 
   openConfirmDelete(config: ConfirmModalConfig): Observable<boolean> {
-    return this.openConfirmDeleteRef(config).afterClosed$.pipe(
+    return this.openConfirmDeleteRef(config).afterClosed$.pipe(map((result) => result === true));
-      map((result) => result === true)
-    );
   }
 
   openConfirmRef(config: ConfirmModalConfig): ModalRef<boolean> {
@@ -164,23 +166,30 @@ export class ModalService {
   }
 
   openConfirmDeleteRef(config: ConfirmModalConfig): ModalRef<boolean> {
-    return this.open(
+    return this.open(ConfirmDeleteModalComponent, this.buildConfirmModalConfig(config));
-      ConfirmDeleteModalComponent,
-      this.buildConfirmModalConfig(config)
-    );
   }
 
   openSimple(config: SimpleModalConfig): Observable<void> {
-    return this.openSimpleRef(config).afterClosed$.pipe(
+    return this.openSimpleRef(config).afterClosed$.pipe(map(() => undefined));
-      map(() => undefined)
-    );
   }
 
   openSimpleRef(config: SimpleModalConfig): ModalRef<void> {
-    return this.open(
+    return this.open(SimpleModalComponent, this.buildSimpleModalConfig(config));
-      SimpleModalComponent,
+  }
-      this.buildSimpleModalConfig(config)
+
-    );
+  openQr(config: QrModalConfig): Observable<void> {
+    return this.openQrRef(config).afterClosed$.pipe(map(() => undefined));
+  }
+
+  openQrRef(config: QrModalConfig): ModalRef<void> {
+    const { title, id, date, ticket, size = 'qr', ...modalConfig } = config;
+
+    return this.open(QrModalComponent, {
+      ...modalConfig,
+      title,
+      size,
+      data: { id, date, ticket },
+    });
   }
 
   private close<TResult>(ref: ModalRef<TResult>, result?: TResult): void {
@@ -194,7 +203,7 @@ export class ModalService {
 
   private dismiss<TResult>(
     ref: ModalRef<TResult>,
-    reason: ModalDismissReason = 'programmatic'
+    reason: ModalDismissReason = 'programmatic',
   ): void {
     if (this.activeModalState()?.ref !== ref) {
       return;
@@ -204,18 +213,14 @@ export class ModalService {
     this.activeModalState.set(null);
   }
 
-  private normalizeConfig<TData>(
+  private normalizeConfig<TData>(config: ModalConfig<TData>): NormalizedModalConfig<TData> {
-    config: ModalConfig<TData>
-  ): NormalizedModalConfig<TData> {
     return {
       ...DEFAULT_MODAL_CONFIG,
-      ...config
+      ...config,
     };
   }
 
-  private buildConfirmModalConfig(
+  private buildConfirmModalConfig(config: ConfirmModalConfig): ModalConfig<ConfirmModalData> {
-    config: ConfirmModalConfig
-  ): ModalConfig<ConfirmModalData> {
     const {
       content,
       confirmLabel = DEFAULT_CONFIRM_MODAL_LABELS.confirmLabel,
@@ -228,26 +233,20 @@ export class ModalService {
       data: {
         content,
         confirmLabel,
-        cancelLabel
+        cancelLabel,
-      }
+      },
     };
   }
 
-  private buildSimpleModalConfig(
+  private buildSimpleModalConfig(config: SimpleModalConfig): ModalConfig<SimpleModalData> {
-    config: SimpleModalConfig
+    const { content, buttonLabel = 'Entendido', ...modalConfig } = config;
-  ): ModalConfig<SimpleModalData> {
-    const {
-      content,
-      buttonLabel = 'Entendido',
-      ...modalConfig
-    } = config;
 
     return {
       ...modalConfig,
       data: {
         content,
-        buttonLabel
+        buttonLabel,
-      }
+      },
     };
   }
 }

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -3,9 +3,7 @@
     <div class="card-body">
       <span class="eyebrow">Componentes reutilizables</span>
       <h1>Button + Input</h1>
-      <p class="lead mb-4">
+      <p class="lead mb-4">Pagina dedicada a probar variantes de los componentes compartidos.</p>
-        Pagina dedicada a probar variantes de los componentes compartidos.
-      </p>
 
       <div class="button-showcase">
         <div class="button-group">
@@ -26,9 +24,7 @@
             <app-button variant="secondary" [disabled]="true">Secondary</app-button>
 
             <app-button variant="danger" [disabled]="true">Danger</app-button>
-            <app-button variant="danger-secondary" [disabled]="true">
+            <app-button variant="danger-secondary" [disabled]="true"> Danger secondary </app-button>
-              Danger secondary
-            </app-button>
             <app-button variant="cancel" [disabled]="true">Cancel</app-button>
           </div>
         </div>
@@ -60,13 +56,8 @@
         <div class="button-group">
           <h2>Toasts Persistentes (No se van)</h2>
           <div class="button-grid">
-            <app-button (click)="triggerPersistentToast('info')">
+            <app-button (click)="triggerPersistentToast('info')"> Info Persistente </app-button>
-              Info Persistente
+            <app-button variant="secondary" (click)="triggerPersistentToast('success')">
-            </app-button>
-            <app-button
-              variant="secondary"
-              (click)="triggerPersistentToast('success')"
-            >
               Success Persistente
             </app-button>
             <app-button variant="danger" (click)="triggerPersistentToast('danger')">
@@ -91,9 +82,7 @@
             <app-button variant="danger-secondary" (click)="openWideModal()">
               Abrir modal ancho
             </app-button>
-            <app-button (click)="openSimpleModal()">
+            <app-button (click)="openSimpleModal()"> Abrir simple modal </app-button>
-              Abrir simple modal
-            </app-button>
           </div>
           <div class="modal-showcase__result" data-testid="modal-last-result">
             {{ lastModalResult }}
@@ -106,9 +95,9 @@
       <div class="icon-button-showcase">
         <h2>Icon Buttons</h2>
         <p class="text-muted mb-4">
-          Botones de icono pequenos con color base <code>#666666</code>,
+          Botones de icono pequenos con color base <code>#666666</code>, deshabilitados con
-          deshabilitados con <code>#A0A0A0</code> y estados hover/active con color
+          <code>#A0A0A0</code> y estados hover/active con color de marca (a excepcion de trash que
-          de marca (a excepcion de trash que usa danger).
+          usa danger).
         </p>
 
         <div class="icon-button-showcase__grid">
@@ -155,9 +144,7 @@
 
       <div class="icon-button-showcase mt-4">
         <h2>Cart Icons</h2>
-        <p class="text-muted mb-4">
+        <p class="text-muted mb-4">Icono de carrito con badge opcional indicando cantidad.</p>
-          Icono de carrito con badge opcional indicando cantidad.
-        </p>
 
         <div class="icon-button-showcase__grid">
           <div class="icon-button-showcase__row">
@@ -200,12 +187,7 @@
 
         <div class="input-field">
           <label for="number-input">Numero</label>
-          <app-input
+          <app-input id="number-input" type="number" placeholder="0" [(value)]="numberValue" />
-            id="number-input"
-            type="number"
-            placeholder="0"
-            [(value)]="numberValue"
-          />
         </div>
 
         <div class="input-field">
@@ -220,12 +202,7 @@
 
         <div class="input-field">
           <label for="user-input">Usuario</label>
-          <app-input
+          <app-input id="user-input" type="user" placeholder="Nombre de usuario" [(value)]="user" />
-            id="user-input"
-            type="user"
-            placeholder="Nombre de usuario"
-            [(value)]="user"
-          />
         </div>
 
         <div class="input-field">
@@ -250,22 +227,12 @@
 
         <div class="input-field">
           <label for="amount-input">Moneda</label>
-          <app-input
+          <app-input id="amount-input" type="currency" placeholder="0" [(value)]="amount" />
-            id="amount-input"
-            type="currency"
-            placeholder="0"
-            [(value)]="amount"
-          />
         </div>
 
         <div class="input-field">
           <label for="percent-input">Porcentaje</label>
-          <app-input
+          <app-input id="percent-input" type="percent" placeholder="0" [(value)]="percent" />
-            id="percent-input"
-            type="percent"
-            placeholder="0"
-            [(value)]="percent"
-          />
         </div>
 
         <div class="input-field">
@@ -313,9 +280,7 @@
             />
           </div>
 
-          <app-button variant="secondary" (click)="clearFile()">
+          <app-button variant="secondary" (click)="clearFile()"> Limpiar archivo </app-button>
-            Limpiar archivo
-          </app-button>
         </div>
       </div>
 
@@ -324,8 +289,7 @@
       <div class="paginator-showcase">
         <h2>Paginator</h2>
         <p class="text-muted mb-0">
-          Componente shared para navegar por paginas con primera, anterior,
+          Componente shared para navegar por paginas con primera, anterior, siguiente y ultima.
-          siguiente y ultima.
         </p>
         <app-paginator
           [page]="currentPage"
@@ -339,11 +303,11 @@
       <div class="stepper-showcase">
         <h2>Form Stepper</h2>
         <p class="text-muted mb-4">
-          Stepper vertical reutilizable. Cada paso maneja sus propios botones de navegacion. No se puede avanzar si el paso no es valido.
+          Stepper vertical reutilizable. Cada paso maneja sus propios botones de navegacion. No se
+          puede avanzar si el paso no es valido.
         </p>
 
         <app-stepper #demoStepper>
-
           <!-- Paso 1: Siempre valido -->
           <app-step label="Informacion Personal" [isValid]="true">
             <div class="row g-3">
@@ -353,7 +317,12 @@
               </div>
               <div class="col-md-6 input-field">
                 <label for="stepper-email">Email</label>
-                <app-input id="stepper-email" type="email" placeholder="mail@empresa.com" [(value)]="email" />
+                <app-input
+                  id="stepper-email"
+                  type="email"
+                  placeholder="mail@empresa.com"
+                  [(value)]="email"
+                />
               </div>
             </div>
             <div class="d-flex justify-content-end mt-4">
@@ -368,7 +337,12 @@
             <div class="row g-3">
               <div class="col-md-6 input-field">
                 <label for="stepper-password">Contraseña</label>
-                <app-input id="stepper-password" type="password-toggle" placeholder="********" [(value)]="password" />
+                <app-input
+                  id="stepper-password"
+                  type="password-toggle"
+                  placeholder="********"
+                  [(value)]="password"
+                />
               </div>
               <div class="col-md-6 input-field">
                 <label for="stepper-amount">Presupuesto mensual</label>
@@ -377,9 +351,7 @@
             </div>
 
             <div class="stepper-validity-control mt-3 d-flex align-items-center gap-3">
-              <span class="text-muted small">
+              <span class="text-muted small"> Simular validez del paso: </span>
-                Simular validez del paso:
-              </span>
               <app-button
                 [variant]="testStep2Valid ? 'secondary' : 'primary'"
                 (click)="testStep2Valid = !testStep2Valid"
@@ -418,7 +390,6 @@
               </app-button>
             </div>
           </app-step>
-
         </app-stepper>
       </div>
 
@@ -454,7 +425,6 @@
           </div>
         }
       </div>
-
     </div>
   </section>
 
@@ -610,8 +580,8 @@
       <h2 class="mb-4">Tarjetas de Producto (Column With Image)</h2>
 
       <p class="text-muted mb-4">
-        Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se
+        Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se presentan dentro
-        presentan dentro de una grilla de Bootstrap.
+        de una grilla de Bootstrap.
       </p>
 
       <div class="row">
@@ -636,9 +606,7 @@
       <span class="eyebrow">Reusable Component</span>
       <h2 class="mb-4">Tarjetas de Producto (Row Layout)</h2>
 
-      <p class="text-muted mb-4">
+      <p class="text-muted mb-4">Diseño horizontal que ocupa el 100% del ancho disponible.</p>
-        Diseño horizontal que ocupa el 100% del ancho disponible.
-      </p>
 
       <div class="row">
         <div class="col-12 mb-4 d-flex align-items-stretch">
@@ -678,10 +646,7 @@
     </div>
   </section>
 
-  <app-store-section
+  <app-store-section title="PRODUCTOS" class="component-demo store-section-demo mt-5">
-    title="PRODUCTOS"
-    class="component-demo store-section-demo mt-5"
-  >
     <div class="row">
       @for (product of testProducts; track product.title) {
         <div

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -1,18 +1,13 @@
 import { Component, inject } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import {
+import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
-  CartComponent,
-  CartItemMock
-} from '../../../../shared/components/cart/cart.component';
 import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
 import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
 import { ProductColumnWithImageComponent } from '../../../../shared/components/product-column-with-image/product-column-with-image.component';
 import { ProductRowCardComponent } from '../../../../shared/components/product-row-card/product-row-card.component';
-import {
+import { ProductVerticalWithCartCardComponent } from '../../../../shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component';
-  ProductVerticalWithCartCardComponent
-} from '../../../../shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import { ModalService } from '../../../../core/services/modal.service';
 import { TenantService } from '../../../../core/services/tenant.service';
@@ -34,10 +29,10 @@ import { StepComponent } from '../../../../shared/components/stepper/step.compon
     IconButtonComponent,
     CartIconComponent,
     StepperComponent,
-    StepComponent
+    StepComponent,
   ],
   templateUrl: './reutilizables-test-page.component.html',
-  styleUrl: './reutilizables-test-page.component.scss'
+  styleUrl: './reutilizables-test-page.component.scss',
 })
 export class ReutilizablesTestPageComponent {
   private readonly tenantService = inject(TenantService);
@@ -74,38 +69,39 @@ export class ReutilizablesTestPageComponent {
       originalPrice: 95000,
       discount: 20,
       transferPrice: 74800,
-      imageUrl: '/images/pantalon-scuba.png'
+      imageUrl: '/images/pantalon-scuba.png',
     },
     {
       title: 'Zapatillas de running azul',
       originalPrice: 120000,
       discount: 15,
       transferPrice: 98000,
-      imageUrl: '/images/zapatillas-running.png'
+      imageUrl: '/images/zapatillas-running.png',
     },
     {
       title: 'Remera basica blanca (Sin Descuento)',
       originalPrice: 32000,
       discount: null,
       transferPrice: 30000,
-      imageUrl: null
+      imageUrl: null,
-    }
+    },
   ];
 
   protected readonly testRowProduct = {
     title: 'ENTRADA GENERAL',
-    description: 'Acceso total al predio. No incluye acceso a estacionamiento. Niños menores de 5 años ingresan gratis.',
+    description:
+      'Acceso total al predio. No incluye acceso a estacionamiento. Niños menores de 5 años ingresan gratis.',
     price: 10000,
     variants: [
       { label: '10 de Octubre', value: '10-oct' },
-      { label: '11 de Octubre', value: '11-oct' }
+      { label: '11 de Octubre', value: '11-oct' },
-    ]
+    ],
   };
 
   protected readonly testVerticalWithCartProduct = {
     title: 'PANCHO',
     description: 'Pancho con aderezo a elección.',
-    price: 11500
+    price: 11500,
   };
 
   protected readonly cartMockItems: CartItemMock[] = [
@@ -118,8 +114,8 @@ export class ReutilizablesTestPageComponent {
       quantity: 1,
       attributes: [
         { label: 'Color', value: 'Beige' },
-        { label: 'Talle', value: 'S' }
+        { label: 'Talle', value: 'S' },
-      ]
+      ],
     },
     {
       imageUrl: null,
@@ -130,8 +126,8 @@ export class ReutilizablesTestPageComponent {
       quantity: 1,
       attributes: [
         { label: 'Color', value: 'Beige' },
-        { label: 'Talle', value: 'S' }
+        { label: 'Talle', value: 'S' },
-      ]
+      ],
     },
     {
       imageUrl: null,
@@ -142,8 +138,8 @@ export class ReutilizablesTestPageComponent {
       quantity: 1,
       attributes: [
         { label: 'Color', value: 'Negro' },
-        { label: 'Talle', value: 'XL' }
+        { label: 'Talle', value: 'XL' },
-      ]
+      ],
     },
     {
       imageUrl: null,
@@ -154,9 +150,9 @@ export class ReutilizablesTestPageComponent {
       quantity: 2,
       attributes: [
         { label: 'Color', value: 'Gris' },
-        { label: 'Talle', value: 'M' }
+        { label: 'Talle', value: 'M' },
-      ]
+      ],
-    }
+    },
   ];
 
   protected onProductBuy(productTitle: string): void {
@@ -184,45 +180,32 @@ export class ReutilizablesTestPageComponent {
 
   protected triggerToast(type: 'success' | 'danger' | 'info'): void {
     if (type === 'success') {
-      this.toastService.success(
+      this.toastService.success('Operacion exitosa. El producto se ha guardado correctamente.');
-        'Operacion exitosa. El producto se ha guardado correctamente.'
-      );
     } else if (type === 'danger') {
-      this.toastService.danger(
+      this.toastService.danger('Alerta de error. Hubo un problema al procesar la solicitud.');
-        'Alerta de error. Hubo un problema al procesar la solicitud.'
-      );
     } else if (type === 'info') {
-      this.toastService.info(
+      this.toastService.info('Informacion del sistema: Hay una nueva actualizacion disponible.');
-        'Informacion del sistema: Hay una nueva actualizacion disponible.'
-      );
     }
   }
 
   protected triggerPersistentToast(type: 'success' | 'danger' | 'info'): void {
     if (type === 'success') {
-      this.toastService.success(
+      this.toastService.success('Exito persistente. Esta alerta no se cerrara sola.', 0);
-        'Exito persistente. Esta alerta no se cerrara sola.',
-        0
-      );
     } else if (type === 'danger') {
       this.toastService.danger(
         'Error persistente. Por favor, atienda este problema y cierrelo manualmente.',
-        0
+        0,
       );
     } else if (type === 'info') {
-      this.toastService.info(
+      this.toastService.info('Informacion persistente: Mantendremos este aviso en pantalla.', 0);
-        'Informacion persistente: Mantendremos este aviso en pantalla.',
-        0
-      );
     }
   }
 
   protected openBasicModal(): void {
     this.openConfirmModal({
       title: 'Confirmar accion',
-      content:
+      content: 'Caso base para verificar apertura, cierre y devolucion de resultado.',
-        'Caso base para verificar apertura, cierre y devolucion de resultado.',
+      confirmLabel: 'Confirmar',
-      confirmLabel: 'Confirmar'
     });
   }
 
@@ -231,18 +214,17 @@ export class ReutilizablesTestPageComponent {
       title: 'Eliminar producto',
       content:
         'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.',
-      confirmLabel: 'Eliminar'
+      confirmLabel: 'Eliminar',
     });
   }
 
   protected openLockedModal(): void {
     this.openConfirmModal({
       title: 'Modal bloqueado',
-      content:
+      content: 'Este modal no se cierra tocando el backdrop ni con la tecla Escape.',
-        'Este modal no se cierra tocando el backdrop ni con la tecla Escape.',
       confirmLabel: 'Entendido',
       closeOnBackdrop: false,
-      closeOnEscape: false
+      closeOnEscape: false,
     });
   }
 
@@ -251,16 +233,18 @@ export class ReutilizablesTestPageComponent {
       title: 'Modal ancho',
       content: 'Demuestra una variante visual mas amplia para contenido mas pesado.',
       confirmLabel: 'Seguir',
-      size: 'xl'
+      size: 'xl',
     });
   }
 
   protected openSimpleModal(): void {
-    this.modalService.openSimple({
+    this.modalService
+      .openSimple({
         title: 'Mensaje del sistema',
         content: 'Este es un mensaje simple del sistema que no requiere confirmación.',
-      buttonLabel: 'Entendido'
+        buttonLabel: 'Entendido',
-    }).subscribe(() => {
+      })
+      .subscribe(() => {
         this.lastModalResult = 'Simple modal cerrado';
       });
   }
@@ -271,12 +255,9 @@ export class ReutilizablesTestPageComponent {
     });
   }
 
-  private openConfirmDelete(
+  private openConfirmDelete(config: Parameters<ModalService['openConfirmDelete']>[0]): void {
-    config: Parameters<ModalService['openConfirmDelete']>[0]
-  ): void {
     this.modalService.openConfirmDelete(config).subscribe((confirmed) => {
       this.lastModalResult = `Resultado: ${confirmed}`;
     });
   }
 }
-

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html

@@ -2,7 +2,10 @@
   <h2 class="sidebar-title">MI CUENTA</h2>
   <div class="divider"></div>
   <nav class="sidebar-nav">
-        <a routerLink="/mi-cuenta/datos-personales" routerLinkActive="active" class="nav-link">Datos Personales</a>
+    <a routerLink="/mi-cuenta/datos-personales" routerLinkActive="active" class="nav-link"
+      >Datos Personales</a
+    >
     <a routerLink="/mi-cuenta/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
+    <a routerLink="/mi-cuenta/tickets" routerLinkActive="active" class="nav-link">Mis tickets</a>
   </nav>
 </div>

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.html

@@ -1,15 +1,15 @@
-<article class="w-100 py-3 rounded-0 cart-item">
+<article class="w-100 py-3 rounded-0 cart-item" [class.cart-item--without-image]="!item.imageUrl">
+  @if (item.imageUrl) {
     <div class="position-relative overflow-hidden cart-item-media">
       @if (item.discountPercentage) {
-      <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ item.discountPercentage }}%</span>
+        <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge"
+          >-{{ item.discountPercentage }}%</span
+        >
       }
 
-    @if (item.imageUrl) {
       <img class="w-100 h-100 object-fit-cover d-block" [src]="item.imageUrl" [alt]="item.title" />
-    } @else {
-      <div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
-    }
     </div>
+  }
 
   <div class="d-flex flex-column justify-content-between w-100 h-100 py-1 cart-item-content">
     <div class="d-grid cart-item-top-row align-items-start">
@@ -17,19 +17,24 @@
 
       <div class="cart-item-prices">
         @if (item.originalPrice) {
-          <span class="text-decoration-line-through cart-item-original-price">$ {{ item.originalPrice }}</span>
+          <span class="text-decoration-line-through cart-item-original-price"
+            >$ {{ item.originalPrice }}</span
+          >
         }
         <span class="fw-bold cart-item-discounted-price">$ {{ item.price }}</span>
       </div>
     </div>
 
+    @if (item.imageUrl) {
       <div
         class="d-grid cart-item-attributes"
         [class.cart-item-attributes--quantity-only]="item.attributes.length === 0"
       >
         <div class="cart-item-attribute">
           <span class="cart-item-attribute-label">Cantidad: </span>
-        <span class="fw-bold">{{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }}</span>
+          <span class="fw-bold"
+            >{{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }}</span
+          >
         </div>
 
         @for (attribute of item.attributes; track attribute.label + attribute.value) {
@@ -46,5 +51,24 @@
           <span class="fw-bold">${{ item.transferPrice }}</span>
         </div>
       }
+    } @else {
+      <p class="m-0 cart-item-description">{{ item.description }}</p>
+
+      <div class="d-grid cart-item-bottom-details">
+        @for (attribute of item.attributes; track attribute.label + attribute.value) {
+          <div class="cart-item-attribute">
+            <span class="cart-item-attribute-label">{{ attribute.label }}: </span>
+            <span class="fw-bold">{{ attribute.value }}</span>
+          </div>
+        }
+
+        <div class="cart-item-attribute">
+          <span class="cart-item-attribute-label">Cantidad: </span>
+          <span class="fw-bold"
+            >{{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }}</span
+          >
+        </div>
+      </div>
+    }
   </div>
 </article>

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss

@@ -13,6 +13,10 @@
   gap: 0.75rem;
   background-color: transparent;
   position: relative;
+
+  &--without-image {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
 .cart-item-media {
@@ -44,12 +48,6 @@
   line-height: 1;
 }
 
-.cart-item-placeholder {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
-}
-
 .cart-item-content {
   gap: 0.5rem;
 }
@@ -116,3 +114,16 @@
   display: grid;
   justify-items: end;
 }
+
+.cart-item-description {
+  color: #666666;
+  font-size: 9px;
+  font-weight: 325;
+  line-height: 1.35;
+  white-space: pre-line;
+}
+
+.cart-item-bottom-details {
+  gap: 0.125rem;
+  justify-items: end;
+}

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.spec.ts

@@ -0,0 +1,68 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { PurchaseItem, PurchaseItemViewModel } from './purchase-item';
+
+describe('PurchaseItem', () => {
+  let fixture: ComponentFixture<PurchaseItem>;
+
+  const item: PurchaseItemViewModel = {
+    id: 1,
+    title: 'Entrada general',
+    description: 'Acceso al evento durante toda la jornada.',
+    imageUrl: null,
+    quantity: 2,
+    attributes: [{ label: 'Turno', value: 'Tarde' }],
+    price: '20000.00',
+    transferPrice: '18000.00',
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [PurchaseItem] }).compileComponents();
+    fixture = TestBed.createComponent(PurchaseItem);
+  });
+
+  it('uses the image-free layout and moves description and item details', () => {
+    fixture.componentInstance.item = item;
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(
+      element.querySelector('.cart-item')?.classList.contains('cart-item--without-image'),
+    ).toBe(true);
+    expect(element.querySelector('.cart-item-media')).toBeNull();
+    expect(element.querySelector('.cart-item-description')?.textContent?.trim()).toBe(
+      item.description,
+    );
+    expect(element.querySelector('.cart-item-bottom-details')?.textContent).toContain(
+      'Turno: Tarde',
+    );
+    expect(element.querySelector('.cart-item-bottom-details')?.textContent).toContain(
+      'Cantidad: 2 unidades',
+    );
+    expect(element.querySelector('.cart-item-transfer-price')).toBeNull();
+  });
+
+  it('keeps the existing layout when the product has an image', () => {
+    fixture.componentInstance.item = {
+      ...item,
+      imageUrl: 'https://example.com/product.png',
+    };
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(
+      element.querySelector('.cart-item')?.classList.contains('cart-item--without-image'),
+    ).toBe(false);
+    expect(element.querySelector('.cart-item-media img')).not.toBeNull();
+    expect(element.querySelector('.cart-item-description')).toBeNull();
+    expect(element.querySelector('.cart-item-attributes')?.textContent).toContain(
+      'Cantidad: 2 unidades',
+    );
+    expect(element.querySelector('.cart-item-transfer-price')?.textContent).toContain(
+      'Precio por transferencia',
+    );
+  });
+});

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.ts

@@ -3,6 +3,7 @@ import { Component, Input } from '@angular/core';
 export type PurchaseItemViewModel = {
   id: number;
   title: string;
+  description: string | null;
   imageUrl: string | null;
   quantity: number;
   attributes: Array<{

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts

@@ -2,7 +2,10 @@ import { CommonModule } from '@angular/common';
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
-import { CheckoutService, PurchaseDetailResponse } from '../../../../../../core/services/checkout.service';
+import {
+  CheckoutService,
+  PurchaseDetailResponse,
+} from '../../../../../../core/services/checkout.service';
 import { TenantService } from '../../../../../../core/services/tenant.service';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { PurchaseItem, PurchaseItemViewModel } from '../../components/purchase-item/purchase-item';
@@ -79,12 +82,13 @@ export class PurchaseDetailPage implements OnInit {
   private mapItems(purchase: PurchaseDetailResponse): PurchaseItemViewModel[] {
     return purchase.items.map((item) => ({
       id: item.id,
-      title: item.product?.nombre ?? 'Producto sin nombre',
+      title: item.item_details.nombre || 'Producto sin nombre',
-      imageUrl: item.product?.imagen ?? null,
+      description: item.item_details.descripcion,
+      imageUrl: item.item_details.imagen,
       quantity: item.quantity,
-      attributes: (item.variant?.attributes ?? []).map((attribute) => ({
+      attributes: item.item_details.attributes.map((attribute) => ({
         label: attribute.name,
-        value: attribute.value,
+        value: attribute.value === null ? null : String(attribute.value),
       })),
       price: item.line_total,
       originalPrice: null,

src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.html

@@ -0,0 +1,49 @@
+<article class="ticket" [class.ticket--disabled]="disabled()" [attr.aria-disabled]="disabled()">
+  @if (!disabled()) {
+    <label class="ticket__selection">
+      <input
+        type="checkbox"
+        [checked]="selected()"
+        (change)="selected.set($any($event.target).checked)"
+      />
+      <span class="visually-hidden">Seleccionar ticket {{ title() }}</span>
+    </label>
+  }
+
+  <div class="ticket__details">
+    <h3 class="ticket__title">{{ title() }}</h3>
+    <p class="ticket__id">ID: {{ ticketId() }}</p>
+  </div>
+
+  @if (date() || expired()) {
+    <div class="ticket__status">
+      @if (expired()) {
+        <span class="ticket__expired">VENCIDO</span>
+      }
+      @if (date(); as ticketDate) {
+        <time class="ticket__date">{{ ticketDate }}</time>
+      }
+    </div>
+  }
+
+  <div class="ticket__actions">
+    <app-button
+      variant="primary"
+      buttonClass="ticket__qr-button"
+      [disabled]="disabled()"
+      (click)="viewQr.emit()"
+    >
+      <i class="fa-solid fa-qrcode" aria-hidden="true"></i>
+      <span>Ver QR</span>
+    </app-button>
+
+    @if (!disabled()) {
+      <app-icon-button
+        variant="download"
+        ariaLabel="Descargar ticket"
+        (clicked)="download.emit()"
+      />
+      <app-icon-button variant="share" ariaLabel="Compartir ticket" (clicked)="share.emit()" />
+    }
+  </div>
+</article>

src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.scss

@@ -0,0 +1,132 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.ticket {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) 78px auto;
+  align-items: center;
+  width: 100%;
+  min-height: 76px;
+  gap: 16px;
+  padding: 16px 0;
+  color: #666666;
+}
+
+.ticket__selection {
+  display: flex;
+  margin: 0;
+  cursor: pointer;
+}
+
+.ticket__selection input {
+  width: 21px;
+  height: 21px;
+  margin: 0;
+  accent-color: var(--tenant-primary, #009933);
+  cursor: pointer;
+}
+
+.ticket__details {
+  min-width: 0;
+}
+
+.ticket__title,
+.ticket__id {
+  overflow: hidden;
+  margin: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ticket__title {
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.25;
+  text-transform: uppercase;
+}
+
+.ticket__id {
+  margin-top: 3px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.ticket__date {
+  display: block;
+  font-size: 10px;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.ticket__status {
+  text-align: center;
+}
+
+.ticket__expired {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.ticket__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+:host ::ng-deep button.ticket__qr-button {
+  width: 115px;
+  min-width: 0;
+  max-width: 115px;
+  min-height: 36px;
+  padding-inline: 14px;
+}
+
+.ticket--disabled {
+  grid-template-columns: minmax(0, 1fr) 78px auto;
+  color: #8a8a8a;
+}
+
+:host ::ng-deep .ticket--disabled button.ticket__qr-button:disabled {
+  --bs-btn-disabled-bg: #8a8a8a;
+  --bs-btn-disabled-border-color: #8a8a8a;
+  --bs-btn-disabled-color: #ffffff;
+  --bs-btn-disabled-opacity: 1;
+}
+
+.ticket__selection input:focus-visible {
+  outline: 2px solid var(--tenant-primary, #009933);
+  outline-offset: 2px;
+}
+
+@media (max-width: 767.98px) {
+  .ticket {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 10px;
+  }
+
+  .ticket__status {
+    grid-column: 2;
+  }
+
+  .ticket__actions {
+    grid-column: 3;
+    grid-row: 1 / span 2;
+  }
+
+  .ticket--disabled {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .ticket--disabled .ticket__status {
+    grid-column: 1;
+  }
+
+  .ticket--disabled .ticket__actions {
+    grid-column: 2;
+  }
+}

src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.spec.ts

@@ -0,0 +1,64 @@
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it, vi } from 'vitest';
+
+import { TicketComponent } from './ticket.component';
+
+describe('TicketComponent', () => {
+  it('renders its data and emits its actions', async () => {
+    await TestBed.configureTestingModule({ imports: [TicketComponent] }).compileComponents();
+
+    const fixture = TestBed.createComponent(TicketComponent);
+    fixture.componentRef.setInput('title', 'ENTRADA GENERAL');
+    fixture.componentRef.setInput('ticketId', '0000000000');
+    fixture.componentRef.setInput('date', '09 de octubre');
+
+    const viewQr = vi.fn();
+    const download = vi.fn();
+    const share = vi.fn();
+    fixture.componentInstance.viewQr.subscribe(viewQr);
+    fixture.componentInstance.download.subscribe(download);
+    fixture.componentInstance.share.subscribe(share);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    expect(element.textContent).toContain('ENTRADA GENERAL');
+    expect(element.textContent).toContain('ID: 0000000000');
+
+    element.querySelector<HTMLButtonElement>('app-button button')?.click();
+    element.querySelector<HTMLButtonElement>('[aria-label="Descargar ticket"]')?.click();
+    element.querySelector<HTMLButtonElement>('[aria-label="Compartir ticket"]')?.click();
+
+    expect(viewQr).toHaveBeenCalledOnce();
+    expect(download).toHaveBeenCalledOnce();
+    expect(share).toHaveBeenCalledOnce();
+  });
+
+  it('renders the expired disabled state without secondary actions', async () => {
+    await TestBed.configureTestingModule({ imports: [TicketComponent] }).compileComponents();
+
+    const fixture = TestBed.createComponent(TicketComponent);
+    fixture.componentRef.setInput('ticketId', '0000000000');
+    fixture.componentRef.setInput('date', '09 de octubre');
+    fixture.componentRef.setInput('disabled', true);
+    fixture.componentRef.setInput('expired', true);
+
+    const viewQr = vi.fn();
+    fixture.componentInstance.viewQr.subscribe(viewQr);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const ticket = element.querySelector<HTMLElement>('.ticket');
+    const qrButton = element.querySelector<HTMLButtonElement>('app-button button');
+
+    expect(ticket?.classList.contains('ticket--disabled')).toBe(true);
+    expect(ticket?.getAttribute('aria-disabled')).toBe('true');
+    expect(element.textContent).toContain('VENCIDO');
+    expect(qrButton?.disabled).toBe(true);
+    expect(element.querySelector('[aria-label="Descargar ticket"]')).toBeNull();
+    expect(element.querySelector('[aria-label="Compartir ticket"]')).toBeNull();
+    expect(element.querySelector('input[type="checkbox"]')).toBeNull();
+
+    qrButton?.click();
+    expect(viewQr).not.toHaveBeenCalled();
+  });
+});

src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
+
+import { ButtonComponent } from '../../../../../../../../shared/components/button/button.component';
+import { IconButtonComponent } from '../../../../../../../../shared/components/icon-button/icon-button.component';
+
+@Component({
+  selector: 'app-ticket',
+  imports: [ButtonComponent, IconButtonComponent],
+  templateUrl: './ticket.component.html',
+  styleUrl: './ticket.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TicketComponent {
+  readonly title = input('ENTRADA GENERAL');
+  readonly ticketId = input.required<string | number>();
+  readonly date = input<string | null>(null);
+  readonly disabled = input(false);
+  readonly expired = input(false);
+  readonly selected = model(false);
+
+  readonly viewQr = output<void>();
+  readonly download = output<void>();
+  readonly share = output<void>();
+}

src/app/features/store/pages/account-page/pages/tickets-page/ticket.service.ts

@@ -0,0 +1,33 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+
+import { TenantService } from '../../../../../../core/services/tenant.service';
+
+export interface TicketResponse {
+  id: number;
+  tenant_code: string;
+  ticket: string;
+  name: string;
+  description: string | null;
+  source_catalog_item_id: number | null;
+  source_variant_id: number | null;
+  starts_at: string | null;
+  expires_at: string | null;
+  used_at: string | null;
+  is_valid: boolean;
+  is_expired: boolean;
+  is_used: boolean;
+}
+
+@Injectable()
+export class TicketService {
+  private readonly http = inject(HttpClient);
+  private readonly tenantService = inject(TenantService);
+
+  getTickets(): Promise<TicketResponse[]> {
+    return firstValueFrom(
+      this.http.get<{ data: TicketResponse[] }>(`${this.tenantService.getTenantApiUrl()}/tickets`),
+    ).then((response) => response.data ?? []);
+  }
+}

src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.html

@@ -0,0 +1,65 @@
+<section class="tickets-page">
+  <h1 class="tickets-page__title">MIS TICKETS</h1>
+
+  <div class="tickets-list" aria-busy="{{ isLoading() }}">
+    <header class="tickets-list__header">
+      <label class="tickets-list__select-all">
+        <input
+          type="checkbox"
+          [checked]="allSelected()"
+          [disabled]="activeTickets().length === 0"
+          (change)="toggleAll($any($event.target).checked)"
+        />
+        <span>TICKETS ACTIVOS</span>
+      </label>
+
+      <div class="tickets-list__bulk-actions">
+        <span class="tickets-list__bulk-action">
+          <app-icon-button variant="download" ariaLabel="Descargar tickets seleccionados" />
+          <small>Descargar</small>
+        </span>
+        <span class="tickets-list__bulk-action">
+          <app-icon-button variant="share" ariaLabel="Compartir tickets seleccionados" />
+          <small>Compartir</small>
+        </span>
+      </div>
+    </header>
+
+    @if (isLoading()) {
+      @for (item of [1, 2, 3, 4]; track item) {
+        <div class="tickets-list__skeleton" aria-hidden="true"></div>
+      }
+    } @else if (tickets().length) {
+      @for (ticket of activeTickets(); track ticket.id) {
+        <app-ticket
+          [title]="ticket.name"
+          [ticketId]="ticket.id"
+          [date]="formatDate(ticket)"
+          [selected]="isSelected(ticket.id)"
+          (selectedChange)="toggleTicket(ticket.id, $event)"
+          (viewQr)="viewQr(ticket)"
+        />
+      }
+
+      @if (inactiveTickets().length) {
+        <section class="tickets-list__inactive" aria-labelledby="inactive-tickets-title">
+          <header class="tickets-list__header tickets-list__header--inactive">
+            <h2 id="inactive-tickets-title">TICKETS INACTIVOS</h2>
+          </header>
+
+          @for (ticket of inactiveTickets(); track ticket.id) {
+            <app-ticket
+              [title]="ticket.name"
+              [ticketId]="ticket.id"
+              [date]="formatDate(ticket)"
+              [disabled]="true"
+              [expired]="ticket.is_expired"
+            />
+          }
+        </section>
+      }
+    } @else {
+      <p class="tickets-list__empty">Aún no tenés tickets disponibles.</p>
+    }
+  </div>
+</section>

src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss

@@ -0,0 +1,96 @@
+.tickets-page {
+  width: 100%;
+  max-width: 720px;
+}
+
+.tickets-page__title {
+  margin: 0 0 20px;
+  color: #a0a0a0;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.tickets-list__header {
+  display: flex;
+  min-height: 58px;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #dddddd;
+}
+
+.tickets-list__header--inactive {
+  justify-content: flex-start;
+}
+
+.tickets-list__header--inactive h2 {
+  margin: 0;
+  color: #a0a0a0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.tickets-list__inactive {
+  margin-top: 44px;
+}
+
+.tickets-list__select-all {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 0;
+  color: #a0a0a0;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.tickets-list__select-all input {
+  width: 21px;
+  height: 21px;
+  margin: 0;
+  accent-color: var(--tenant-primary, #009933);
+}
+
+.tickets-list__bulk-actions {
+  display: flex;
+  gap: 18px;
+}
+
+.tickets-list__bulk-action {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #a0a0a0;
+  font-size: 11px;
+}
+
+.tickets-list app-ticket {
+  border-bottom: 1px solid #dddddd;
+}
+
+.tickets-list__empty {
+  padding: 32px 0;
+  color: #666666;
+  text-align: center;
+}
+
+.tickets-list__skeleton {
+  height: 77px;
+  border-bottom: 1px solid #dddddd;
+  background: linear-gradient(90deg, transparent, #f3f3f3, transparent);
+  background-size: 200% 100%;
+  animation: loading 1.4s infinite;
+}
+
+@keyframes loading {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .tickets-page__title {
+    margin-top: 24px;
+  }
+}

src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.spec.ts

@@ -0,0 +1,118 @@
+import { By } from '@angular/platform-browser';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { ModalService } from '../../../../../../core/services/modal.service';
+import { TicketComponent } from './components/ticket/ticket.component';
+import { TicketResponse, TicketService } from './ticket.service';
+import { TicketsPage } from './tickets-page';
+
+const ticket = (overrides: Partial<TicketResponse>): TicketResponse => ({
+  id: 1,
+  tenant_code: 'tenant',
+  ticket: 'ticket-1',
+  name: 'Entrada general',
+  description: null,
+  source_catalog_item_id: null,
+  source_variant_id: null,
+  starts_at: '2026-10-09T00:00:00.000Z',
+  expires_at: null,
+  used_at: null,
+  is_valid: true,
+  is_expired: false,
+  is_used: false,
+  ...overrides,
+});
+
+describe('TicketsPage', () => {
+  it('separates expired and used tickets into the disabled inactive list', async () => {
+    const tickets = [
+      ticket({ id: 1 }),
+      ticket({ id: 2, is_valid: false, is_expired: true }),
+      ticket({ id: 3, is_valid: false, is_used: true, used_at: '2026-10-10T00:00:00.000Z' }),
+    ];
+
+    await TestBed.configureTestingModule({
+      imports: [TicketsPage],
+      providers: [{ provide: ToastService, useValue: { danger: vi.fn() } }],
+    })
+      .overrideComponent(TicketsPage, {
+        set: {
+          providers: [
+            { provide: TicketService, useValue: { getTickets: () => Promise.resolve(tickets) } },
+          ],
+        },
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(TicketsPage);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const ticketComponents = fixture.debugElement.queryAll(By.directive(TicketComponent));
+    const [activeTicket, expiredTicket, usedTicket] = ticketComponents.map(
+      (element) => element.componentInstance as TicketComponent,
+    );
+
+    expect(ticketComponents).toHaveLength(3);
+    expect(activeTicket.disabled()).toBe(false);
+    expect(expiredTicket.disabled()).toBe(true);
+    expect(expiredTicket.expired()).toBe(true);
+    expect(usedTicket.disabled()).toBe(true);
+    expect(usedTicket.expired()).toBe(false);
+    expect(fixture.nativeElement.textContent).toContain('TICKETS INACTIVOS');
+
+    const page = fixture.nativeElement as HTMLElement;
+    const inactiveElements = Array.from(
+      page.querySelectorAll<HTMLElement>('.tickets-list__inactive app-ticket'),
+    );
+    expect(inactiveElements).toHaveLength(2);
+    inactiveElements.forEach((element) => {
+      expect(element.querySelector('.ticket--disabled')).not.toBeNull();
+      expect(element.querySelector<HTMLButtonElement>('app-button button')?.disabled).toBe(true);
+      expect(element.querySelector('input[type="checkbox"]')).toBeNull();
+      expect(element.querySelector('[aria-label="Descargar ticket"]')).toBeNull();
+      expect(element.querySelector('[aria-label="Compartir ticket"]')).toBeNull();
+    });
+  });
+
+  it('opens the QR modal with the selected ticket data', async () => {
+    const modalService = { openQr: vi.fn() };
+
+    await TestBed.configureTestingModule({
+      imports: [TicketsPage],
+      providers: [
+        { provide: ToastService, useValue: { danger: vi.fn() } },
+        { provide: ModalService, useValue: modalService },
+      ],
+    })
+      .overrideComponent(TicketsPage, {
+        set: {
+          providers: [
+            {
+              provide: TicketService,
+              useValue: { getTickets: () => Promise.resolve([ticket({})]) },
+            },
+          ],
+        },
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(TicketsPage);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const page = fixture.nativeElement as HTMLElement;
+    page.querySelector<HTMLButtonElement>('app-ticket app-button button')?.click();
+
+    expect(modalService.openQr).toHaveBeenCalledWith({
+      title: 'Entrada general',
+      id: 1,
+      date: '09-octubre',
+      ticket: 'ticket-1',
+    });
+  });
+});

src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.ts

@@ -0,0 +1,89 @@
+import { Component, computed, inject, OnInit, signal } from '@angular/core';
+
+import { ModalService } from '../../../../../../core/services/modal.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
+import { TicketComponent } from './components/ticket/ticket.component';
+import { TicketResponse, TicketService } from './ticket.service';
+
+@Component({
+  selector: 'app-tickets-page',
+  imports: [IconButtonComponent, TicketComponent],
+  providers: [TicketService],
+  templateUrl: './tickets-page.html',
+  styleUrl: './tickets-page.scss',
+})
+export class TicketsPage implements OnInit {
+  private readonly ticketService = inject(TicketService);
+  private readonly toastService = inject(ToastService);
+  private readonly modalService = inject(ModalService);
+
+  protected readonly tickets = signal<TicketResponse[]>([]);
+  protected readonly activeTickets = computed(() =>
+    this.tickets().filter((ticket) => !this.isInactive(ticket)),
+  );
+  protected readonly inactiveTickets = computed(() =>
+    this.tickets().filter((ticket) => this.isInactive(ticket)),
+  );
+  protected readonly selectedIds = signal<Set<number>>(new Set());
+  protected readonly isLoading = signal(true);
+  protected readonly allSelected = computed(
+    () =>
+      this.activeTickets().length > 0 && this.selectedIds().size === this.activeTickets().length,
+  );
+
+  async ngOnInit(): Promise<void> {
+    try {
+      this.tickets.set(await this.ticketService.getTickets());
+    } catch {
+      this.toastService.danger('Hubo un error al cargar los tickets');
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  protected toggleAll(selected: boolean): void {
+    this.selectedIds.set(
+      selected ? new Set(this.activeTickets().map((ticket) => ticket.id)) : new Set(),
+    );
+  }
+
+  protected toggleTicket(ticketId: number, selected: boolean): void {
+    this.selectedIds.update((current) => {
+      const next = new Set(current);
+      selected ? next.add(ticketId) : next.delete(ticketId);
+      return next;
+    });
+  }
+
+  protected isSelected(ticketId: number): boolean {
+    return this.selectedIds().has(ticketId);
+  }
+
+  protected isInactive(ticket: TicketResponse): boolean {
+    return ticket.is_expired || ticket.is_used;
+  }
+
+  protected formatDate(ticket: TicketResponse): string | null {
+    const value = ticket.starts_at ?? ticket.expires_at;
+    if (!value) return null;
+
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return null;
+
+    return new Intl.DateTimeFormat('es-AR', {
+      day: '2-digit',
+      month: 'long',
+      timeZone: 'UTC',
+    }).format(date);
+  }
+
+  protected viewQr(ticket: TicketResponse): void {
+    this.modalService.openQr({
+      title: ticket.name,
+      id: ticket.id,
+      date: this.formatDate(ticket) ?? '',
+      ticket: ticket.ticket,
+    });
+  }
+}

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

@@ -19,11 +19,15 @@
             [transferDni]="transferDni()"
             [isGeneratingIntent]="isPaymentLoading()"
             [qrData]="qrData()"
+            [qrPaymentStatus]="qrPaymentStatus()"
+            [isCheckingQrPayment]="isCheckingQrPayment()"
+            [transferValidationStatus]="transferValidationStatus()"
             (paymentMethodChange)="selectPaymentMethod($event)"
             (copyTransferValue)="copyTransferValue($event.field, $event.value)"
             (cancelStep)="onCancel()"
             (generateTransferIntent)="generateTransferIntent($event)"
             (complete)="onComplete()"
+            (retryQrPolling)="retryQrPolling()"
           />
         </app-step>
       </app-stepper>

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

@@ -0,0 +1,200 @@
+import { signal } from '@angular/core';
+import { getTestBed, TestBed } from '@angular/core/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { AuthService } from '../../../../core/services/auth/auth.service';
+import { CartService } from '../../../../core/services/cart/cart.service';
+import { CheckoutService } from '../../../../core/services/checkout.service';
+import { TenantService } from '../../../../core/services/tenant.service';
+import { CheckoutPageComponent } from './checkout-page.component';
+
+describe('CheckoutPageComponent payment validation', () => {
+  let checkoutServiceStub: {
+    generatePaymentIntent: ReturnType<typeof vi.fn>;
+    getPurchase: ReturnType<typeof vi.fn>;
+  };
+  let cartServiceStub: {
+    cart: ReturnType<typeof signal>;
+    isUpdating: ReturnType<typeof signal<boolean>>;
+    loadCart: ReturnType<typeof vi.fn>;
+    clearCart: ReturnType<typeof vi.fn>;
+  };
+  let routerStub: { navigate: ReturnType<typeof vi.fn> };
+
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  beforeEach(async () => {
+    vi.useFakeTimers();
+
+    checkoutServiceStub = {
+      generatePaymentIntent: vi.fn().mockResolvedValue({
+        qr_data: { qr_code: 'qr-value' },
+      }),
+      getPurchase: vi.fn().mockResolvedValue({ status: 'pending_payment' }),
+    };
+    cartServiceStub = {
+      cart: signal({
+        id: 10,
+        tenant_codigo: 'tenant-test',
+        status: 'active',
+        items: [],
+        subtotal: '0.00',
+      }),
+      isUpdating: signal(false),
+      loadCart: vi.fn().mockReturnValue(of({})),
+      clearCart: vi.fn(),
+    };
+    cartServiceStub.clearCart.mockImplementation(() => {
+      cartServiceStub.cart.set({
+        id: null,
+        tenant_codigo: 'tenant-test',
+        status: 'active',
+        items: [],
+        subtotal: '0.00',
+      });
+    });
+    routerStub = { navigate: vi.fn() };
+
+    await TestBed.configureTestingModule({
+      imports: [CheckoutPageComponent],
+      providers: [
+        { provide: CheckoutService, useValue: checkoutServiceStub },
+        { provide: CartService, useValue: cartServiceStub },
+        { provide: TenantService, useValue: { tenant: signal({ codigo: 'tenant-test' }) } },
+        { provide: AuthService, useValue: { user: signal(null) } },
+        { provide: Router, useValue: routerStub },
+      ],
+    })
+      .overrideComponent(CheckoutPageComponent, { set: { template: '' } })
+      .compileComponents();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    TestBed.resetTestingModule();
+  });
+
+  function createComponent(): any {
+    const fixture = TestBed.createComponent(CheckoutPageComponent);
+    fixture.detectChanges();
+    fixture.componentInstance['createdPurchaseId'].set(25);
+    return { fixture, component: fixture.componentInstance as any };
+  }
+
+  it('polls QR after five seconds and navigates only when payment is paid', async () => {
+    checkoutServiceStub.getPurchase
+      .mockResolvedValueOnce({ status: 'pending_payment' })
+      .mockResolvedValueOnce({ status: 'paid' });
+    const { component } = createComponent();
+
+    await component.selectPaymentMethod('qr');
+    expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
+
+    await vi.advanceTimersByTimeAsync(5_000);
+    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
+    expect(routerStub.navigate).not.toHaveBeenCalled();
+
+    await vi.advanceTimersByTimeAsync(5_000);
+    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(2);
+    expect(cartServiceStub.clearCart).toHaveBeenCalledOnce();
+    expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
+    expect(checkoutServiceStub.generatePaymentIntent).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows the QR verification state while each status request is in progress', async () => {
+    let resolvePurchase!: (purchase: { status: string }) => void;
+    checkoutServiceStub.getPurchase.mockReturnValue(
+      new Promise((resolve) => {
+        resolvePurchase = resolve;
+      }),
+    );
+    const { fixture, component } = createComponent();
+
+    const statusRequest = component.checkQrPayment(component.qrPollingRunId);
+    expect(component.isCheckingQrPayment()).toBe(true);
+
+    resolvePurchase({ status: 'pending_payment' });
+    await statusRequest;
+    expect(component.isCheckingQrPayment()).toBe(false);
+    fixture.destroy();
+  });
+
+  it('stops QR polling after five minutes and can restart it', async () => {
+    const { component } = createComponent();
+
+    await component.selectPaymentMethod('qr');
+    await vi.advanceTimersByTimeAsync(300_000);
+
+    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(60);
+    expect(component.qrPaymentStatus()).toBe('timed_out');
+
+    component.retryQrPolling();
+    expect(component.qrPaymentStatus()).toBe('waiting');
+    await vi.advanceTimersByTimeAsync(5_000);
+    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(61);
+  });
+
+  it('cancels QR polling when payment method changes or component is destroyed', async () => {
+    const first = createComponent();
+    await first.component.selectPaymentMethod('qr');
+    await first.component.selectPaymentMethod('transfer');
+    await vi.advanceTimersByTimeAsync(10_000);
+    expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
+
+    const second = createComponent();
+    await second.component.selectPaymentMethod('qr');
+    second.fixture.destroy();
+    await vi.advanceTimersByTimeAsync(10_000);
+    expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
+  });
+
+  it('checks a transfer once and redirects to purchase status while pending', async () => {
+    const { component } = createComponent();
+    component.selectedPaymentMethod.set('transfer');
+
+    await component.onComplete();
+    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
+    expect(component.transferValidationStatus()).toBe('pending');
+    expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
+    expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
+
+    await vi.advanceTimersByTimeAsync(30_000);
+    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
+
+    await component.onComplete();
+    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
+  });
+
+  it('navigates after a transfer is confirmed as paid', async () => {
+    checkoutServiceStub.getPurchase.mockResolvedValue({ status: 'paid' });
+    const { component } = createComponent();
+    component.selectedPaymentMethod.set('transfer');
+
+    await component.onComplete();
+
+    expect(cartServiceStub.clearCart).toHaveBeenCalledOnce();
+    expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
+  });
+
+  it('shows a retryable state when transfer validation fails', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    checkoutServiceStub.getPurchase.mockRejectedValue(new Error('network error'));
+    const { component } = createComponent();
+    component.selectedPaymentMethod.set('transfer');
+
+    await component.onComplete();
+
+    expect(component.transferValidationStatus()).toBe('error');
+    expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
+    expect(routerStub.navigate).not.toHaveBeenCalled();
+  });
+});

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

@@ -4,6 +4,7 @@ import {
   computed,
   effect,
   inject,
+  OnDestroy,
   OnInit,
   signal,
   untracked,
@@ -28,8 +29,10 @@ import {
   CheckoutForm,
   PaymentMethod,
   PaymentMethodOption,
+  QrPaymentStatus,
   TransferAccount,
   TransferField,
+  TransferValidationStatus,
 } from './checkout-page.models';
 
 @Component({
@@ -46,13 +49,21 @@ import {
   styleUrl: './checkout-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CheckoutPageComponent implements OnInit {
+export class CheckoutPageComponent implements OnInit, OnDestroy {
   private readonly formBuilder = inject(FormBuilder);
   private readonly cartService = inject(CartService);
   private readonly router = inject(Router);
   private readonly tenantService = inject(TenantService);
   private readonly checkoutService = inject(CheckoutService);
   private readonly authService = inject(AuthService);
+  private readonly qrPollingIntervalMs = 5_000;
+  private readonly qrPollingMaxAttempts = 60;
+
+  private qrPollingTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  private qrPollingAttempts = 0;
+  private qrPollingRunId = 0;
+  private paymentMethodRequestId = 0;
+  private navigationStarted = false;
 
   @ViewChild(StepperComponent) stepper!: StepperComponent;
 
@@ -96,6 +107,9 @@ export class CheckoutPageComponent implements OnInit {
     () => this.isGeneratingIntent() || this.cartService.isUpdating(),
   );
   protected readonly qrData = signal<string | null>(null);
+  protected readonly qrPaymentStatus = signal<QrPaymentStatus>('idle');
+  protected readonly isCheckingQrPayment = signal(false);
+  protected readonly transferValidationStatus = signal<TransferValidationStatus>('idle');
 
   constructor() {
     effect(() => {
@@ -105,7 +119,7 @@ export class CheckoutPageComponent implements OnInit {
 
       untracked(() => {
         const purchaseId = this.createdPurchaseId();
-        if (cart && purchaseId) {
+        if (cart && purchaseId && !this.navigationStarted) {
           // Trigger payment intent generation when cart changes and we are on the payment step
           void this.selectPaymentMethod(this.selectedPaymentMethod());
         }
@@ -133,6 +147,10 @@ export class CheckoutPageComponent implements OnInit {
     this.cartService.loadCart().subscribe();
   }
 
+  ngOnDestroy(): void {
+    this.stopQrPolling();
+  }
+
   private mapCartItemToMock(item: CartItem): CartItemMock {
     const fullName = item.product?.nombre ?? '';
     let product = fullName;
@@ -202,11 +220,24 @@ export class CheckoutPageComponent implements OnInit {
   }
 
   protected onCancel(): void {
+    this.stopQrPolling();
     void this.router.navigate(['/']);
   }
 
   protected async selectPaymentMethod(method: PaymentMethod): Promise<void> {
+    if (this.navigationStarted) {
+      return;
+    }
+
+    this.stopQrPolling();
+    this.qrPaymentStatus.set('idle');
+    this.transferValidationStatus.set('idle');
     this.selectedPaymentMethod.set(method);
+    const requestId = ++this.paymentMethodRequestId;
+
+    if (method === 'qr') {
+      this.qrData.set(null);
+    }
 
     const purchaseId = this.createdPurchaseId();
     const tenant = this.tenantService.tenant();
@@ -230,7 +261,12 @@ export class CheckoutPageComponent implements OnInit {
       );
 
       if (method === 'qr' && response.qr_data?.qr_code) {
+        if (requestId !== this.paymentMethodRequestId || this.selectedPaymentMethod() !== 'qr') {
+          return;
+        }
+
         this.qrData.set(response.qr_data.qr_code);
+        this.startQrPolling();
       }
     } catch (error) {
       console.error('Failed to generate payment intent:', error);
@@ -248,6 +284,7 @@ export class CheckoutPageComponent implements OnInit {
     }
 
     this.transferDni.set(dni);
+    this.transferValidationStatus.set('idle');
     this.isGeneratingIntent.set(true);
     try {
       const response = await this.checkoutService.generatePaymentIntent(
@@ -293,16 +330,140 @@ export class CheckoutPageComponent implements OnInit {
     const purchaseId = this.createdPurchaseId();
     const tenant = this.tenantService.tenant();
 
-    if (!purchaseId || !tenant) {
+    if (
+      !purchaseId ||
+      !tenant ||
+      this.navigationStarted ||
+      this.transferValidationStatus() === 'checking'
+    ) {
       return;
     }
 
+    this.transferValidationStatus.set('checking');
+
     try {
-      await this.checkoutService.completePurchase(tenant.codigo, purchaseId);
+      const purchase = await this.checkoutService.getPurchase(tenant.codigo, purchaseId);
-      this.cartService.clearCart();
+
-      void this.router.navigate(['/checkout/status', purchaseId]);
+      if (purchase.status === 'paid') {
+        this.handleConfirmedPayment(purchaseId);
+        return;
+      }
+
+      if (purchase.status === 'pending_payment') {
+        this.transferValidationStatus.set('pending');
+        this.navigateToPurchaseStatus(purchaseId);
+        return;
+      }
+
+      this.transferValidationStatus.set('pending');
     } catch (error) {
-      console.error('Failed to complete purchase:', error);
+      console.error('Failed to validate transfer payment:', error);
+      this.transferValidationStatus.set('error');
     }
   }
+
+  protected retryQrPolling(): void {
+    if (this.selectedPaymentMethod() === 'qr' && this.qrData()) {
+      this.startQrPolling();
+    }
+  }
+
+  private startQrPolling(): void {
+    this.stopQrPolling();
+    this.qrPollingAttempts = 0;
+    this.qrPaymentStatus.set('waiting');
+
+    const runId = this.qrPollingRunId;
+    this.scheduleQrPoll(runId);
+  }
+
+  private scheduleQrPoll(runId: number): void {
+    this.qrPollingTimeoutId = setTimeout(() => {
+      this.qrPollingTimeoutId = null;
+      void this.checkQrPayment(runId);
+    }, this.qrPollingIntervalMs);
+  }
+
+  private async checkQrPayment(runId: number): Promise<void> {
+    if (runId !== this.qrPollingRunId) {
+      return;
+    }
+
+    const purchaseId = this.createdPurchaseId();
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant || this.selectedPaymentMethod() !== 'qr') {
+      this.stopQrPolling();
+      return;
+    }
+
+    this.qrPollingAttempts += 1;
+    this.isCheckingQrPayment.set(true);
+
+    try {
+      const purchase = await this.checkoutService.getPurchase(tenant.codigo, purchaseId);
+
+      if (runId !== this.qrPollingRunId) {
+        return;
+      }
+
+      if (purchase.status === 'paid') {
+        this.handleConfirmedPayment(purchaseId);
+        return;
+      }
+
+      if (purchase.status === 'rejected' || purchase.status === 'cancelled') {
+        this.stopQrPolling();
+        this.qrPaymentStatus.set('failed');
+        return;
+      }
+    } catch (error) {
+      console.error('Failed to validate QR payment:', error);
+    } finally {
+      if (runId === this.qrPollingRunId) {
+        this.isCheckingQrPayment.set(false);
+      }
+    }
+
+    if (runId !== this.qrPollingRunId) {
+      return;
+    }
+
+    if (this.qrPollingAttempts >= this.qrPollingMaxAttempts) {
+      this.stopQrPolling();
+      this.qrPaymentStatus.set('timed_out');
+      return;
+    }
+
+    this.scheduleQrPoll(runId);
+  }
+
+  private stopQrPolling(): void {
+    this.qrPollingRunId += 1;
+    this.isCheckingQrPayment.set(false);
+
+    if (this.qrPollingTimeoutId !== null) {
+      clearTimeout(this.qrPollingTimeoutId);
+      this.qrPollingTimeoutId = null;
+    }
+  }
+
+  private handleConfirmedPayment(purchaseId: number): void {
+    this.navigateToPurchaseStatus(purchaseId, true);
+  }
+
+  private navigateToPurchaseStatus(purchaseId: number, clearCart = false): void {
+    if (this.navigationStarted) {
+      return;
+    }
+
+    this.navigationStarted = true;
+    this.stopQrPolling();
+
+    if (clearCart) {
+      this.cartService.clearCart();
+    }
+
+    void this.router.navigate(['/checkout/status', purchaseId]);
+  }
 }

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

@@ -2,6 +2,8 @@ import { FormControl, FormGroup } from '@angular/forms';
 
 export type PaymentMethod = 'qr' | 'transfer' | 'telepagos';
 export type TransferField = 'cvu' | 'alias';
+export type QrPaymentStatus = 'idle' | 'waiting' | 'timed_out' | 'failed';
+export type TransferValidationStatus = 'idle' | 'checking' | 'pending' | 'error';
 
 export interface PaymentMethodOption {
   id: PaymentMethod;

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

@@ -40,12 +40,18 @@
           <h3 class="payment-panel__title">Cargando información de pago...</h3>
         </div>
       } @else if (selectedPaymentMethod() === 'qr') {
-        <app-checkout-payment-qr [qrData]="qrData()" />
+        <app-checkout-payment-qr
+          [qrData]="qrData()"
+          [paymentStatus]="qrPaymentStatus()"
+          [isCheckingPayment]="isCheckingQrPayment()"
+          (retryPolling)="retryQrPolling.emit()"
+        />
       } @else if (selectedPaymentMethod() === 'transfer') {
         <app-checkout-payment-transfer
           [transferAccount]="transferAccount()"
           [transferDni]="transferDni()"
           [copiedTransferField]="copiedTransferField()"
+          [validationStatus]="transferValidationStatus()"
           (copyTransferValue)="requestCopy($event.field, $event.value)"
           (submitDni)="generateTransferIntent.emit($event)"
           (completePurchase)="complete.emit()"

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

@@ -1,15 +1,21 @@
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
-import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { CheckoutPaymentQrComponent } from './components/checkout-payment-qr/checkout-payment-qr.component';
 import { CheckoutPaymentTelepagosComponent } from './components/checkout-payment-telepagos/checkout-payment-telepagos.component';
 import { CheckoutPaymentTransferComponent } from './components/checkout-payment-transfer/checkout-payment-transfer.component';
-import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
+import {
+  PaymentMethod,
+  PaymentMethodOption,
+  QrPaymentStatus,
+  TransferAccount,
+  TransferField,
+  TransferValidationStatus,
+} from './checkout-page.models';
 
 @Component({
   selector: 'app-checkout-payment-step',
   standalone: true,
-  imports: [ButtonComponent, CheckoutPaymentQrComponent, CheckoutPaymentTelepagosComponent, CheckoutPaymentTransferComponent],
+  imports: [CheckoutPaymentQrComponent, CheckoutPaymentTelepagosComponent, CheckoutPaymentTransferComponent],
   templateUrl: './checkout-payment-step.component.html',
   styleUrl: './checkout-payment-step.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -22,12 +28,16 @@ export class CheckoutPaymentStepComponent {
   readonly transferDni = input<string>('');
   readonly isGeneratingIntent = input<boolean>(false);
   readonly qrData = input<string | null>(null);
+  readonly qrPaymentStatus = input<QrPaymentStatus>('idle');
+  readonly isCheckingQrPayment = input<boolean>(false);
+  readonly transferValidationStatus = input<TransferValidationStatus>('idle');
 
   readonly paymentMethodChange = output<PaymentMethod>();
   readonly copyTransferValue = output<{ field: TransferField; value: string }>();
   readonly cancelStep = output<void>();
   readonly complete = output<void>();
   readonly generateTransferIntent = output<string>();
+  readonly retryQrPolling = output<void>();
 
   protected selectPaymentMethod(method: PaymentMethod): void {
     this.paymentMethodChange.emit(method);

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

@@ -10,5 +10,25 @@
       <span class="qr-code__finder qr-code__finder--tr"></span>
       <span class="qr-code__finder qr-code__finder--bl"></span>
     }
+
+    @if (isCheckingPayment()) {
+      <div class="payment-verification" role="status" aria-live="polite">
+        <span class="payment-verification__spinner" aria-hidden="true"></span>
+        <span class="payment-verification__message">Verificando pago</span>
       </div>
+    }
+  </div>
+
+  @if (paymentStatus() === 'timed_out') {
+    <p class="payment-status payment-status--warning" role="status">
+      Todavía no recibimos el pago.
+    </p>
+    <app-button type="button" variant="secondary" (click)="retryPolling.emit()">
+      Volver a verificar
+    </app-button>
+  } @else if (paymentStatus() === 'failed') {
+    <p class="payment-status payment-status--warning" role="alert">
+      El pago fue rechazado o cancelado.
+    </p>
+  }
 </div>

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

@@ -103,3 +103,48 @@
     left: 10px;
   }
 }
+
+.payment-status {
+  margin: 1rem 0 0;
+  color: #6f6f6f;
+  font-size: 0.8rem;
+  font-weight: 500;
+
+  &--warning {
+    margin-bottom: 0.75rem;
+    color: #9a6a12;
+  }
+}
+
+.payment-verification {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  background: rgba(255, 255, 255, 0.82);
+
+  &__spinner {
+    width: 30px;
+    height: 30px;
+    border: 4px solid rgba(17, 17, 17, 0.2);
+    border-top-color: #111111;
+    border-radius: 50%;
+    animation: payment-verification-spin 0.75s linear infinite;
+  }
+
+  &__message {
+    color: #111111;
+    font-size: 0.72rem;
+    font-weight: 700;
+  }
+}
+
+@keyframes payment-verification-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,30 @@
+import { getTestBed, TestBed } from '@angular/core/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
+import { beforeAll, describe, expect, it } from 'vitest';
+
+import { CheckoutPaymentQrComponent } from './checkout-payment-qr.component';
+
+describe('CheckoutPaymentQrComponent', () => {
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  it('renders the animated payment verification overlay over the QR', async () => {
+    await TestBed.configureTestingModule({
+      imports: [CheckoutPaymentQrComponent],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(CheckoutPaymentQrComponent);
+    fixture.componentRef.setInput('isCheckingPayment', true);
+    fixture.detectChanges();
+
+    const overlay = fixture.nativeElement.querySelector('.payment-verification') as HTMLElement;
+    expect(overlay).not.toBeNull();
+    expect(overlay.textContent).toContain('Verificando pago');
+    expect(overlay.querySelector('.payment-verification__spinner')).not.toBeNull();
+  });
+});

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

@@ -1,14 +1,19 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import { QRCodeComponent } from '../../../../../../shared/components/qrcode/qrcode.component';
+import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
+import { QrPaymentStatus } from '../../checkout-page.models';
 
 @Component({
   selector: 'app-checkout-payment-qr',
   standalone: true,
-  imports: [QRCodeComponent],
+  imports: [QRCodeComponent, ButtonComponent],
   templateUrl: './checkout-payment-qr.component.html',
   styleUrl: './checkout-payment-qr.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CheckoutPaymentQrComponent {
   readonly qrData = input<string | null>(null);
+  readonly paymentStatus = input<QrPaymentStatus>('idle');
+  readonly isCheckingPayment = input<boolean>(false);
+  readonly retryPolling = output<void>();
 }

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

@@ -85,10 +85,21 @@
         variant="primary"
         hostClass="w-100"
         buttonClass="w-100"
+        [disabled]="validationStatus() === 'checking'"
         (click)="completePurchase.emit()"
       >
-        Ya transferí
+        {{ validationStatus() === 'checking' ? 'Validando pago...' : 'Ya transferí' }}
       </app-button>
+
+      @if (validationStatus() === 'pending') {
+        <p class="payment-validation payment-validation--pending" role="status">
+          Todavía no recibimos la transferencia. Podés volver a verificar.
+        </p>
+      } @else if (validationStatus() === 'error') {
+        <p class="payment-validation payment-validation--error" role="alert">
+          No pudimos validar la transferencia. Intentá nuevamente.
+        </p>
+      }
     </div>
   }
 </div>

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

@@ -115,3 +115,17 @@
     height: 100%;
   }
 }
+
+.payment-validation {
+  margin: 0.75rem 0 0;
+  font-size: 0.8rem;
+  line-height: 1.35;
+
+  &--pending {
+    color: #8a681d;
+  }
+
+  &--error {
+    color: #b42318;
+  }
+}

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

@@ -3,7 +3,7 @@ import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
 import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
 import { InputComponent } from '../../../../../../shared/components/input/input.component';
-import { TransferAccount, TransferField } from '../../checkout-page.models';
+import { TransferAccount, TransferField, TransferValidationStatus } from '../../checkout-page.models';
 
 @Component({
   selector: 'app-checkout-payment-transfer',
@@ -17,6 +17,7 @@ export class CheckoutPaymentTransferComponent implements OnInit {
   readonly transferAccount = input<TransferAccount | null>(null);
   readonly transferDni = input<string>('');
   readonly copiedTransferField = input<TransferField | null>(null);
+  readonly validationStatus = input<TransferValidationStatus>('idle');
 
   readonly copyTransferValue = output<{ field: TransferField; value: string }>();
   readonly submitDni = output<string>();

src/app/features/store/store.routes.ts

@@ -106,6 +106,14 @@ export const routes: Routes = [
                 (m) => m.PurchaseDetailPage,
               ),
           },
+          {
+            path: 'tickets',
+            canActivate: [hasMenuGuard('tickets')],
+            loadComponent: () =>
+              import('./pages/account-page/pages/tickets-page/tickets-page').then(
+                (m) => m.TicketsPage,
+              ),
+          },
           {
             path: '',
             redirectTo: 'datos-personales',

src/app/shared/components/icon-button/icon-button.component.scss

@@ -14,7 +14,9 @@
   color: #666666;
   cursor: pointer;
   outline: none;
-  transition: color 0.15s ease-in-out, transform 0.1s ease-in-out;
+  transition:
+    color 0.15s ease-in-out,
+    transform 0.1s ease-in-out;
   border-radius: 4px;
 
   i {
@@ -40,7 +42,7 @@
 
   // Disabled state
   &:disabled {
-    color: #A0A0A0;
+    color: #a0a0a0;
     cursor: not-allowed;
     pointer-events: none;
   }
@@ -74,3 +76,14 @@
     font-size: 23px;
   }
 }
+
+.icon-btn--download,
+.icon-btn--share {
+  color: #a0a0a0;
+
+  i {
+    width: 15px;
+    height: 15px;
+    font-size: 15px;
+  }
+}

src/app/shared/components/icon-button/icon-button.component.ts

@@ -8,14 +8,16 @@ export type IconButtonVariant =
   | 'angle-left'
   | 'angle-up'
   | 'angle-down'
-  | 'copy';
+  | 'copy'
+  | 'download'
+  | 'share';
 
 @Component({
   selector: 'app-icon-button',
   imports: [NgClass],
   templateUrl: './icon-button.component.html',
   styleUrl: './icon-button.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IconButtonComponent {
   readonly variant = input.required<IconButtonVariant>();
@@ -33,7 +35,9 @@ export class IconButtonComponent {
       'angle-left': 'fa-solid fa-angle-left',
       'angle-up': 'fa-solid fa-angle-up',
       'angle-down': 'fa-solid fa-angle-down',
-      copy: 'fa-solid fa-copy'
+      copy: 'fa-solid fa-copy',
+      download: 'fa-solid fa-download',
+      share: 'fa-solid fa-share-nodes',
     };
     return classes[this.variant()];
   });

src/app/shared/components/modal-shell/modal-shell.component.scss

@@ -19,6 +19,36 @@
   margin: 0;
 }
 
+.modal-shell__dialog--qr {
+  width: min(100%, 15rem);
+}
+
+.modal-shell__dialog--qr .modal-shell__content {
+  min-height: auto;
+  border-radius: 0.35rem;
+  background: #ffffff;
+}
+
+.modal-shell__dialog--qr .modal-shell__header {
+  padding: 1.7rem 1rem 0.35rem;
+}
+
+.modal-shell__dialog--qr .modal-shell__title {
+  color: var(--bs-success, #198754);
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.modal-shell__dialog--qr .modal-shell__header .btn-close {
+  top: 0.85rem;
+  right: 0.85rem;
+  font-size: 0.7rem;
+}
+
+.modal-shell__dialog--qr .modal-shell__body {
+  padding: 0 1rem 1rem;
+}
+
 .modal-shell__dialog.modal-sm {
   width: min(100%, 24rem);
 }
@@ -40,8 +70,7 @@
   min-height: 180px;
   max-height: calc(100dvh - 2rem);
   border-radius: 1.25rem;
-  background:
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.98));
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.98));
 }
 
 .modal-shell__dialog--full .modal-shell__content {
@@ -88,6 +117,7 @@
   }
 
   .modal-shell__dialog,
+  .modal-shell__dialog--qr,
   .modal-shell__dialog.modal-sm,
   .modal-shell__dialog.modal-lg,
   .modal-shell__dialog.modal-xl,

src/app/shared/components/modal-shell/modal-shell.component.ts

@@ -6,7 +6,7 @@ import {
   computed,
   input,
   output,
-  viewChild
+  viewChild,
 } from '@angular/core';
 
 import { ModalSize } from '../../../core/services/modal.service';
@@ -16,7 +16,7 @@ import { ModalSize } from '../../../core/services/modal.service';
   imports: [NgClass],
   templateUrl: './modal-shell.component.html',
   styleUrl: './modal-shell.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalShellComponent {
   private readonly panel = viewChild.required<ElementRef<HTMLElement>>('panel');
@@ -32,10 +32,11 @@ export class ModalShellComponent {
     const size = this.size();
 
     return {
+      'modal-shell__dialog--qr': size === 'qr',
       'modal-sm': size === 'sm',
       'modal-lg': size === 'lg',
       'modal-xl': size === 'xl',
-      'modal-shell__dialog--full': size === 'full'
+      'modal-shell__dialog--full': size === 'full',
     };
   });
 
@@ -55,8 +56,8 @@ export class ModalShellComponent {
         'input:not([disabled])',
         'select:not([disabled])',
         'textarea:not([disabled])',
-        '[tabindex]:not([tabindex="-1"])'
+        '[tabindex]:not([tabindex="-1"])',
-      ].join(', ')
+      ].join(', '),
     );
 
     (focusTarget ?? panel).focus();

src/app/shared/components/qr-modal/qr-modal.component.html

@@ -0,0 +1,16 @@
+<article class="qr-modal">
+  <header class="qr-modal__header">
+    <p class="qr-modal__id">ID: {{ data.id }}</p>
+    @if (data.date) {
+      <time class="qr-modal__date">{{ data.date }}</time>
+    }
+  </header>
+
+  <qrcode
+    class="qr-modal__code"
+    [qrdata]="data.ticket"
+    [width]="320"
+    errorCorrectionLevel="M"
+    [ariaLabel]="'Código QR del ticket ' + data.id"
+  />
+</article>

src/app/shared/components/qr-modal/qr-modal.component.scss

@@ -0,0 +1,44 @@
+.qr-modal {
+  display: grid;
+  justify-items: center;
+  gap: 0.65rem;
+  width: 100%;
+  text-align: center;
+}
+
+.qr-modal__header {
+  display: grid;
+  justify-items: center;
+  gap: 0.25rem;
+}
+
+.qr-modal__id {
+  margin: 0;
+}
+
+.qr-modal__id {
+  color: #4f4f4f;
+  font-size: 0.68rem;
+  line-height: 1.2;
+}
+
+.qr-modal__date {
+  margin-top: 0.35rem;
+  color: #8a8a8a;
+  font-size: 0.62rem;
+  line-height: 1.2;
+}
+
+.qr-modal__code {
+  display: block;
+  width: 100%;
+  max-width: 11rem;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+:host ::ng-deep .qr-modal__code canvas {
+  display: block;
+  width: 100% !important;
+  height: auto !important;
+}

src/app/shared/components/qr-modal/qr-modal.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import { MODAL_DATA, QrModalData } from '../../../core/services/modal.service';
+import { QRCodeComponent } from '../qrcode/qrcode.component';
+
+@Component({
+  selector: 'app-qr-modal',
+  imports: [QRCodeComponent],
+  templateUrl: './qr-modal.component.html',
+  styleUrl: './qr-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class QrModalComponent {
+  protected readonly data = inject<QrModalData>(MODAL_DATA);
+}