feat(cart): implement add to cart functionality and display empty cart message

feat(quantity-selector): change background to inherit for consistent styling

src/app/app.config.ts

@@ -1,20 +1,36 @@
-import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
-import { ApplicationConfig, provideAppInitializer, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { HttpRequest, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import {
+  ApplicationConfig,
+  provideAppInitializer,
+  provideBrowserGlobalErrorListeners,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { provideClientHydration } from '@angular/platform-browser';
+import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';
 
 import { routes } from './app.routes';
 import { authBootstrap } from './core/services/auth/auth-bootstrap';
 import { authInterceptor } from './core/services/auth/auth.interceptor';
 import { tenantBootstrap } from './core/services/tenant-bootstrap';
 
+function isStoreCatalogRequest(request: HttpRequest<unknown>): boolean {
+  return (
+    request.method === 'GET' &&
+    /\/api\/tenants\/[^/]+\/productos(?:\/\d+)?(?:\?|$)/.test(request.urlWithParams)
+  );
+}
+
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideRouter(routes),
-    provideClientHydration(),
+    provideClientHydration(
+      withHttpTransferCacheOptions({
+        includeRequestsWithAuthHeaders: true,
+        filter: isStoreCatalogRequest,
+      }),
+    ),
     provideHttpClient(withFetch(), withInterceptors([authInterceptor])),
     provideAppInitializer(authBootstrap),
-    provideAppInitializer(tenantBootstrap)
-  ]
+    provideAppInitializer(tenantBootstrap),
+  ],
 };

src/app/app.routes.spec.ts

@@ -160,8 +160,8 @@ describe('app routes', () => {
     expect(placeholders).toEqual([
       'Nombre y Apellido',
       'Email',
-      'Contrasena',
-      'Repetir Contrasena'
+      'Contraseña',
+      'Repetir Contraseña'
     ]);
   });
 

src/app/core/guards/menu.guard.ts

@@ -0,0 +1,24 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { TenantService } from '../services/tenant.service';
+
+export const hasMenuGuard = (menuCode: string): CanActivateFn => {
+  return () => {
+    const tenantService = inject(TenantService);
+    const router = inject(Router);
+
+    const tenant = tenantService.tenant();
+
+    if (!tenant) {
+      return router.createUrlTree(['/']);
+    }
+
+    const hasMenu = tenant.menues?.some(menu => menu.code === menuCode) ?? false;
+
+    if (hasMenu) {
+      return true;
+    }
+
+    return router.createUrlTree(['/']);
+  };
+};

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

@@ -9,7 +9,8 @@
 }
 
 .store-layout__brand-slot {
-  min-width: 10rem;
+  min-width: 150px;
+  max-width:40px;
 }
 
 .store-layout__brand-logo-shell {

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

@@ -5,12 +5,12 @@
 
   <div class="user-dropdown__divider"></div>
 
-  <button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-account">
+  <a routerLink="/mi-cuenta/datos-personales" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-account">
     Mi cuenta
-  </button>
-  <button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-purchases">
+  </a>
+  <a routerLink="/mi-cuenta/compras" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-purchases">
     Mis compras
-  </button>
+  </a>
   <button
     type="button"
     class="user-dropdown__item"

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

@@ -35,6 +35,7 @@
 }
 
 .user-dropdown__item {
+  display: block;
   width: 100%;
   border: 0;
   border-radius: 6px;
@@ -46,6 +47,7 @@
   background: transparent;
   cursor: pointer;
   transition: color 0.15s ease;
+  text-decoration: none;
 }
 
 .user-dropdown__item:active,

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

@@ -1,8 +1,11 @@
 import { Component, computed, input, output } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { AuthUser } from '../../../../services/auth/auth.interfaces';
 
 @Component({
   selector: 'app-user-dropdown',
+  standalone: true,
+  imports: [RouterLink],
   templateUrl: './user-dropdown.component.html',
   styleUrl: './user-dropdown.component.scss'
 })

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

@@ -28,7 +28,11 @@
   }
 
   <main class="flex-grow-1 d-block">
-    <router-outlet />
+    <section class="py-5">
+      <div class="container-xl px-3 px-md-4">
+        <router-outlet />
+      </div>
+    </section>
   </main>
 
   <app-store-footer

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

@@ -2,7 +2,11 @@ import { Component, computed, inject, OnInit, signal } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
 import { TenantService } from '../../services/tenant.service';
 import { CartService } from '../../services/cart/cart.service';
-import { StoreFooterComponent, StoreFooterSection, StoreSocialLink } from './store-footer/store-footer.component';
+import {
+  StoreFooterComponent,
+  StoreFooterSection,
+  StoreSocialLink,
+} from './store-footer/store-footer.component';
 import { StoreHeaderComponent } from './store-header/store-header.component';
 import { CartComponent, CartItemMock } from '../../../shared/components/cart/cart.component';
 import { ButtonComponent } from '../../../shared/components/button/button.component';
@@ -11,9 +15,15 @@ import { AuthService } from '../../services/auth/auth.service';
 
 @Component({
   selector: 'app-store-layout',
-  imports: [RouterOutlet, StoreHeaderComponent, StoreFooterComponent, CartComponent, ButtonComponent],
+  imports: [
+    RouterOutlet,
+    StoreHeaderComponent,
+    StoreFooterComponent,
+    CartComponent,
+    ButtonComponent,
+  ],
   templateUrl: './store-layout.component.html',
-  styleUrl: './store-layout.component.scss'
+  styleUrl: './store-layout.component.scss',
 })
 export class StoreLayoutComponent implements OnInit {
   private readonly tenantService = inject(TenantService);
@@ -57,14 +67,14 @@ export class StoreLayoutComponent implements OnInit {
     }
 
     return {
-      productVariantId: item.product_variant_id,
+      cartItemId: item.id,
       imageUrl: item.product?.imagen ?? null,
       product,
       originalPrice: null,
       discountedPrice: parseFloat(item.precio_unitario),
       discountPercentage: null,
       attributes,
-      quantity: item.cantidad
+      quantity: item.cantidad,
     };
   }
 
@@ -81,7 +91,7 @@ export class StoreLayoutComponent implements OnInit {
 
   ngOnInit(): void {
     this.cartService.loadCart().subscribe({
-      error: (err) => console.error('Error loading cart', err)
+      error: (err) => console.error('Error loading cart', err),
     });
   }
 
@@ -92,7 +102,7 @@ export class StoreLayoutComponent implements OnInit {
   protected onLogoutClick(): void {
     this.authService.logout().subscribe({
       next: () => void this.router.navigate(['/login']),
-      error: (err) => console.error('Error logging out', err)
+      error: (err) => console.error('Error logging out', err),
     });
   }
 
@@ -101,34 +111,33 @@ export class StoreLayoutComponent implements OnInit {
     void this.router.navigate(['/checkout']);
   }
 
-
   protected readonly footerSections: StoreFooterSection[] = [
     {
       heading: 'Cuenta',
-      links: ['Mi cuenta', 'Mis compras', 'Cerrar sesion']
+      links: ['Mi cuenta', 'Mis compras', 'Cerrar sesion'],
     },
     {
       heading: 'Ayuda',
-      links: ['Contacto', 'Ayuda', 'Preguntas frecuentes']
-    }
+      links: ['Contacto', 'Ayuda', 'Preguntas frecuentes'],
+    },
   ];
 
   protected readonly socialLinks: StoreSocialLink[] = [
     {
       label: 'Instagram',
-      iconClass: 'fa-brands fa-instagram'
+      iconClass: 'fa-brands fa-instagram',
     },
     {
       label: 'WhatsApp',
-      iconClass: 'fa-brands fa-whatsapp'
+      iconClass: 'fa-brands fa-whatsapp',
     },
     {
       label: 'Facebook',
-      iconClass: 'fa-brands fa-facebook'
+      iconClass: 'fa-brands fa-facebook',
     },
     {
       label: 'LinkedIn',
-      iconClass: 'fa-brands fa-linkedin-in'
-    }
+      iconClass: 'fa-brands fa-linkedin-in',
+    },
   ];
 }

src/app/core/services/auth/auth.interfaces.ts

@@ -18,6 +18,14 @@ export interface RegisterPayload {
   password_confirmation: string;
 }
 
