feat(search): implement search functionality with results page and routing

src/app/features/store/pages/search-page/search-page.component.html

@@ -0,0 +1,37 @@
+<section class="search-results" aria-labelledby="search-results-title">
+  <header class="search-results__header mb-4">
+    <h1 id="search-results-title" class="h3 mb-2">Resultados de búsqueda</h1>
+    @if (query()) {
+      <p class="text-body-secondary mb-0">
+        Resultados para <strong>“{{ query() }}”</strong>
+      </p>
+    }
+  </header>
+
+  @if (error()) {
+    <p class="alert text-center mb-0 search-results__alert-error">{{ error() }}</p>
+  } @else if (loading()) {
+    <p class="alert alert-light border text-center mb-0">Buscando productos...</p>
+  } @else if (results(); as searchResults) {
+    @if (!searchResults.data.length) {
+      <p class="alert alert-light border text-center mb-0">
+        No encontramos productos para “{{ query() }}”.
+      </p>
+    } @else {
+      <app-product-list
+        [layout]="productLayout()"
+        [groupLayout]="groupLayout()"
+        [items]="displayItems()"
+        (buy)="onBuyProduct($event)"
+        (addToCart)="onAddToCart($event)"
+        (pageChange)="onPageChange($event)"
+      />
+
+      @if (hasHiddenResults()) {
+        <p class="text-body-secondary text-center mt-3 mb-0">
+          Se muestran {{ searchResults.data.length }} de {{ searchResults.meta.total }} resultados.
+        </p>
+      }
+    }
+  }
+</section>

src/app/features/store/pages/search-page/search-page.component.scss

@@ -0,0 +1,3 @@
+.search-results__alert-error {
+  color: var(--tenant-danger-color, var(--bs-danger));
+}

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

@@ -0,0 +1,108 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ActivatedRoute, convertToParamMap, provideRouter } from '@angular/router';
+import { of } from 'rxjs';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { CartService } from '../../../../core/services/cart/cart.service';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { Tenant } from '../../../../core/services/tenant.interface';
+import { TenantService } from '../../../../core/services/tenant.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { ProductListComponent } from '../../../../shared/components/product-list/product-list.component';
+import { SearchPageComponent } from './search-page.component';
+
+describe('SearchPageComponent', () => {
+  const searchCatalog = vi.fn();
+  const tenant = signal({
+    search_product_layout: 'row',
+    search_group_layout: 'simple_vertical',
+    search_items_per_page: 8,
+  } as Tenant);
+
+  beforeEach(async () => {
+    searchCatalog.mockReset();
+    searchCatalog.mockReturnValue(
+      of({
+        data: [
+          {
+            id: 1,
+            nombre: 'Running',
+            descripcion: 'Zapatillas',
+            precio: '100.00',
+            variants: [],
+          },
+        ],
+        links: {
+          first: '/catalog-items?page=1',
+          last: '/catalog-items?page=2',
+          prev: null,
+          next: '/catalog-items?page=2',
+        },
+        meta: {
+          current_page: 1,
+          from: 1,
+          last_page: 2,
+          links: [],
+          path: '/catalog-items',
+          per_page: 8,
+          to: 1,
+          total: 10,
+        },
+      }),
+    );
+
+    await TestBed.configureTestingModule({
+      imports: [SearchPageComponent],
+      providers: [
+        provideRouter([]),
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParamMap: of(convertToParamMap({ q: 'running', page: '1' })),
+          },
+        },
+        {
+          provide: CatalogService,
+          useValue: { searchCatalog },
+        },
+        {
+          provide: TenantService,
+          useValue: { tenant: tenant.asReadonly() },
+        },
+        {
+          provide: CartService,
+          useValue: { addItem: vi.fn() },
+        },
+        {
+          provide: ToastService,
+          useValue: {
+            success: vi.fn(),
+            danger: vi.fn(),
+          },
+        },
+      ],
+    }).compileComponents();
+  });
+
+  it('searches from the URL and applies the tenant presentation configuration', () => {
+    const fixture = TestBed.createComponent(SearchPageComponent);
+    fixture.detectChanges();
+
+    expect(searchCatalog).toHaveBeenCalledWith({
+      q: 'running',
+      page: 1,
+    });
+
+    const productList = fixture.debugElement.query(By.directive(ProductListComponent))
+      .componentInstance as ProductListComponent;
+
+    expect(productList.layout()).toBe('row');
+    expect(productList.groupLayout()).toBe('simple_vertical');
+    expect(Array.isArray(productList.items())).toBe(true);
+    expect((fixture.nativeElement as HTMLElement).textContent).toContain(
+      'Se muestran 1 de 10 resultados.',
+    );
+  });
+});

