feat(checkout): update payment intent payload to use 'transfer_payer_dni' and remove placeholder from DNI input

feat(product-carousel): enhance image loading with optimized attributes and improve layout consistency
style: refactor HTML structure for better readability and maintainability
test(product-detail): add unit tests for product detail resolver and component behavior

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/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

@@ -3,12 +3,14 @@ export interface CartItemProduct {
   imagen: string | null;
 }
 
+export type BuyableType = 'variant' | 'bundle';
+
 export interface CartItem {
   id: number;
   cantidad: number;
   precio_unitario: string;
-  product_id: number;
-  product_variant_id: number;
+  buyable_type: BuyableType;
+  buyable_id: number;
   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,
+        buyable_type: 'variant',
+        buyable_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('variant', 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({
+      buyable_type: 'variant',
+      buyable_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

@@ -4,10 +4,10 @@ import { catchError, map, Observable, tap } from 'rxjs';
 
 import { ApiResponse } from '../api-response.interface';
 import { TenantService } from '../tenant.service';
-import { Cart } from './cart.interface';
+import { BuyableType, 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(
+    buyableType: BuyableType,
+    buyableId: number,
+    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`, { buyable_type: buyableType, buyable_id: buyableId, 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

@@ -29,16 +29,22 @@ export interface ProductAttribute {
   options: ProductAttributeOption[];
 }
 
+export type InventoryPolicy = 'tracked' | 'unlimited';
+
 export interface ProductVariant {
   id: number;
-  cantidad_maxima: number;
+  inventory_policy: InventoryPolicy;
+  cantidad_maxima: number | null;
+  cantidad_vendida: number;
   definitions: Record<string, string>;
   images: string[];
 }
 
 export interface ProductVariantMap {
   variant_id: number;
-  cantidad_maxima: number;
+  inventory_policy: InventoryPolicy;
+  cantidad_maxima: number | null;
+  cantidad_vendida: number;
   attributes: Record<string, string>;
 }
 
@@ -47,4 +53,3 @@ export interface ProductDetail extends Product {
   variants_map: ProductVariantMap[];
   variant: ProductVariant | null;
 }
-

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/store/components/product-attribute-selector/product-attribute-selector.component.spec.ts

@@ -0,0 +1,75 @@
+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('variantsMap', [
+      {
+        variant_id: 1,
+        inventory_policy: 'unlimited',
+        cantidad_maxima: null,
+        cantidad_vendida: 0,
+        attributes: { 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('variantsMap', [
+      {
+        variant_id: 1,
+        inventory_policy: 'tracked',
+        cantidad_maxima: 0,
+        cantidad_vendida: 0,
+        attributes: { size: 'S' },
+      },
+      {
+        variant_id: 2,
+        inventory_policy: 'tracked',
+        cantidad_maxima: 2,
+        cantidad_vendida: 0,
+        attributes: { 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 {
   ProductAttribute,
   ProductAttributeOption,
   ProductVariant,
-  ProductVariantMap
+  ProductVariantMap,
 } from '../../../../core/services/catalog/catalog.interface';
 
 @Component({
@@ -22,7 +22,7 @@ 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[]>([]);
@@ -44,28 +44,36 @@ 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.attributes,
+          );
           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.attributes,
+                );
+                if (!vAttrValue || this.normalizeText(vAttrValue) !== selectedNormalized) {
+                  return false;
                 }
-             }
+              }
+            }
           }
           return true;
         });
@@ -85,7 +93,7 @@ export class ProductAttributeSelectorComponent {
     effect(() => {
       const attributes = this.attributes();
       const defaultVariant = this.defaultVariant();
-      
+
       untracked(() => {
         this.initializeSelections(attributes, defaultVariant);
       });
@@ -95,24 +103,27 @@ export class ProductAttributeSelectorComponent {
       const selections = this.selectedAttributeOptions();
       const variantsMap = this.variantsMap();
       const attributes = this.attributes();
-      
+
       untracked(() => {
-         this.emitMatchingVariant(selections, variantsMap, attributes);
+        this.emitMatchingVariant(selections, variantsMap, 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 +135,10 @@ export class ProductAttributeSelectorComponent {
     return this.findFirstHexValue(option.metadata) ?? '#D9D9D9';
   }
 
-  private initializeSelections(attributes: ProductAttribute[], defaultVariant: ProductVariant | null): void {
+  private initializeSelections(
+    attributes: ProductAttribute[],
+    defaultVariant: ProductVariant | null,
+  ): void {
     const selections: Record<number, number> = {};
 
     for (const attribute of attributes) {
@@ -139,7 +153,7 @@ export class ProductAttributeSelectorComponent {
 
   private findDefaultOptionId(
     attribute: ProductAttribute,
-    variant: ProductVariant | null
+    variant: ProductVariant | null,
   ): number | null {
     if (!variant) {
       return null;
@@ -152,7 +166,7 @@ export class ProductAttributeSelectorComponent {
 
     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 +174,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 +182,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 +206,10 @@ export class ProductAttributeSelectorComponent {
       .toLowerCase();
   }
 
+  private isVariantAvailable(variant: ProductVariantMap): boolean {
+    return variant.inventory_policy === 'unlimited' || (variant.cantidad_maxima ?? 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/);
@@ -223,7 +241,7 @@ export class ProductAttributeSelectorComponent {
   private emitMatchingVariant(
     selections: Record<number, number>,
     variantsMap: ProductVariantMap[],
-    attributes: ProductAttribute[]
+    attributes: ProductAttribute[],
   ): void {
     if (attributes.length === 0 || variantsMap.length === 0) {
       this.variantChange.emit(null);
@@ -235,12 +253,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 +267,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 = 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;
       });
     });
 

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,119 @@
-<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()"
+                [variantsMap]="prod.variants_map"
+                [defaultVariant]="prod.variant"
+                (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,12 +1,8 @@
 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';
@@ -14,6 +10,10 @@ import { CatalogService } from '../../../../core/services/catalog/catalog.servic
 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 = {
@@ -29,10 +29,10 @@ describe('ProductDetailPageComponent', () => {
     images: ['https://example.com/image.png'],
     attributes: [],
     variants_map: [],
-    variant: null
+    variant: null,
   };
 
-  let paramMapSubject: BehaviorSubject<any>;
+  let routeDataSubject: BehaviorSubject<{ productDetailData: ProductDetailResolvedData }>;
   let catalogServiceStub: any;
   let routerStub: any;
   let cartServiceStub: any;
@@ -40,10 +40,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 +48,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))
+      getProducto: 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 +77,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: ProductDetail): 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.getProducto).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 +149,39 @@ 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 = {
       ...mockProduct,
       images: ['https://example.com/product.png'],
       variant: {
         id: 123,
+        inventory_policy: 'tracked',
         cantidad_maxima: 10,
+        cantidad_vendida: 0,
         images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
-        definitions: {}
-      }
+        definitions: {},
+      },
     };
-    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 = {
       ...mockProduct,
       images: ['https://example.com/product.png'],
-      variant: null
+      variant: null,
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -167,9 +195,9 @@ describe('ProductDetailPageComponent', () => {
     const detailProduct: ProductDetail = {
       ...mockProduct,
       images: [],
-      variant: null
+      variant: null,
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -196,16 +224,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 +248,31 @@ 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: {
         id: 123,
+        inventory_policy: 'tracked',
         cantidad_maxima: 10,
+        cantidad_vendida: 0,
         images: ['https://example.com/variant1.png'],
         definitions: {
           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('');
   });
 
@@ -281,17 +313,19 @@ describe('ProductDetailPageComponent', () => {
 
     fixture.componentInstance['selectedVariant'].set({
       variant_id: 1,
+      inventory_policy: 'tracked',
       cantidad_maxima: 10,
-      attributes: {}
+      cantidad_vendida: 0,
+      attributes: {},
     });
     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 +350,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 +361,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 +372,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();
@@ -357,19 +391,23 @@ describe('ProductDetailPageComponent', () => {
       ...mockProduct,
       variant: {
         id: 123,
+        inventory_policy: 'tracked',
         cantidad_maxima: 5,
+        cantidad_vendida: 0,
         images: [],
-        definitions: {}
+        definitions: {},
       },
       variants_map: [
         {
           variant_id: 123,
+          inventory_policy: 'tracked',
           cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          cantidad_vendida: 0,
+          attributes: {},
+        },
+      ],
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -382,14 +420,14 @@ describe('ProductDetailPageComponent', () => {
 
     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('variant', 123, 3);
     expect(toastServiceStub.success).toHaveBeenCalledWith('Producto agregado al carrito');
   });
 
@@ -398,19 +436,23 @@ describe('ProductDetailPageComponent', () => {
       ...mockProduct,
       variant: {
         id: 123,
+        inventory_policy: 'tracked',
         cantidad_maxima: 5,
+        cantidad_vendida: 0,
         images: [],
-        definitions: {}
+        definitions: {},
       },
       variants_map: [
         {
           variant_id: 123,
+          inventory_policy: 'tracked',
           cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          cantidad_vendida: 0,
+          attributes: {},
+        },
+      ],
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
     cartServiceStub.addItem.mockReturnValue(throwError(() => new Error('Failed to add')));
 
     await configureTestingModule();
@@ -422,13 +464,82 @@ describe('ProductDetailPageComponent', () => {
 
     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 = {
+      variant_id: 321,
+      inventory_policy: 'unlimited' as const,
+      cantidad_maxima: null,
+      cantidad_vendida: 10,
+      attributes: {},
+    };
+    resolveProduct({
+      ...mockProduct,
+      variant: {
+        id: 321,
+        inventory_policy: 'unlimited',
+        cantidad_maxima: null,
+        cantidad_vendida: 10,
+        images: [],
+        definitions: {},
+      },
+      variants_map: [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 = {
+      variant_id: 654,
+      inventory_policy: 'tracked' as const,
+      cantidad_maxima: 0,
+      cantidad_vendida: 5,
+      attributes: {},
+    };
+    resolveProduct({
+      ...mockProduct,
+      variant: {
+        id: 654,
+        inventory_policy: 'tracked',
+        cantidad_maxima: 0,
+        cantidad_vendida: 5,
+        images: [],
+        definitions: {},
+      },
+      variants_map: [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
+  ProductVariantMap,
 } from '../../../../core/services/catalog/catalog.interface';
 import { ProductCarouselComponent } from '../../components/product-carousel/product-carousel.component';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { ProductAttributeSelectorComponent } from '../../components/product-attribute-selector/product-attribute-selector.component';
 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);
@@ -82,18 +80,26 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
   protected readonly error = signal<string | null>(null);
   protected readonly selectedVariant = signal<ProductVariantMap | null>(null);
   protected readonly quantity = signal(1);
+  protected readonly selectedVariantMax = computed<number | null>(() => {
+    const variant = this.selectedVariant();
+    return variant ? variant.cantidad_maxima : 1;
+  });
+  protected readonly selectedVariantAvailable = computed(() => {
+    const variant = this.selectedVariant();
+    return variant !== null && this.isVariantAvailable(variant);
+  });
   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 +119,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 +135,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({
       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 +151,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_map: currentProduct.variants_map.filter((v) => v.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: ProductDetail, resetQuantity: boolean): void {
+    this.product.set(prod);
+    const matchingVariant =
+      prod.variants_map.find((v) => v.variant_id === prod.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(['/']);
   }
@@ -209,7 +211,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     }
 
     this.selectedVariant.set(variant);
-    if (variant && this.quantity() > variant.cantidad_maxima) {
+    if (variant && variant.cantidad_maxima !== null && this.quantity() > variant.cantidad_maxima) {
       this.quantity.set(Math.max(1, variant.cantidad_maxima));
     }
 
@@ -219,17 +221,15 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     }
   }
 
-
-
   protected addToCart(): void {
     const variant = this.selectedVariant();
-    if (!variant) {
+    if (!variant || !this.isVariantAvailable(variant)) {
       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('variant', variant.variant_id, this.quantity()).subscribe({
       next: (res) => {
         const msg = res.message || 'Producto agregado al carrito';
         this.toastService.success(msg);
@@ -239,23 +239,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: ProductVariantMap): boolean {
+    return variant.inventory_policy === 'unlimited' || (variant.cantidad_maxima ?? 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 +310,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,91 @@
+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 { ProductDetail } 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: ProductDetail = {
+    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: [],
+    attributes: [],
+    variants_map: [],
+    variant: null,
+  };
+
+  let catalogServiceStub: { getProducto: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    catalogServiceStub = {
+      getProducto: 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.getProducto).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.getProducto).not.toHaveBeenCalled();
+  });
+
+  it('returns an error state when the request fails', async () => {
+    catalogServiceStub.getProducto.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 { ProductDetail } 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: ProductDetail | 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)
+    .getProducto(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,51 @@
-<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)"
+<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; let index = $index) {
+          <div class="col">
+            <app-product-card
+              [title]="product.title"
+              [originalPrice]="product.originalPrice"
+              [discount]="product.discount"
+              [transferPrice]="product.transferPrice"
+              [imageUrl]="product.imageUrl"
+              [imagePriority]="index < priorityImageCount"
+              (buy)="onBuyProduct(product.id)"
             />
           </div>
         }
       </div>
-    </app-store-section>
+    }
+
+    @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>
-</section>
+</app-store-section>

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

@@ -1,16 +1,21 @@
 import { TestBed } from '@angular/core/testing';
-import { Subject, of, throwError } from 'rxjs';
+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 { CatalogService } from '../../../../core/services/catalog/catalog.service';
 import { StoreHomePageComponent } from './store-home-page.component';
+import {
+  STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+  StoreHomeProductsResolvedData,
+} from './store-home-page.resolver';
 
 function createPaginatedResponse(
   products: Product[],
   currentPage: number,
-  lastPage: number
+  lastPage: number,
 ): ApiPaginatedResponse<Product[]> {
   return {
     data: products,
@@ -22,14 +27,34 @@ function createPaginatedResponse(
       path: '/productos',
       per_page: 12,
       to: products.length || null,
-      total: products.length
+      total: products.length,
     },
     links: {
       first: '/productos?page=1',
       last: `/productos?page=${lastPage}`,
       prev: currentPage > 1 ? `/productos?page=${currentPage - 1}` : null,
-      next: currentPage < lastPage ? `/productos?page=${currentPage + 1}` : null
-    }
+      next: currentPage < lastPage ? `/productos?page=${currentPage + 1}` : null,
+    },
+  };
+}
+
+function createResolvedData(
+  response: ApiPaginatedResponse<Product[]>,
+): StoreHomeProductsResolvedData {
+  return {
+    response,
+    error: null,
+  };
+}
+
+function provideActivatedRoute(productsData: StoreHomeProductsResolvedData) {
+  return {
+    provide: ActivatedRoute,
+    useValue: {
+      snapshot: {
+        data: { productsData },
+      },
+    },
   };
 }
 
@@ -43,9 +68,9 @@ describe('StoreHomePageComponent', () => {
       nombre: 'Auriculares Bluetooth',
       descripcion: 'Auriculares bluetooth de prueba',
       precio: '24999',
-      category: 'Tecnología',
+      category: 'Tecnologia',
       brand: null,
-      images: []
+      images: ['/catalog/auriculares.jpg'],
     },
     {
       id: 2,
@@ -53,31 +78,32 @@ describe('StoreHomePageComponent', () => {
       brand_id: null,
       slug: 'teclado-mecanico',
       nombre: 'Teclado Mecanico',
-      descripcion: 'Teclado mecánico de prueba',
+      descripcion: 'Teclado mecanico de prueba',
       precio: '18999',
-      category: 'Tecnología',
+      category: 'Tecnologia',
       brand: null,
-      images: []
-    }
+      images: [],
+    },
   ];
 
   beforeEach(() => {
     vi.restoreAllMocks();
   });
 
-  it('loads page 1 on init, renders the products title and the fetched product cards', async () => {
+  it('renders the products resolved by the route before component init', async () => {
     const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse(pageOneProducts, 1, 3)))
+      getProductos: vi.fn(),
     };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
+        provideActivatedRoute(createResolvedData(createPaginatedResponse(pageOneProducts, 1, 3))),
         {
           provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -85,51 +111,52 @@ describe('StoreHomePageComponent', () => {
 
     const element = fixture.nativeElement as HTMLElement;
 
-    expect(catalogServiceStub.getProductos).toHaveBeenCalledWith({ page: 1 });
+    expect(catalogServiceStub.getProductos).not.toHaveBeenCalled();
     expect(element.querySelector('.store-section__title')?.textContent?.trim()).toBe('Productos');
     expect(element.querySelectorAll('app-product-card')).toHaveLength(2);
     expect(element.textContent).toContain('Auriculares Bluetooth');
     expect(element.textContent).toContain('Teclado Mecanico');
-    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/3');
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe(
+      '1/3',
+    );
+    expect(element.querySelector('img')?.getAttribute('fetchpriority')).toBe('high');
   });
 
   it('requests the next page when the paginator emits a page change', async () => {
     const catalogServiceStub = {
-      getProductos: vi
-        .fn()
-        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-        .mockReturnValueOnce(
-          of(
-            createPaginatedResponse(
-              [
-                {
-                  id: 3,
-                  category_id: 12,
-                  brand_id: null,
-                  slug: 'mouse-gamer',
-                  nombre: 'Mouse Gamer',
-                  descripcion: 'Mouse gamer de prueba',
-                  precio: '15999',
-                  category: 'Tecnología',
-                  brand: null,
-                  images: []
-                }
-              ],
-              2,
-              3
-            )
-          )
-        )
+      getProductos: vi.fn().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: 'Tecnologia',
+                brand: null,
+                images: [],
+              },
+            ],
+            2,
+            3,
+          ),
+        ),
+      ),
     };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
+        provideActivatedRoute(createResolvedData(createPaginatedResponse(pageOneProducts, 1, 3))),
         {
           provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -139,29 +166,29 @@ describe('StoreHomePageComponent', () => {
     (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.getProductos).toHaveBeenCalledTimes(1);
+    expect(catalogServiceStub.getProductos).toHaveBeenCalledWith({ page: 2 });
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe(
+      '2/3',
+    );
     expect(element.textContent).toContain('Mouse Gamer');
   });
 
   it('disables the paginator while a new page request is in flight', async () => {
     const nextPageSubject = new Subject<ApiPaginatedResponse<Product[]>>();
     const catalogServiceStub = {
-      getProductos: vi
-        .fn()
-        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-        .mockReturnValueOnce(nextPageSubject.asObservable())
+      getProductos: vi.fn().mockReturnValueOnce(nextPageSubject.asObservable()),
     };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
+        provideActivatedRoute(createResolvedData(createPaginatedResponse(pageOneProducts, 1, 3))),
         {
           provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -173,8 +200,8 @@ describe('StoreHomePageComponent', () => {
 
     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...');
 
@@ -184,24 +211,25 @@ describe('StoreHomePageComponent', () => {
 
     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)))
+      getProductos: vi.fn(),
     };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
+        provideActivatedRoute(createResolvedData(createPaginatedResponse([], 1, 1))),
         {
           provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -211,21 +239,26 @@ describe('StoreHomePageComponent', () => {
 
     expect(element.textContent).toContain('No hay productos disponibles en este momento.');
     expect(element.querySelector('app-paginator')).toBeNull();
+    expect(catalogServiceStub.getProductos).not.toHaveBeenCalled();
   });
 
-  it('shows an error message when the catalog request fails', async () => {
+  it('shows an error message when the route resolver cannot load the catalog', async () => {
     const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(throwError(() => new Error('boom')))
+      getProductos: vi.fn(),
     };
 
     await TestBed.configureTestingModule({
       imports: [StoreHomePageComponent],
       providers: [
+        provideActivatedRoute({
+          response: null,
+          error: STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+        }),
         {
           provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
+          useValue: catalogServiceStub,
+        },
+      ],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(StoreHomePageComponent);
@@ -235,5 +268,6 @@ describe('StoreHomePageComponent', () => {
 
     expect(element.textContent).toContain('No pudimos cargar los productos en este momento.');
     expect(element.querySelectorAll('app-product-card')).toHaveLength(0);
+    expect(catalogServiceStub.getProductos).not.toHaveBeenCalled();
   });
 });

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

@@ -1,12 +1,27 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, inject, signal } from '@angular/core';
-import { Router } from '@angular/router';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  OnInit,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
+import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.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 { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
+import { HeroBannerComponent } from '../../../../shared/components/hero-banner/hero-banner.component';
+import { TenantService } from '../../../../core/services/tenant.service';
+import {
+  STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+  StoreHomeProductsResolvedData,
+} from './store-home-page.resolver';
 
 interface StoreHomeProductCardViewModel {
   id: number;
@@ -19,17 +34,22 @@ interface StoreHomeProductCardViewModel {
 
 @Component({
   selector: 'app-store-home-page',
-  imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent],
+  imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent, 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 catalogService = inject(CatalogService);
+  private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
+  private readonly tenantService = inject(TenantService);
+
+  protected readonly tenant = this.tenantService.tenant;
 
   private activeRequestId = 0;
   private productsRequestSubscription: Subscription | null = null;
+  protected readonly priorityImageCount = 4;
 
   protected readonly currentPage = signal(1);
   protected readonly products = signal<Product[]>([]);
@@ -44,11 +64,21 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
       originalPrice: this.parseProductPrice(product.precio),
       discount: null,
       transferPrice: null,
-      imageUrl: product.images?.[0] ?? null
-    }))
+      imageUrl: product.images?.[0] ?? null,
+    })),
   );
 
   ngOnInit(): void {
+    const resolvedData = this.route.snapshot.data['productsData'] as
+      | StoreHomeProductsResolvedData
+      | undefined;
+
+    if (resolvedData) {
+      this.applyResolvedData(resolvedData);
+
+      return;
+    }
+
     this.loadProducts(1);
   }
 
@@ -82,9 +112,7 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
           return;
         }
 
-        this.products.set(response.data ?? []);
-        this.currentPage.set(response.meta.current_page);
-        this.totalPages.set(response.meta.last_page);
+        this.applyProductsResponse(response);
       },
       error: () => {
         if (requestId !== this.activeRequestId) {
@@ -94,7 +122,7 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
         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);
       },
       complete: () => {
         if (requestId !== this.activeRequestId) {
@@ -102,10 +130,33 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
         }
 
         this.loading.set(false);
-      }
+      },
     });
   }
 
+  private applyResolvedData(resolvedData: StoreHomeProductsResolvedData): void {
+    if (resolvedData.error) {
+      this.products.set([]);
+      this.totalPages.set(0);
+      this.loading.set(false);
+      this.error.set(resolvedData.error);
+
+      return;
+    }
+
+    if (resolvedData.response) {
+      this.applyProductsResponse(resolvedData.response);
+      this.loading.set(false);
+      this.error.set(null);
+    }
+  }
+
+  private applyProductsResponse(response: ApiPaginatedResponse<Product[]>): void {
+    this.products.set(response.data ?? []);
+    this.currentPage.set(response.meta.current_page);
+    this.totalPages.set(response.meta.last_page);
+  }
+
   private parseProductPrice(price: string): number {
     const parsedPrice = Number(price);
 

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

@@ -0,0 +1,33 @@
+import { inject } from '@angular/core';
+import { ResolveFn } from '@angular/router';
+import { catchError, map, of } from 'rxjs';
+
+import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
+import { Product } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+
+export const STORE_HOME_PRODUCTS_ERROR_MESSAGE = 'No pudimos cargar los productos en este momento.';
+
+export interface StoreHomeProductsResolvedData {
+  response: ApiPaginatedResponse<Product[]> | null;
+  error: string | null;
+}
+
+export const storeHomeProductsResolver: ResolveFn<StoreHomeProductsResolvedData> = () => {
+  return inject(CatalogService)
+    .getProductos({ page: 1 })
+    .pipe(
+      map(
+        (response): StoreHomeProductsResolvedData => ({
+          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 { storeHomeProductsResolver } 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: {
+          productsData: storeHomeProductsResolver,
+        },
       },
       {
         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.scss

@@ -50,11 +50,15 @@
 }
 
 .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;
 }

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"
@@ -46,6 +58,3 @@
     </div>
   </footer>
 </section>
-
-
-

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.
     }
@@ -42,38 +36,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();
 
@@ -81,10 +75,9 @@ describe('CartComponent', () => {
 
     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 +94,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 +148,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 +214,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,20 +1,32 @@
-<div class="product-card border rounded shadow-sm bg-white overflow-hidden d-flex flex-column h-100">
+<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" />
+    @if (imageUrl(); as imageSrc) {
+      <img
+        [ngSrc]="imageSrc"
+        [alt]="title()"
+        [priority]="imagePriority()"
+        fill
+        sizes="(min-width: 1200px) 25vw, (min-width: 768px) 50vw, 100vw"
+        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>
+      <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>
+      <span
+        class="product-card__discount-badge position-absolute top-0 end-0 bg-primary text-white px-2 py-1"
+      >
+        -{{ discount() }}%
+      </span>
     }
   </div>
 
@@ -26,11 +38,15 @@
     <!-- 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>
+      <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>
+        <span class="product-card__price-original text-decoration-line-through">{{
+          formattedOriginalPrice()
+        }}</span>
       }
     </div>
 
@@ -47,4 +63,4 @@
       </app-button>
     </div>
   </div>
-</div>
+</div>

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

@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
 import { ButtonComponent } from '../button/button.component';
 
 @Component({
   selector: 'app-product-card',
   standalone: true,
-  imports: [ButtonComponent],
+  imports: [ButtonComponent, NgOptimizedImage],
   templateUrl: './product-card.component.html',
   styleUrl: './product-card.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductCardComponent {
   // Configurable inputs
@@ -17,6 +18,7 @@ export class ProductCardComponent {
   readonly discount = input<number | null>(null);
   readonly transferPrice = input<number | null>(null);
   readonly buttonText = input<string>('Comprar');
+  readonly imagePriority = input<boolean>(false);
 
   // Interactive events
   readonly buy = output<void>();

src/app/shared/components/quantity-selector/quantity-selector.component.html

@@ -1,4 +1,8 @@
-<div class="quantity-selector d-inline-flex align-items-center overflow-hidden rounded" [class.quantity-selector--small]="size() === 'small'" aria-label="Selector de cantidad">
+<div
+  class="quantity-selector d-inline-flex align-items-center overflow-hidden rounded"
+  [class.quantity-selector--small]="size() === 'small'"
+  aria-label="Selector de cantidad"
+>
   <button
     type="button"
     class="quantity-selector__button border-0 p-0 fw-bold lh-1"
@@ -9,13 +13,16 @@
     -
   </button>
 
-  <span class="quantity-selector__value flex-grow-1 min-w-0 text-center fw-bold lh-1 user-select-none">{{ quantity() }}</span>
+  <span
+    class="quantity-selector__value flex-grow-1 min-w-0 text-center fw-bold lh-1 user-select-none"
+    >{{ quantity() }}</span
+  >
 
   <button
     type="button"
     class="quantity-selector__button border-0 p-0 fw-bold lh-1"
     aria-label="Aumentar cantidad"
-    [disabled]="quantity() >= max()"
+    [disabled]="atMaximum()"
     (click)="onIncrease()"
   >
     +

src/app/shared/components/quantity-selector/quantity-selector.component.spec.ts

@@ -0,0 +1,55 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { QuantitySelectorComponent } from './quantity-selector.component';
+
+describe('QuantitySelectorComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [QuantitySelectorComponent],
+    }).compileComponents();
+  });
+
+  it('stops increasing when it reaches a numeric maximum', () => {
+    const fixture = TestBed.createComponent(QuantitySelectorComponent);
+    fixture.componentRef.setInput('max', 2);
+    fixture.detectChanges();
+
+    const increaseButton = fixture.nativeElement.querySelector(
+      'button:last-child',
+    ) as HTMLButtonElement;
+    increaseButton.click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.quantity()).toBe(2);
+    expect(increaseButton.disabled).toBe(true);
+  });
+
+  it('keeps increasing when maximum is null', () => {
+    const fixture = TestBed.createComponent(QuantitySelectorComponent);
+    fixture.componentRef.setInput('max', null);
+    fixture.detectChanges();
+
+    const increaseButton = fixture.nativeElement.querySelector(
+      'button:last-child',
+    ) as HTMLButtonElement;
+    increaseButton.click();
+    increaseButton.click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.quantity()).toBe(3);
+    expect(increaseButton.disabled).toBe(false);
+  });
+
+  it('does not decrease below the configured minimum', () => {
+    const fixture = TestBed.createComponent(QuantitySelectorComponent);
+    fixture.detectChanges();
+
+    const decreaseButton = fixture.nativeElement.querySelector(
+      'button:first-child',
+    ) as HTMLButtonElement;
+
+    expect(decreaseButton.disabled).toBe(true);
+    expect(fixture.componentInstance.quantity()).toBe(1);
+  });
+});

src/app/shared/components/quantity-selector/quantity-selector.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';
 
 @Component({
   selector: 'app-quantity-selector',
@@ -6,14 +6,19 @@ import { ChangeDetectionStrategy, Component, input, model, output } from '@angul
   imports: [],
   templateUrl: './quantity-selector.component.html',
   styleUrl: './quantity-selector.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class QuantitySelectorComponent {
   readonly quantity = model<number>(1);
   readonly min = input<number>(1);
-  readonly max = input<number>(100);
+  readonly max = input<number | null>(100);
   readonly size = input<'small' | 'medium'>('medium');
 
+  protected readonly atMaximum = computed(() => {
+    const max = this.max();
+    return max !== null && this.quantity() >= max;
+  });
+
   readonly increase = output<void>();
   readonly decrease = output<void>();
 
@@ -25,7 +30,7 @@ export class QuantitySelectorComponent {
   }
 
   protected onIncrease(): void {
-    if (this.quantity() < this.max()) {
+    if (!this.atMaximum()) {
       this.quantity.set(this.quantity() + 1);
       this.increase.emit();
     }

src/styles.scss

@@ -33,4 +33,27 @@ label {
   margin-bottom: 0.375rem;
   font-size: 13px;
   font-weight: 400;
-}
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-size: 13px;
+    color: #888;
+    font-weight: normal;
+    margin-bottom: 0;
+  }
+
+  .required {
+    color: var(--color-danger, #dc3545);
+    margin-left: 2px;
+  }
+
+  .error {
+    font-size: 0.75rem;
+    color: var(--color-danger, #dc3545);
+  }
+}