feat(checkout): add DNI input handling for transfer payments and update related components

This commit is contained in:
2026-07-16 11:28:33 -03:00
parent 36045656e7
commit fc425543ee
7 changed files with 17 additions and 4 deletions

View File

@@ -16,6 +16,7 @@
[selectedPaymentMethod]="selectedPaymentMethod()" [selectedPaymentMethod]="selectedPaymentMethod()"
[copiedTransferField]="copiedTransferField()" [copiedTransferField]="copiedTransferField()"
[transferAccount]="transferAccount()" [transferAccount]="transferAccount()"
[transferDni]="transferDni()"
[isGeneratingIntent]="isPaymentLoading()" [isGeneratingIntent]="isPaymentLoading()"
[qrData]="qrData()" [qrData]="qrData()"
(paymentMethodChange)="selectPaymentMethod($event)" (paymentMethodChange)="selectPaymentMethod($event)"

View File

@@ -87,6 +87,7 @@ export class CheckoutPageComponent implements OnInit {
protected readonly selectedPaymentMethod = signal<PaymentMethod>('qr'); protected readonly selectedPaymentMethod = signal<PaymentMethod>('qr');
protected readonly copiedTransferField = signal<TransferField | null>(null); protected readonly copiedTransferField = signal<TransferField | null>(null);
protected readonly transferAccount = signal<TransferAccount | null>(null); protected readonly transferAccount = signal<TransferAccount | null>(null);
protected readonly transferDni = signal<string>('');
protected readonly isCreatingPurchase = signal(false); protected readonly isCreatingPurchase = signal(false);
protected readonly createdPurchaseId = signal<number | null>(null); protected readonly createdPurchaseId = signal<number | null>(null);
@@ -246,6 +247,7 @@ export class CheckoutPageComponent implements OnInit {
return; return;
} }
this.transferDni.set(dni);
this.isGeneratingIntent.set(true); this.isGeneratingIntent.set(true);
try { try {
const response = await this.checkoutService.generatePaymentIntent( const response = await this.checkoutService.generatePaymentIntent(

View File

@@ -44,6 +44,7 @@
} @else if (selectedPaymentMethod() === 'transfer') { } @else if (selectedPaymentMethod() === 'transfer') {
<app-checkout-payment-transfer <app-checkout-payment-transfer
[transferAccount]="transferAccount()" [transferAccount]="transferAccount()"
[transferDni]="transferDni()"
[copiedTransferField]="copiedTransferField()" [copiedTransferField]="copiedTransferField()"
(copyTransferValue)="requestCopy($event.field, $event.value)" (copyTransferValue)="requestCopy($event.field, $event.value)"
(submitDni)="generateTransferIntent.emit($event)" (submitDni)="generateTransferIntent.emit($event)"

View File

@@ -19,6 +19,7 @@ export class CheckoutPaymentStepComponent {
readonly selectedPaymentMethod = input.required<PaymentMethod>(); readonly selectedPaymentMethod = input.required<PaymentMethod>();
readonly copiedTransferField = input<TransferField | null>(null); readonly copiedTransferField = input<TransferField | null>(null);
readonly transferAccount = input<TransferAccount | null>(null); readonly transferAccount = input<TransferAccount | null>(null);
readonly transferDni = input<string>('');
readonly isGeneratingIntent = input<boolean>(false); readonly isGeneratingIntent = input<boolean>(false);
readonly qrData = input<string | null>(null); readonly qrData = input<string | null>(null);

View File

@@ -38,7 +38,7 @@
</form> </form>
</div> </div>
@if (transferAccount()) { @if (transferAccount() && !isEditing()) {
<div class="payment-panel__divider"></div> <div class="payment-panel__divider"></div>
<div class="payment-panel__account"> <div class="payment-panel__account">
<p class="payment-panel__eyebrow">DATOS DE CUENTA:</p> <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>

View File

@@ -1,7 +1,7 @@
.payment-panel__card { .payment-panel__card {
width: 100%; width: 100%;
max-width: 320px; max-width: 320px;
min-height: 269px; min-height: 400px;
padding: 1.5rem 1.75rem; padding: 1.5rem 1.75rem;
border-radius: 5px; border-radius: 5px;
background: #ffffff; background: #ffffff;

View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core'; import { ChangeDetectionStrategy, Component, computed, input, output, signal, OnInit, effect, untracked } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms'; import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component'; import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
import { ButtonComponent } from '../../../../../../shared/components/button/button.component'; import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
@@ -13,8 +13,9 @@ import { TransferAccount, TransferField } from '../../checkout-page.models';
styleUrl: './checkout-payment-transfer.component.scss', styleUrl: './checkout-payment-transfer.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class CheckoutPaymentTransferComponent { export class CheckoutPaymentTransferComponent implements OnInit {
readonly transferAccount = input<TransferAccount | null>(null); readonly transferAccount = input<TransferAccount | null>(null);
readonly transferDni = input<string>('');
readonly copiedTransferField = input<TransferField | null>(null); readonly copiedTransferField = input<TransferField | null>(null);
readonly copyTransferValue = output<{ field: TransferField; value: string }>(); readonly copyTransferValue = output<{ field: TransferField; value: string }>();
@@ -29,6 +30,13 @@ export class CheckoutPaymentTransferComponent {
protected readonly isEditing = signal<boolean>(false); protected readonly isEditing = signal<boolean>(false);
protected readonly isDniDisabled = computed(() => !!this.transferAccount() && !this.isEditing()); protected readonly isDniDisabled = computed(() => !!this.transferAccount() && !this.isEditing());
ngOnInit(): void {
const dni = this.transferDni();
if (dni) {
this.dniControl.setValue(dni);
}
}
protected requestCopy(field: TransferField, value: string): void { protected requestCopy(field: TransferField, value: string): void {
this.copyTransferValue.emit({ field, value }); this.copyTransferValue.emit({ field, value });
} }