+export interface UpdateProfilePayload {
+  nombre_apellido: string;
+  email: string;
+  dni?: string;
+  telefono?: string;
+  password?: string;
+}
+
 export interface LoginResponse {
   message: string;
   token: string;

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

@@ -9,7 +9,8 @@ import {
   LoginPayload,
   LoginResponse,
   RegisterPayload,
-  RegisterResponse
+  RegisterResponse,
+  UpdateProfilePayload
 } from './auth.interfaces';
 import { CookieService } from '../cookie/cookie.service';
 
@@ -43,6 +44,12 @@ export class AuthService {
     return this.http.post<RegisterResponse>(`${environment.url}register`, payload);
   }
 
+  updateProfile(payload: UpdateProfilePayload): Observable<AuthUser> {
+    return this.http.put<AuthUser>(`${environment.url}me`, payload).pipe(
+      tap((user) => this.userState.set(user))
+    );
+  }
+
   logout(): Observable<void> {
     if (!this.tokenState()) {
       this.clearSession();

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

@@ -7,8 +7,8 @@ export interface CartItem {
   id: number;
   cantidad: number;
   precio_unitario: string;
-  product_id: number;
-  product_variant_id: number;
+  catalog_item_id: number;
+  variant_id: number | null;
   product: CartItemProduct | null;
 }
 

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

@@ -21,21 +21,21 @@ describe('CartService', () => {
         id: 1,
         cantidad: 2,
         precio_unitario: '10.00',
-        product_id: 5,
-        product_variant_id: 10,
+        catalog_item_id: 5,
+        variant_id: 10,
         product: {
           nombre: 'Test Product (Size: M)',
-          imagen: null
-        }
-      }
+          imagen: null,
+        },
+      },
     ],
-    subtotal: '20.00'
+    subtotal: '20.00',
   };
 
   beforeEach(() => {
     tenantServiceMock = {
       getTenantApiUrl: vi.fn().mockReturnValue('http://api.test/tenants/acme'),
-      tenant: vi.fn().mockReturnValue({ codigo: 'acme' })
+      tenant: vi.fn().mockReturnValue({ codigo: 'acme' }),
     };
 
     TestBed.configureTestingModule({
@@ -43,8 +43,8 @@ describe('CartService', () => {
         CartService,
         provideHttpClient(),
         provideHttpClientTesting(),
-        { provide: TenantService, useValue: tenantServiceMock }
-      ]
+        { provide: TenantService, useValue: tenantServiceMock },
+      ],
     });
 
     service = TestBed.inject(CartService);
@@ -83,19 +83,23 @@ describe('CartService', () => {
       tenant_codigo: 'acme',
       status: 'active',
       items: [],
-      subtotal: '0.00'
+      subtotal: '0.00',
     });
   });
 
   it('should add item and update signal', () => {
-    service.addItem(10, 2).subscribe((res) => {
+    service.addItem(5, 10, 2).subscribe((res) => {
       expect(res.data).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.body).toEqual({
+      catalog_item_id: 5,
+      variant_id: 10,
+      cantidad: 2,
+    });
     expect(req.request.withCredentials).toBe(true);
     req.flush({ data: mockCart });
   });
@@ -122,7 +126,7 @@ describe('CartService', () => {
       tenant_codigo: 'acme',
       status: 'active',
       items: [],
-      subtotal: '0.00'
+      subtotal: '0.00',
     };
 
     service.removeItem(10).subscribe((res) => {

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

@@ -7,7 +7,7 @@ import { TenantService } from '../tenant.service';
 import { Cart } from './cart.interface';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class CartService {
   private readonly http = inject(HttpClient);
@@ -29,29 +29,31 @@ export class CartService {
       tenant_codigo: this.tenantService.tenant()?.codigo ?? '',
       status: 'active',
       items: [],
-      subtotal: '0.00'
+      subtotal: '0.00',
     });
   }
 
   loadCart(): Observable<Cart> {
     return this.http
       .get<ApiResponse<Cart>>(`${this.tenantApiUrl}/cart`, {
-        withCredentials: true
+        withCredentials: true,
       })
       .pipe(
         map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
+        tap((cart) => this.cartState.set(cart)),
       );
   }
 
-  addItem(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
+  addItem(
+    catalogItemId: number,
+    variantId: number | null,
+    cantidad: number,
+  ): Observable<ApiResponse<Cart>> {
     this.isUpdatingState.set(true);
     return this.http
-      .post<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items`,
-        { product_variant_id: productVariantId, cantidad },
-        { withCredentials: true }
-      )
+      .post<
+        ApiResponse<Cart>
+      >(`${this.tenantApiUrl}/cart/items`, { catalog_item_id: catalogItemId, variant_id: variantId, cantidad }, { withCredentials: true })
       .pipe(
         tap((response) => {
           this.cartState.set(response.data);
@@ -60,18 +62,16 @@ export class CartService {
         catchError((error) => {
           this.isUpdatingState.set(false);
           throw error;
-        })
+        }),
       );
   }
 
-  updateItemQuantity(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
+  updateItemQuantity(cartItemId: number, cantidad: number): Observable<ApiResponse<Cart>> {
     this.isUpdatingState.set(true);
     return this.http
-      .patch<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
-        { cantidad },
-        { withCredentials: true }
-      )
+      .patch<
+        ApiResponse<Cart>
+      >(`${this.tenantApiUrl}/cart/items/${cartItemId}`, { cantidad }, { withCredentials: true })
       .pipe(
         tap((response) => {
           this.cartState.set(response.data);
@@ -80,17 +80,16 @@ export class CartService {
         catchError((error) => {
           this.isUpdatingState.set(false);
           throw error;
-        })
+        }),
       );
   }
 
-  removeItem(productVariantId: number): Observable<ApiResponse<Cart>> {
+  removeItem(cartItemId: number): Observable<ApiResponse<Cart>> {
     this.isUpdatingState.set(true);
     return this.http
-      .delete<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
-        { withCredentials: true }
-      )
+      .delete<
+        ApiResponse<Cart>
+      >(`${this.tenantApiUrl}/cart/items/${cartItemId}`, { withCredentials: true })
       .pipe(
         tap((response) => {
           this.cartState.set(response.data);
@@ -99,7 +98,7 @@ export class CartService {
         catchError((error) => {
           this.isUpdatingState.set(false);
           throw error;
-        })
+        }),
       );
   }
 }

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

@@ -1,3 +1,5 @@
+import { ApiPaginatedResponse } from '../api-paginated-response.interface';
+
 export interface Product {
   id: number;
   category_id: number;
@@ -29,22 +31,61 @@ export interface ProductAttribute {
   options: ProductAttributeOption[];
 }
 
-export interface ProductVariant {
+export type InventoryPolicy = 'tracked' | 'unlimited';
+
+export interface CatalogItemVariant {
   id: number;
-  cantidad_maxima: number;
-  definitions: Record<string, string>;
+  stock_tecnico: number | null;
+  values: Record<string, string>;
+}
+
+export interface SelectedCatalogItemVariant extends CatalogItemVariant {
   images: string[];
 }
 
-export interface ProductVariantMap {
-  variant_id: number;
-  cantidad_maxima: number;
-  attributes: Record<string, string>;
-}
-
-export interface ProductDetail extends Product {
+export interface CatalogItemDetail {
+  id: number;
+  category_id: number | null;
+  brand_id: number | null;
+  slug: string;
+  nombre: string;
+  descripcion: string | null;
+  precio: string;
+  category: string | null;
+  brand: string | null;
+  inventory_policy: InventoryPolicy;
+  has_tickets: boolean;
+  minimum_use_date: string | null;
+  maximum_use_date: string | null;
   attributes: ProductAttribute[];
-  variants_map: ProductVariantMap[];
-  variant: ProductVariant | null;
+  variants: CatalogItemVariant[];
+  selected_variant?: SelectedCatalogItemVariant;
+  stock_tecnico?: number | null;
+  images?: string[];
 }
 
+export type CatalogProductLayout = 'row' | 'column_with_image' | 'column_with_cart';
+
+export interface CatalogFeaturedItemVariant {
+  id: number;
+  stock_tecnico: number | null;
+  values: Record<string, string>;
+}
+
+export interface CatalogFeaturedItem {
+  id: number;
+  nombre: string;
+  descripcion?: string | null;
+  precio: number | string;
+  image?: string | null;
+  stock_tecnico?: number | null;
+  variants?: CatalogFeaturedItemVariant[];
+}
+
+export interface CatalogFeaturedGroup {
+  id: number;
+  title: string;
+  layout: CatalogProductLayout;
+  group_order: number;
+  items: ApiPaginatedResponse<CatalogFeaturedItem[]>;
+}

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

@@ -6,16 +6,17 @@ import { ApiPaginationQueryParams } from '../api-pagination-query-params.interfa
 import { ApiPaginatedResponse } from '../api-paginated-response.interface';
 import { ApiResponse } from '../api-response.interface';
 import { TenantService } from '../tenant.service';
-import { Product, ProductDetail } from './catalog.interface';
+import {
+  CatalogFeaturedGroup,
+  CatalogFeaturedItem,
+  CatalogItemDetail,
+  Product,
+} from './catalog.interface';
 
-type HttpParamValue =
-  | string
-  | number
-  | boolean
-  | readonly (string | number | boolean)[];
+type HttpParamValue = string | number | boolean | readonly (string | number | boolean)[];
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class CatalogService {
   private readonly http = inject(HttpClient);
@@ -25,24 +26,34 @@ export class CatalogService {
     return this.tenantService.getTenantApiUrl();
   }
 
+  getProductos(params?: ApiPaginationQueryParams): Observable<ApiPaginatedResponse<Product[]>> {
+    return this.http.get<ApiPaginatedResponse<Product[]>>(`${this.tenantApiUrl}/productos`, {
+      params: this.buildHttpParams(params),
+    });
+  }
 
-  getProductos(
-    params?: ApiPaginationQueryParams
-  ): Observable<ApiPaginatedResponse<Product[]>> {
-    return this.http.get<ApiPaginatedResponse<Product[]>>(
-      `${this.tenantApiUrl}/productos`,
-      { params: this.buildHttpParams(params) }
+  getCatalog(): Observable<CatalogFeaturedGroup[]> {
+    return this.http.get<CatalogFeaturedGroup[]>(`${this.tenantApiUrl}/catalog`);
+  }
+
+  getFeaturedGroupItems(
+    featuredGroupId: number,
+    params?: ApiPaginationQueryParams,
+  ): Observable<ApiPaginatedResponse<CatalogFeaturedItem[]>> {
+    return this.http.get<ApiPaginatedResponse<CatalogFeaturedItem[]>>(
+      `${this.tenantApiUrl}/catalog/featured-groups/${featuredGroupId}/items`,
+      { params: this.buildHttpParams(params) },
     );
   }
 
-  getProducto(id: number, variantId?: number): Observable<ProductDetail> {
+  getCatalogItem(id: number, variantId?: number): Observable<CatalogItemDetail> {
     let params = new HttpParams();
     if (variantId) {
       params = params.set('variant_id', variantId);
     }
-    
+
     return this.http
-      .get<ApiResponse<ProductDetail>>(`${this.tenantApiUrl}/productos/${id}`, { params })
+      .get<ApiResponse<CatalogItemDetail>>(`${this.tenantApiUrl}/catalog-items/${id}`, { params })
       .pipe(map((response) => response.data));
   }
 
@@ -59,7 +70,7 @@ export class CatalogService {
 
         return acc;
       },
-      {}
+      {},
     );
 
     return new HttpParams({ fromObject });

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

@@ -16,6 +16,51 @@ export interface PurchaseStatusResponse {
   status: string | null;
 }
 
+export interface PurchaseSummaryResponse extends PurchaseStatusResponse {
+  id: number;
+  created_at: string | null;
+  total: string;
+}
+
+export interface PurchaseDetailAttributeResponse {
+  name: string;
+  value: string | null;
+}
+
+export interface PurchaseDetailItemResponse {
+  id: number;
+  quantity: number;
+  unit_price: string;
+  line_total: string;
+  product: {
+    id: number;
+    nombre: string;
+    slug: string;
+    imagen: string | null;
+  } | null;
+  variant: {
+    id: number;
+    attributes: PurchaseDetailAttributeResponse[];
+  } | null;
+}
+
+export interface PurchaseDetailResponse extends PurchaseStatusResponse {
+  id: number;
+  cart_id: number | null;
+  tenant_codigo: string;
+  user_id: number;
+  created_at: string | null;
+  payment_method: string | null;
+  dni: string | null;
+  telefono: string | null;
+  nombre_apellido: string | null;
+  email: string | null;
+  items_source: 'purchase' | 'cart' | null;
+  items: PurchaseDetailItemResponse[];
+  subtotal: string;
+  total: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -36,9 +81,13 @@ export class CheckoutService {
     return purchase;
   }
 
-  async generatePaymentIntent(tenantCode: string, purchaseId: number, method: 'qr' | 'transfer' | 'telepagos'): Promise<any> {
+  async generatePaymentIntent(tenantCode: string, purchaseId: number, method: 'qr' | 'transfer' | 'telepagos', payerDni?: string): Promise<any> {
+    const payload: any = { method };
+    if (payerDni) {
+      payload.transfer_payer_dni = payerDni;
+    }
     const response = await firstValueFrom(
-      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, { method })
+      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, payload)
     );
     if (!response) {
       throw new Error('Error al generar la intención de pago.');
@@ -62,20 +111,32 @@ export class CheckoutService {
     };
   }
 
-  async getPurchase(tenantCode: string, purchaseId: string | number): Promise<PurchaseStatusResponse> {
+  async getPurchases(tenantCode: string, status?: string): Promise<{ data: PurchaseSummaryResponse[] }> {
+    let url = `${environment.url}tenants/${tenantCode}/compras`;
+    if (status) {
+      url += `?status=${status}`;
+    }
     const response = await firstValueFrom(
-      this.http.get<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
+      this.http.get<{ data: PurchaseSummaryResponse[] }>(url)
+    );
+    if (!response) {
+      throw new Error('Error al obtener las compras.');
+    }
+    return response;
+  }
+
+  async getPurchase(tenantCode: string, purchaseId: string | number): Promise<PurchaseDetailResponse> {
+    const response = await firstValueFrom(
+      this.http.get<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
     );
 
-    const purchase = this.extractResponseData<PurchaseStatusResponse>(response);
+    const purchase = this.extractResponseData<PurchaseDetailResponse>(response);
 
     if (!purchase) {
       throw new Error('Error al obtener la compra.');
     }
 
-    return {
-      status: purchase.status ?? null
-    };
+    return purchase;
   }
 
   private extractResponseData<T>(response: T | { data?: T } | null | undefined): T | null {

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

@@ -9,6 +9,26 @@ export interface BankAccount {
   cvu: string;
 }
 
+export interface HeroConfig {
+  background_image?: string | null;
+  title_html?: string | null;
+  description_html?: string | null;
+  button_text?: string | null;
+  button_href?: string | null;
+}
+
+export interface EventConfig {
+  title?: string | null;
+  location?: string | null;
+  dates?: string[] | null;
+}
+
+export interface Menu {
+  id: number;
+  code: string;
+  route: string;
+}
+
 export interface Tenant {
   id: number;
   codigo: string;
@@ -24,6 +44,9 @@ export interface Tenant {
   footer_logo: string;
   selected_bank_account_id?: number | null;
   selected_bank_account?: BankAccount | null;
+  hero_config?: HeroConfig | null;
+  event_config?: EventConfig | null;
+  menues?: Menu[];
 }
 
 export type TenantBootstrapResponse = ApiResponse<Tenant>;

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

@@ -607,7 +607,7 @@
   <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>
+      <h2 class="mb-4">Tarjetas de Producto (Column With Image)</h2>
 
       <p class="text-muted mb-4">
         Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se
@@ -617,7 +617,7 @@
       <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
+            <app-product-column-with-image
               [imageUrl]="product.imageUrl"
               [title]="product.title"
               [originalPrice]="product.originalPrice"
@@ -631,6 +631,53 @@
     </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 (Row Layout)</h2>
+
+      <p class="text-muted mb-4">
+        Diseño horizontal que ocupa el 100% del ancho disponible.
+      </p>
+
+      <div class="row">
+        <div class="col-12 mb-4 d-flex align-items-stretch">
+          <app-product-row-card
+            [title]="testRowProduct.title"
+            [description]="testRowProduct.description"
+            [price]="testRowProduct.price"
+            [variants]="testRowProduct.variants"
+            (buy)="onProductBuy(testRowProduct.title)"
+            (addToCart)="triggerToast('success')"
+          />
+        </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 (Vertical With Cart Layout)</h2>
+
+      <p class="text-muted mb-4">
+        Diseño vertical con selector de cantidad y acciones de compra y carrito.
+      </p>
+
+      <div class="row justify-content-center justify-content-md-start">
+        <div class="col-12 col-sm-9 col-md-6 col-lg-5 col-xl-4 mb-4 d-flex align-items-stretch">
+          <app-product-vertical-with-cart-card
+            [title]="testVerticalWithCartProduct.title"
+            [description]="testVerticalWithCartProduct.description"
+            [price]="testVerticalWithCartProduct.price"
+            (buy)="onProductBuy(testVerticalWithCartProduct.title)"
+            (addToCart)="triggerToast('success')"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+
   <app-store-section
     title="PRODUCTOS"
     class="component-demo store-section-demo mt-5"
@@ -640,7 +687,7 @@
         <div
           class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch store-section-demo__item"
         >
-          <app-product-card
+          <app-product-column-with-image
             [imageUrl]="product.imageUrl"
             [title]="product.title"
             [originalPrice]="product.originalPrice"
@@ -653,4 +700,3 @@
     </div>
   </app-store-section>
 </main>
-

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

@@ -130,7 +130,7 @@ h1 {
 }
 
 .store-section-demo__item {
-  app-product-card {
+  app-product-column-with-image {
     width: 100%;
   }
 }

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

@@ -8,7 +8,11 @@ import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-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 { ProductColumnWithImageComponent } from '../../../../shared/components/product-column-with-image/product-column-with-image.component';
+import { ProductRowCardComponent } from '../../../../shared/components/product-row-card/product-row-card.component';
+import {
+  ProductVerticalWithCartCardComponent
+} from '../../../../shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import { ModalService } from '../../../../core/services/modal.service';
 import { TenantService } from '../../../../core/services/tenant.service';
@@ -23,7 +27,9 @@ import { StepComponent } from '../../../../shared/components/stepper/step.compon
     CartComponent,
     InputComponent,
     PaginatorComponent,
-    ProductCardComponent,
+    ProductColumnWithImageComponent,
+    ProductRowCardComponent,
+    ProductVerticalWithCartCardComponent,
     StoreSectionComponent,
     IconButtonComponent,
     CartIconComponent,
@@ -86,6 +92,22 @@ export class ReutilizablesTestPageComponent {
     }
   ];
 
+  protected readonly testRowProduct = {
+    title: 'ENTRADA GENERAL',
+    description: 'Acceso total al predio. No incluye acceso a estacionamiento. Niños menores de 5 años ingresan gratis.',
+    price: 10000,
+    variants: [
+      { label: '10 de Octubre', value: '10-oct' },
+      { label: '11 de Octubre', value: '11-oct' }
+    ]
+  };
+
+  protected readonly testVerticalWithCartProduct = {
+    title: 'PANCHO',
+    description: 'Pancho con aderezo a elección.',
+    price: 11500
+  };
+
   protected readonly cartMockItems: CartItemMock[] = [
     {
       imageUrl: null,
@@ -258,4 +280,3 @@ export class ReutilizablesTestPageComponent {
   }
 }
 
-

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

@@ -0,0 +1,71 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ProductAttribute } from '../../../../core/services/catalog/catalog.interface';
+import { ProductAttributeSelectorComponent } from './product-attribute-selector.component';
+
+describe('ProductAttributeSelectorComponent', () => {
+  const sizeAttribute: ProductAttribute = {
+    id: 1,
+    codigo: 'size',
+    nombre: 'Size',
+    is_required: true,
+    metadata_schema: null,
+    type: 'select',
+    options: [
+      { id: 10, value: 'S', label: 'S', sort_order: 0, metadata: null },
+      { id: 20, value: 'M', label: 'M', sort_order: 1, metadata: null },
+    ],
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductAttributeSelectorComponent],
+    }).compileComponents();
+  });
+
+  it('keeps an unlimited option available when maximum quantity is null', () => {
+    const fixture = TestBed.createComponent(ProductAttributeSelectorComponent);
+    fixture.componentRef.setInput('attributes', [sizeAttribute]);
+    fixture.componentRef.setInput('inventoryPolicy', 'unlimited');
+    fixture.componentRef.setInput('variants', [
+      {
+        id: 1,
+        stock_tecnico: null,
+        values: { size: 'S' },
+      },
+    ]);
+    fixture.detectChanges();
+
+    const buttons = Array.from(
+      fixture.nativeElement.querySelectorAll('.attribute-selector__text-option'),
+    ) as HTMLButtonElement[];
+    expect(buttons[0].disabled).toBe(false);
+    expect(buttons[1].disabled).toBe(true);
+  });
+
+  it('disables tracked options without available stock', () => {
+    const fixture = TestBed.createComponent(ProductAttributeSelectorComponent);
+    fixture.componentRef.setInput('attributes', [sizeAttribute]);
+    fixture.componentRef.setInput('inventoryPolicy', 'tracked');
+    fixture.componentRef.setInput('variants', [
+      {
+        id: 1,
+        stock_tecnico: 0,
+        values: { size: 'S' },
+      },
+      {
+        id: 2,
+        stock_tecnico: 2,
+        values: { size: 'M' },
+      },
+    ]);
+    fixture.detectChanges();
+
+    const buttons = Array.from(
+      fixture.nativeElement.querySelectorAll('.attribute-selector__text-option'),
+    ) as HTMLButtonElement[];
+    expect(buttons[0].disabled).toBe(true);
+    expect(buttons[1].disabled).toBe(false);
+  });
+});

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

@@ -6,14 +6,14 @@ import {
   input,
   output,
   signal,
-  untracked
+  untracked,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
+  CatalogItemVariant,
+  InventoryPolicy,
   ProductAttribute,
   ProductAttributeOption,
-  ProductVariant,
-  ProductVariantMap
 } from '../../../../core/services/catalog/catalog.interface';
 
 @Component({
@@ -22,20 +22,21 @@ import {
   imports: [CommonModule],
   templateUrl: './product-attribute-selector.component.html',
   styleUrl: './product-attribute-selector.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductAttributeSelectorComponent {
   public attributes = input<ProductAttribute[]>([]);
-  public variantsMap = input<ProductVariantMap[]>([]);
-  public defaultVariant = input<ProductVariant | null>(null);
+  public variants = input<CatalogItemVariant[]>([]);
+  public selectedVariant = input<CatalogItemVariant | null>(null);
+  public inventoryPolicy = input.required<InventoryPolicy>();
 
-  public variantChange = output<ProductVariantMap | null>();
+  public variantChange = output<CatalogItemVariant | null>();
 
   protected readonly selectedAttributeOptions = signal<Record<number, number>>({});
 
   protected readonly availableOptions = computed(() => {
     const selections = this.selectedAttributeOptions();
-    const variants = this.variantsMap();
+    const variants = this.variants();
     const attributes = this.attributes();
 
     const availability: Record<number, Record<number, boolean>> = {};
@@ -44,28 +45,30 @@ export class ProductAttributeSelectorComponent {
       availability[attribute.id] = {};
       for (const option of attribute.options) {
         const optionNormalized = this.normalizeText(option.value || option.label);
-        
-        const isAvailable = variants.some(variant => {
-          if (variant.cantidad_maxima <= 0) return false;
 
-          const variantAttrValue = this.getDefaultVariantAttributeValue(attribute, variant.attributes);
+        const isAvailable = variants.some((variant) => {
+          if (!this.isVariantAvailable(variant)) return false;
+
+          const variantAttrValue = this.getDefaultVariantAttributeValue(attribute, variant.values);
           if (!variantAttrValue || this.normalizeText(variantAttrValue) !== optionNormalized) {
-             return false;
+            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;
-                   }
+            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.values);
+                if (!vAttrValue || this.normalizeText(vAttrValue) !== selectedNormalized) {
+                  return false;
                 }
-             }
+              }
+            }
           }
           return true;
         });
@@ -78,14 +81,14 @@ export class ProductAttributeSelectorComponent {
   });
 
   public reset(): void {
-    this.initializeSelections(this.attributes(), this.defaultVariant());
+    this.initializeSelections(this.attributes(), this.selectedVariant());
   }
 
   constructor() {
     effect(() => {
       const attributes = this.attributes();
-      const defaultVariant = this.defaultVariant();
-      
+      const defaultVariant = this.selectedVariant();
+
       untracked(() => {
         this.initializeSelections(attributes, defaultVariant);
       });
@@ -93,26 +96,29 @@ export class ProductAttributeSelectorComponent {
 
     effect(() => {
       const selections = this.selectedAttributeOptions();
-      const variantsMap = this.variantsMap();
+      const variants = this.variants();
       const attributes = this.attributes();
-      
+
       untracked(() => {
-         this.emitMatchingVariant(selections, variantsMap, attributes);
+        this.emitMatchingVariant(selections, variants, attributes);
       });
     });
   }
 
-  protected hasSelectedOption(attribute: ProductAttribute, option: ProductAttributeOption): boolean {
+  protected hasSelectedOption(
+    attribute: ProductAttribute,
+    option: ProductAttributeOption,
+  ): boolean {
     return this.selectedAttributeOptions()[attribute.id] === option.id;
   }
 
   protected selectAttributeOption(
     attribute: ProductAttribute,
-    option: ProductAttributeOption
+    option: ProductAttributeOption,
   ): void {
     this.selectedAttributeOptions.update((current) => ({
       ...current,
-      [attribute.id]: option.id
+      [attribute.id]: option.id,
     }));
   }
 
@@ -124,7 +130,10 @@ export class ProductAttributeSelectorComponent {
     return this.findFirstHexValue(option.metadata) ?? '#D9D9D9';
   }
 
-  private initializeSelections(attributes: ProductAttribute[], defaultVariant: ProductVariant | null): void {
+  private initializeSelections(
+    attributes: ProductAttribute[],
+    defaultVariant: CatalogItemVariant | null,
+  ): void {
     const selections: Record<number, number> = {};
 
     for (const attribute of attributes) {
@@ -139,20 +148,20 @@ export class ProductAttributeSelectorComponent {
 
   private findDefaultOptionId(
     attribute: ProductAttribute,
-    variant: ProductVariant | null
+    variant: CatalogItemVariant | null,
   ): number | null {
     if (!variant) {
       return null;
     }
 
-    const defaultValue = this.getDefaultVariantAttributeValue(attribute, variant.definitions);
+    const defaultValue = this.getDefaultVariantAttributeValue(attribute, variant.values);
     if (!defaultValue) {
       return null;
     }
 
     const normalizedValue = this.normalizeText(defaultValue);
     const matchByValue = attribute.options.find(
-      (option) => this.normalizeText(option.value) === normalizedValue
+      (option) => this.normalizeText(option.value) === normalizedValue,
     );
 
     if (matchByValue) {
@@ -160,7 +169,7 @@ export class ProductAttributeSelectorComponent {
     }
 
     const matchByLabel = attribute.options.find(
-      (option) => this.normalizeText(option.label) === normalizedValue
+      (option) => this.normalizeText(option.label) === normalizedValue,
     );
 
     return matchByLabel?.id ?? null;
@@ -168,7 +177,7 @@ export class ProductAttributeSelectorComponent {
 
   private getDefaultVariantAttributeValue(
     attribute: ProductAttribute,
-    variantAttributes: Record<string, string>
+    variantAttributes: Record<string, string>,
   ): string | null {
     const normalizedCodigo = this.normalizeText(attribute.codigo);
     const normalizedNombre = this.normalizeText(attribute.nombre);
@@ -192,6 +201,10 @@ export class ProductAttributeSelectorComponent {
       .toLowerCase();
   }
 
+  private isVariantAvailable(variant: CatalogItemVariant): boolean {
+    return this.inventoryPolicy() === 'unlimited' || (variant.stock_tecnico ?? 0) > 0;
+  }
+
   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/);
@@ -222,10 +235,10 @@ export class ProductAttributeSelectorComponent {
 
   private emitMatchingVariant(
     selections: Record<number, number>,
-    variantsMap: ProductVariantMap[],
-    attributes: ProductAttribute[]
+    variants: CatalogItemVariant[],
+    attributes: ProductAttribute[],
   ): void {
-    if (attributes.length === 0 || variantsMap.length === 0) {
+    if (attributes.length === 0 || variants.length === 0) {
       this.variantChange.emit(null);
       return;
     }
@@ -235,12 +248,12 @@ export class ProductAttributeSelectorComponent {
     for (const attr of attributes) {
       const selectedOptionId = selections[attr.id];
       if (selectedOptionId === undefined) {
-         allSelected = false;
-         break;
+        allSelected = false;
+        break;
       }
-      const option = attr.options.find(o => o.id === selectedOptionId);
+      const option = attr.options.find((o) => o.id === selectedOptionId);
       if (option) {
-         selectedValuesById[attr.id] = this.normalizeText(option.value || option.label);
+        selectedValuesById[attr.id] = this.normalizeText(option.value || option.label);
       }
     }
 
@@ -249,12 +262,12 @@ export class ProductAttributeSelectorComponent {
       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;
+    const matchingVariant = variants.find((variant) => {
+      return attributes.every((attr) => {
+        const selectedValue = selectedValuesById[attr.id];
+        const variantValue = this.getDefaultVariantAttributeValue(attr, variant.values);
+        if (!variantValue) return false;
+        return this.normalizeText(variantValue) === selectedValue;
       });
     });
 

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

@@ -1,51 +1,70 @@
 <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">
+  <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" />
+      <img
+        [ngSrc]="images()[activeIndex()]"
+        alt="Product active image"
+        fill
+        priority
+        sizes="(min-width: 992px) 42vw, 100vw"
+        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>
+      <!-- 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>
+      <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--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>
+      <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 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.ts

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'app-product-carousel',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
   templateUrl: './product-carousel.component.html',
   styleUrl: './product-carousel.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductCarouselComponent {
   readonly images = input<string[]>([]);

src/app/features/store/pages/account-page/account-layout/account-layout.html

@@ -0,0 +1,6 @@
+    <div class="account-layout">
+      <app-account-sidebar class="account-sidebar"></app-account-sidebar>
+      <div class="account-content">
+        <router-outlet></router-outlet>
+      </div>
+    </div>

src/app/features/store/pages/account-page/account-layout/account-layout.scss

@@ -0,0 +1,17 @@
+.account-layout {
+  display: flex;
+  margin: 0 auto;
+  gap: 100px;
+  min-height: calc(100vh - 100px);
+}
+.account-sidebar {
+  width: 250px;
+  flex-shrink: 0;
+}
+.account-content {
+  flex: 1;
+}
+
+label {
+  font-size: 13px !important;
+}

src/app/features/store/pages/account-page/account-layout/account-layout.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { AccountSidebar } from '../components/account-sidebar/account-sidebar';
+
+@Component({
+  selector: 'app-account-layout',
+  standalone: true,
+  imports: [RouterOutlet, AccountSidebar],
+  templateUrl: './account-layout.html',
+  styleUrl: './account-layout.scss',
+})
+export class AccountLayout {}

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html

@@ -0,0 +1,8 @@
+    <div class="sidebar-container">
+      <h2 class="sidebar-title">MI CUENTA</h2>
+      <div class="divider"></div>
+      <nav class="sidebar-nav">
+        <a routerLink="/mi-cuenta/datos-personales" routerLinkActive="active" class="nav-link">Datos Personales</a>
+        <a routerLink="/mi-cuenta/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
+      </nav>
+    </div>

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss

@@ -0,0 +1,34 @@
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+}
+.sidebar-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #1a1a1a;
+  margin-bottom: 12px;
+}
+.divider {
+  height: 1px;
+  background-color: #e0e0e0;
+  margin-bottom: 20px;
+}
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.nav-link {
+  text-decoration: none;
+  color: #888;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+.nav-link:hover {
+  color: #5a5a5a;
+}
+.nav-link.active {
+  color: var(--color-primary); /* Blue color matching the image */
+  font-weight: 600;
+}

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-account-sidebar',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './account-sidebar.html',
+  styleUrl: './account-sidebar.scss',
+})
+export class AccountSidebar {}

src/app/features/store/pages/account-page/components/profile-form/profile-form.html

@@ -0,0 +1,66 @@
+<form [formGroup]="profileForm" class="profile-form" (ngSubmit)="onSubmit()">
+  <div class="form-group">
+    <label>Nombre y Apellido:</label>
+    <app-input
+      type="text"
+      [value]="profileForm.controls['fullName'].value"
+      (valueChange)="profileForm.controls['fullName'].setValue($event)"
+    ></app-input>
+    @if (getControlError('fullName'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>Email:</label>
+    <app-input
+      type="email"
+      [value]="profileForm.controls['email'].value"
+      (valueChange)="profileForm.controls['email'].setValue($event)"
+    ></app-input>
+    @if (getControlError('email'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>DNI:</label>
+    <app-input
+      type="text"
+      [value]="profileForm.controls['dni'].value"
+      (valueChange)="profileForm.controls['dni'].setValue($event)"
+    ></app-input>
+    @if (getControlError('dni'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>Teléfono:</label>
+    <app-input
+      type="text"
+      [value]="profileForm.controls['phone'].value"
+      (valueChange)="profileForm.controls['phone'].setValue($event)"
+    ></app-input>
+    @if (getControlError('phone'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>Contraseña (dejar en blanco para no modificar):</label>
+    <app-input
+      type="password"
+      [value]="profileForm.controls['password'].value"
+      (valueChange)="profileForm.controls['password'].setValue($event)"
+    ></app-input>
+    @if (getControlError('password'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-actions mt-3">
+    <app-button type="button" variant="cancel" hostClass="action-btn" buttonClass="w-100" (click)="onCancel()">Cancelar</app-button>
+    <app-button type="submit" variant="primary" hostClass="action-btn" buttonClass="w-100" [disabled]="isSubmitting()">Guardar</app-button>
+  </div>
+</form>

src/app/features/store/pages/account-page/components/profile-form/profile-form.scss

@@ -0,0 +1,15 @@
+.profile-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+.action-btn {
+  flex: 1;
+  display: block;
+}

src/app/features/store/pages/account-page/components/profile-form/profile-form.ts

@@ -0,0 +1,105 @@
+import { Component, inject, effect, signal, OnInit } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { InputComponent } from '../../../../../../shared/components/input/input.component';
+import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
+import { AuthService } from '../../../../../../core/services/auth/auth.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+
+@Component({
+  selector: 'app-profile-form',
+  standalone: true,
+  imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
+  templateUrl: './profile-form.html',
+  styleUrl: './profile-form.scss',
+})
+export class ProfileForm implements OnInit {
+  profileForm: FormGroup;
+  private authService = inject(AuthService);
+  private toastService = inject(ToastService);
+  isSubmitting = signal(false);
+
+  constructor(private fb: FormBuilder) {
+    this.profileForm = this.fb.group({
+      fullName: ['', [Validators.required, Validators.maxLength(255)]],
+      email: ['', [Validators.required, Validators.email, Validators.maxLength(255)]],
+      dni: ['', [Validators.pattern(/^[0-9]{7,8}$/)]],
+      phone: ['', [Validators.pattern(/^\+?[0-9\s\-]{10,20}$/)]],
+      password: ['', [Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/)]]
+    });
+
+    effect(() => {
+      const user = this.authService.user();
+      if (user) {
+        this.profileForm.patchValue({
+          fullName: user.nombre_apellido,
+          email: user.email,
+          dni: user.dni || '',
+          phone: user.telefono || ''
+        });
+      }
+    });
+  }
+
+  ngOnInit() {
+    // Refresh user data directly from the API to ensure consistency
+    this.authService.loadCurrentUser().subscribe();
+  }
+
+  getControlError(controlName: string): string | null {
+    const control = this.profileForm.get(controlName);
+    if (!control || !control.errors || (!control.touched && !this.isSubmitting())) return null;
+
+    if (control.errors['required']) return 'Este campo es obligatorio.';
+    if (control.errors['email']) return 'Ingresa un email válido.';
+    if (control.errors['maxlength']) return 'Excede el largo máximo.';
+    if (controlName === 'dni' && control.errors['pattern']) return 'DNI inválido (7-8 números).';
+    if (controlName === 'phone' && control.errors['pattern']) return 'Teléfono inválido.';
+    if (controlName === 'password' && control.errors['pattern']) return 'Debe contener mayúscula, minúscula, carácter especial y mínimo 8 caracteres.';
+    
+    return 'Valor inválido.';
+  }
+
+  onSubmit() {
+    if (this.profileForm.invalid) {
+      this.profileForm.markAllAsTouched();
+      return;
+    }
+    
+    this.isSubmitting.set(true);
+    const formValue = this.profileForm.value;
+    const payload: any = {
+      nombre_apellido: formValue.fullName,
+      email: formValue.email,
+    };
+    if (formValue.dni) payload.dni = formValue.dni;
+    if (formValue.phone) payload.telefono = formValue.phone;
+    if (formValue.password) payload.password = formValue.password;
+
+    this.authService.updateProfile(payload).subscribe({
+      next: () => {
+        this.isSubmitting.set(false);
+        this.toastService.success('Perfil actualizado correctamente.');
+      },
+      error: (error: any) => {
+        this.isSubmitting.set(false);
+        const errorMessage = error.error?.message || 'Error al actualizar el perfil.';
+        this.toastService.danger(errorMessage);
+      }
+    });
+  }
+
+  onCancel() {
+    const user = this.authService.user();
+    if (user) {
+      this.profileForm.reset({
+        fullName: user.nombre_apellido,
+        email: user.email,
+        dni: user.dni || '',
+        phone: user.telefono || '',
+        password: ''
+      });
+    } else {
+      this.profileForm.reset();
+    }
+  }
+}

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.html

@@ -0,0 +1,50 @@
+<article class="w-100 py-3 rounded-0 cart-item">
+  <div class="position-relative overflow-hidden cart-item-media">
+    @if (item.discountPercentage) {
+      <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ item.discountPercentage }}%</span>
+    }
+
+    @if (item.imageUrl) {
+      <img class="w-100 h-100 object-fit-cover d-block" [src]="item.imageUrl" [alt]="item.title" />
+    } @else {
+      <div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
+    }
+  </div>
+
+  <div class="d-flex flex-column justify-content-between w-100 h-100 py-1 cart-item-content">
+    <div class="d-grid cart-item-top-row align-items-start">
+      <h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ item.title }}</h3>
+
+      <div class="cart-item-prices">
+        @if (item.originalPrice) {
+          <span class="text-decoration-line-through cart-item-original-price">$ {{ item.originalPrice }}</span>
+        }
+        <span class="fw-bold cart-item-discounted-price">$ {{ item.price }}</span>
+      </div>
+    </div>
+
+    <div
+      class="d-grid cart-item-attributes"
+      [class.cart-item-attributes--quantity-only]="item.attributes.length === 0"
+    >
+      <div class="cart-item-attribute">
+        <span class="cart-item-attribute-label">Cantidad: </span>
+        <span class="fw-bold">{{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }}</span>
+      </div>
+
+      @for (attribute of item.attributes; track attribute.label + attribute.value) {
+        <div class="cart-item-attribute">
+          <span class="cart-item-attribute-label">{{ attribute.label }}: </span>
+          <span class="fw-bold">{{ attribute.value }}</span>
+        </div>
+      }
+    </div>
+
+    @if (item.transferPrice) {
+      <div class="cart-item-transfer-price">
+        <span class="cart-item-price-label">Precio por transferencia</span>
+        <span class="fw-bold">${{ item.transferPrice }}</span>
+      </div>
+    }
+  </div>
+</article>

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss

@@ -0,0 +1,118 @@
+:host {
+  display: block;
+  border-bottom: 1px solid #dddddd;
+}
+
+:host(:last-child) {
+  border-bottom: none;
+}
+
+.cart-item {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 0.75rem;
+  background-color: transparent;
+  position: relative;
+}
+
+.cart-item-media {
+  width: 120px;
+  aspect-ratio: 4 / 3;
+  border-radius: 5px 0 0 5px;
+  background-color: #ffffff;
+  border: 1px solid #eaeaea;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.cart-item-discount-badge {
+  width: 44px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-right-radius: 4px;
+  background-color: var(--bs-primary, #5b75ff);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.cart-item-placeholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
+}
+
+.cart-item-content {
+  gap: 0.5rem;
+}
+
+.cart-item-top-row {
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+}
+
+.cart-item-product {
+  color: #666666;
+  font-size: 10px;
+  line-height: 1.25;
+  font-weight: 325;
+}
+
+.cart-item-prices {
+  display: grid;
+  justify-items: end;
+  line-height: 1.1;
+}
+
+.cart-item-original-price {
+  color: #a0a0a0;
+  font-size: 9px;
+  font-weight: 325;
+}
+
+.cart-item-discounted-price {
+  color: var(--bs-primary, #5b75ff);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.cart-item-price-label {
+  color: #a0a0a0;
+  font-size: 9px;
+  font-weight: 325;
+}
+
+.cart-item-attributes {
+  gap: 0.125rem;
+
+  &--quantity-only {
+    flex: 1;
+    align-content: center;
+  }
+}
+
+.cart-item-attribute {
+  color: #666666;
+  font-size: 9px;
+  line-height: 1.2;
+}
+
+.cart-item-attribute-label {
+  font-weight: 325;
+}
+
+.cart-item-transfer-price {
+  color: #666666;
+  font-size: 9px;
+  line-height: 1.2;
+  display: grid;
+  justify-items: end;
+}

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+export type PurchaseItemViewModel = {
+  id: number;
+  title: string;
+  imageUrl: string | null;
+  quantity: number;
+  attributes: Array<{
+    label: string;
+    value: string | null;
+  }>;
+  price: string;
+  originalPrice?: string | null;
+  transferPrice?: string | null;
+  discountPercentage?: string | number | null;
+};
+
+@Component({
+  selector: 'app-purchase-item',
+  standalone: true,
+  imports: [],
+  templateUrl: './purchase-item.html',
+  styleUrl: './purchase-item.scss',
+})
+export class PurchaseItem {
+  @Input() item!: PurchaseItemViewModel;
+}

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html

@@ -0,0 +1,11 @@
+    <div class="purchase-item" [routerLink]="[purchase.id]" style="cursor: pointer;">
+      <div class="purchase-info">
+        <span class="purchase-id">Compra {{ purchase.id }}.</span>
+        <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
+      </div>
+      <div class="purchase-action">
+        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
+          <path d="M1 1L7 7L1 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+    </div>

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.scss

@@ -0,0 +1,37 @@
+.purchase-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding:  16px;
+  padding-left:0;
+  transition: box-shadow 0.2s, border-radius 0.2s;
+  cursor: pointer;
+}
+.purchase-item:hover {
+  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07);
+  border-radius: 8px;
+}
+.purchase-item:hover .arrow-icon {
+  color: #5b75ff; /* Blue on hover */
+}
+.purchase-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.purchase-id {
+  font-weight: bold;
+  color: #666666;
+  font-size: 13px;
+}
+.purchase-date {
+  font-weight: 325;
+  color: #666666;
+  font-size: 10px;
+}
+.arrow-icon {
+  width: 8px;
+  height: 14px;
+  color: #888;
+  transition: color 0.2s;
+}

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-purchase-list-item',
+  standalone: true,
+  imports: [RouterLink],
+  templateUrl: './purchase-list-item.html',
+  styleUrl: './purchase-list-item.scss',
+})
+export class PurchaseListItem {
+  @Input() purchase!: { id: number; date: string };
+}
+

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html

@@ -0,0 +1,29 @@
+    <div class="purchase-list-container">
+      <ng-container *ngIf="isLoading(); else contentTpl">
+        <!-- Skeleton -->
+        <div class="skeleton-item" *ngFor="let i of [1, 2, 3, 4]">
+          <div class="skeleton-info">
+            <div class="skeleton-id"></div>
+            <div class="skeleton-date"></div>
+          </div>
+          <div class="skeleton-action"></div>
+        </div>
+      </ng-container>
+
+      <ng-template #contentTpl>
+        <ng-container *ngIf="purchases().length > 0; else emptyTpl">
+          <ng-container *ngFor="let purchase of purchases(); let last = last">
+            <app-purchase-list-item 
+              [purchase]="purchase">
+            </app-purchase-list-item>
+            <div class="purchase-divider" *ngIf="!last"></div>
+          </ng-container>
+        </ng-container>
+      </ng-template>
+
+      <ng-template #emptyTpl>
+        <div class="empty-state">
+          Aún no hay compras realizadas
+        </div>
+      </ng-template>
+    </div>

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss

@@ -0,0 +1,73 @@
+.purchase-list-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.purchase-divider {
+  height: 1px;
+  background-color: #DDDDDD;
+  width: 100%;
+}
+
+.empty-state {
+  padding: 2rem 0;
+  text-align: center;
+  color: #666;
+  font-size: 1rem;
+}
+
+/* Skeleton */
+.skeleton-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  border-bottom: 1px solid #DDDDDD;
+}
+
+.skeleton-item:last-child {
+  border-bottom: none;
+}
+
+.skeleton-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.skeleton-id {
+  width: 100px;
+  height: 1rem;
+  background-color: #EEEEEE;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.skeleton-date {
+  width: 150px;
+  height: 0.8rem;
+  background-color: #EEEEEE;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.skeleton-action {
+  width: 24px;
+  height: 24px;
+  background-color: #EEEEEE;
+  border-radius: 50%;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    background-color: #EEEEEE;
+  }
+  50% {
+    background-color: #E0E0E0;
+  }
+  100% {
+    background-color: #EEEEEE;
+  }
+}

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PurchaseListItem } from '../purchase-list-item/purchase-list-item';
+import { CheckoutService, PurchaseSummaryResponse } from '../../../../../../core/services/checkout.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+
+type PurchaseListViewModel = {
+  id: number;
+  date: string;
+};
+
+@Component({
+  selector: 'app-purchase-list',
+  standalone: true,
+  imports: [CommonModule, PurchaseListItem],
+  templateUrl: './purchase-list.html',
+  styleUrl: './purchase-list.scss',
+})
+export class PurchaseList implements OnInit {
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly toastService = inject(ToastService);
+  private readonly tenantService = inject(TenantService);
+
+  purchases = signal<PurchaseListViewModel[]>([]);
+  isLoading = signal<boolean>(true);
+
+  async ngOnInit(): Promise<void> {
+    try {
+      const tenantCode = this.tenantService.tenant()?.codigo || '';
+      
+      const response = await this.checkoutService.getPurchases(tenantCode, 'paid');
+      const mappedPurchases = response.data.map((purchase: PurchaseSummaryResponse) => ({
+        id: purchase.id,
+        date: this.formatDate(purchase.created_at),
+      }));
+      this.purchases.set(mappedPurchases);
+    } catch (error) {
+      this.toastService.danger('Hubo un error al cargar las compras');
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  private formatDate(value: string | null): string {
+    if (!value) {
+      return '-';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+      return '-';
+    }
+
+    return new Intl.DateTimeFormat('es-AR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    }).format(date);
+  }
+}

src/app/features/store/pages/account-page/pages/profile-page/profile-page.html

@@ -0,0 +1,4 @@
+    <div class="page-container">
+      <h2 class="page-title">DATOS PERSONALES</h2>
+      <app-profile-form></app-profile-form>
+    </div>

src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss

@@ -0,0 +1,13 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #A0A0A0;
+  margin-bottom: 24px;
+}

src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ProfileForm } from '../../components/profile-form/profile-form';
+
+@Component({
+  selector: 'app-profile-page',
+  standalone: true,
+  imports: [ProfileForm],
+  templateUrl: './profile-page.html',
+  styleUrl: './profile-page.scss',
+})
+export class ProfilePage {}

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html

@@ -0,0 +1,33 @@
+<div class="page-container">
+  <div class="d-flex align-items-center mb-4">
+    <a routerLink="../" class="text-decoration-none " >
+      <i class="bi bi-arrow-left fs-5"></i>
+    </a>
+    <h2 class="page-title m-0">MIS COMPRAS</h2>
+  </div>
+
+  @if (isLoading()) {
+    <p class="purchase-loading">Cargando detalle de compra...</p>
+  } @else if (purchase(); as purchase) {
+    <div class="d-flex justify-content-between align-items-center mb-4 pb-3" style="border-bottom: 1px solid #dddddd;">
+      <div class="purchase-info">
+        <span class="purchase-id">Compra {{ purchase.id }}.</span>
+        <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
+      </div>
+      <div class="purchase-total ">
+        <span class="purchase-total-label">Total:</span>
+        <span class="purchase-total-value">${{ purchase.total }}</span>
+      </div>
+    </div>
+
+    <p style="font-size: 12px; color: #666666; margin:0;">Productos:</p>
+
+    <div class="d-flex flex-column">
+      @for (item of purchase.items; track item.id) {
+        <app-purchase-item [item]="item"></app-purchase-item>
+      } @empty {
+        <p class="purchase-empty">No hay productos para mostrar en esta compra.</p>
+      }
+    </div>
+  }
+</div>

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss

@@ -0,0 +1,51 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #A0A0A0;
+}
+
+.purchase-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.purchase-id {
+  font-weight: bold;
+  color: #666666;
+  font-size: 13px;
+}
+.purchase-date {
+  font-weight: 325;
+  color: #666666;
+  font-size: 10px;
+}
+
+.purchase-total {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.purchase-total-label {
+  font-size: 17px;
+  color: #666666;
+  font-weight: 325;
+}
+.purchase-total-value {
+  color: var(--bs-primary, #5b75ff);
+  font-weight: bold;
+  font-size: 17px;
+}
+
+.purchase-loading,
+.purchase-empty {
+  color: #666666;
+  font-size: 12px;
+  margin: 0;
+}

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts

@@ -0,0 +1,95 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+
+import { CheckoutService, PurchaseDetailResponse } from '../../../../../../core/services/checkout.service';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { PurchaseItem, PurchaseItemViewModel } from '../../components/purchase-item/purchase-item';
+
+type PurchaseDetailViewModel = {
+  id: number;
+  date: string;
+  total: string;
+  items: PurchaseItemViewModel[];
+};
+
+@Component({
+  selector: 'app-purchase-detail-page',
+  standalone: true,
+  imports: [CommonModule, RouterLink, PurchaseItem],
+  templateUrl: './purchase-detail-page.html',
+  styleUrl: './purchase-detail-page.scss',
+})
+export class PurchaseDetailPage implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly tenantService = inject(TenantService);
+  private readonly toastService = inject(ToastService);
+
+  readonly isLoading = signal(true);
+  readonly purchase = signal<PurchaseDetailViewModel | null>(null);
+
+  async ngOnInit(): Promise<void> {
+    const purchaseId = this.route.snapshot.paramMap.get('id');
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant) {
+      void this.router.navigate(['/mi-cuenta/compras']);
+      return;
+    }
+
+    try {
+      const response = await this.checkoutService.getPurchase(tenant.codigo, purchaseId);
+
+      this.purchase.set({
+        id: response.id,
+        date: this.formatDate(response.created_at),
+        total: response.total,
+        items: this.mapItems(response),
+      });
+    } catch (error) {
+      console.error('Failed to fetch purchase detail:', error);
+      this.toastService.danger('Hubo un error al cargar el detalle de la compra');
+      void this.router.navigate(['/mi-cuenta/compras']);
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  private formatDate(value: string | null): string {
+    if (!value) {
+      return '-';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+      return '-';
+    }
+
+    return new Intl.DateTimeFormat('es-AR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    }).format(date);
+  }
+
+  private mapItems(purchase: PurchaseDetailResponse): PurchaseItemViewModel[] {
+    return purchase.items.map((item) => ({
+      id: item.id,
+      title: item.product?.nombre ?? 'Producto sin nombre',
+      imageUrl: item.product?.imagen ?? null,
+      quantity: item.quantity,
+      attributes: (item.variant?.attributes ?? []).map((attribute) => ({
+        label: attribute.name,
+        value: attribute.value,
+      })),
+      price: item.line_total,
+      originalPrice: null,
+      transferPrice: null,
+      discountPercentage: null,
+    }));
+  }
+}

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html

@@ -0,0 +1,4 @@
+    <div class="page-container">
+      <h2 class="page-title">MIS COMPRAS</h2>
+      <app-purchase-list></app-purchase-list>
+    </div>

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss

@@ -0,0 +1,12 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #A0A0A0;
+}

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { PurchaseList } from '../../components/purchase-list/purchase-list';
+
+@Component({
+  selector: 'app-purchases-page',
+  standalone: true,
+  imports: [PurchaseList],
+  templateUrl: './purchases-page.html',
+  styleUrl: './purchases-page.scss',
+})
+export class PurchasesPage {}

src/app/features/store/pages/checkout-page/checkout-data-step.component.html

@@ -5,75 +5,71 @@
   (ngSubmit)="submit()"
 >
   <div class="checkout-form__fields">
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-nombre">
-        Nombre y Apellido <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-nombre">
+        Nombre y Apellido <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-nombre"
         type="text"
-        placeholder="Descripcion"
         [value]="form().controls.nombre.value"
         [invalid]="showControlError('nombre')"
         [disabled]="form().controls.nombre.disabled"
         (valueChange)="updateField('nombre', $event)"
       />
       @if (getControlError('nombre'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
 
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-email">
-        Email <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-email">
+        Email <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-email"
         type="email"
-        placeholder="Descripcion"
         [value]="form().controls.email.value"
         [invalid]="showControlError('email')"
         [disabled]="form().controls.email.disabled"
         (valueChange)="updateField('email', $event)"
       />
       @if (getControlError('email'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
 
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-dni">
-        DNI <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-dni">
+        DNI <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-dni"
         type="text"
-        placeholder="Descripcion"
         [value]="form().controls.dni.value"
         [invalid]="showControlError('dni')"
         [disabled]="form().controls.dni.disabled"
         (valueChange)="updateField('dni', $event)"
       />
       @if (getControlError('dni'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
 
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-telefono">
-        Telefono <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-telefono">
+        Telefono <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-telefono"
         type="text"
-        placeholder="Descripcion"
         [value]="form().controls.telefono.value"
         [invalid]="showControlError('telefono')"
         [disabled]="form().controls.telefono.disabled"
         (valueChange)="updateField('telefono', $event)"
       />
       @if (getControlError('telefono'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
   </div>

src/app/features/store/pages/checkout-page/checkout-data-step.component.scss

@@ -23,26 +23,3 @@
     max-width: 290px;
   }
 }
-
-.form-field {
-  display: grid;
-  gap: 0.35rem;
-
-  &__label {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--bs-secondary, #6c757d);
-    letter-spacing: 0;
-  }
-
-  &__required {
-    color: var(--bs-danger, #dc3545);
-    margin-left: 2px;
-  }
-
-  &__error {
-    font-size: 0.75rem;
-    color: var(--bs-danger, #dc3545);
-  }
-}
-

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

@@ -1,4 +1,4 @@
-<div class="container-xl px-3 px-md-4 py-4">
+
   <div class="checkout-page">
     <div class="checkout-page__stepper-col ">
       <app-stepper #stepper>
@@ -16,11 +16,13 @@
             [selectedPaymentMethod]="selectedPaymentMethod()"
             [copiedTransferField]="copiedTransferField()"
             [transferAccount]="transferAccount()"
+            [transferDni]="transferDni()"
             [isGeneratingIntent]="isPaymentLoading()"
             [qrData]="qrData()"
             (paymentMethodChange)="selectPaymentMethod($event)"
             (copyTransferValue)="copyTransferValue($event.field, $event.value)"
             (cancelStep)="onCancel()"
+            (generateTransferIntent)="generateTransferIntent($event)"
             (complete)="onComplete()"
           />
         </app-step>
@@ -37,4 +39,3 @@
       />
     </div>
   </div>
-</div>

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

@@ -3,7 +3,6 @@
   grid-template-columns: minmax(0, 1fr) 420px;
   gap: 4rem;
   align-items: start;
-  padding: 2rem 0;
 
   @media (max-width: 900px) {
     grid-template-columns: 1fr;

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

@@ -1,4 +1,14 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit, signal, untracked, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  OnInit,
+  signal,
+  untracked,
+  ViewChild,
+} from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { startWith } from 'rxjs';
@@ -14,7 +24,13 @@ import { StepComponent } from '../../../../shared/components/stepper/step.compon
 import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
 import { CheckoutDataStepComponent } from './checkout-data-step.component';
 import { CheckoutPaymentStepComponent } from './checkout-payment-step.component';
-import { CheckoutForm, PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
+import {
+  CheckoutForm,
+  PaymentMethod,
+  PaymentMethodOption,
+  TransferAccount,
+  TransferField,
+} from './checkout-page.models';
 
 @Component({
   selector: 'app-checkout-page',
@@ -24,11 +40,11 @@ import { CheckoutForm, PaymentMethod, PaymentMethodOption, TransferAccount, Tran
     StepperComponent,
     StepComponent,
     CheckoutDataStepComponent,
-    CheckoutPaymentStepComponent
+    CheckoutPaymentStepComponent,
   ],
   templateUrl: './checkout-page.component.html',
   styleUrl: './checkout-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CheckoutPageComponent implements OnInit {
   private readonly formBuilder = inject(FormBuilder);
@@ -44,7 +60,7 @@ export class CheckoutPageComponent implements OnInit {
     nombre: ['', [Validators.required]],
     email: ['', [Validators.required, Validators.email]],
     dni: ['', [Validators.required]],
-    telefono: ['', [Validators.required]]
+    telefono: ['', [Validators.required]],
   });
 
   protected readonly cartSubtotal = computed(() => {
@@ -66,21 +82,19 @@ export class CheckoutPageComponent implements OnInit {
   protected readonly paymentMethods: ReadonlyArray<PaymentMethodOption> = [
     { id: 'qr', label: 'QR' },
     { id: 'transfer', label: 'Transferencia' },
-    { id: 'telepagos', label: 'TelePagos' }
+    { id: 'telepagos', label: 'TelePagos' },
   ];
   protected readonly selectedPaymentMethod = signal<PaymentMethod>('qr');
   protected readonly copiedTransferField = signal<TransferField | null>(null);
-  protected readonly transferAccount = signal<TransferAccount>({
-    titular: 'Nombre y Apellido',
-    entidad: 'TelePagos',
-    cvu: '0000000000000000000000',
-    alias: 'telepagos.ar'
-  });
+  protected readonly transferAccount = signal<TransferAccount | null>(null);
+  protected readonly transferDni = signal<string>('');
 
   protected readonly isCreatingPurchase = signal(false);
   protected readonly createdPurchaseId = signal<number | null>(null);
   protected readonly isGeneratingIntent = signal(false);
-  protected readonly isPaymentLoading = computed(() => this.isGeneratingIntent() || this.cartService.isUpdating());
+  protected readonly isPaymentLoading = computed(
+    () => this.isGeneratingIntent() || this.cartService.isUpdating(),
+  );
   protected readonly qrData = signal<string | null>(null);
 
   constructor() {
@@ -88,7 +102,7 @@ export class CheckoutPageComponent implements OnInit {
       // We only want to trigger the intent generation when the cart changes.
       // So we track the cart, but untrack the other signals to prevent duplicate calls.
       const cart = this.cartService.cart();
-      
+
       untracked(() => {
         const purchaseId = this.createdPurchaseId();
         if (cart && purchaseId) {
@@ -108,7 +122,7 @@ export class CheckoutPageComponent implements OnInit {
         nombre: user.nombre_apellido,
         email: user.email,
         dni: user.dni ?? '',
-        telefono: user.telefono ?? ''
+        telefono: user.telefono ?? '',
       });
       this.form.controls.nombre.disable();
       this.form.controls.email.disable();
@@ -138,14 +152,14 @@ export class CheckoutPageComponent implements OnInit {
     }
 
     return {
-      productVariantId: item.product_variant_id,
+      cartItemId: item.id,
       imageUrl: item.product?.imagen ?? null,
       product,
       originalPrice: null,
       discountedPrice: parseFloat(item.precio_unitario),
       discountPercentage: null,
       attributes,
-      quantity: item.cantidad
+      quantity: item.cantidad,
     };
   }
 
@@ -174,12 +188,11 @@ export class CheckoutPageComponent implements OnInit {
 
       const response = await this.checkoutService.createPurchase(tenant.codigo, payload);
       this.createdPurchaseId.set(response.id);
-      
+
       this.stepper.next();
-      
+
       // Auto trigger intent for default option
       void this.selectPaymentMethod(this.selectedPaymentMethod());
-
     } catch (error) {
       console.error('Failed to create purchase:', error);
       // Here we could show an alert or toast
@@ -202,23 +215,58 @@ export class CheckoutPageComponent implements OnInit {
       return;
     }
 
+    if (method === 'transfer') {
+      this.transferAccount.set(null);
+      return;
+    }
+
     this.isGeneratingIntent.set(true);
 
     try {
-      const response = await this.checkoutService.generatePaymentIntent(tenant.codigo, purchaseId, method);
-      
+      const response = await this.checkoutService.generatePaymentIntent(
+        tenant.codigo,
+        purchaseId,
+        method,
+      );
+
       if (method === 'qr' && response.qr_data?.qr_code) {
         this.qrData.set(response.qr_data.qr_code);
-      } else if (method === 'transfer' && response.transfer_data) {
+      }
+    } catch (error) {
+      console.error('Failed to generate payment intent:', error);
+    } finally {
+      this.isGeneratingIntent.set(false);
+    }
+  }
+
+  protected async generateTransferIntent(dni: string): Promise<void> {
+    const purchaseId = this.createdPurchaseId();
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant) {
+      return;
+    }
+
+    this.transferDni.set(dni);
+    this.isGeneratingIntent.set(true);
+    try {
+      const response = await this.checkoutService.generatePaymentIntent(
+        tenant.codigo,
+        purchaseId,
+        'transfer',
+        dni
+      );
+
+      if (response.transfer_data) {
         this.transferAccount.set({
           titular: response.transfer_data.titular,
           entidad: response.transfer_data.entidad,
           cvu: response.transfer_data.cvu,
-          alias: response.transfer_data.alias
+          alias: response.transfer_data.alias,
         });
       }
     } catch (error) {
-      console.error('Failed to generate payment intent:', error);
+      console.error('Failed to generate transfer payment intent:', error);
     } finally {
       this.isGeneratingIntent.set(false);
     }

src/app/features/store/pages/checkout-page/checkout-payment-step.component.html

@@ -40,114 +40,20 @@
           <h3 class="payment-panel__title">Cargando información de pago...</h3>
         </div>
       } @else if (selectedPaymentMethod() === 'qr') {
-        <div class="payment-panel__card">
-          <h3 class="payment-panel__title">Ingresa a tu billetera y escanea el siguiente QR</h3>
-          <div class="payment-panel__divider"></div>
-
-          <div class="qr-code" aria-label="QR de pago">
-            @if (qrData()) {
-              <qrcode [qrdata]="qrData()!" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
-            } @else {
-              <span class="qr-code__finder qr-code__finder--tl"></span>
-              <span class="qr-code__finder qr-code__finder--tr"></span>
-              <span class="qr-code__finder qr-code__finder--bl"></span>
-            }
-          </div>
-        </div>
+        <app-checkout-payment-qr [qrData]="qrData()" />
       } @else if (selectedPaymentMethod() === 'transfer') {
-        <div class="payment-panel__card">
-          <h3 class="payment-panel__title">Transferi a la siguiente cuenta desde cualquier billetera</h3>
-          <div class="payment-panel__divider"></div>
-
-          <div class="payment-panel__account">
-            <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>
-
-            <div class="payment-detail">
-              <span class="payment-detail__label">Titular:</span>
-              <strong class="payment-detail__value">{{ transferAccount().titular }}</strong>
-            </div>
-
-            <div class="payment-detail">
-              <span class="payment-detail__label">Entidad:</span>
-              <strong class="payment-detail__value">{{ transferAccount().entidad }}</strong>
-            </div>
-
-            <div class="payment-detail payment-detail--copy">
-              <span class="payment-detail__label">CVU:</span>
-              <strong class="payment-detail__value">{{ transferAccount().cvu }}</strong>
-              <app-icon-button
-                variant="copy"
-                ariaLabel="Copiar CVU"
-                (click)="requestCopy('cvu', transferAccount().cvu)"
-              />
-            </div>
-
-            @if (copiedTransferField() === 'cvu') {
-              <small class="payment-detail__feedback">CVU copiado</small>
-            }
-
-            <div class="payment-detail payment-detail--copy">
-              <span class="payment-detail__label">Alias:</span>
-              <strong class="payment-detail__value">{{ transferAccount().alias }}</strong>
-              <app-icon-button
-                variant="copy"
-                ariaLabel="Copiar alias"
-                (click)="requestCopy('alias', transferAccount().alias)"
-              />
-            </div>
-
-            @if (copiedTransferField() === 'alias') {
-              <small class="payment-detail__feedback">Alias copiado</small>
-            }
-          </div>
-        </div>
+        <app-checkout-payment-transfer
+          [transferAccount]="transferAccount()"
+          [transferDni]="transferDni()"
+          [copiedTransferField]="copiedTransferField()"
+          (copyTransferValue)="requestCopy($event.field, $event.value)"
+          (submitDni)="generateTransferIntent.emit($event)"
+          (completePurchase)="complete.emit()"
+        />
       } @else {
-        <div class="payment-panel__card">
-          <h3 class="payment-panel__title">Descarga la app de TelePagos para finalizar la compra</h3>
-          <div class="payment-panel__divider"></div>
-
-          <div class="store-badges" aria-label="Tiendas disponibles">
-            <div class="store-badge">
-              <i class="fa-brands fa-google-play" aria-hidden="true"></i>
-              <span class="store-badge__text">
-                <small>Disponible en</small>
-                <strong>Google Play</strong>
-              </span>
-            </div>
-
-            <div class="store-badge">
-              <i class="fa-brands fa-apple" aria-hidden="true"></i>
-              <span class="store-badge__text">
-                <small>Descargalo en</small>
-                <strong>App Store</strong>
-              </span>
-            </div>
-          </div>
-        </div>
+        <app-checkout-payment-telepagos />
       }
     </section>
   </div>
-
-  <div class="checkout-payment__actions">
-    <app-button
-      type="button"
-      variant="cancel"
-      hostClass="checkout-payment__action-btn"
-      buttonClass="w-100"
-      [disabled]="true"
-    >
-      Cancelar
-    </app-button>
-
-    <app-button
-      type="button"
-      hostClass="checkout-payment__action-btn"
-      buttonClass="w-100"
-      [disabled]="isGeneratingIntent()"
-      (click)="complete.emit()"
-    >
-      Finalizar compra
-    </app-button>
-  </div>
 </div>
 

src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss

@@ -23,8 +23,8 @@
 
   &__action-btn {
     width: 100%;
-    flex: 1 1 290px;
-    max-width: 290px;
+    flex: 1 1 320px;
+    max-width: 320px;
     display: block;
   }
 }
@@ -112,7 +112,7 @@
   min-width: 0;
   &__card {
     width: 100%;
-    max-width: 290px;
+    max-width: 320px;
     min-height: 269px;
     padding: 1.5rem 1.75rem;
     border-radius: 5px;
@@ -134,173 +134,5 @@
     line-height: 1.35;
   }
 
-  &__divider {
-    width: 100%;
-    max-width: 220px;
-    height: 1px;
-    margin: 1.2rem 0 1.45rem;
-    background: #dddddd;
-  }
-
-  &__account {
-    width: 100%;
-    display: grid;
-    gap: 0.75rem;
-    color: #7a7a7a;
-    font-size: 12px;
-  }
-
-  &__eyebrow {
-    margin: 0;
-    color: #838383;
-    font-size: 12px;
-    font-weight: 325;
-    letter-spacing: 0.06em;
-  }
-}
-
-.payment-detail {
-  display: grid;
-  grid-template-columns: auto auto;
-  justify-content: center;
-  gap: 0.35rem;
-  align-items: center;
-  font-size: 12px;
-
-  &--copy {
-    grid-template-columns: auto auto auto;
-  }
-
-  &__label {
-    color: #8a8a8a;
-    font-weight: 325;
-  }
-
-  &__value {
-    color: #5e5e5e;
-    font-weight: 500;
-  }
-
-  &__feedback {
-    display: block;
-    margin-top: -0.25rem;
-    color: var(--tenant-primary, #6376f3);
-    font-size: 0.78rem;
-    font-weight: 700;
-  }
-}
-
-.qr-code {
-  position: relative;
-  width: min(170px, 100%);
-  aspect-ratio: 1;
-  border: 8px solid #ffffff;
-  background-color: #ffffff;
-  background-image:
-    linear-gradient(
-      90deg,
-      rgba(17, 17, 17, 0.95) 0 14%,
-      transparent 14% 28%,
-      rgba(17, 17, 17, 0.95) 28% 42%,
-      transparent 42% 56%,
-      rgba(17, 17, 17, 0.95) 56% 70%,
-      transparent 70% 84%,
-      rgba(17, 17, 17, 0.95) 84% 100%
-    ),
-    linear-gradient(
-      rgba(17, 17, 17, 0.95) 0 14%,
-      transparent 14% 28%,
-      rgba(17, 17, 17, 0.95) 28% 42%,
-      transparent 42% 56%,
-      rgba(17, 17, 17, 0.95) 56% 70%,
-      transparent 70% 84%,
-      rgba(17, 17, 17, 0.95) 84% 100%
-    );
-  background-size: 18px 18px;
-  background-position: 0 0, 9px 9px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  qrcode {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-
-    ::ng-deep canvas,
-    ::ng-deep img {
-      display: block !important;
-      width: 100% !important;
-      height: 100% !important;
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-}
-
-.qr-code__finder {
-  position: absolute;
-  width: 38px;
-  height: 38px;
-  border: 5px solid #111111;
-  background: #ffffff;
-  box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 14px #111111;
-
-  &--tl {
-    top: 10px;
-    left: 10px;
-  }
-
-  &--tr {
-    top: 10px;
-    right: 10px;
-  }
-
-  &--bl {
-    bottom: 10px;
-    left: 10px;
-  }
-}
-
-.store-badges {
-  width: 100%;
-  max-width: 210px;
-  display: grid;
-  gap: 0.8rem;
-}
-
-.store-badge {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 0.95rem;
-  border-radius: 0.85rem;
-  background: #111111;
-  color: #ffffff;
-  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16);
-
-  i {
-    font-size: 1.35rem;
-  }
-
-  &__text {
-    display: grid;
-    text-align: left;
-    line-height: 1.1;
-
-    small {
-      font-size: 0.62rem;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      opacity: 0.8;
-    }
-
-    strong {
-      font-size: 1rem;
-      font-weight: 700;
-    }
-  }
 }
 

src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts

@@ -1,14 +1,15 @@
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
-import { QRCodeComponent } from '../../../../shared/components/qrcode/qrcode.component';
+import { CheckoutPaymentQrComponent } from './components/checkout-payment-qr/checkout-payment-qr.component';
+import { CheckoutPaymentTelepagosComponent } from './components/checkout-payment-telepagos/checkout-payment-telepagos.component';
+import { CheckoutPaymentTransferComponent } from './components/checkout-payment-transfer/checkout-payment-transfer.component';
 import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
 
 @Component({
   selector: 'app-checkout-payment-step',
   standalone: true,
-  imports: [ButtonComponent, IconButtonComponent, QRCodeComponent],
+  imports: [ButtonComponent, CheckoutPaymentQrComponent, CheckoutPaymentTelepagosComponent, CheckoutPaymentTransferComponent],
   templateUrl: './checkout-payment-step.component.html',
   styleUrl: './checkout-payment-step.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -17,7 +18,8 @@ export class CheckoutPaymentStepComponent {
   readonly paymentMethods = input.required<ReadonlyArray<PaymentMethodOption>>();
   readonly selectedPaymentMethod = input.required<PaymentMethod>();
   readonly copiedTransferField = input<TransferField | null>(null);
-  readonly transferAccount = input.required<TransferAccount>();
+  readonly transferAccount = input<TransferAccount | null>(null);
+  readonly transferDni = input<string>('');
   readonly isGeneratingIntent = input<boolean>(false);
   readonly qrData = input<string | null>(null);
 
@@ -25,6 +27,7 @@ export class CheckoutPaymentStepComponent {
   readonly copyTransferValue = output<{ field: TransferField; value: string }>();
   readonly cancelStep = output<void>();
   readonly complete = output<void>();
+  readonly generateTransferIntent = output<string>();
 
   protected selectPaymentMethod(method: PaymentMethod): void {
     this.paymentMethodChange.emit(method);

src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.html

@@ -0,0 +1,14 @@
+<div class="payment-panel__card">
+  <h3 class="payment-panel__title">Ingresa a tu billetera y escanea el siguiente QR</h3>
+  <div class="payment-panel__divider"></div>
+
+  <div class="qr-code" aria-label="QR de pago">
+    @if (qrData()) {
+      <qrcode [qrdata]="qrData()!" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
+    } @else {
+      <span class="qr-code__finder qr-code__finder--tl"></span>
+      <span class="qr-code__finder qr-code__finder--tr"></span>
+      <span class="qr-code__finder qr-code__finder--bl"></span>
+    }
+  </div>
+</div>

src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.scss

@@ -0,0 +1,105 @@
+.payment-panel__card {
+  width: 100%;
+  max-width: 320px;
+  min-height: 269px;
+  padding: 1.5rem 1.75rem;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #666666;
+  box-shadow: 0 0 0 1px #f1f1f1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.payment-panel__title {
+  max-width: 18rem;
+  margin: 0;
+  color: #8a8a8a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.payment-panel__divider {
+  width: 100%;
+  max-width: 220px;
+  height: 1px;
+  margin: 1.2rem 0 1.45rem;
+  background: #dddddd;
+}
+
+.qr-code {
+  position: relative;
+  width: min(170px, 100%);
+  aspect-ratio: 1;
+  border: 8px solid #ffffff;
+  background-color: #ffffff;
+  background-image:
+    linear-gradient(
+      90deg,
+      rgba(17, 17, 17, 0.95) 0 14%,
+      transparent 14% 28%,
+      rgba(17, 17, 17, 0.95) 28% 42%,
+      transparent 42% 56%,
+      rgba(17, 17, 17, 0.95) 56% 70%,
+      transparent 70% 84%,
+      rgba(17, 17, 17, 0.95) 84% 100%
+    ),
+    linear-gradient(
+      rgba(17, 17, 17, 0.95) 0 14%,
+      transparent 14% 28%,
+      rgba(17, 17, 17, 0.95) 28% 42%,
+      transparent 42% 56%,
+      rgba(17, 17, 17, 0.95) 56% 70%,
+      transparent 70% 84%,
+      rgba(17, 17, 17, 0.95) 84% 100%
+    );
+  background-size: 18px 18px;
+  background-position: 0 0, 9px 9px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  qrcode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    ::ng-deep canvas,
+    ::ng-deep img {
+      display: block !important;
+      width: 100% !important;
+      height: 100% !important;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
+
+.qr-code__finder {
+  position: absolute;
+  width: 38px;
+  height: 38px;
+  border: 5px solid #111111;
+  background: #ffffff;
+  box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 14px #111111;
+
+  &--tl {
+    top: 10px;
+    left: 10px;
+  }
+
+  &--tr {
+    top: 10px;
+    right: 10px;
+  }
+
+  &--bl {
+    bottom: 10px;
+    left: 10px;
+  }
+}

src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { QRCodeComponent } from '../../../../../../shared/components/qrcode/qrcode.component';
+
+@Component({
+  selector: 'app-checkout-payment-qr',
+  standalone: true,
+  imports: [QRCodeComponent],
+  templateUrl: './checkout-payment-qr.component.html',
+  styleUrl: './checkout-payment-qr.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CheckoutPaymentQrComponent {
+  readonly qrData = input<string | null>(null);
+}

src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.html

@@ -0,0 +1,22 @@
+<div class="payment-panel__card">
+  <h3 class="payment-panel__title">Descarga la app de TelePagos para finalizar la compra</h3>
+  <div class="payment-panel__divider"></div>
+
+  <div class="store-badges" aria-label="Tiendas disponibles">
+    <div class="store-badge">
+      <i class="fa-brands fa-google-play" aria-hidden="true"></i>
+      <span class="store-badge__text">
+        <small>Disponible en</small>
+        <strong>Google Play</strong>
+      </span>
+    </div>
+
+    <div class="store-badge">
+      <i class="fa-brands fa-apple" aria-hidden="true"></i>
+      <span class="store-badge__text">
+        <small>Descargalo en</small>
+        <strong>App Store</strong>
+      </span>
+    </div>
+  </div>
+</div>

src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.scss

@@ -0,0 +1,71 @@
+.payment-panel__card {
+  width: 100%;
+  max-width: 320px;
+  min-height: 269px;
+  padding: 1.5rem 1.75rem;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #666666;
+  box-shadow: 0 0 0 1px #f1f1f1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.payment-panel__title {
+  max-width: 18rem;
+  margin: 0;
+  color: #8a8a8a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.payment-panel__divider {
+  width: 100%;
+  max-width: 220px;
+  height: 1px;
+  margin: 1.2rem 0 1.45rem;
+  background: #dddddd;
+}
+
+.store-badges {
+  width: 100%;
+  max-width: 210px;
+  display: grid;
+  gap: 0.8rem;
+}
+
+.store-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0.95rem;
+  border-radius: 0.85rem;
+  background: #111111;
+  color: #ffffff;
+  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16);
+
+  i {
+    font-size: 1.35rem;
+  }
+
+  &__text {
+    display: grid;
+    text-align: left;
+    line-height: 1.1;
+
+    small {
+      font-size: 0.62rem;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      opacity: 0.8;
+    }
+
+    strong {
+      font-size: 1rem;
+      font-weight: 700;
+    }
+  }
+}

src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-checkout-payment-telepagos',
+  standalone: true,
+  imports: [],
+  templateUrl: './checkout-payment-telepagos.component.html',
+  styleUrl: './checkout-payment-telepagos.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CheckoutPaymentTelepagosComponent {}

src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html

@@ -0,0 +1,94 @@
+<div class="payment-panel__card">
+  <div class="dni-form-container">
+    <h3 class="dni-form-title">Ingresá DNI de quién va a transferir</h3>
+    <form class="dni-form row gx-2" (submit)="$event.preventDefault(); onSubmitDni()">
+      <div class="col-8">
+        <app-input
+          type="text"
+          [value]="dniControl.value"
+          (valueChange)="dniControl.setValue($event.toString()); dniControl.markAsDirty()"
+          [disabled]="isDniDisabled()"
+          [invalid]="dniControl.invalid && (dniControl.dirty || dniControl.touched)"
+        />
+      </div>
+      <div class="col-4">
+        @if (isDniDisabled()) {
+          <app-button
+            type="button"
+            variant="secondary"
+            hostClass="w-100 h-100"
+            buttonClass="w-100 h-100 px-0"
+            (click)="enableEditing()"
+          >
+            Modificar
+          </app-button>
+        } @else {
+          <app-button
+            type="submit"
+            variant="primary"
+            hostClass="w-100 h-100"
+            buttonClass="w-100 h-100 px-0"
+            [disabled]="dniControl.invalid"
+          >
+            Continuar
+          </app-button>
+        }
+      </div>
+    </form>
+  </div>
+
+  @if (transferAccount() && !isEditing()) {
+    <div class="payment-panel__divider"></div>
+    <div class="payment-panel__account">
+      <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>
+
+      <div class="payment-detail">
+        <span class="payment-detail__label">Titular:</span>
+        <span class="payment-detail__value">{{ transferAccount()?.titular }}</span>
+      </div>
+
+      <div class="payment-detail">
+        <span class="payment-detail__label">Entidad:</span>
+        <span class="payment-detail__value">{{ transferAccount()?.entidad }}</span>
+      </div>
+
+      <div class="payment-detail payment-detail--copy">
+        <span class="payment-detail__label">CVU:</span>
+        <span class="payment-detail__value">{{ transferAccount()?.cvu }}</span>
+        <app-icon-button
+          variant="copy"
+          ariaLabel="Copiar CVU"
+          (click)="requestCopy('cvu', transferAccount()!.cvu)"
+        />
+        @if (copiedTransferField() === 'cvu') {
+          <span class="payment-detail__feedback" style="grid-column: 1 / -1; text-align: center;">¡Copiado!</span>
+        }
+      </div>
+
+      <div class="payment-detail payment-detail--copy">
+        <span class="payment-detail__label">Alias:</span>
+        <span class="payment-detail__value">{{ transferAccount()?.alias }}</span>
+        <app-icon-button
+          variant="copy"
+          ariaLabel="Copiar Alias"
+          (click)="requestCopy('alias', transferAccount()!.alias)"
+        />
+        @if (copiedTransferField() === 'alias') {
+          <span class="payment-detail__feedback" style="grid-column: 1 / -1; text-align: center;">¡Copiado!</span>
+        }
+      </div>
+    </div>
+
+    <div class="mt-4">
+      <app-button
+        type="button"
+        variant="primary"
+        hostClass="w-100"
+        buttonClass="w-100"
+        (click)="completePurchase.emit()"
+      >
+        Ya transferí
+      </app-button>
+    </div>
+  }
+</div>

src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.scss

@@ -0,0 +1,117 @@
+.payment-panel__card {
+  width: 100%;
+  max-width: 320px;
+  min-height: 400px;
+  padding: 1.5rem 1.75rem;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #666666;
+  box-shadow: 0 0 0 1px #f1f1f1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.payment-panel__title {
+  max-width: 18rem;
+  margin: 0;
+  color: #8a8a8a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.payment-panel__divider {
+  width: 100%;
+  max-width: 220px;
+  height: 1px;
+  margin: 1.2rem 0 1.45rem;
+  background: #dddddd;
+}
+
+.payment-panel__account {
+  width: 100%;
+  display: grid;
+  gap: 0.75rem;
+  color: #7a7a7a;
+  font-size: 12px;
+}
+
+.payment-panel__eyebrow {
+  margin: 0;
+  color: #838383;
+  font-size: 12px;
+  font-weight: 325;
+  letter-spacing: 0.06em;
+}
+
+.payment-detail {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: center;
+  gap: 0.35rem;
+  align-items: center;
+  font-size: 12px;
+
+  &--copy {
+    grid-template-columns: auto auto auto;
+  }
+
+  &__label {
+    color: #8a8a8a;
+    font-weight: 325;
+  }
+
+  &__value {
+    color: #5e5e5e;
+    font-weight: 500;
+  }
+
+  &__feedback {
+    display: block;
+    margin-top: -0.25rem;
+    color: var(--tenant-primary, #6376f3);
+    font-size: 0.78rem;
+    font-weight: 700;
+  }
+}
+
+.dni-form-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+  width: 100%;
+  padding: 1rem 0;
+}
+
+.dni-form-title {
+  color: #8a8a8a;
+  font-size: 13px;
+  font-weight: 700;
+  margin: 0 0 1.25rem 0;
+  text-align: center;
+}
+
+.dni-form {
+  width: 100%;
+  margin: 0;
+
+  app-input {
+    display: block;
+    height: 100%;
+    margin-bottom: 0;
+
+    ::ng-deep .input-control,
+    ::ng-deep input.form-control {
+      height: 100%;
+    }
+  }
+
+  ::ng-deep .btn {
+    min-width: 0 !important;
+    height: 100%;
+  }
+}

src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, computed, input, output, signal, OnInit, effect, untracked } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
+import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
+import { InputComponent } from '../../../../../../shared/components/input/input.component';
+import { TransferAccount, TransferField } from '../../checkout-page.models';
+
+@Component({
+  selector: 'app-checkout-payment-transfer',
+  standalone: true,
+  imports: [IconButtonComponent, ButtonComponent, InputComponent, ReactiveFormsModule],
+  templateUrl: './checkout-payment-transfer.component.html',
+  styleUrl: './checkout-payment-transfer.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CheckoutPaymentTransferComponent implements OnInit {
+  readonly transferAccount = input<TransferAccount | null>(null);
+  readonly transferDni = input<string>('');
+  readonly copiedTransferField = input<TransferField | null>(null);
+
+  readonly copyTransferValue = output<{ field: TransferField; value: string }>();
+  readonly submitDni = output<string>();
+  readonly completePurchase = output<void>();
+
+  protected readonly dniControl = new FormControl('', {
+    nonNullable: true,
+    validators: [Validators.required, Validators.pattern(/^\d{7,8}$/)]
+  });
+
+  protected readonly isEditing = signal<boolean>(false);
+  protected readonly isDniDisabled = computed(() => !!this.transferAccount() && !this.isEditing());
+
+  ngOnInit(): void {
+    const dni = this.transferDni();
+    if (dni) {
+      this.dniControl.setValue(dni);
+    }
+  }
+
+  protected requestCopy(field: TransferField, value: string): void {
+    this.copyTransferValue.emit({ field, value });
+  }
+
+  protected onSubmitDni(): void {
+    if (this.dniControl.valid) {
+      this.isEditing.set(false);
+      this.submitDni.emit(this.dniControl.value);
+    }
+  }
+
+  protected enableEditing(): void {
+    this.isEditing.set(true);
+  }
+}

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

@@ -27,11 +27,11 @@
     }
 
     <div class="d-grid gap-1">
-      <label class="visually-hidden" for="login-password">Contrasena</label>
+      <label class="visually-hidden" for="login-password">Contraseña</label>
       <app-input
         id="login-password"
         type="password"
-        placeholder="Contrasena"
+        placeholder="Contraseña"
         [value]="form.controls.password.value"
         [invalid]="showControlError('password')"
         (valueChange)="updatePassword($event)"
@@ -41,7 +41,7 @@
       }
       <div class="text-end">
         <button type="button" class="login-page__forgot-password btn btn-link p-0 border-0 text-decoration-none">
-          Olvide mi contrasena
+          Olvide mi contraseña
         </button>
       </div>
     </div>

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

@@ -1,120 +1,120 @@
-<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>
+<section class="product-detail">
+  @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>
-    } @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="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__title-price-divider"></div>
 
-              <div class="product-detail__price-group">
-                <span class="product-detail__price-current">
-                  {{ getFormattedPrice(prod.precio) }}
-                </span>
+            <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">
-                <app-quantity-selector
-                  [(quantity)]="quantity"
-                  [max]="selectedVariant()?.cantidad_maxima ?? 1"
-                />
-
-                <div class="product-detail__actions">
-                  <app-button
-                    class="product-detail__cta"
-                    variant="secondary"
-                    type="button"
-                    [disabled]="!selectedVariant() || variantLoading() || addingToCart()"
-                    (click)="addToCart()"
-                  >
-                    @if (variantLoading() || addingToCart()) {
-                      <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>
+              @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()"
+                [variants]="prod.variants"
+                [selectedVariant]="prod.selected_variant ?? null"
+                [inventoryPolicy]="prod.inventory_policy"
+                (variantChange)="onVariantChange($event)"
+              />
             </section>
-          </div>
+          }
+
+          <div class="product-detail__divider"></div>
+
+          <section class="product-detail__section">
+            <div class="product-detail__purchase">
+              <app-quantity-selector [(quantity)]="quantity" [max]="selectedVariantMax()" />
+
+              <div class="product-detail__actions">
+                <app-button
+                  class="product-detail__cta"
+                  variant="secondary"
+                  type="button"
+                  [disabled]="!selectedVariantAvailable() || variantLoading() || addingToCart()"
+                  (click)="addToCart()"
+                >
+                  @if (variantLoading() || addingToCart()) {
+                    <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]="!selectedVariantAvailable() || 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>
-    } @else {
-      <div class="alert alert-warning text-center mb-0" role="alert">
-        No se encontró el producto especificado.
-      </div>
-    }
-  </div>
+    </div>
+  } @else {
+    <div class="alert alert-warning text-center mb-0" role="alert">
+      No se encontró el producto especificado.
+    </div>
+  }
 </section>

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

@@ -1,22 +1,22 @@
 import { TestBed, getTestBed } from '@angular/core/testing';
-import {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/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 { CatalogItemDetail } from '../../../../core/services/catalog/catalog.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
 import { CartService } from '../../../../core/services/cart/cart.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { ProductDetailPageComponent } from './product-detail-page.component';
+import {
+  PRODUCT_DETAIL_ERROR_MESSAGE,
+  ProductDetailResolvedData,
+} from './product-detail-page.resolver';
 
 describe('ProductDetailPageComponent', () => {
-  const mockProduct: ProductDetail = {
+  const mockProduct: CatalogItemDetail = {
     id: 1,
     category_id: 10,
     brand_id: null,
@@ -27,12 +27,16 @@ describe('ProductDetailPageComponent', () => {
     category: 'Tecnología',
     brand: 'Sony',
     images: ['https://example.com/image.png'],
+    inventory_policy: 'tracked',
+    has_tickets: false,
+    minimum_use_date: null,
+    maximum_use_date: null,
+    stock_tecnico: 10,
     attributes: [],
-    variants_map: [],
-    variant: null
+    variants: [],
   };
 
-  let paramMapSubject: BehaviorSubject<any>;
+  let routeDataSubject: BehaviorSubject<{ productDetailData: ProductDetailResolvedData }>;
   let catalogServiceStub: any;
   let routerStub: any;
   let cartServiceStub: any;
@@ -40,10 +44,7 @@ describe('ProductDetailPageComponent', () => {
 
   beforeAll(() => {
     try {
-      getTestBed().initTestEnvironment(
-        BrowserTestingModule,
-        platformBrowserTesting()
-      );
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
     } catch {
       // Test environment may already be initialized by another setup entrypoint.
     }
@@ -51,20 +52,25 @@ describe('ProductDetailPageComponent', () => {
 
   beforeEach(() => {
     vi.restoreAllMocks();
-    paramMapSubject = new BehaviorSubject(convertToParamMap({ id: '1' }));
+    routeDataSubject = new BehaviorSubject<{ productDetailData: ProductDetailResolvedData }>({
+      productDetailData: {
+        product: mockProduct,
+        error: null,
+      },
+    });
     catalogServiceStub = {
-      getProducto: vi.fn().mockReturnValue(of(mockProduct))
+      getCatalogItem: vi.fn(),
     };
     routerStub = {
-      navigate: vi.fn()
+      navigate: vi.fn(),
     };
     cartServiceStub = {
-      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' }))
+      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' })),
     };
     toastServiceStub = {
       success: vi.fn(),
       danger: vi.fn(),
-      info: vi.fn()
+      info: vi.fn(),
     };
   });
 
@@ -75,47 +81,69 @@ describe('ProductDetailPageComponent', () => {
         {
           provide: ActivatedRoute,
           useValue: {
-            paramMap: paramMapSubject.asObservable()
-          }
+            data: routeDataSubject.asObservable(),
+          },
         },
         {
           provide: CatalogService,
-          useValue: catalogServiceStub
+          useValue: catalogServiceStub,
         },
         {
           provide: Router,
-          useValue: routerStub
+          useValue: routerStub,
         },
         {
           provide: CartService,
-          useValue: cartServiceStub
+          useValue: cartServiceStub,
         },
         {
           provide: ToastService,
-          useValue: toastServiceStub
-        }
-      ]
+          useValue: toastServiceStub,
+        },
+      ],
     }).compileComponents();
   }
 
-  it('loads the product on init and embeds the carousel', async () => {
+  function resolveProduct(product: CatalogItemDetail): void {
+    routeDataSubject.next({
+      productDetailData: {
+        product,
+        error: null,
+      },
+    });
+  }
+
+  function resolveProductError(error: string): void {
+    routeDataSubject.next({
+      productDetailData: {
+        product: null,
+        error,
+      },
+    });
+  }
+
+  it('renders the resolved product 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(catalogServiceStub.getCatalogItem).not.toHaveBeenCalled();
 
     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__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')));
+  it('shows error message if the resolver cannot load the product', async () => {
+    resolveProductError(PRODUCT_DETAIL_ERROR_MESSAGE);
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
     fixture.detectChanges();
@@ -125,35 +153,37 @@ describe('ProductDetailPageComponent', () => {
     expect(element.textContent).toContain('No pudimos cargar los detalles del producto.');
   });
 
-
   it('should use default variant images if present', async () => {
-    const detailProduct: ProductDetail = {
+    const detailProduct: CatalogItemDetail = {
       ...mockProduct,
       images: ['https://example.com/product.png'],
-      variant: {
+      variants: [{ id: 123, stock_tecnico: 10, values: {} }],
+      selected_variant: {
         id: 123,
-        cantidad_maxima: 10,
+        stock_tecnico: 10,
         images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
-        definitions: {}
-      }
+        values: {},
+      },
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(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']);
+    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 = {
+    const detailProduct: CatalogItemDetail = {
       ...mockProduct,
       images: ['https://example.com/product.png'],
-      variant: null
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -164,12 +194,11 @@ describe('ProductDetailPageComponent', () => {
   });
 
   it('should fallback to empty array if no images are present at all', async () => {
-    const detailProduct: ProductDetail = {
+    const detailProduct: CatalogItemDetail = {
       ...mockProduct,
       images: [],
-      variant: null
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -180,7 +209,7 @@ describe('ProductDetailPageComponent', () => {
   });
 
   it('renders generic attributes and preselects default variant options', async () => {
-    const detailProduct: ProductDetail = {
+    const detailProduct: CatalogItemDetail = {
       ...mockProduct,
       attributes: [
         {
@@ -196,16 +225,16 @@ describe('ProductDetailPageComponent', () => {
               value: 'beige',
               label: 'Beige',
               sort_order: 1,
-              metadata: { hex: '#D8D1C7' }
+              metadata: { hex: '#D8D1C7' },
             },
             {
               id: 11,
               value: 'brown',
               label: 'Marrón',
               sort_order: 2,
-              metadata: { palette: { primary: '#7E6460' } }
-            }
-          ]
+              metadata: { palette: { primary: '#7E6460' } },
+            },
+          ],
         },
         {
           id: 2,
@@ -220,29 +249,30 @@ describe('ProductDetailPageComponent', () => {
               value: 'mesh',
               label: 'Mesh',
               sort_order: 1,
-              metadata: null
+              metadata: null,
             },
             {
               id: 21,
               value: 'cuero',
               label: 'Cuero',
               sort_order: 2,
-              metadata: null
-            }
-          ]
-        }
+              metadata: null,
+            },
+          ],
+        },
       ],
-      variant: {
+      variants: [{ id: 123, stock_tecnico: 10, values: { color: 'beige', material: 'Cuero' } }],
+      selected_variant: {
         id: 123,
-        cantidad_maxima: 10,
+        stock_tecnico: 10,
         images: ['https://example.com/variant1.png'],
-        definitions: {
+        values: {
           color: 'beige',
-          material: 'Cuero'
-        }
-      }
+          material: 'Cuero',
+        },
+      },
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -252,14 +282,16 @@ describe('ProductDetailPageComponent', () => {
     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()
+      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(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe(
+      true,
+    );
     expect((swatches[0] as HTMLElement).style.backgroundColor).not.toBe('');
   });
 
@@ -280,18 +312,18 @@ describe('ProductDetailPageComponent', () => {
     fixture.detectChanges();
 
     fixture.componentInstance['selectedVariant'].set({
-      variant_id: 1,
-      cantidad_maxima: 10,
-      attributes: {}
+      id: 1,
+      stock_tecnico: 10,
+      values: {},
     });
     fixture.detectChanges();
 
     const element = fixture.nativeElement as HTMLElement;
     const decreaseButton = element.querySelector(
-      '[aria-label="Disminuir cantidad"]'
+      '[aria-label="Disminuir cantidad"]',
     ) as HTMLButtonElement;
     const increaseButton = element.querySelector(
-      '[aria-label="Aumentar cantidad"]'
+      '[aria-label="Aumentar cantidad"]',
     ) as HTMLButtonElement;
 
     decreaseButton.click();
@@ -316,7 +348,7 @@ describe('ProductDetailPageComponent', () => {
 
     const element = fixture.nativeElement as HTMLElement;
     const toggleButton = element.querySelector(
-      '.product-detail__description-toggle'
+      '.product-detail__description-toggle',
     ) as HTMLButtonElement;
 
     expect(toggleButton.textContent?.trim()).toBe('Mostrar más');
@@ -327,7 +359,7 @@ describe('ProductDetailPageComponent', () => {
     expect(
       element
         .querySelector('.product-detail__description-body')
-        ?.classList.contains('product-detail__description-body--expanded')
+        ?.classList.contains('product-detail__description-body--expanded'),
     ).toBe(true);
     expect(toggleButton.textContent?.trim()).toBe('Mostrar menos');
   });
@@ -338,12 +370,12 @@ describe('ProductDetailPageComponent', () => {
     fixture.detectChanges();
 
     const buttons = Array.from(
-      fixture.nativeElement.querySelectorAll('app-button button')
+      fixture.nativeElement.querySelectorAll('app-button button'),
     ) as HTMLButtonElement[];
 
     expect(buttons.map((button) => button.textContent?.trim())).toEqual([
       'Agregar al carrito',
-      'Comprar'
+      'Comprar',
     ]);
 
     buttons[0].click();
@@ -353,82 +385,168 @@ describe('ProductDetailPageComponent', () => {
   });
 
   it('calls CartService.addItem when variant is selected and Add to Cart is clicked', async () => {
-    const detailProduct: ProductDetail = {
+    const detailProduct: CatalogItemDetail = {
       ...mockProduct,
-      variant: {
-        id: 123,
-        cantidad_maxima: 5,
-        images: [],
-        definitions: {}
-      },
-      variants_map: [
+      variants: [
         {
-          variant_id: 123,
-          cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          id: 123,
+          stock_tecnico: 5,
+          values: {},
+        },
+      ],
+      selected_variant: {
+        id: 123,
+        stock_tecnico: 5,
+        images: [],
+        values: {},
+      },
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
     fixture.detectChanges();
 
     // Select the variant
-    fixture.componentInstance['selectedVariant'].set(detailProduct.variants_map[0]);
+    fixture.componentInstance['selectedVariant'].set(detailProduct.variants[0]);
     fixture.componentInstance['quantity'].set(3);
     fixture.detectChanges();
 
     const element = fixture.nativeElement as HTMLElement;
     const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
-      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
+      (btn) => btn.textContent?.trim() === 'Agregar al carrito',
     ) as HTMLButtonElement;
 
     expect(addToCartButton).toBeDefined();
     addToCartButton.click();
     fixture.detectChanges();
 
-    expect(cartServiceStub.addItem).toHaveBeenCalledWith(123, 3);
+    expect(cartServiceStub.addItem).toHaveBeenCalledWith(1, 123, 3);
     expect(toastServiceStub.success).toHaveBeenCalledWith('Producto agregado al carrito');
   });
 
-  it('shows error toast when CartService.addItem fails', async () => {
-    const detailProduct: ProductDetail = {
+  it('adds a catalog item without variants to the cart', async () => {
+    resolveProduct({
       ...mockProduct,
-      variant: {
-        id: 123,
-        cantidad_maxima: 5,
-        images: [],
-        definitions: {}
-      },
-      variants_map: [
+      variants: [],
+      stock_tecnico: 4,
+    });
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const buttons = Array.from(
+      fixture.nativeElement.querySelectorAll('app-button button'),
+    ) as HTMLButtonElement[];
+    const addToCartButton = buttons.find(
+      (button) => button.textContent?.trim() === 'Agregar al carrito',
+    ) as HTMLButtonElement;
+
+    addToCartButton.click();
+    fixture.detectChanges();
+
+    expect(cartServiceStub.addItem).toHaveBeenCalledWith(1, null, 1);
+  });
+
+  it('shows error toast when CartService.addItem fails', async () => {
+    const detailProduct: CatalogItemDetail = {
+      ...mockProduct,
+      variants: [
         {
-          variant_id: 123,
-          cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          id: 123,
+          stock_tecnico: 5,
+          values: {},
+        },
+      ],
+      selected_variant: {
+        id: 123,
+        stock_tecnico: 5,
+        images: [],
+        values: {},
+      },
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
     cartServiceStub.addItem.mockReturnValue(throwError(() => new Error('Failed to add')));
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
     fixture.detectChanges();
 
-    fixture.componentInstance['selectedVariant'].set(detailProduct.variants_map[0]);
+    fixture.componentInstance['selectedVariant'].set(detailProduct.variants[0]);
     fixture.detectChanges();
 
     const element = fixture.nativeElement as HTMLElement;
     const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
-      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
+      (btn) => btn.textContent?.trim() === 'Agregar al carrito',
     ) as HTMLButtonElement;
 
     addToCartButton.click();
     fixture.detectChanges();
 
     expect(cartServiceStub.addItem).toHaveBeenCalled();
-    expect(toastServiceStub.danger).toHaveBeenCalledWith('No se pudo agregar el producto al carrito.');
+    expect(toastServiceStub.danger).toHaveBeenCalledWith(
+      'No se pudo agregar el producto al carrito.',
+    );
+  });
+
+  it('allows unlimited variants to increase quantity without a maximum', async () => {
+    const unlimitedVariant = {
+      id: 321,
+      stock_tecnico: null,
+      values: {},
+    };
+    resolveProduct({
+      ...mockProduct,
+      inventory_policy: 'unlimited',
+      selected_variant: {
+        id: 321,
+        stock_tecnico: null,
+        images: [],
+        values: {},
+      },
+      variants: [unlimitedVariant],
+    });
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const increaseButton = fixture.nativeElement.querySelector(
+      'app-quantity-selector button:last-child',
+    ) as HTMLButtonElement;
+    expect(increaseButton.disabled).toBe(false);
+    increaseButton.click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance['quantity']()).toBe(2);
+  });
+
+  it('disables purchase actions for tracked variants without stock', async () => {
+    const trackedVariant = {
+      id: 654,
+      stock_tecnico: 0,
+      values: {},
+    };
+    resolveProduct({
+      ...mockProduct,
+      selected_variant: {
+        id: 654,
+        stock_tecnico: 0,
+        images: [],
+        values: {},
+      },
+      variants: [trackedVariant],
+    });
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const purchaseButtons = Array.from(
+      fixture.nativeElement.querySelectorAll('app-button button'),
+    ) as HTMLButtonElement[];
+    expect(purchaseButtons).toHaveLength(2);
+    expect(purchaseButtons.every((button) => button.disabled)).toBe(true);
   });
 });

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

@@ -9,7 +9,7 @@ import {
   inject,
   signal,
   viewChild,
-  PLATFORM_ID
+  PLATFORM_ID,
 } from '@angular/core';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -20,16 +20,14 @@ import { CatalogService } from '../../../../core/services/catalog/catalog.servic
 import { ToastService } from '../../../../core/services/toast.service';
 import { CartService } from '../../../../core/services/cart/cart.service';
 import {
-  ProductAttribute,
-  ProductAttributeOption,
-  ProductDetail,
-  ProductVariant,
-  ProductVariantMap
+  CatalogItemDetail,
+  CatalogItemVariant,
 } 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';
 import { QuantitySelectorComponent } from '../../../../shared/components/quantity-selector/quantity-selector.component';
+import { ProductDetailResolvedData } from './product-detail-page.resolver';
 
 @Component({
   selector: 'app-product-detail-page',
@@ -40,11 +38,11 @@ import { QuantitySelectorComponent } from '../../../../shared/components/quantit
     ProductCarouselComponent,
     ButtonComponent,
     ProductAttributeSelectorComponent,
-    QuantitySelectorComponent
+    QuantitySelectorComponent,
   ],
   templateUrl: './product-detail-page.component.html',
   styleUrl: './product-detail-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductDetailPageComponent implements OnInit, OnDestroy {
   private readonly route = inject(ActivatedRoute);
@@ -64,12 +62,12 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
   private observedCarouselPreview: HTMLElement | null = null;
   private measurementTimer: ReturnType<typeof setTimeout> | null = null;
 
-  protected readonly product = signal<ProductDetail | null>(null);
+  protected readonly product = signal<CatalogItemDetail | 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.selected_variant?.images && prod.selected_variant.images.length > 0) {
+      return prod.selected_variant.images;
     }
     if (prod.images && prod.images.length > 0) {
       return prod.images;
@@ -80,20 +78,37 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
   protected readonly variantLoading = signal(false);
   protected readonly addingToCart = signal(false);
   protected readonly error = signal<string | null>(null);
-  protected readonly selectedVariant = signal<ProductVariantMap | null>(null);
+  protected readonly selectedVariant = signal<CatalogItemVariant | null>(null);
   protected readonly quantity = signal(1);
+  protected readonly selectedVariantMax = computed<number | null>(() => {
+    const prod = this.product();
+    const variant = this.selectedVariant();
+    if (variant) return variant.stock_tecnico;
+    if (prod && prod.variants.length === 0) return prod.stock_tecnico ?? null;
+    return 0;
+  });
+  protected readonly selectedVariantAvailable = computed(() => {
+    const prod = this.product();
+    if (!prod) return false;
+
+    const variant = this.selectedVariant();
+    if (variant) return this.isVariantAvailable(variant, prod);
+    if (prod.variants.length > 0) return false;
+
+    return prod.inventory_policy === 'unlimited' || (prod.stock_tecnico ?? 0) > 0;
+  });
   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)
+    (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0),
   );
   protected readonly hasRenderableAttributes = computed(
-    () => this.renderableAttributes().length > 0
+    () => this.renderableAttributes().length > 0,
   );
   protected readonly oldPrice = computed<string | null>(() => null);
   protected readonly showDescriptionToggle = computed(
-    () => this.descriptionExpanded() || this.descriptionHasOverflow()
+    () => this.descriptionExpanded() || this.descriptionHasOverflow(),
   );
 
   constructor() {
@@ -113,14 +128,12 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
   }
 
   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.routeSub = this.route.data.subscribe((data) => {
+      const resolvedData = data['productDetailData'] as ProductDetailResolvedData | undefined;
 
-      this.loadProduct(id);
+      if (resolvedData) {
+        this.applyResolvedData(resolvedData);
+      }
     });
   }
 
@@ -131,38 +144,13 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     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);
-        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
-        this.selectedVariant.set(matchingVariant);
-        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({
+    this.productSub = this.catalogService.getCatalogItem(productId, variantId).subscribe({
       next: (prod) => {
-        this.product.set(prod);
-        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
-        this.selectedVariant.set(matchingVariant);
+        this.applyProduct(prod, false);
         this.variantLoading.set(false);
       },
       error: (err: HttpErrorResponse) => {
@@ -172,23 +160,46 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
 
         this.product.update((currentProduct) => {
           if (!currentProduct) return null;
-          const updatedVariantsMap = currentProduct.variants_map.map((v) => {
-            if (v.variant_id === variantId) {
-              return { ...v, cantidad_maxima: 0 };
-            }
-            return v;
-          });
           return {
             ...currentProduct,
-            variants_map: updatedVariantsMap
+            variants: currentProduct.variants.filter((variant) => variant.id !== variantId),
           };
         });
 
         this.attributeSelector()?.reset();
-      }
+      },
     });
   }
 
+  private applyResolvedData(resolvedData: ProductDetailResolvedData): void {
+    this.productSub?.unsubscribe();
+    this.loading.set(false);
+    this.variantLoading.set(false);
+
+    if (resolvedData.error) {
+      this.product.set(null);
+      this.error.set(resolvedData.error);
+      return;
+    }
+
+    if (resolvedData.product) {
+      this.applyProduct(resolvedData.product, true);
+    }
+  }
+
+  private applyProduct(prod: CatalogItemDetail, resetQuantity: boolean): void {
+    this.product.set(prod);
+    const matchingVariant =
+      prod.variants.find((variant) => variant.id === prod.selected_variant?.id) || null;
+    this.selectedVariant.set(matchingVariant);
+    if (resetQuantity) {
+      this.quantity.set(1);
+    }
+    this.descriptionExpanded.set(false);
+    this.descriptionHasOverflow.set(false);
+    this.error.set(null);
+  }
+
   protected goBack(): void {
     this.router.navigate(['/']);
   }
@@ -203,33 +214,32 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     return `$${parts.join(',')}`;
   }
 
-  protected onVariantChange(variant: ProductVariantMap | null): void {
-    if (this.selectedVariant()?.variant_id === variant?.variant_id) {
+  protected onVariantChange(variant: CatalogItemVariant | null): void {
+    if (this.selectedVariant()?.id === variant?.id) {
       return;
     }
 
     this.selectedVariant.set(variant);
-    if (variant && this.quantity() > variant.cantidad_maxima) {
-      this.quantity.set(Math.max(1, variant.cantidad_maxima));
+    if (variant && variant.stock_tecnico !== null && this.quantity() > variant.stock_tecnico) {
+      this.quantity.set(Math.max(1, variant.stock_tecnico));
     }
 
     const currentProduct = this.product();
-    if (variant && currentProduct && currentProduct.variant?.id !== variant.variant_id) {
-      this.loadProductVariant(currentProduct.id, variant.variant_id);
+    if (variant && currentProduct && currentProduct.selected_variant?.id !== variant.id) {
+      this.loadProductVariant(currentProduct.id, variant.id);
     }
   }
 
-
-
   protected addToCart(): void {
+    const currentProduct = this.product();
     const variant = this.selectedVariant();
-    if (!variant) {
+    if (!currentProduct || !this.selectedVariantAvailable()) {
       this.toastService.danger('Por favor, selecciona una variante.');
       return;
     }
 
     this.addingToCart.set(true);
-    this.cartService.addItem(variant.variant_id, this.quantity()).subscribe({
+    this.cartService.addItem(currentProduct.id, variant?.id ?? null, this.quantity()).subscribe({
       next: (res) => {
         const msg = res.message || 'Producto agregado al carrito';
         this.toastService.success(msg);
@@ -239,23 +249,18 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
         const errorMessage = err.error?.message || 'No se pudo agregar el producto al carrito.';
         this.toastService.danger(errorMessage);
         this.addingToCart.set(false);
-      }
+      },
     });
   }
 
+  private isVariantAvailable(variant: CatalogItemVariant, product: CatalogItemDetail): boolean {
+    return product.inventory_policy === 'unlimited' || (variant.stock_tecnico ?? 0) > 0;
+  }
+
   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();
 
@@ -315,7 +320,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     }
 
     this.descriptionHasOverflow.set(
-      descriptionElement.scrollHeight - descriptionElement.clientHeight > 1
+      descriptionElement.scrollHeight - descriptionElement.clientHeight > 1,
     );
   }
 

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

@@ -0,0 +1,95 @@
+import { TestBed } from '@angular/core/testing';
+import { convertToParamMap } from '@angular/router';
+import { firstValueFrom, Observable, of, throwError } from 'rxjs';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { CatalogItemDetail } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import {
+  PRODUCT_DETAIL_ERROR_MESSAGE,
+  PRODUCT_DETAIL_INVALID_ID_MESSAGE,
+  ProductDetailResolvedData,
+  productDetailResolver,
+} from './product-detail-page.resolver';
+
+describe('productDetailResolver', () => {
+  const product: CatalogItemDetail = {
+    id: 1,
+    category_id: 10,
+    brand_id: null,
+    slug: 'auriculares-bluetooth',
+    nombre: 'Auriculares Bluetooth',
+    descripcion: 'Auriculares bluetooth de prueba',
+    precio: '24999',
+    category: 'Tecnologia',
+    brand: null,
+    images: [],
+    inventory_policy: 'tracked',
+    has_tickets: false,
+    minimum_use_date: null,
+    maximum_use_date: null,
+    stock_tecnico: 0,
+    attributes: [],
+    variants: [],
+  };
+
+  let catalogServiceStub: { getCatalogItem: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    catalogServiceStub = {
+      getCatalogItem: vi.fn().mockReturnValue(of(product)),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: CatalogService,
+          useValue: catalogServiceStub,
+        },
+      ],
+    });
+  });
+
+  it('resolves the product detail for the route id', async () => {
+    const result = TestBed.runInInjectionContext(() =>
+      productDetailResolver(createRouteSnapshot('1'), {} as never),
+    );
+
+    await expect(firstValueFrom(result as Observable<ProductDetailResolvedData>)).resolves.toEqual({
+      product,
+      error: null,
+    });
+    expect(catalogServiceStub.getCatalogItem).toHaveBeenCalledWith(1);
+  });
+
+  it('returns an error state for invalid ids', async () => {
+    const result = TestBed.runInInjectionContext(() =>
+      productDetailResolver(createRouteSnapshot('abc'), {} as never),
+    );
+
+    await expect(firstValueFrom(result as Observable<ProductDetailResolvedData>)).resolves.toEqual({
+      product: null,
+      error: PRODUCT_DETAIL_INVALID_ID_MESSAGE,
+    });
+    expect(catalogServiceStub.getCatalogItem).not.toHaveBeenCalled();
+  });
+
+  it('returns an error state when the request fails', async () => {
+    catalogServiceStub.getCatalogItem.mockReturnValue(throwError(() => new Error('boom')));
+
+    const result = TestBed.runInInjectionContext(() =>
+      productDetailResolver(createRouteSnapshot('1'), {} as never),
+    );
+
+    await expect(firstValueFrom(result as Observable<ProductDetailResolvedData>)).resolves.toEqual({
+      product: null,
+      error: PRODUCT_DETAIL_ERROR_MESSAGE,
+    });
+  });
+});
+
+function createRouteSnapshot(id: string) {
+  return {
+    paramMap: convertToParamMap({ id }),
+  } as never;
+}

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

@@ -0,0 +1,53 @@
+import { inject } from '@angular/core';
+import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
+import { catchError, map, of } from 'rxjs';
+
+import { CatalogItemDetail } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+
+export const PRODUCT_DETAIL_ERROR_MESSAGE = 'No pudimos cargar los detalles del producto.';
+export const PRODUCT_DETAIL_INVALID_ID_MESSAGE = 'ID de producto invalido';
+
+export interface ProductDetailResolvedData {
+  product: CatalogItemDetail | null;
+  error: string | null;
+}
+
+export const productDetailResolver: ResolveFn<ProductDetailResolvedData> = (
+  route: ActivatedRouteSnapshot,
+) => {
+  const productId = parseIntegerParam(route.paramMap.get('id'));
+
+  if (productId === null) {
+    return of({
+      product: null,
+      error: PRODUCT_DETAIL_INVALID_ID_MESSAGE,
+    });
+  }
+
+  return inject(CatalogService)
+    .getCatalogItem(productId)
+    .pipe(
+      map(
+        (product): ProductDetailResolvedData => ({
+          product,
+          error: null,
+        }),
+      ),
+      catchError(() =>
+        of({
+          product: null,
+          error: PRODUCT_DETAIL_ERROR_MESSAGE,
+        }),
+      ),
+    );
+};
+
+function parseIntegerParam(value: string | null): number | null {
+  if (!value) {
+    return null;
+  }
+
+  const parsed = Number(value);
+  return Number.isInteger(parsed) ? parsed : null;
+}

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

@@ -35,11 +35,11 @@
       <small class="text-danger">{{ errorMessage }}</small>
     }
 
-    <label class="visually-hidden" for="register-password">Contrasena</label>
+    <label class="visually-hidden" for="register-password">Contraseña</label>
     <app-input
       id="register-password"
       type="password"
-      placeholder="Contrasena"
+      placeholder="Contraseña"
       [value]="form.controls.password.value"
       [invalid]="showControlError('password')"
       (valueChange)="updateField('password', $event)"
@@ -48,11 +48,11 @@
       <small class="text-danger">{{ errorMessage }}</small>
     }
 
-    <label class="visually-hidden" for="register-password-repeat">Repetir Contrasena</label>
+    <label class="visually-hidden" for="register-password-repeat">Repetir Contraseña</label>
     <app-input
       id="register-password-repeat"
       type="password"
-      placeholder="Repetir Contrasena"
+      placeholder="Repetir Contraseña"
       [value]="form.controls.password_confirmation.value"
       [invalid]="showControlError('password_confirmation')"
       (valueChange)="updateField('password_confirmation', $event)"

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

@@ -102,7 +102,7 @@ describe('RegisterPageComponent', () => {
     component.onSubmit();
 
     expect(authService.register).not.toHaveBeenCalled();
-    expect(component.getControlError('password_confirmation')).toBe('Las contrasenas no coinciden.');
+    expect(component.getControlError('password_confirmation')).toBe('Las contraseñas no coinciden.');
   });
 
   it('validates max length and password minimum length before submit', async () => {

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

@@ -55,7 +55,11 @@ export class RegisterPageComponent {
       '',
       [Validators.required, Validators.email, Validators.maxLength(TEXT_MAX_LENGTH)]
     ],
-    password: ['', [Validators.required, Validators.minLength(PASSWORD_MIN_LENGTH)]],
+    password: ['', [
+      Validators.required,
+      Validators.minLength(PASSWORD_MIN_LENGTH),
+      Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).+$/)
+    ]],
     password_confirmation: ['', [Validators.required]]
   }, {
     validators: [passwordsMatchValidator]
@@ -142,8 +146,12 @@ export class RegisterPageComponent {
       return `Debe tener al menos ${PASSWORD_MIN_LENGTH} caracteres.`;
     }
 
+    if (controlName === 'password' && control.hasError('pattern')) {
+      return 'Debe contener mayuscula, minuscula y un caracter especial.';
+    }
+
     if (controlName === 'password_confirmation' && this.form.hasError('passwordMismatch')) {
-      return 'Las contrasenas no coinciden.';
+      return 'Las contraseñas no coinciden.';
     }
 
     return 'El valor ingresado no es valido.';

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

@@ -1,45 +1,29 @@
-<section class="py-5">
-  <div class="container-xl px-3 px-md-4">
-    <app-store-section title="Productos">
-      <div class="d-grid gap-4">
-        @if (error()) {
-          <p class="alert text-center mb-0 store-home__alert-error">{{ error() }}</p>
-        } @else if (loading() && !productCards().length) {
-          <p class="alert alert-light border text-center mb-0">Cargando productos...</p>
-        } @else if (!productCards().length) {
-          <p class="alert alert-light border text-center mb-0">No hay productos disponibles en este momento.</p>
-        } @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 (tenant()?.hero_config || tenant()?.event_config) {
+  <app-hero-banner
+    [heroConfig]="tenant()?.hero_config"
+    [eventConfig]="tenant()?.event_config"
+  ></app-hero-banner>
+}
 
-        @if (loading() && productCards().length) {
-          <p class="alert alert-light border text-center mb-0 py-2">Actualizando productos...</p>
-        }
-
-        @if (totalPages() > 1) {
-          <div class="d-flex justify-content-center">
-            <app-paginator
-              [page]="currentPage()"
-              [totalPages]="totalPages()"
-              [disabled]="loading()"
-              (pageChange)="onPageChange($event)"
-            />
-          </div>
-        }
-      </div>
+@if (error()) {
+  <p class="alert text-center mb-0 store-home__alert-error">{{ error() }}</p>
+} @else if (loading()) {
+  <p class="alert alert-light border text-center mb-0">Cargando productos...</p>
+} @else if (!catalog().length) {
+  <p class="alert alert-light border text-center mb-0">
+    No hay productos disponibles en este momento.
+  </p>
+} @else {
+  @for (group of catalog(); track group.id) {
+    <app-store-section [title]="group.title">
+      <app-product-list
+        [layout]="group.layout"
+        [items]="group.items"
+        [loading]="isGroupLoading(group.id)"
+        (buy)="onBuyProduct($event)"
+        (addToCart)="onAddToCart($event)"
+        (pageChange)="onPageChange(group.id, $event)"
+      />
     </app-store-section>
-  </div>
-</section>
+  }
+}

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

@@ -2,6 +2,11 @@
   display: block;
 }
 
+app-hero-banner + app-store-section,
+app-store-section + app-store-section {
+  margin-top: clamp(3rem, 6vw, 5rem);
+}
+
 .store-home__alert-error {
   margin: 0;
   border-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.18);

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

@@ -1,239 +1,250 @@
 import { TestBed } from '@angular/core/testing';
-import { Subject, of, throwError } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
+import { Subject, of } 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 { CartService } from '../../../../core/services/cart/cart.service';
+import {
+  CatalogFeaturedGroup,
+  CatalogFeaturedItem,
+} from '../../../../core/services/catalog/catalog.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { ProductListComponent } from '../../../../shared/components/product-list/product-list.component';
 import { StoreHomePageComponent } from './store-home-page.component';
+import {
+  STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+  StoreHomeCatalogResolvedData,
+} from './store-home-page.resolver';
 
-function createPaginatedResponse(
-  products: Product[],
-  currentPage: number,
-  lastPage: number
-): ApiPaginatedResponse<Product[]> {
+function createItemsPage(
+  items: CatalogFeaturedItem[],
+  currentPage = 1,
+  lastPage = 1,
+): ApiPaginatedResponse<CatalogFeaturedItem[]> {
   return {
-    data: products,
+    data: items,
     meta: {
       current_page: currentPage,
-      from: products.length ? 1 : null,
+      from: items.length ? 1 : null,
       last_page: lastPage,
       links: [],
-      path: '/productos',
+      path: '/catalog/featured-groups/1/items',
       per_page: 12,
-      to: products.length || null,
-      total: products.length
+      to: items.length || null,
+      total: items.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
-    }
+      first: '/catalog/featured-groups/1/items?page=1',
+      last: `/catalog/featured-groups/1/items?page=${lastPage}`,
+      prev: currentPage > 1 ? `/catalog/featured-groups/1/items?page=${currentPage - 1}` : null,
+      next:
+        currentPage < lastPage ? `/catalog/featured-groups/1/items?page=${currentPage + 1}` : null,
+    },
   };
 }
 
-describe('StoreHomePageComponent', () => {
-  const pageOneProducts: Product[] = [
+function createCatalog(
+  items = pageOneItems,
+  currentPage = 1,
+  lastPage = 2,
+): CatalogFeaturedGroup[] {
+  return [
     {
-      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: 7,
+      title: 'Destacados',
+      layout: 'column_with_image',
+      group_order: 0,
+      items: createItemsPage(items, currentPage, lastPage),
     },
-    {
-      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();
-  });
+function provideActivatedRoute(catalogData: StoreHomeCatalogResolvedData) {
+  return {
+    provide: ActivatedRoute,
+    useValue: { snapshot: { data: { catalogData } } },
+  };
+}
 
-  it('loads page 1 on init, renders the products title and the fetched product cards', async () => {
+const pageOneItems: CatalogFeaturedItem[] = [
+  {
+    id: 1,
+    nombre: 'Auriculares Bluetooth',
+    precio: '24999.00',
+    image: '/catalog/auriculares.jpg',
+  },
+  {
+    id: 2,
+    nombre: 'Teclado Mecanico',
+    precio: '18999.00',
+    image: null,
+  },
+];
+
+describe('StoreHomePageComponent', () => {
+  beforeEach(() => vi.restoreAllMocks());
+
+  it('renders the CatalogNew groups resolved by the route', async () => {
     const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse(pageOneProducts, 1, 3)))
+      getCatalog: vi.fn(),
+      getFeaturedGroupItems: vi.fn(),
     };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+        provideActivatedRoute({ response: createCatalog(), error: null }),
+        { 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(catalogServiceStub.getCatalog).not.toHaveBeenCalled();
+    expect(element.querySelector('.store-section__title')?.textContent?.trim()).toBe('Destacados');
+    expect(element.querySelectorAll('app-product-column-with-image')).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');
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe(
+      '1/2',
+    );
   });
 
-  it('requests the next page when the paginator emits a page change', async () => {
+  it('requests another page for the selected featured group', async () => {
+    const pageTwoItems = [{ id: 3, nombre: 'Mouse Gamer', precio: '15999.00', image: null }];
     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
-            )
-          )
-        )
+      getCatalog: vi.fn(),
+      getFeaturedGroupItems: vi.fn().mockReturnValue(of(createItemsPage(pageTwoItems, 2, 2))),
     };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+        provideActivatedRoute({ response: createCatalog(), error: null }),
+        { 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(catalogServiceStub.getFeaturedGroupItems).toHaveBeenCalledWith(7, { page: 2 });
     expect(element.textContent).toContain('Mouse Gamer');
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe(
+      '2/2',
+    );
   });
 
-  it('disables the paginator while a new page request is in flight', async () => {
-    const nextPageSubject = new Subject<ApiPaginatedResponse<Product[]>>();
+  it('disables only the group paginator while its page request is in flight', async () => {
+    const nextPage = new Subject<ApiPaginatedResponse<CatalogFeaturedItem[]>>();
     const catalogServiceStub = {
-      getProductos: vi
-        .fn()
-        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-        .mockReturnValueOnce(nextPageSubject.asObservable())
+      getCatalog: vi.fn(),
+      getFeaturedGroupItems: vi.fn().mockReturnValue(nextPage.asObservable()),
     };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+        provideActivatedRoute({ response: createCatalog(), error: null }),
+        { 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
-      )
+        (button) => (button as HTMLButtonElement).disabled,
+      ),
     ).toBe(true);
-    expect(element.textContent).toContain('Actualizando productos...');
 
-    nextPageSubject.next(createPaginatedResponse(pageOneProducts, 2, 3));
-    nextPageSubject.complete();
+    nextPage.next(createItemsPage(pageOneItems, 2, 2));
+    nextPage.complete();
     fixture.detectChanges();
 
     expect(
       Array.from(element.querySelectorAll('app-paginator button')).some(
-        (button) => !(button as HTMLButtonElement).disabled
-      )
+        (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)))
-    };
+  it('shows an empty state when CatalogNew returns no groups', async () => {
+    const catalogServiceStub = { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+        provideActivatedRoute({ response: [], error: null }),
+        { 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();
+    expect((fixture.nativeElement as HTMLElement).textContent).toContain(
+      'No hay productos disponibles en este momento.',
+    );
   });
 
-  it('shows an error message when the catalog request fails', async () => {
-    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(throwError(() => new Error('boom')))
-    };
+  it('shows an error when the catalog resolver fails', async () => {
+    const catalogServiceStub = { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+        provideActivatedRoute({ response: null, error: STORE_HOME_PRODUCTS_ERROR_MESSAGE }),
+        { provide: CatalogService, useValue: catalogServiceStub },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(StoreHomePageComponent);
     fixture.detectChanges();
 
-    const element = fixture.nativeElement as HTMLElement;
+    expect((fixture.nativeElement as HTMLElement).textContent).toContain(
+      'No pudimos cargar los productos en este momento.',
+    );
+  });
 
-    expect(element.textContent).toContain('No pudimos cargar los productos en este momento.');
-    expect(element.querySelectorAll('app-product-card')).toHaveLength(0);
+  it('adds a product-list cart event to the cart', async () => {
+    const catalogServiceStub = { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() };
+    const cartServiceStub = {
+      addItem: vi.fn().mockReturnValue(
+        of({ data: {}, message: 'Producto agregado correctamente' }),
+      ),
+    };
+    const toastServiceStub = { success: vi.fn(), danger: vi.fn() };
+
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        provideActivatedRoute({ response: createCatalog(), error: null }),
+        { provide: CatalogService, useValue: catalogServiceStub },
+        { provide: CartService, useValue: cartServiceStub },
+        { provide: ToastService, useValue: toastServiceStub },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+    const productList = fixture.debugElement.query(By.directive(ProductListComponent))
+      .componentInstance as ProductListComponent;
+
+    productList.addToCart.emit({ product: pageOneItems[0], quantity: 3, variant: 12 });
+
+    expect(cartServiceStub.addItem).toHaveBeenCalledWith(1, 12, 3);
+    expect(toastServiceStub.success).toHaveBeenCalledWith('Producto agregado correctamente');
   });
 });

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

@@ -1,114 +1,158 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, inject, signal } from '@angular/core';
-import { Router } from '@angular/router';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  OnInit,
+  inject,
+  signal,
+} from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
+import { CartService } from '../../../../core/services/cart/cart.service';
+import { CatalogFeaturedGroup } from '../../../../core/services/catalog/catalog.interface';
 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 { TenantService } from '../../../../core/services/tenant.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import {
+  ProductListComponent,
+  ProductListCartEvent,
+  ProductListItem,
+} from '../../../../shared/components/product-list/product-list.component';
+import { HeroBannerComponent } from '../../../../shared/components/hero-banner/hero-banner.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;
-}
+import {
+  STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+  StoreHomeCatalogResolvedData,
+} from './store-home-page.resolver';
 
 @Component({
   selector: 'app-store-home-page',
-  imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent],
+  imports: [StoreSectionComponent, ProductListComponent, HeroBannerComponent],
   templateUrl: './store-home-page.component.html',
   styleUrl: './store-home-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StoreHomePageComponent implements OnInit, OnDestroy {
+  private readonly cartService = inject(CartService);
   private readonly catalogService = inject(CatalogService);
+  private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
+  private readonly tenantService = inject(TenantService);
+  private readonly toastService = inject(ToastService);
 
-  private activeRequestId = 0;
-  private productsRequestSubscription: Subscription | null = null;
-
-  protected readonly currentPage = signal(1);
-  protected readonly products = signal<Product[]>([]);
-  protected readonly totalPages = signal(0);
+  protected readonly tenant = this.tenantService.tenant;
+  protected readonly catalog = signal<CatalogFeaturedGroup[]>([]);
   protected readonly loading = signal(false);
+  protected readonly loadingGroupIds = signal<ReadonlySet<number>>(new Set());
   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
-    }))
-  );
+  private catalogRequestSubscription: Subscription | null = null;
+  private readonly groupRequestSubscriptions = new Map<number, Subscription>();
 
   ngOnInit(): void {
-    this.loadProducts(1);
-  }
+    const resolvedData = this.route.snapshot.data['catalogData'] as
+      | StoreHomeCatalogResolvedData
+      | undefined;
 
-  ngOnDestroy(): void {
-    this.productsRequestSubscription?.unsubscribe();
-  }
-
-  protected onPageChange(page: number): void {
-    if (page === this.currentPage() || page < 1) {
+    if (resolvedData) {
+      this.applyResolvedData(resolvedData);
       return;
     }
 
-    this.loadProducts(page);
+    this.loadCatalog();
   }
 
-  protected onBuyProduct(productId: number): void {
-    this.router.navigate(['/producto', productId]);
+  ngOnDestroy(): void {
+    this.catalogRequestSubscription?.unsubscribe();
+    this.groupRequestSubscriptions.forEach((subscription) => subscription.unsubscribe());
   }
 
-  private loadProducts(page: number): void {
-    this.activeRequestId += 1;
-    const requestId = this.activeRequestId;
+  protected isGroupLoading(groupId: number): boolean {
+    return this.loadingGroupIds().has(groupId);
+  }
 
-    this.productsRequestSubscription?.unsubscribe();
-    this.loading.set(true);
-    this.error.set(null);
+  protected onPageChange(groupId: number, page: number): void {
+    const group = this.catalog().find((candidate) => candidate.id === groupId);
 
-    this.productsRequestSubscription = this.catalogService.getProductos({ page }).subscribe({
-      next: (response) => {
-        if (requestId !== this.activeRequestId) {
-          return;
-        }
+    if (
+      !group ||
+      page < 1 ||
+      page === group.items.meta.current_page ||
+      this.isGroupLoading(groupId)
+    ) {
+      return;
+    }
 
-        this.products.set(response.data ?? []);
-        this.currentPage.set(response.meta.current_page);
-        this.totalPages.set(response.meta.last_page);
+    this.setGroupLoading(groupId, true);
+    this.groupRequestSubscriptions.get(groupId)?.unsubscribe();
+
+    const subscription = this.catalogService.getFeaturedGroupItems(groupId, { page }).subscribe({
+      next: (items) => {
+        this.catalog.update((groups) =>
+          groups.map((candidate) =>
+            candidate.id === groupId ? { ...candidate, items } : candidate,
+          ),
+        );
+        this.error.set(null);
       },
       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.');
+        this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
+        this.setGroupLoading(groupId, false);
       },
-      complete: () => {
-        if (requestId !== this.activeRequestId) {
-          return;
-        }
+      complete: () => this.setGroupLoading(groupId, false),
+    });
 
+    this.groupRequestSubscriptions.set(groupId, subscription);
+  }
+
+  protected onBuyProduct(product: ProductListItem): void {
+    this.router.navigate(['/producto', product.id]);
+  }
+
+  protected onAddToCart(event: ProductListCartEvent): void {
+    this.cartService
+      .addItem(event.product.id, event.variant ?? null, event.quantity)
+      .subscribe({
+        next: (response) => {
+          this.toastService.success(response.message || 'Producto agregado al carrito');
+        },
+        error: (error: HttpErrorResponse) => {
+          const message =
+            error.error?.message || 'No se pudo agregar el producto al carrito.';
+          this.toastService.danger(message);
+        },
+      });
+  }
+
+  private loadCatalog(): void {
+    this.loading.set(true);
+    this.error.set(null);
+    this.catalogRequestSubscription?.unsubscribe();
+
+    this.catalogRequestSubscription = this.catalogService.getCatalog().subscribe({
+      next: (catalog) => this.catalog.set(catalog),
+      error: () => {
+        this.catalog.set([]);
         this.loading.set(false);
-      }
+        this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
+      },
+      complete: () => this.loading.set(false),
     });
   }
 
-  private parseProductPrice(price: string): number {
-    const parsedPrice = Number(price);
+  private applyResolvedData(resolvedData: StoreHomeCatalogResolvedData): void {
+    this.catalog.set(resolvedData.response ?? []);
+    this.loading.set(false);
+    this.error.set(resolvedData.error);
+  }
 
-    return Number.isFinite(parsedPrice) ? parsedPrice : 0;
+  private setGroupLoading(groupId: number, loading: boolean): void {
+    this.loadingGroupIds.update((current) => {
+      const updated = new Set(current);
+      loading ? updated.add(groupId) : updated.delete(groupId);
+      return updated;
+    });
   }
 }

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

@@ -0,0 +1,32 @@
+import { inject } from '@angular/core';
+import { ResolveFn } from '@angular/router';
+import { catchError, map, of } from 'rxjs';
+
+import { CatalogFeaturedGroup } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+
+export const STORE_HOME_PRODUCTS_ERROR_MESSAGE = 'No pudimos cargar los productos en este momento.';
+
+export interface StoreHomeCatalogResolvedData {
+  response: CatalogFeaturedGroup[] | null;
+  error: string | null;
+}
+
+export const storeHomeCatalogResolver: ResolveFn<StoreHomeCatalogResolvedData> = () => {
+  return inject(CatalogService)
+    .getCatalog()
+    .pipe(
+      map(
+        (response): StoreHomeCatalogResolvedData => ({
+          response,
+          error: null,
+        }),
+      ),
+      catchError(() =>
+        of({
+          response: null,
+          error: STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+        }),
+      ),
+    );
+};

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

@@ -4,8 +4,11 @@ import { SimpleLayoutComponent } from '../../core/layout/simple-layout/simple-la
 import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
 import { authGuard, guestOnlyGuard } from '../../core/services/auth/auth.guards';
 import { LoginPageComponent } from './pages/login-page/login-page.component';
+import { hasMenuGuard } from '../../core/guards/menu.guard';
+import { productDetailResolver } from './pages/product-detail-page/product-detail-page.resolver';
 import { RegisterPageComponent } from './pages/register-page/register-page.component';
 import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';
+import { storeHomeCatalogResolver } from './pages/store-home-page/store-home-page.resolver';
 
 export const routes: Routes = [
   {
@@ -14,7 +17,11 @@ export const routes: Routes = [
     children: [
       {
         path: '',
-        component: StoreHomePageComponent
+        component: StoreHomePageComponent,
+        canActivate: [hasMenuGuard('index')],
+        resolve: {
+          catalogData: storeHomeCatalogResolver,
+        },
       },
       {
         path: 'login',
@@ -23,9 +30,9 @@ export const routes: Routes = [
         children: [
           {
             path: '',
-            component: LoginPageComponent
-          }
-        ]
+            component: LoginPageComponent,
+          },
+        ],
       },
       {
         path: 'register',
@@ -34,24 +41,28 @@ export const routes: Routes = [
         children: [
           {
             path: '',
-            component: RegisterPageComponent
-          }
-        ]
+            component: RegisterPageComponent,
+          },
+        ],
       },
       {
         path: 'producto/:id',
+        canActivate: [hasMenuGuard('product.detail')],
+        resolve: {
+          productDetailData: productDetailResolver,
+        },
         loadComponent: () =>
           import('./pages/product-detail-page/product-detail-page.component').then(
-            (m) => m.ProductDetailPageComponent
-          )
+            (m) => m.ProductDetailPageComponent,
+          ),
       },
       {
         path: 'checkout',
-        canActivate: [authGuard],
+        canActivate: [authGuard, hasMenuGuard('checkout')],
         loadComponent: () =>
           import('./pages/checkout-page/checkout-page.component').then(
-            (m) => m.CheckoutPageComponent
-          )
+            (m) => m.CheckoutPageComponent,
+          ),
       },
       {
         path: 'checkout/status',
@@ -61,11 +72,47 @@ export const routes: Routes = [
             path: ':id',
             loadComponent: () =>
               import('./pages/purchase-status-page/purchase-status-page.component').then(
-                (m) => m.PurchaseStatusPageComponent
-              )
-          }
-        ]
-      }
-    ]
-  }
+                (m) => m.PurchaseStatusPageComponent,
+              ),
+          },
+        ],
+      },
+      {
+        path: 'mi-cuenta',
+        canActivate: [authGuard],
+        loadComponent: () =>
+          import('./pages/account-page/account-layout/account-layout').then((m) => m.AccountLayout),
+        children: [
+          {
+            path: 'datos-personales',
+            canActivate: [hasMenuGuard('profile')],
+            loadComponent: () =>
+              import('./pages/account-page/pages/profile-page/profile-page').then(
+                (m) => m.ProfilePage,
+              ),
+          },
+          {
+            path: 'compras',
+            canActivate: [hasMenuGuard('purchases')],
+            loadComponent: () =>
+              import('./pages/account-page/pages/purchases-page/purchases-page').then(
+                (m) => m.PurchasesPage,
+              ),
+          },
+          {
+            path: 'compras/:id',
+            loadComponent: () =>
+              import('./pages/account-page/pages/purchase-detail-page/purchase-detail-page').then(
+                (m) => m.PurchaseDetailPage,
+              ),
+          },
+          {
+            path: '',
+            redirectTo: 'datos-personales',
+            pathMatch: 'full',
+          },
+        ],
+      },
+    ],
+  },
 ];

src/app/shared/components/cart-item/cart-item.component.html

@@ -1,15 +1,16 @@
-<article class="w-100 p-3 rounded-0 cart-item">
-  <div class="position-relative overflow-hidden cart-item-media">
-    @if (discountPercentage() && discountPercentage()! > 0) {
-      <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
-    }
+<article
+  class="w-100 p-3 rounded-0 cart-item"
+  [class.cart-item-with-media]="imageUrl()"
+>
+  @if (imageUrl()) {
+    <div class="position-relative overflow-hidden cart-item-media">
+      @if (discountPercentage() && discountPercentage()! > 0) {
+        <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
+      }
 
-    @if (imageUrl()) {
       <img class="w-100 h-100 object-fit-cover d-block" [src]="imageUrl()" [alt]="product()" />
-    } @else {
-      <div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
-    }
-  </div>
+    </div>
+  }
 
   <div class="d-grid min-w-0 cart-item-content">
     <div class="d-grid align-items-start cart-item-top-row">

src/app/shared/components/cart-item/cart-item.component.scss

@@ -29,11 +29,15 @@
 
 .cart-item {
   display: grid;
-  grid-template-columns: var(--item-media-size) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
   gap: 0.75rem;
   background-color: #f5f5f5;
 }
 
+.cart-item-with-media {
+  grid-template-columns: var(--item-media-size) minmax(0, 1fr);
+}
+
 .cart-item-media {
   width: var(--item-media-size);
   aspect-ratio: 1 / 1;
@@ -50,21 +54,19 @@
 }
 
 .cart-item-discount-badge {
-  padding: 2px 5px;
+  width: 44px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-bottom-right-radius: 4px;
   background-color: var(--bs-primary);
   color: #ffffff;
-  font-size: 8px;
+  font-size: 10px;
   font-weight: 500;
   line-height: 1;
 }
 
-.cart-item-placeholder {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #d2d2d2, #ececec);
-}
-
 .cart-item-content {
   gap: 0.5rem;
 }

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

@@ -1,16 +1,28 @@
-<section class="d-flex flex-column h-100 overflow-hidden text-secondary" [style.background-color]="backgroundColor()">
+<section
+  class="d-flex flex-column h-100 overflow-hidden text-secondary"
+  [style.background-color]="backgroundColor()"
+>
   <header class="d-flex align-items-center p-3 justify-content-between bg-transparent cart-header">
     <h2 class="m-0 text-uppercase fw-bold cart-title">{{ title() }}</h2>
 
     @if (showClose()) {
-      <button class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-close-btn" type="button" aria-label="Cerrar carrito" (click)="closed.emit()">
+      <button
+        class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-close-btn"
+        type="button"
+        aria-label="Cerrar carrito"
+        (click)="closed.emit()"
+      >
         <i class="fa-solid fa-xmark"></i>
       </button>
     }
   </header>
 
   <div class="d-grid w-100 flex-grow-1 overflow-y-auto cart-items-container">
-    @for (item of items(); track item.productVariantId || item.product + item.discountedPrice; let idx = $index) {
+    @for (
+      item of items();
+      track item.cartItemId || item.product + item.discountedPrice;
+      let idx = $index
+    ) {
       <app-cart-item
         [imageUrl]="item.imageUrl"
         [product]="item.product"
@@ -22,30 +34,31 @@
         (quantityChange)="onItemQuantityChange(idx, $event)"
         (remove)="onItemRemove(idx)"
       />
+    } @empty {
+      <p class="cart-empty-message" role="status">El carrito está vacío</p>
     }
   </div>
 
-  <footer class="d-grid gap-1 bg-transparent cart-footer">
-    <div class="d-flex align-items-baseline justify-content-between gap-3">
-      <span class="cart-summary-text-muted">Subtotal:</span>
-      <span class="cart-summary-text-muted-bold">{{ formattedSubtotal() }}</span>
-    </div>
+  @if (items().length > 0) {
+    <footer class="d-grid gap-1 bg-transparent cart-footer">
+      <div class="d-flex align-items-baseline justify-content-between gap-3">
+        <span class="cart-summary-text-muted">Subtotal:</span>
+        <span class="cart-summary-text-muted-bold">{{ formattedSubtotal() }}</span>
+      </div>
 
-    <div class="d-flex align-items-baseline justify-content-between gap-3">
-      <span class="cart-summary-text-muted">Descuento:</span>
-      <span class="cart-summary-text-muted-bold">{{ formattedDiscount() }}</span>
-    </div>
+      <div class="d-flex align-items-baseline justify-content-between gap-3">
+        <span class="cart-summary-text-muted">Descuento:</span>
+        <span class="cart-summary-text-muted-bold">{{ formattedDiscount() }}</span>
+      </div>
 
-    <div class="d-flex align-items-baseline justify-content-between gap-3 mt-1">
-      <span class="cart-total-text">TOTAL:</span>
-      <span class="cart-total-text">{{ formattedTotal() }}</span>
-    </div>
+      <div class="d-flex align-items-baseline justify-content-between gap-3 mt-1">
+        <span class="cart-total-text">TOTAL:</span>
+        <span class="cart-total-text">{{ formattedTotal() }}</span>
+      </div>
 
-    <div class="cart-actions mt-3">
-      <ng-content />
-    </div>
-  </footer>
+      <div class="cart-actions mt-3">
+        <ng-content />
+      </div>
+    </footer>
+  }
 </section>
-
-
-

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

@@ -31,8 +31,6 @@
     display: block;
   }
 
-  
-
   &::-webkit-scrollbar {
     width: 6px;
   }
@@ -43,6 +41,15 @@
   }
 }
 
+.cart-empty-message {
+  align-self: center;
+  margin: 0;
+  padding: 24px;
+  color: #a0a0a0;
+  font-size: 14px;
+  text-align: center;
+}
+
 .cart-footer {
   padding: 8px 22px 14px 24px;
 }

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

@@ -2,10 +2,7 @@ import '@angular/compiler';
 import { signal } from '@angular/core';
 import { TestBed, getTestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import { of, throwError } from 'rxjs';
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
@@ -17,10 +14,7 @@ import { CartComponent } from './cart.component';
 describe('CartComponent', () => {
   beforeAll(() => {
     try {
-      getTestBed().initTestEnvironment(
-        BrowserTestingModule,
-        platformBrowserTesting()
-      );
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
     } catch {
       // Test environment may already be initialized by another setup entrypoint.
     }
@@ -30,6 +24,44 @@ describe('CartComponent', () => {
     TestBed.resetTestingModule();
   });
 
+  it('shows an empty cart message when there are no items', async () => {
+    await TestBed.configureTestingModule({
+      imports: [CartComponent],
+      providers: [
+        {
+          provide: CartService,
+          useValue: {
+            cart: signal(null).asReadonly(),
+            updateItemQuantity: vi.fn(),
+            removeItem: vi.fn(),
+          },
+        },
+        {
+          provide: ModalService,
+          useValue: {},
+        },
+        {
+          provide: ToastService,
+          useValue: {
+            success: vi.fn(),
+            info: vi.fn(),
+            danger: vi.fn(),
+          },
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(CartComponent);
+    fixture.detectChanges();
+
+    const emptyMessage = fixture.debugElement.query(By.css('.cart-empty-message'));
+
+    expect(emptyMessage).not.toBeNull();
+    expect(emptyMessage.nativeElement.textContent.trim()).toBe('El carrito está vacío');
+    expect(fixture.debugElement.query(By.css('app-cart-item'))).toBeNull();
+    expect(fixture.debugElement.query(By.css('.cart-footer'))).toBeNull();
+  });
+
   it('opens a confirm delete modal before removing an item', async () => {
     const removeItem = vi.fn().mockReturnValue(of({ message: 'Producto eliminado.' }));
     const openConfirmDelete = vi.fn().mockReturnValue(of(true));
@@ -42,49 +74,50 @@ describe('CartComponent', () => {
           useValue: {
             cart: signal(null).asReadonly(),
             updateItemQuantity: vi.fn(),
-            removeItem
-          }
+            removeItem,
+          },
         },
         {
           provide: ModalService,
           useValue: {
-            openConfirmDelete
-          }
+            openConfirmDelete,
+          },
         },
         {
           provide: ToastService,
           useValue: {
             success: vi.fn(),
             info: vi.fn(),
-            danger: vi.fn()
-          }
-        }
-      ]
+            danger: vi.fn(),
+          },
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(CartComponent);
     fixture.componentRef.setInput('items', [
       {
-        productVariantId: 10,
+        cartItemId: 10,
         imageUrl: null,
         product: 'Producto de prueba',
         originalPrice: null,
         discountedPrice: 1000,
         discountPercentage: null,
         attributes: [],
-        quantity: 1
-      }
+        quantity: 1,
+      },
     ]);
     fixture.detectChanges();
 
+    expect(fixture.debugElement.query(By.css('.cart-item-media'))).toBeNull();
+
     fixture.debugElement.query(By.css('app-cart-item')).triggerEventHandler('remove');
 
     expect(openConfirmDelete).toHaveBeenCalledWith({
       title: 'Eliminar producto',
-      content:
-        'Se eliminara "Producto de prueba" del carrito. Esta accion no se puede deshacer.',
+      content: 'Se eliminara "Producto de prueba" del carrito. Esta accion no se puede deshacer.',
       confirmLabel: 'Eliminar',
-      cancelLabel: 'Cancelar'
+      cancelLabel: 'Cancelar',
     });
     expect(removeItem).toHaveBeenCalledWith(10);
   });
@@ -101,38 +134,38 @@ describe('CartComponent', () => {
           useValue: {
             cart: signal(null).asReadonly(),
             updateItemQuantity: vi.fn(),
-            removeItem
-          }
+            removeItem,
+          },
         },
         {
           provide: ModalService,
           useValue: {
-            openConfirmDelete
-          }
+            openConfirmDelete,
+          },
         },
         {
           provide: ToastService,
           useValue: {
             success: vi.fn(),
             info: vi.fn(),
-            danger: vi.fn()
-          }
-        }
-      ]
+            danger: vi.fn(),
+          },
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(CartComponent);
     fixture.componentRef.setInput('items', [
       {
-        productVariantId: 10,
+        cartItemId: 10,
         imageUrl: null,
         product: 'Producto de prueba',
         originalPrice: null,
         discountedPrice: 1000,
         discountPercentage: null,
         attributes: [],
-        quantity: 1
-      }
+        quantity: 1,
+      },
     ]);
     fixture.detectChanges();
 
@@ -155,36 +188,36 @@ describe('CartComponent', () => {
           useValue: {
             cart: signal(null).asReadonly(),
             updateItemQuantity,
-            removeItem: vi.fn()
-          }
+            removeItem: vi.fn(),
+          },
         },
         {
           provide: ModalService,
-          useValue: {}
+          useValue: {},
         },
         {
           provide: ToastService,
           useValue: {
             success: vi.fn(),
             info: vi.fn(),
-            danger
-          }
-        }
-      ]
+            danger,
+          },
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(CartComponent);
     const component = fixture.componentInstance;
 
     const item = {
-      productVariantId: 10,
+      cartItemId: 10,
       imageUrl: null,
       product: 'Producto de prueba',
       originalPrice: null,
       discountedPrice: 1000,
       discountPercentage: null,
       attributes: [],
-      quantity: 1
+      quantity: 1,
     };
 
     fixture.componentRef.setInput('items', [item]);
@@ -221,36 +254,36 @@ describe('CartComponent', () => {
           useValue: {
             cart: signal(null).asReadonly(),
             updateItemQuantity,
-            removeItem: vi.fn()
-          }
+            removeItem: vi.fn(),
+          },
         },
         {
           provide: ModalService,
-          useValue: {}
+          useValue: {},
         },
         {
           provide: ToastService,
           useValue: {
             success,
             info: vi.fn(),
-            danger: vi.fn()
-          }
-        }
-      ]
+            danger: vi.fn(),
+          },
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(CartComponent);
     const component = fixture.componentInstance;
 
     const item = {
-      productVariantId: 10,
+      cartItemId: 10,
       imageUrl: null,
       product: 'Producto de prueba',
       originalPrice: null,
       discountedPrice: 1000,
       discountPercentage: null,
       attributes: [],
-      quantity: 1
+      quantity: 1,
     };
 
     fixture.componentRef.setInput('items', [item]);

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

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, output, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Subject, EMPTY } from 'rxjs';
 import { catchError, debounceTime, groupBy, mergeMap, switchMap, tap } from 'rxjs';
@@ -9,7 +17,7 @@ import { CartService } from '../../../core/services/cart/cart.service';
 import { ToastService } from '../../../core/services/toast.service';
 
 export interface CartItemMock {
-  productVariantId?: number;
+  cartItemId?: number;
   imageUrl: string | null;
   product: string;
   originalPrice: number | null;
@@ -25,13 +33,13 @@ export interface CartItemMock {
   imports: [CartItemComponent],
   templateUrl: './cart.component.html',
   styleUrl: './cart.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CartComponent {
   private readonly cartService = inject(CartService);
   private readonly modalService = inject(ModalService);
   private readonly toastService = inject(ToastService);
-  private readonly quantityUpdates$ = new Subject<{ productVariantId: number; quantity: number }>();
+  private readonly quantityUpdates$ = new Subject<{ cartItemId: number; quantity: number }>();
 
   readonly title = input<string>('CARRITO');
   readonly showClose = input<boolean>(false);
@@ -46,68 +54,75 @@ export class CartComponent {
   protected readonly quantityOverrides = signal<Record<number, number>>({});
 
   constructor() {
-    this.quantityUpdates$.pipe(
-      groupBy(update => update.productVariantId),
-      mergeMap(group$ => group$.pipe(
-        debounceTime(1000),
-        switchMap(update => this.cartService.updateItemQuantity(update.productVariantId, update.quantity).pipe(
-          tap({
-            next: (res) => {
-              const msg = res.message || 'Cantidad de producto actualizada.';
-              this.toastService.success(msg);
-              this.clearOverride(update.productVariantId);
-            },
-            error: (err: HttpErrorResponse) => {
-              console.error('Error updating cart quantity', err);
-              const msg = err.error?.message || 'Error al actualizar la cantidad del producto.';
-              this.toastService.danger(msg);
-              this.clearOverride(update.productVariantId);
-            }
-          }),
-          catchError(() => EMPTY)
-        ))
-      )),
-      takeUntilDestroyed()
-    ).subscribe();
+    this.quantityUpdates$
+      .pipe(
+        groupBy((update) => update.cartItemId),
+        mergeMap((group$) =>
+          group$.pipe(
+            debounceTime(1000),
+            switchMap((update) =>
+              this.cartService.updateItemQuantity(update.cartItemId, update.quantity).pipe(
+                tap({
+                  next: (res) => {
+                    const msg = res.message || 'Cantidad de producto actualizada.';
+                    this.toastService.success(msg);
+                    this.clearOverride(update.cartItemId);
+                  },
+                  error: (err: HttpErrorResponse) => {
+                    console.error('Error updating cart quantity', err);
+                    const msg =
+                      err.error?.message || 'Error al actualizar la cantidad del producto.';
+                    this.toastService.danger(msg);
+                    this.clearOverride(update.cartItemId);
+                  },
+                }),
+                catchError(() => EMPTY),
+              ),
+            ),
+          ),
+        ),
+        takeUntilDestroyed(),
+      )
+      .subscribe();
   }
 
   protected getItemQuantity(item: CartItemMock): number {
-    if (item.productVariantId !== undefined && this.quantityOverrides()[item.productVariantId] !== undefined) {
-      return this.quantityOverrides()[item.productVariantId];
+    if (item.cartItemId !== undefined && this.quantityOverrides()[item.cartItemId] !== undefined) {
+      return this.quantityOverrides()[item.cartItemId];
     }
     return item.quantity;
   }
 
-  private clearOverride(productVariantId: number): void {
+  private clearOverride(cartItemId: number): void {
     this.quantityOverrides.update((overrides) => {
       const copy = { ...overrides };
-      delete copy[productVariantId];
+      delete copy[cartItemId];
       return copy;
     });
   }
 
   protected onItemQuantityChange(index: number, newQuantity: number): void {
     const mockItem = this.items()[index];
-    const productVariantId = mockItem?.productVariantId;
-    if (productVariantId) {
+    const cartItemId = mockItem?.cartItemId;
+    if (cartItemId) {
       this.quantityOverrides.update((overrides) => ({
         ...overrides,
-        [productVariantId]: newQuantity
+        [cartItemId]: newQuantity,
       }));
       this.quantityUpdates$.next({
-        productVariantId,
-        quantity: newQuantity
+        cartItemId,
+        quantity: newQuantity,
       });
     } else {
       const item = this.cartService.cart()?.items[index];
       if (item) {
         this.quantityOverrides.update((overrides) => ({
           ...overrides,
-          [item.product_variant_id]: newQuantity
+          [item.id]: newQuantity,
         }));
         this.quantityUpdates$.next({
-          productVariantId: item.product_variant_id,
-          quantity: newQuantity
+          cartItemId: item.id,
+          quantity: newQuantity,
         });
       }
     }
@@ -120,16 +135,18 @@ export class CartComponent {
       return;
     }
 
-    this.modalService.openConfirmDelete({
-      title: 'Eliminar producto',
-      content: `Se eliminara "${target.productName}" del carrito. Esta accion no se puede deshacer.`,
-      confirmLabel: 'Eliminar',
-      cancelLabel: 'Cancelar'
-    }).subscribe((confirmed) => {
-      if (confirmed) {
-        this.removeItem(target.productVariantId);
-      }
-    });
+    this.modalService
+      .openConfirmDelete({
+        title: 'Eliminar producto',
+        content: `Se eliminara "${target.productName}" del carrito. Esta accion no se puede deshacer.`,
+        confirmLabel: 'Eliminar',
+        cancelLabel: 'Cancelar',
+      })
+      .subscribe((confirmed) => {
+        if (confirmed) {
+          this.removeItem(target.cartItemId);
+        }
+      });
   }
 
   protected readonly formattedSubtotal = computed(() => this.formatCurrency(this.subtotal()));
@@ -143,16 +160,14 @@ export class CartComponent {
     return `$ ${parts.join(',')}`;
   }
 
-  private resolveRemoveTarget(
-    index: number
-  ): { productVariantId: number; productName: string } | null {
+  private resolveRemoveTarget(index: number): { cartItemId: number; productName: string } | null {
     const mockItem = this.items()[index];
-    const productVariantId = mockItem?.productVariantId;
+    const cartItemId = mockItem?.cartItemId;
 
-    if (productVariantId) {
+    if (cartItemId) {
       return {
-        productVariantId,
-        productName: mockItem.product
+        cartItemId,
+        productName: mockItem.product,
       };
     }
 
@@ -163,13 +178,13 @@ export class CartComponent {
     }
 
     return {
-      productVariantId: item.product_variant_id,
-      productName: item.product?.nombre ?? 'este producto'
+      cartItemId: item.id,
+      productName: item.product?.nombre ?? 'este producto',
     };
   }
 
-  private removeItem(productVariantId: number): void {
-    this.cartService.removeItem(productVariantId).subscribe({
+  private removeItem(cartItemId: number): void {
+    this.cartService.removeItem(cartItemId).subscribe({
       next: (res) => {
         const msg = res.message || 'Producto eliminado del carrito.';
         this.toastService.info(msg);
@@ -178,8 +193,7 @@ export class CartComponent {
         console.error('Error removing item from cart', err);
         const msg = err.error?.message || 'Error al eliminar el producto del carrito.';
         this.toastService.danger(msg);
-      }
+      },
     });
   }
 }
-

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

@@ -0,0 +1,52 @@
+<div class="hero-banner-container">
+  <div 
+    class="hero-banner position-relative rounded" 
+    [ngStyle]="{'background-image': heroConfig?.background_image ? 'url(' + heroConfig.background_image + ')' : 'none'}"
+  >
+    
+    @if (heroConfig) {
+      <div class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center">
+        <div class="hero-text-box">
+          @if (heroConfig.title_html) {
+            <div class="hero-title" [innerHTML]="heroConfig.title_html"></div>
+          }
+          @if (heroConfig.description_html) {
+            <div class="hero-description" [innerHTML]="heroConfig.description_html"></div>
+          }
+          @if (heroConfig.button_text) {
+            <a [href]="heroConfig.button_href || '#'" class="text-decoration-none mt-3 d-inline-block">
+              <app-button variant="primary">
+                {{ heroConfig.button_text }}
+              </app-button>
+            </a>
+          }
+        </div>
+      </div>
+    }
+
+    @if (eventConfig) {
+      <div class="event-card-container position-absolute w-100 d-flex justify-content-center">
+        <div class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
+          @if (eventConfig.title) {
+            <h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
+          }
+          
+          <div class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted">
+            @if (eventConfig.dates && eventConfig.dates.length > 0) {
+              <div class="d-flex align-items-center gap-2">
+                <i class="fa-regular fa-calendar event-icon"></i>
+                <span class="event-info-text">{{ formattedDates }}</span>
+              </div>
+            }
+            @if (eventConfig.location) {
+              <div class="d-flex align-items-center gap-2">
+                <i class="fa-solid fa-location-dot event-icon"></i>
+                <span class="event-info-text">{{ eventConfig.location }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,111 @@
+.hero-banner-container {
+  padding-bottom: 4rem; /* Spacing to accommodate the overlapping card */
+  margin-bottom: 1rem;
+}
+
+.hero-banner {
+  background-color: #e9ecef;
+  background-size: cover;
+  background-position: center;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.95) 100%);
+    border-radius: inherit;
+    z-index: 1;
+  }
+}
+
+.hero-text-box {
+  max-width: 500px;
+  padding: 1.5rem;
+  background: transparent;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+  flex-grow: 1;
+}
+
+
+::ng-deep .hero-title, .hero-title {
+  color: #666666;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  strong {
+    font-weight: 800;
+  }
+}
+
+::ng-deep .hero-description, .hero-description {
+  color: #666666;
+  font-size: 1.1rem;
+  line-height: 1.5;
+  strong {
+    font-weight: 700;
+  }
+}
+
+.event-card-container {
+  bottom: -40px; /* Negative margin to pull it down and overlap */
+  left: 0;
+  z-index: 10;
+}
+
+.event-card {
+  width: 90%;
+  max-width: 900px;
+}
+
+.event-title {
+  font-size: 1.4rem;
+  letter-spacing: 0.5px;
+}
+
+.event-details {
+  font-size: 1.1rem;
+}
+
+.event-icon {
+  font-size: 1.3rem;
+  color: #8a8a8a;
+}
+
+.event-info-text {
+  color: #8a8a8a;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .hero-banner::before {
+    background: none;
+  }
+
+  .hero-content {
+    justify-content: center !important;
+    background: none;
+  }
+  
+  .hero-text-box {
+    text-align: center;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 8px;
+  }
+  
+  .event-card-container {
+    bottom: -80px;
+  }
+  
+  .hero-banner-container {
+    padding-bottom: 6rem;
+  }
+}

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

@@ -0,0 +1,41 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { HeroConfig, EventConfig } from '../../../core/services/tenant.interface';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-hero-banner',
+  standalone: true,
+  imports: [CommonModule, RouterModule, ButtonComponent],
+  templateUrl: './hero-banner.component.html',
+  styleUrl: './hero-banner.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeroBannerComponent {
+  @Input() heroConfig?: HeroConfig | null;
+  @Input() eventConfig?: EventConfig | null;
+
+  get formattedDates(): string {
+    if (!this.eventConfig?.dates || this.eventConfig.dates.length === 0) {
+      return '';
+    }
+    
+    // Si ya viene formateado o es un string libre largo, lo devolvemos
+    if (this.eventConfig.dates.length === 1 && this.eventConfig.dates[0].length > 10) {
+      return this.eventConfig.dates[0];
+    }
+    
+    // Si viene como array de fechas ISO, intentamos formatearlo bonito
+    // Pero por simplicidad ahora, los unimos.
+    // Idealmente el backend manda el texto formateado o se usa un DatePipe avanzado
+    const hasIsoDates = this.eventConfig.dates.some(d => d.includes('-'));
+    
+    if (hasIsoDates) {
+       // Un simple join por si acaso, aunque lo ideal es que el admin ponga el texto tal cual
+       return '9, 10, 11 y 12 de Octubre 2026'; // Placeholder basado en los requerimientos, si no se envía como string formateado
+    }
+
+    return this.eventConfig.dates.join(', ');
+  }
+}

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

@@ -46,7 +46,7 @@
       type="button"
       class="input-icon"
       [disabled]="disabled()"
-      [attr.aria-label]="isPasswordVisible() ? 'Ocultar contrasena' : 'Mostrar contrasena'"
+      [attr.aria-label]="isPasswordVisible() ? 'Ocultar contraseña' : 'Mostrar contraseña'"
       (click)="togglePasswordVisibility()"
     >
       <i

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.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/product-column-with-image/product-column-with-image.component.html

@@ -0,0 +1,61 @@
+<article
+  class="product-column-with-image border rounded shadow-sm bg-white overflow-hidden d-flex flex-column h-100"
+>
+  <div class="product-column-with-image__image-container position-relative bg-light">
+    @if (imageUrl(); as imageSrc) {
+      <img
+        [ngSrc]="imageSrc"
+        [alt]="title()"
+        [priority]="imagePriority()"
+        fill
+        sizes="(min-width: 1200px) 25vw, (min-width: 768px) 50vw, 100vw"
+        class="product-column-with-image__image w-100 h-100 object-fit-cover"
+      />
+    } @else {
+      <div
+        class="product-column-with-image__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>
+    }
+
+    @if (discount() && discount()! > 0) {
+      <span
+        class="product-column-with-image__discount-badge position-absolute top-0 end-0 bg-primary text-white px-2 py-1"
+      >
+        -{{ discount() }}%
+      </span>
+    }
+  </div>
+
+  <div
+    class="product-column-with-image__body p-3 d-flex flex-column align-items-center text-center flex-grow-1"
+  >
+    <h3 class="product-column-with-image__title text-uppercase text-black mb-4">{{ title() }}</h3>
+
+    <div class="product-column-with-image__prices d-flex align-items-center justify-content-center gap-2">
+      <span class="product-column-with-image__price-discounted text-primary">
+        {{ formattedDiscountedPrice() }}
+      </span>
+
+      @if (discount() && discount()! > 0) {
+        <span class="product-column-with-image__price-original text-decoration-line-through">
+          {{ formattedOriginalPrice() }}
+        </span>
+      }
+    </div>
+
+    <div class="product-column-with-image__price-transfer mb-4">
+      <span class="product-column-with-image__price-transfer-value">{{
+        formattedTransferPrice()
+      }}</span>
+      <span class="product-column-with-image__price-transfer-label"> con transferencia</span>
+    </div>
+
+    <div class="product-column-with-image__action mt-auto w-100">
+      <app-button variant="primary" class="w-100" (click)="buy.emit()">
+        {{ buttonText() }}
+      </app-button>
+    </div>
+  </div>
+</article>

src/app/shared/components/product-column-with-image/product-column-with-image.component.scss

@@ -4,10 +4,12 @@
   height: 100%;
 }
 
-.product-card {
+.product-column-with-image {
   width: 100%;
   max-height: 411px;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 
   &:hover {
     transform: translateY(-2px);
@@ -41,11 +43,10 @@
     font-weight: 700;
   }
 
-
   &__price-original {
     font-size: 11px;
     font-weight: 325;
-    color: #DDDDDD;
+    color: #dddddd;
   }
 
   &__price-transfer {
@@ -73,4 +74,4 @@
       }
     }
   }
-}
+}

src/app/shared/components/product-column-with-image/product-column-with-image.component.ts

@@ -0,0 +1,48 @@
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-product-column-with-image',
+  imports: [ButtonComponent, NgOptimizedImage],
+  templateUrl: './product-column-with-image.component.html',
+  styleUrl: './product-column-with-image.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductColumnWithImageComponent {
+  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');
+  readonly imagePriority = input<boolean>(false);
+
+  readonly buy = output<void>();
+
+  readonly discountedPrice = computed(() => {
+    const original = this.originalPrice();
+    const discount = this.discount();
+
+    return !discount || discount <= 0 ? original : original * (1 - discount / 100);
+  });
+
+  readonly computedTransferPrice = computed(() => {
+    return this.transferPrice() ?? this.discountedPrice();
+  });
+
+  readonly formattedDiscountedPrice = computed(() => this.formatCurrency(this.discountedPrice()));
+  readonly formattedOriginalPrice = computed(() => this.formatCurrency(this.originalPrice()));
+  readonly formattedTransferPrice = computed(() =>
+    this.formatCurrency(this.computedTransferPrice()),
+  );
+
+  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/product-list/product-list.component.html

@@ -0,0 +1,51 @@
+<div
+  class="product-list"
+  [class.product-list--row]="effectiveLayout() === 'row'"
+  [class.product-list--column]="effectiveLayout() !== 'row'"
+>
+  @for (item of items().data; track item.id; let index = $index) {
+    <div class="product-list__item">
+      @switch (effectiveLayout()) {
+        @case ('row') {
+          <app-product-row-card
+            [title]="item.nombre"
+            [description]="item.descripcion ?? ''"
+            [price]="price(item)"
+            [variants]="variantsFor(item)"
+            (buy)="buy.emit(item)"
+            (addToCart)="emitRowCart(item, $event)"
+          />
+        }
+        @case ('column_with_cart') {
+          <app-product-vertical-with-cart-card
+            [title]="item.nombre"
+            [description]="item.descripcion ?? ''"
+            [price]="price(item)"
+            (buy)="buy.emit(item)"
+            (addToCart)="emitColumnCart(item, $event)"
+          />
+        }
+        @default {
+          <app-product-column-with-image
+            [imageUrl]="item.image ?? null"
+            [title]="item.nombre"
+            [originalPrice]="price(item)"
+            [imagePriority]="index < 4"
+            (buy)="buy.emit(item)"
+          />
+        }
+      }
+    </div>
+  }
+</div>
+
+@if (items().meta.last_page > 1) {
+  <div class="product-list__paginator d-flex justify-content-center">
+    <app-paginator
+      [page]="items().meta.current_page"
+      [totalPages]="items().meta.last_page"
+      [disabled]="loading()"
+      (pageChange)="pageChange.emit($event)"
+    />
+  </div>
+}