src/app/features/store/pages/search-page/search-page.component.ts

@@ -0,0 +1,150 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { catchError, distinctUntilChanged, map, of, switchMap, tap } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { CartService } from '../../../../core/services/cart/cart.service';
+import {
+  CatalogFeaturedItem,
+  CatalogFeaturedItems,
+  CatalogGroupLayout,
+  CatalogProductLayout,
+} from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
+import { TenantService } from '../../../../core/services/tenant.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import {
+  ProductListCartEvent,
+  ProductListComponent,
+  ProductListItem,
+} from '../../../../shared/components/product-list/product-list.component';
+
+interface SearchRouteState {
+  query: string;
+  page: number;
+}
+
+@Component({
+  selector: 'app-search-page',
+  imports: [ProductListComponent],
+  templateUrl: './search-page.component.html',
+  styleUrl: './search-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchPageComponent {
+  private readonly cartService = inject(CartService);
+  private readonly catalogService = inject(CatalogService);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly tenantService = inject(TenantService);
+  private readonly toastService = inject(ToastService);
+
+  protected readonly query = signal('');
+  protected readonly results = signal<ApiPaginatedResponse<CatalogFeaturedItem[]> | null>(null);
+  protected readonly loading = signal(false);
+  protected readonly error = signal<string | null>(null);
+
+  protected readonly productLayout = computed<CatalogProductLayout>(
+    () => this.tenantService.tenant()?.search_product_layout ?? 'column_with_image',
+  );
+  protected readonly groupLayout = computed<CatalogGroupLayout>(
+    () => this.tenantService.tenant()?.search_group_layout ?? 'paginated',
+  );
+  protected readonly displayItems = computed<CatalogFeaturedItems>(() => {
+    const results = this.results();
+
+    if (!results) {
+      return [];
+    }
+
+    return this.groupLayout() === 'paginated' ? results : results.data;
+  });
+  protected readonly hasHiddenResults = computed(() => {
+    const results = this.results();
+
+    return (
+      results !== null &&
+      this.groupLayout() !== 'paginated' &&
+      results.meta.total > results.data.length
+    );
+  });
+
+  constructor() {
+    this.route.queryParamMap
+      .pipe(
+        map(
+          (params): SearchRouteState => ({
+            query: params.get('q')?.trim() ?? '',
+            page: this.parsePage(params.get('page')),
+          }),
+        ),
+        distinctUntilChanged(
+          (previous, current) => previous.query === current.query && previous.page === current.page,
+        ),
+        tap(({ query }) => {
+          this.query.set(query);
+          this.results.set(null);
+          this.error.set(query.length >= 2 ? null : 'Ingresá al menos 2 caracteres para buscar.');
+          this.loading.set(query.length >= 2);
+        }),
+        switchMap(({ query, page }) => {
+          if (query.length < 2) {
+            return of(null);
+          }
+
+          return this.catalogService.searchCatalog({ q: query, page }).pipe(
+            catchError(() => {
+              this.error.set('No pudimos realizar la búsqueda en este momento.');
+
+              return of(null);
+            }),
+          );
+        }),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe((results) => {
+        this.results.set(results);
+        this.loading.set(false);
+      });
+  }
+
+  protected onPageChange(page: number): void {
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { page },
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  protected onBuyProduct(product: ProductListItem): void {
+    void this.router.navigate(['/producto', product.id]);
+  }
+
+  protected onAddToCart(event: ProductListCartEvent): void {
+    this.cartService.addItem(event.product.id, event.variant ?? null, event.quantity).subscribe({
+      next: (response) => {
+        this.toastService.success(response.message || 'Producto agregado al carrito');
+      },
+      error: (error: HttpErrorResponse) => {
+        const message = error.error?.message || 'No se pudo agregar el producto al carrito.';
+        this.toastService.danger(message);
+      },
+    });
+  }
+
+  private parsePage(value: string | null): number {
+    const page = Number(value ?? 1);
+
+    return Number.isInteger(page) && page > 0 ? page : 1;
+  }
+}

src/app/features/store/store.routes.ts

@@ -45,6 +45,11 @@ export const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'buscar',
+        loadComponent: () =>
+          import('./pages/search-page/search-page.component').then((m) => m.SearchPageComponent),
+      },
       {
         path: 'producto/:id',
         canActivate: [hasMenuGuard('product.detail')],