tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(checkout): show transfer candidate reason after polling

Browse Source
This commit is contained in:
ncoronel
2026-08-27 16:55:21 -03:00
parent 65e8436ae1
commit eb524c7d99
10 changed files with 90 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/features/store/pages/checkout-page/checkout-page.component.html
View File

@@ -34,6 +34,7 @@
[qrPaymentAmount]="cartTotal()"
[whatsappUrl]="whatsappUrl()"
[transferValidationStatus]="transferValidationStatus()"
[transferVerificationErrorTitle]="transferVerificationErrorTitle()"
(paymentMethodChange)="selectPaymentMethod($event)"
(copyTransferValue)="copyTransferValue($event.field, $event.value)"
(cancelStep)="onCancel()"

46
src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts
View File

@@ -225,7 +225,7 @@ describe('CheckoutPageComponent payment validation', () => {
expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
});
it('polls a transfer every three seconds up to four attempts', async () => {
it('polls a transfer every three seconds for one minute', async () => {
checkoutServiceStub.getPurchase.mockResolvedValue({ status: 'pending_payment' });
const { component } = createComponent();
component.selectedPaymentMethod.set('transfer');
@@ -235,14 +235,12 @@ describe('CheckoutPageComponent payment validation', () => {
expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledWith('tenant-test', 25);
expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
for (let attempt = 1; attempt <= 3; attempt += 1) {
await vi.advanceTimersByTimeAsync(3_000);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(attempt);
expect(component.transferValidationStatus()).toBe('checking');
}
await vi.advanceTimersByTimeAsync(57_000);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(19);
expect(component.transferValidationStatus()).toBe('checking');
await vi.advanceTimersByTimeAsync(3_000);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(4);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(20);
expect(checkoutServiceStub.getPurchase).toHaveBeenLastCalledWith('tenant-test', 25);
expect(component.transferValidationStatus()).toBe('error');
expect(routerStub.navigate).not.toHaveBeenCalled();
@@ -286,13 +284,43 @@ describe('CheckoutPageComponent payment validation', () => {
component.selectedPaymentMethod.set('transfer');
await component.onComplete();
await vi.advanceTimersByTimeAsync(12_000);
await vi.advanceTimersByTimeAsync(60_000);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(4);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(20);
expect(component.transferValidationStatus()).toBe('error');
expect(routerStub.navigate).not.toHaveBeenCalled();
});
it('uses the primary candidate reason when transfer polling times out', async () => {
checkoutServiceStub.getPurchase.mockResolvedValue({
status: 'in_review',
payment_verification: {
status: 'candidate',
candidate_count: 1,
primary: {
reason: 'exact_amount_near_dni',
dni_distance: 1,
payment_amount: '300000.00',
purchase_amount: '300000.00',
amount_difference: '0.00',
confidence: 'medium',
detected_at: '2026-08-27T18:00:00-03:00',
},
reasons: ['exact_amount_near_dni'],
},
});
const { component } = createComponent();
component.selectedPaymentMethod.set('transfer');
await component.onComplete();
await vi.advanceTimersByTimeAsync(60_000);
expect(component.transferValidationStatus()).toBe('error');
expect(component.transferVerificationErrorTitle()).toBe(
'El DNI no corresponde con el de la transferencia',
);
});
it('does not poll when submitting a transfer for review fails', async () => {
vi.spyOn(console, 'error').mockImplementation(() => undefined);
checkoutServiceStub.submitPurchaseForReview.mockRejectedValue(new Error('network error'));

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

@@ -16,8 +16,10 @@ import { firstValueFrom, startWith } from 'rxjs';
import { TenantService } from '../../../../core/services/tenant.service';
import {
CheckoutService,
PurchasePaymentCandidateReason,
PurchaseDetailItemResponse,
PurchaseDetailResponse,
PurchaseStatusResponse,
} from '../../../../core/services/checkout.service';
import { AuthService } from '../../../../core/services/auth/auth.service';
import { GlobalLoadingService } from '../../../../core/services/global-loading/global-loading.service';
@@ -73,7 +75,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
private readonly qrPollingIntervalMs = 5_000;
private readonly qrPollingMaxAttempts = 120;
private readonly transferPollingIntervalMs = 3_000;
private readonly transferPollingMaxAttempts = 209;
private readonly transferPollingMaxAttempts = 20;
private qrPollingTimeoutId: ReturnType<typeof setTimeout> | null = null;
private qrPollingAttempts = 0;
@@ -102,8 +104,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
if (
!purchase ||
(typeof purchase.expires_at !== 'string' &&
typeof purchase.expires_in_seconds !== 'number')
(typeof purchase.expires_at !== 'string' && typeof purchase.expires_in_seconds !== 'number')
) {
return null;
}
@@ -159,6 +160,14 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
protected readonly qrPaymentStatus = signal<QrPaymentStatus>('idle');
protected readonly isCheckingQrPayment = signal(false);
protected readonly transferValidationStatus = signal<TransferValidationStatus>('idle');
private readonly transferPrimaryCandidateReason = signal<PurchasePaymentCandidateReason | null>(
null,
);
protected readonly transferVerificationErrorTitle = computed(() =>
this.transferPrimaryCandidateReason() === 'exact_amount_near_dni'
? 'El DNI no corresponde con el de la transferencia'
: null,
);
protected readonly whatsappUrl = computed(
() =>
this.tenantService
@@ -410,6 +419,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
this.transferDni.set(dni);
this.stopTransferPolling();
this.transferValidationStatus.set('idle');
this.transferPrimaryCandidateReason.set(null);
this.isGeneratingIntent.set(true);
try {
const response = await this.checkoutService
@@ -466,6 +476,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
this.stopTransferPolling();
this.hasSubmittedTransfer.set(true);
this.transferValidationStatus.set('checking');
this.transferPrimaryCandidateReason.set(null);
this.transferPollingAttempts = 0;
const runId = this.transferPollingRunId;
@@ -480,6 +491,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
}
this.checkoutCountdownService.synchronize(purchase);
this.captureTransferCandidateReason(purchase);
if (purchase.status === 'paid') {
this.navigateToPurchaseStatus(purchaseId);
@@ -531,6 +543,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
}
this.checkoutCountdownService.synchronize(purchase);
this.captureTransferCandidateReason(purchase);
if (purchase.status === 'paid') {
this.navigateToPurchaseStatus(purchaseId);
@@ -562,6 +575,14 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
this.scheduleTransferPoll(runId);
}
private captureTransferCandidateReason(purchase: PurchaseStatusResponse): void {
const reason = purchase.payment_verification?.primary?.reason;
if (reason) {
this.transferPrimaryCandidateReason.set(reason);
}
}
private stopTransferPolling(): void {
this.transferPollingRunId += 1;

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

@@ -53,6 +53,7 @@
[validationStatus]="transferValidationStatus()"
[paymentAmount]="qrPaymentAmount()"
[whatsappUrl]="whatsappUrl()"
[verificationErrorTitle]="transferVerificationErrorTitle()"
(copyTransferValue)="requestCopy($event.field, $event.value)"
(submitDni)="generateTransferIntent.emit($event)"
(completePurchase)="complete.emit()"

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

@@ -33,6 +33,7 @@ export class CheckoutPaymentStepComponent {
readonly qrPaymentAmount = input<number>(0);
readonly whatsappUrl = input<string | null>(null);
readonly transferValidationStatus = input<TransferValidationStatus>('idle');
readonly transferVerificationErrorTitle = input<string | null>(null);
readonly paymentMethodChange = output<PaymentMethod>();
readonly copyTransferValue = output<{ field: TransferField; value: string }>();

1
src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html
View File

@@ -3,6 +3,7 @@
<app-payment-verification-error
[paymentAmount]="paymentAmount()"
[whatsappUrl]="whatsappUrl()"
[title]="verificationErrorTitle()"
/>
} @else {
<div class="dni-form-container">

19
src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.spec.ts
View File

@@ -47,4 +47,23 @@ describe('CheckoutPaymentTransferComponent', () => {
expect(whatsapp).toBeDefined();
expect(element.querySelector('.payment-verification')).toBeNull();
});
it('shows a custom validation title for a near DNI candidate', async () => {
await TestBed.configureTestingModule({
imports: [CheckoutPaymentTransferComponent],
}).compileComponents();
const fixture = TestBed.createComponent(CheckoutPaymentTransferComponent);
fixture.componentRef.setInput('validationStatus', 'error');
fixture.componentRef.setInput(
'verificationErrorTitle',
'El DNI no corresponde con el de la transferencia',
);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain(
'El DNI no corresponde con el de la transferencia',
);
expect(fixture.nativeElement.textContent).not.toContain('No pudimos verificar el pago de');
});
});

1
src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts
View File

@@ -41,6 +41,7 @@ export class CheckoutPaymentTransferComponent implements OnInit {
readonly validationStatus = input<TransferValidationStatus>('idle');
readonly paymentAmount = input<number>(0);
readonly whatsappUrl = input<string | null>(null);
readonly verificationErrorTitle = input<string | null>(null);
readonly copyTransferValue = output<{ field: TransferField; value: string }>();
readonly submitDni = output<string>();

2
src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.html
View File

@@ -2,7 +2,7 @@
<div class="payment-timeout__icon" aria-hidden="true">
<i class="fa-solid fa-xmark"></i>
</div>
<h4 class="payment-timeout__title">No pudimos verificar el pago de {{ formattedAmount() }}.</h4>
<h4 class="payment-timeout__title">{{ displayTitle() }}</h4>
<p class="payment-timeout__message">Por favor contactate con nosotros para resolverlo.</p>
@if (whatsappUrl()) {
<app-button

4
src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.ts
View File

@@ -13,6 +13,7 @@ import { ButtonComponent } from '../../../../../../shared/components/button/butt
export class PaymentVerificationErrorComponent {
readonly paymentAmount = input<number>(0);
readonly whatsappUrl = input<string | null>(null);
readonly title = input<string | null>(null);
protected readonly formattedAmount = computed(() =>
new Intl.NumberFormat('es-AR', {
@@ -21,6 +22,9 @@ export class PaymentVerificationErrorComponent {
maximumFractionDigits: 0,
}).format(this.paymentAmount()),
);
protected readonly displayTitle = computed(
() => this.title() ?? `No pudimos verificar el pago de ${this.formattedAmount()}.`,
);
protected openWhatsApp(): void {
const url = this.whatsappUrl();