feat: add configurable display options for categories and search bar in store header

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -19,8 +19,9 @@
           </a>
         </div>
 
+        @if (displaySeachBar()) {
           <div class="col-12 px-0 d-md-none order-3">
-          <hr class="store-layout__mobile-separator">
+            <hr class="store-layout__mobile-separator" />
           </div>
 
           <div class="col-12 col-md order-4 order-md-2">
@@ -57,8 +58,11 @@
               }
             </div>
           </div>
+        }
 
-        <div class="store-layout__actions-column col-auto col-md-auto order-2 order-md-3 ms-auto d-flex flex-row align-items-center justify-content-end gap-2 gap-md-3">
+        <div
+          class="store-layout__actions-column col-auto col-md-auto order-2 order-md-3 ms-auto d-flex flex-row align-items-center justify-content-end gap-2 gap-md-3"
+        >
           @if (ticketsMenu(); as menu) {
             <app-button
               variant="primary"
@@ -108,7 +112,10 @@
             />
 
             @if (isMobileMenuOpen()) {
-              <div id="store-mobile-menu" class="position-absolute end-0 bg-white rounded shadow mt-2 py-2 store-layout__mobile-dropdown-menu">
+              <div
+                id="store-mobile-menu"
+                class="position-absolute end-0 bg-white rounded shadow mt-2 py-2 store-layout__mobile-dropdown-menu"
+              >
                 <a
                   class="dropdown-item d-flex align-items-center gap-2 px-3 py-2 text-decoration-none store-layout__mobile-dropdown-item"
                   (click)="onMobileAccountClick()"
@@ -117,7 +124,8 @@
                   <span class="fw-medium">Mi cuenta</span>
                 </a>
 
-                <hr class="my-1 border-secondary opacity-25">
+                @if (displayCategories()) {
+                  <hr class="my-1 border-secondary opacity-25" />
 
                   @for (category of categories(); track category.id) {
                     <a
@@ -127,6 +135,7 @@
                       <span class="fw-medium">{{ category.nombre }}</span>
                     </a>
                   }
+                }
               </div>
             }
           </div>
@@ -135,6 +144,7 @@
     </div>
   </div>
 
+  @if (displayCategories()) {
     <div class="store-layout__categories d-none d-md-block">
       <div class="container-xl px-3 px-md-4">
         <div class="store-layout__category-menu">
@@ -159,4 +169,5 @@
         </div>
       </div>
     </div>
+  }
 </header>

src/app/core/layout/store-layout/store-header/store-header.component.ts

@@ -35,6 +35,8 @@ export class StoreHeaderComponent {
   readonly accountNavigationMenus = input<readonly Menu[]>([]);
   readonly ticketsMenu = input<Menu | null>(null);
   readonly categories = input<readonly Category[]>([]);
+  readonly displayCategories = input(true);
+  readonly displaySeachBar = input(true);
   readonly cartClick = output<void>();
   readonly ticketsClick = output<void>();
   readonly loginClick = output<void>();

src/app/core/layout/store-layout/store-layout.component.html

@@ -7,6 +7,8 @@
     [accountNavigationMenus]="accountNavigationMenus()"
     [ticketsMenu]="ticketsMenu() ?? null"
     [categories]="tenant()?.categories ?? []"
+    [displayCategories]="tenant()?.display_categories ?? true"
+    [displaySeachBar]="tenant()?.display_seach_bar ?? true"
     (cartClick)="isCartOpen.set(!isCartOpen())"
     (ticketsClick)="onTicketsClick()"
     (loginClick)="onLoginClick()"
@@ -16,10 +18,7 @@
   />
 
   @if (isCartOpen()) {
-    <div
+    <div class="store-layout__cart-overlay" (click)="isCartOpen.set(false)"></div>
-      class="store-layout__cart-overlay"
-      (click)="isCartOpen.set(false)"
-    ></div>
     <div class="store-layout__cart-dropdown card border-0 shadow-lg">
       <app-cart
         [showClose]="true"
@@ -30,10 +29,7 @@
         [backgroundColor]="'#ffffff'"
         (closed)="isCartOpen.set(false)"
       >
-        <app-button
+        <app-button variant="secondary" class="flex-grow-1" (click)="isCartOpen.set(false)"
-          variant="secondary"
-          class="flex-grow-1"
-          (click)="isCartOpen.set(false)"
           >Seguir comprando</app-button
         >
         <app-button

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -204,6 +204,29 @@ describe('StoreLayoutComponent', () => {
     expect(compiled.querySelector('app-store-footer .store-layout__footer')).not.toBeNull();
   });
 
+  it('hides the configured header elements when the tenant disables them', () => {
+    tenantState.set({
+      ...tenant,
+      categories: [{ id: 1, nombre: 'Remeras', subcategories: [] }],
+      display_categories: false,
+      display_seach_bar: false,
+    });
+
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+
+    expect(compiled.querySelector('#store-search-input')).toBeNull();
+    expect(compiled.querySelector('.store-layout__category-trigger')).toBeNull();
+
+    const header = fixture.debugElement.query(By.directive(StoreHeaderComponent));
+    (header.componentInstance as any).toggleMobileMenu();
+    fixture.detectChanges();
+
+    expect(compiled.querySelectorAll('.store-layout__mobile-dropdown-item')).toHaveLength(1);
+  });
+
   it('renders the tenant branding and action icons', () => {
     const fixture = TestBed.createComponent(StoreLayoutComponent);
     fixture.detectChanges();

src/app/core/services/tenant.interface.ts

@@ -114,6 +114,8 @@ export interface Tenant {
   search_product_layout?: 'row' | 'column_with_image' | 'column_with_cart';
   search_group_layout?: 'paginated' | 'simple' | 'simple_vertical' | 'carousel';
   search_items_per_page?: number;
+  display_categories?: boolean;
+  display_seach_bar?: boolean;
   social_media?: SocialMedia[];
   menues?: Menu[];
   categories: Category[];

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

@@ -222,10 +222,7 @@
   }
 
   .hero-action ::ng-deep .btn {
-    min-height: 1.875rem;
+    font-size: 11px;
-    padding: 0.4rem 1.35rem;
-    border-radius: 0.25rem;
-    font-size: 0.625rem;
   }
 
   .event-card-container {