feat: add ReutilizablesTestPageComponent to showcase and validate shared button and input component variants

- Updated app routing to redirect to the store feature and load children routes correctly.
- Enhanced app styles with tenant-specific branding and loading states.
- Improved app component to dynamically set CSS variables based on tenant colors.
- Refactored store layout components to simplify logo handling and improve accessibility.
- Updated tenant service to manage state more effectively and handle SSR scenarios.
- Added tests for tenant service and layout components to ensure proper functionality.
- Introduced a new SSR cache store for tenant state management.
- Enhanced button styles to utilize tenant colors for better branding consistency.

angular.json

@@ -2,8 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "npm",
+    "packageManager": "npm"
-    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -36,10 +35,7 @@
             "server": "src/main.server.ts",
             "outputMode": "server",
             "security": {
-              "allowedHosts": [
+              "allowedHosts": ["localhost", "127.0.0.1"]
-                "localhost",
-                "127.0.0.1"
-              ]
             },
             "ssr": {
               "entry": "src/server.ts"
@@ -62,11 +58,6 @@
               "outputHashing": "all"
             },
             "development": {
-              "optimization": true,
-              "extractLicenses": false,
-              "sourceMap": true
-            },
-            "local": {
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
@@ -82,9 +73,6 @@
             },
             "development": {
               "buildTarget": "shopit-front:build:development"
-            },
-            "local": {
-              "buildTarget": "shopit-front:build:local"
             }
           },
           "defaultConfiguration": "development"
@@ -95,4 +83,4 @@
       }
     }
   }
-}
+}

src/app/app.html

@@ -1,6 +1,5 @@
 @if (status() === 'ready') {
   <router-outlet />
-  <app-toast-container />
 } @else if (status() === 'not-found') {
   <section class="tenant-status">
     <div class="tenant-status__card">

src/app/app.routes.spec.ts

@@ -15,9 +15,7 @@ const tenant: Tenant = {
   primary_color: '#6376F3',
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
-  success_color: '#198754',
+  header_footer_bg_color: '#313131',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };
@@ -33,13 +31,6 @@ function createTenantServiceStub(
     tenant: tenantState.asReadonly(),
     status: statusState.asReadonly(),
     getTenant: () => tenantState(),
-    getTenantApiUrl: () => {
-      const tenantVal = tenantState();
-      if (!tenantVal) {
-        throw new Error('No se pudo resolver el tenant activo.');
-      }
-      return `http://localhost:8000/api/tenants/${tenantVal.codigo}`;
-    },
     bootstrap: vi.fn().mockResolvedValue(undefined)
   };
 }
@@ -79,8 +70,8 @@ describe('app routes', () => {
 
     expect(router.url).toBe('/');
     expect(compiled.querySelector('.store-layout')).not.toBeNull();
-    expect(compiled.querySelector('app-store-home-page')).not.toBeNull();
+    expect(compiled.querySelector('.store-home')).not.toBeNull();
-    expect(compiled.textContent).toContain('Productos');
+    expect(compiled.textContent).toContain('Tienda en construccion');
     expect(compiled.style.getPropertyValue('--tenant-primary')).toBe(tenant.primary_color);
   });
 

src/app/app.spec.ts

@@ -14,9 +14,7 @@ const tenant: Tenant = {
   primary_color: '#6376F3',
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
-  success_color: '#198754',
+  header_footer_bg_color: '#313131',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };

src/app/app.ts

@@ -3,7 +3,6 @@ import { RouterOutlet } from '@angular/router';
 
 import { TenantService } from './core/services/tenant.service';
 import { DEFAULT_TENANT_BRANDING } from './core/services/tenant-ssr-cache.store';
