Merge branch 'develop' of https://gitea.quo.ar/tbianchini/shopit-front into develop

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

@@ -6,7 +6,6 @@ import { HttpTestingController, provideHttpClientTesting } from '@angular/common
 import { environment } from '../../../../environments/environment';
 import { AuthService } from './auth.service';
 import { CookieService } from '../cookie/cookie.service';
-import { TenantService } from '../tenant.service';
 
 describe('AuthService', () => {
   let cookieStore: Record<string, string> = {};
@@ -96,7 +95,7 @@ describe('AuthService', () => {
     httpController.verify();
   });
 
-  it('clears an expired session when /me returns 401', async () => {
+  it('propagates a 401 from /me without clearing the session', async () => {
     cookieStore['shopit.auth.token'] = 'expired-token';
 
     TestBed.configureTestingModule({
@@ -117,11 +116,11 @@ describe('AuthService', () => {
 
     request.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
 
-    await expect(bootstrapPromise).resolves.toBeUndefined();
+    await expect(bootstrapPromise).rejects.toMatchObject({ status: 401 });
     expect(service.user()).toBeNull();
-    expect(service.token()).toBeNull();
+    expect(service.token()).toBe('expired-token');
-    expect(service.isAuthenticated()).toBe(false);
+    expect(service.isAuthenticated()).toBe(true);
-    expect(cookieStore['shopit.auth.token']).toBeUndefined();
+    expect(cookieStore['shopit.auth.token']).toBe('expired-token');
 
     httpController.verify();
   });
@@ -133,10 +132,6 @@ describe('AuthService', () => {
         provideHttpClientTesting(),
         AuthService,
         { provide: CookieService, useValue: createCookieServiceStub() },
-        {
-          provide: TenantService,
-          useValue: { getTenant: () => ({ codigo: 'tenant-test' }) }
-        },
         TransferState
       ]
     });
@@ -157,7 +152,6 @@ describe('AuthService', () => {
 
     const request = httpController.expectOne(`${environment.url}register`);
     expect(request.request.method).toBe('POST');
-    expect(request.request.body.tenant_codigo).toBe('tenant-test');
     request.flush({
       message: 'Usuario registrado correctamente.',
       data: {

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

@@ -1,5 +1,4 @@
-import { DOCUMENT } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 import { computed, inject, Injectable, PLATFORM_ID, signal, TransferState, makeStateKey } from '@angular/core';
 import { firstValueFrom, map, Observable, of, tap } from 'rxjs';
@@ -14,7 +13,6 @@ import {
   UpdateProfilePayload
 } from './auth.interfaces';
 import { CookieService } from '../cookie/cookie.service';
-import { TenantService } from '../tenant.service';
 
 const AUTH_TOKEN_COOKIE_KEY = 'shopit.auth.token';
 const AUTH_USER_SSR_STATE_KEY = makeStateKey<AuthUser>('shopit.auth.user');
@@ -24,11 +22,9 @@ const AUTH_USER_SSR_STATE_KEY = makeStateKey<AuthUser>('shopit.auth.user');
 })
 export class AuthService {
   private readonly http = inject(HttpClient);
-  private readonly document = inject(DOCUMENT);
   private readonly platformId = inject(PLATFORM_ID);
   private readonly cookieService = inject(CookieService);
   private readonly transferState = inject(TransferState);
-  private readonly tenantService = inject(TenantService);
 
   private readonly userState = signal<AuthUser | null>(null);
   private readonly tokenState = signal<string | null>(null);
@@ -45,33 +41,7 @@ export class AuthService {
   }
 
   register(payload: RegisterPayload): Observable<RegisterResponse> {
-    const tenantCode = this.tenantService.getTenant()?.codigo;
+    return this.http.post<RegisterResponse>(`${environment.url}register`, payload);
-
-    return this.http.post<RegisterResponse>(`${environment.url}register`, {
-      ...payload,
-      ...(tenantCode ? { tenant_codigo: tenantCode } : {})
-    });
-  }
-
-  loginWithGoogle(): void {
-    const tenant = this.tenantService.getTenant();
-    if (!tenant) {
-      throw new Error('No se pudo resolver el tenant activo.');
-    }
-
-    const apiUrl = new URL(environment.url);
-    const authorizationUrl = new URL('/auth/google/redirect', apiUrl.origin);
-    authorizationUrl.searchParams.set('tenant', tenant.codigo);
-    authorizationUrl.searchParams.set('return_url', this.document.location.origin);
-
-    this.document.location.assign(authorizationUrl.toString());
-  }
-
-  completeGoogleLogin(oauthCode: string): Observable<AuthUser> {
-    return this.http.post<LoginResponse>(`${environment.url}auth/google/exchange`, { oauth_code: oauthCode }).pipe(
-      tap((response) => this.applyAuthenticatedState(response.token, response.user)),
-      map((response) => response.user)
-    );
   }
 
   updateProfile(payload: UpdateProfilePayload): Observable<AuthUser> {
@@ -105,24 +75,9 @@ export class AuthService {
       return;
     }
 
-    try {
+    const user = await firstValueFrom(this.loadCurrentUser());
-      const user = await firstValueFrom(this.loadCurrentUser());
+    if (isPlatformServer(this.platformId)) {
-
+      this.transferState.set(AUTH_USER_SSR_STATE_KEY, user);
-      if (isPlatformServer(this.platformId)) {
-        this.transferState.set(AUTH_USER_SSR_STATE_KEY, user);
-      }
-    } catch (error) {
-      // An expired token is an expected state, including while rendering on the
-      // server. Do not let it reject the application initializer: Angular's SSR
-      // pipeline can otherwise attempt to serialize HttpErrorResponse internals
-      // as HTTP headers.
-      if (error instanceof HttpErrorResponse && error.status === 401) {
-        this.clearSession();
-
-        return;
-      }
-
-      throw error;
     }
   }
 

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

@@ -87,7 +87,7 @@ export class CheckoutService {
       payload.transfer_payer_dni = payerDni;
     }
     const response = await firstValueFrom(
-      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, payload)
+      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, { method })
     );
     if (!response) {
       throw new Error('Error al generar la intención de pago.');

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

@@ -1,23 +1,37 @@
 import '@angular/compiler';
 import { Component, inject } from '@angular/core';
 import { TestBed, getTestBed } from '@angular/core/testing';
-import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
+import {
-import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi
+} from 'vitest';
 import { firstValueFrom } from 'rxjs';
 
 import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
 import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
-import { QrModalComponent } from '../../shared/components/qr-modal/qr-modal.component';
 import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component';
-import { MODAL_DATA, ModalRef, ModalService } from './modal.service';
+import {
+  MODAL_DATA,
+  ModalRef,
+  ModalService
+} from './modal.service';
 
 @Component({
-  template: '',
+  template: ''
 })
 class FirstTestModalComponent {}
 
 @Component({
-  template: '',
+  template: ''
 })
 class SecondTestModalComponent {}
 
@@ -26,7 +40,10 @@ describe('ModalService', () => {
 
   beforeAll(() => {
     try {
-      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
     } catch {
       // Test environment may already be initialized by another setup entrypoint.
     }
@@ -38,7 +55,7 @@ describe('ModalService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ModalService],
+      providers: [ModalService]
     });
 
     service = TestBed.inject(ModalService);
@@ -49,7 +66,7 @@ describe('ModalService', () => {
       title: 'Confirmar compra',
       data: { productId: 10 },
       size: 'lg',
-      closeOnBackdrop: false,
+      closeOnBackdrop: false
     });
 
     const activeModal = service.activeModal();
@@ -63,7 +80,7 @@ describe('ModalService', () => {
       size: 'lg',
       closeOnBackdrop: false,
       closeOnEscape: true,
-      showCloseButton: true,
+      showCloseButton: true
     });
   });
 
@@ -98,7 +115,7 @@ describe('ModalService', () => {
     firstRef.afterClosed$.subscribe(firstClosedSpy);
 
     const secondRef = service.open(SecondTestModalComponent, {
-      title: 'Segundo modal',
+      title: 'Segundo modal'
     });
 
     expect(firstClosedSpy).toHaveBeenCalledWith(undefined);
@@ -109,7 +126,7 @@ describe('ModalService', () => {
 
   it('injects MODAL_DATA and ModalRef into opened components through the host injector contract', () => {
     const ref = service.open(DataTestModalComponent, {
-      data: { amount: 3 },
+      data: { amount: 3 }
     });
 
     const activeModal = service.activeModal();
@@ -121,7 +138,7 @@ describe('ModalService', () => {
   it('opens the standard confirm modal with default labels', () => {
     const result$ = service.openConfirm({
       title: 'Confirmar compra',
-      content: 'Esto confirmara la compra actual.',
+      content: 'Esto confirmara la compra actual.'
     });
 
     const activeModal = service.activeModal();
@@ -133,19 +150,19 @@ describe('ModalService', () => {
       data: {
         content: 'Esto confirmara la compra actual.',
         confirmLabel: 'Confirmar',
-        cancelLabel: 'Cancelar',
+        cancelLabel: 'Cancelar'
       },
       size: 'md',
       closeOnBackdrop: true,
       closeOnEscape: true,
-      showCloseButton: true,
+      showCloseButton: true
     });
   });
 
   it('maps the confirm modal close result to true', async () => {
     const result$ = service.openConfirm({
       title: 'Confirmar compra',
-      content: 'Esto confirmara la compra actual.',
+      content: 'Esto confirmara la compra actual.'
     });
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
@@ -158,7 +175,7 @@ describe('ModalService', () => {
   it('maps dismissing a confirm modal to false', async () => {
     const result$ = service.openConfirmDelete({
       title: 'Eliminar producto',
-      content: 'Se eliminara el producto.',
+      content: 'Se eliminara el producto.'
     });
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
@@ -177,7 +194,7 @@ describe('ModalService', () => {
       size: 'lg',
       closeOnBackdrop: false,
       closeOnEscape: false,
-      showCloseButton: false,
+      showCloseButton: false
     });
 
     const activeModal = service.activeModal();
@@ -188,19 +205,19 @@ describe('ModalService', () => {
       data: {
         content: 'Se eliminara el producto.',
         confirmLabel: 'Eliminar',
-        cancelLabel: 'Conservar',
+        cancelLabel: 'Conservar'
       },
       size: 'lg',
       closeOnBackdrop: false,
       closeOnEscape: false,
-      showCloseButton: false,
+      showCloseButton: false
     });
   });
 
   it('opens the simple modal with default button label', () => {
     service.openSimple({
       title: 'Aviso',
-      content: 'Este es un aviso simple.',
+      content: 'Este es un aviso simple.'
     });
 
     const activeModal = service.activeModal();
@@ -210,19 +227,19 @@ describe('ModalService', () => {
       title: 'Aviso',
       data: {
         content: 'Este es un aviso simple.',
-        buttonLabel: 'Entendido',
+        buttonLabel: 'Entendido'
       },
       size: 'md',
       closeOnBackdrop: true,
       closeOnEscape: true,
-      showCloseButton: true,
+      showCloseButton: true
     });
   });
 
   it('maps the simple modal close result to undefined', async () => {
     const result$ = service.openSimple({
       title: 'Aviso',
-      content: 'Este es un aviso simple.',
+      content: 'Este es un aviso simple.'
     });
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
@@ -231,35 +248,10 @@ describe('ModalService', () => {
 
     await expect(resultPromise).resolves.toBeUndefined();
   });
-
-  it('opens the QR modal with the ticket information and compact size', () => {
-    service.openQr({
-      title: 'Entrada general',
-      id: 42,
-      date: '09 de octubre',
-      ticket: 'ticket-payload',
-    });
-
-    const activeModal = service.activeModal();
-
-    expect(activeModal?.component).toBe(QrModalComponent);
-    expect(activeModal?.config).toEqual({
-      title: 'Entrada general',
-      data: {
-        id: 42,
-        date: '09 de octubre',
-        ticket: 'ticket-payload',
-      },
-      size: 'qr',
-      closeOnBackdrop: true,
-      closeOnEscape: true,
-      showCloseButton: true,
-    });
-  });
 });
 
 @Component({
-  template: '',
+  template: ''
 })
 class DataTestModalComponent {
   readonly data = inject(MODAL_DATA);

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

@@ -2,11 +2,14 @@ import { InjectionToken, Injectable, Type, signal } from '@angular/core';
 import { Observable, Subject, map } from 'rxjs';
 import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
 import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
-import { QrModalComponent } from '../../shared/components/qr-modal/qr-modal.component';
 import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component';
 
-export type ModalSize = 'qr' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type ModalDismissReason = 'backdrop' | 'escape' | 'programmatic' | 'replaced';
+export type ModalDismissReason =
+  | 'backdrop'
+  | 'escape'
+  | 'programmatic'
+  | 'replaced';
 
 export interface ModalConfig<TData = unknown> {
   title?: string;
@@ -17,10 +20,11 @@ export interface ModalConfig<TData = unknown> {
   showCloseButton?: boolean;
 }
 
-export interface NormalizedModalConfig<TData = unknown> extends Omit<
+export interface NormalizedModalConfig<TData = unknown>
-  ModalConfig<TData>,
+  extends Omit<
-  'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
+    ModalConfig<TData>,
-> {
+    'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
+  > {
   size: ModalSize;
   closeOnBackdrop: boolean;
   closeOnEscape: boolean;
@@ -33,7 +37,8 @@ export interface ConfirmModalData {
   cancelLabel: string;
 }
 
-export interface ConfirmModalConfig extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
+export interface ConfirmModalConfig
+  extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
   content: string;
   confirmLabel?: string;
   cancelLabel?: string;
@@ -44,24 +49,12 @@ export interface SimpleModalData {
   buttonLabel: string;
 }
 
-export interface SimpleModalConfig extends Omit<ModalConfig<SimpleModalData>, 'data'> {
+export interface SimpleModalConfig
+  extends Omit<ModalConfig<SimpleModalData>, 'data'> {
   content: string;
   buttonLabel?: string;
 }
 
-export interface QrModalData {
-  id: string | number;
-  date: string;
-  ticket: string;
-}
-
-export interface QrModalConfig extends Omit<ModalConfig<QrModalData>, 'data' | 'title'> {
-  title: string;
-  id: string | number;
-  date: string;
-  ticket: string;
-}
-
 export interface ActiveModalState<TResult = unknown, TData = unknown> {
   component: Type<unknown>;
   config: NormalizedModalConfig<TData>;
@@ -77,24 +70,25 @@ const DEFAULT_MODAL_CONFIG: Pick<
   size: 'md',
   closeOnBackdrop: true,
   closeOnEscape: true,
-  showCloseButton: true,
+  showCloseButton: true
 };
 
 const DEFAULT_CONFIRM_MODAL_LABELS = {
   confirmLabel: 'Confirmar',
-  cancelLabel: 'Cancelar',
+  cancelLabel: 'Cancelar'
 } satisfies Pick<ConfirmModalData, 'confirmLabel' | 'cancelLabel'>;
 
 export class ModalRef<TResult = unknown> {
   private readonly afterClosedSubject = new Subject<TResult | undefined>();
   private closed = false;
 
-  readonly afterClosed$: Observable<TResult | undefined> = this.afterClosedSubject.asObservable();
+  readonly afterClosed$: Observable<TResult | undefined> =
+    this.afterClosedSubject.asObservable();
   readonly dismissReason = signal<ModalDismissReason | null>(null);
 
   constructor(
     private readonly closeHandler: (result?: TResult) => void,
-    private readonly dismissHandler: (reason: ModalDismissReason) => void,
+    private readonly dismissHandler: (reason: ModalDismissReason) => void
   ) {}
 
   close(result?: TResult): void {
@@ -126,7 +120,7 @@ export class ModalRef<TResult = unknown> {
 }
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class ModalService {
   private readonly activeModalState = signal<ActiveModalState | null>(null);
@@ -134,31 +128,35 @@ export class ModalService {
 
   open<TComponent, TResult = unknown, TData = unknown>(
     component: Type<TComponent>,
-    config: ModalConfig<TData> = {},
+    config: ModalConfig<TData> = {}
   ): ModalRef<TResult> {
     this.activeModalState()?.ref.dismiss('replaced');
 
     let ref!: ModalRef<TResult>;
     ref = new ModalRef<TResult>(
       (result) => this.close(ref, result),
-      (reason) => this.dismiss(ref, reason),
+      (reason) => this.dismiss(ref, reason)
     );
 
     this.activeModalState.set({
       component,
       config: this.normalizeConfig(config),
-      ref: ref as ModalRef<unknown>,
+      ref: ref as ModalRef<unknown>
     });
 
     return ref;
   }
 
   openConfirm(config: ConfirmModalConfig): Observable<boolean> {
-    return this.openConfirmRef(config).afterClosed$.pipe(map((result) => result === true));
+    return this.openConfirmRef(config).afterClosed$.pipe(
+      map((result) => result === true)
+    );
   }
 
   openConfirmDelete(config: ConfirmModalConfig): Observable<boolean> {
-    return this.openConfirmDeleteRef(config).afterClosed$.pipe(map((result) => result === true));
+    return this.openConfirmDeleteRef(config).afterClosed$.pipe(
+      map((result) => result === true)
+    );
   }
 
   openConfirmRef(config: ConfirmModalConfig): ModalRef<boolean> {
@@ -166,30 +164,23 @@ export class ModalService {
   }
 
   openConfirmDeleteRef(config: ConfirmModalConfig): ModalRef<boolean> {
-    return this.open(ConfirmDeleteModalComponent, this.buildConfirmModalConfig(config));
+    return this.open(
+      ConfirmDeleteModalComponent,
+      this.buildConfirmModalConfig(config)
+    );
   }
 
   openSimple(config: SimpleModalConfig): Observable<void> {
-    return this.openSimpleRef(config).afterClosed$.pipe(map(() => undefined));
+    return this.openSimpleRef(config).afterClosed$.pipe(
+      map(() => undefined)
+    );
   }
 
   openSimpleRef(config: SimpleModalConfig): ModalRef<void> {
-    return this.open(SimpleModalComponent, this.buildSimpleModalConfig(config));
+    return this.open(
-  }
+      SimpleModalComponent,
-
+      this.buildSimpleModalConfig(config)
-  openQr(config: QrModalConfig): Observable<void> {
+    );
-    return this.openQrRef(config).afterClosed$.pipe(map(() => undefined));
-  }
-
-  openQrRef(config: QrModalConfig): ModalRef<void> {
-    const { title, id, date, ticket, size = 'qr', ...modalConfig } = config;
-
-    return this.open(QrModalComponent, {
-      ...modalConfig,
-      title,
-      size,
-      data: { id, date, ticket },
-    });
   }
 
   private close<TResult>(ref: ModalRef<TResult>, result?: TResult): void {
@@ -203,7 +194,7 @@ export class ModalService {
 
   private dismiss<TResult>(
     ref: ModalRef<TResult>,
-    reason: ModalDismissReason = 'programmatic',
+    reason: ModalDismissReason = 'programmatic'
   ): void {
     if (this.activeModalState()?.ref !== ref) {
       return;
@@ -213,14 +204,18 @@ export class ModalService {
     this.activeModalState.set(null);
   }
 
-  private normalizeConfig<TData>(config: ModalConfig<TData>): NormalizedModalConfig<TData> {
+  private normalizeConfig<TData>(
+    config: ModalConfig<TData>
+  ): NormalizedModalConfig<TData> {
     return {
       ...DEFAULT_MODAL_CONFIG,
-      ...config,
+      ...config
     };
   }
 
-  private buildConfirmModalConfig(config: ConfirmModalConfig): ModalConfig<ConfirmModalData> {
+  private buildConfirmModalConfig(
+    config: ConfirmModalConfig
+  ): ModalConfig<ConfirmModalData> {
     const {
       content,
       confirmLabel = DEFAULT_CONFIRM_MODAL_LABELS.confirmLabel,
@@ -233,20 +228,26 @@ export class ModalService {
       data: {
         content,
         confirmLabel,
-        cancelLabel,
+        cancelLabel
-      },
+      }
     };
   }
 
-  private buildSimpleModalConfig(config: SimpleModalConfig): ModalConfig<SimpleModalData> {
+  private buildSimpleModalConfig(
-    const { content, buttonLabel = 'Entendido', ...modalConfig } = config;
+    config: SimpleModalConfig
+  ): ModalConfig<SimpleModalData> {
+    const {
+      content,
+      buttonLabel = 'Entendido',
+      ...modalConfig
+    } = config;
 
     return {
       ...modalConfig,
       data: {
         content,
-        buttonLabel,
+        buttonLabel
-      },
+      }
     };
   }
 }

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

@@ -574,6 +574,24 @@
     </div>
   </section>
 
+  <section class="component-demo card shadow-sm mt-4">
+    <div class="card-body">
+      <span class="eyebrow">Reusable Component</span>
+      <h2 class="mb-4">Ticket</h2>
+
+      <p class="text-muted mb-4">Ticket responsive que ocupa el 100% del ancho disponible.</p>
+
+      <app-ticket
+        title="ENTRADA GENERAL"
+        ticketId="0000000000"
+        date="09 de Octubre"
+        (viewQr)="triggerToast('info')"
+        (download)="triggerToast('success')"
+        (share)="triggerToast('info')"
+      />
+    </div>
+  </section>
+
   <section class="component-demo card shadow-sm mt-4">
     <div class="card-body">
       <span class="eyebrow">Reusable Component</span>

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

@@ -14,6 +14,7 @@ import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
+import { TicketComponent } from '../../../../shared/components/ticket/ticket.component';
 
 @Component({
   selector: 'app-reutilizables-test-page',
@@ -30,6 +31,7 @@ import { StepComponent } from '../../../../shared/components/stepper/step.compon
     CartIconComponent,
     StepperComponent,
     StepComponent,
+    TicketComponent,
   ],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss',

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

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

src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.html

@@ -1,49 +0,0 @@
-<article class="ticket" [class.ticket--disabled]="disabled()" [attr.aria-disabled]="disabled()">
-  @if (!disabled()) {
-    <label class="ticket__selection">
-      <input
-        type="checkbox"
-        [checked]="selected()"
-        (change)="selected.set($any($event.target).checked)"
-      />
-      <span class="visually-hidden">Seleccionar ticket {{ title() }}</span>
-    </label>
-  }
-
-  <div class="ticket__details">
-    <h3 class="ticket__title">{{ title() }}</h3>
-    <p class="ticket__id">ID: {{ ticketId() }}</p>
-  </div>
-
-  @if (date() || expired()) {
-    <div class="ticket__status">
-      @if (expired()) {
-        <span class="ticket__expired">VENCIDO</span>
-      }
-      @if (date(); as ticketDate) {
-        <time class="ticket__date">{{ ticketDate }}</time>
-      }
-    </div>
-  }
-
-  <div class="ticket__actions">
-    <app-button
-      variant="primary"
-      buttonClass="ticket__qr-button"
-      [disabled]="disabled()"
-      (click)="viewQr.emit()"
-    >
-      <i class="fa-solid fa-qrcode" aria-hidden="true"></i>
-      <span>Ver QR</span>
-    </app-button>
-
-    @if (!disabled()) {
-      <app-icon-button
-        variant="download"
-        ariaLabel="Descargar ticket"
-        (clicked)="download.emit()"
-      />
-      <app-icon-button variant="share" ariaLabel="Compartir ticket" (clicked)="share.emit()" />
-    }
-  </div>
-</article>

src/app/features/store/pages/account-page/pages/tickets-page/ticket.service.ts

@@ -1,33 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { firstValueFrom } from 'rxjs';
-
-import { TenantService } from '../../../../../../core/services/tenant.service';
-
-export interface TicketResponse {
-  id: number;
-  tenant_code: string;
-  ticket: string;
-  name: string;
-  description: string | null;
-  source_catalog_item_id: number | null;
-  source_variant_id: number | null;
-  starts_at: string | null;
-  expires_at: string | null;
-  used_at: string | null;
-  is_valid: boolean;
-  is_expired: boolean;
-  is_used: boolean;
-}
-
-@Injectable()
-export class TicketService {
-  private readonly http = inject(HttpClient);
-  private readonly tenantService = inject(TenantService);
-
-  getTickets(): Promise<TicketResponse[]> {
-    return firstValueFrom(
-      this.http.get<{ data: TicketResponse[] }>(`${this.tenantService.getTenantApiUrl()}/tickets`),
-    ).then((response) => response.data ?? []);
-  }
-}

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

@@ -1,65 +0,0 @@
-<section class="tickets-page">
-  <h1 class="tickets-page__title">MIS TICKETS</h1>
-
-  <div class="tickets-list" aria-busy="{{ isLoading() }}">
-    <header class="tickets-list__header">
-      <label class="tickets-list__select-all">
-        <input
-          type="checkbox"
-          [checked]="allSelected()"
-          [disabled]="activeTickets().length === 0"
-          (change)="toggleAll($any($event.target).checked)"
-        />
-        <span>TICKETS ACTIVOS</span>
-      </label>
-
-      <div class="tickets-list__bulk-actions">
-        <span class="tickets-list__bulk-action">
-          <app-icon-button variant="download" ariaLabel="Descargar tickets seleccionados" />
-          <small>Descargar</small>
-        </span>
-        <span class="tickets-list__bulk-action">
-          <app-icon-button variant="share" ariaLabel="Compartir tickets seleccionados" />
-          <small>Compartir</small>
-        </span>
-      </div>
-    </header>
-
-    @if (isLoading()) {
-      @for (item of [1, 2, 3, 4]; track item) {
-        <div class="tickets-list__skeleton" aria-hidden="true"></div>
-      }
-    } @else if (tickets().length) {
-      @for (ticket of activeTickets(); track ticket.id) {
-        <app-ticket
-          [title]="ticket.name"
-          [ticketId]="ticket.id"
-          [date]="formatDate(ticket)"
-          [selected]="isSelected(ticket.id)"
-          (selectedChange)="toggleTicket(ticket.id, $event)"
-          (viewQr)="viewQr(ticket)"
-        />
-      }
-
-      @if (inactiveTickets().length) {
-        <section class="tickets-list__inactive" aria-labelledby="inactive-tickets-title">
-          <header class="tickets-list__header tickets-list__header--inactive">
-            <h2 id="inactive-tickets-title">TICKETS INACTIVOS</h2>
-          </header>
-
-          @for (ticket of inactiveTickets(); track ticket.id) {
-            <app-ticket
-              [title]="ticket.name"
-              [ticketId]="ticket.id"
-              [date]="formatDate(ticket)"
-              [disabled]="true"
-              [expired]="ticket.is_expired"
-            />
-          }
-        </section>
-      }
-    } @else {
-      <p class="tickets-list__empty">Aún no tenés tickets disponibles.</p>
-    }
-  </div>
-</section>

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

@@ -1,96 +0,0 @@
-.tickets-page {
-  width: 100%;
-  max-width: 720px;
-}
-
-.tickets-page__title {
-  margin: 0 0 20px;
-  color: #a0a0a0;
-  font-size: 15px;
-  font-weight: 700;
-}
-
-.tickets-list__header {
-  display: flex;
-  min-height: 58px;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #dddddd;
-}
-
-.tickets-list__header--inactive {
-  justify-content: flex-start;
-}
-
-.tickets-list__header--inactive h2 {
-  margin: 0;
-  color: #a0a0a0;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.tickets-list__inactive {
-  margin-top: 44px;
-}
-
-.tickets-list__select-all {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin: 0;
-  color: #a0a0a0;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.tickets-list__select-all input {
-  width: 21px;
-  height: 21px;
-  margin: 0;
-  accent-color: var(--tenant-primary, #009933);
-}
-
-.tickets-list__bulk-actions {
-  display: flex;
-  gap: 18px;
-}
-
-.tickets-list__bulk-action {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #a0a0a0;
-  font-size: 11px;
-}
-
-.tickets-list app-ticket {
-  border-bottom: 1px solid #dddddd;
-}
-
-.tickets-list__empty {
-  padding: 32px 0;
-  color: #666666;
-  text-align: center;
-}
-
-.tickets-list__skeleton {
-  height: 77px;
-  border-bottom: 1px solid #dddddd;
-  background: linear-gradient(90deg, transparent, #f3f3f3, transparent);
-  background-size: 200% 100%;
-  animation: loading 1.4s infinite;
-}
-
-@keyframes loading {
-  to {
-    background-position: -200% 0;
-  }
-}
-
-@media (max-width: 767.98px) {
-  .tickets-page__title {
-    margin-top: 24px;
-  }
-}

src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.spec.ts

@@ -1,118 +0,0 @@
-import { By } from '@angular/platform-browser';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, it, vi } from 'vitest';
-
-import { ToastService } from '../../../../../../core/services/toast.service';
-import { ModalService } from '../../../../../../core/services/modal.service';
-import { TicketComponent } from './components/ticket/ticket.component';
-import { TicketResponse, TicketService } from './ticket.service';
-import { TicketsPage } from './tickets-page';
-
-const ticket = (overrides: Partial<TicketResponse>): TicketResponse => ({
-  id: 1,
-  tenant_code: 'tenant',
-  ticket: 'ticket-1',
-  name: 'Entrada general',
-  description: null,
-  source_catalog_item_id: null,
-  source_variant_id: null,
-  starts_at: '2026-10-09T00:00:00.000Z',
-  expires_at: null,
-  used_at: null,
-  is_valid: true,
-  is_expired: false,
-  is_used: false,
-  ...overrides,
-});
-
-describe('TicketsPage', () => {
-  it('separates expired and used tickets into the disabled inactive list', async () => {
-    const tickets = [
-      ticket({ id: 1 }),
-      ticket({ id: 2, is_valid: false, is_expired: true }),
-      ticket({ id: 3, is_valid: false, is_used: true, used_at: '2026-10-10T00:00:00.000Z' }),
-    ];
-
-    await TestBed.configureTestingModule({
-      imports: [TicketsPage],
-      providers: [{ provide: ToastService, useValue: { danger: vi.fn() } }],
-    })
-      .overrideComponent(TicketsPage, {
-        set: {
-          providers: [
-            { provide: TicketService, useValue: { getTickets: () => Promise.resolve(tickets) } },
-          ],
-        },
-      })
-      .compileComponents();
-
-    const fixture = TestBed.createComponent(TicketsPage);
-    fixture.detectChanges();
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    const ticketComponents = fixture.debugElement.queryAll(By.directive(TicketComponent));
-    const [activeTicket, expiredTicket, usedTicket] = ticketComponents.map(
-      (element) => element.componentInstance as TicketComponent,
-    );
-
-    expect(ticketComponents).toHaveLength(3);
-    expect(activeTicket.disabled()).toBe(false);
-    expect(expiredTicket.disabled()).toBe(true);
-    expect(expiredTicket.expired()).toBe(true);
-    expect(usedTicket.disabled()).toBe(true);
-    expect(usedTicket.expired()).toBe(false);
-    expect(fixture.nativeElement.textContent).toContain('TICKETS INACTIVOS');
-
-    const page = fixture.nativeElement as HTMLElement;
-    const inactiveElements = Array.from(
-      page.querySelectorAll<HTMLElement>('.tickets-list__inactive app-ticket'),
-    );
-    expect(inactiveElements).toHaveLength(2);
-    inactiveElements.forEach((element) => {
-      expect(element.querySelector('.ticket--disabled')).not.toBeNull();
-      expect(element.querySelector<HTMLButtonElement>('app-button button')?.disabled).toBe(true);
-      expect(element.querySelector('input[type="checkbox"]')).toBeNull();
-      expect(element.querySelector('[aria-label="Descargar ticket"]')).toBeNull();
-      expect(element.querySelector('[aria-label="Compartir ticket"]')).toBeNull();
-    });
-  });
-
-  it('opens the QR modal with the selected ticket data', async () => {
-    const modalService = { openQr: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [TicketsPage],
-      providers: [
-        { provide: ToastService, useValue: { danger: vi.fn() } },
-        { provide: ModalService, useValue: modalService },
-      ],
-    })
-      .overrideComponent(TicketsPage, {
-        set: {
-          providers: [
-            {
-              provide: TicketService,
-              useValue: { getTickets: () => Promise.resolve([ticket({})]) },
-            },
-          ],
-        },
-      })
-      .compileComponents();
-
-    const fixture = TestBed.createComponent(TicketsPage);
-    fixture.detectChanges();
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    const page = fixture.nativeElement as HTMLElement;
-    page.querySelector<HTMLButtonElement>('app-ticket app-button button')?.click();
-
-    expect(modalService.openQr).toHaveBeenCalledWith({
-      title: 'Entrada general',
-      id: 1,
-      date: '09-octubre',
-      ticket: 'ticket-1',
-    });
-  });
-});

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

@@ -1,89 +0,0 @@
-import { Component, computed, inject, OnInit, signal } from '@angular/core';
-
-import { ModalService } from '../../../../../../core/services/modal.service';
-import { ToastService } from '../../../../../../core/services/toast.service';
-import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
-import { TicketComponent } from './components/ticket/ticket.component';
-import { TicketResponse, TicketService } from './ticket.service';
-
-@Component({
-  selector: 'app-tickets-page',
-  imports: [IconButtonComponent, TicketComponent],
-  providers: [TicketService],
-  templateUrl: './tickets-page.html',
-  styleUrl: './tickets-page.scss',
-})
-export class TicketsPage implements OnInit {
-  private readonly ticketService = inject(TicketService);
-  private readonly toastService = inject(ToastService);
-  private readonly modalService = inject(ModalService);
-
-  protected readonly tickets = signal<TicketResponse[]>([]);
-  protected readonly activeTickets = computed(() =>
-    this.tickets().filter((ticket) => !this.isInactive(ticket)),
-  );
-  protected readonly inactiveTickets = computed(() =>
-    this.tickets().filter((ticket) => this.isInactive(ticket)),
-  );
-  protected readonly selectedIds = signal<Set<number>>(new Set());
-  protected readonly isLoading = signal(true);
-  protected readonly allSelected = computed(
-    () =>
-      this.activeTickets().length > 0 && this.selectedIds().size === this.activeTickets().length,
-  );
-
-  async ngOnInit(): Promise<void> {
-    try {
-      this.tickets.set(await this.ticketService.getTickets());
-    } catch {
-      this.toastService.danger('Hubo un error al cargar los tickets');
-    } finally {
-      this.isLoading.set(false);
-    }
-  }
-
-  protected toggleAll(selected: boolean): void {
-    this.selectedIds.set(
-      selected ? new Set(this.activeTickets().map((ticket) => ticket.id)) : new Set(),
-    );
-  }
-
-  protected toggleTicket(ticketId: number, selected: boolean): void {
-    this.selectedIds.update((current) => {
-      const next = new Set(current);
-      selected ? next.add(ticketId) : next.delete(ticketId);
-      return next;
-    });
-  }
-
-  protected isSelected(ticketId: number): boolean {
-    return this.selectedIds().has(ticketId);
-  }
-
-  protected isInactive(ticket: TicketResponse): boolean {
-    return ticket.is_expired || ticket.is_used;
-  }
-
-  protected formatDate(ticket: TicketResponse): string | null {
-    const value = ticket.starts_at ?? ticket.expires_at;
-    if (!value) return null;
-
-    const date = new Date(value);
-    if (Number.isNaN(date.getTime())) return null;
-
-    return new Intl.DateTimeFormat('es-AR', {
-      day: '2-digit',
-      month: 'long',
-      timeZone: 'UTC',
-    }).format(date);
-  }
-
-  protected viewQr(ticket: TicketResponse): void {
-    this.modalService.openQr({
-      title: ticket.name,
-      id: ticket.id,
-      date: this.formatDate(ticket) ?? '',
-      ticket: ticket.ticket,
-    });
-  }
-}

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

@@ -18,7 +18,6 @@ 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';

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,7 +35,7 @@
     </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>
@@ -62,4 +62,3 @@
     </section>
   </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;

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,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, output } from '@angular/core';
 
 import { CheckoutPaymentQrComponent } from './components/checkout-payment-qr/checkout-payment-qr.component';
 import { CheckoutPaymentTelepagosComponent } from './components/checkout-payment-telepagos/checkout-payment-telepagos.component';
@@ -18,7 +18,8 @@ import {
   imports: [CheckoutPaymentQrComponent, CheckoutPaymentTelepagosComponent, CheckoutPaymentTransferComponent],
   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>>();
@@ -32,18 +33,24 @@ export class CheckoutPaymentStepComponent {
   readonly isCheckingQrPayment = input<boolean>(false);
   readonly transferValidationStatus = input<TransferValidationStatus>('idle');
 
-  readonly paymentMethodChange = output<PaymentMethod>();
-  readonly copyTransferValue = output<{ field: TransferField; value: string }>();
   readonly cancelStep = output<void>();
   readonly complete = output<void>();
   readonly generateTransferIntent = output<string>();
   readonly retryQrPolling = 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

@@ -81,8 +81,7 @@
   variant="neutral-outline"
   hostClass="w-100 d-block"
   buttonClass="w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
-  [disabled]="isSubmitting()"
+  [disabled]="true"
-  (click)="loginWithGoogle()"
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"

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

@@ -1,7 +1,7 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, PLATFORM_ID, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { AuthService } from '../../../../core/services/auth/auth.service';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
@@ -20,10 +20,8 @@ const EMAIL_MAX_LENGTH = 255;
 export class LoginPageComponent {
   private readonly formBuilder = inject(FormBuilder);
   private readonly router = inject(Router);
-  private readonly route = inject(ActivatedRoute);
   private readonly authService = inject(AuthService);
   private readonly document = inject(DOCUMENT);
-  private readonly platformId = inject(PLATFORM_ID);
 
   private readonly submittedState = signal(false);
   private readonly serverErrorState = signal<string | null>(null);
@@ -37,18 +35,6 @@ export class LoginPageComponent {
   protected readonly serverError = this.serverErrorState.asReadonly();
   protected readonly isSubmitting = this.isSubmittingState.asReadonly();
 
-  ngOnInit(): void {
-    if (!isPlatformBrowser(this.platformId)) {
-      return;
-    }
-
-    const oauthCode = this.route.snapshot.queryParamMap.get('oauth_code');
-
-    if (oauthCode) {
-      this.completeGoogleLogin(oauthCode);
-    }
-  }
-
   goToRegister(): void {
     void this.router.navigate(['/register']);
   }
@@ -76,16 +62,6 @@ export class LoginPageComponent {
     });
   }
 
-  loginWithGoogle(): void {
-    this.serverErrorState.set(null);
-
-    try {
-      this.authService.loginWithGoogle();
-    } catch (error: unknown) {
-      this.serverErrorState.set(this.resolveErrorMessage(error));
-    }
-  }
-
   protected updateEmail(value: string | number): void {
     this.form.controls.email.setValue(String(value));
   }
@@ -131,22 +107,6 @@ export class LoginPageComponent {
     this.document.location.assign(homeUrl);
   }
 
-  private completeGoogleLogin(oauthCode: string): void {
-    this.isSubmittingState.set(true);
-    this.serverErrorState.set(null);
-
-    this.authService.completeGoogleLogin(oauthCode).subscribe({
-      next: () => {
-        this.isSubmittingState.set(false);
-        this.redirectToHome();
-      },
-      error: (error: unknown) => {
-        this.isSubmittingState.set(false);
-        this.serverErrorState.set(this.resolveErrorMessage(error));
-      }
-    });
-  }
-
   private resolveErrorMessage(error: unknown): string {
     const errorPayload =
       typeof error === 'object' && error !== null && 'error' in error

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

@@ -50,8 +50,8 @@ describe('RegisterPageComponent', () => {
     component.form.setValue({
       nombre_apellido: 'Ada Lovelace',
       email: 'ada@example.com',
-      password: 'Secret!123',
+      password: 'secret123',
-      password_confirmation: 'Secret!123'
+      password_confirmation: 'secret123'
     });
 
     component.onSubmit();
@@ -59,8 +59,8 @@ describe('RegisterPageComponent', () => {
     expect(authService.register).toHaveBeenCalledWith({
       nombre_apellido: 'Ada Lovelace',
       email: 'ada@example.com',
-      password: 'Secret!123',
+      password: 'secret123',
-      password_confirmation: 'Secret!123'
+      password_confirmation: 'secret123'
     });
     expect(modalService.openSimple).toHaveBeenCalledWith({
       content: 'Tu cuenta fue creada correctamente',
@@ -178,8 +178,8 @@ describe('RegisterPageComponent', () => {
     component.form.setValue({
       nombre_apellido: 'Ada Lovelace',
       email: 'ada@example.com',
-      password: 'Secret!123',
+      password: 'secret123',
-      password_confirmation: 'Secret!123'
+      password_confirmation: 'secret123'
     });
     component.onSubmit();
 

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

@@ -106,14 +106,6 @@ export const routes: Routes = [
                 (m) => m.PurchaseDetailPage,
               ),
           },
-          {
-            path: 'tickets',
-            canActivate: [hasMenuGuard('tickets')],
-            loadComponent: () =>
-              import('./pages/account-page/pages/tickets-page/tickets-page').then(
-                (m) => m.TicketsPage,
-              ),
-          },
           {
             path: '',
             redirectTo: 'datos-personales',

src/app/shared/components/modal-shell/modal-shell.component.scss

@@ -19,36 +19,6 @@
   margin: 0;
 }
 
-.modal-shell__dialog--qr {
-  width: min(100%, 15rem);
-}
-
-.modal-shell__dialog--qr .modal-shell__content {
-  min-height: auto;
-  border-radius: 0.35rem;
-  background: #ffffff;
-}
-
-.modal-shell__dialog--qr .modal-shell__header {
-  padding: 1.7rem 1rem 0.35rem;
-}
-
-.modal-shell__dialog--qr .modal-shell__title {
-  color: var(--bs-success, #198754);
-  font-size: 0.8rem;
-  font-weight: 800;
-}
-
-.modal-shell__dialog--qr .modal-shell__header .btn-close {
-  top: 0.85rem;
-  right: 0.85rem;
-  font-size: 0.7rem;
-}
-
-.modal-shell__dialog--qr .modal-shell__body {
-  padding: 0 1rem 1rem;
-}
-
 .modal-shell__dialog.modal-sm {
   width: min(100%, 24rem);
 }
@@ -70,7 +40,8 @@
   min-height: 180px;
   max-height: calc(100dvh - 2rem);
   border-radius: 1.25rem;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.98));
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.98));
 }
 
 .modal-shell__dialog--full .modal-shell__content {
@@ -117,7 +88,6 @@
   }
 
   .modal-shell__dialog,
-  .modal-shell__dialog--qr,
   .modal-shell__dialog.modal-sm,
   .modal-shell__dialog.modal-lg,
   .modal-shell__dialog.modal-xl,

src/app/shared/components/modal-shell/modal-shell.component.ts

@@ -6,7 +6,7 @@ import {
   computed,
   input,
   output,
-  viewChild,
+  viewChild
 } from '@angular/core';
 
 import { ModalSize } from '../../../core/services/modal.service';
@@ -16,7 +16,7 @@ import { ModalSize } from '../../../core/services/modal.service';
   imports: [NgClass],
   templateUrl: './modal-shell.component.html',
   styleUrl: './modal-shell.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ModalShellComponent {
   private readonly panel = viewChild.required<ElementRef<HTMLElement>>('panel');
@@ -32,11 +32,10 @@ export class ModalShellComponent {
     const size = this.size();
 
     return {
-      'modal-shell__dialog--qr': size === 'qr',
       'modal-sm': size === 'sm',
       'modal-lg': size === 'lg',
       'modal-xl': size === 'xl',
-      'modal-shell__dialog--full': size === 'full',
+      'modal-shell__dialog--full': size === 'full'
     };
   });
 
@@ -56,8 +55,8 @@ export class ModalShellComponent {
         'input:not([disabled])',
         'select:not([disabled])',
         'textarea:not([disabled])',
-        '[tabindex]:not([tabindex="-1"])',
+        '[tabindex]:not([tabindex="-1"])'
-      ].join(', '),
+      ].join(', ')
     );
 
     (focusTarget ?? panel).focus();

src/app/shared/components/qr-modal/qr-modal.component.html

@@ -1,16 +0,0 @@
-<article class="qr-modal">
-  <header class="qr-modal__header">
-    <p class="qr-modal__id">ID: {{ data.id }}</p>
-    @if (data.date) {
-      <time class="qr-modal__date">{{ data.date }}</time>
-    }
-  </header>
-
-  <qrcode
-    class="qr-modal__code"
-    [qrdata]="data.ticket"
-    [width]="320"
-    errorCorrectionLevel="M"
-    [ariaLabel]="'Código QR del ticket ' + data.id"
-  />
-</article>

src/app/shared/components/qr-modal/qr-modal.component.scss

@@ -1,44 +0,0 @@
-.qr-modal {
-  display: grid;
-  justify-items: center;
-  gap: 0.65rem;
-  width: 100%;
-  text-align: center;
-}
-
-.qr-modal__header {
-  display: grid;
-  justify-items: center;
-  gap: 0.25rem;
-}
-
-.qr-modal__id {
-  margin: 0;
-}
-
-.qr-modal__id {
-  color: #4f4f4f;
-  font-size: 0.68rem;
-  line-height: 1.2;
-}
-
-.qr-modal__date {
-  margin-top: 0.35rem;
-  color: #8a8a8a;
-  font-size: 0.62rem;
-  line-height: 1.2;
-}
-
-.qr-modal__code {
-  display: block;
-  width: 100%;
-  max-width: 11rem;
-  overflow: hidden;
-  background: #ffffff;
-}
-
-:host ::ng-deep .qr-modal__code canvas {
-  display: block;
-  width: 100% !important;
-  height: auto !important;
-}

src/app/shared/components/qr-modal/qr-modal.component.ts

@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-
-import { MODAL_DATA, QrModalData } from '../../../core/services/modal.service';
-import { QRCodeComponent } from '../qrcode/qrcode.component';
-
-@Component({
-  selector: 'app-qr-modal',
-  imports: [QRCodeComponent],
-  templateUrl: './qr-modal.component.html',
-  styleUrl: './qr-modal.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class QrModalComponent {
-  protected readonly data = inject<QrModalData>(MODAL_DATA);
-}

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

@@ -0,0 +1,30 @@
+<article class="ticket">
+  <label class="ticket__selection">
+    <input
+      type="checkbox"
+      [checked]="selected()"
+      (change)="selected.set($any($event.target).checked)"
+    />
+    <span class="visually-hidden">Seleccionar ticket {{ title() }}</span>
+  </label>
+
+  <div class="ticket__details">
+    <h3 class="ticket__title">{{ title() }}</h3>
+    <p class="ticket__id">ID: {{ ticketId() }}</p>
+  </div>
+
+  @if (date(); as ticketDate) {
+    <time class="ticket__date">{{ ticketDate }}</time>
+  }
+
+  <div class="ticket__actions">
+    <app-button variant="primary" buttonClass="ticket__qr-button" (click)="viewQr.emit()">
+      <i class="fa-solid fa-qrcode" aria-hidden="true"></i>
+      <span>Ver QR</span>
+    </app-button>
+
+    <app-icon-button variant="download" ariaLabel="Descargar ticket" (clicked)="download.emit()" />
+
+    <app-icon-button variant="share" ariaLabel="Compartir ticket" (clicked)="share.emit()" />
+  </div>
+</article>

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

@@ -5,12 +5,13 @@
 
 .ticket {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) 78px auto;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: center;
   width: 100%;
-  min-height: 76px;
+  min-height: 56px;
   gap: 16px;
   padding: 16px 0;
+  background: transparent;
   color: #666666;
 }
 
@@ -21,8 +22,8 @@
 }
 
 .ticket__selection input {
-  width: 21px;
+  width: 16px;
-  height: 21px;
+  height: 16px;
   margin: 0;
   accent-color: var(--tenant-primary, #009933);
   cursor: pointer;
@@ -44,89 +45,56 @@
   font-size: 13px;
   font-weight: 700;
   line-height: 1.25;
-  text-transform: uppercase;
+  color: #666666;
 }
 
 .ticket__id {
-  margin-top: 3px;
   font-size: 12px;
+  font-weight: 400;
   line-height: 1.4;
+  color: #666666;
 }
 
 .ticket__date {
-  display: block;
   font-size: 10px;
+  font-weight: 400;
   line-height: 1.4;
+  color: #666666;
   white-space: nowrap;
 }
 
-.ticket__status {
-  text-align: center;
-}
-
-.ticket__expired {
-  display: block;
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1.4;
-  text-transform: uppercase;
-}
-
 .ticket__actions {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
 }
 
-:host ::ng-deep button.ticket__qr-button {
+:host ::ng-deep .ticket__qr-button {
-  width: 115px;
+  min-width: auto;
-  min-width: 0;
-  max-width: 115px;
   min-height: 36px;
   padding-inline: 14px;
 }
 
-.ticket--disabled {
-  grid-template-columns: minmax(0, 1fr) 78px auto;
-  color: #8a8a8a;
-}
-
-:host ::ng-deep .ticket--disabled button.ticket__qr-button:disabled {
-  --bs-btn-disabled-bg: #8a8a8a;
-  --bs-btn-disabled-border-color: #8a8a8a;
-  --bs-btn-disabled-color: #ffffff;
-  --bs-btn-disabled-opacity: 1;
-}
-
 .ticket__selection input:focus-visible {
   outline: 2px solid var(--tenant-primary, #009933);
   outline-offset: 2px;
 }
 
-@media (max-width: 767.98px) {
+@media (max-width: 575.98px) {
   .ticket {
     grid-template-columns: auto minmax(0, 1fr) auto;
     gap: 10px;
+    padding: 20px 0;
   }
 
-  .ticket__status {
+  .ticket__date {
     grid-column: 2;
+    grid-row: 2;
   }
 
   .ticket__actions {
     grid-column: 3;
     grid-row: 1 / span 2;
   }
-
-  .ticket--disabled {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  .ticket--disabled .ticket__status {
-    grid-column: 1;
-  }
-
-  .ticket--disabled .ticket__actions {
-    grid-column: 2;
-  }
 }

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

@@ -1,16 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 import { describe, expect, it, vi } from 'vitest';
-
 import { TicketComponent } from './ticket.component';
 
 describe('TicketComponent', () => {
-  it('renders its data and emits its actions', async () => {
+  it('renders the ticket data and emits every action', async () => {
     await TestBed.configureTestingModule({ imports: [TicketComponent] }).compileComponents();
 
     const fixture = TestBed.createComponent(TicketComponent);
     fixture.componentRef.setInput('title', 'ENTRADA GENERAL');
     fixture.componentRef.setInput('ticketId', '0000000000');
-    fixture.componentRef.setInput('date', '09 de octubre');
+    fixture.componentRef.setInput('date', '09 de Octubre');
 
     const viewQr = vi.fn();
     const download = vi.fn();
@@ -23,6 +22,7 @@ describe('TicketComponent', () => {
     const element = fixture.nativeElement as HTMLElement;
     expect(element.textContent).toContain('ENTRADA GENERAL');
     expect(element.textContent).toContain('ID: 0000000000');
+    expect(element.textContent).toContain('09 de Octubre');
 
     element.querySelector<HTMLButtonElement>('app-button button')?.click();
     element.querySelector<HTMLButtonElement>('[aria-label="Descargar ticket"]')?.click();
@@ -33,32 +33,18 @@ describe('TicketComponent', () => {
     expect(share).toHaveBeenCalledOnce();
   });
 
-  it('renders the expired disabled state without secondary actions', async () => {
+  it('supports two-way selection state', async () => {
     await TestBed.configureTestingModule({ imports: [TicketComponent] }).compileComponents();
 
     const fixture = TestBed.createComponent(TicketComponent);
     fixture.componentRef.setInput('ticketId', '0000000000');
-    fixture.componentRef.setInput('date', '09 de octubre');
+    fixture.componentRef.setInput('date', '09 de Octubre');
-    fixture.componentRef.setInput('disabled', true);
-    fixture.componentRef.setInput('expired', true);
-
-    const viewQr = vi.fn();
-    fixture.componentInstance.viewQr.subscribe(viewQr);
     fixture.detectChanges();
 
-    const element = fixture.nativeElement as HTMLElement;
+    const checkbox = fixture.nativeElement.querySelector('input') as HTMLInputElement;
-    const ticket = element.querySelector<HTMLElement>('.ticket');
+    checkbox.click();
-    const qrButton = element.querySelector<HTMLButtonElement>('app-button button');
+    fixture.detectChanges();
 
-    expect(ticket?.classList.contains('ticket--disabled')).toBe(true);
+    expect(fixture.componentInstance.selected()).toBe(true);
-    expect(ticket?.getAttribute('aria-disabled')).toBe('true');
-    expect(element.textContent).toContain('VENCIDO');
-    expect(qrButton?.disabled).toBe(true);
-    expect(element.querySelector('[aria-label="Descargar ticket"]')).toBeNull();
-    expect(element.querySelector('[aria-label="Compartir ticket"]')).toBeNull();
-    expect(element.querySelector('input[type="checkbox"]')).toBeNull();
-
-    qrButton?.click();
-    expect(viewQr).not.toHaveBeenCalled();
   });
 });

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

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
-
+import { ButtonComponent } from '../button/button.component';
-import { ButtonComponent } from '../../../../../../../../shared/components/button/button.component';
+import { IconButtonComponent } from '../icon-button/icon-button.component';
-import { IconButtonComponent } from '../../../../../../../../shared/components/icon-button/icon-button.component';
 
 @Component({
   selector: 'app-ticket',
@@ -12,10 +11,8 @@ import { IconButtonComponent } from '../../../../../../../../shared/components/i
 })
 export class TicketComponent {
   readonly title = input('ENTRADA GENERAL');
-  readonly ticketId = input.required<string | number>();
+  readonly ticketId = input.required<string>();
   readonly date = input<string | null>(null);
-  readonly disabled = input(false);
-  readonly expired = input(false);
   readonly selected = model(false);
 
   readonly viewQr = output<void>();