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

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

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

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>

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',

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>

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

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

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

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

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/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/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,

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

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

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>