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 @@ -
+
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) {