feat(checkout): add DNI input handling for transfer payments and update related components
This commit is contained in:
@@ -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)"
|
||||||
|
|||||||
@@ -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(
|
||||||
|
|||||||
@@ -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)"
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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 });
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user