feat: implement category dropdown and category items page with routing and styling

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

@@ -88,7 +88,8 @@ export interface CatalogFeaturedItem {
 }
 
 export type CatalogFeaturedItems =
-  ApiPaginatedResponse<CatalogFeaturedItem[]> | CatalogFeaturedItem[];
+  | ApiPaginatedResponse<CatalogFeaturedItem[]>
+  | CatalogFeaturedItem[];
 
 export interface CatalogFeaturedGroup {
   id: number;
@@ -98,3 +99,15 @@ export interface CatalogFeaturedGroup {
   group_order: number;
   items: CatalogFeaturedItems;
 }
+
+export interface CatalogCategory {
+  id: number;
+  nombre: string;
+  categoria_id: number | null;
+}
+
+export interface CategoryItemsResponse extends ApiPaginatedResponse<CatalogFeaturedItem[]> {
+  category: CatalogCategory;
+  layout: CatalogProductLayout;
+  group_layout: CatalogGroupLayout;
+}

src/app/core/services/catalog/catalog.service.ts

@@ -11,6 +11,7 @@ import {
   CatalogFeaturedItem,
   CatalogFeaturedItems,
   CatalogItemDetail,
+  CategoryItemsResponse,
   Product,
 } from './catalog.interface';
 
@@ -50,6 +51,15 @@ export class CatalogService {
     );
   }
 
+  getCategoryItems(
+    categoryId: number,
+    params?: ApiPaginationQueryParams,
+  ): Observable<CategoryItemsResponse> {
+    return this.http.get<CategoryItemsResponse>(`${this.tenantApiUrl}/categories/${categoryId}`, {
+      params: this.buildHttpParams(params),
+    });
+  }
+
   getFeaturedGroupItems(
     featuredGroupId: number,
     params?: ApiPaginationQueryParams,

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

@@ -41,6 +41,12 @@ export interface SocialMedia {
   url: string;
 }
 
+export interface Category {
+  id: number;
+  nombre: string;
+  subcategories: Category[];
+}
+
 export interface Tenant {
   id: number;
   codigo: string;
@@ -64,6 +70,7 @@ export interface Tenant {
   main_carousel_images?: string[];
   social_media?: SocialMedia[];
   menues?: Menu[];
+  categories: Category[];
 }
 
 export type TenantBootstrapResponse = ApiResponse<Tenant>;

src/app/core/services/tenant.service.spec.ts

@@ -20,7 +20,20 @@ const tenant: Tenant = {
   header_bg_color: '#313131',
   footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
-  footer_logo: 'https://example.com/footer.png'
+  footer_logo: 'https://example.com/footer.png',
+  categories: [
+    {
+      id: 1,
+      nombre: 'Remeras',
+      subcategories: [
+        {
+          id: 2,
+          nombre: 'Manga corta',
+          subcategories: []
+        }
+      ]
+    }
+  ]
 };
 
 const tenantResponse: TenantBootstrapResponse = {