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

feat(tickets): separate active and inactive tickets, update selection logic and styles
feat(ticket): enhance ticket component with disabled and expired states, update styles and tests
2026-07-21 14:55:46 -03:00 · 2026-07-21 14:35:38 -03:00 · 2026-07-21 14:25:52 -03:00 · 2026-07-21 14:14:35 -03:00 · 2026-07-21 14:12:50 -03:00 · 2026-07-21 14:12:23 -03:00
41 changed files with 783 additions and 1059 deletions
--- a/src/app/core/services/checkout.service.ts
+++ b/src/app/core/services/checkout.service.ts
@@ -87,7 +87,7 @@ export class CheckoutService {
      payload.transfer_payer_dni = payerDni;
    }
    const response = await firstValueFrom(
-      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, { method })
+      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, payload)
    );
    if (!response) {
      throw new Error('Error al generar la intención de pago.');
--- a/src/app/core/services/modal.service.spec.ts
+++ b/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 {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
-import {
-  afterEach,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  vi
-} from 'vitest';
+import { BrowserTestingModule, 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 {
-  MODAL_DATA,
-  ModalRef,
-  ModalService
-} from './modal.service';
+import { 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(
-        BrowserTestingModule,
-        platformBrowserTesting()
-      );
+      getTestBed().initTestEnvironment(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);
--- a/src/app/core/services/modal.service.ts
+++ b/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 ModalDismissReason =
-  | 'backdrop'
-  | 'escape'
-  | 'programmatic'
-  | 'replaced';
+export type ModalSize = 'qr' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type ModalDismissReason = 'backdrop' | 'escape' | 'programmatic' | 'replaced';

 export interface ModalConfig<TData = unknown> {
  title?: string;
@@ -20,11 +17,10 @@ export interface ModalConfig<TData = unknown> {
  showCloseButton?: boolean;
 }

-export interface NormalizedModalConfig<TData = unknown>
-  extends Omit<
-    ModalConfig<TData>,
-    'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
-  > {
+export interface NormalizedModalConfig<TData = unknown> extends Omit<
+  ModalConfig<TData>,
+  'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
+> {
  size: ModalSize;
  closeOnBackdrop: boolean;
  closeOnEscape: boolean;
@@ -37,8 +33,7 @@ export interface ConfirmModalData {
  cancelLabel: string;
 }

-export interface ConfirmModalConfig
-  extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
+export interface ConfirmModalConfig extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
  content: string;
  confirmLabel?: string;
  cancelLabel?: string;
@@ -49,12 +44,24 @@ export interface SimpleModalData {
  buttonLabel: string;
 }

-export interface SimpleModalConfig
-  extends Omit<ModalConfig<SimpleModalData>, 'data'> {
+export interface SimpleModalConfig 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> =
-    this.afterClosedSubject.asObservable();
+  readonly afterClosed$: Observable<TResult | undefined> = 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(
-      map((result) => result === true)
-    );
+    return this.openConfirmRef(config).afterClosed$.pipe(map((result) => result === true));
  }

  openConfirmDelete(config: ConfirmModalConfig): Observable<boolean> {
-    return this.openConfirmDeleteRef(config).afterClosed$.pipe(
-      map((result) => result === true)
-    );
+    return this.openConfirmDeleteRef(config).afterClosed$.pipe(map((result) => result === true));
  }

  openConfirmRef(config: ConfirmModalConfig): ModalRef<boolean> {
@@ -164,23 +166,30 @@ export class ModalService {
  }

  openConfirmDeleteRef(config: ConfirmModalConfig): ModalRef<boolean> {
-    return this.open(
-      ConfirmDeleteModalComponent,
-      this.buildConfirmModalConfig(config)
-    );
+    return this.open(ConfirmDeleteModalComponent, this.buildConfirmModalConfig(config));
  }

  openSimple(config: SimpleModalConfig): Observable<void> {
-    return this.openSimpleRef(config).afterClosed$.pipe(
-      map(() => undefined)
-    );
+    return this.openSimpleRef(config).afterClosed$.pipe(map(() => undefined));
  }

  openSimpleRef(config: SimpleModalConfig): ModalRef<void> {
-    return this.open(
-      SimpleModalComponent,
-      this.buildSimpleModalConfig(config)
-    );
+    return this.open(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>(
-    config: ModalConfig<TData>
-  ): NormalizedModalConfig<TData> {
+  private normalizeConfig<TData>(config: ModalConfig<TData>): NormalizedModalConfig<TData> {
    return {
      ...DEFAULT_MODAL_CONFIG,
-      ...config
+      ...config,
    };
  }

-  private buildConfirmModalConfig(
-    config: ConfirmModalConfig
-  ): ModalConfig<ConfirmModalData> {
+  private buildConfirmModalConfig(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(
-    config: SimpleModalConfig
-  ): ModalConfig<SimpleModalData> {
-    const {
-      content,
-      buttonLabel = 'Entendido',
-      ...modalConfig
-    } = config;
+  private buildSimpleModalConfig(config: SimpleModalConfig): ModalConfig<SimpleModalData> {
+    const { content, buttonLabel = 'Entendido', ...modalConfig } = config;

    return {
      ...modalConfig,
      data: {
        content,
-        buttonLabel
-      }
+        buttonLabel,
+      },
    };
  }
 }
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
@@ -574,24 +574,6 @@
    </div>
  </section>

-  <section class="component-demo card shadow-sm mt-4">
-    <div class="card-body">
-      <span class="eyebrow">Reusable Component</span>
-      <h2 class="mb-4">Ticket</h2>
-
-      <p class="text-muted mb-4">Ticket responsive que ocupa el 100% del ancho disponible.</p>
-
-      <app-ticket
-        title="ENTRADA GENERAL"
-        ticketId="0000000000"
-        date="09 de Octubre"
-        (viewQr)="triggerToast('info')"
-        (download)="triggerToast('success')"
-        (share)="triggerToast('info')"
-      />
-    </div>
-  </section>
-
  <section class="component-demo card shadow-sm mt-4">
    <div class="card-body">
      <span class="eyebrow">Reusable Component</span>
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
@@ -14,7 +14,6 @@ import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
-import { TicketComponent } from '../../../../shared/components/ticket/ticket.component';

@Component({
  selector: 'app-reutilizables-test-page',
@@ -31,7 +30,6 @@ import { TicketComponent } from '../../../../shared/components/ticket/ticket.com
    CartIconComponent,
    StepperComponent,
    StepComponent,
-    TicketComponent,
  ],
  templateUrl: './reutilizables-test-page.component.html',
  styleUrl: './reutilizables-test-page.component.scss',
--- a/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html
+++ b/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html
@@ -1,8 +1,11 @@
-    <div class="sidebar-container">
-      <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/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
-      </nav>
-    </div>
+<div class="sidebar-container">
+  <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/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
+    <a routerLink="/mi-cuenta/tickets" routerLinkActive="active" class="nav-link">Mis tickets</a>
+  </nav>
+</div>
--- a/src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.html
+++ b/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>
--- a/src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.scss
+++ b/src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.scss
@@ -5,13 +5,12 @@

 .ticket {
  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  grid-template-columns: auto minmax(0, 1fr) 78px auto;
  align-items: center;
  width: 100%;
-  min-height: 56px;
+  min-height: 76px;
  gap: 16px;
  padding: 16px 0;
-  background: transparent;
  color: #666666;
 }

@@ -22,8 +21,8 @@
 }

 .ticket__selection input {
-  width: 16px;
-  height: 16px;
+  width: 21px;
+  height: 21px;
  margin: 0;
  accent-color: var(--tenant-primary, #009933);
  cursor: pointer;
@@ -45,56 +44,89 @@
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
-  color: #666666;
+  text-transform: uppercase;
 }

 .ticket__id {
+  margin-top: 3px;
  font-size: 12px;
-  font-weight: 400;
  line-height: 1.4;
-  color: #666666;
 }

 .ticket__date {
+  display: block;
  font-size: 10px;
-  font-weight: 400;
  line-height: 1.4;
-  color: #666666;
  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;
-  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
 }

-:host ::ng-deep .ticket__qr-button {
-  min-width: auto;
+: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: 575.98px) {
+@media (max-width: 767.98px) {
  .ticket {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
-    padding: 20px 0;
  }

-  .ticket__date {
+  .ticket__status {
    grid-column: 2;
-    grid-row: 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;
+  }
 }
--- a/src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.spec.ts
+++ b/src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.spec.ts
@@ -1,15 +1,16 @@
 import { TestBed } from '@angular/core/testing';
 import { describe, expect, it, vi } from 'vitest';
+
 import { TicketComponent } from './ticket.component';

 describe('TicketComponent', () => {
-  it('renders the ticket data and emits every action', async () => {
+  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');
+    fixture.componentRef.setInput('date', '09 de octubre');

    const viewQr = vi.fn();
    const download = vi.fn();
@@ -22,7 +23,6 @@ describe('TicketComponent', () => {
    const element = fixture.nativeElement as HTMLElement;
    expect(element.textContent).toContain('ENTRADA GENERAL');
    expect(element.textContent).toContain('ID: 0000000000');
-    expect(element.textContent).toContain('09 de Octubre');

    element.querySelector<HTMLButtonElement>('app-button button')?.click();
    element.querySelector<HTMLButtonElement>('[aria-label="Descargar ticket"]')?.click();
@@ -33,18 +33,32 @@ describe('TicketComponent', () => {
    expect(share).toHaveBeenCalledOnce();
  });

-  it('supports two-way selection state', async () => {
+  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('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 checkbox = fixture.nativeElement.querySelector('input') as HTMLInputElement;
-    checkbox.click();
-    fixture.detectChanges();
+    const element = fixture.nativeElement as HTMLElement;
+    const ticket = element.querySelector<HTMLElement>('.ticket');
+    const qrButton = element.querySelector<HTMLButtonElement>('app-button button');

-    expect(fixture.componentInstance.selected()).toBe(true);
+    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();
  });
 });
--- a/src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.ts
+++ b/src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
-import { ButtonComponent } from '../button/button.component';
-import { IconButtonComponent } from '../icon-button/icon-button.component';
+
+import { ButtonComponent } from '../../../../../../../../shared/components/button/button.component';
+import { IconButtonComponent } from '../../../../../../../../shared/components/icon-button/icon-button.component';

@Component({
  selector: 'app-ticket',
@@ -11,8 +12,10 @@ import { IconButtonComponent } from '../icon-button/icon-button.component';
 })
 export class TicketComponent {
  readonly title = input('ENTRADA GENERAL');
-  readonly ticketId = input.required<string>();
+  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>();
--- a/src/app/features/store/pages/account-page/pages/tickets-page/ticket.service.ts
+++ b/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 ?? []);
+  }
+}
--- a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.html
+++ b/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>
--- a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss
+++ b/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;
+  }
+}
--- a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.spec.ts
+++ b/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',
+    });
+  });
+});
--- a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.ts
+++ b/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,
+    });
+  }
+}
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts
@@ -18,6 +18,7 @@ import { CartService } from '../../../../core/services/cart/cart.service';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { CheckoutService, CreatePurchasePayload } from '../../../../core/services/checkout.service';
 import { AuthService } from '../../../../core/services/auth/auth.service';
+import { BankAccount } from '../../../../core/services/tenant.interface';
 import { CartItem } from '../../../../core/services/cart/cart.interface';
 import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
@@ -4,17 +4,17 @@
      <h2 id="payment-methods-title" class="payment-methods__title">Selecciona el metodo de pago</h2>

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

@@ -35,7 +35,7 @@
    </section>

    <section class="payment-panel d-flex justify-content-end" aria-live="polite">
-      @if (payment.isLoading() && payment.selectedMethod() !== 'transfer') {
+      @if (isGeneratingIntent()) {
        <div class="payment-panel__card" style="text-align: center; padding: 2rem;">
          <h3 class="payment-panel__title">Cargando información de pago...</h3>
        </div>
@@ -62,3 +62,4 @@
    </section>
  </div>
 </div>
+
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss
@@ -1,5 +1,3 @@
-@use './components/payment-methods/payment-panel' as payment-panel;
-
 .checkout-payment {
  display: grid;
  gap: 1rem;
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.spec.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.spec.ts
@@ -1,102 +0,0 @@
-import { signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { vi } from 'vitest';
-
-import { CheckoutPaymentFacade } from './checkout-payment.facade';
-import { CheckoutPaymentStepComponent } from './checkout-payment-step.component';
-import { PaymentMethod, PaymentMethodOption, TransferAccount } from './checkout-page.models';
-
-describe('CheckoutPaymentStepComponent', () => {
-  const paymentMethods: ReadonlyArray<PaymentMethodOption> = [
-    { id: 'qr', label: 'QR' },
-    { id: 'transfer', label: 'Transferencia' },
-    { id: 'telepagos', label: 'TelePagos' }
-  ];
-  const transferAccount: TransferAccount = {
-    titular: 'Titular Test',
-    entidad: 'Entidad Test',
-    cvu: '0000000000000000000000',
-    alias: 'alias.test'
-  };
-
-  let fixture: ComponentFixture<CheckoutPaymentStepComponent>;
-  let payment: {
-    paymentMethods: ReadonlyArray<PaymentMethodOption>;
-    selectedMethod: ReturnType<typeof signal<PaymentMethod>>;
-    copiedTransferField: ReturnType<typeof signal<'cvu' | 'alias' | null>>;
-    transferAccount: ReturnType<typeof signal<TransferAccount | null>>;
-    payerDni: ReturnType<typeof signal<string>>;
-    transferRequestError: ReturnType<typeof signal<string | null>>;
-    qrData: ReturnType<typeof signal<string | null>>;
-    isLoading: ReturnType<typeof signal<boolean>>;
-    canComplete: ReturnType<typeof signal<boolean>>;
-    setPurchaseId: ReturnType<typeof vi.fn>;
-    selectMethod: ReturnType<typeof vi.fn>;
-    copyTransferValue: ReturnType<typeof vi.fn>;
-    requestTransferData: ReturnType<typeof vi.fn>;
-  };
-
-  beforeEach(async () => {
-    payment = {
-      paymentMethods,
-      selectedMethod: signal<PaymentMethod>('qr'),
-      copiedTransferField: signal<'cvu' | 'alias' | null>(null),
-      transferAccount: signal<TransferAccount | null>(transferAccount),
-      payerDni: signal('12345678'),
-      transferRequestError: signal<string | null>(null),
-      qrData: signal<string | null>('qr-test'),
-      isLoading: signal(false),
-      canComplete: signal(true),
-      setPurchaseId: vi.fn(),
-      selectMethod: vi.fn(),
-      copyTransferValue: vi.fn(),
-      requestTransferData: vi.fn()
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [CheckoutPaymentStepComponent]
-    })
-      .overrideComponent(CheckoutPaymentStepComponent, {
-        set: { providers: [{ provide: CheckoutPaymentFacade, useValue: payment }] }
-      })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(CheckoutPaymentStepComponent);
-  });
-
-  it.each([
-    ['qr', 'app-qr-payment-content'],
-    ['transfer', 'app-transfer-payment-content'],
-    ['telepagos', 'app-telepagos-payment-content']
-  ] as const)('renders the %s payment content', (method: PaymentMethod, selector: string) => {
-    payment.selectedMethod.set(method);
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector(selector)).not.toBeNull();
-  });
-
-  it('delegates method selection to the payment facade', () => {
-    fixture.detectChanges();
-    const transferRadio = fixture.nativeElement.querySelector('input[value="transfer"]') as HTMLInputElement;
-    transferRadio.dispatchEvent(new Event('change'));
-
-    expect(payment.selectMethod).toHaveBeenCalledWith('transfer');
-  });
-
-  it('shows only the loading state while generating a QR intent', () => {
-    payment.selectedMethod.set('qr');
-    payment.isLoading.set(true);
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.textContent).toContain('Cargando información de pago...');
-    expect(fixture.nativeElement.querySelector('app-qr-payment-content')).toBeNull();
-  });
-
-  it('delegates transfer copy requests to the payment facade', () => {
-    payment.selectedMethod.set('transfer');
-    fixture.detectChanges();
-    fixture.nativeElement.querySelector('app-icon-button').click();
-
-    expect(payment.copyTransferValue).toHaveBeenCalledWith('cvu', transferAccount.cvu);
-  });
-});
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, inject, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';

 import { CheckoutPaymentQrComponent } from './components/checkout-payment-qr/checkout-payment-qr.component';
 import { CheckoutPaymentTelepagosComponent } from './components/checkout-payment-telepagos/checkout-payment-telepagos.component';
@@ -18,8 +18,7 @@ import {
  imports: [CheckoutPaymentQrComponent, CheckoutPaymentTelepagosComponent, CheckoutPaymentTransferComponent],
  templateUrl: './checkout-payment-step.component.html',
  styleUrl: './checkout-payment-step.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [CheckoutPaymentFacade]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CheckoutPaymentStepComponent {
  readonly paymentMethods = input.required<ReadonlyArray<PaymentMethodOption>>();
@@ -33,24 +32,18 @@ export class CheckoutPaymentStepComponent {
  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>();

-  constructor() {
-    effect(() => this.payment.setPurchaseId(this.purchaseId()));
-  }
-
  protected selectPaymentMethod(method: PaymentMethod): void {
-    void this.payment.selectMethod(method);
+    this.paymentMethodChange.emit(method);
  }

  protected requestCopy(field: TransferField, value: string): void {
-    void this.payment.copyTransferValue(field, value);
-  }
-
-  protected requestTransfer(dni: string): void {
-    void this.payment.requestTransferData(dni);
+    this.copyTransferValue.emit({ field, value });
  }
 }
--- a/src/app/features/store/pages/checkout-page/checkout-payment.facade.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-payment.facade.ts
@@ -1,150 +0,0 @@
-import { computed, effect, inject, Injectable, signal, untracked } from '@angular/core';
-
-import { CartService } from '../../../../core/services/cart/cart.service';
-import { CheckoutService } from '../../../../core/services/checkout.service';
-import { TenantService } from '../../../../core/services/tenant.service';
-import { ToastService } from '../../../../core/services/toast.service';
-import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
-
-@Injectable()
-export class CheckoutPaymentFacade {
-  private readonly cartService = inject(CartService);
-  private readonly checkoutService = inject(CheckoutService);
-  private readonly tenantService = inject(TenantService);
-  private readonly toastService = inject(ToastService);
-  private readonly purchaseId = signal<number | null>(null);
-  private readonly isGeneratingIntent = signal(false);
-
-  readonly paymentMethods: ReadonlyArray<PaymentMethodOption> = [
-    { id: 'qr', label: 'QR' },
-    { id: 'transfer', label: 'Transferencia' },
-    { id: 'telepagos', label: 'TelePagos' }
-  ];
-  readonly selectedMethod = signal<PaymentMethod>('qr');
-  readonly copiedTransferField = signal<TransferField | null>(null);
-  readonly transferAccount = signal<TransferAccount | null>(null);
-  readonly payerDni = signal('');
-  readonly transferRequestError = signal<string | null>(null);
-  readonly qrData = signal<string | null>(null);
-  readonly isLoading = computed(() => this.isGeneratingIntent() || this.cartService.isUpdating());
-  readonly canComplete = computed(() =>
-    !this.isLoading()
-      && (this.selectedMethod() !== 'transfer' || this.transferAccount() !== null)
-  );
-
-  constructor() {
-    effect(() => {
-      const cart = this.cartService.cart();
-      const purchaseId = this.purchaseId();
-
-      untracked(() => {
-        if (cart && purchaseId) void this.refreshSelectedMethod();
-      });
-    });
-  }
-
-  setPurchaseId(purchaseId: number | null): void {
-    this.purchaseId.set(purchaseId);
-  }
-
-  async selectMethod(method: PaymentMethod): Promise<void> {
-    this.selectedMethod.set(method);
-    await this.refreshSelectedMethod();
-  }
-
-  async requestTransferData(dni: string): Promise<void> {
-    const context = this.resolvePaymentContext();
-    if (!context) return;
-
-    this.isGeneratingIntent.set(true);
-    this.transferRequestError.set(null);
-
-    try {
-      const response = await this.checkoutService.generatePaymentIntent(
-        context.tenantCode,
-        context.purchaseId,
-        'transfer',
-        dni
-      );
-      if (!response.transfer_data) {
-        throw new Error('No pudimos obtener los datos de transferencia.');
-      }
-
-      this.payerDni.set(dni);
-      this.transferAccount.set({
-        titular: response.transfer_data.titular,
-        entidad: response.transfer_data.entidad,
-        cvu: response.transfer_data.cvu,
-        alias: response.transfer_data.alias
-      });
-    } catch (error) {
-      const message = this.resolveErrorMessage(
-        error,
-        'No pudimos obtener los datos de transferencia. Intentá nuevamente.'
-      );
-      this.transferRequestError.set(message);
-      this.toastService.danger(message);
-    } finally {
-      this.isGeneratingIntent.set(false);
-    }
-  }
-
-  async copyTransferValue(field: TransferField, value: string): Promise<void> {
-    if (!globalThis.navigator?.clipboard?.writeText) return;
-
-    try {
-      await globalThis.navigator.clipboard.writeText(value);
-      this.copiedTransferField.set(field);
-
-      setTimeout(() => {
-        if (this.copiedTransferField() === field) this.copiedTransferField.set(null);
-      }, 1800);
-    } catch {
-      this.copiedTransferField.set(null);
-    }
-  }
-
-  private async refreshSelectedMethod(): Promise<void> {
-    const method = this.selectedMethod();
-    if (method === 'transfer') {
-      if (this.transferAccount() && this.payerDni()) {
-        await this.requestTransferData(this.payerDni());
-      }
-      return;
-    }
-
-    if (method === 'telepagos') return;
-
-    const context = this.resolvePaymentContext();
-    if (!context) return;
-
-    this.isGeneratingIntent.set(true);
-    try {
-      const response = await this.checkoutService.generatePaymentIntent(
-        context.tenantCode,
-        context.purchaseId,
-        method
-      );
-      if (response.qr_data?.qr_code) this.qrData.set(response.qr_data.qr_code);
-    } catch (error) {
-      this.toastService.danger(this.resolveErrorMessage(
-        error,
-        'No pudimos obtener la información de pago. Intentá nuevamente.'
-      ));
-    } finally {
-      this.isGeneratingIntent.set(false);
-    }
-  }
-
-  private resolvePaymentContext(): { tenantCode: string; purchaseId: number } | null {
-    const tenant = this.tenantService.tenant();
-    const purchaseId = this.purchaseId();
-    return tenant && purchaseId ? { tenantCode: tenant.codigo, purchaseId } : null;
-  }
-
-  private resolveErrorMessage(error: unknown, fallback: string): string {
-    const backendMessage = (error as { error?: { message?: unknown } } | null)?.error?.message;
-    if (typeof backendMessage === 'string') return backendMessage;
-    return error instanceof Error ? error.message : fallback;
-  }
-}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/_payment-panel.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/_payment-panel.scss
@@ -1,41 +0,0 @@
-@mixin host {
-  :host {
-    display: block;
-    width: 100%;
-    max-width: 290px;
-  }
-}
-
-@mixin card {
-  &__card {
-    width: 100%;
-    max-width: 290px;
-    min-height: 269px;
-    padding: 1.5rem 1.75rem;
-    border-radius: 5px;
-    background: #ffffff;
-    color: #666666;
-    box-shadow: 0 0 0 1px #f1f1f1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  &__title {
-    max-width: 18rem;
-    margin: 0;
-    color: #8a8a8a;
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 1.35;
-  }
-
-  &__divider {
-    width: 100%;
-    max-width: 220px;
-    height: 1px;
-    margin: 1.2rem 0 1.45rem;
-    background: #dddddd;
-  }
-}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.html
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.html
@@ -1,14 +0,0 @@
-<div class="payment-panel__card">
-  <h3 class="payment-panel__title">Ingresa a tu billetera y escanea el siguiente QR</h3>
-  <div class="payment-panel__divider"></div>
-
-  <div class="qr-code" aria-label="QR de pago">
-    @if (qrData()) {
-      <qrcode [qrdata]="qrData()!" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
-    } @else {
-      <span class="qr-code__finder qr-code__finder--tl"></span>
-      <span class="qr-code__finder qr-code__finder--tr"></span>
-      <span class="qr-code__finder qr-code__finder--bl"></span>
-    }
-  </div>
-</div>
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.scss
@@ -1,81 +0,0 @@
-@use 'payment-panel' as payment-panel;
-
-@include payment-panel.host;
-
-.payment-panel {
-  @include payment-panel.card;
-}
-
-.qr-code {
-  position: relative;
-  width: min(170px, 100%);
-  aspect-ratio: 1;
-  border: 8px solid #ffffff;
-  background-color: #ffffff;
-  background-image:
-    linear-gradient(
-      90deg,
-      rgba(17, 17, 17, 0.95) 0 14%,
-      transparent 14% 28%,
-      rgba(17, 17, 17, 0.95) 28% 42%,
-      transparent 42% 56%,
-      rgba(17, 17, 17, 0.95) 56% 70%,
-      transparent 70% 84%,
-      rgba(17, 17, 17, 0.95) 84% 100%
-    ),
-    linear-gradient(
-      rgba(17, 17, 17, 0.95) 0 14%,
-      transparent 14% 28%,
-      rgba(17, 17, 17, 0.95) 28% 42%,
-      transparent 42% 56%,
-      rgba(17, 17, 17, 0.95) 56% 70%,
-      transparent 70% 84%,
-      rgba(17, 17, 17, 0.95) 84% 100%
-    );
-  background-size: 18px 18px;
-  background-position: 0 0, 9px 9px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  qrcode {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-
-    ::ng-deep canvas,
-    ::ng-deep img {
-      display: block !important;
-      width: 100% !important;
-      height: 100% !important;
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-}
-
-.qr-code__finder {
-  position: absolute;
-  width: 38px;
-  height: 38px;
-  border: 5px solid #111111;
-  background: #ffffff;
-  box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 14px #111111;
-
-  &--tl {
-    top: 10px;
-    left: 10px;
-  }
-
-  &--tr {
-    top: 10px;
-    right: 10px;
-  }
-
-  &--bl {
-    bottom: 10px;
-    left: 10px;
-  }
-}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.spec.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.spec.ts
@@ -1,30 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { QrPaymentContentComponent } from './qr-payment-content.component';
-
-describe('QrPaymentContentComponent', () => {
-  it('shows the QR placeholder when there is no QR data', async () => {
-    await TestBed.configureTestingModule({
-      imports: [QrPaymentContentComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(QrPaymentContentComponent);
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelectorAll('.qr-code__finder')).toHaveLength(3);
-    expect(fixture.nativeElement.querySelector('qrcode')).toBeNull();
-  });
-
-  it('renders the QR component when data is provided', async () => {
-    await TestBed.configureTestingModule({
-      imports: [QrPaymentContentComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(QrPaymentContentComponent);
-    fixture.componentRef.setInput('qrData', 'payment-data');
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('qrcode')).not.toBeNull();
-    expect(fixture.nativeElement.querySelector('.qr-code__finder')).toBeNull();
-  });
-});
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.ts
@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-
-import { QRCodeComponent } from '../../../../../../shared/components/qrcode/qrcode.component';
-
-@Component({
-  selector: 'app-qr-payment-content',
-  standalone: true,
-  imports: [QRCodeComponent],
-  templateUrl: './qr-payment-content.component.html',
-  styleUrl: './qr-payment-content.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class QrPaymentContentComponent {
-  readonly qrData = input<string | null>(null);
-}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.html
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.html
@@ -1,22 +0,0 @@
-<div class="payment-panel__card">
-  <h3 class="payment-panel__title">Descarga la app de TelePagos para finalizar la compra</h3>
-  <div class="payment-panel__divider"></div>
-
-  <div class="store-badges" aria-label="Tiendas disponibles">
-    <div class="store-badge">
-      <i class="fa-brands fa-google-play" aria-hidden="true"></i>
-      <span class="store-badge__text">
-        <small>Disponible en</small>
-        <strong>Google Play</strong>
-      </span>
-    </div>
-
-    <div class="store-badge">
-      <i class="fa-brands fa-apple" aria-hidden="true"></i>
-      <span class="store-badge__text">
-        <small>Descargalo en</small>
-        <strong>App Store</strong>
-      </span>
-    </div>
-  </div>
-</div>
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.scss
@@ -1,47 +0,0 @@
-@use 'payment-panel' as payment-panel;
-
-@include payment-panel.host;
-
-.payment-panel {
-  @include payment-panel.card;
-}
-
-.store-badges {
-  width: 100%;
-  max-width: 210px;
-  display: grid;
-  gap: 0.8rem;
-}
-
-.store-badge {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 0.95rem;
-  border-radius: 0.85rem;
-  background: #111111;
-  color: #ffffff;
-  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16);
-
-  i {
-    font-size: 1.35rem;
-  }
-
-  &__text {
-    display: grid;
-    text-align: left;
-    line-height: 1.1;
-
-    small {
-      font-size: 0.62rem;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      opacity: 0.8;
-    }
-
-    strong {
-      font-size: 1rem;
-      font-weight: 700;
-    }
-  }
-}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.spec.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.spec.ts
@@ -1,20 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TelepagosPaymentContentComponent } from './telepagos-payment-content.component';
-
-describe('TelepagosPaymentContentComponent', () => {
-  it('shows the TelePagos download options', async () => {
-    await TestBed.configureTestingModule({
-      imports: [TelepagosPaymentContentComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(TelepagosPaymentContentComponent);
-    fixture.detectChanges();
-
-    const text = fixture.nativeElement.textContent as string;
-    expect(text).toContain('Descarga la app de TelePagos');
-    expect(text).toContain('Google Play');
-    expect(text).toContain('App Store');
-    expect(fixture.nativeElement.querySelectorAll('.store-badge')).toHaveLength(2);
-  });
-});
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.ts
@@ -1,10 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'app-telepagos-payment-content',
-  standalone: true,
-  templateUrl: './telepagos-payment-content.component.html',
-  styleUrl: './telepagos-payment-content.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TelepagosPaymentContentComponent {}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.html
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.html
@@ -1,78 +0,0 @@
-<div class="payment-panel__card">
-  <h3 class="payment-panel__title">
-    {{ transferAccount() ? 'Transferí a la siguiente cuenta desde cualquier billetera' : 'Solicitá los datos de transferencia' }}
-  </h3>
-  <div class="payment-panel__divider"></div>
-
-  @if (!transferAccount()) {
-    <form class="payment-panel__request" (submit)="$event.preventDefault(); submitPayerDni()">
-      <p class="payment-panel__description">
-        Ingresá el DNI de la persona que realizará la transferencia para poder identificar el pago.
-      </p>
-
-      <label class="payment-panel__label" for="transfer-payer-dni">DNI del pagador</label>
-      <app-input
-        id="transfer-payer-dni"
-        type="text"
-        placeholder="Ej: 12345678"
-        [maxlength]="8"
-        [invalid]="!!payerDniError()"
-        [disabled]="isLoading()"
-        [value]="payerDni()"
-        (valueChange)="payerDni.set($any($event).toString())"
-      />
-
-      @if (payerDniError(); as error) {
-        <small class="payment-panel__error">{{ error }}</small>
-      } @else if (requestError(); as error) {
-        <small class="payment-panel__error">{{ error }}</small>
-      }
-
-      <app-button type="submit" buttonClass="w-100" [disabled]="isLoading()">
-        {{ isLoading() ? 'Solicitando...' : 'Solicitar datos de transferencia' }}
-      </app-button>
-    </form>
-  } @else {
-    <div class="payment-panel__account">
-      <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>
-
-      <div class="payment-detail">
-        <span class="payment-detail__label">Titular:</span>
-        <strong class="payment-detail__value">{{ transferAccount()!.titular }}</strong>
-      </div>
-
-      <div class="payment-detail">
-        <span class="payment-detail__label">Entidad:</span>
-        <strong class="payment-detail__value">{{ transferAccount()!.entidad }}</strong>
-      </div>
-
-      <div class="payment-detail payment-detail--copy">
-        <span class="payment-detail__label">CVU:</span>
-        <strong class="payment-detail__value">{{ transferAccount()!.cvu }}</strong>
-        <app-icon-button
-          variant="copy"
-          ariaLabel="Copiar CVU"
-          (click)="requestCopy('cvu', transferAccount()!.cvu)"
-        />
-      </div>
-
-      @if (copiedTransferField() === 'cvu') {
-        <small class="payment-detail__feedback">CVU copiado</small>
-      }
-
-      <div class="payment-detail payment-detail--copy">
-        <span class="payment-detail__label">Alias:</span>
-        <strong class="payment-detail__value">{{ transferAccount()!.alias }}</strong>
-        <app-icon-button
-          variant="copy"
-          ariaLabel="Copiar alias"
-          (click)="requestCopy('alias', transferAccount()!.alias)"
-        />
-      </div>
-
-      @if (copiedTransferField() === 'alias') {
-        <small class="payment-detail__feedback">Alias copiado</small>
-      }
-    </div>
-  }
-</div>
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.scss
@@ -1,80 +0,0 @@
-@use 'payment-panel' as payment-panel;
-
-@include payment-panel.host;
-
-.payment-panel {
-  @include payment-panel.card;
-
-  &__account {
-    width: 100%;
-    display: grid;
-    gap: 0.75rem;
-    color: #7a7a7a;
-    font-size: 12px;
-  }
-
-  &__request {
-    width: 100%;
-    display: grid;
-    gap: 0.75rem;
-    text-align: left;
-  }
-
-  &__description {
-    margin: 0;
-    color: #6f6f6f;
-    font-size: 0.85rem;
-    line-height: 1.4;
-  }
-
-  &__label {
-    margin-bottom: -0.35rem;
-    color: #5e5e5e;
-    font-size: 0.8rem;
-    font-weight: 500;
-  }
-
-  &__error {
-    color: var(--bs-danger, #dc3545);
-    font-size: 0.78rem;
-  }
-
-  &__eyebrow {
-    margin: 0;
-    color: #838383;
-    font-size: 12px;
-    font-weight: 325;
-    letter-spacing: 0.06em;
-  }
-}
-
-.payment-detail {
-  display: grid;
-  grid-template-columns: auto auto;
-  justify-content: center;
-  gap: 0.35rem;
-  align-items: center;
-  font-size: 12px;
-
-  &--copy {
-    grid-template-columns: auto auto auto;
-  }
-
-  &__label {
-    color: #8a8a8a;
-    font-weight: 325;
-  }
-
-  &__value {
-    color: #5e5e5e;
-    font-weight: 500;
-  }
-
-  &__feedback {
-    display: block;
-    margin-top: -0.25rem;
-    color: var(--tenant-primary, #6376f3);
-    font-size: 0.78rem;
-    font-weight: 700;
-  }
-}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.spec.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.spec.ts
@@ -1,96 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TransferAccount } from '../../checkout-page.models';
-import { TransferPaymentContentComponent } from './transfer-payment-content.component';
-
-describe('TransferPaymentContentComponent', () => {
-  const transferAccount: TransferAccount = {
-    titular: 'Titular Test',
-    entidad: 'Entidad Test',
-    cvu: '0000000000000000000000',
-    alias: 'alias.test'
-  };
-
-  it('requests the payer DNI before showing account information', async () => {
-    await TestBed.configureTestingModule({
-      imports: [TransferPaymentContentComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.textContent).toContain('DNI del pagador');
-    expect(fixture.nativeElement.textContent).not.toContain('DATOS DE CUENTA');
-
-    const emitted: string[] = [];
-    fixture.componentInstance.requestTransferData.subscribe((dni) => emitted.push(dni));
-    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
-    input.value = '12345678';
-    input.dispatchEvent(new Event('input'));
-    fixture.nativeElement.querySelector('form').dispatchEvent(new Event('submit'));
-    fixture.detectChanges();
-
-    expect(emitted).toEqual(['12345678']);
-  });
-
-  it('shows validation errors and does not submit an invalid DNI', async () => {
-    await TestBed.configureTestingModule({
-      imports: [TransferPaymentContentComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
-    const emitted: string[] = [];
-    fixture.componentInstance.requestTransferData.subscribe((dni) => emitted.push(dni));
-    fixture.detectChanges();
-
-    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
-    input.value = '12abc';
-    input.dispatchEvent(new Event('input'));
-    fixture.nativeElement.querySelector('form').dispatchEvent(new Event('submit'));
-    fixture.detectChanges();
-
-    expect(emitted).toEqual([]);
-    expect(fixture.nativeElement.textContent).toContain('solo puede contener números');
-  });
-
-  it('shows the account information and copied-field feedback', async () => {
-    await TestBed.configureTestingModule({
-      imports: [TransferPaymentContentComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
-    fixture.componentRef.setInput('transferAccount', transferAccount);
-    fixture.componentRef.setInput('copiedTransferField', 'cvu');
-    fixture.detectChanges();
-
-    const text = fixture.nativeElement.textContent as string;
-    expect(text).toContain(transferAccount.titular);
-    expect(text).toContain(transferAccount.entidad);
-    expect(text).toContain(transferAccount.cvu);
-    expect(text).toContain(transferAccount.alias);
-    expect(text).toContain('CVU copiado');
-    expect(text).not.toContain('Alias copiado');
-  });
-
-  it('emits the selected transfer value', async () => {
-    await TestBed.configureTestingModule({
-      imports: [TransferPaymentContentComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
-    fixture.componentRef.setInput('transferAccount', transferAccount);
-    fixture.detectChanges();
-
-    const emitted: Array<{ field: string; value: string }> = [];
-    fixture.componentInstance.copyTransferValue.subscribe((value) => emitted.push(value));
-
-    const copyButtons = fixture.nativeElement.querySelectorAll('app-icon-button');
-    copyButtons[0].click();
-    copyButtons[1].click();
-
-    expect(emitted).toEqual([
-      { field: 'cvu', value: transferAccount.cvu },
-      { field: 'alias', value: transferAccount.alias }
-    ]);
-  });
-});
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.ts
@@ -1,56 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, effect, input, output, signal } from '@angular/core';
-
-import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
-import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
-import { InputComponent } from '../../../../../../shared/components/input/input.component';
-import { TransferAccount, TransferField } from '../../checkout-page.models';
-
-@Component({
-  selector: 'app-transfer-payment-content',
-  standalone: true,
-  imports: [ButtonComponent, IconButtonComponent, InputComponent],
-  templateUrl: './transfer-payment-content.component.html',
-  styleUrl: './transfer-payment-content.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TransferPaymentContentComponent {
-  readonly transferAccount = input<TransferAccount | null>(null);
-  readonly copiedTransferField = input<TransferField | null>(null);
-  readonly isLoading = input(false);
-  readonly requestError = input<string | null>(null);
-  readonly initialPayerDni = input('');
-
-  readonly copyTransferValue = output<{ field: TransferField; value: string }>();
-  readonly requestTransferData = output<string>();
-
-  protected readonly payerDni = signal('');
-  protected readonly submitted = signal(false);
-  protected readonly payerDniError = computed(() => {
-    if (!this.submitted()) return null;
-
-    const value = String(this.payerDni()).trim();
-    if (!value) return 'Ingresá el DNI de la persona que realizará la transferencia.';
-    if (!/^\d+$/.test(value)) return 'El DNI solo puede contener números.';
-    if (!/^\d{7,8}$/.test(value)) return 'El DNI debe tener 7 u 8 dígitos.';
-
-    return null;
-  });
-
-  constructor() {
-    effect(() => {
-      const initialDni = this.initialPayerDni();
-      if (initialDni && !this.payerDni()) this.payerDni.set(initialDni);
-    });
-  }
-
-  protected submitPayerDni(): void {
-    this.submitted.set(true);
-    if (this.payerDniError()) return;
-
-    this.requestTransferData.emit(String(this.payerDni()).trim());
-  }
-
-  protected requestCopy(field: TransferField, value: string): void {
-    this.copyTransferValue.emit({ field, value });
-  }
-}
--- a/src/app/features/store/store.routes.ts
+++ b/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',
--- a/src/app/shared/components/modal-shell/modal-shell.component.scss
+++ b/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:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.98));
+  background: 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,
--- a/src/app/shared/components/modal-shell/modal-shell.component.ts
+++ b/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"])'
-      ].join(', ')
+        '[tabindex]:not([tabindex="-1"])',
+      ].join(', '),
    );

    (focusTarget ?? panel).focus();
--- a/src/app/shared/components/qr-modal/qr-modal.component.html
+++ b/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>
--- a/src/app/shared/components/qr-modal/qr-modal.component.scss
+++ b/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;
+}
--- a/src/app/shared/components/qr-modal/qr-modal.component.ts
+++ b/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);
+}
--- a/src/app/shared/components/ticket/ticket.component.html
+++ b/src/app/shared/components/ticket/ticket.component.html
@@ -1,30 +0,0 @@
-<article class="ticket">
-  <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(); as ticketDate) {
-    <time class="ticket__date">{{ ticketDate }}</time>
-  }
-
-  <div class="ticket__actions">
-    <app-button variant="primary" buttonClass="ticket__qr-button" (click)="viewQr.emit()">
-      <i class="fa-solid fa-qrcode" aria-hidden="true"></i>
-      <span>Ver QR</span>
-    </app-button>
-
-    <app-icon-button variant="download" ariaLabel="Descargar ticket" (clicked)="download.emit()" />
-
-    <app-icon-button variant="share" ariaLabel="Compartir ticket" (clicked)="share.emit()" />
-  </div>
-</article>
Author	SHA1	Message	Date
ncoronel	3cefaf85d9	feat(qr-modal): implement QR modal component and integrate with tickets page	2026-07-21 14:55:46 -03:00
ncoronel	472dead0ff	feat(tickets): separate active and inactive tickets, update selection logic and styles	2026-07-21 14:35:38 -03:00
ncoronel	fa8032c557	feat(ticket): enhance ticket component with disabled and expired states, update styles and tests	2026-07-21 14:25:52 -03:00
ncoronel	6c5e10feb2	feat(ticket): update ticket title styles and adjust QR button dimensions	2026-07-21 14:14:35 -03:00
ncoronel	63541a3593	feat(ticket): adjust QR button styles for better responsiveness	2026-07-21 14:12:50 -03:00
ncoronel	bc37a91c7f	feat(tickets): implement tickets page with ticket component and service	2026-07-21 14:12:23 -03:00