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

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/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 });
+  }
+}