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

feat(checkout): update payment validation logic and enhance UI feedback for transfer payments

Browse Source
This commit is contained in:
ncoronel
2026-08-18 17:23:50 -03:00
parent 53cee7ecdd
commit dce54ceb67
6 changed files with 106 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,6 @@ describe('CheckoutPageComponent payment validation', () => {
cancelPurchase: ReturnType<typeof vi.fn>;
generatePaymentIntent: ReturnType<typeof vi.fn>;
getPurchase: ReturnType<typeof vi.fn>;
submitPurchaseForReview: ReturnType<typeof vi.fn>;
withCustomLoading: ReturnType<typeof vi.fn>;
};
let cartServiceStub: {
@@ -61,7 +60,6 @@ describe('CheckoutPageComponent payment validation', () => {
qr_data: { qr_code: 'qr-value' },
}),
getPurchase: vi.fn().mockResolvedValue({ status: 'pending_payment' }),
submitPurchaseForReview: vi.fn().mockResolvedValue({ status: 'pending_payment' }),
withCustomLoading: vi.fn(),
};
checkoutServiceStub.withCustomLoading.mockReturnValue(checkoutServiceStub);
@@ -196,38 +194,36 @@ describe('CheckoutPageComponent payment validation', () => {
expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
});
it('checks a transfer once and redirects to purchase status while pending', async () => {
it('checks the purchase detail once when the transfer was made', async () => {
checkoutServiceStub.getPurchase.mockResolvedValue({ status: 'pending_payment' });
const { component } = createComponent();
component.selectedPaymentMethod.set('transfer');
await component.onComplete();
expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledTimes(1);
expect(component.transferValidationStatus()).toBe('pending');
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledWith('tenant-test', 25);
expect(component.transferValidationStatus()).toBe('error');
expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
expect(routerStub.navigate).not.toHaveBeenCalled();
await vi.advanceTimersByTimeAsync(30_000);
expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledTimes(1);
await component.onComplete();
expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledTimes(1);
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
});
it('navigates after a transfer is confirmed as paid', async () => {
checkoutServiceStub.submitPurchaseForReview.mockResolvedValue({ status: 'paid' });
checkoutServiceStub.getPurchase.mockResolvedValue({ status: 'paid' });
const { component } = createComponent();
component.selectedPaymentMethod.set('transfer');
await component.onComplete();
expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledWith('tenant-test', 25);
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 () => {
vi.spyOn(console, 'error').mockImplementation(() => undefined);
checkoutServiceStub.submitPurchaseForReview.mockRejectedValue(new Error('network error'));
checkoutServiceStub.getPurchase.mockRejectedValue(new Error('network error'));
const { component } = createComponent();
component.selectedPaymentMethod.set('transfer');

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

@@ -448,20 +448,16 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
try {
const purchase = await this.checkoutService
.withCustomLoading()
.submitPurchaseForReview(tenant.codigo, purchaseId);
if (purchase.status === 'paid' || purchase.status === 'pending_payment') {
if (purchase.status === 'pending_payment') {
this.transferValidationStatus.set('pending');
}
.getPurchase(tenant.codigo, purchaseId);
if (purchase.status === 'paid') {
this.navigateToPurchaseStatus(purchaseId);
return;
}
this.transferValidationStatus.set('error');
} catch (error) {
console.error('Failed to submit purchase for review:', error);
console.error('Failed to validate transfer payment:', error);
this.transferValidationStatus.set('error');
}
}

2
src/app/features/store/pages/checkout-page/checkout-page.models.ts
View File

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
export type PaymentMethod = 'qr' | 'transfer';
export type TransferField = 'cvu' | 'alias';
export type QrPaymentStatus = 'idle' | 'waiting' | 'timed_out' | 'failed';
export type TransferValidationStatus = 'idle' | 'checking' | 'pending' | 'error';
export type TransferValidationStatus = 'idle' | 'checking' | 'error';
export interface PaymentMethodOption {
id: PaymentMethod;

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

@@ -1,5 +1,5 @@
<div class="payment-panel__card">
@if (validationStatus() === 'pending' || validationStatus() === 'error') {
@if (validationStatus() === 'error') {
<app-payment-verification-error
[paymentAmount]="paymentAmount()"
[whatsappUrl]="whatsappUrl()"
@@ -102,5 +102,12 @@
</app-button>
</div>
}
@if (validationStatus() === 'checking') {
<div class="payment-verification" role="status" aria-live="polite">
<span class="payment-verification__spinner" aria-hidden="true"></span>
<span class="payment-verification__message">Verificando pago</span>
</div>
}
}
</div>

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

@@ -1,4 +1,5 @@
.payment-panel__card {
position: relative;
width: 100%;
max-width: 320px;
min-height: 400px;
@@ -13,6 +14,40 @@
text-align: center;
}
.payment-verification {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.45rem;
border-radius: inherit;
background: rgba(255, 255, 255, 0.82);
&__spinner {
width: 30px;
height: 30px;
border: 4px solid rgba(17, 17, 17, 0.2);
border-top-color: #111111;
border-radius: 50%;
animation: payment-verification-spin 0.75s linear infinite;
}
&__message {
color: #111111;
font-size: 0.72rem;
font-weight: 700;
}
}
@keyframes payment-verification-spin {
to {
transform: rotate(360deg);
}
}
.payment-panel__title {
max-width: 18rem;
margin: 0;

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

@@ -0,0 +1,50 @@
import { getTestBed, TestBed } from '@angular/core/testing';
import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
import { beforeAll, describe, expect, it } from 'vitest';
import { CheckoutPaymentTransferComponent } from './checkout-payment-transfer.component';
describe('CheckoutPaymentTransferComponent', () => {
beforeAll(() => {
try {
getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
} catch {
// Test environment may already be initialized by another setup entrypoint.
}
});
it('renders the payment verification overlay while checking the transfer', async () => {
await TestBed.configureTestingModule({
imports: [CheckoutPaymentTransferComponent],
}).compileComponents();
const fixture = TestBed.createComponent(CheckoutPaymentTransferComponent);
fixture.componentRef.setInput('validationStatus', 'checking');
fixture.detectChanges();
const overlay = fixture.nativeElement.querySelector('.payment-verification') as HTMLElement;
expect(overlay).not.toBeNull();
expect(overlay.textContent).toContain('Verificando pago');
expect(overlay.querySelector('.payment-verification__spinner')).not.toBeNull();
});
it('shows the QR payment error and WhatsApp action when validation fails', async () => {
await TestBed.configureTestingModule({
imports: [CheckoutPaymentTransferComponent],
}).compileComponents();
const fixture = TestBed.createComponent(CheckoutPaymentTransferComponent);
fixture.componentRef.setInput('validationStatus', 'error');
fixture.componentRef.setInput('paymentAmount', 300000);
fixture.componentRef.setInput('whatsappUrl', 'https://wa.me/543412602222');
fixture.detectChanges();
const element = fixture.nativeElement as HTMLElement;
const whatsapp = Array.from(element.querySelectorAll('button')).find((button) =>
button.textContent?.includes('WhatsApp'),
);
expect(element.textContent).toMatch(/No pudimos verificar el pago de \$\s*300\.000\./);
expect(whatsapp).toBeDefined();
expect(element.querySelector('.payment-verification')).toBeNull();
});
});