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

feat(checkout): implement transfer payment polling with cancellation

This commit is contained in:
ncoronel 2026-08-20 11:09:52 -03:00
parent e1d9590905
commit 38a57adf55
2 changed files with 101 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -213,19 +213,27 @@ describe('CheckoutPageComponent payment validation', () => {
expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
});
it('checks the purchase detail once when the transfer was made', async () => {
it('polls a transfer every three seconds up to four attempts', async () => {
checkoutServiceStub.getPurchase.mockResolvedValue({ status: 'pending_payment' });
const { component } = createComponent();
component.selectedPaymentMethod.set('transfer');
await component.onComplete();
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledWith('tenant-test', 25);
component.onComplete();
expect(component.transferValidationStatus()).toBe('checking');
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(3_000);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(4);
expect(checkoutServiceStub.getPurchase).toHaveBeenLastCalledWith('tenant-test', 25);
expect(component.transferValidationStatus()).toBe('error');
expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
expect(routerStub.navigate).not.toHaveBeenCalled();
await vi.advanceTimersByTimeAsync(30_000);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
});
it('navigates after a transfer is confirmed as paid', async () => {
@ -233,26 +241,46 @@ describe('CheckoutPageComponent payment validation', () => {
const { component } = createComponent();
component.selectedPaymentMethod.set('transfer');
await component.onComplete();
component.onComplete();
await vi.advanceTimersByTimeAsync(3_000);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledWith('tenant-test', 25);
expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
});
it('shows a retryable state when transfer validation fails', async () => {
it('keeps polling after transfer validation requests fail', async () => {
vi.spyOn(console, 'error').mockImplementation(() => undefined);
checkoutServiceStub.getPurchase.mockRejectedValue(new Error('network error'));
const { component } = createComponent();
component.selectedPaymentMethod.set('transfer');
await component.onComplete();
component.onComplete();
await vi.advanceTimersByTimeAsync(12_000);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(4);
expect(component.transferValidationStatus()).toBe('error');
expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
expect(routerStub.navigate).not.toHaveBeenCalled();
});
it('cancels transfer polling when the payment method changes or the component is destroyed', async () => {
const first = createComponent();
first.component.selectedPaymentMethod.set('transfer');
first.component.onComplete();
checkoutServiceStub.generatePaymentIntent.mockResolvedValueOnce({});
await first.component.selectPaymentMethod('qr');
await vi.advanceTimersByTimeAsync(12_000);
expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
const second = createComponent();
second.component.selectedPaymentMethod.set('transfer');
second.component.onComplete();
second.fixture.destroy();
await vi.advanceTimersByTimeAsync(12_000);
expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
});
it('loads purchase items but prefills customer data from the user', async () => {
const purchase = {
id: 25,

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

@ -60,10 +60,15 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
private readonly cartService = inject(CartService);
private readonly qrPollingIntervalMs = 5_000;
private readonly qrPollingMaxAttempts = 9;
private readonly transferPollingIntervalMs = 3_000;
private readonly transferPollingMaxAttempts = 4;
private qrPollingTimeoutId: ReturnType<typeof setTimeout> | null = null;
private qrPollingAttempts = 0;
private qrPollingRunId = 0;
private transferPollingTimeoutId: ReturnType<typeof setTimeout> | null = null;
private transferPollingAttempts = 0;
private transferPollingRunId = 0;
private paymentMethodRequestId = 0;
private navigationStarted = false;
@ -167,6 +172,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
this.stopQrPolling();
this.stopTransferPolling();
}
private mapPurchaseItemToMock(item: PurchaseDetailItemResponse): CartItemMock {
@ -211,6 +217,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
this.isEditingItems.set(true);
this.stopQrPolling();
this.stopTransferPolling();
this.qrData.set(null);
this.qrPaymentStatus.set('idle');
this.transferAccount.set(null);
@ -385,6 +392,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
public async canDeactivate(): Promise<boolean> {
this.stopQrPolling();
this.stopTransferPolling();
if (this.navigationStarted) {
return true;
@ -421,6 +429,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
}
this.stopQrPolling();
this.stopTransferPolling();
this.qrPaymentStatus.set('idle');
this.transferValidationStatus.set('idle');
this.selectedPaymentMethod.set(method);
@ -478,6 +487,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
}
this.transferDni.set(dni);
this.stopTransferPolling();
this.transferValidationStatus.set('idle');
this.isGeneratingIntent.set(true);
try {
@ -518,7 +528,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
}
}
protected async onComplete(): Promise<void> {
protected onComplete(): void {
const purchaseId = this.createdPurchaseId();
const tenant = this.tenantService.tenant();
@ -532,22 +542,72 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
return;
}
this.stopTransferPolling();
this.transferValidationStatus.set('checking');
this.transferPollingAttempts = 0;
const runId = this.transferPollingRunId;
this.scheduleTransferPoll(runId);
}
private scheduleTransferPoll(runId: number): void {
this.transferPollingTimeoutId = setTimeout(() => {
this.transferPollingTimeoutId = null;
void this.checkTransferPayment(runId);
}, this.transferPollingIntervalMs);
}
private async checkTransferPayment(runId: number): Promise<void> {
if (runId !== this.transferPollingRunId) {
return;
}
const purchaseId = this.createdPurchaseId();
const tenant = this.tenantService.tenant();
if (!purchaseId || !tenant || this.selectedPaymentMethod() !== 'transfer') {
this.stopTransferPolling();
return;
}
this.transferPollingAttempts += 1;
try {
const purchase = await this.checkoutService
.withCustomLoading()
.getPurchase(tenant.codigo, purchaseId);
if (runId !== this.transferPollingRunId) {
return;
}
if (purchase.status === 'paid') {
this.navigateToPurchaseStatus(purchaseId);
return;
}
this.transferValidationStatus.set('error');
} catch (error) {
console.error('Failed to validate transfer payment:', error);
}
if (runId !== this.transferPollingRunId) {
return;
}
if (this.transferPollingAttempts >= this.transferPollingMaxAttempts) {
this.stopTransferPolling();
this.transferValidationStatus.set('error');
return;
}
this.scheduleTransferPoll(runId);
}
private stopTransferPolling(): void {
this.transferPollingRunId += 1;
if (this.transferPollingTimeoutId !== null) {
clearTimeout(this.transferPollingTimeoutId);
this.transferPollingTimeoutId = null;
}
}
@ -661,6 +721,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
this.navigationStarted = true;
this.stopQrPolling();
this.stopTransferPolling();
void this.router.navigate(['/checkout/status', purchaseId]);
}