feat(event): show date status information in storefront

src/app/shared/components/hero-banner/hero-banner.component.html

@@ -88,7 +88,12 @@
                       <td>
                         <span class="event-schedule-value">
                           <i class="fa-regular fa-calendar" aria-hidden="true"></i>
-                          <span>{{ formatScheduleDate(eventDate.date) }}</span>
+                          <span [class.event-schedule-date--canceled]="eventDate.isCanceled">
+                            {{ formatScheduleDate(eventDate.date) }}
+                          </span>
+                          @if (eventDate.info_text) {
+                            <app-tooltip [message]="eventDate.info_text" />
+                          }
                         </span>
                       </td>
                       <td>

src/app/shared/components/hero-banner/hero-banner.component.scss

@@ -164,6 +164,10 @@
   }
 }
 
+.event-schedule-date--canceled {
+  text-decoration: line-through;
+}
+
 @media (max-width: 767.98px) {
   .hero-banner-container {
     padding-bottom: 0;

src/app/shared/components/hero-banner/hero-banner.component.spec.ts

@@ -22,9 +22,7 @@ describe('HeroBannerComponent', () => {
     expect(element.querySelector('img')?.getAttribute('src')).toBe(
       'https://example.com/desktop.jpg',
     );
-    expect(element.querySelector('.hero-banner')?.classList).toContain(
-      'hero-banner--with-media',
-    );
+    expect(element.querySelector('.hero-banner')?.classList).toContain('hero-banner--with-media');
   });
 
   it('keeps the fallback banner sizing when there is no image', async () => {
@@ -52,12 +50,16 @@ describe('HeroBannerComponent', () => {
           date: '2026-10-09',
           start_time: '10:00:00',
           end_time: '20:30:00',
+          info_text: 'Esta fecha fue cancelada.',
+          isCanceled: true,
         },
         {
           id: 2,
           date: '2026-10-10',
           start_time: '10:00:00',
           end_time: '22:00:00',
+          info_text: null,
+          isCanceled: false,
         },
       ],
     });
@@ -78,6 +80,10 @@ describe('HeroBannerComponent', () => {
     expect(element.querySelectorAll('.event-schedules tbody tr')).toHaveLength(2);
     expect(element.querySelector('.event-schedules')?.textContent).toContain('9 de Octubre 2026');
     expect(element.querySelector('.event-schedules')?.textContent).toContain('10:00 - 20:30');
+    expect(element.querySelector('.event-schedule-date--canceled')).not.toBeNull();
+    expect(element.querySelector('app-tooltip')?.textContent).toContain(
+      'Esta fecha fue cancelada.',
+    );
 
     toggle?.click();
     fixture.detectChanges();

src/app/shared/components/hero-banner/hero-banner.component.ts

@@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { EventConfig, HeroConfig } from '../../../core/services/tenant.interface';
 import { ButtonComponent } from '../button/button.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 
 @Component({
   selector: 'app-hero-banner',
   standalone: true,
-  imports: [CommonModule, RouterModule, ButtonComponent],
+  imports: [CommonModule, RouterModule, ButtonComponent, TooltipComponent],
   templateUrl: './hero-banner.component.html',
   styleUrl: './hero-banner.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,