refactor: update payment validation logic to handle transfer statuses more effectively

src/app/core/services/checkout.service.ts

@@ -201,6 +201,25 @@ export class CheckoutService {
     };
   }
 
+  async submitPurchaseForReview(
+    tenantCode: string,
+    purchaseId: number,
+  ): Promise<PurchaseStatusResponse> {
+    const response = await firstValueFrom(
+      this.http.post<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(
+        `${environment.url}tenants/${tenantCode}/compras/${purchaseId}/review`,
+        {},
+      ),
+    );
+
+    const purchase = this.extractResponseData<PurchaseStatusResponse>(response);
+    if (!purchase) {
+      throw new Error('Error al enviar la compra a revisi\u00f3n.');
+    }
+
+    return { status: purchase.status ?? null };
+  }
+
   async cancelPurchase(tenantCode: string, purchaseId: number): Promise<PurchaseStatusResponse> {
     const response = await firstValueFrom(
       this.http.post<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(

src/app/features/store/pages/category-items-page/category-items-page.component.scss

@@ -3,15 +3,14 @@
   align-items: center;
   justify-content: center;
   padding: 16px 28px;
-  background-color: #d9d9d9;
 }
 
 .category-items__title {
-  color: #313131;
+  font-size: 24px;
-  font-size: 30px;
+  font-weight: bold;
-  font-weight: 400;
   line-height: 1.2;
   text-align: center;
+  color:var(--bs-primary)
 }
 
 .category-items__alert-error {

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

@@ -21,6 +21,7 @@ describe('CheckoutPageComponent payment validation', () => {
     cancelPurchase: ReturnType<typeof vi.fn>;
     generatePaymentIntent: ReturnType<typeof vi.fn>;
     getPurchase: ReturnType<typeof vi.fn>;
+    submitPurchaseForReview: ReturnType<typeof vi.fn>;
   };
   let cartServiceStub: {
     cart: ReturnType<typeof signal>;
@@ -58,6 +59,7 @@ describe('CheckoutPageComponent payment validation', () => {
         qr_data: { qr_code: 'qr-value' },
       }),
       getPurchase: vi.fn().mockResolvedValue({ status: 'pending_payment' }),
+      submitPurchaseForReview: vi.fn().mockResolvedValue({ status: 'in_review' }),
     };
     cartServiceStub = {
       cart: signal({
@@ -189,37 +191,37 @@ describe('CheckoutPageComponent payment validation', () => {
     expect(checkoutServiceStub.getPurchase).not.toHaveBeenCalled();
   });
 
-  it('shows the verification error without redirecting while a transfer is pending', async () => {
+  it.each(['created', 'pending_payment', 'in_review'])(
+    'shows the payment error when a transfer remains %s',
+    async (status) => {
+      checkoutServiceStub.submitPurchaseForReview.mockResolvedValue({ status });
       const { component } = createComponent();
       component.selectedPaymentMethod.set('transfer');
 
       await component.onComplete();
-    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
+
-    expect(component.transferValidationStatus()).toBe('pending');
+      expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledWith('tenant-test', 25);
+      expect(component.transferValidationStatus()).toBe('error');
       expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
       expect(routerStub.navigate).not.toHaveBeenCalled();
+    },
+  );
 
-    await vi.advanceTimersByTimeAsync(30_000);
+  it('submits a paid transfer and navigates to its confirmation page', async () => {
-    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
+    checkoutServiceStub.submitPurchaseForReview.mockResolvedValue({ status: 'paid' });
-
-    await component.onComplete();
-    expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(2);
-  });
-
-  it('navigates after a transfer is confirmed as paid', async () => {
-    checkoutServiceStub.getPurchase.mockResolvedValue({ status: 'paid' });
     const { component } = createComponent();
     component.selectedPaymentMethod.set('transfer');
 
     await component.onComplete();
 
+    expect(checkoutServiceStub.submitPurchaseForReview).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.getPurchase.mockRejectedValue(new Error('network error'));
+    checkoutServiceStub.submitPurchaseForReview.mockRejectedValue(new Error('network error'));
     const { component } = createComponent();
     component.selectedPaymentMethod.set('transfer');
 
@@ -365,7 +367,7 @@ describe('CheckoutPageComponent payment validation', () => {
     expect(component.qrPaymentStatus()).toBe('waiting');
   });
 
-  it.each(['paid', 'cancelled', 'rejected', 'expired'])(
+  it.each(['in_review', 'paid', 'cancelled', 'rejected', 'expired'])(
     'redirects a %s purchase to its status page',
     async (status) => {
       routeQueryParamMap = convertToParamMap({ purchase: 25 });

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

@@ -438,21 +438,19 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
     this.transferValidationStatus.set('checking');
 
     try {
-      const purchase = await this.checkoutService.getPurchase(tenant.codigo, purchaseId);
+      const purchase = await this.checkoutService.submitPurchaseForReview(
+        tenant.codigo,
+        purchaseId,
+      );
 
       if (purchase.status === 'paid') {
-        this.handleConfirmedPayment(purchaseId);
+        this.navigateToPurchaseStatus(purchaseId);
         return;
       }
 
-      if (purchase.status === 'pending_payment') {
+      this.transferValidationStatus.set('error');
-        this.transferValidationStatus.set('pending');
-        return;
-      }
-
-      this.transferValidationStatus.set('pending');
     } catch (error) {
-      console.error('Failed to validate transfer payment:', error);
+      console.error('Failed to submit purchase for review:', error);
       this.transferValidationStatus.set('error');
     }
   }
@@ -580,6 +578,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
       const purchase = await this.checkoutService.getPurchase(tenant.codigo, purchaseId);
 
       if (
+        purchase.status === 'in_review' ||
         purchase.status === 'paid' ||
         purchase.status === 'cancelled' ||
         purchase.status === 'rejected' ||