diff --git 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
index d4ee560..2d31ade 100644
--- 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
@@ -1,4 +1,4 @@
-
+
- @if (date(); as ticketDate) {
-
+ @if (date() || expired()) {
+
+ @if (expired()) {
+ VENCIDO
+ }
+ @if (date(); as ticketDate) {
+
+ }
+
}
-
+
Ver QR
-
-
+ @if (!disabled()) {
+
+
+ }
diff --git 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
index 881a0cb..73b2910 100644
--- 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
@@ -48,16 +48,30 @@
}
.ticket__id {
+ margin-top: 3px;
font-size: 12px;
line-height: 1.4;
}
.ticket__date {
+ display: block;
font-size: 10px;
line-height: 1.4;
white-space: nowrap;
}
+.ticket__status {
+ text-align: center;
+}
+
+.ticket__expired {
+ display: block;
+ font-size: 10px;
+ font-weight: 700;
+ line-height: 1.4;
+ text-transform: uppercase;
+}
+
.ticket__actions {
display: flex;
align-items: center;
@@ -72,6 +86,17 @@
padding-inline: 14px;
}
+.ticket--disabled {
+ 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;
@@ -83,7 +108,7 @@
gap: 10px;
}
- .ticket__date {
+ .ticket__status {
grid-column: 2;
}
diff --git 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
index 20e9709..e69cccf 100644
--- 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
@@ -32,4 +32,32 @@ describe('TicketComponent', () => {
expect(download).toHaveBeenCalledOnce();
expect(share).toHaveBeenCalledOnce();
});
+
+ it('renders the expired disabled state without secondary actions', async () => {
+ await TestBed.configureTestingModule({ imports: [TicketComponent] }).compileComponents();
+
+ const fixture = TestBed.createComponent(TicketComponent);
+ fixture.componentRef.setInput('ticketId', '0000000000');
+ fixture.componentRef.setInput('date', '09 de octubre');
+ fixture.componentRef.setInput('disabled', true);
+ fixture.componentRef.setInput('expired', true);
+
+ const viewQr = vi.fn();
+ fixture.componentInstance.viewQr.subscribe(viewQr);
+ fixture.detectChanges();
+
+ const element = fixture.nativeElement as HTMLElement;
+ const ticket = element.querySelector('.ticket');
+ const qrButton = element.querySelector('app-button button');
+
+ expect(ticket?.classList.contains('ticket--disabled')).toBe(true);
+ expect(ticket?.getAttribute('aria-disabled')).toBe('true');
+ expect(element.textContent).toContain('VENCIDO');
+ expect(qrButton?.disabled).toBe(true);
+ expect(element.querySelector('[aria-label="Descargar ticket"]')).toBeNull();
+ expect(element.querySelector('[aria-label="Compartir ticket"]')).toBeNull();
+
+ qrButton?.click();
+ expect(viewQr).not.toHaveBeenCalled();
+ });
});
diff --git 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
index f70f136..6e07cd4 100644
--- 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
@@ -12,8 +12,10 @@ import { IconButtonComponent } from '../../../../../../../../shared/components/i
})
export class TicketComponent {
readonly title = input('ENTRADA GENERAL');
- readonly ticketId = input.required();
+ readonly ticketId = input.required();
readonly date = input(null);
+ readonly disabled = input(false);
+ readonly expired = input(false);
readonly selected = model(false);
readonly viewQr = output();
diff --git 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
index eace3e8..7f0a81e 100644
--- 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
@@ -33,8 +33,10 @@
@for (ticket of tickets(); track ticket.id) {