feat(storefront): show event date notices

src/app/shared/components/event-date-notice-modal/event-date-notice-modal.component.html

@@ -0,0 +1,17 @@
+<article class="event-date-notice">
+  <h2 class="event-date-notice__title">{{ data.title }}</h2>
+
+  <p class="event-date-notice__description">
+    @for (part of data.message; track $index) {
+      @if (part.bold) {
+        <strong>{{ part.text }}</strong>
+      } @else {
+        {{ part.text }}
+      }
+    }
+  </p>
+
+  <div class="event-date-notice__actions">
+    <app-button (click)="close()">Cerrar</app-button>
+  </div>
+</article>

src/app/shared/components/event-date-notice-modal/event-date-notice-modal.component.scss

@@ -0,0 +1,33 @@
+.event-date-notice {
+  display: grid;
+  gap: 20px;
+  justify-items: center;
+  text-align: center;
+}
+
+.event-date-notice__title,
+.event-date-notice__description {
+  margin: 0;
+}
+
+.event-date-notice__title {
+  color: var(--color-danger, #dc3545);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.event-date-notice__description {
+  color: #666666;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.event-date-notice__description strong {
+  font-weight: 700;
+}
+
+.event-date-notice__actions {
+  width: 100%;
+}

src/app/shared/components/event-date-notice-modal/event-date-notice-modal.component.spec.ts

@@ -0,0 +1,57 @@
+import '@angular/compiler';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { MODAL_DATA, ModalRef } from '../../../core/services/modal.service';
+import { TenantEventDateNotice } from '../../../core/services/tenant.interface';
+import { EventDateNoticeModalComponent } from './event-date-notice-modal.component';
+
+describe('EventDateNoticeModalComponent', () => {
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('renders the precalculated message and emphasizes its marked parts', async () => {
+    const close = vi.fn();
+    const data: TenantEventDateNotice = {
+      type: 'rescheduled',
+      title: 'FECHAS REPROGRAMADAS!',
+      message: [
+        { text: 'Las fechas del ', bold: false },
+        { text: '09 y 10 de Octubre de 2026', bold: true },
+        { text: ' han sido reprogramadas, ', bold: false },
+        { text: 'respectivamente', bold: true },
+        { text: '.', bold: false },
+      ],
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [EventDateNoticeModalComponent],
+      providers: [
+        { provide: MODAL_DATA, useValue: data },
+        { provide: ModalRef, useValue: { close } },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(EventDateNoticeModalComponent);
+    fixture.detectChanges();
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelector('h2')?.textContent).toContain(data.title);
+    expect(
+      [...element.querySelectorAll('strong')].map((strong) => strong.textContent?.trim()),
+    ).toEqual(['09 y 10 de Octubre de 2026', 'respectivamente']);
+
+    element.querySelector('button')?.click();
+    expect(close).toHaveBeenCalledOnce();
+  });
+});

src/app/shared/components/event-date-notice-modal/event-date-notice-modal.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import { MODAL_DATA, ModalRef } from '../../../core/services/modal.service';
+import { TenantEventDateNotice } from '../../../core/services/tenant.interface';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-event-date-notice-modal',
+  imports: [ButtonComponent],
+  templateUrl: './event-date-notice-modal.component.html',
+  styleUrl: './event-date-notice-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EventDateNoticeModalComponent {
+  protected readonly data = inject<TenantEventDateNotice>(MODAL_DATA);
+  private readonly modalRef = inject<ModalRef<void>>(ModalRef);
+
+  protected close(): void {
+    this.modalRef.close();
+  }
+}