-import { ToastContainerComponent } from './shared/components/toast-container/toast-container.component';
 
 function hexToRgb(hex: string): string {
   const cleanHex = hex.replace('#', '').trim();
@@ -22,20 +21,17 @@ function hexToRgb(hex: string): string {
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, ToastContainerComponent],
+  imports: [RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.scss',
   host: {
     '[style.--tenant-primary]': 'tenantPrimaryColor()',
     '[style.--tenant-secondary]': 'tenantSecondaryColor()',
     '[style.--tenant-danger]': 'tenantDangerColor()',
-    '[style.--tenant-success]': 'tenantSuccessColor()',
     '[style.--tenant-primary-rgb]': 'tenantPrimaryColorRgb()',
     '[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
     '[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
-    '[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
+    '[style.--tenant-header-footer-bg]': 'tenantHeaderFooterBgColor()'
-    '[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
-    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()'
   }
 })
 export class App {
@@ -52,9 +48,6 @@ export class App {
   protected readonly tenantDangerColor = computed(
     () => this.tenantService.tenant()?.danger_color ?? DEFAULT_TENANT_BRANDING.dangerColor
   );
-  protected readonly tenantSuccessColor = computed(
-    () => this.tenantService.tenant()?.success_color ?? DEFAULT_TENANT_BRANDING.successColor
-  );
   protected readonly tenantPrimaryColorRgb = computed(() =>
     hexToRgb(this.tenantPrimaryColor())
   );
@@ -64,18 +57,10 @@ export class App {
   protected readonly tenantDangerColorRgb = computed(() =>
     hexToRgb(this.tenantDangerColor())
   );
-  protected readonly tenantSuccessColorRgb = computed(() =>
+  protected readonly tenantHeaderFooterBgColor = computed(
-    hexToRgb(this.tenantSuccessColor())
-  );
-  protected readonly tenantHeaderBgColor = computed(
     () =>
-      this.tenantService.tenant()?.header_bg_color ??
+      this.tenantService.tenant()?.header_footer_bg_color ??
-      DEFAULT_TENANT_BRANDING.headerBgColor
+      DEFAULT_TENANT_BRANDING.headerFooterBgColor
-  );
-  protected readonly tenantFooterBgColor = computed(
-    () =>
-      this.tenantService.tenant()?.footer_bg_color ??
-      DEFAULT_TENANT_BRANDING.footerBgColor
   );
 }
 

src/app/core/layout/store-layout/store-footer/store-footer.component.scss

@@ -1,5 +1,5 @@
 .store-layout__footer {
-  background-color: var(--tenant-footer-bg);
+  background-color: var(--tenant-header-footer-bg);
 }
 
 .store-layout__brand-slot {

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

@@ -1,6 +1,6 @@
 .store-layout__header {
   color: #ffffff;
-  background-color: var(--tenant-header-bg);
+  background-color: var(--tenant-header-footer-bg);
   box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
 }
 
@@ -58,14 +58,14 @@
 .store-layout__search-button {
   color: #ffffff;
   border-color: rgba(255, 255, 255, 0.2);
-  background-color: color-mix(in srgb, white 10%, var(--tenant-header-bg));
+  background-color: color-mix(in srgb, white 10%, var(--tenant-header-footer-bg));
 }
 
 .store-layout__search-button:hover,
 .store-layout__search-button:focus-visible {
   color: #ffffff;
   border-color: rgba(255, 255, 255, 0.28);
-  background-color: color-mix(in srgb, white 16%, var(--tenant-header-bg));
+  background-color: color-mix(in srgb, white 16%, var(--tenant-header-footer-bg));
 }
 
 .store-layout__action-button {

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

@@ -14,9 +14,7 @@ const tenant: Tenant = {
   primary_color: '#6376F3',
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
-  success_color: '#198754',
+  header_footer_bg_color: '#313131',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };

src/app/core/services/api-paginated-response.interface.ts

@@ -1,30 +0,0 @@
-import { ApiResponse } from './api-response.interface';
-
-export interface ApiPaginationMetaLink {
-  url: string | null;
-  label: string;
-  active: boolean;
-}
-
-export interface ApiPaginationMeta {
-  current_page: number;
-  from: number | null;
-  last_page: number;
-  links: ApiPaginationMetaLink[];
-  path: string;
-  per_page: number;
-  to: number | null;
-  total: number;
-}
-
-export interface ApiPaginationLinks {
-  first: string;
-  last: string;
-  prev: string | null;
-  next: string | null;
-}
-
-export interface ApiPaginatedResponse<T> extends ApiResponse<T> {
-  meta: ApiPaginationMeta;
-  links: ApiPaginationLinks;
-}

src/app/core/services/api-pagination-query-params.interface.ts

@@ -1,4 +0,0 @@
-export interface ApiPaginationQueryParams {
-  page?: number;
-  per_page?: number;
-}

src/app/core/services/api-response.interface.ts

@@ -1,5 +0,0 @@
-export interface ApiResponse<T> {
-  data: T;
-  message?: string;
-  errors?: Record<string, string[]>;
-}

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

@@ -1,21 +0,0 @@
-export interface CartItemProduct {
-  nombre: string;
-  imagen: string | null;
-}
-
-export interface CartItem {
-  id: number;
-  cantidad: number;
-  precio_unitario: string;
-  product_id: number;
-  product_variant_id: number;
-  product: CartItemProduct | null;
-}
-
-export interface Cart {
-  id: number | null;
-  tenant_codigo: string;
-  status: string;
-  items: CartItem[];
-  subtotal: string;
-}

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

@@ -1,125 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideHttpClient } from '@angular/common/http';
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-
-import { CartService } from './cart.service';
-import { TenantService } from '../tenant.service';
-import { Cart } from './cart.interface';
-
-describe('CartService', () => {
-  let service: CartService;
-  let httpMock: HttpTestingController;
-  let tenantServiceMock: any;
-
-  const mockCart: Cart = {
-    id: 123,
-    tenant_codigo: 'acme',
-    status: 'active',
-    items: [
-      {
-        id: 1,
-        cantidad: 2,
-        precio_unitario: '10.00',
-        product_id: 5,
-        product_variant_id: 10,
-        product: {
-          nombre: 'Test Product (Size: M)',
-          imagen: null
-        }
-      }
-    ],
-    subtotal: '20.00'
-  };
-
-  beforeEach(() => {
-    tenantServiceMock = {
-      getTenantApiUrl: vi.fn().mockReturnValue('http://api.test/tenants/acme')
-    };
-
-    TestBed.configureTestingModule({
-      providers: [
-        CartService,
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        { provide: TenantService, useValue: tenantServiceMock }
-      ]
-    });
-
-    service = TestBed.inject(CartService);
-    httpMock = TestBed.inject(HttpTestingController);
-  });
-
-  afterEach(() => {
-    httpMock.verify();
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should initialize with null cart signal', () => {
-    expect(service.cart()).toBeNull();
-  });
-
-  it('should load cart and update signal', () => {
-    service.loadCart().subscribe((cart) => {
-      expect(cart).toEqual(mockCart);
-      expect(service.cart()).toEqual(mockCart);
-    });
-
-    const req = httpMock.expectOne('http://api.test/tenants/acme/cart');
-    expect(req.request.method).toBe('GET');
-    expect(req.request.withCredentials).toBe(true);
-    req.flush({ data: mockCart });
-  });
-
-  it('should add item and update signal', () => {
-    service.addItem(10, 2).subscribe((cart) => {
-      expect(cart).toEqual(mockCart);
-      expect(service.cart()).toEqual(mockCart);
-    });
-
-    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items');
-    expect(req.request.method).toBe('POST');
-    expect(req.request.body).toEqual({ product_variant_id: 10, cantidad: 2 });
-    expect(req.request.withCredentials).toBe(true);
-    req.flush({ data: mockCart });
-  });
-
-  it('should update item quantity and update signal', () => {
-    const updatedCart = { ...mockCart, subtotal: '30.00' };
-    updatedCart.items[0].cantidad = 3;
-
-    service.updateItemQuantity(10, 3).subscribe((cart) => {
-      expect(cart).toEqual(updatedCart);
-      expect(service.cart()).toEqual(updatedCart);
-    });
-
-    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items/10');
-    expect(req.request.method).toBe('PATCH');
-    expect(req.request.body).toEqual({ cantidad: 3 });
-    expect(req.request.withCredentials).toBe(true);
-    req.flush({ data: updatedCart });
-  });
-
-  it('should remove item and update signal', () => {
-    const emptyCart: Cart = {
-      id: 123,
-      tenant_codigo: 'acme',
-      status: 'active',
-      items: [],
-      subtotal: '0.00'
-    };
-
-    service.removeItem(10).subscribe((cart) => {
-      expect(cart).toEqual(emptyCart);
-      expect(service.cart()).toEqual(emptyCart);
-    });
-
-    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items/10');
-    expect(req.request.method).toBe('DELETE');
-    expect(req.request.withCredentials).toBe(true);
-    req.flush({ data: emptyCart });
-  });
-});

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

@@ -1,71 +0,0 @@
-import { inject, Injectable, signal } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { map, Observable, tap } from 'rxjs';
-
-import { ApiResponse } from '../api-response.interface';
-import { TenantService } from '../tenant.service';
-import { Cart } from './cart.interface';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CartService {
-  private readonly http = inject(HttpClient);
-  private readonly tenantService = inject(TenantService);
-
-  private readonly cartState = signal<Cart | null>(null);
-  readonly cart = this.cartState.asReadonly();
-
-  private get tenantApiUrl(): string {
-    return this.tenantService.getTenantApiUrl();
-  }
-
-  loadCart(): Observable<Cart> {
-    return this.http
-      .get<ApiResponse<Cart>>(`${this.tenantApiUrl}/cart`, {
-        withCredentials: true
-      })
-      .pipe(
-        map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
-      );
-  }
-
-  addItem(productVariantId: number, cantidad: number): Observable<Cart> {
-    return this.http
-      .post<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items`,
-        { product_variant_id: productVariantId, cantidad },
-        { withCredentials: true }
-      )
-      .pipe(
-        map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
-      );
-  }
-
-  updateItemQuantity(productVariantId: number, cantidad: number): Observable<Cart> {
-    return this.http
-      .patch<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
-        { cantidad },
-        { withCredentials: true }
-      )
-      .pipe(
-        map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
-      );
-  }
-
-  removeItem(productVariantId: number): Observable<Cart> {
-    return this.http
-      .delete<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
-        { withCredentials: true }
-      )
-      .pipe(
-        map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
-      );
-  }
-}

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

@@ -1,50 +0,0 @@
-export interface Product {
-  id: number;
-  category_id: number;
-  brand_id: number | null;
-  slug: string;
-  nombre: string;
-  descripcion: string;
-  precio: string;
-  category: string;
-  brand: string | null;
-  images: string[];
-}
-
-export interface ProductAttributeOption {
-  id: number;
-  value: string;
-  label: string;
-  sort_order: number;
-  metadata: Record<string, unknown> | null;
-}
-
-export interface ProductAttribute {
-  id: number;
-  codigo: string;
-  nombre: string;
-  is_required: boolean;
-  metadata_schema: Record<string, unknown> | null;
-  type: string;
-  options: ProductAttributeOption[];
-}
-
-export interface ProductVariant {
-  id: number;
-  stock: number;
-  definitions: Record<string, string>;
-  images: string[];
-}
-
-export interface ProductVariantMap {
-  variant_id: number;
-  stock: number;
-  attributes: Record<string, string>;
-}
-
-export interface ProductDetail extends Product {
-  attributes: ProductAttribute[];
-  variants_map: ProductVariantMap[];
-  variant: ProductVariant | null;
-}
-

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

@@ -1,67 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { map, Observable } from 'rxjs';
-
-import { ApiPaginationQueryParams } from '../api-pagination-query-params.interface';
-import { ApiPaginatedResponse } from '../api-paginated-response.interface';
-import { ApiResponse } from '../api-response.interface';
-import { TenantService } from '../tenant.service';
-import { Product, ProductDetail } from './catalog.interface';
-
-type HttpParamValue =
-  | string
-  | number
-  | boolean
-  | readonly (string | number | boolean)[];
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CatalogService {
-  private readonly http = inject(HttpClient);
-  private readonly tenantService = inject(TenantService);
-
-  private get tenantApiUrl(): string {
-    return this.tenantService.getTenantApiUrl();
-  }
-
-
-  getProductos(
-    params?: ApiPaginationQueryParams
-  ): Observable<ApiPaginatedResponse<Product[]>> {
-    return this.http.get<ApiPaginatedResponse<Product[]>>(
-      `${this.tenantApiUrl}/productos`,
-      { params: this.buildHttpParams(params) }
-    );
-  }
-
-  getProducto(id: number, variantId?: number): Observable<ProductDetail> {
-    let params = new HttpParams();
-    if (variantId) {
-      params = params.set('variant_id', variantId);
-    }
-    
-    return this.http
-      .get<ApiResponse<ProductDetail>>(`${this.tenantApiUrl}/productos/${id}`, { params })
-      .pipe(map((response) => response.data));
-  }
-
-  private buildHttpParams(params?: ApiPaginationQueryParams): HttpParams {
-    if (!params) {
-      return new HttpParams();
-    }
-
-    const fromObject = Object.entries(params).reduce<Record<string, HttpParamValue>>(
-      (acc, [key, value]) => {
-        if (value !== undefined) {
-          acc[key] = value;
-        }
-
-        return acc;
-      },
-      {}
-    );
-
-    return new HttpParams({ fromObject });
-  }
-}

src/app/core/services/tenant-ssr-cache.store.ts

@@ -17,9 +17,7 @@ export const DEFAULT_TENANT_BRANDING = {
   primaryColor: '#102bda',
   secondaryColor: '#9e9e9e',
   dangerColor: '#fd4c4c',
-  successColor: '#198754',
+  headerFooterBgColor: '#313131'
-  headerBgColor: '#313131',
-  footerBgColor: '#313131'
 } as const;
 
 export const TENANT_SSR_STATE_KEY = makeStateKey<TenantSsrState | null>('tenant-ssr-state');

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

@@ -1,5 +1,3 @@
-import { ApiResponse } from './api-response.interface';
-
 export interface Tenant {
   id: number;
   codigo: string;
@@ -8,12 +6,11 @@ export interface Tenant {
   primary_color: string;
   secondary_color: string;
   danger_color: string;
-  success_color: string;
+  header_footer_bg_color: string;
-  header_bg_color: string;
-  footer_bg_color: string;
   header_logo: string;
   footer_logo: string;
 }
 
-export type TenantBootstrapResponse = ApiResponse<Tenant>;
+export interface TenantBootstrapResponse {
-
+  data: Tenant;
+}

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

@@ -16,9 +16,7 @@ const tenant: Tenant = {
   primary_color: '#6376F3',
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
-  success_color: '#198754',
+  header_footer_bg_color: '#313131',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };

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

@@ -40,15 +40,6 @@ export class TenantService {
     return this.tenantState();
   }
 
-  getTenantApiUrl(): string {
-    const tenant = this.tenantState();
-    if (!tenant) {
-      throw new Error('No se pudo resolver el tenant activo.');
-    }
-    return `${environment.url}tenants/${tenant.codigo}`;
-  }
-
-
   async bootstrap(): Promise<void> {
     if (this.statusState() !== 'idle') {
       return;

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

@@ -1,101 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { vi } from 'vitest';
-import { ToastService } from './toast.service';
-
-describe('ToastService', () => {
-  let service: ToastService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [ToastService]
-    });
-    service = TestBed.inject(ToastService);
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should initialize with an empty list of toasts', () => {
-    expect(service.toasts()).toEqual([]);
-  });
-
-  it('should show a toast and assign an id', () => {
-    const id = service.show('Hello world', 'info');
-    expect(id).toBeTruthy();
-    expect(service.toasts().length).toBe(1);
-    expect(service.toasts()[0]).toEqual({
-      id,
-      message: 'Hello world',
-      type: 'info',
-      duration: 3000
-    });
-  });
-
-  it('should add specific variant toasts via helper methods', () => {
-    const infoId = service.info('Info message');
-    const dangerId = service.danger('Danger message', 5000);
-    const successId = service.success('Success message', 0);
-
-    const toasts = service.toasts();
-    expect(toasts.length).toBe(3);
-
-    expect(toasts.find((t) => t.id === infoId)).toEqual({
-      id: infoId,
-      message: 'Info message',
-      type: 'info',
-      duration: 3000
-    });
-
-    expect(toasts.find((t) => t.id === dangerId)).toEqual({
-      id: dangerId,
-      message: 'Danger message',
-      type: 'danger',
-      duration: 5000
-    });
-
-    expect(toasts.find((t) => t.id === successId)).toEqual({
-      id: successId,
-      message: 'Success message',
-      type: 'success',
-      duration: 0
-    });
-  });
-
-  it('should dismiss a toast manually by id', () => {
-    const id1 = service.show('Toast 1');
-    const id2 = service.show('Toast 2');
-
-    expect(service.toasts().length).toBe(2);
-
-    service.dismiss(id1);
-
-    expect(service.toasts().length).toBe(1);
-    expect(service.toasts()[0].id).toBe(id2);
-  });
-
-  it('should automatically dismiss a toast after the duration', () => {
-    service.show('Auto dismiss toast', 'info', 2000);
-
-    expect(service.toasts().length).toBe(1);
-
-    vi.advanceTimersByTime(2000);
-
-    expect(service.toasts().length).toBe(0);
-  });
-
-  it('should not dismiss a toast automatically if duration is 0', () => {
-    service.show('Persistent toast', 'info', 0);
-
-    expect(service.toasts().length).toBe(1);
-
-    vi.advanceTimersByTime(10000);
-
-    expect(service.toasts().length).toBe(1);
-  });
-});

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

@@ -1,47 +0,0 @@
-import { Injectable, signal } from '@angular/core';
-
-export interface Toast {
-  id: string;
-  message: string;
-  type: 'success' | 'danger' | 'info';
-  duration?: number;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ToastService {
-  private readonly toastsSignal = signal<Toast[]>([]);
-  readonly toasts = this.toastsSignal.asReadonly();
-
-  show(message: string, type: 'success' | 'danger' | 'info' = 'info', duration = 3000): string {
-    const id = Math.random().toString(36).substring(2, 9);
-    const newToast: Toast = { id, message, type, duration };
-
-    this.toastsSignal.update((toasts) => [...toasts, newToast]);
-
-    if (duration > 0) {
-      setTimeout(() => {
-        this.dismiss(id);
-      }, duration);
-    }
-
-    return id;
-  }
-
-  info(message: string, duration = 3000): string {
-    return this.show(message, 'info', duration);
-  }
-
-  danger(message: string, duration = 3000): string {
-    return this.show(message, 'danger', duration);
-  }
-
-  success(message: string, duration = 3000): string {
-    return this.show(message, 'success', duration);
-  }
-
-  dismiss(id: string): void {
-    this.toastsSignal.update((toasts) => toasts.filter((t) => t.id !== id));
-  }
-}

src/app/core/utils/use-mutation.spec.ts

@@ -0,0 +1,31 @@
+import { of, throwError } from 'rxjs';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useMutation } from './use-mutation';
+
+describe('useMutation', () => {
+  it('stores the resolved value and clears loading after a successful execution', async () => {
+    const mutation = useMutation<{ id: number }, { ok: boolean; id: number }>();
+    const factory = vi.fn((payload: { id: number }) => of({ ok: true, id: payload.id }));
+
+    await expect(mutation.execute(factory, { id: 7 })).resolves.toEqual({ ok: true, id: 7 });
+
+    expect(factory).toHaveBeenCalledWith({ id: 7 });
+    expect(mutation.loading()).toBe(false);
+    expect(mutation.error()).toBeNull();
+    expect(mutation.data()).toEqual({ ok: true, id: 7 });
+  });
+
+  it('stores the thrown error and clears loading after a failed execution', async () => {
+    const mutation = useMutation<{ id: number }, { ok: boolean }>();
+    const failure = new Error('request failed');
+    const factory = vi.fn(() => throwError(() => failure));
+
+    await expect(mutation.execute(factory, { id: 7 })).rejects.toThrow('request failed');
+
+    expect(factory).toHaveBeenCalledWith({ id: 7 });
+    expect(mutation.loading()).toBe(false);
+    expect(mutation.error()).toBe(failure);
+    expect(mutation.data()).toBeNull();
+  });
+});

src/app/core/utils/use-mutation.ts

@@ -0,0 +1,42 @@
+import { signal, WritableSignal } from '@angular/core';
+import { Observable, firstValueFrom } from 'rxjs';
+
+export interface UseMutationResult<TData, TResult> {
+  loading: WritableSignal<boolean>;
+  error: WritableSignal<unknown | null>;
+  data: WritableSignal<TResult | null>;
+  execute: (factory: (payload: TData) => Observable<TResult>, payload: TData) => Promise<TResult>;
+}
+
+export function useMutation<TData, TResult>(): UseMutationResult<TData, TResult> {
+  const loading = signal(false);
+  const error = signal<unknown | null>(null);
+  const data = signal<TResult | null>(null);
+
+  async function execute(
+    factory: (payload: TData) => Observable<TResult>,
+    payload: TData
+  ): Promise<TResult> {
+    loading.set(true);
+    error.set(null);
+
+    try {
+      const result = await firstValueFrom(factory(payload));
+      data.set(result);
+
+      return result;
+    } catch (err) {
+      error.set(err);
+      throw err;
+    } finally {
+      loading.set(false);
+    }
+  }
+
+  return {
+    loading,
+    error,
+    data,
+    execute
+  };
+}

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -24,7 +24,6 @@
           <div class="button-grid">
             <app-button [disabled]="true">Primary</app-button>
             <app-button variant="secondary" [disabled]="true">Secondary</app-button>
-
             <app-button variant="danger" [disabled]="true">Danger</app-button>
             <app-button variant="danger-secondary" [disabled]="true">Danger secondary</app-button>
             <app-button variant="cancel" [disabled]="true">Cancel</app-button>
@@ -41,24 +40,6 @@
             <app-button variant="cancel">E</app-button>
           </div>
         </div>
-
-        <div class="button-group">
-          <h2>Toasts</h2>
-          <div class="button-grid">
-            <app-button (click)="triggerToast('info')">Trigger Info</app-button>
-            <app-button variant="secondary" (click)="triggerToast('success')">Trigger Success</app-button>
-            <app-button variant="danger" (click)="triggerToast('danger')">Trigger Danger</app-button>
-          </div>
-        </div>
-
-        <div class="button-group">
-          <h2>Toasts Persistentes (No se van)</h2>
-          <div class="button-grid">
-            <app-button (click)="triggerPersistentToast('info')">Info Persistente</app-button>
-            <app-button variant="secondary" (click)="triggerPersistentToast('success')">Success Persistente</app-button>
-            <app-button variant="danger" (click)="triggerPersistentToast('danger')">Danger Persistente</app-button>
-          </div>
-        </div>
       </div>
 
       <hr class="section-divider" />
@@ -193,20 +174,6 @@
           <app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
         </div>
       </div>
-
-      <hr class="section-divider" />
-
-      <div class="paginator-showcase">
-        <h2>Paginator</h2>
-        <p class="text-muted mb-0">
-          Componente shared para navegar por paginas con primera, anterior, siguiente y ultima.
-        </p>
-        <app-paginator
-          [page]="currentPage"
-          [totalPages]="paginatorTotalPages"
-          (pageChange)="currentPage = $event"
-        />
-      </div>
     </div>
   </section>
 
@@ -220,7 +187,7 @@
         <div class="col-md-6 mb-3 mb-md-0">
           <div class="tenant-logo-card">
             <div class="tenant-logo-card__label">Logo del Header</div>
-            <div class="tenant-logo-card__container header-bg">
+            <div class="tenant-logo-card__container header-footer-bg">
               @if (tenant()?.header_logo) {
                 <img [src]="tenant()?.header_logo" alt="Header Logo" class="tenant-logo-card__img" />
               } @else {
@@ -236,7 +203,7 @@
         <div class="col-md-6">
           <div class="tenant-logo-card">
             <div class="tenant-logo-card__label">Logo del Footer</div>
-            <div class="tenant-logo-card__container footer-bg">
+            <div class="tenant-logo-card__container header-footer-bg">
               @if (tenant()?.footer_logo) {
                 <img [src]="tenant()?.footer_logo" alt="Footer Logo" class="tenant-logo-card__img" />
               } @else {
@@ -256,7 +223,7 @@
       <div class="colors-section">
         <h3 class="mb-3">Colores de Marca</h3>
         <div class="row">
-          <div class="col-md-3 mb-3">
+          <div class="col-md-4 mb-3">
             <div class="color-swatch-card shadow-sm">
               <div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-primary)'"></div>
               <div class="color-swatch-card__body">
@@ -266,7 +233,7 @@
             </div>
           </div>
 
-          <div class="col-md-3 mb-3">
+          <div class="col-md-4 mb-3">
             <div class="color-swatch-card shadow-sm">
               <div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-secondary)'"></div>
               <div class="color-swatch-card__body">
@@ -276,7 +243,7 @@
             </div>
           </div>
 
-          <div class="col-md-3 mb-3">
+          <div class="col-md-4 mb-3">
             <div class="color-swatch-card shadow-sm">
               <div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-danger)'"></div>
               <div class="color-swatch-card__body">
@@ -285,82 +252,8 @@
               </div>
             </div>
           </div>
-
-          <div class="col-md-3 mb-3">
-            <div class="color-swatch-card shadow-sm">
-              <div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-success)'"></div>
-              <div class="color-swatch-card__body">
-                <span class="color-swatch-card__title">Success</span>
-                <code class="color-swatch-card__value">{{ tenant()?.success_color || 'Default' }}</code>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-md-3 mb-3">
-            <div class="color-swatch-card shadow-sm">
-              <div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-header-bg)'"></div>
-              <div class="color-swatch-card__body">
-                <span class="color-swatch-card__title">Header BG</span>
-                <code class="color-swatch-card__value">{{ tenant()?.header_bg_color || 'Default' }}</code>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-md-3 mb-3">
-            <div class="color-swatch-card shadow-sm">
-              <div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-footer-bg)'"></div>
-              <div class="color-swatch-card__body">
-                <span class="color-swatch-card__title">Footer BG</span>
-                <code class="color-swatch-card__value">{{ tenant()?.footer_bg_color || 'Default' }}</code>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
   </section>
-
-  <section class="component-demo card shadow-sm mt-4">
-    <div class="card-body">
-      <span class="eyebrow">Reusable Component</span>
-      <h2 class="mb-4">Tarjetas de Producto (ProductCard)</h2>
-      
-      <p class="text-muted mb-4">
-        Las tarjetas se adaptan al tamaño del contenedor padre. A continuación se presentan dentro de una grilla de Bootstrap.
-      </p>
-
-      <div class="row">
-        @for (product of testProducts; track product.title) {
-          <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch">
-            <app-product-card
-              [imageUrl]="product.imageUrl"
-              [title]="product.title"
-              [originalPrice]="product.originalPrice"
-              [discount]="product.discount"
-              [transferPrice]="product.transferPrice"
-              (buy)="onProductBuy(product.title)"
-            />
-          </div>
-        }
-      </div>
-    </div>
-  </section>
-
-  <app-store-section title="PRODUCTOS" class="component-demo store-section-demo mt-5">
-    <div class="row">
-      @for (product of testProducts; track product.title) {
-        <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch store-section-demo__item">
-          <app-product-card
-            [imageUrl]="product.imageUrl"
-            [title]="product.title"
-            [originalPrice]="product.originalPrice"
-            [discount]="product.discount"
-            [transferPrice]="product.transferPrice"
-            (buy)="onProductBuy(product.title)"
-          />
-        </div>
-      }
-    </div>
-  </app-store-section>
 </main>
-

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -15,10 +15,6 @@
   border: 0;
 }
 
-.store-section-demo {
-  width: min(100%, 64rem);
-}
-
 .eyebrow {
   display: inline-block;
   margin-bottom: 0.75rem;
@@ -55,23 +51,10 @@ h1 {
   font-weight: 700;
 }
 
-.paginator-showcase {
-  display: grid;
-  justify-items: center;
-  gap: 0.75rem;
-  text-align: center;
-}
-
 .button-grid--single-char app-button {
   min-width: 3rem;
 }
 
-.store-section-demo__item {
-  app-product-card {
-    width: 100%;
-  }
-}
-
 .section-divider {
   margin: 2rem 0;
 }
@@ -164,12 +147,8 @@ h1 {
     }
   }
 
-  .header-bg {
+  .header-footer-bg {
-    background-color: var(--tenant-header-bg, #f8f9fa);
+    background-color: var(--tenant-header-footer-bg, #f8f9fa);
-  }
-
-  .footer-bg {
-    background-color: var(--tenant-footer-bg, #f8f9fa);
   }
 
   .color-swatch-card {

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts

@@ -1,6 +1,5 @@
 import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { describe, expect, it, vi } from 'vitest';
 import { ReutilizablesTestPageComponent } from './reutilizables-test-page.component';
 import { Tenant } from '../../../../core/services/tenant.interface';
 import { TenantService } from '../../../../core/services/tenant.service';
@@ -13,9 +12,7 @@ const tenant: Tenant = {
   primary_color: '#6376F3',
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
-  success_color: '#198754',
+  header_footer_bg_color: '#313131',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };
@@ -65,26 +62,5 @@ describe('ReutilizablesTestPageComponent', () => {
     expect(element.textContent).toContain(tenant.primary_color);
     expect(element.textContent).toContain(tenant.secondary_color);
     expect(element.textContent).toContain(tenant.danger_color);
-    expect(element.textContent).toContain(tenant.success_color);
-  });
-
-  it('renders the paginator demo with the initial page status', async () => {
-    await TestBed.configureTestingModule({
-      imports: [ReutilizablesTestPageComponent],
-      providers: [
-        {
-          provide: TenantService,
-          useValue: createTenantServiceStub(tenant)
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.querySelector('app-paginator')).not.toBeNull();
-    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/8');
   });
 });

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -1,21 +1,16 @@
 import { Component, inject } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
-import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
-import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
-import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import { TenantService } from '../../../../core/services/tenant.service';
-import { ToastService } from '../../../../core/services/toast.service';
 
 @Component({
   selector: 'app-reutilizables-test-page',
-  imports: [ButtonComponent, InputComponent, PaginatorComponent, ProductCardComponent, StoreSectionComponent],
+  imports: [ButtonComponent, InputComponent],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'
 })
 export class ReutilizablesTestPageComponent {
   private readonly tenantService = inject(TenantService);
-  private readonly toastService = inject(ToastService);
   protected readonly tenant = this.tenantService.tenant;
   protected textValue = 'Auriculares';
   protected numberValue = '24';
@@ -32,37 +27,6 @@ export class ReutilizablesTestPageComponent {
   protected fileName = '';
   protected clearTrigger = 0;
   protected editableDisabled = true;
-  protected currentPage = 1;
-  protected readonly paginatorTotalPages = 8;
-
-  protected readonly testProducts = [
-    {
-      title: 'Pantalón recto de scuba negro',
-      originalPrice: 95000,
-      discount: 20,
-      transferPrice: 74800,
-      imageUrl: '/images/pantalon-scuba.png'
-    },
-    {
-      title: 'Zapatillas de running azul',
-      originalPrice: 120000,
-      discount: 15,
-      transferPrice: 98000,
-      imageUrl: '/images/zapatillas-running.png'
-    },
-    {
-      title: 'Remera básica blanca (Sin Descuento)',
-      originalPrice: 32000,
-      discount: null,
-      transferPrice: 30000,
-      imageUrl: null
-    }
-  ];
-
-  protected onProductBuy(productTitle: string): void {
-    console.log(`Comprando: ${productTitle}`);
-    alert(`Comprando: ${productTitle}`);
-  }
 
   protected onFileChange(file: File | null): void {
     this.fileName = file?.name ?? '';
@@ -72,24 +36,4 @@ export class ReutilizablesTestPageComponent {
     this.fileName = '';
     this.clearTrigger += 1;
   }
-
-  protected triggerToast(type: 'success' | 'danger' | 'info'): void {
-    if (type === 'success') {
-      this.toastService.success('¡Operación exitosa! El producto se ha guardado correctamente.');
-    } else if (type === 'danger') {
-      this.toastService.danger('¡Alerta de error! Hubo un problema al procesar la solicitud.');
-    } else if (type === 'info') {
-      this.toastService.info('Información del sistema: Hay una nueva actualización disponible.');
-    }
-  }
-
-  protected triggerPersistentToast(type: 'success' | 'danger' | 'info'): void {
-    if (type === 'success') {
-      this.toastService.success('¡Éxito persistente! Esta alerta no se cerrará sola.', 0);
-    } else if (type === 'danger') {
-      this.toastService.danger('¡Error persistente! Por favor, atienda este problema y ciérrelo manualmente.', 0);
-    } else if (type === 'info') {
-      this.toastService.info('Información persistente: Mantendremos este aviso en pantalla.', 0);
-    }
-  }
 }

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.html

@@ -1,40 +0,0 @@
-<div class="attribute-selector">
-  @for (attribute of attributes(); track attribute.id) {
-    <div class="attribute-selector__row">
-      <span class="attribute-selector__label">{{ attribute.nombre }}:</span>
-
-      <div class="attribute-selector__options">
-        @for (option of attribute.options; track option.id) {
-          @if (isColorOption(option)) {
-            <button
-              type="button"
-              class="attribute-selector__swatch"
-              [class.attribute-selector__swatch--selected]="hasSelectedOption(attribute, option)"
-              [class.attribute-selector__swatch--disabled]="!availableOptions()[attribute.id][option.id]"
-              [style.background-color]="getOptionSwatchColor(option)"
-              [attr.aria-label]="option.label"
-              [attr.aria-pressed]="hasSelectedOption(attribute, option)"
-              [title]="option.label"
-              [disabled]="!availableOptions()[attribute.id][option.id]"
-              (click)="selectAttributeOption(attribute, option)"
-            >
-              <span class="visually-hidden">{{ option.label }}</span>
-            </button>
-          } @else {
-            <button
-              type="button"
-              class="attribute-selector__text-option"
-              [class.attribute-selector__text-option--selected]="hasSelectedOption(attribute, option)"
-              [class.attribute-selector__text-option--disabled]="!availableOptions()[attribute.id][option.id]"
-              [attr.aria-pressed]="hasSelectedOption(attribute, option)"
-              [disabled]="!availableOptions()[attribute.id][option.id]"
-              (click)="selectAttributeOption(attribute, option)"
-            >
-              {{ option.label }}
-            </button>
-          }
-        }
-      </div>
-    </div>
-  }
-</div>

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss

@@ -1,83 +0,0 @@
-.attribute-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-
-  &__row {
-    display: flex;
-    align-items: center;
-    gap: 0.875rem;
-    flex-wrap: wrap;
-  }
-
-  &__label {
-    font-size: 15px;
-    font-weight: 700;
-    line-height: 1.2;
-    color: #A0A0A0;
-    min-width: 44px;
-  }
-
-  &__options {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex-wrap: wrap;
-  }
-
-  &__swatch {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    border: 1px solid transparent;
-    padding: 0;
-    cursor: pointer;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
-    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-      transform: scale(1.05);
-    }
-
-    &--selected {
-      border-color: var(--tenant-primary);
-      box-shadow:
-        0 0 0 2px rgba(255, 255, 255, 1),
-        0 0 0 3px var(--tenant-primary);
-    }
-
-    &--disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &__text-option {
-    border: 1px solid #dcdcdc;
-    background: #ffffff;
-    color: #666666;
-    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
-    min-width: 34px;
-    min-height: 34px;
-    border-radius: 4px;
-    padding: 0.35rem 0.6rem;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 1;
-
-    &--selected {
-      background: var(--tenant-primary);
-      border-color: var(--tenant-primary);
-      color: #ffffff;
-    }
-
-    &--disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-      background-color: #f9f9f9;
-      color: #b0b0b0;
-      pointer-events: none;
-    }
-  }
-}

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.ts

@@ -1,263 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-  output,
-  signal,
-  untracked
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  ProductAttribute,
-  ProductAttributeOption,
-  ProductVariant,
-  ProductVariantMap
-} from '../../../../core/services/catalog/catalog.interface';
-
-@Component({
-  selector: 'app-product-attribute-selector',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './product-attribute-selector.component.html',
-  styleUrl: './product-attribute-selector.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProductAttributeSelectorComponent {
-  public attributes = input<ProductAttribute[]>([]);
-  public variantsMap = input<ProductVariantMap[]>([]);
-  public defaultVariant = input<ProductVariant | null>(null);
-
-  public variantChange = output<ProductVariantMap | null>();
-
-  protected readonly selectedAttributeOptions = signal<Record<number, number>>({});
-
-  protected readonly availableOptions = computed(() => {
-    const selections = this.selectedAttributeOptions();
-    const variants = this.variantsMap();
-    const attributes = this.attributes();
-
-    const availability: Record<number, Record<number, boolean>> = {};
-
-    for (const attribute of attributes) {
-      availability[attribute.id] = {};
-      for (const option of attribute.options) {
-        const optionNormalized = this.normalizeText(option.value || option.label);
-        
-        const isAvailable = variants.some(variant => {
-          if (variant.stock <= 0) return false;
-
-          const variantAttrValue = this.getDefaultVariantAttributeValue(attribute, variant.attributes);
-          if (!variantAttrValue || this.normalizeText(variantAttrValue) !== optionNormalized) {
-             return false;
-          }
-
-          for (const otherAttr of attributes) {
-             if (otherAttr.id === attribute.id) continue;
-             const selectedOptionId = selections[otherAttr.id];
-             if (selectedOptionId !== undefined) {
-                const selectedOption = otherAttr.options.find(o => o.id === selectedOptionId);
-                if (selectedOption) {
-                   const selectedNormalized = this.normalizeText(selectedOption.value || selectedOption.label);
-                   const vAttrValue = this.getDefaultVariantAttributeValue(otherAttr, variant.attributes);
-                   if (!vAttrValue || this.normalizeText(vAttrValue) !== selectedNormalized) {
-                      return false;
-                   }
-                }
-             }
-          }
-          return true;
-        });
-
-        availability[attribute.id][option.id] = isAvailable;
-      }
-    }
-
-    return availability;
-  });
-
-  public reset(): void {
-    this.initializeSelections(this.attributes(), this.defaultVariant());
-  }
-
-  constructor() {
-    effect(() => {
-      const attributes = this.attributes();
-      const defaultVariant = this.defaultVariant();
-      
-      untracked(() => {
-        this.initializeSelections(attributes, defaultVariant);
-      });
-    });
-
-    effect(() => {
-      const selections = this.selectedAttributeOptions();
-      const variantsMap = this.variantsMap();
-      const attributes = this.attributes();
-      
-      untracked(() => {
-         this.emitMatchingVariant(selections, variantsMap, attributes);
-      });
-    });
-  }
-
-  protected hasSelectedOption(attribute: ProductAttribute, option: ProductAttributeOption): boolean {
-    return this.selectedAttributeOptions()[attribute.id] === option.id;
-  }
-
-  protected selectAttributeOption(
-    attribute: ProductAttribute,
-    option: ProductAttributeOption
-  ): void {
-    this.selectedAttributeOptions.update((current) => ({
-      ...current,
-      [attribute.id]: option.id
-    }));
-  }
-
-  protected isColorOption(option: ProductAttributeOption): boolean {
-    return this.findFirstHexValue(option.metadata) !== null;
-  }
-
-  protected getOptionSwatchColor(option: ProductAttributeOption): string {
-    return this.findFirstHexValue(option.metadata) ?? '#D9D9D9';
-  }
-
-  private initializeSelections(attributes: ProductAttribute[], defaultVariant: ProductVariant | null): void {
-    const selections: Record<number, number> = {};
-
-    for (const attribute of attributes) {
-      const optionId = this.findDefaultOptionId(attribute, defaultVariant);
-      if (optionId !== null) {
-        selections[attribute.id] = optionId;
-      }
-    }
-
-    this.selectedAttributeOptions.set(selections);
-  }
-
-  private findDefaultOptionId(
-    attribute: ProductAttribute,
-    variant: ProductVariant | null
-  ): number | null {
-    if (!variant) {
-      return null;
-    }
-
-    const defaultValue = this.getDefaultVariantAttributeValue(attribute, variant.definitions);
-    if (!defaultValue) {
-      return null;
-    }
-
-    const normalizedValue = this.normalizeText(defaultValue);
-    const matchByValue = attribute.options.find(
-      (option) => this.normalizeText(option.value) === normalizedValue
-    );
-
-    if (matchByValue) {
-      return matchByValue.id;
-    }
-
-    const matchByLabel = attribute.options.find(
-      (option) => this.normalizeText(option.label) === normalizedValue
-    );
-
-    return matchByLabel?.id ?? null;
-  }
-
-  private getDefaultVariantAttributeValue(
-    attribute: ProductAttribute,
-    variantAttributes: Record<string, string>
-  ): string | null {
-    const normalizedCodigo = this.normalizeText(attribute.codigo);
-    const normalizedNombre = this.normalizeText(attribute.nombre);
-
-    for (const [key, value] of Object.entries(variantAttributes)) {
-      const normalizedKey = this.normalizeText(key);
-
-      if (normalizedKey === normalizedCodigo || normalizedKey === normalizedNombre) {
-        return value;
-      }
-    }
-
-    return null;
-  }
-
-  private normalizeText(value: string | null | undefined): string {
-    return (value ?? '')
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .trim()
-      .toLowerCase();
-  }
-
-  private findFirstHexValue(value: unknown): string | null {
-    if (typeof value === 'string') {
-      const match = value.match(/#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/);
-      return match ? match[0] : null;
-    }
-
-    if (Array.isArray(value)) {
-      for (const item of value) {
-        const found = this.findFirstHexValue(item);
-        if (found) {
-          return found;
-        }
-      }
-      return null;
-    }
-
-    if (value && typeof value === 'object') {
-      for (const item of Object.values(value)) {
-        const found = this.findFirstHexValue(item);
-        if (found) {
-          return found;
-        }
-      }
-    }
-
-    return null;
-  }
-
-  private emitMatchingVariant(
-    selections: Record<number, number>,
-    variantsMap: ProductVariantMap[],
-    attributes: ProductAttribute[]
-  ): void {
-    if (attributes.length === 0 || variantsMap.length === 0) {
-      this.variantChange.emit(null);
-      return;
-    }
-
-    const selectedValuesById: Record<number, string> = {};
-    let allSelected = true;
-    for (const attr of attributes) {
-      const selectedOptionId = selections[attr.id];
-      if (selectedOptionId === undefined) {
-         allSelected = false;
-         break;
-      }
-      const option = attr.options.find(o => o.id === selectedOptionId);
-      if (option) {
-         selectedValuesById[attr.id] = this.normalizeText(option.value || option.label);
-      }
-    }
-
-    if (!allSelected) {
-      this.variantChange.emit(null);
-      return;
-    }
-
-    const matchingVariant = variantsMap.find(vMap => {
-      return attributes.every(attr => {
-         const selectedValue = selectedValuesById[attr.id];
-         const vMapValue = this.getDefaultVariantAttributeValue(attr, vMap.attributes);
-         if (!vMapValue) return false;
-         return this.normalizeText(vMapValue) === selectedValue;
-      });
-    });
-
-    this.variantChange.emit(matchingVariant || null);
-  }
-}

src/app/features/store/components/product-carousel/product-carousel.component.html

@@ -1,51 +0,0 @@
-<div class="product-carousel d-flex flex-column gap-4">
-  <!-- Active/Main Image Area -->
-  <div class="product-carousel__main position-relative bg-light  overflow-hidden">
-    <!-- Main Image -->
-    @if (images().length > 0) {
-    <img [src]="images()[activeIndex()]" alt="Product active image"
-      class="product-carousel__main-image w-100 h-100 object-fit-cover" />
-    } @else {
-    <!-- Placeholder -->
-    <div class="product-carousel__placeholder w-100 h-100 d-flex align-items-center justify-content-center text-muted">
-      <i class="fa-solid fa-image fa-3x"></i>
-    </div>
-    }
-
-    <!-- Discount Badge -->
-    @if (discount() && discount()! > 0) {
-    <span
-      class="product-carousel__discount-badge position-absolute top-0 end-0 bg-primary text-white px-3 py-2 fw-semibold">
-      -{{ discount() }}%
-    </span>
-    }
-
-    <!-- Navigation Arrows -->
-    @if (images().length > 1) {
-    <button type="button"
-      class="product-carousel__nav-btn product-carousel__nav-btn--prev position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
-      (click)="prevImage()" aria-label="Previous image">
-      <i class="fa-solid fa-chevron-left"></i>
-    </button>
-
-    <button type="button"
-      class="product-carousel__nav-btn product-carousel__nav-btn--next position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
-      (click)="nextImage()" aria-label="Next image">
-      <i class="fa-solid fa-chevron-right"></i>
-    </button>
-    }
-  </div>
-
-  <!-- Thumbnails Row -->
-  @if (images().length > 1) {
-  <div class="product-carousel__thumbnails">
-    @for (image of images(); track image; let idx = $index) {
-    <button type="button" class="product-carousel__thumbnail border-0 p-0  overflow-hidden bg-light"
-      [class.product-carousel__thumbnail--active]="idx === activeIndex()" (click)="selectImage(idx)"
-      [attr.aria-label]="'Select image ' + (idx + 1)">
-      <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-cover" />
-    </button>
-    }
-  </div>
-  }
-</div>

src/app/features/store/components/product-carousel/product-carousel.component.scss

@@ -1,92 +0,0 @@
-.product-carousel {
-  width: 100%;
-
-  &__main {
-    aspect-ratio: 1 / 1;
-    width: 100%;
-    background-color: #e0e0e0 !important;
-    /* Matches grey placeholder in mock */
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__main-image {
-    display: block;
-    padding: 0;
-    transition: transform 0.3s ease;
-  }
-
-  &__placeholder {
-    height: 100%;
-    background-color: #e0e0e0;
-  }
-
-  &__discount-badge {
-    top: 0 !important;
-    right: 0 !important;
-    background-color: var(--tenant-primary, #6376F3) !important;
-    border-bottom-left-radius: 4px;
-    font-size: 0.9rem;
-    letter-spacing: 0.5px;
-    padding: 0.5rem 1rem !important;
-  }
-
-  &__nav-btn {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.2) !important;
-    color: #ffffff !important;
-    font-size: 0.9rem;
-    transition: background-color 0.2s ease, transform 0.2s ease;
-    z-index: 10;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.4) !important;
-      transform: translateY(-50%) scale(1.05);
-    }
-
-    &--prev {
-      left: 16px !important;
-    }
-
-    &--next {
-      right: 16px !important;
-    }
-  }
-
-  &__thumbnails {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  &__thumbnail {
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    background-color: #e0e0e0 !important;
-    /* Matches mock layout */
-    padding: 0;
-    transition: opacity 0.2s ease, border-color 0.2s ease;
-    border: 3px solid transparent !important;
-    cursor: pointer;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    &:hover {
-      opacity: 0.9;
-    }
-
-    &--active {
-      border-color: var(--tenant-primary, #6376F3) !important;
-      opacity: 1;
-    }
-  }
-}

src/app/features/store/components/product-carousel/product-carousel.component.spec.ts

@@ -1,90 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { beforeEach, describe, expect, it } from 'vitest';
-import { ProductCarouselComponent } from './product-carousel.component';
-
-describe('ProductCarouselComponent', () => {
-  const mockImages = [
-    'https://example.com/img1.png',
-    'https://example.com/img2.png',
-    'https://example.com/img3.png'
-  ];
-
-  beforeEach(() => {
-    TestBed.resetTestingModule();
-  });
-
-  async function createComponent(images: string[] = [], discount: number | null = null) {
-    await TestBed.configureTestingModule({
-      imports: [ProductCarouselComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(ProductCarouselComponent);
-    const component = fixture.componentInstance;
-
-    // Set signals input values
-    fixture.componentRef.setInput('images', images);
-    fixture.componentRef.setInput('discount', discount);
-
-    fixture.detectChanges();
-
-    return { fixture, component };
-  }
-
-  it('should create and start at activeIndex 0', async () => {
-    const { component } = await createComponent(mockImages);
-    expect(component).toBeTruthy();
-    expect(component.activeIndex()).toBe(0);
-  });
-
-  it('should cycle through images on nextImage', async () => {
-    const { component } = await createComponent(mockImages);
-    expect(component.activeIndex()).toBe(0);
-
-    component.nextImage();
-    expect(component.activeIndex()).toBe(1);
-
-    component.nextImage();
-    expect(component.activeIndex()).toBe(2);
-
-    component.nextImage(); // Should wrap around to 0
-    expect(component.activeIndex()).toBe(0);
-  });
-
-  it('should cycle backwards on prevImage', async () => {
-    const { component } = await createComponent(mockImages);
-    expect(component.activeIndex()).toBe(0);
-
-    component.prevImage(); // Should wrap around to end (2)
-    expect(component.activeIndex()).toBe(2);
-
-    component.prevImage();
-    expect(component.activeIndex()).toBe(1);
-  });
-
-  it('should set activeIndex on selectImage', async () => {
-    const { component } = await createComponent(mockImages);
-    expect(component.activeIndex()).toBe(0);
-
-    component.selectImage(2);
-    expect(component.activeIndex()).toBe(2);
-
-    // If out of bounds, should not change
-    component.selectImage(5);
-    expect(component.activeIndex()).toBe(2);
-  });
-
-  it('should render discount badge if provided', async () => {
-    const { fixture } = await createComponent(mockImages, 20);
-    const element = fixture.nativeElement as HTMLElement;
-    const badge = element.querySelector('.product-carousel__discount-badge');
-    expect(badge).not.toBeNull();
-    expect(badge?.textContent?.trim()).toBe('-20%');
-  });
-
-  it('should not render discount badge if not provided', async () => {
-    const { fixture } = await createComponent(mockImages);
-    const element = fixture.nativeElement as HTMLElement;
-    const badge = element.querySelector('.product-carousel__discount-badge');
-    expect(badge).toBeNull();
-  });
-});

src/app/features/store/components/product-carousel/product-carousel.component.ts

@@ -1,38 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-product-carousel',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './product-carousel.component.html',
-  styleUrl: './product-carousel.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProductCarouselComponent {
-  readonly images = input<string[]>([]);
-  readonly discount = input<number | null>(null);
-
-  readonly activeIndex = signal(0);
-
-  nextImage(): void {
-    const total = this.images().length;
-    if (total > 0) {
-      this.activeIndex.set((this.activeIndex() + 1) % total);
-    }
-  }
-
-  prevImage(): void {
-    const total = this.images().length;
-    if (total > 0) {
-      this.activeIndex.set((this.activeIndex() - 1 + total) % total);
-    }
-  }
-
-  selectImage(index: number): void {
-    const total = this.images().length;
-    if (index >= 0 && index < total) {
-      this.activeIndex.set(index);
-    }
-  }
-}

src/app/features/store/pages/product-detail-page/product-detail-page.component.html

@@ -1,137 +0,0 @@
-<section class="product-detail py-5">
-  <div class="container-xl px-3 px-md-4">
-    @if (loading()) {
-      <div class="text-center py-5">
-        <div class="spinner-border text-primary" role="status">
-          <span class="visually-hidden">Cargando...</span>
-        </div>
-      </div>
-    } @else if (error()) {
-      <div class="alert alert-danger text-center mb-0" role="alert">
-        {{ error() }}
-      </div>
-    } @else if (product(); as prod) {
-      <div class="row g-4 g-xl-5 align-items-start">
-        <div class="col-12 col-lg-5">
-          <div #carouselHost class="product-detail__carousel">
-            <app-product-carousel [images]="carouselImages()" />
-          </div>
-        </div>
-
-        <div class="col-12 col-lg-7">
-          <div class="product-detail__panel">
-            <section class="product-detail__section">
-              <h1 class="product-detail__title mb-0">{{ prod.nombre }}</h1>
-
-              <div class="product-detail__title-price-divider"></div>
-
-              <div class="product-detail__price-group">
-                <span class="product-detail__price-current">
-                  {{ getFormattedPrice(prod.precio) }}
-                </span>
-
-                @if (oldPrice(); as oldPrice) {
-                  <span class="product-detail__price-previous">{{ oldPrice }}</span>
-                }
-              </div>
-            </section>
-
-            @if (hasRenderableAttributes()) {
-              <div class="product-detail__divider"></div>
-
-              <section class="product-detail__section product-detail__section--attributes">
-                <app-product-attribute-selector
-                  [attributes]="renderableAttributes()"
-                  [variantsMap]="prod.variants_map"
-                  [defaultVariant]="prod.variant"
-                  (variantChange)="onVariantChange($event)"
-                />
-              </section>
-            }
-
-            <div class="product-detail__divider"></div>
-
-            <section class="product-detail__section">
-              <div class="product-detail__purchase">
-                <div class="product-detail__quantity" aria-label="Selector de cantidad">
-                  <button
-                    type="button"
-                    class="product-detail__quantity-button"
-                    aria-label="Disminuir cantidad"
-                    (click)="decreaseQuantity()"
-                  >
-                    -
-                  </button>
-
-                  <span class="product-detail__quantity-value">{{ quantity() }}</span>
-
-                  <button
-                    type="button"
-                    class="product-detail__quantity-button"
-                    aria-label="Aumentar cantidad"
-                    [disabled]="quantity() >= (selectedVariant()?.stock ?? 1)"
-                    (click)="increaseQuantity()"
-                  >
-                    +
-                  </button>
-                </div>
-
-                <div class="product-detail__actions">
-                  <app-button
-                    class="product-detail__cta"
-                    variant="secondary"
-                    type="button"
-                    [disabled]="!selectedVariant() || variantLoading()"
-                  >
-                    @if (variantLoading()) {
-                      <div class="spinner-border spinner-border-sm" role="status"></div>
-                    } @else {
-                      Agregar al carrito
-                    }
-                  </app-button>
-
-                  <app-button class="product-detail__cta" type="button" [disabled]="!selectedVariant() || variantLoading()">
-                    @if (variantLoading()) {
-                      <div class="spinner-border spinner-border-sm" role="status"></div>
-                    } @else {
-                      Comprar
-                    }
-                  </app-button>
-                </div>
-              </div>
-            </section>
-
-            <div class="product-detail__divider"></div>
-
-            <section class="product-detail__section product-detail__section--description">
-              <h2 class="product-detail__description-heading">DESCRIPCIÓN</h2>
-
-              <div
-                #descriptionBody
-                class="product-detail__description-body"
-                [class.product-detail__description-body--expanded]="descriptionExpanded()"
-                [style.max-height.px]="descriptionExpanded() ? descriptionMaxHeight() || null : null"
-              >
-                {{ prod.descripcion }}
-              </div>
-
-              @if (showDescriptionToggle()) {
-                <button
-                  type="button"
-                  class="product-detail__description-toggle"
-                  (click)="toggleDescription()"
-                >
-                  {{ descriptionExpanded() ? 'Mostrar menos' : 'Mostrar más' }}
-                </button>
-              }
-            </section>
-          </div>
-        </div>
-      </div>
-    } @else {
-      <div class="alert alert-warning text-center mb-0" role="alert">
-        No se encontró el producto especificado.
-      </div>
-    }
-  </div>
-</section>

src/app/features/store/pages/product-detail-page/product-detail-page.component.scss

@@ -1,176 +0,0 @@
-.product-detail {
-  color: #000000;
-
-  &__panel {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  &__section {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  &__divider {
-    border-top: 1px solid #e6e6e6;
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 400;
-    line-height: 1.35;
-    color: #000000;
-  }
-
-  &__title-price-divider {
-    border-top: 1px solid #e6e6e6;
-  }
-
-  &__price-group {
-    display: flex;
-    align-items: baseline;
-    gap: 0.875rem;
-    flex-wrap: wrap;
-  }
-
-  &__price-current {
-    font-size: 42px;
-    font-weight: 700;
-    line-height: 1.1;
-    color: var(--tenant-primary);
-  }
-
-  &__price-previous {
-    font-size: 19px;
-    font-weight: 325;
-    line-height: 1.2;
-    color: #a0a0a0;
-    text-decoration: line-through;
-  }
-
-  &__section--attributes {
-    gap: 1.25rem;
-  }
-
-  &__attribute-options,
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex-wrap: wrap;
-  }
-
-  &__quantity-button {
-    border: 1px solid #dcdcdc;
-    background: #ffffff;
-    color: #666666;
-    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
-  }
-
-  &__purchase {
-    display: flex;
-    align-items: stretch;
-    gap: 0.875rem;
-    flex-wrap: wrap;
-  }
-
-  &__quantity {
-    display: inline-flex;
-    align-items: center;
-    border: 1px solid #d8d8d8;
-    border-radius: 6px;
-    overflow: hidden;
-    min-height: 44px;
-    background: #f6f6f6;
-  }
-
-  &__quantity-button {
-    width: 25px;
-    height: 44px;
-    padding: 0;
-    font-size: 20px;
-    font-weight: 700;
-    line-height: 1;
-    color: #6f6f6f;
-    background: #f6f6f6;
-    border: 0;
-
-  
-  }
-
-  &__quantity-value {
-    min-width: 35px;
-    text-align: center;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 1;
-    color: #6f6f6f;
-  }
-
-  &__actions {
-    flex: 1 1 0;
-  }
-
-  &__description-heading {
-    margin: 0;
-    font-size: 15px;
-    font-weight: 400;
-    line-height: 1.2;
-    letter-spacing: 0.04em;
-    color: #666666;
-  }
-
-  &__description-body {
-    font-size: 14px;
-    font-weight: 325;
-    line-height: 1.45;
-    color: #666666;
-    white-space: pre-line;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-
-    &--expanded {
-      display: block;
-      -webkit-line-clamp: unset;
-      max-height: none;
-      overflow-y: auto;
-      padding-right: 0.35rem;
-    }
-  }
-
-  &__description-toggle {
-    align-self: center;
-    border: 0;
-    background: transparent;
-    padding: 0;
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--tenant-primary);
-  }
-}
-
-app-button.product-detail__cta {
-  flex: 1 1 0;
-  min-width: 0;
-}
-
-@media (max-width: 991.98px) {
-  .product-detail {
-    &__panel {
-      gap: 1.25rem;
-    }
-
-    &__purchase {
-      flex-direction: column;
-    }
-
-    &__actions {
-      width: 100%;
-      flex-direction: column;
-    }
-  }
-}

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

@@ -1,332 +0,0 @@
-import { TestBed, getTestBed } from '@angular/core/testing';
-import {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
-import { ActivatedRoute, Router } from '@angular/router';
-import { By } from '@angular/platform-browser';
-import { BehaviorSubject, of, throwError } from 'rxjs';
-import { convertToParamMap } from '@angular/router';
-import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { ProductDetail } from '../../../../core/services/catalog/catalog.interface';
-import { CatalogService } from '../../../../core/services/catalog/catalog.service';
-import { ProductDetailPageComponent } from './product-detail-page.component';
-
-describe('ProductDetailPageComponent', () => {
-  const mockProduct: ProductDetail = {
-    id: 1,
-    category_id: 10,
-    brand_id: null,
-    slug: 'auriculares-bluetooth',
-    nombre: 'Auriculares Bluetooth',
-    descripcion: 'Auriculares bluetooth de prueba',
-    precio: '24999',
-    category: 'Tecnología',
-    brand: 'Sony',
-    images: ['https://example.com/image.png'],
-    attributes: [],
-    variants_map: [],
-    variant: null
-  };
-
-  let paramMapSubject: BehaviorSubject<any>;
-  let catalogServiceStub: any;
-  let routerStub: any;
-
-  beforeAll(() => {
-    try {
-      getTestBed().initTestEnvironment(
-        BrowserTestingModule,
-        platformBrowserTesting()
-      );
-    } catch {
-      // Test environment may already be initialized by another setup entrypoint.
-    }
-  });
-
-  beforeEach(() => {
-    vi.restoreAllMocks();
-    paramMapSubject = new BehaviorSubject(convertToParamMap({ id: '1' }));
-    catalogServiceStub = {
-      getProducto: vi.fn().mockReturnValue(of(mockProduct))
-    };
-    routerStub = {
-      navigate: vi.fn()
-    };
-  });
-
-  async function configureTestingModule() {
-    await TestBed.configureTestingModule({
-      imports: [ProductDetailPageComponent],
-      providers: [
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            paramMap: paramMapSubject.asObservable()
-          }
-        },
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        },
-        {
-          provide: Router,
-          useValue: routerStub
-        }
-      ]
-    }).compileComponents();
-  }
-
-  it('loads the product on init and embeds the carousel', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(catalogServiceStub.getProducto).toHaveBeenCalledWith(1);
-
-    expect(element.querySelector('app-product-carousel')).not.toBeNull();
-    expect(element.querySelector('.product-detail__title')?.textContent).toContain('Auriculares Bluetooth');
-    expect(element.querySelector('.product-detail__price-current')?.textContent).toContain('$24.999');
-    expect(element.querySelector('.product-detail__price-previous')).toBeNull();
-    expect(element.querySelector('.product-carousel__discount-badge')).toBeNull();
-  });
-
-  it('shows error message if load fails', async () => {
-    catalogServiceStub.getProducto.mockReturnValue(throwError(() => new Error('load failed')));
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.textContent).toContain('No pudimos cargar los detalles del producto.');
-  });
-
-
-  it('should use default variant images if present', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      images: ['https://example.com/product.png'],
-      variant: {
-        id: 123,
-        stock: 10,
-        images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
-        definitions: {}
-      }
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
-    expect(carousel.images()).toEqual(['https://example.com/variant1.png', 'https://example.com/variant2.png']);
-  });
-
-  it('should fallback to product images if default variant images are not present', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      images: ['https://example.com/product.png'],
-      variant: null
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
-    expect(carousel.images()).toEqual(['https://example.com/product.png']);
-  });
-
-  it('should fallback to empty array if no images are present at all', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      images: [],
-      variant: null
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
-    expect(carousel.images()).toEqual([]);
-  });
-
-  it('renders generic attributes and preselects default variant options', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      attributes: [
-        {
-          id: 1,
-          codigo: 'color',
-          nombre: 'Color',
-          is_required: true,
-          metadata_schema: null,
-          type: 'select',
-          options: [
-            {
-              id: 10,
-              value: 'beige',
-              label: 'Beige',
-              sort_order: 1,
-              metadata: { hex: '#D8D1C7' }
-            },
-            {
-              id: 11,
-              value: 'brown',
-              label: 'Marrón',
-              sort_order: 2,
-              metadata: { palette: { primary: '#7E6460' } }
-            }
-          ]
-        },
-        {
-          id: 2,
-          codigo: 'material',
-          nombre: 'Material',
-          is_required: true,
-          metadata_schema: null,
-          type: 'select',
-          options: [
-            {
-              id: 20,
-              value: 'mesh',
-              label: 'Mesh',
-              sort_order: 1,
-              metadata: null
-            },
-            {
-              id: 21,
-              value: 'cuero',
-              label: 'Cuero',
-              sort_order: 2,
-              metadata: null
-            }
-          ]
-        }
-      ],
-      variant: {
-        id: 123,
-        stock: 10,
-        images: ['https://example.com/variant1.png'],
-        definitions: {
-          color: 'beige',
-          material: 'Cuero'
-        }
-      }
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    const swatches = element.querySelectorAll('.attribute-selector__swatch');
-    const textOptions = element.querySelectorAll('.attribute-selector__text-option');
-    const labels = Array.from(element.querySelectorAll('.attribute-selector__label')).map((label) =>
-      label.textContent?.trim()
-    );
-
-    expect(labels).toEqual(['Color:', 'Material:']);
-    expect(swatches).toHaveLength(2);
-    expect(textOptions).toHaveLength(2);
-    expect(swatches[0].classList.contains('attribute-selector__swatch--selected')).toBe(true);
-    expect(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe(true);
-    expect((swatches[0] as HTMLElement).style.backgroundColor).not.toBe('');
-  });
-
-  it('hides the attributes block and its extra divider when no attributes are present', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.querySelector('.product-detail__section--attributes')).toBeNull();
-    expect(element.querySelectorAll('.product-detail__divider')).toHaveLength(2);
-  });
-
-  it('keeps quantity at a minimum of one and increments locally', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.componentInstance['selectedVariant'].set({
-      variant_id: 1,
-      stock: 10,
-      attributes: {}
-    });
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    const decreaseButton = element.querySelector(
-      '[aria-label="Disminuir cantidad"]'
-    ) as HTMLButtonElement;
-    const increaseButton = element.querySelector(
-      '[aria-label="Aumentar cantidad"]'
-    ) as HTMLButtonElement;
-
-    decreaseButton.click();
-    fixture.detectChanges();
-
-    expect(element.querySelector('.product-detail__quantity-value')?.textContent?.trim()).toBe('1');
-
-    increaseButton.click();
-    increaseButton.click();
-    fixture.detectChanges();
-
-    expect(element.querySelector('.product-detail__quantity-value')?.textContent?.trim()).toBe('3');
-  });
-
-  it('toggles the full description state when overflow is available', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    (fixture.componentInstance as any).descriptionHasOverflow.set(true);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    const toggleButton = element.querySelector(
-      '.product-detail__description-toggle'
-    ) as HTMLButtonElement;
-
-    expect(toggleButton.textContent?.trim()).toBe('Mostrar más');
-
-    toggleButton.click();
-    fixture.detectChanges();
-
-    expect(
-      element
-        .querySelector('.product-detail__description-body')
-        ?.classList.contains('product-detail__description-body--expanded')
-    ).toBe(true);
-    expect(toggleButton.textContent?.trim()).toBe('Mostrar menos');
-  });
-
-  it('renders purchase actions without side effects', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const buttons = Array.from(
-      fixture.nativeElement.querySelectorAll('app-button button')
-    ) as HTMLButtonElement[];
-
-    expect(buttons.map((button) => button.textContent?.trim())).toEqual([
-      'Agregar al carrito',
-      'Comprar'
-    ]);
-
-    buttons[0].click();
-    buttons[1].click();
-
-    expect(routerStub.navigate).not.toHaveBeenCalled();
-  });
-});

src/app/features/store/pages/product-detail-page/product-detail-page.component.ts

@@ -1,298 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  OnDestroy,
-  OnInit,
-  computed,
-  effect,
-  inject,
-  signal,
-  viewChild,
-  PLATFORM_ID
-} from '@angular/core';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { HttpErrorResponse } from '@angular/common/http';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { Subscription } from 'rxjs';
-
-import { CatalogService } from '../../../../core/services/catalog/catalog.service';
-import { ToastService } from '../../../../core/services/toast.service';
-import {
-  ProductAttribute,
-  ProductAttributeOption,
-  ProductDetail,
-  ProductVariant,
-  ProductVariantMap
-} from '../../../../core/services/catalog/catalog.interface';
-import { ProductCarouselComponent } from '../../components/product-carousel/product-carousel.component';
-import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import { ProductAttributeSelectorComponent } from '../../components/product-attribute-selector/product-attribute-selector.component';
-
-@Component({
-  selector: 'app-product-detail-page',
-  standalone: true,
-  imports: [CommonModule, RouterModule, ProductCarouselComponent, ButtonComponent, ProductAttributeSelectorComponent],
-  templateUrl: './product-detail-page.component.html',
-  styleUrl: './product-detail-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProductDetailPageComponent implements OnInit, OnDestroy {
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-  private readonly catalogService = inject(CatalogService);
-  private readonly toastService = inject(ToastService);
-  private readonly attributeSelector = viewChild(ProductAttributeSelectorComponent);
-  private readonly carouselHost = viewChild<ElementRef<HTMLElement>>('carouselHost');
-  private readonly descriptionBody = viewChild<ElementRef<HTMLElement>>('descriptionBody');
-  private readonly platformId = inject(PLATFORM_ID);
-  private readonly isBrowser = isPlatformBrowser(this.platformId);
-
-  private routeSub: Subscription | null = null;
-  private productSub: Subscription | null = null;
-  private carouselResizeObserver: ResizeObserver | null = null;
-  private observedCarouselPreview: HTMLElement | null = null;
-  private measurementTimer: ReturnType<typeof setTimeout> | null = null;
-
-  protected readonly product = signal<ProductDetail | null>(null);
-  protected readonly carouselImages = computed(() => {
-    const prod = this.product();
-    if (!prod) return [];
-    if (prod.variant?.images && prod.variant.images.length > 0) {
-      return prod.variant.images;
-    }
-    if (prod.images && prod.images.length > 0) {
-      return prod.images;
-    }
-    return [];
-  });
-  protected readonly loading = signal(false);
-  protected readonly variantLoading = signal(false);
-  protected readonly error = signal<string | null>(null);
-  protected readonly selectedVariant = signal<ProductVariantMap | null>(null);
-  protected readonly quantity = signal(1);
-  protected readonly descriptionExpanded = signal(false);
-  protected readonly descriptionMaxHeight = signal(0);
-  protected readonly descriptionHasOverflow = signal(false);
-  protected readonly renderableAttributes = computed(() =>
-    (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0)
-  );
-  protected readonly hasRenderableAttributes = computed(
-    () => this.renderableAttributes().length > 0
-  );
-  protected readonly oldPrice = computed<string | null>(() => null);
-  protected readonly showDescriptionToggle = computed(
-    () => this.descriptionExpanded() || this.descriptionHasOverflow()
-  );
-
-  constructor() {
-    effect(() => {
-      this.carouselHost();
-      this.descriptionBody();
-      this.product();
-      this.descriptionExpanded();
-
-      if (this.isBrowser) {
-        queueMicrotask(() => {
-          this.bindCarouselResizeObserver();
-          this.refreshMeasurements();
-        });
-      }
-    });
-  }
-
-  ngOnInit(): void {
-    this.routeSub = this.route.paramMap.subscribe((params) => {
-      const id = this.parseIntegerParam(params.get('id'));
-      if (id === null) {
-        this.error.set('ID de producto inválido');
-        return;
-      }
-
-      this.loadProduct(id);
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.routeSub?.unsubscribe();
-    this.productSub?.unsubscribe();
-    this.carouselResizeObserver?.disconnect();
-    this.clearMeasurementTimer();
-  }
-
-  private loadProduct(id: number): void {
-    this.loading.set(true);
-    this.error.set(null);
-    this.product.set(null);
-
-    this.productSub?.unsubscribe();
-    this.productSub = this.catalogService.getProducto(id).subscribe({
-      next: (prod) => {
-        this.product.set(prod);
-        this.quantity.set(1);
-        this.descriptionExpanded.set(false);
-        this.descriptionHasOverflow.set(false);
-        this.loading.set(false);
-      },
-      error: () => {
-        this.error.set('No pudimos cargar los detalles del producto.');
-        this.loading.set(false);
-      }
-    });
-  }
-
-  private loadProductVariant(productId: number, variantId: number): void {
-    this.variantLoading.set(true);
-
-    this.productSub?.unsubscribe();
-    this.productSub = this.catalogService.getProducto(productId, variantId).subscribe({
-      next: (prod) => {
-        this.product.set(prod);
-        this.variantLoading.set(false);
-      },
-      error: (err: HttpErrorResponse) => {
-        const errorMessage = err.error?.message || 'No pudimos cargar la variante seleccionada.';
-        this.toastService.danger(errorMessage);
-        this.variantLoading.set(false);
-
-        this.product.update((currentProduct) => {
-          if (!currentProduct) return null;
-          const updatedVariantsMap = currentProduct.variants_map.map((v) => {
-            if (v.variant_id === variantId) {
-              return { ...v, stock: 0 };
-            }
-            return v;
-          });
-          return {
-            ...currentProduct,
-            variants_map: updatedVariantsMap
-          };
-        });
-
-        this.attributeSelector()?.reset();
-      }
-    });
-  }
-
-  protected goBack(): void {
-    this.router.navigate(['/']);
-  }
-
-  protected getFormattedPrice(priceStr: string | undefined): string {
-    if (!priceStr) return '$0';
-    const parsed = Number(priceStr);
-    const value = Number.isFinite(parsed) ? parsed : 0;
-    const rounded = Math.round(value);
-    const parts = rounded.toString().split('.');
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-    return `$${parts.join(',')}`;
-  }
-
-  protected onVariantChange(variant: ProductVariantMap | null): void {
-    if (this.selectedVariant()?.variant_id === variant?.variant_id) {
-      return;
-    }
-
-    this.selectedVariant.set(variant);
-    if (variant && this.quantity() > variant.stock) {
-      this.quantity.set(Math.max(1, variant.stock));
-    }
-
-    const currentProduct = this.product();
-    if (variant && currentProduct && currentProduct.variant?.id !== variant.variant_id) {
-      this.loadProductVariant(currentProduct.id, variant.variant_id);
-    }
-  }
-
-  protected increaseQuantity(): void {
-    const currentStock = this.selectedVariant()?.stock ?? 1;
-    this.quantity.update((current) => current < currentStock ? current + 1 : current);
-  }
-
-  protected decreaseQuantity(): void {
-    this.quantity.update((current) => Math.max(1, current - 1));
-  }
-
-  protected toggleDescription(): void {
-    this.descriptionExpanded.update((current) => !current);
-  }
-
-  private parseIntegerParam(value: string | null): number | null {
-    if (!value) {
-      return null;
-    }
-
-    const parsed = Number(value);
-    return Number.isInteger(parsed) ? parsed : null;
-  }
-
-  private bindCarouselResizeObserver(): void {
-    const previewElement = this.getCarouselPreviewElement();
-
-    if (!previewElement || previewElement === this.observedCarouselPreview) {
-      return;
-    }
-
-    this.carouselResizeObserver?.disconnect();
-    this.observedCarouselPreview = previewElement;
-
-    if (typeof ResizeObserver === 'undefined') {
-      this.updateDescriptionMaxHeight();
-      return;
-    }
-
-    this.carouselResizeObserver = new ResizeObserver(() => {
-      this.scheduleMeasurement();
-    });
-    this.carouselResizeObserver.observe(previewElement);
-    this.updateDescriptionMaxHeight();
-  }
-
-  private scheduleMeasurement(): void {
-    this.clearMeasurementTimer();
-    this.measurementTimer = setTimeout(() => {
-      this.measurementTimer = null;
-      this.refreshMeasurements();
-    }, 0);
-  }
-
-  private clearMeasurementTimer(): void {
-    if (this.measurementTimer) {
-      clearTimeout(this.measurementTimer);
-      this.measurementTimer = null;
-    }
-  }
-
-  private refreshMeasurements(): void {
-    this.updateDescriptionMaxHeight();
-    this.updateDescriptionOverflow();
-  }
-
-  private updateDescriptionMaxHeight(): void {
-    const previewElement = this.getCarouselPreviewElement();
-    const nextHeight = previewElement?.getBoundingClientRect().height ?? 0;
-
-    if (nextHeight > 0) {
-      this.descriptionMaxHeight.set(nextHeight);
-    }
-  }
-
-  private updateDescriptionOverflow(): void {
-    const descriptionElement = this.descriptionBody()?.nativeElement;
-
-    if (!descriptionElement || this.descriptionExpanded()) {
-      return;
-    }
-
-    this.descriptionHasOverflow.set(
-      descriptionElement.scrollHeight - descriptionElement.clientHeight > 1
-    );
-  }
-
-  private getCarouselPreviewElement(): HTMLElement | null {
-    return (
-      this.carouselHost()?.nativeElement.querySelector<HTMLElement>('.product-carousel__main') ??
-      null
-    );
-  }
-}

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

@@ -1,45 +1,21 @@
-<section class="py-5">
+<section class="store-home">
-  <div class="container-xl px-3 px-md-4">
+  <div class="store-home__inner">
-    <app-store-section title="Productos">
+    <div class="store-home__hero">
-      <div class="d-grid gap-4">
+      <span class="store-home__eyebrow">Store Layout</span>
-        @if (error()) {
+      <h1>Tienda en construccion</h1>
-          <p class="alert text-center mb-0 store-home__alert-error">{{ error() }}</p>
+      <p class="store-home__lead">
-        } @else if (loading() && !productCards().length) {
+        Esta pagina placeholder deja visible el shell del store mientras se conectan categorias,
-          <p class="alert alert-light border text-center mb-0">Cargando productos...</p>
+        catalogo y acciones reales.
-        } @else if (!productCards().length) {
+      </p>
-          <p class="alert alert-light border text-center mb-0">No hay productos disponibles en este momento.</p>
+    </div>
-        } @else {
-          <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-4">
-            @for (product of productCards(); track product.id) {
-              <div class="col">
-                <app-product-card
-                  [title]="product.title"
-                  [originalPrice]="product.originalPrice"
-                  [discount]="product.discount"
-                  [transferPrice]="product.transferPrice"
-                  [imageUrl]="product.imageUrl"
-                  (buy)="onBuyProduct(product.id)"
-                />
-              </div>
-            }
-          </div>
-        }
 
-        @if (loading() && productCards().length) {
+    <div class="store-home__highlights">
-          <p class="alert alert-light border text-center mb-0 py-2">Actualizando productos...</p>
+      @for (highlight of highlights; track highlight) {
-        }
+        <article class="store-home__card">
-
+          <span class="store-home__card-index" aria-hidden="true">0{{ $index + 1 }}</span>
-        @if (totalPages() > 1) {
+          <p>{{ highlight }}</p>
-          <div class="d-flex justify-content-center">
+        </article>
-            <app-paginator
+      }
-              [page]="currentPage()"
+    </div>
-              [totalPages]="totalPages()"
-              [disabled]="loading()"
-              (pageChange)="onPageChange($event)"
-            />
-          </div>
-        }
-      </div>
-    </app-store-section>
   </div>
 </section>

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

@@ -2,9 +2,95 @@
   display: block;
 }
 
-.store-home__alert-error {
+.store-home {
-  margin: 0;
+  padding: 3rem 0 4rem;
-  border-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.18);
+}
-  background-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.08);
+
-  color: var(--tenant-danger, #dc3545);
+.store-home__inner {
+  width: min(100% - 3rem, 75rem);
+  margin: 0 auto;
+  display: grid;
+  gap: 1.5rem;
+}
+
+.store-home__hero {
+  padding: clamp(2rem, 4vw, 3rem);
+  border: 1px solid #e4e4e4;
+  border-radius: 1.5rem;
+  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
+  box-shadow: 0 1.2rem 2.2rem rgba(17, 17, 17, 0.06);
+}
+
+.store-home__eyebrow {
+  display: inline-block;
+  margin-bottom: 0.75rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #666666;
+}
+
+h1 {
+  margin-bottom: 0.75rem;
+  font-size: clamp(2rem, 4vw, 3.25rem);
+  font-weight: 700;
+  letter-spacing: -0.05em;
+}
+
+.store-home__lead {
+  max-width: 42rem;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #4a4a4a;
+}
+
+.store-home__highlights {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.store-home__card {
+  display: grid;
+  gap: 0.9rem;
+  padding: 1.5rem;
+  border: 1px solid #e4e4e4;
+  border-radius: 1.25rem;
+  background-color: #ffffff;
+  box-shadow: 0 0.75rem 1.5rem rgba(17, 17, 17, 0.04);
+}
+
+.store-home__card-index {
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #707070;
+}
+
+.store-home__card p {
+  margin: 0;
+  line-height: 1.6;
+  color: #333333;
+}
+
+@media (max-width: 991.98px) {
+  .store-home__highlights {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 767.98px) {
+  .store-home {
+    padding: 2rem 0 3rem;
+  }
+
+  .store-home__inner {
+    width: min(100% - 1.5rem, 75rem);
+  }
+
+  .store-home__highlights {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }

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

@@ -1,239 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { Subject, of, throwError } from 'rxjs';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
-import { Product } from '../../../../core/services/catalog/catalog.interface';
-import { CatalogService } from '../../../../core/services/catalog/catalog.service';
-import { StoreHomePageComponent } from './store-home-page.component';
-
-function createPaginatedResponse(
-  products: Product[],
-  currentPage: number,
-  lastPage: number
-): ApiPaginatedResponse<Product[]> {
-  return {
-    data: products,
-    meta: {
-      current_page: currentPage,
-      from: products.length ? 1 : null,
-      last_page: lastPage,
-      links: [],
-      path: '/productos',
-      per_page: 12,
-      to: products.length || null,
-      total: products.length
-    },
-    links: {
-      first: '/productos?page=1',
-      last: `/productos?page=${lastPage}`,
-      prev: currentPage > 1 ? `/productos?page=${currentPage - 1}` : null,
-      next: currentPage < lastPage ? `/productos?page=${currentPage + 1}` : null
-    }
-  };
-}
-
-describe('StoreHomePageComponent', () => {
-  const pageOneProducts: Product[] = [
-    {
-      id: 1,
-      category_id: 10,
-      brand_id: null,
-      slug: 'auriculares-bluetooth',
-      nombre: 'Auriculares Bluetooth',
-      descripcion: 'Auriculares bluetooth de prueba',
-      precio: '24999',
-      category: 'Tecnología',
-      brand: null,
-      images: []
-    },
-    {
-      id: 2,
-      category_id: 11,
-      brand_id: null,
-      slug: 'teclado-mecanico',
-      nombre: 'Teclado Mecanico',
-      descripcion: 'Teclado mecánico de prueba',
-      precio: '18999',
-      category: 'Tecnología',
-      brand: null,
-      images: []
-    }
-  ];
-
-  beforeEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('loads page 1 on init, renders the products title and the fetched product cards', async () => {
-    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(catalogServiceStub.getProductos).toHaveBeenCalledWith({ page: 1 });
-    expect(element.querySelector('.store-section__title')?.textContent?.trim()).toBe('Productos');
-    expect(element.querySelectorAll('app-product-card')).toHaveLength(2);
-    expect(element.textContent).toContain('Auriculares Bluetooth');
-    expect(element.textContent).toContain('Teclado Mecanico');
-    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/3');
-  });
-
-  it('requests the next page when the paginator emits a page change', async () => {
-    const catalogServiceStub = {
-      getProductos: vi
-        .fn()
-        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-        .mockReturnValueOnce(
-          of(
-            createPaginatedResponse(
-              [
-                {
-                  id: 3,
-                  category_id: 12,
-                  brand_id: null,
-                  slug: 'mouse-gamer',
-                  nombre: 'Mouse Gamer',
-                  descripcion: 'Mouse gamer de prueba',
-                  precio: '15999',
-                  category: 'Tecnología',
-                  brand: null,
-                  images: []
-                }
-              ],
-              2,
-              3
-            )
-          )
-        )
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
-    fixture.detectChanges();
-
-    expect(catalogServiceStub.getProductos).toHaveBeenNthCalledWith(1, { page: 1 });
-    expect(catalogServiceStub.getProductos).toHaveBeenNthCalledWith(2, { page: 2 });
-    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('2/3');
-    expect(element.textContent).toContain('Mouse Gamer');
-  });
-
-  it('disables the paginator while a new page request is in flight', async () => {
-    const nextPageSubject = new Subject<ApiPaginatedResponse<Product[]>>();
-    const catalogServiceStub = {
-      getProductos: vi
-        .fn()
-        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-        .mockReturnValueOnce(nextPageSubject.asObservable())
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
-    fixture.detectChanges();
-
-    expect(
-      Array.from(element.querySelectorAll('app-paginator button')).every(
-        (button) => (button as HTMLButtonElement).disabled
-      )
-    ).toBe(true);
-    expect(element.textContent).toContain('Actualizando productos...');
-
-    nextPageSubject.next(createPaginatedResponse(pageOneProducts, 2, 3));
-    nextPageSubject.complete();
-    fixture.detectChanges();
-
-    expect(
-      Array.from(element.querySelectorAll('app-paginator button')).some(
-        (button) => !(button as HTMLButtonElement).disabled
-      )
-    ).toBe(true);
-  });
-
-  it('shows an empty-state message and hides the paginator when there are no products', async () => {
-    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse([], 1, 1)))
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.textContent).toContain('No hay productos disponibles en este momento.');
-    expect(element.querySelector('app-paginator')).toBeNull();
-  });
-
-  it('shows an error message when the catalog request fails', async () => {
-    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(throwError(() => new Error('boom')))
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.textContent).toContain('No pudimos cargar los productos en este momento.');
-    expect(element.querySelectorAll('app-product-card')).toHaveLength(0);
-  });
-});

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

@@ -1,114 +1,14 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, inject, signal } from '@angular/core';
+import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-
-import { CatalogService } from '../../../../core/services/catalog/catalog.service';
-import { Product } from '../../../../core/services/catalog/catalog.interface';
-import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
-import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
-import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
-
-interface StoreHomeProductCardViewModel {
-  id: number;
-  title: string;
-  originalPrice: number;
-  discount: null;
-  transferPrice: null;
-  imageUrl: string | null;
-}
 
 @Component({
   selector: 'app-store-home-page',
-  imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent],
   templateUrl: './store-home-page.component.html',
-  styleUrl: './store-home-page.component.scss',
+  styleUrl: './store-home-page.component.scss'
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class StoreHomePageComponent implements OnInit, OnDestroy {
+export class StoreHomePageComponent {
-  private readonly catalogService = inject(CatalogService);
+  protected readonly highlights = [
-  private readonly router = inject(Router);
+    'Header y footer listos para conectar con datos reales.',
-
+    'Barra de categorias reservada para sumar dropdown despues.',
-  private activeRequestId = 0;
+    'Placeholder inicial para validar layout, espaciados y responsive.'
-  private productsRequestSubscription: Subscription | null = null;
+  ];
-
-  protected readonly currentPage = signal(1);
-  protected readonly products = signal<Product[]>([]);
-  protected readonly totalPages = signal(0);
-  protected readonly loading = signal(false);
-  protected readonly error = signal<string | null>(null);
-
-  protected readonly productCards = computed<StoreHomeProductCardViewModel[]>(() =>
-    this.products().map((product) => ({
-      id: product.id,
-      title: product.nombre,
-      originalPrice: this.parseProductPrice(product.precio),
-      discount: null,
-      transferPrice: null,
-      imageUrl: product.images?.[0] ?? null
-    }))
-  );
-
-  ngOnInit(): void {
-    this.loadProducts(1);
-  }
-
-  ngOnDestroy(): void {
-    this.productsRequestSubscription?.unsubscribe();
-  }
-
-  protected onPageChange(page: number): void {
-    if (page === this.currentPage() || page < 1) {
-      return;
-    }
-
-    this.loadProducts(page);
-  }
-
-  protected onBuyProduct(productId: number): void {
-    this.router.navigate(['/producto', productId]);
-  }
-
-  private loadProducts(page: number): void {
-    this.activeRequestId += 1;
-    const requestId = this.activeRequestId;
-
-    this.productsRequestSubscription?.unsubscribe();
-    this.loading.set(true);
-    this.error.set(null);
-
-    this.productsRequestSubscription = this.catalogService.getProductos({ page }).subscribe({
-      next: (response) => {
-        if (requestId !== this.activeRequestId) {
-          return;
-        }
-
-        this.products.set(response.data ?? []);
-        this.currentPage.set(response.meta.current_page);
-        this.totalPages.set(response.meta.last_page);
-      },
-      error: () => {
-        if (requestId !== this.activeRequestId) {
-          return;
-        }
-
-        this.products.set([]);
-        this.totalPages.set(0);
-        this.loading.set(false);
-        this.error.set('No pudimos cargar los productos en este momento.');
-      },
-      complete: () => {
-        if (requestId !== this.activeRequestId) {
-          return;
-        }
-
-        this.loading.set(false);
-      }
-    });
-  }
-
-  private parseProductPrice(price: string): number {
-    const parsedPrice = Number(price);
-
-    return Number.isFinite(parsedPrice) ? parsedPrice : 0;
-  }
 }

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

@@ -11,13 +11,6 @@ export const routes: Routes = [
       {
         path: '',
         component: StoreHomePageComponent
-      },
-      {
-        path: 'producto/:id',
-        loadComponent: () =>
-          import('./pages/product-detail-page/product-detail-page.component').then(
-            (m) => m.ProductDetailPageComponent
-          )
       }
     ]
   }

src/app/shared/components/button/button.component.scss

@@ -2,11 +2,6 @@
   display: inline-block;
 }
 
-:host(.product-detail__cta) {
-  display: block;
-  width: 100%;
-}
-
 .btn {
   min-height: 40px;
   font-weight: 700;
@@ -14,10 +9,6 @@
   min-width: 216px;
 }
 
-:host(.product-detail__cta) .btn {
-  width: 100%;
-}
-
 .btn-primary,
 .btn-secondary,
 .btn-danger {

src/app/shared/components/paginator/paginator.component.html

@@ -1,56 +0,0 @@
-<nav
-  class="d-inline-flex align-items-center justify-content-center gap-3 text-decoration-none"
-  aria-label="Paginacion"
->
-  <button
-    type="button"
-    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
-    data-testid="paginator-first"
-    aria-label="Ir a la primera pagina"
-    [disabled]="isFirstStepDisabled()"
-    (click)="changePage('first')"
-  >
-    <i class="fa-solid fa-angles-left" aria-hidden="true"></i>
-  </button>
-
-  <button
-    type="button"
-    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
-    data-testid="paginator-previous"
-    aria-label="Ir a la pagina anterior"
-    [disabled]="isFirstStepDisabled()"
-    (click)="changePage('previous')"
-  >
-    <i class="fa-solid fa-angle-left" aria-hidden="true"></i>
-  </button>
-
-  <span
-    class="paginator__status d-inline-block text-center fw-semibold lh-1"
-    data-testid="paginator-status"
-    aria-live="polite"
-  >
-    {{ displayPage() }}/{{ displayTotalPages() }}
-  </span>
-
-  <button
-    type="button"
-    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
-    data-testid="paginator-next"
-    aria-label="Ir a la pagina siguiente"
-    [disabled]="isLastStepDisabled()"
-    (click)="changePage('next')"
-  >
-    <i class="fa-solid fa-angle-right" aria-hidden="true"></i>
-  </button>
-
-  <button
-    type="button"
-    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
-    data-testid="paginator-last"
-    aria-label="Ir a la ultima pagina"
-    [disabled]="isLastStepDisabled()"
-    (click)="changePage('last')"
-  >
-    <i class="fa-solid fa-angles-right" aria-hidden="true"></i>
-  </button>
-</nav>

src/app/shared/components/paginator/paginator.component.scss

@@ -1,37 +0,0 @@
-:host {
-  display: block;
-  width: fit-content;
-  color: var(--tenant-primary);
-}
-
-.paginator__button {
-  width: 2rem;
-  height: 2rem;
-  color: inherit;
-  font-size: 1rem;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease,
-    transform 0.2s ease;
-
-  &:hover:not(:disabled) {
-    background-color: color-mix(in srgb, white 84%, var(--tenant-primary));
-    transform: translateY(-1px);
-  }
-
-  &:focus-visible {
-    outline: 2px solid color-mix(in srgb, white 55%, var(--tenant-primary));
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    color: color-mix(in srgb, white 45%, var(--tenant-primary));
-    cursor: default;
-  }
-}
-
-.paginator__status {
-  min-width: 3rem;
-  font-size: 1rem;
-  letter-spacing: 0.04em;
-}

src/app/shared/components/paginator/paginator.component.spec.ts

@@ -1,93 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { PaginatorComponent } from './paginator.component';
-
-describe('PaginatorComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PaginatorComponent]
-    }).compileComponents();
-  });
-
-  function setup(page: number, totalPages: number, disabled = false) {
-    const fixture = TestBed.createComponent(PaginatorComponent);
-    fixture.componentRef.setInput('page', page);
-    fixture.componentRef.setInput('totalPages', totalPages);
-    fixture.componentRef.setInput('disabled', disabled);
-    fixture.detectChanges();
-
-    return {
-      fixture,
-      element: fixture.nativeElement as HTMLElement
-    };
-  }
-
-  it('renders the current page status', () => {
-    const { element } = setup(1, 8);
-
-    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/8');
-  });
-
-  it('emits the next page when clicking next', () => {
-    const { fixture, element } = setup(1, 8);
-    const pageChangeSpy = vi.fn();
-
-    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
-    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
-
-    expect(pageChangeSpy).toHaveBeenCalledWith(2);
-  });
-
-  it('emits the last page when clicking last', () => {
-    const { fixture, element } = setup(1, 8);
-    const pageChangeSpy = vi.fn();
-
-    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
-    (element.querySelector('[data-testid="paginator-last"]') as HTMLButtonElement).click();
-
-    expect(pageChangeSpy).toHaveBeenCalledWith(8);
-  });
-
-  it('emits the first page when clicking first from a middle page', () => {
-    const { fixture, element } = setup(4, 8);
-    const pageChangeSpy = vi.fn();
-
-    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
-    (element.querySelector('[data-testid="paginator-first"]') as HTMLButtonElement).click();
-
-    expect(pageChangeSpy).toHaveBeenCalledWith(1);
-  });
-
-  it('does not emit when trying to go before the first page', () => {
-    const { fixture, element } = setup(1, 8);
-    const pageChangeSpy = vi.fn();
-
-    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
-    (element.querySelector('[data-testid="paginator-previous"]') as HTMLButtonElement).click();
-
-    expect(pageChangeSpy).not.toHaveBeenCalled();
-  });
-
-  it('does not emit when trying to go after the last page', () => {
-    const { fixture, element } = setup(8, 8);
-    const pageChangeSpy = vi.fn();
-
-    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
-    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
-
-    expect(pageChangeSpy).not.toHaveBeenCalled();
-  });
-
-  it('disables all buttons when disabled is true', () => {
-    const { element } = setup(2, 8, true);
-
-    expect(Array.from(element.querySelectorAll('button')).every((button) => button.disabled)).toBe(true);
-  });
-
-  it('disables all buttons when there is only one page', () => {
-    const { element } = setup(1, 1);
-
-    expect(Array.from(element.querySelectorAll('button')).every((button) => button.disabled)).toBe(true);
-  });
-});

src/app/shared/components/paginator/paginator.component.ts

@@ -1,76 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
-
-type PaginatorAction = 'first' | 'previous' | 'next' | 'last';
-
-@Component({
-  selector: 'app-paginator',
-  standalone: true,
-  templateUrl: './paginator.component.html',
-  styleUrl: './paginator.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PaginatorComponent {
-  readonly page = input.required<number>();
-  readonly totalPages = input.required<number>();
-  readonly disabled = input(false);
-
-  readonly pageChange = output<number>();
-
-  protected readonly displayPage = computed(() => {
-    const totalPages = this.displayTotalPages();
-
-    if (totalPages < 1) {
-      return 0;
-    }
-
-    return Math.min(Math.max(this.page(), 1), totalPages);
-  });
-
-  protected readonly displayTotalPages = computed(() => Math.max(this.totalPages(), 0));
-
-  protected readonly isNavigationDisabled = computed(() => {
-    const page = this.page();
-    const totalPages = this.totalPages();
-
-    return (
-      this.disabled() ||
-      !Number.isInteger(page) ||
-      !Number.isInteger(totalPages) ||
-      totalPages <= 1 ||
-      page < 1 ||
-      page > totalPages
-    );
-  });
-
-  protected readonly isFirstStepDisabled = computed(
-    () => this.isNavigationDisabled() || this.displayPage() <= 1
-  );
-
-  protected readonly isLastStepDisabled = computed(
-    () => this.isNavigationDisabled() || this.displayPage() >= this.displayTotalPages()
-  );
-
-  protected changePage(action: PaginatorAction): void {
-    if (this.isNavigationDisabled()) {
-      return;
-    }
-
-    const currentPage = this.displayPage();
-    const totalPages = this.displayTotalPages();
-
-    const nextPageByAction: Record<PaginatorAction, number> = {
-      first: 1,
-      previous: currentPage - 1,
-      next: currentPage + 1,
-      last: totalPages
-    };
-
-    const nextPage = nextPageByAction[action];
-
-    if (nextPage === currentPage || nextPage < 1 || nextPage > totalPages) {
-      return;
-    }
-
-    this.pageChange.emit(nextPage);
-  }
-}

src/app/shared/components/product-card/product-card.component.html

@@ -1,50 +0,0 @@
-<div class="product-card border rounded shadow-sm bg-white overflow-hidden d-flex flex-column h-100">
-  <!-- Image section -->
-  <div class="product-card__image-container position-relative bg-light">
-    @if (imageUrl()) {
-    <img [src]="imageUrl()" [alt]="title()" class="product-card__image w-100 h-100 object-fit-cover" />
-    } @else {
-    <div
-      class="product-card__image-placeholder w-100 h-100 d-flex align-items-center justify-content-center bg-light text-muted">
-      <i class="fa-solid fa-image fa-2x"></i>
-    </div>
-    }
-
-    <!-- Discount badge in top right -->
-    @if (discount() && discount()! > 0) {
-    <span class="product-card__discount-badge position-absolute top-0 end-0 bg-primary text-white px-2 py-1">
-      -{{ discount() }}%
-    </span>
-    }
-  </div>
-
-  <!-- Content section -->
-  <div class="product-card__body p-3 d-flex flex-column align-items-center text-center flex-grow-1">
-    <!-- Product Title -->
-    <h3 class="product-card__title text-uppercase text-black mb-4">{{ title() }}</h3>
-
-    <!-- Prices Area -->
-    <div class="product-card__prices d-flex align-items-center justify-content-center gap-2">
-      <!-- Discounted (computado) Price -->
-      <span class="product-card__price-discounted text-primary">{{ formattedDiscountedPrice() }}</span>
-
-      <!-- Original strikethrough Price (only if discount exists) -->
-      @if (discount() && discount()! > 0) {
-      <span class="product-card__price-original text-decoration-line-through">{{ formattedOriginalPrice() }}</span>
-      }
-    </div>
-
-    <!-- Transfer Price Info -->
-    <div class="product-card__price-transfer mb-4">
-      <span class="product-card__price-transfer-value">{{ formattedTransferPrice() }}</span>
-      <span class="product-card__price-transfer-label"> con transferencia</span>
-    </div>
-
-    <!-- Purchase Action Button -->
-    <div class="product-card__action mt-auto w-100">
-      <app-button variant="primary" class="w-100" (click)="buy.emit()">
-        {{ buttonText() }}
-      </app-button>
-    </div>
-  </div>
-</div>

src/app/shared/components/product-card/product-card.component.scss

@@ -1,76 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.product-card {
-  width: 100%;
-  max-height: 411px;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
-  }
-
-  &__image-container {
-    width: 100%;
-    max-height: 50%;
-    aspect-ratio: 1 / 1;
-    overflow: hidden;
-  }
-
-  &__discount-badge {
-    background-color: var(--tenant-primary) !important;
-    font-size: 13px;
-    font-weight: 325;
-    z-index: 10;
-  }
-
-  &__title {
-    font-size: 12px;
-    font-weight: 325;
-    letter-spacing: 0.5px;
-    line-height: 1.4;
-  }
-
-  &__price-discounted {
-    color: var(--tenant-primary) !important;
-    font-size: 24px;
-    font-weight: 700;
-  }
-
-
-  &__price-original {
-    font-size: 11px;
-    font-weight: 325;
-    color: #DDDDDD;
-  }
-
-  &__price-transfer {
-    font-size: 12px;
-    color: #6c757d;
-  }
-
-  &__price-transfer-value {
-    font-weight: 700;
-  }
-
-  &__price-transfer-label {
-    font-weight: 300;
-  }
-
-  &__action {
-    app-button {
-      display: block;
-      width: 100%;
-
-      ::ng-deep .btn {
-        width: 100%;
-        min-width: 100%;
-        border-radius: 8px;
-      }
-    }
-  }
-}

src/app/shared/components/product-card/product-card.component.ts

@@ -1,69 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
-import { ButtonComponent } from '../button/button.component';
-
-@Component({
-  selector: 'app-product-card',
-  standalone: true,
-  imports: [ButtonComponent],
-  templateUrl: './product-card.component.html',
-  styleUrl: './product-card.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProductCardComponent {
-  // Configurable inputs
-  readonly imageUrl = input<string | null>(null);
-  readonly title = input<string>('');
-  readonly originalPrice = input<number>(0);
-  readonly discount = input<number | null>(null);
-  readonly transferPrice = input<number | null>(null);
-  readonly buttonText = input<string>('Comprar');
-
-  // Interactive events
-  readonly buy = output<void>();
-
-  // Computed discounted price
-  readonly discountedPrice = computed(() => {
-    const original = this.originalPrice();
-    const disc = this.discount();
-    if (!disc || disc <= 0) {
-      return original;
-    }
-    return original * (1 - disc / 100);
-  });
-
-  // Computed transfer price
-  readonly computedTransferPrice = computed(() => {
-    const givenTransfer = this.transferPrice();
-    if (givenTransfer !== null) {
-      return givenTransfer;
-    }
-    // Fallback if not specified: use the discounted price
-    return this.discountedPrice();
-  });
-
-  // Formatted string for discounted price: "$ 76.000"
-  readonly formattedDiscountedPrice = computed(() => {
-    return this.formatCurrency(this.discountedPrice());
-  });
-
-  // Formatted string for original price (if has discount): "$ 95.000"
-  readonly formattedOriginalPrice = computed(() => {
-    return this.formatCurrency(this.originalPrice());
-  });
-
-  // Formatted string for transfer price: "$ 74.800"
-  readonly formattedTransferPrice = computed(() => {
-    return this.formatCurrency(this.computedTransferPrice());
-  });
-
-  /**
-   * Helper method to format currency numbers to Argentine Pesos style "$ XX.XXX".
-   * This manual implementation is safe from runtime/SSR locale variations.
-   */
-  private formatCurrency(value: number): string {
-    const rounded = Math.round(value);
-    const parts = rounded.toString().split('.');
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-    return `$${parts.join(',')}`;
-  }
-}

src/app/shared/components/store-section/store-section.component.html

@@ -1,9 +0,0 @@
-<section class="d-grid w-100 gap-3">
-  <header class="d-flex justify-content-center">
-    <h2 class="m-0 text-center text-uppercase store-section__title">{{ title() }}</h2>
-  </header>
-
-  <div class="w-100">
-    <ng-content></ng-content>
-  </div>
-</section>

src/app/shared/components/store-section/store-section.component.scss

@@ -1,12 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-.store-section__title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: #000000;
-}

src/app/shared/components/store-section/store-section.component.ts

@@ -1,12 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-
-@Component({
-  selector: 'app-store-section',
-  standalone: true,
-  templateUrl: './store-section.component.html',
-  styleUrl: './store-section.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class StoreSectionComponent {
-  readonly title = input.required<string>();
-}

src/app/shared/components/toast-container/toast-container.component.html

@@ -1,24 +0,0 @@
-<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
-  @for (toast of toasts(); track toast.id) {
-    <div
-      class="toast show align-items-center border-0 shadow-sm"
-      [ngClass]="getToastBgClass(toast.type)"
-      role="alert"
-      aria-live="assertive"
-      aria-atomic="true"
-    >
-      <div class="d-flex p-2">
-        <div class="toast-body d-flex align-items-center flex-grow-1">
-          <i [class]="getToastIconClass(toast.type)" class="me-2 fs-5"></i>
-          <span>{{ toast.message }}</span>
-        </div>
-        <button
-          type="button"
-          class="btn-close btn-close-white me-2 m-auto"
-          aria-label="Cerrar"
-          (click)="dismiss(toast.id)"
-        ></button>
-      </div>
-    </div>
-  }
-</div>

src/app/shared/components/toast-container/toast-container.component.scss

@@ -1,46 +0,0 @@
-.toast-container {
-  z-index: 1500;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  pointer-events: none;
-  width: 90vw;
-  max-width: 800px;
-
-  .toast {
-    pointer-events: auto;
-    width: 100% !important;
-    max-width: 100% !important;
-    border-radius: 8px;
-    animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.15) !important;
-    transition: all 0.2s ease-in-out;
-
-    &.text-bg-success {
-      background-color: var(--tenant-success) !important;
-      color: #ffffff !important;
-    }
-
-    &.text-bg-danger {
-      background-color: var(--tenant-danger) !important;
-      color: #ffffff !important;
-    }
-
-    &.text-bg-primary {
-      background-color: var(--tenant-primary) !important;
-      color: #ffffff !important;
-    }
-  }
-}
-
-@keyframes toast-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(20px) scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}

src/app/shared/components/toast-container/toast-container.component.ts

@@ -1,38 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { NgClass } from '@angular/common';
-import { ToastService, Toast } from '../../../core/services/toast.service';
-
-@Component({
-  selector: 'app-toast-container',
-  imports: [NgClass],
-  templateUrl: './toast-container.component.html',
-  styleUrl: './toast-container.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ToastContainerComponent {
-  private readonly toastService = inject(ToastService);
-
-  readonly toasts = this.toastService.toasts;
-
-  dismiss(id: string): void {
-    this.toastService.dismiss(id);
-  }
-
-  getToastIconClass(type: Toast['type']): string {
-    const icons: Record<Toast['type'], string> = {
-      success: 'fa-solid fa-circle-check',
-      danger: 'fa-solid fa-circle-exclamation',
-      info: 'fa-solid fa-circle-info'
-    };
-    return icons[type] || 'fa-solid fa-bell';
-  }
-
-  getToastBgClass(type: Toast['type']): string {
-    const classes: Record<Toast['type'], string> = {
-      success: 'text-bg-success',
-      danger: 'text-bg-danger',
-      info: 'text-bg-primary'
-    };
-    return classes[type] || 'text-bg-primary';
-  }
-}

src/styles.scss

@@ -15,8 +15,6 @@
   --bs-secondary-rgb: var(--tenant-secondary-rgb);
   --bs-danger: var(--tenant-danger);
   --bs-danger-rgb: var(--tenant-danger-rgb);
-  --bs-success: var(--tenant-success);
-  --bs-success-rgb: var(--tenant-success-rgb);
 }
 
 label {