feat(tickets): show event context in account sidebar

src/app/features/store/components/menu-page-layout/menu-page-layout.component.html

@@ -14,6 +14,12 @@
         </a>
       }
     </nav>
+
+    @if (sidebarContent.template(); as sidebarTemplate) {
+      <div class="menu-page-layout__context">
+        <ng-container [ngTemplateOutlet]="sidebarTemplate" />
+      </div>
+    }
   </aside>
 
   <main class="menu-page-layout__content">

src/app/features/store/components/menu-page-layout/menu-page-layout.component.scss

@@ -40,6 +40,10 @@
     gap: 1rem;
   }
 
+  &__context {
+    margin-top: 2rem;
+  }
+
   &__link {
     color: #888888;
     font-size: 0.875rem;

src/app/features/store/components/menu-page-layout/menu-page-layout.component.spec.ts

@@ -1,11 +1,34 @@
-import { signal } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { ActivatedRoute, provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
 import { describe, expect, it } from 'vitest';
 
 import { Tenant } from '../../../../core/services/tenant.interface';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { MenuPageLayoutComponent } from './menu-page-layout.component';
+import { MenuPageSidebarContentDirective } from './menu-page-sidebar-content.directive';
+
+@Component({
+  selector: 'app-sidebar-test-badge',
+  template: '<strong class="sidebar-test-badge">Componente contextual</strong>',
+})
+class SidebarTestBadgeComponent {}
+
+@Component({
+  imports: [MenuPageSidebarContentDirective, SidebarTestBadgeComponent],
+  template: `
+    <p class="routed-page-content">Contenido principal</p>
+
+    <ng-template menuPageSidebarContent>
+      <p class="sidebar-context-copy">{{ contextualCopy }}</p>
+      <app-sidebar-test-badge />
+    </ng-template>
+  `,
+})
+class SidebarTestPageComponent {
+  protected readonly contextualCopy = 'HTML declarado por la página';
+}
 
 function createTenant(): Tenant {
   return {
@@ -133,4 +156,44 @@ describe('MenuPageLayoutComponent', () => {
       'Consultas habituales',
     );
   });
+
+  it('renders page-owned HTML and components below the sidebar navigation', async () => {
+    const tenant = signal(createTenant());
+
+    await TestBed.configureTestingModule({
+      providers: [
+        provideRouter([
+          {
+            path: 'mi-cuenta',
+            component: MenuPageLayoutComponent,
+            data: {
+              menuCode: 'account',
+              navigationLabel: 'Secciones de mi cuenta',
+            },
+            children: [{ path: 'tickets', component: SidebarTestPageComponent }],
+          },
+        ]),
+        {
+          provide: TenantService,
+          useValue: { tenant: tenant.asReadonly() },
+        },
+      ],
+    }).compileComponents();
+
+    const harness = await RouterTestingHarness.create('/mi-cuenta/tickets');
+    const element = harness.routeNativeElement as HTMLElement;
+    const navigation = element.querySelector('.menu-page-layout__nav');
+    const context = element.querySelector('.menu-page-layout__context');
+
+    expect(context?.previousElementSibling).toBe(navigation);
+    expect(context?.querySelector('.sidebar-context-copy')?.textContent?.trim()).toBe(
+      'HTML declarado por la página',
+    );
+    expect(context?.querySelector('.sidebar-test-badge')?.textContent?.trim()).toBe(
+      'Componente contextual',
+    );
+    expect(element.querySelector('.routed-page-content')?.textContent?.trim()).toBe(
+      'Contenido principal',
+    );
+  });
 });

src/app/features/store/components/menu-page-layout/menu-page-layout.component.ts

@@ -1,18 +1,22 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, computed, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 import { findMenu } from '../../../../core/services/menu.utils';
 import { TenantService } from '../../../../core/services/tenant.service';
+import { MenuPageSidebarContentService } from './menu-page-sidebar-content.service';
 
 @Component({
   selector: 'app-menu-page-layout',
-  imports: [RouterLink, RouterLinkActive, RouterOutlet],
+  imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, RouterOutlet],
+  providers: [MenuPageSidebarContentService],
   templateUrl: './menu-page-layout.component.html',
   styleUrl: './menu-page-layout.component.scss',
 })
 export class MenuPageLayoutComponent {
   private readonly route = inject(ActivatedRoute);
   private readonly tenantService = inject(TenantService);
+  protected readonly sidebarContent = inject(MenuPageSidebarContentService);
 
   protected readonly navigationLabel =
     (this.route.snapshot.data['navigationLabel'] as string | undefined) ?? 'Secciones';

src/app/features/store/components/menu-page-layout/menu-page-sidebar-content.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, inject, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+
+import { MenuPageSidebarContentService } from './menu-page-sidebar-content.service';
+
+/**
+ * Projects page-owned content into the sidebar of the closest menu page layout.
+ * The template keeps the declaration context of the routed page, so it can use
+ * that page's fields, bindings and imported components.
+ */
+@Directive({
+  selector: 'ng-template[menuPageSidebarContent]',
+})
+export class MenuPageSidebarContentDirective implements OnInit, OnDestroy {
+  private readonly template = inject(TemplateRef<unknown>);
+  private readonly sidebarContent = inject(MenuPageSidebarContentService);
+
+  ngOnInit(): void {
+    this.sidebarContent.register(this.template);
+  }
+
+  ngOnDestroy(): void {
+    this.sidebarContent.unregister(this.template);
+  }
+}

src/app/features/store/components/menu-page-layout/menu-page-sidebar-content.service.ts

@@ -0,0 +1,18 @@
+import { Injectable, signal, TemplateRef } from '@angular/core';
+
+@Injectable()
+export class MenuPageSidebarContentService {
+  private readonly templateState = signal<TemplateRef<unknown> | null>(null);
+
+  readonly template = this.templateState.asReadonly();
+
+  register(template: TemplateRef<unknown>): void {
+    this.templateState.set(template);
+  }
+
+  unregister(template: TemplateRef<unknown>): void {
+    if (this.templateState() === template) {
+      this.templateState.set(null);
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+<section class="ticket-event-context" aria-labelledby="ticket-event-context-title">
+  @if (event().image; as image) {
+    <img class="ticket-event-context__image" [src]="image" alt="" />
+  }
+
+  <h2 id="ticket-event-context-title" class="ticket-event-context__title">
+    {{ event().title }}
+  </h2>
+</section>

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

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+}
+
+.ticket-event-context {
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.ticket-event-context__image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+.ticket-event-context__title {
+  margin: 1rem 0 0;
+  color: #666666;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.4;
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+
+export interface TicketEventContext {
+  title: string;
+  image: string | null;
+}
+
+@Component({
+  selector: 'app-ticket-event-context',
+  templateUrl: './ticket-event-context.component.html',
+  styleUrl: './ticket-event-context.component.scss',
+})
+export class TicketEventContextComponent {
+  readonly event = input.required<TicketEventContext>();
+}

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

@@ -109,3 +109,9 @@
     }
   </div>
 </app-menu-content-section>
+
+@if (eventId !== undefined) {
+  <ng-template menuPageSidebarContent>
+    <app-ticket-event-context [event]="eventContext()" />
+  </ng-template>
+}

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

@@ -1,18 +1,22 @@
 import { signal } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { TenantService } from '../../../../../../core/services/tenant.service';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { ModalService } from '../../../../../../core/services/modal.service';
+import { MenuPageSidebarContentService } from '../../../../components/menu-page-layout/menu-page-sidebar-content.service';
 import { TicketComponent } from './components/ticket/ticket.component';
 import { TicketResponse, TicketService } from './ticket.service';
 import { TicketsPage } from './tickets-page';
 
 function withCustomLoading<T extends object>(service: T): T & { withCustomLoading: () => T } {
-  return Object.assign(service, {
+  const enhancedService = Object.assign({ getTicketEvents: () => Promise.resolve([]) }, service);
-    withCustomLoading: () => service,
+
+  return Object.assign(enhancedService, {
+    withCustomLoading: () => enhancedService,
   });
 }
 
@@ -300,4 +304,69 @@ describe('TicketsPage', () => {
       ticket: 'ticket-1',
     });
   });
+
+  it('declares contextual test data when tickets belong to an event', async () => {
+    const getTickets = vi.fn().mockResolvedValue([]);
+    const getTicketEvents = vi.fn().mockResolvedValue([
+      {
+        id: 42,
+        title: 'XX Campeonato Mundial de Pelota Vasca',
+        image: 'https://example.com/pelota-vasca.jpg',
+      },
+    ]);
+
+    await TestBed.configureTestingModule({
+      imports: [TicketsPage],
+      providers: [
+        MenuPageSidebarContentService,
+        { provide: ToastService, useValue: { danger: vi.fn() } },
+        {
+          provide: ActivatedRoute,
+          useValue: { snapshot: { paramMap: { get: () => '42' } } },
+        },
+      ],
+    })
+      .overrideComponent(TicketsPage, {
+        set: {
+          providers: [
+            {
+              provide: TicketService,
+              useValue: withCustomLoading({ getTickets, getTicketEvents }),
+            },
+          ],
+        },
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(TicketsPage);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    await vi.waitFor(() => expect(getTicketEvents).toHaveBeenCalledOnce());
+    await vi.waitFor(() =>
+      expect(
+        (
+          fixture.componentInstance as unknown as { eventContext: () => { image: string | null } }
+        ).eventContext().image,
+      ).toBe('https://example.com/pelota-vasca.jpg'),
+    );
+
+    const sidebarContent = TestBed.inject(MenuPageSidebarContentService);
+    const sidebarView = sidebarContent.template()?.createEmbeddedView({});
+    sidebarView?.detectChanges();
+
+    const container = document.createElement('div');
+    sidebarView?.rootNodes.forEach((node) => container.appendChild(node));
+
+    expect(getTickets).toHaveBeenCalledWith(42);
+    expect(container.querySelector('.ticket-event-context')?.textContent).toContain(
+      'XX Campeonato Mundial de Pelota Vasca',
+    );
+    expect(container.querySelector<HTMLImageElement>('.ticket-event-context__image')?.src).toBe(
+      'https://example.com/pelota-vasca.jpg',
+    );
+    expect(container.querySelector('.ticket-event-context__details')).toBeNull();
+    expect(container.querySelector('.ticket-event-context__recommendation')).toBeNull();
+
+    sidebarView?.destroy();
+  });
 });

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

@@ -5,12 +5,23 @@ 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 { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';
+import { MenuPageSidebarContentDirective } from '../../../../components/menu-page-layout/menu-page-sidebar-content.directive';
+import {
+  TicketEventContext,
+  TicketEventContextComponent,
+} from './components/ticket-event-context/ticket-event-context.component';
 import { TicketComponent } from './components/ticket/ticket.component';
 import { TicketResponse, TicketService } from './ticket.service';
 
 @Component({
   selector: 'app-tickets-page',
-  imports: [IconButtonComponent, TicketComponent, MenuContentSectionComponent],
+  imports: [
+    IconButtonComponent,
+    TicketComponent,
+    TicketEventContextComponent,
+    MenuContentSectionComponent,
+    MenuPageSidebarContentDirective,
+  ],
   providers: [TicketService],
   templateUrl: './tickets-page.html',
   styleUrl: './tickets-page.scss',
@@ -21,6 +32,11 @@ export class TicketsPage implements OnInit {
   private readonly modalService = inject(ModalService);
   private readonly route = inject(ActivatedRoute, { optional: true });
 
+  protected readonly eventId = this.eventIdFromRoute();
+  protected readonly eventContext = signal<TicketEventContext>({
+    title: 'XX Campeonato Mundial de Pelota Vasca',
+    image: null,
+  });
   protected readonly tickets = signal<TicketResponse[]>([]);
   protected readonly activeTickets = computed(() =>
     this.tickets().filter((ticket) => !this.isInactive(ticket)),
@@ -38,9 +54,25 @@ export class TicketsPage implements OnInit {
 
   async ngOnInit(): Promise<void> {
     try {
-      this.tickets.set(
+      const service = this.ticketService.withCustomLoading();
-        await this.ticketService.withCustomLoading().getTickets(this.eventIdFromRoute()),
+      this.tickets.set(await service.getTickets(this.eventId));
-      );
+
+      if (this.eventId !== undefined) {
+        void service
+          .getTicketEvents()
+          .then((events) => {
+            const event = events.find((candidate) => candidate.id === this.eventId);
+
+            if (event) {
+              this.eventContext.update((context) => ({
+                ...context,
+                title: event.title,
+                image: event.image,
+              }));
+            }
+          })
+          .catch(() => undefined);
+      }
     } catch {
       this.toastService.danger('Hubo un error al cargar los tickets');
     } finally {