feat: add description_html to tenant heroConfig and update tests for hero banner rendering

src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts

@@ -191,6 +191,7 @@ describe('StoreHomePageComponent', () => {
     const tenant = createTenant({
       heroConfig: {
         title_html: '<h1>Fiesta Fútbol Infantil</h1>',
+        description_html: '<p>Viví una jornada inolvidable de fútbol infantil.</p>',
         background_image_id: 'https://example.com/hero.jpg',
       },
     });
@@ -258,6 +259,7 @@ describe('StoreHomePageComponent', () => {
     expect(hero).not.toBeNull();
     expect(hero.style.backgroundImage).toContain('https://example.com/hero.jpg');
     expect(hero.textContent).toContain('Fiesta Fútbol Infantil');
+    expect(hero.textContent).toContain('Viví una jornada inolvidable de fútbol infantil.');
     expect(hero.textContent).toContain('Rosario, Santa Fe');
     expect(hero.textContent).toContain('2026-12-05, 2026-12-06');
     const heroComponent = fixture.debugElement.query(By.directive(HeroBannerComponent))
@@ -265,7 +267,7 @@ describe('StoreHomePageComponent', () => {
     expect(heroComponent.eventConfig?.contact).toEqual(tenant.social_media);
   });
 
-  it('maps the active event and tenant social media to the event config', async () => {
+  it('renders only the active event data when the tenant does not have the hero extra', async () => {
     const tenant = createTenant();
     tenant.active_event_id = 12;
     tenant.active_event = {
@@ -281,15 +283,6 @@ describe('StoreHomePageComponent', () => {
         },
       ],
     };
-    tenant.social_media = [
-      {
-        code: 'instagram',
-        icon: 'fa-brands fa-instagram',
-        name: 'Instagram',
-        url: 'https://instagram.com/fiesta',
-      },
-    ];
-
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
@@ -308,25 +301,18 @@ describe('StoreHomePageComponent', () => {
     const fixture = TestBed.createComponent(StoreHomePageComponent);
     fixture.detectChanges();
 
-    const eventConfig = (
-      fixture.debugElement.query(By.directive(HeroBannerComponent))
-        .componentInstance as HeroBannerComponent
-    ).eventConfig;
+    const element = fixture.nativeElement as HTMLElement;
+    const heroComponent = fixture.debugElement.query(By.directive(HeroBannerComponent))
+      .componentInstance as HeroBannerComponent;
 
-    expect(eventConfig).toEqual({
-      id: 12,
-      title: 'Fiesta Fútbol Infantil',
-      location: 'Sunchales, Santa Fe',
-      dates: [
-        {
-          id: 25,
-          date: '2026-10-09',
-          start_time: '09:00:00',
-          end_time: '18:00:00',
-        },
-      ],
-      contact: tenant.social_media,
-    });
+    expect(heroComponent.heroConfig).toBeNull();
+    expect(element.querySelector('.hero-banner')).toBeNull();
+    expect(element.querySelector('.hero-banner-container')).toBeNull();
+    expect(element.querySelector('.hero-content')).toBeNull();
+    expect(element.querySelector('.event-card')).not.toBeNull();
+    expect(element.textContent).toContain('Fiesta Fútbol Infantil');
+    expect(element.textContent).toContain('Sunchales, Santa Fe');
+    expect(element.textContent).toContain('2026-10-09');
   });
 
   it('requests another page for the selected featured group', async () => {

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

@@ -1,6 +1,8 @@
-<div class="hero-banner-container">
+<div [class.hero-banner-container]="heroConfig">
   <div
-    class="hero-banner position-relative rounded"
+    [class.hero-banner]="heroConfig"
+    [class.position-relative]="heroConfig"
+    [class.rounded]="heroConfig"
     [ngStyle]="{
       'background-image': heroConfig?.background_image_id
         ? 'url(' + heroConfig.background_image_id + ')'
@@ -33,7 +35,10 @@
     }
 
     @if (eventConfig) {
-      <div class="event-card-container position-absolute w-100 d-flex justify-content-center">
+      <div
+        class="event-card-container w-100 d-flex justify-content-center"
+        [class.position-absolute]="heroConfig"
+      >
         <div class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
           @if (eventConfig.title) {
             <h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>