feat(checkout-page): refactor payment component tests to use signals and improve method delegation

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/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/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/checkout.service.ts

@@ -16,6 +16,52 @@ 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;
+  payer_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 +82,17 @@ 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 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`, {
+        method,
+        ...(method === 'transfer' ? { payer_dni: payerDni } : {})
+      })
     );
     if (!response) {
       throw new Error('Error al generar la intención de pago.');
@@ -62,20 +116,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/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>
@@ -12,14 +12,7 @@
 
         <app-step label="Pago">
           <app-checkout-payment-step
-            [paymentMethods]="paymentMethods"
-            [selectedPaymentMethod]="selectedPaymentMethod()"
-            [copiedTransferField]="copiedTransferField()"
-            [transferAccount]="transferAccount()"
-            [isGeneratingIntent]="isPaymentLoading()"
-            [qrData]="qrData()"
-            (paymentMethodChange)="selectPaymentMethod($event)"
-            (copyTransferValue)="copyTransferValue($event.field, $event.value)"
+            [purchaseId]="createdPurchaseId()"
             (cancelStep)="onCancel()"
             (complete)="onComplete()"
           />
@@ -37,4 +30,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,4 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit, signal, untracked, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal, ViewChild } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { startWith } from 'rxjs';
@@ -7,14 +7,13 @@ import { CartService } from '../../../../core/services/cart/cart.service';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { CheckoutService, CreatePurchasePayload } from '../../../../core/services/checkout.service';
 import { AuthService } from '../../../../core/services/auth/auth.service';
-import { BankAccount } from '../../../../core/services/tenant.interface';
 import { CartItem } from '../../../../core/services/cart/cart.interface';
 import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
 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 } from './checkout-page.models';
 
 @Component({
   selector: 'app-checkout-page',
@@ -63,41 +62,10 @@ export class CheckoutPageComponent implements OnInit {
   });
 
   protected readonly isStep1Valid = signal(this.form.valid);
-  protected readonly paymentMethods: ReadonlyArray<PaymentMethodOption> = [
-    { id: 'qr', label: 'QR' },
-    { id: 'transfer', label: 'Transferencia' },
-    { 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 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 qrData = signal<string | null>(null);
 
   constructor() {
-    effect(() => {
-      // 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) {
-          // Trigger payment intent generation when cart changes and we are on the payment step
-          void this.selectPaymentMethod(this.selectedPaymentMethod());
-        }
-      });
-    });
-
     this.form.statusChanges
       .pipe(startWith(this.form.status))
       .subscribe(() => this.isStep1Valid.set(this.form.valid));
@@ -176,9 +144,6 @@ export class CheckoutPageComponent implements OnInit {
       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);
@@ -192,55 +157,6 @@ export class CheckoutPageComponent implements OnInit {
     void this.router.navigate(['/']);
   }
 
-  protected async selectPaymentMethod(method: PaymentMethod): Promise<void> {
-    this.selectedPaymentMethod.set(method);
-
-    const purchaseId = this.createdPurchaseId();
-    const tenant = this.tenantService.tenant();
-
-    if (!purchaseId || !tenant || method === 'telepagos') {
-      return;
-    }
-
-    this.isGeneratingIntent.set(true);
-
-    try {
-      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) {
-        this.transferAccount.set({
-          titular: response.transfer_data.titular,
-          entidad: response.transfer_data.entidad,
-          cvu: response.transfer_data.cvu,
-          alias: response.transfer_data.alias
-        });
-      }
-    } catch (error) {
-      console.error('Failed to generate payment intent:', error);
-    } finally {
-      this.isGeneratingIntent.set(false);
-    }
-  }
-
-  protected async copyTransferValue(field: TransferField, value: string): Promise<void> {
-    if (!globalThis.navigator?.clipboard?.writeText) return;
-
-    try {
-      await globalThis.navigator.clipboard.writeText(value);
-      this.copiedTransferField.set(field);
-
-      setTimeout(() => {
-        if (this.copiedTransferField() === field) {
-          this.copiedTransferField.set(null);
-        }
-      }, 1800);
-    } catch {
-      this.copiedTransferField.set(null);
-    }
-  }
-
   protected async onComplete(): Promise<void> {
     const purchaseId = this.createdPurchaseId();
     const tenant = this.tenantService.tenant();

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

@@ -4,17 +4,17 @@
       <h2 id="payment-methods-title" class="payment-methods__title">Selecciona el metodo de pago</h2>
 
       <div class="payment-methods__list" role="radiogroup" aria-label="Metodo de pago">
-        @for (method of paymentMethods(); track method.id) {
+        @for (method of payment.paymentMethods; track method.id) {
           <label
             class="payment-method"
-            [class.is-selected]="selectedPaymentMethod() === method.id"
+            [class.is-selected]="payment.selectedMethod() === method.id"
           >
             <input
               class="payment-method__radio"
               type="radio"
               name="payment-method"
               [value]="method.id"
-              [checked]="selectedPaymentMethod() === method.id"
+              [checked]="payment.selectedMethod() === method.id"
               (change)="selectPaymentMethod(method.id)"
             />
 
@@ -35,95 +35,24 @@
     </section>
 
     <section class="payment-panel d-flex justify-content-end" aria-live="polite">
-      @if (isGeneratingIntent()) {
+      @if (payment.isLoading() && payment.selectedMethod() !== 'transfer') {
         <div class="payment-panel__card" style="text-align: center; padding: 2rem;">
           <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>
-      } @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>
+      } @else if (payment.selectedMethod() === 'qr') {
+        <app-qr-payment-content [qrData]="payment.qrData()" />
+      } @else if (payment.selectedMethod() === 'transfer') {
+        <app-transfer-payment-content
+          [transferAccount]="payment.transferAccount()"
+          [copiedTransferField]="payment.copiedTransferField()"
+          [isLoading]="payment.isLoading()"
+          [requestError]="payment.transferRequestError()"
+          [initialPayerDni]="payment.payerDni()"
+          (copyTransferValue)="requestCopy($event.field, $event.value)"
+          (requestTransferData)="requestTransfer($event)"
+        />
       } @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-telepagos-payment-content />
       }
     </section>
   </div>
@@ -143,11 +72,10 @@
       type="button"
       hostClass="checkout-payment__action-btn"
       buttonClass="w-100"
-      [disabled]="isGeneratingIntent()"
+      [disabled]="!payment.canComplete()"
       (click)="complete.emit()"
     >
       Finalizar compra
     </app-button>
   </div>
 </div>
-

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

@@ -1,3 +1,5 @@
+@use './components/payment-methods/payment-panel' as payment-panel;
+
 .checkout-payment {
   display: grid;
   gap: 1rem;
@@ -110,197 +112,5 @@
 
 .payment-panel {
   min-width: 0;
-  &__card {
-    width: 100%;
-    max-width: 290px;
-    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;
-  }
-
-  &__title {
-    max-width: 18rem;
-    margin: 0;
-    color: #8a8a8a;
-    font-size: 13px;
-    font-weight: 700;
-    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;
-  }
+  @include payment-panel.card;
 }
-
-.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.spec.ts

@@ -0,0 +1,102 @@
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+
+import { CheckoutPaymentFacade } from './checkout-payment.facade';
+import { CheckoutPaymentStepComponent } from './checkout-payment-step.component';
+import { PaymentMethod, PaymentMethodOption, TransferAccount } from './checkout-page.models';
+
+describe('CheckoutPaymentStepComponent', () => {
+  const paymentMethods: ReadonlyArray<PaymentMethodOption> = [
+    { id: 'qr', label: 'QR' },
+    { id: 'transfer', label: 'Transferencia' },
+    { id: 'telepagos', label: 'TelePagos' }
+  ];
+  const transferAccount: TransferAccount = {
+    titular: 'Titular Test',
+    entidad: 'Entidad Test',
+    cvu: '0000000000000000000000',
+    alias: 'alias.test'
+  };
+
+  let fixture: ComponentFixture<CheckoutPaymentStepComponent>;
+  let payment: {
+    paymentMethods: ReadonlyArray<PaymentMethodOption>;
+    selectedMethod: ReturnType<typeof signal<PaymentMethod>>;
+    copiedTransferField: ReturnType<typeof signal<'cvu' | 'alias' | null>>;
+    transferAccount: ReturnType<typeof signal<TransferAccount | null>>;
+    payerDni: ReturnType<typeof signal<string>>;
+    transferRequestError: ReturnType<typeof signal<string | null>>;
+    qrData: ReturnType<typeof signal<string | null>>;
+    isLoading: ReturnType<typeof signal<boolean>>;
+    canComplete: ReturnType<typeof signal<boolean>>;
+    setPurchaseId: ReturnType<typeof vi.fn>;
+    selectMethod: ReturnType<typeof vi.fn>;
+    copyTransferValue: ReturnType<typeof vi.fn>;
+    requestTransferData: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(async () => {
+    payment = {
+      paymentMethods,
+      selectedMethod: signal<PaymentMethod>('qr'),
+      copiedTransferField: signal<'cvu' | 'alias' | null>(null),
+      transferAccount: signal<TransferAccount | null>(transferAccount),
+      payerDni: signal('12345678'),
+      transferRequestError: signal<string | null>(null),
+      qrData: signal<string | null>('qr-test'),
+      isLoading: signal(false),
+      canComplete: signal(true),
+      setPurchaseId: vi.fn(),
+      selectMethod: vi.fn(),
+      copyTransferValue: vi.fn(),
+      requestTransferData: vi.fn()
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [CheckoutPaymentStepComponent]
+    })
+      .overrideComponent(CheckoutPaymentStepComponent, {
+        set: { providers: [{ provide: CheckoutPaymentFacade, useValue: payment }] }
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(CheckoutPaymentStepComponent);
+  });
+
+  it.each([
+    ['qr', 'app-qr-payment-content'],
+    ['transfer', 'app-transfer-payment-content'],
+    ['telepagos', 'app-telepagos-payment-content']
+  ] as const)('renders the %s payment content', (method: PaymentMethod, selector: string) => {
+    payment.selectedMethod.set(method);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector(selector)).not.toBeNull();
+  });
+
+  it('delegates method selection to the payment facade', () => {
+    fixture.detectChanges();
+    const transferRadio = fixture.nativeElement.querySelector('input[value="transfer"]') as HTMLInputElement;
+    transferRadio.dispatchEvent(new Event('change'));
+
+    expect(payment.selectMethod).toHaveBeenCalledWith('transfer');
+  });
+
+  it('shows only the loading state while generating a QR intent', () => {
+    payment.selectedMethod.set('qr');
+    payment.isLoading.set(true);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('Cargando información de pago...');
+    expect(fixture.nativeElement.querySelector('app-qr-payment-content')).toBeNull();
+  });
+
+  it('delegates transfer copy requests to the payment facade', () => {
+    payment.selectedMethod.set('transfer');
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('app-icon-button').click();
+
+    expect(payment.copyTransferValue).toHaveBeenCalledWith('cvu', transferAccount.cvu);
+  });
+});

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

@@ -1,36 +1,46 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, 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 { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
+import { QrPaymentContentComponent } from './components/payment-methods/qr-payment-content.component';
+import { TelepagosPaymentContentComponent } from './components/payment-methods/telepagos-payment-content.component';
+import { TransferPaymentContentComponent } from './components/payment-methods/transfer-payment-content.component';
+import { CheckoutPaymentFacade } from './checkout-payment.facade';
+import { PaymentMethod, TransferField } from './checkout-page.models';
 
 @Component({
   selector: 'app-checkout-payment-step',
   standalone: true,
-  imports: [ButtonComponent, IconButtonComponent, QRCodeComponent],
+  imports: [
+    ButtonComponent,
+    QrPaymentContentComponent,
+    TelepagosPaymentContentComponent,
+    TransferPaymentContentComponent
+  ],
   templateUrl: './checkout-payment-step.component.html',
   styleUrl: './checkout-payment-step.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [CheckoutPaymentFacade]
 })
 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 isGeneratingIntent = input<boolean>(false);
-  readonly qrData = input<string | null>(null);
+  protected readonly payment = inject(CheckoutPaymentFacade);
+  readonly purchaseId = input<number | null>(null);
 
-  readonly paymentMethodChange = output<PaymentMethod>();
-  readonly copyTransferValue = output<{ field: TransferField; value: string }>();
   readonly cancelStep = output<void>();
   readonly complete = output<void>();
 
+  constructor() {
+    effect(() => this.payment.setPurchaseId(this.purchaseId()));
+  }
+
   protected selectPaymentMethod(method: PaymentMethod): void {
-    this.paymentMethodChange.emit(method);
+    void this.payment.selectMethod(method);
   }
 
   protected requestCopy(field: TransferField, value: string): void {
-    this.copyTransferValue.emit({ field, value });
+    void this.payment.copyTransferValue(field, value);
+  }
+
+  protected requestTransfer(dni: string): void {
+    void this.payment.requestTransferData(dni);
   }
 }

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

@@ -0,0 +1,150 @@
+import { computed, effect, inject, Injectable, signal, untracked } from '@angular/core';
+
+import { CartService } from '../../../../core/services/cart/cart.service';
+import { CheckoutService } from '../../../../core/services/checkout.service';
+import { TenantService } from '../../../../core/services/tenant.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
+
+@Injectable()
+export class CheckoutPaymentFacade {
+  private readonly cartService = inject(CartService);
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly tenantService = inject(TenantService);
+  private readonly toastService = inject(ToastService);
+  private readonly purchaseId = signal<number | null>(null);
+  private readonly isGeneratingIntent = signal(false);
+
+  readonly paymentMethods: ReadonlyArray<PaymentMethodOption> = [
+    { id: 'qr', label: 'QR' },
+    { id: 'transfer', label: 'Transferencia' },
+    { id: 'telepagos', label: 'TelePagos' }
+  ];
+  readonly selectedMethod = signal<PaymentMethod>('qr');
+  readonly copiedTransferField = signal<TransferField | null>(null);
+  readonly transferAccount = signal<TransferAccount | null>(null);
+  readonly payerDni = signal('');
+  readonly transferRequestError = signal<string | null>(null);
+  readonly qrData = signal<string | null>(null);
+  readonly isLoading = computed(() => this.isGeneratingIntent() || this.cartService.isUpdating());
+  readonly canComplete = computed(() =>
+    !this.isLoading()
+      && (this.selectedMethod() !== 'transfer' || this.transferAccount() !== null)
+  );
+
+  constructor() {
+    effect(() => {
+      const cart = this.cartService.cart();
+      const purchaseId = this.purchaseId();
+
+      untracked(() => {
+        if (cart && purchaseId) void this.refreshSelectedMethod();
+      });
+    });
+  }
+
+  setPurchaseId(purchaseId: number | null): void {
+    this.purchaseId.set(purchaseId);
+  }
+
+  async selectMethod(method: PaymentMethod): Promise<void> {
+    this.selectedMethod.set(method);
+    await this.refreshSelectedMethod();
+  }
+
+  async requestTransferData(dni: string): Promise<void> {
+    const context = this.resolvePaymentContext();
+    if (!context) return;
+
+    this.isGeneratingIntent.set(true);
+    this.transferRequestError.set(null);
+
+    try {
+      const response = await this.checkoutService.generatePaymentIntent(
+        context.tenantCode,
+        context.purchaseId,
+        'transfer',
+        dni
+      );
+      if (!response.transfer_data) {
+        throw new Error('No pudimos obtener los datos de transferencia.');
+      }
+
+      this.payerDni.set(dni);
+      this.transferAccount.set({
+        titular: response.transfer_data.titular,
+        entidad: response.transfer_data.entidad,
+        cvu: response.transfer_data.cvu,
+        alias: response.transfer_data.alias
+      });
+    } catch (error) {
+      const message = this.resolveErrorMessage(
+        error,
+        'No pudimos obtener los datos de transferencia. Intentá nuevamente.'
+      );
+      this.transferRequestError.set(message);
+      this.toastService.danger(message);
+    } finally {
+      this.isGeneratingIntent.set(false);
+    }
+  }
+
+  async copyTransferValue(field: TransferField, value: string): Promise<void> {
+    if (!globalThis.navigator?.clipboard?.writeText) return;
+
+    try {
+      await globalThis.navigator.clipboard.writeText(value);
+      this.copiedTransferField.set(field);
+
+      setTimeout(() => {
+        if (this.copiedTransferField() === field) this.copiedTransferField.set(null);
+      }, 1800);
+    } catch {
+      this.copiedTransferField.set(null);
+    }
+  }
+
+  private async refreshSelectedMethod(): Promise<void> {
+    const method = this.selectedMethod();
+    if (method === 'transfer') {
+      if (this.transferAccount() && this.payerDni()) {
+        await this.requestTransferData(this.payerDni());
+      }
+      return;
+    }
+
+    if (method === 'telepagos') return;
+
+    const context = this.resolvePaymentContext();
+    if (!context) return;
+
+    this.isGeneratingIntent.set(true);
+    try {
+      const response = await this.checkoutService.generatePaymentIntent(
+        context.tenantCode,
+        context.purchaseId,
+        method
+      );
+      if (response.qr_data?.qr_code) this.qrData.set(response.qr_data.qr_code);
+    } catch (error) {
+      this.toastService.danger(this.resolveErrorMessage(
+        error,
+        'No pudimos obtener la información de pago. Intentá nuevamente.'
+      ));
+    } finally {
+      this.isGeneratingIntent.set(false);
+    }
+  }
+
+  private resolvePaymentContext(): { tenantCode: string; purchaseId: number } | null {
+    const tenant = this.tenantService.tenant();
+    const purchaseId = this.purchaseId();
+    return tenant && purchaseId ? { tenantCode: tenant.codigo, purchaseId } : null;
+  }
+
+  private resolveErrorMessage(error: unknown, fallback: string): string {
+    const backendMessage = (error as { error?: { message?: unknown } } | null)?.error?.message;
+    if (typeof backendMessage === 'string') return backendMessage;
+    return error instanceof Error ? error.message : fallback;
+  }
+}

src/app/features/store/pages/checkout-page/components/payment-methods/_payment-panel.scss

@@ -0,0 +1,41 @@
+@mixin host {
+  :host {
+    display: block;
+    width: 100%;
+    max-width: 290px;
+  }
+}
+
+@mixin card {
+  &__card {
+    width: 100%;
+    max-width: 290px;
+    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;
+  }
+
+  &__title {
+    max-width: 18rem;
+    margin: 0;
+    color: #8a8a8a;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  &__divider {
+    width: 100%;
+    max-width: 220px;
+    height: 1px;
+    margin: 1.2rem 0 1.45rem;
+    background: #dddddd;
+  }
+}

src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.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/payment-methods/qr-payment-content.component.scss

@@ -0,0 +1,81 @@
+@use 'payment-panel' as payment-panel;
+
+@include payment-panel.host;
+
+.payment-panel {
+  @include payment-panel.card;
+}
+
+.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/payment-methods/qr-payment-content.component.spec.ts

@@ -0,0 +1,30 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QrPaymentContentComponent } from './qr-payment-content.component';
+
+describe('QrPaymentContentComponent', () => {
+  it('shows the QR placeholder when there is no QR data', async () => {
+    await TestBed.configureTestingModule({
+      imports: [QrPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(QrPaymentContentComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelectorAll('.qr-code__finder')).toHaveLength(3);
+    expect(fixture.nativeElement.querySelector('qrcode')).toBeNull();
+  });
+
+  it('renders the QR component when data is provided', async () => {
+    await TestBed.configureTestingModule({
+      imports: [QrPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(QrPaymentContentComponent);
+    fixture.componentRef.setInput('qrData', 'payment-data');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('qrcode')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('.qr-code__finder')).toBeNull();
+  });
+});

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

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

src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.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/payment-methods/telepagos-payment-content.component.scss

@@ -0,0 +1,47 @@
+@use 'payment-panel' as payment-panel;
+
+@include payment-panel.host;
+
+.payment-panel {
+  @include payment-panel.card;
+}
+
+.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/payment-methods/telepagos-payment-content.component.spec.ts

@@ -0,0 +1,20 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TelepagosPaymentContentComponent } from './telepagos-payment-content.component';
+
+describe('TelepagosPaymentContentComponent', () => {
+  it('shows the TelePagos download options', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TelepagosPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TelepagosPaymentContentComponent);
+    fixture.detectChanges();
+
+    const text = fixture.nativeElement.textContent as string;
+    expect(text).toContain('Descarga la app de TelePagos');
+    expect(text).toContain('Google Play');
+    expect(text).toContain('App Store');
+    expect(fixture.nativeElement.querySelectorAll('.store-badge')).toHaveLength(2);
+  });
+});

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

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

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

@@ -0,0 +1,78 @@
+<div class="payment-panel__card">
+  <h3 class="payment-panel__title">
+    {{ transferAccount() ? 'Transferí a la siguiente cuenta desde cualquier billetera' : 'Solicitá los datos de transferencia' }}
+  </h3>
+  <div class="payment-panel__divider"></div>
+
+  @if (!transferAccount()) {
+    <form class="payment-panel__request" (submit)="$event.preventDefault(); submitPayerDni()">
+      <p class="payment-panel__description">
+        Ingresá el DNI de la persona que realizará la transferencia para poder identificar el pago.
+      </p>
+
+      <label class="payment-panel__label" for="transfer-payer-dni">DNI del pagador</label>
+      <app-input
+        id="transfer-payer-dni"
+        type="text"
+        placeholder="Ej: 12345678"
+        [maxlength]="8"
+        [invalid]="!!payerDniError()"
+        [disabled]="isLoading()"
+        [value]="payerDni()"
+        (valueChange)="payerDni.set($any($event).toString())"
+      />
+
+      @if (payerDniError(); as error) {
+        <small class="payment-panel__error">{{ error }}</small>
+      } @else if (requestError(); as error) {
+        <small class="payment-panel__error">{{ error }}</small>
+      }
+
+      <app-button type="submit" buttonClass="w-100" [disabled]="isLoading()">
+        {{ isLoading() ? 'Solicitando...' : 'Solicitar datos de transferencia' }}
+      </app-button>
+    </form>
+  } @else {
+    <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>

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

@@ -0,0 +1,80 @@
+@use 'payment-panel' as payment-panel;
+
+@include payment-panel.host;
+
+.payment-panel {
+  @include payment-panel.card;
+
+  &__account {
+    width: 100%;
+    display: grid;
+    gap: 0.75rem;
+    color: #7a7a7a;
+    font-size: 12px;
+  }
+
+  &__request {
+    width: 100%;
+    display: grid;
+    gap: 0.75rem;
+    text-align: left;
+  }
+
+  &__description {
+    margin: 0;
+    color: #6f6f6f;
+    font-size: 0.85rem;
+    line-height: 1.4;
+  }
+
+  &__label {
+    margin-bottom: -0.35rem;
+    color: #5e5e5e;
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
+
+  &__error {
+    color: var(--bs-danger, #dc3545);
+    font-size: 0.78rem;
+  }
+
+  &__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;
+  }
+}

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

@@ -0,0 +1,96 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TransferAccount } from '../../checkout-page.models';
+import { TransferPaymentContentComponent } from './transfer-payment-content.component';
+
+describe('TransferPaymentContentComponent', () => {
+  const transferAccount: TransferAccount = {
+    titular: 'Titular Test',
+    entidad: 'Entidad Test',
+    cvu: '0000000000000000000000',
+    alias: 'alias.test'
+  };
+
+  it('requests the payer DNI before showing account information', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransferPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('DNI del pagador');
+    expect(fixture.nativeElement.textContent).not.toContain('DATOS DE CUENTA');
+
+    const emitted: string[] = [];
+    fixture.componentInstance.requestTransferData.subscribe((dni) => emitted.push(dni));
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.value = '12345678';
+    input.dispatchEvent(new Event('input'));
+    fixture.nativeElement.querySelector('form').dispatchEvent(new Event('submit'));
+    fixture.detectChanges();
+
+    expect(emitted).toEqual(['12345678']);
+  });
+
+  it('shows validation errors and does not submit an invalid DNI', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransferPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
+    const emitted: string[] = [];
+    fixture.componentInstance.requestTransferData.subscribe((dni) => emitted.push(dni));
+    fixture.detectChanges();
+
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.value = '12abc';
+    input.dispatchEvent(new Event('input'));
+    fixture.nativeElement.querySelector('form').dispatchEvent(new Event('submit'));
+    fixture.detectChanges();
+
+    expect(emitted).toEqual([]);
+    expect(fixture.nativeElement.textContent).toContain('solo puede contener números');
+  });
+
+  it('shows the account information and copied-field feedback', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransferPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
+    fixture.componentRef.setInput('transferAccount', transferAccount);
+    fixture.componentRef.setInput('copiedTransferField', 'cvu');
+    fixture.detectChanges();
+
+    const text = fixture.nativeElement.textContent as string;
+    expect(text).toContain(transferAccount.titular);
+    expect(text).toContain(transferAccount.entidad);
+    expect(text).toContain(transferAccount.cvu);
+    expect(text).toContain(transferAccount.alias);
+    expect(text).toContain('CVU copiado');
+    expect(text).not.toContain('Alias copiado');
+  });
+
+  it('emits the selected transfer value', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransferPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
+    fixture.componentRef.setInput('transferAccount', transferAccount);
+    fixture.detectChanges();
+
+    const emitted: Array<{ field: string; value: string }> = [];
+    fixture.componentInstance.copyTransferValue.subscribe((value) => emitted.push(value));
+
+    const copyButtons = fixture.nativeElement.querySelectorAll('app-icon-button');
+    copyButtons[0].click();
+    copyButtons[1].click();
+
+    expect(emitted).toEqual([
+      { field: 'cvu', value: transferAccount.cvu },
+      { field: 'alias', value: transferAccount.alias }
+    ]);
+  });
+});

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

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, output, signal } from '@angular/core';
+
+import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
+import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
+import { InputComponent } from '../../../../../../shared/components/input/input.component';
+import { TransferAccount, TransferField } from '../../checkout-page.models';
+
+@Component({
+  selector: 'app-transfer-payment-content',
+  standalone: true,
+  imports: [ButtonComponent, IconButtonComponent, InputComponent],
+  templateUrl: './transfer-payment-content.component.html',
+  styleUrl: './transfer-payment-content.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TransferPaymentContentComponent {
+  readonly transferAccount = input<TransferAccount | null>(null);
+  readonly copiedTransferField = input<TransferField | null>(null);
+  readonly isLoading = input(false);
+  readonly requestError = input<string | null>(null);
+  readonly initialPayerDni = input('');
+
+  readonly copyTransferValue = output<{ field: TransferField; value: string }>();
+  readonly requestTransferData = output<string>();
+
+  protected readonly payerDni = signal('');
+  protected readonly submitted = signal(false);
+  protected readonly payerDniError = computed(() => {
+    if (!this.submitted()) return null;
+
+    const value = String(this.payerDni()).trim();
+    if (!value) return 'Ingresá el DNI de la persona que realizará la transferencia.';
+    if (!/^\d+$/.test(value)) return 'El DNI solo puede contener números.';
+    if (!/^\d{7,8}$/.test(value)) return 'El DNI debe tener 7 u 8 dígitos.';
+
+    return null;
+  });
+
+  constructor() {
+    effect(() => {
+      const initialDni = this.initialPayerDni();
+      if (initialDni && !this.payerDni()) this.payerDni.set(initialDni);
+    });
+  }
+
+  protected submitPayerDni(): void {
+    this.submitted.set(true);
+    if (this.payerDniError()) return;
+
+    this.requestTransferData.emit(String(this.payerDni()).trim());
+  }
+
+  protected requestCopy(field: TransferField, value: string): void {
+    this.copyTransferValue.emit({ field, value });
+  }
+}

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,5 +1,4 @@
-<section class="product-detail py-5">
-  <div class="container-xl px-3 px-md-4">
+<section class="product-detail">
     @if (loading()) {
       <div class="text-center py-5">
         <div class="spinner-border text-primary" role="status">
@@ -116,5 +115,4 @@
         No se encontró el producto especificado.
       </div>
     }
-  </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,7 +149,6 @@ 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,
@@ -134,26 +157,29 @@ describe('ProductDetailPageComponent', () => {
         id: 123,
         cantidad_maxima: 10,
         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 +193,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 +222,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,17 +246,17 @@ 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,
@@ -238,11 +264,11 @@ describe('ProductDetailPageComponent', () => {
         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 +278,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('');
   });
 
@@ -282,16 +310,16 @@ describe('ProductDetailPageComponent', () => {
     fixture.componentInstance['selectedVariant'].set({
       variant_id: 1,
       cantidad_maxima: 10,
-      attributes: {}
+      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 +344,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 +355,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 +366,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();
@@ -359,17 +387,17 @@ describe('ProductDetailPageComponent', () => {
         id: 123,
         cantidad_maxima: 5,
         images: [],
-        definitions: {}
+        definitions: {},
       },
       variants_map: [
         {
           variant_id: 123,
           cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          attributes: {},
+        },
+      ],
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -382,7 +410,7 @@ 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();
@@ -400,17 +428,17 @@ describe('ProductDetailPageComponent', () => {
         id: 123,
         cantidad_maxima: 5,
         images: [],
-        definitions: {}
+        definitions: {},
       },
       variants_map: [
         {
           variant_id: 123,
           cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          attributes: {},
+        },
+      ],
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
     cartServiceStub.addItem.mockReturnValue(throwError(() => new Error('Failed to add')));
 
     await configureTestingModule();
@@ -422,13 +450,15 @@ 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.',
+    );
   });
 });

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);
@@ -86,14 +84,14 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
   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 +111,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 +127,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) => {
@@ -180,15 +151,44 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
           });
           return {
             ...currentProduct,
-            variants_map: updatedVariantsMap
+            variants_map: updatedVariantsMap,
           };
         });
 
         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(['/']);
   }
@@ -219,8 +219,6 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     }
   }
 
-
-
   protected addToCart(): void {
     const variant = this.selectedVariant();
     if (!variant) {
@@ -239,7 +237,7 @@ 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);
-      }
+      },
     });
   }
 
@@ -247,15 +245,6 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     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 +304,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,44 @@
-<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 (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,25 @@
-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 {
+  STORE_HOME_PRODUCTS_ERROR_MESSAGE,
+  StoreHomeProductsResolvedData,
+} from './store-home-page.resolver';
 
 interface StoreHomeProductCardViewModel {
   id: number;
@@ -22,14 +35,16 @@ interface StoreHomeProductCardViewModel {
   imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent],
   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 activeRequestId = 0;
   private productsRequestSubscription: Subscription | null = null;
+  protected readonly priorityImageCount = 4;
 
   protected readonly currentPage = signal(1);
   protected readonly products = signal<Product[]>([]);
@@ -44,11 +59,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 +107,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 +117,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 +125,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,10 @@ 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 { 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 +16,10 @@ export const routes: Routes = [
     children: [
       {
         path: '',
-        component: StoreHomePageComponent
+        component: StoreHomePageComponent,
+        resolve: {
+          productsData: storeHomeProductsResolver,
+        },
       },
       {
         path: 'login',
@@ -23,9 +28,9 @@ export const routes: Routes = [
         children: [
           {
             path: '',
-            component: LoginPageComponent
-          }
-        ]
+            component: LoginPageComponent,
+          },
+        ],
       },
       {
         path: 'register',
@@ -34,24 +39,27 @@ export const routes: Routes = [
         children: [
           {
             path: '',
-            component: RegisterPageComponent
-          }
-        ]
+            component: RegisterPageComponent,
+          },
+        ],
       },
       {
         path: 'producto/:id',
+        resolve: {
+          productDetailData: productDetailResolver,
+        },
         loadComponent: () =>
           import('./pages/product-detail-page/product-detail-page.component').then(
-            (m) => m.ProductDetailPageComponent
-          )
+            (m) => m.ProductDetailPageComponent,
+          ),
       },
       {
         path: 'checkout',
         canActivate: [authGuard],
         loadComponent: () =>
           import('./pages/checkout-page/checkout-page.component').then(
-            (m) => m.CheckoutPageComponent
-          )
+            (m) => m.CheckoutPageComponent,
+          ),
       },
       {
         path: 'checkout/status',
@@ -61,11 +69,45 @@ 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',
+            loadComponent: () =>
+              import('./pages/account-page/pages/profile-page/profile-page').then(
+                (m) => m.ProfilePage,
+              ),
+          },
+          {
+            path: 'compras',
+            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/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/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);
+  }
+}