Revert "feat(header): refactor immersive store header for improved search functionality and styling"

This reverts commit a06f8146e5.

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

@@ -1,14 +1,14 @@
-<header class="immersive-header" [class.immersive-header--compact]="!showHero()">
+<header
+  class="immersive-header"
+  [class.immersive-header--compact]="!showHero()"
+>
   <div
     class="immersive-header__backdrop"
     [style.background-image]="backgroundImageUrl() ? 'url(' + backgroundImageUrl() + ')' : null"
   ></div>
 
   <div class="immersive-header__content">
-    <nav
+    <nav class="immersive-header__nav container-xl px-3 px-md-4" aria-label="Navegación de la tienda">
-      class="immersive-header__nav container-xl px-3 px-md-4"
-      aria-label="Navegación de la tienda"
-    >
       <a routerLink="/" class="immersive-header__brand" aria-label="Ir al inicio">
         @if (logoUrl()) {
           <img [src]="logoUrl()" alt="Logo del comercio" />
@@ -19,14 +19,19 @@
         @if (displaySearchBar()) {
           <form class="immersive-header__search" role="search" (submit)="submitSearch($event)">
             <label class="visually-hidden" for="immersive-search-input">Buscar productos</label>
-            <app-input
+            <input
               id="immersive-search-input"
-              placeholder="Buscar"
               type="search"
-              [(value)]="searchTerm"
+              placeholder="Buscar"
-              [invalid]="showSearchError()"
+              autocomplete="off"
-              (valueChange)="showSearchError.set(false)"
+              [formControl]="searchControl"
+              [attr.aria-invalid]="showSearchError()"
+              [attr.aria-describedby]="showSearchError() ? 'immersive-search-error' : null"
+              (input)="showSearchError.set(false)"
             />
+            <button type="submit" aria-label="Buscar">
+              <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
+            </button>
             @if (showSearchError()) {
               <span id="immersive-search-error" class="immersive-header__search-error" role="alert"
                 >Ingresá al menos 3 caracteres.</span
@@ -36,13 +41,9 @@
         }
 
         @if (ticketsMenu(); as menu) {
-          <app-button
+          <button class="immersive-header__tickets" type="button" (click)="ticketsClick.emit()">
-            variant="secondary"
-            hostClass="immersive-header__tickets"
-            (click)="ticketsClick.emit()"
-          >
             {{ menu.label }}
-          </app-button>
+          </button>
         }
 
         @if (displayCart()) {
@@ -77,11 +78,7 @@
     </nav>
 
     @if (checkoutRemainingTime(); as remainingTime) {
-      <div
+      <div class="immersive-header__timer container-xl px-3 px-md-4" role="timer" aria-label="Tiempo restante de compra">
-        class="immersive-header__timer container-xl px-3 px-md-4"
-        role="timer"
-        aria-label="Tiempo restante de compra"
-      >
         Tiempo restante de compra: <strong>{{ remainingTime }}</strong>
       </div>
     }

src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss

@@ -74,19 +74,57 @@
 
 .immersive-header__search {
   position: relative;
+  display: flex;
   width: clamp(115px, 17vw, 205px);
+  height: 2rem;
+  border: 1px solid var(--tenant-primary, #ff7006);
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.1);
+}
+.immersive-header__search input {
+  width: 100%;
+  min-width: 0;
+  padding: 0 0.5rem;
+  border: 0;
+  outline: 0;
+  color: #fff;
+  background: transparent;
+  font-size: 0.75rem;
+}
+.immersive-header__search input::placeholder {
+  color: rgba(255, 255, 255, 0.78);
+}
+.immersive-header__search input::-webkit-search-cancel-button {
+  filter: invert(1);
+}
+.immersive-header__search button {
+  border: 0;
+  padding-inline: 0.55rem;
+  color: var(--tenant-primary, #ff7006);
+  background: transparent;
+}
+.immersive-header__search:focus-within {
+  outline: 2px solid var(--tenant-primary, #ff7006);
+  outline-offset: 2px;
 }
 .immersive-header__search-error {
   position: absolute;
   top: calc(100% + 0.25rem);
   right: 0;
   width: max-content;
-  color: var(--tenant-danger, #dc3545);
+  color: #fff;
   font-size: 0.7rem;
 }
-
+.immersive-header__tickets {
-:host ::ng-deep .immersive-header__tickets {
+  border: 1px solid var(--tenant-primary, #ff7006);
-  width: auto;
+  border-radius: 3px;
+  padding: 0.25rem 0.6rem;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.2);
+  font-size: 0.75rem;
+}
+.immersive-header__tickets:hover {
+  background: var(--tenant-primary, #ff7006);
 }
 .immersive-header__account {
   position: relative;
@@ -181,3 +219,9 @@
     font-size: clamp(3rem, 12vw, 5rem);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .immersive-header__tickets {
+    transition: none;
+  }
+}

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

@@ -8,13 +8,12 @@ import {
   output,
   signal,
 } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { AuthUser } from '../../../services/auth/auth.interfaces';
 import { Menu, WebsiteExtras } from '../../../services/tenant.interface';
-import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
-import { InputComponent } from '../../../../shared/components/input/input.component';
 import { ContinuousImageCarouselComponent } from '../../../../shared/components/continuous-image-carousel/continuous-image-carousel.component';
 import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
 
@@ -22,10 +21,9 @@ import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
   selector: 'app-immersive-store-header',
   imports: [
     RouterLink,
-    ButtonComponent,
+    ReactiveFormsModule,
     CartIconComponent,
     IconButtonComponent,
-    InputComponent,
     ContinuousImageCarouselComponent,
     UserDropdownComponent,
   ],
@@ -56,7 +54,7 @@ export class ImmersiveStoreHeaderComponent {
   readonly logoutClick = output<void>();
   readonly searchSubmit = output<string>();
 
-  protected searchTerm = '';
+  protected readonly searchControl = new FormControl('', { nonNullable: true });
   protected readonly showSearchError = signal(false);
   protected readonly isUserDropdownOpen = signal(false);
   protected readonly checkoutRemainingTime = computed(() => {
@@ -70,7 +68,7 @@ export class ImmersiveStoreHeaderComponent {
 
   protected submitSearch(event?: Event): void {
     event?.preventDefault();
-    const term = this.searchTerm.trim();
+    const term = this.searchControl.value.trim();
     if (term.length < 3) {
       this.showSearchError.set(true);
       return;