From 591f53c102d87b56d4ca68c890fb5f4812867082 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Wed, 26 Aug 2026 10:29:23 -0300 Subject: [PATCH 01/17] Squashed commit of the following: commit 38d03588b162d79606470312855b4f25c307b706 Merge: 8e987d0 6f4aa3b Author: ncoronel Date: Wed Aug 26 10:25:23 2026 -0300 Merge branch 'fix/cart-expiration-notification' of https://gitea.quo.ar/tbianchini/shopit-front into fix/cart-expiration-notification commit 8e987d0ce6c024c25059778d20acd36d6d3704cf Author: ncoronel Date: Wed Aug 26 10:02:26 2026 -0300 fix(purchase-status): clear cart on approved purchase commit e171b9a233c32e0d32a63a24f2748bd5be625443 Author: ncoronel Date: Tue Aug 25 17:06:07 2026 -0300 refactor(checkout): use purchase id route segment commit 643d43adea752f639bac9b85a7c0713d717c6b1a Author: ncoronel Date: Tue Aug 25 17:05:59 2026 -0300 fix(checkout): handle expired purchase exits commit d89d01b511a2dc231d3bf52fdece4b49b1c8e354 Author: ncoronel Date: Tue Aug 25 16:47:17 2026 -0300 fix(checkout): refresh expired carts commit eeb245209b10a347bdc4a6245abf59bcef3a3f86 Author: ncoronel Date: Tue Aug 25 16:46:12 2026 -0300 fix(checkout): show backend start errors commit 9d3754c2d85834abf5b0456d4fe7e3a893bd9a44 Author: ncoronel Date: Tue Aug 25 16:33:44 2026 -0300 fix(cart): refresh state after expiration commit 6f4aa3b1bd3c35ed4d86e31d17c066bf56f8e2fa Author: ncoronel Date: Wed Aug 26 10:02:26 2026 -0300 fix(purchase-status): clear cart on approved purchase commit 2b342ec235220964a22d5e59f60ee7d38ead8c5a Author: ncoronel Date: Tue Aug 25 17:06:07 2026 -0300 refactor(checkout): use purchase id route segment commit d06b146104b7f61f784180d9a40a590a78679388 Author: ncoronel Date: Tue Aug 25 17:05:59 2026 -0300 fix(checkout): handle expired purchase exits commit f4e0a9e028eb49d3812c1eaf569a5dfa860933cf Author: ncoronel Date: Tue Aug 25 16:47:17 2026 -0300 fix(checkout): refresh expired carts commit 8c2b738806569094456a90eb0e90de4ba9f01353 Author: ncoronel Date: Tue Aug 25 16:46:12 2026 -0300 fix(checkout): show backend start errors commit 1362d0c1632fd634d2c03be79af3ffbbd71fd129 Author: ncoronel Date: Tue Aug 25 16:33:44 2026 -0300 fix(cart): refresh state after expiration --- src/app/app.routes.spec.ts | 46 ++++++++-- src/app/core/guards/menu.guard.spec.ts | 2 +- .../store-layout.component.spec.ts | 43 +++++++-- .../store-layout/store-layout.component.ts | 22 +++-- .../core/services/auth/auth.guards.spec.ts | 6 +- src/app/core/services/checkout.service.ts | 15 ++++ .../category-items-page.component.ts | 19 +++- .../checkout-page.component.spec.ts | 77 ++++++++++++---- .../checkout-page/checkout-page.component.ts | 87 +++++++++++++++++-- .../product-detail-page.component.spec.ts | 4 +- .../product-detail-page.component.ts | 4 +- .../purchase-status-page.component.spec.ts | 35 +++++++- .../purchase-status-page.component.ts | 25 +++++- .../search-page/search-page.component.ts | 19 +++- .../store-home-page.component.ts | 11 ++- src/app/features/store/store.routes.ts | 18 ++-- .../components/cart/cart.component.spec.ts | 57 ++++++++++++ .../shared/components/cart/cart.component.ts | 41 +++++++-- 18 files changed, 455 insertions(+), 76 deletions(-) diff --git a/src/app/app.routes.spec.ts b/src/app/app.routes.spec.ts index 55f51b7..33e9f1b 100644 --- a/src/app/app.routes.spec.ts +++ b/src/app/app.routes.spec.ts @@ -7,6 +7,7 @@ import { of } from 'rxjs'; import { App } from './app'; import { AuthService } from './core/services/auth/auth.service'; import { CartService } from './core/services/cart/cart.service'; +import { CheckoutService } from './core/services/checkout.service'; import { Tenant } from './core/services/tenant.interface'; import { TenantService } from './core/services/tenant.service'; import { routes } from './app.routes'; @@ -97,6 +98,21 @@ async function renderAppAt( { provide: AuthService, useValue: authService + }, + { + provide: CheckoutService, + useValue: { + withCustomLoading() { + return this; + }, + getPurchase: vi.fn().mockResolvedValue({ + id: 25, + status: 'created', + items: [], + subtotal: '0.00', + total: '0.00' + }) + } } ] }).compileComponents(); @@ -246,15 +262,33 @@ describe('app routes', () => { expect(compiled.textContent).toContain('No encontramos una tienda para este dominio'); }); - it('redirects unauthenticated users from /checkout to /login', async () => { - const { router } = await renderAppAt('/checkout', createTenantServiceStub(), createAuthServiceStub(false)); + it('redirects unauthenticated users from /checkout/:id to /login', async () => { + const { router } = await renderAppAt('/checkout/25', createTenantServiceStub(), createAuthServiceStub(false)); - expect(router.url).toBe('/login?returnUrl=%2Fcheckout'); + expect(router.url).toBe('/login?returnUrl=%2Fcheckout%2F25'); }); - it('allows authenticated users to access /checkout', async () => { - const { router } = await renderAppAt('/checkout', createTenantServiceStub(), createAuthServiceStub(true)); + it('allows authenticated users to access /checkout/:id', async () => { + const checkoutTenant = { + ...tenant, + menues: [ + { + id: 1, + code: 'checkout', + label: 'Checkout', + parent_menu_code: null, + content_type: 'dynamic' as const, + route: '/checkout', + submenues: [] + } + ] + }; + const { router } = await renderAppAt( + '/checkout/25', + createTenantServiceStub('ready', checkoutTenant), + createAuthServiceStub(true) + ); - expect(router.url).toBe('/checkout'); + expect(router.url).toBe('/checkout/25'); }); }); diff --git a/src/app/core/guards/menu.guard.spec.ts b/src/app/core/guards/menu.guard.spec.ts index e8159e6..3bf9479 100644 --- a/src/app/core/guards/menu.guard.spec.ts +++ b/src/app/core/guards/menu.guard.spec.ts @@ -62,7 +62,7 @@ describe('hasMenuGuard', () => { }); it('redirects a missing menu route to the store root', () => { - const result = runGuard('checkout', '/checkout', tenant); + const result = runGuard('checkout', '/checkout/25', tenant); expect(result instanceof UrlTree).toBe(true); expect(TestBed.inject(Router).serializeUrl(result as UrlTree)).toBe('/'); diff --git a/src/app/core/layout/store-layout/store-layout.component.spec.ts b/src/app/core/layout/store-layout/store-layout.component.spec.ts index 6dc5dea..2f6f160 100644 --- a/src/app/core/layout/store-layout/store-layout.component.spec.ts +++ b/src/app/core/layout/store-layout/store-layout.component.spec.ts @@ -1,5 +1,6 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'; import { signal } from '@angular/core'; +import { HttpErrorResponse } from '@angular/common/http'; import { TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { @@ -246,7 +247,7 @@ describe('StoreLayoutComponent', () => { it('disables the cart icon and prevents opening the popup during checkout with a tenant base path', () => { tenantState.set({ ...tenant, base_path: 'fiesta' }); const router = TestBed.inject(Router); - vi.spyOn(router, 'url', 'get').mockReturnValue('/fiesta/checkout?purchase=25'); + vi.spyOn(router, 'url', 'get').mockReturnValue('/fiesta/checkout/25'); const fixture = TestBed.createComponent(StoreLayoutComponent); fixture.detectChanges(); @@ -587,7 +588,7 @@ describe('StoreLayoutComponent', () => { const authService = TestBed.inject(AuthService); const cartService = TestBed.inject(CartService); const router = TestBed.inject(Router); - vi.spyOn(router, 'url', 'get').mockReturnValue('/checkout?purchase=25'); + vi.spyOn(router, 'url', 'get').mockReturnValue('/checkout/25'); const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true); const fixture = TestBed.createComponent(StoreLayoutComponent); @@ -674,12 +675,44 @@ describe('StoreLayoutComponent', () => { expect(checkoutServiceStub.startCheckout).toHaveBeenCalledWith('test', { cart_id: 1, }); - expect(router.navigate).toHaveBeenCalledWith(['/checkout'], { - queryParams: { purchase: 55 }, - }); + expect(router.navigate).toHaveBeenCalledWith(['/checkout', 55]); expect((fixture.componentInstance as any).isCartOpen()).toBe(false); }); + it('shows the backend message and refreshes the cart when its reservation expired', async () => { + const message = 'La reserva de stock venció. Usá el carrito activo para continuar.'; + checkoutServiceStub.startCheckout.mockRejectedValue( + new HttpErrorResponse({ + status: 422, + error: { code: 'stock_reservation.expired', message }, + }), + ); + cartState.set({ + id: 1, + tenant_codigo: tenant.codigo, + status: 'active', + subtotal: '100.00', + items: [], + }); + authUserState.set({ + id: 7, + nombre_apellido: 'Juan Perez', + email: 'juan@example.com', + dni: '12345678', + telefono: '3415555555', + }); + + const fixture = TestBed.createComponent(StoreLayoutComponent); + const loadCart = vi.spyOn(TestBed.inject(CartService), 'loadCart'); + fixture.detectChanges(); + loadCart.mockClear(); + + await (fixture.componentInstance as any).onCheckoutClick(); + + expect(TestBed.inject(ToastService).danger).toHaveBeenCalledWith(message); + expect(loadCart).toHaveBeenCalledOnce(); + }); + it('allows modifying quantities directly in the regular cart without a toggle', () => { cartState.set({ id: 1, diff --git a/src/app/core/layout/store-layout/store-layout.component.ts b/src/app/core/layout/store-layout/store-layout.component.ts index 53e8b10..e812afc 100644 --- a/src/app/core/layout/store-layout/store-layout.component.ts +++ b/src/app/core/layout/store-layout/store-layout.component.ts @@ -1,3 +1,4 @@ +import { HttpErrorResponse } from '@angular/common/http'; import { Component, computed, DestroyRef, inject, OnInit, signal } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { @@ -17,7 +18,10 @@ import { ButtonComponent } from '../../../shared/components/button/button.compon import { CartItem, CartItemVariantValue } from '../../services/cart/cart.interface'; import { AuthService } from '../../services/auth/auth.service'; import { findMenu } from '../../services/menu.utils'; -import { CheckoutService } from '../../services/checkout.service'; +import { + CheckoutService, + isExpiredStockReservationResponse, +} from '../../services/checkout.service'; import { ToastService } from '../../services/toast.service'; import { Category } from '../../services/tenant.interface'; @@ -273,12 +277,20 @@ export class StoreLayoutComponent implements OnInit { }); this.isCartOpen.set(false); - await this.router.navigate(['/checkout'], { - queryParams: { purchase: purchase.id }, - }); + await this.router.navigate(['/checkout', purchase.id]); } catch (error) { console.error('Failed to create cart purchase:', error); - this.toastService.danger('No se pudo iniciar la compra.'); + const message = + error instanceof HttpErrorResponse && typeof error.error?.message === 'string' + ? error.error.message + : 'No se pudo iniciar la compra.'; + this.toastService.danger(message); + + if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) { + this.cartService.loadCart().subscribe({ + error: (refreshError) => console.error('Error refreshing expired cart', refreshError), + }); + } } finally { this.isCreatingPurchase.set(false); } diff --git a/src/app/core/services/auth/auth.guards.spec.ts b/src/app/core/services/auth/auth.guards.spec.ts index 485a57a..fefb63d 100644 --- a/src/app/core/services/auth/auth.guards.spec.ts +++ b/src/app/core/services/auth/auth.guards.spec.ts @@ -24,12 +24,12 @@ describe('auth guards', () => { }); const result = TestBed.runInInjectionContext(() => - authGuard(null as never, { url: '/checkout?mode=direct' } as never), + authGuard(null as never, { url: '/checkout/25' } as never), ); expect(result instanceof UrlTree).toBe(true); expect(TestBed.inject(Router).serializeUrl(result as UrlTree)).toBe( - '/login?returnUrl=%2Fcheckout%3Fmode%3Ddirect', + '/login?returnUrl=%2Fcheckout%2F25', ); }); @@ -39,7 +39,7 @@ describe('auth guards', () => { }); const result = TestBed.runInInjectionContext(() => - authGuard(null as never, { url: '/checkout' } as never), + authGuard(null as never, { url: '/checkout/25' } as never), ); expect(result).toBe(true); diff --git a/src/app/core/services/checkout.service.ts b/src/app/core/services/checkout.service.ts index df1a4e2..1952549 100644 --- a/src/app/core/services/checkout.service.ts +++ b/src/app/core/services/checkout.service.ts @@ -45,6 +45,21 @@ export function isInsufficientStockResponse(value: unknown): value is Insufficie ); } +export interface ExpiredStockReservationResponse { + code: 'stock_reservation.expired'; + message: string; +} + +export function isExpiredStockReservationResponse( + value: unknown, +): value is ExpiredStockReservationResponse { + return ( + typeof value === 'object' && + value !== null && + (value as Partial).code === 'stock_reservation.expired' + ); +} + export type StartCheckoutPayload = | { cart_id: number; diff --git a/src/app/features/store/pages/category-items-page/category-items-page.component.ts b/src/app/features/store/pages/category-items-page/category-items-page.component.ts index 4af5b4f..8150675 100644 --- a/src/app/features/store/pages/category-items-page/category-items-page.component.ts +++ b/src/app/features/store/pages/category-items-page/category-items-page.component.ts @@ -23,7 +23,10 @@ import { import { AuthService } from '../../../../core/services/auth/auth.service'; import { CartService } from '../../../../core/services/cart/cart.service'; -import { CheckoutService } from '../../../../core/services/checkout.service'; +import { + CheckoutService, + isExpiredStockReservationResponse, +} from '../../../../core/services/checkout.service'; import { CatalogGroupLayout, CategoryItemsResponse, @@ -167,10 +170,20 @@ export class CategoryItemsPageComponent { ], }, ); - await this.router.navigate(['/checkout'], { queryParams: { purchase: purchase.id } }); + await this.router.navigate(['/checkout', purchase.id]); } catch (error) { console.error('Failed to create direct purchase:', error); - this.toastService.danger('No se pudo iniciar la compra directa.'); + const message = + error instanceof HttpErrorResponse && typeof error.error?.message === 'string' + ? error.error.message + : 'No se pudo iniciar la compra directa.'; + this.toastService.danger(message); + + if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) { + this.cartService.loadCart().subscribe({ + error: (refreshError) => console.error('Error refreshing expired cart', refreshError), + }); + } } finally { this.creatingDirectPurchase.set(false); } diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts index 77b29a7..9893f29 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts @@ -33,7 +33,7 @@ describe('CheckoutPageComponent payment validation', () => { stop: ReturnType; }; let cartServiceStub: { loadCart: ReturnType }; - let routeQueryParamMap: ReturnType; + let routeParamMap: ReturnType; let authUserState: ReturnType; let tenantState: ReturnType< typeof signal<{ @@ -76,7 +76,7 @@ describe('CheckoutPageComponent payment validation', () => { cartServiceStub = { loadCart: vi.fn().mockReturnValue(of({ id: 30, items: [], subtotal: '0.00' })), }; - routeQueryParamMap = convertToParamMap({}); + routeParamMap = convertToParamMap({}); authUserState = signal(null); tenantState = signal({ codigo: 'tenant-test', @@ -103,8 +103,8 @@ describe('CheckoutPageComponent payment validation', () => { provide: ActivatedRoute, useValue: { snapshot: { - get queryParamMap() { - return routeQueryParamMap; + get paramMap() { + return routeParamMap; }, }, }, @@ -317,7 +317,7 @@ describe('CheckoutPageComponent payment validation', () => { subtotal: '2501.00', total: '2501.00', }; - routeQueryParamMap = convertToParamMap({ purchase: 25 }); + routeParamMap = convertToParamMap({ id: 25 }); checkoutServiceStub.getPurchase.mockResolvedValue(purchase); authUserState.set({ id: 7, @@ -354,7 +354,7 @@ describe('CheckoutPageComponent payment validation', () => { it('keeps the checkout hidden while the purchase is loading', async () => { let resolvePurchase!: (purchase: any) => void; - routeQueryParamMap = convertToParamMap({ purchase: 25 }); + routeParamMap = convertToParamMap({ id: 25 }); checkoutServiceStub.getPurchase.mockReturnValue( new Promise((resolve) => { resolvePurchase = resolve; @@ -375,12 +375,13 @@ describe('CheckoutPageComponent payment validation', () => { }); await Promise.resolve(); + expect(checkoutServiceStub.getPurchase).toHaveBeenCalledWith('tenant-test', 25); expect(component.isLoadingPurchase()).toBe(false); expect(component.checkoutStepIndex()).toBe(0); }); it('opens a pending purchase on the payment step and restores its payment method', async () => { - routeQueryParamMap = convertToParamMap({ purchase: 25 }); + routeParamMap = convertToParamMap({ id: 25 }); checkoutServiceStub.getPurchase.mockResolvedValue({ id: 25, status: 'pending_payment', @@ -400,7 +401,7 @@ describe('CheckoutPageComponent payment validation', () => { }); it('generates a new QR when reopening a pending QR purchase', async () => { - routeQueryParamMap = convertToParamMap({ purchase: 25 }); + routeParamMap = convertToParamMap({ id: 25 }); checkoutServiceStub.getPurchase.mockResolvedValue({ id: 25, status: 'pending_payment', @@ -424,7 +425,7 @@ describe('CheckoutPageComponent payment validation', () => { it.each(['paid', 'cancelled', 'rejected', 'expired'])( 'redirects a %s purchase to its status page', async (status) => { - routeQueryParamMap = convertToParamMap({ purchase: 25 }); + routeParamMap = convertToParamMap({ id: 25 }); checkoutServiceStub.getPurchase.mockResolvedValue({ id: 25, status, @@ -442,7 +443,7 @@ describe('CheckoutPageComponent payment validation', () => { ); it('redirects a submitted pending payment purchase to its status page', async () => { - routeQueryParamMap = convertToParamMap({ purchase: 25 }); + routeParamMap = convertToParamMap({ id: 25 }); checkoutServiceStub.getPurchase.mockResolvedValue({ id: 25, status: 'pending_payment', @@ -460,7 +461,7 @@ describe('CheckoutPageComponent payment validation', () => { expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]); }); - it('shows the API error in a toast when cancelling the purchase fails', async () => { + it('shows the API error and redirects to status when cancellation finds an expired purchase', async () => { const message = 'La compra venció. Iniciá una nueva compra.'; checkoutServiceStub.cancelPurchase.mockRejectedValue({ error: { code: 'purchase.expired', message }, @@ -470,7 +471,9 @@ describe('CheckoutPageComponent payment validation', () => { await component.onModifyPurchase(); expect(toastServiceStub.danger).toHaveBeenCalledWith(message); - expect(routerStub.navigate).not.toHaveBeenCalled(); + expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25], { + queryParams: { status: 'expired' }, + }); expect(globalLoadingServiceStub.start).toHaveBeenCalledOnce(); expect(globalLoadingServiceStub.stop).toHaveBeenCalledOnce(); expect(component.isCancellingPurchase()).toBe(false); @@ -587,7 +590,24 @@ describe('CheckoutPageComponent payment validation', () => { expect(component.createdPurchaseId()).toBe(25); }); - it('shows the API message and redirects home when a checkout operation finds an expired purchase', async () => { + it('allows leaving checkout when cancellation finds an expired stock reservation', async () => { + const message = 'La reserva de stock venció. Usá el carrito activo para continuar.'; + checkoutServiceStub.cancelPurchase.mockRejectedValue({ + error: { code: 'stock_reservation.expired', message }, + }); + const { component } = createComponent(); + + await expect(component.canDeactivate()).resolves.toBe(true); + + expect(toastServiceStub.danger).toHaveBeenCalledWith(message); + expect(cartServiceStub.loadCart).toHaveBeenCalledOnce(); + expect(component.createdPurchaseId()).toBeNull(); + expect(component.createdPurchase()).toBeNull(); + expect(globalLoadingServiceStub.start).toHaveBeenCalledOnce(); + expect(globalLoadingServiceStub.stop).toHaveBeenCalledOnce(); + }); + + it('shows the API message and redirects to status when a checkout operation finds an expired purchase', async () => { checkoutServiceStub.generatePaymentIntent.mockRejectedValue( new HttpErrorResponse({ status: 422, @@ -604,10 +624,35 @@ describe('CheckoutPageComponent payment validation', () => { expect(toastServiceStub.danger).toHaveBeenCalledWith( 'La compra venci\u00f3. Inici\u00e1 una nueva compra.', ); - expect(routerStub.navigate).toHaveBeenCalledWith(['/']); + expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25], { + queryParams: { status: 'expired' }, + }); expect(component.isGeneratingIntent()).toBe(false); }); + it('redirects to status when QR polling receives a purchase-expired response', async () => { + checkoutServiceStub.getPurchase.mockRejectedValue( + new HttpErrorResponse({ + status: 422, + error: { + code: 'purchase.expired', + message: 'La compra venci\u00f3. Inici\u00e1 una nueva compra.', + }, + }), + ); + const { component } = createComponent(); + + await component.selectPaymentMethod('qr'); + await vi.advanceTimersByTimeAsync(5_000); + + expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25], { + queryParams: { status: 'expired' }, + }); + expect(toastServiceStub.danger).toHaveBeenCalledWith( + 'La compra venci\u00f3. Inici\u00e1 una nueva compra.', + ); + }); + it('treats a generic customer-data error as expired when the local deadline passed', () => { const { component } = createComponent(); component.createdPurchase.set({ @@ -635,6 +680,8 @@ describe('CheckoutPageComponent payment validation', () => { expect(toastServiceStub.danger).toHaveBeenCalledWith( 'La compra venci\u00f3. Inici\u00e1 una nueva compra.', ); - expect(routerStub.navigate).toHaveBeenCalledWith(['/']); + expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25], { + queryParams: { status: 'expired' }, + }); }); }); diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.ts index e4205dd..d15bf71 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts @@ -161,7 +161,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { } ngOnInit(): void { - const purchaseId = Number(this.route.snapshot.queryParamMap.get('purchase')); + const purchaseId = Number(this.route.snapshot.paramMap.get('id')); if (!Number.isInteger(purchaseId) || purchaseId <= 0) { void this.router.navigate(['/']); return; @@ -296,6 +296,18 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { return true; } catch (error) { console.error('Failed to cancel the current purchase:', error); + + if (this.isStockReservationExpiredError(error)) { + this.showRequestError(error, 'La reserva de stock venció.'); + this.cartService.loadCart().subscribe({ + error: (refreshError) => console.error('Error refreshing expired cart', refreshError), + }); + this.createdPurchaseId.set(null); + this.createdPurchase.set(null); + this.navigationStarted = true; + return true; + } + this.showRequestError(error, 'No se pudo cancelar la compra.'); return false; } finally { @@ -492,8 +504,17 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { this.navigateToPurchaseStatus(purchaseId); return; } + + if (purchase.status === 'expired') { + this.navigateToPurchaseStatus(purchaseId); + return; + } } catch (error) { console.error('Failed to validate transfer payment:', error); + if (this.isPurchaseExpiredError(error)) { + this.showRequestError(error, 'La compra venció. Iniciá una nueva compra.'); + return; + } } if (runId !== this.transferPollingRunId) { @@ -575,8 +596,17 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { this.qrPaymentStatus.set('failed'); return; } + + if (purchase.status === 'expired') { + this.navigateToPurchaseStatus(purchaseId); + return; + } } catch (error) { console.error('Failed to validate QR payment:', error); + if (this.isPurchaseExpiredError(error)) { + this.showRequestError(error, 'La compra venció. Iniciá una nueva compra.'); + return; + } } finally { if (runId === this.qrPollingRunId) { this.isCheckingQrPayment.set(false); @@ -683,15 +713,17 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { } } catch (error) { console.error('Failed to load purchase:', error); - this.showRequestError(error, 'No se pudo cargar la compra.'); - void this.router.navigate(['/']); + const expired = this.showRequestError(error, 'No se pudo cargar la compra.'); + if (!expired) { + void this.router.navigate(['/']); + } } } - private showRequestError(error: unknown, fallbackMessage: string): void { + private showRequestError(error: unknown, fallbackMessage: string): boolean { const payload = typeof error === 'object' && error !== null && 'error' in error - ? (error as { error?: { message?: unknown } }).error + ? (error as { error?: ApiErrorResponse }).error : undefined; const message = typeof payload?.message === 'string' && payload.message.trim() @@ -699,6 +731,13 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { : fallbackMessage; this.toastService.danger(message); + + if (payload?.code === 'purchase.expired') { + this.navigateToExpiredPurchaseStatus(); + return true; + } + + return false; } private handleCheckoutError(error: unknown, fallbackMessage: string): boolean { @@ -717,7 +756,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { ? response.message : 'La compra venció. Iniciá una nueva compra.', ); - void this.router.navigate(['/']); + this.navigateToExpiredPurchaseStatus(); return true; } @@ -729,6 +768,42 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { return false; } + private navigateToExpiredPurchaseStatus(): void { + const purchaseId = this.createdPurchaseId() ?? this.createdPurchase()?.id; + + if (purchaseId) { + if (this.navigationStarted) { + return; + } + + this.navigationStarted = true; + this.stopQrPolling(); + this.stopTransferPolling(); + void this.router.navigate(['/checkout/status', purchaseId], { + queryParams: { status: 'expired' }, + }); + return; + } + + void this.router.navigate(['/']); + } + + private isPurchaseExpiredError(error: unknown): boolean { + if (typeof error !== 'object' || error === null || !('error' in error)) { + return false; + } + + return (error as { error?: ApiErrorResponse }).error?.code === 'purchase.expired'; + } + + private isStockReservationExpiredError(error: unknown): boolean { + if (typeof error !== 'object' || error === null || !('error' in error)) { + return false; + } + + return (error as { error?: ApiErrorResponse }).error?.code === 'stock_reservation.expired'; + } + private hasExpiredPurchase(): boolean { const purchase = this.createdPurchase(); diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts index 5e020c8..e1c7350 100644 --- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts +++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts @@ -507,9 +507,7 @@ describe('ProductDetailPageComponent', () => { }, ], }); - expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout'], { - queryParams: { purchase: 44 }, - }); + expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout', 44]); }); it('shows the backend purchase-limit message for a direct checkout', async () => { diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts index 0e869a6..9729331 100644 --- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts +++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts @@ -358,9 +358,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy { ], }); - await this.router.navigate(['/checkout'], { - queryParams: { purchase: purchase.id }, - }); + await this.router.navigate(['/checkout', purchase.id]); } catch (error) { console.error('Failed to create direct purchase:', error); const message = diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts index a41a839..6dcf23c 100644 --- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts +++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts @@ -5,6 +5,7 @@ import { CheckoutService, PurchaseDetailResponse, } from '../../../../core/services/checkout.service'; +import { CartService } from '../../../../core/services/cart/cart.service'; import { Tenant } from '../../../../core/services/tenant.interface'; import { TenantService } from '../../../../core/services/tenant.service'; import { PurchaseStatusPageComponent } from './purchase-status-page.component'; @@ -66,7 +67,7 @@ describe('PurchaseStatusPageComponent', () => { TestBed.resetTestingModule(); }); - async function render(hasGeneratedTickets: boolean) { + async function render(hasGeneratedTickets: boolean, forcedStatus?: string) { const checkoutService = { getPurchase: vi.fn().mockResolvedValue(purchase(hasGeneratedTickets)), withCustomLoading() { @@ -77,15 +78,24 @@ describe('PurchaseStatusPageComponent', () => { navigate: vi.fn().mockResolvedValue(true), navigateByUrl: vi.fn().mockResolvedValue(true), }; + const cartService = { clearCart: vi.fn() }; await TestBed.configureTestingModule({ imports: [PurchaseStatusPageComponent], providers: [ { provide: CheckoutService, useValue: checkoutService }, + { provide: CartService, useValue: cartService }, { provide: TenantService, useValue: { tenant: () => tenant } }, { provide: ActivatedRoute, - useValue: { snapshot: { paramMap: convertToParamMap({ id: '42' }) } }, + useValue: { + snapshot: { + paramMap: convertToParamMap({ id: '42' }), + queryParamMap: convertToParamMap( + forcedStatus ? { status: forcedStatus } : {}, + ), + }, + }, }, { provide: Router, useValue: router }, ], @@ -100,15 +110,22 @@ describe('PurchaseStatusPageComponent', () => { fixture, element: fixture.nativeElement as HTMLElement, checkoutService, + cartService, router, }; } + it('clears the cart when the purchase is approved', async () => { + const { cartService } = await render(true); + + expect(cartService.clearCart).toHaveBeenCalledOnce(); + }); + it('shows the tickets action when this purchase generated tickets', async () => { const { element, checkoutService, router } = await render(true); expect(checkoutService.getPurchase).toHaveBeenCalledOnce(); - expect(element.textContent).toContain('Ver mis tickets'); + expect(element.textContent).toContain('Mis tickets'); expect(element.textContent).not.toContain('WhatsApp'); element.querySelector('app-button button')?.click(); @@ -134,6 +151,14 @@ describe('PurchaseStatusPageComponent', () => { openSpy.mockRestore(); }); + it('shows the expired result without polling when checkout redirects after expiration', async () => { + const { element, checkoutService } = await render(false, 'expired'); + + expect(element.textContent).toContain('LA COMPRA VENCIÓ'); + expect(element.textContent).not.toContain('ESTAMOS VERIFICANDO TU PAGO'); + expect(checkoutService.getPurchase).not.toHaveBeenCalled(); + }); + it('polls every five seconds while the payment is pending and shows the confirmation', async () => { vi.useFakeTimers(); @@ -147,11 +172,13 @@ describe('PurchaseStatusPageComponent', () => { return this; }, }; + const cartService = { clearCart: vi.fn() }; await TestBed.configureTestingModule({ imports: [PurchaseStatusPageComponent], providers: [ { provide: CheckoutService, useValue: checkoutService }, + { provide: CartService, useValue: cartService }, { provide: TenantService, useValue: { tenant: () => tenant } }, { provide: ActivatedRoute, @@ -174,6 +201,7 @@ describe('PurchaseStatusPageComponent', () => { expect(checkoutService.getPurchase).toHaveBeenCalledTimes(2); expect(fixture.nativeElement.textContent).toContain('COMPRA REALIZADA!'); + expect(cartService.clearCart).toHaveBeenCalledOnce(); await vi.advanceTimersByTimeAsync(10_000); expect(checkoutService.getPurchase).toHaveBeenCalledTimes(2); @@ -197,6 +225,7 @@ describe('PurchaseStatusPageComponent', () => { imports: [PurchaseStatusPageComponent], providers: [ { provide: CheckoutService, useValue: checkoutService }, + { provide: CartService, useValue: { clearCart: vi.fn() } }, { provide: TenantService, useValue: { tenant: () => tenant } }, { provide: ActivatedRoute, diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts index 2797027..f04a492 100644 --- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts +++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts @@ -15,6 +15,7 @@ import { CheckoutService, PurchaseStatusResponse, } from '../../../../core/services/checkout.service'; +import { CartService } from '../../../../core/services/cart/cart.service'; import { findMenu } from '../../../../core/services/menu.utils'; import { TenantService } from '../../../../core/services/tenant.service'; import { ButtonComponent } from '../../../../shared/components/button/button.component'; @@ -35,6 +36,7 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { private readonly route = inject(ActivatedRoute); private readonly router = inject(Router); private readonly checkoutService = inject(CheckoutService); + private readonly cartService = inject(CartService); private readonly tenantService = inject(TenantService); private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID)); @@ -72,6 +74,12 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { this.purchaseId = purchaseId; this.tenantCode = tenant.codigo; + if (this.route.snapshot.queryParamMap?.get('status') === 'expired') { + this.status.set('expired'); + this.isLoading.set(false); + return; + } + void this.loadStatus(); } @@ -98,6 +106,10 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { this.status.set(status); this.hasGeneratedTickets.set(purchase.has_generated_tickets === true); + if (status === 'approved') { + this.cartService.clearCart(); + } + if (status === 'pending') { this.schedulePolling(); } else { @@ -107,7 +119,10 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { console.error('Failed to fetch purchase status:', error); if (!this.isDestroyed) { - if (isPolling) { + if (this.isPurchaseExpiredError(error)) { + this.status.set('expired'); + this.stopPolling(); + } else if (isPolling) { this.schedulePolling(); } else { this.status.set('error'); @@ -154,6 +169,14 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { return 'pending'; } + private isPurchaseExpiredError(error: unknown): boolean { + if (typeof error !== 'object' || error === null || !('error' in error)) { + return false; + } + + return (error as { error?: { code?: string } }).error?.code === 'purchase.expired'; + } + protected goToTickets(): void { const route = this.ticketsRoute(); diff --git a/src/app/features/store/pages/search-page/search-page.component.ts b/src/app/features/store/pages/search-page/search-page.component.ts index 8715d9c..ab84859 100644 --- a/src/app/features/store/pages/search-page/search-page.component.ts +++ b/src/app/features/store/pages/search-page/search-page.component.ts @@ -24,7 +24,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { CartService } from '../../../../core/services/cart/cart.service'; import { AuthService } from '../../../../core/services/auth/auth.service'; -import { CheckoutService } from '../../../../core/services/checkout.service'; +import { + CheckoutService, + isExpiredStockReservationResponse, +} from '../../../../core/services/checkout.service'; import { CatalogFeaturedItem, CatalogFeaturedItems, @@ -199,10 +202,20 @@ export class SearchPageComponent { ], }, ); - await this.router.navigate(['/checkout'], { queryParams: { purchase: purchase.id } }); + await this.router.navigate(['/checkout', purchase.id]); } catch (error) { console.error('Failed to create direct purchase:', error); - this.toastService.danger('No se pudo iniciar la compra directa.'); + const message = + error instanceof HttpErrorResponse && typeof error.error?.message === 'string' + ? error.error.message + : 'No se pudo iniciar la compra directa.'; + this.toastService.danger(message); + + if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) { + this.cartService.loadCart().subscribe({ + error: (refreshError) => console.error('Error refreshing expired cart', refreshError), + }); + } } finally { this.creatingDirectPurchase.set(false); } diff --git a/src/app/features/store/pages/store-home-page/store-home-page.component.ts b/src/app/features/store/pages/store-home-page/store-home-page.component.ts index e9fa018..bb4a236 100644 --- a/src/app/features/store/pages/store-home-page/store-home-page.component.ts +++ b/src/app/features/store/pages/store-home-page/store-home-page.component.ts @@ -21,6 +21,7 @@ import { TenantService } from '../../../../core/services/tenant.service'; import { ToastService } from '../../../../core/services/toast.service'; import { CheckoutService, + isExpiredStockReservationResponse, isInsufficientStockResponse, } from '../../../../core/services/checkout.service'; import { @@ -217,10 +218,18 @@ export class StoreHomePageComponent implements OnInit, OnDestroy { tenant.codigo, reservedCartId !== null ? { cart_id: reservedCartId } : { direct_items: directItems }, ); - await this.router.navigate(['/checkout'], { queryParams: { purchase: purchase.id } }); + await this.router.navigate(['/checkout', purchase.id]); } catch (error) { console.error('Failed to create direct purchase:', error); + if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) { + this.toastService.danger(error.error.message); + this.cartService.loadCart().subscribe({ + error: (refreshError) => console.error('Error refreshing expired cart', refreshError), + }); + return; + } + if (error instanceof HttpErrorResponse && isInsufficientStockResponse(error.error)) { const unavailableIds = error.error.unavailable_items .map((item) => item.variant_id) diff --git a/src/app/features/store/store.routes.ts b/src/app/features/store/store.routes.ts index a78e899..dc5719e 100644 --- a/src/app/features/store/store.routes.ts +++ b/src/app/features/store/store.routes.ts @@ -91,15 +91,6 @@ export const routes: Routes = [ (m) => m.ProductDetailPageComponent, ), }, - { - path: 'checkout', - canActivate: [authGuard, hasMenuGuard('checkout')], - canDeactivate: [checkoutPendingPurchaseGuard], - loadComponent: () => - import('./pages/checkout-page/checkout-page.component').then( - (m) => m.CheckoutPageComponent, - ), - }, { path: 'checkout/status', component: SimpleLayoutComponent, @@ -113,6 +104,15 @@ export const routes: Routes = [ }, ], }, + { + path: 'checkout/:id', + canActivate: [authGuard, hasMenuGuard('checkout')], + canDeactivate: [checkoutPendingPurchaseGuard], + loadComponent: () => + import('./pages/checkout-page/checkout-page.component').then( + (m) => m.CheckoutPageComponent, + ), + }, { path: 'ayuda', canActivate: [hasMenuGuard('help')], diff --git a/src/app/shared/components/cart/cart.component.spec.ts b/src/app/shared/components/cart/cart.component.spec.ts index 7aaf644..ebb46da 100644 --- a/src/app/shared/components/cart/cart.component.spec.ts +++ b/src/app/shared/components/cart/cart.component.spec.ts @@ -175,6 +175,63 @@ describe('CartComponent', () => { expect(removeItem).not.toHaveBeenCalled(); }); + it('notifies the user and refreshes the cart when a mutation reports expiration', async () => { + const expirationMessage = 'La reserva de stock venció. Usá el carrito activo para continuar.'; + const removeItem = vi.fn().mockReturnValue( + throwError(() => ({ + error: { + code: 'stock_reservation.expired', + message: expirationMessage, + }, + })), + ); + const loadCart = vi.fn().mockReturnValue(of({})); + const danger = vi.fn(); + + await TestBed.configureTestingModule({ + imports: [CartComponent], + providers: [ + { + provide: CartService, + useValue: { + cart: signal(null).asReadonly(), + loadCart, + updateItemQuantity: vi.fn(), + removeItem, + }, + }, + { + provide: ModalService, + useValue: { openConfirmDelete: vi.fn().mockReturnValue(of(true)) }, + }, + { + provide: ToastService, + useValue: { success: vi.fn(), info: vi.fn(), danger }, + }, + ], + }).compileComponents(); + + const fixture = TestBed.createComponent(CartComponent); + fixture.componentRef.setInput('items', [ + { + cartItemId: 10, + imageUrl: null, + product: 'Producto vencido', + originalPrice: null, + discountedPrice: 1000, + discountPercentage: null, + attributes: [], + quantity: 1, + }, + ]); + fixture.detectChanges(); + + fixture.debugElement.query(By.css('app-cart-item')).triggerEventHandler('remove'); + + expect(danger).toHaveBeenCalledWith(expirationMessage); + expect(loadCart).toHaveBeenCalledOnce(); + }); + it('optimistically updates quantity and rolls back on error', async () => { vi.useFakeTimers(); const updateItemQuantity = vi.fn().mockReturnValue(throwError(() => new Error('Error'))); diff --git a/src/app/shared/components/cart/cart.component.ts b/src/app/shared/components/cart/cart.component.ts index bcd1bb1..2f57de5 100644 --- a/src/app/shared/components/cart/cart.component.ts +++ b/src/app/shared/components/cart/cart.component.ts @@ -98,11 +98,12 @@ export class CartComponent { this.clearOverride(update.cartItemId); }, error: (err: HttpErrorResponse) => { - console.error('Error updating cart quantity', err); - const msg = - err.error?.message || 'Error al actualizar la cantidad del producto.'; - this.toastService.danger(msg); this.clearOverride(update.cartItemId); + this.handleMutationError( + err, + 'Error al actualizar la cantidad del producto.', + 'Error updating cart quantity', + ); }, }), catchError(() => EMPTY), @@ -205,9 +206,12 @@ export class CartComponent { this.toastService.success(response.message || 'Variante actualizada.'); }, error: (error: HttpErrorResponse) => { - console.error('Error updating cart item variant', error); this.clearVariantOverride(cartItemId); - this.toastService.danger(error.error?.message || 'No se pudo actualizar la variante.'); + this.handleMutationError( + error, + 'No se pudo actualizar la variante.', + 'Error updating cart item variant', + ); }, }); } @@ -305,10 +309,29 @@ export class CartComponent { this.toastService.info(msg); }, error: (err: HttpErrorResponse) => { - console.error('Error removing item from cart', err); - const msg = err.error?.message || 'Error al eliminar el producto del carrito.'; - this.toastService.danger(msg); + this.handleMutationError( + err, + 'Error al eliminar el producto del carrito.', + 'Error removing item from cart', + ); }, }); } + + private handleMutationError( + error: HttpErrorResponse, + fallbackMessage: string, + logMessage: string, + ): void { + console.error(logMessage, error); + this.toastService.danger(error.error?.message || fallbackMessage); + + if (error.error?.code !== 'stock_reservation.expired') { + return; + } + + this.cartService.loadCart().subscribe({ + error: (refreshError) => console.error('Error refreshing expired cart', refreshError), + }); + } } -- 2.49.1 From b0d2cd05bcc94d205447b35fe5e9712b27e5ef53 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Wed, 26 Aug 2026 17:00:35 -0300 Subject: [PATCH 02/17] feat(checkout): add completePurchase method and update PurchaseStatusResponse --- src/app/core/services/checkout.service.spec.ts | 16 ++++++++++++++++ src/app/core/services/checkout.service.ts | 12 ++++++------ 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/app/core/services/checkout.service.spec.ts b/src/app/core/services/checkout.service.spec.ts index 65407f3..57cdc79 100644 --- a/src/app/core/services/checkout.service.spec.ts +++ b/src/app/core/services/checkout.service.spec.ts @@ -38,4 +38,20 @@ describe('CheckoutService', () => { await expect(purchasePromise).resolves.toMatchObject({ id: 55 }); }); + + it('preserves checkout timing fields when completing a purchase', async () => { + const purchasePromise = service.completePurchase('desfile', 55); + const request = httpMock.expectOne(`${environment.url}tenants/desfile/compras/55/complete`); + const response = { + status: 'pending_payment', + expires_at: '2026-08-26T20:00:00.000Z', + expires_in_seconds: 900, + server_time: '2026-08-26T19:45:00.000Z', + }; + + expect(request.request.method).toBe('POST'); + request.flush({ data: response }); + + await expect(purchasePromise).resolves.toEqual(response); + }); }); diff --git a/src/app/core/services/checkout.service.ts b/src/app/core/services/checkout.service.ts index 1952549..4d1d2bb 100644 --- a/src/app/core/services/checkout.service.ts +++ b/src/app/core/services/checkout.service.ts @@ -70,6 +70,9 @@ export type StartCheckoutPayload = export interface PurchaseStatusResponse { status: string | null; + expires_at: string | null; + expires_in_seconds: number | null; + server_time: string; } export interface PurchaseSummaryResponse extends PurchaseStatusResponse { @@ -106,7 +109,6 @@ export interface PurchaseDetailResponse extends PurchaseStatusResponse { user_id: number; created_at: string | null; payment_method: string | null; - expires_at: string | null; dni: string | null; transfer_payer_dni: string | null; telefono: string | null; @@ -200,9 +202,7 @@ export class CheckoutService extends BaseApiService { throw new Error('Error al finalizar la compra.'); } - return { - status: purchase.status ?? null, - }; + return purchase; } async submitPurchaseForReview( @@ -221,7 +221,7 @@ export class CheckoutService extends BaseApiService { throw new Error('Error al enviar la compra a revisi\u00f3n.'); } - return { status: purchase.status ?? null }; + return purchase; } async cancelPurchase(tenantCode: string, purchaseId: number): Promise { @@ -237,7 +237,7 @@ export class CheckoutService extends BaseApiService { throw new Error('Error al cancelar la compra.'); } - return { status: purchase.status ?? null }; + return purchase; } async getPurchases( -- 2.49.1 From 1bffefece322a26d53eee69742448fc738ceaef6 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 08:46:53 -0300 Subject: [PATCH 03/17] fix(store-header): adjust category menu structure and set height for categories --- .../store-header/store-header.component.html | 10 +++++----- .../store-header/store-header.component.scss | 4 ++++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.html b/src/app/core/layout/store-layout/store-header/store-header.component.html index 189ede0..61d06cd 100644 --- a/src/app/core/layout/store-layout/store-header/store-header.component.html +++ b/src/app/core/layout/store-layout/store-header/store-header.component.html @@ -152,9 +152,9 @@ - @if (displayCategories()) { -
-
+
+
+ @if (displayCategories()) {
-
+ }
- } +
diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.scss b/src/app/core/layout/store-layout/store-header/store-header.component.scss index 0cd50e0..f86987c 100644 --- a/src/app/core/layout/store-layout/store-header/store-header.component.scss +++ b/src/app/core/layout/store-layout/store-header/store-header.component.scss @@ -10,6 +10,10 @@ border-bottom: 1px solid var(--border-color); } +.store-layout__categories { + height: 3.5rem; +} + .store-layout__brand-slot { min-width: 150px; } -- 2.49.1 From d61b1e4b0a3c83d7ec837ca1862350e0db3a3534 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 08:52:42 -0300 Subject: [PATCH 04/17] feat(checkout): synchronize purchase countdown --- .../checkout-countdown.service.spec.ts | 57 ++++++++++++ .../services/checkout-countdown.service.ts | 87 +++++++++++++++++++ .../checkout-page/checkout-page.component.ts | 13 +++ 3 files changed, 157 insertions(+) create mode 100644 src/app/core/services/checkout-countdown.service.spec.ts create mode 100644 src/app/core/services/checkout-countdown.service.ts diff --git a/src/app/core/services/checkout-countdown.service.spec.ts b/src/app/core/services/checkout-countdown.service.spec.ts new file mode 100644 index 0000000..c104e28 --- /dev/null +++ b/src/app/core/services/checkout-countdown.service.spec.ts @@ -0,0 +1,57 @@ +import { TestBed } from '@angular/core/testing'; +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; + +import { CheckoutCountdownService } from './checkout-countdown.service'; + +describe('CheckoutCountdownService', () => { + let service: CheckoutCountdownService; + + beforeEach(() => { + vi.useFakeTimers(); + vi.setSystemTime(new Date('2026-08-27T12:00:00.000Z')); + TestBed.configureTestingModule({ providers: [CheckoutCountdownService] }); + service = TestBed.inject(CheckoutCountdownService); + }); + + afterEach(() => { + service.clear(); + vi.useRealTimers(); + }); + + it('counts down from the checkout server timing without depending on the client clock', () => { + service.synchronize({ + expires_at: '2026-08-27T15:10:00.000Z', + expires_in_seconds: 600, + server_time: '2026-08-27T15:00:00.000Z', + }); + + expect(service.remainingSeconds()).toBe(600); + + vi.advanceTimersByTime(1_000); + + expect(service.remainingSeconds()).toBe(599); + }); + + it('recalculates against the deadline after a delayed browser interval', () => { + service.synchronize({ + expires_at: null, + expires_in_seconds: 10, + server_time: '2026-08-27T15:00:00.000Z', + }); + + vi.setSystemTime(new Date('2026-08-27T12:00:07.000Z')); + vi.advanceTimersByTime(1_000); + + expect(service.remainingSeconds()).toBe(2); + }); + + it('clears the countdown when checkout has no expiration', () => { + service.synchronize({ + expires_at: null, + expires_in_seconds: null, + server_time: '2026-08-27T15:00:00.000Z', + }); + + expect(service.remainingSeconds()).toBeNull(); + }); +}); diff --git a/src/app/core/services/checkout-countdown.service.ts b/src/app/core/services/checkout-countdown.service.ts new file mode 100644 index 0000000..6038230 --- /dev/null +++ b/src/app/core/services/checkout-countdown.service.ts @@ -0,0 +1,87 @@ +import { Injectable, OnDestroy, signal } from '@angular/core'; + +export interface CheckoutTiming { + expires_at: string | null; + expires_in_seconds: number | null; + server_time: string; +} + +@Injectable({ + providedIn: 'root', +}) +export class CheckoutCountdownService implements OnDestroy { + private readonly remainingSecondsState = signal(null); + private deadlineMs: number | null = null; + private intervalId: ReturnType | null = null; + + readonly remainingSeconds = this.remainingSecondsState.asReadonly(); + + synchronize(timing: CheckoutTiming): void { + const remainingSeconds = this.resolveRemainingSeconds(timing); + + if (remainingSeconds === null) { + this.clear(); + return; + } + + this.stopInterval(); + this.deadlineMs = Date.now() + remainingSeconds * 1_000; + this.updateRemainingSeconds(); + + if (remainingSeconds > 0) { + this.intervalId = setInterval(() => this.updateRemainingSeconds(), 1_000); + } + } + + clear(): void { + this.stopInterval(); + this.deadlineMs = null; + this.remainingSecondsState.set(null); + } + + ngOnDestroy(): void { + this.clear(); + } + + private resolveRemainingSeconds(timing: CheckoutTiming): number | null { + const expiresAt = timing.expires_at ? Date.parse(timing.expires_at) : Number.NaN; + const serverTime = Date.parse(timing.server_time); + + if (Number.isFinite(expiresAt) && Number.isFinite(serverTime)) { + return Math.max(0, Math.ceil((expiresAt - serverTime) / 1_000)); + } + + if ( + typeof timing.expires_in_seconds === 'number' && + Number.isFinite(timing.expires_in_seconds) + ) { + return Math.max(0, Math.ceil(timing.expires_in_seconds)); + } + + if (Number.isFinite(expiresAt)) { + return Math.max(0, Math.ceil((expiresAt - Date.now()) / 1_000)); + } + + return null; + } + + private updateRemainingSeconds(): void { + if (this.deadlineMs === null) { + return; + } + + const remainingSeconds = Math.max(0, Math.ceil((this.deadlineMs - Date.now()) / 1_000)); + this.remainingSecondsState.set(remainingSeconds); + + if (remainingSeconds === 0) { + this.stopInterval(); + } + } + + private stopInterval(): void { + if (this.intervalId !== null) { + clearInterval(this.intervalId); + this.intervalId = null; + } + } +} diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.ts index d15bf71..c9d0913 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts @@ -28,6 +28,7 @@ import { StepComponent } from '../../../../shared/components/stepper/step.compon import { StepperComponent } from '../../../../shared/components/stepper/stepper.component'; import { CheckoutDataStepComponent } from './checkout-data-step.component'; import { CheckoutPaymentStepComponent } from './checkout-payment-step.component'; +import { CheckoutCountdownService } from '../../../../core/services/checkout-countdown.service'; import { CheckoutForm, PaymentMethod, @@ -64,6 +65,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { private readonly router = inject(Router); private readonly tenantService = inject(TenantService); private readonly checkoutService = inject(CheckoutService); + private readonly checkoutCountdownService = inject(CheckoutCountdownService); private readonly authService = inject(AuthService); private readonly globalLoadingService = inject(GlobalLoadingService); private readonly toastService = inject(ToastService); @@ -161,6 +163,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { } ngOnInit(): void { + this.checkoutCountdownService.clear(); + const purchaseId = Number(this.route.snapshot.paramMap.get('id')); if (!Number.isInteger(purchaseId) || purchaseId <= 0) { void this.router.navigate(['/']); @@ -173,6 +177,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { ngOnDestroy(): void { this.stopQrPolling(); this.stopTransferPolling(); + this.checkoutCountdownService.clear(); } private mapPurchaseItemToMock(item: PurchaseDetailItemResponse): CartItemMock { @@ -228,6 +233,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { nombre_apellido: formValue.nombre, }); this.createdPurchase.set(purchase); + this.checkoutCountdownService.synchronize(purchase); this.stepper.next(); @@ -451,6 +457,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { return; } + this.checkoutCountdownService.synchronize(purchase); + if (purchase.status === 'paid') { this.navigateToPurchaseStatus(purchaseId); return; @@ -500,6 +508,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { return; } + this.checkoutCountdownService.synchronize(purchase); + if (purchase.status === 'paid') { this.navigateToPurchaseStatus(purchaseId); return; @@ -586,6 +596,8 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { return; } + this.checkoutCountdownService.synchronize(purchase); + if (purchase.status === 'paid') { this.handleConfirmedPayment(purchaseId); return; @@ -696,6 +708,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { this.createdPurchaseId.set(purchase.id); this.createdPurchase.set(purchase); + this.checkoutCountdownService.synchronize(purchase); this.checkoutStepIndex.set(purchase.status === 'pending_payment' ? 1 : 0); if ( -- 2.49.1 From f62cd0880790456fb77c7e99fae94bb746bddf9a Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 08:52:57 -0300 Subject: [PATCH 05/17] feat(store-header): display checkout countdown --- .../store-header/store-header.component.html | 13 ++++++++- .../store-header/store-header.component.scss | 16 +++++++++++ .../store-header/store-header.component.ts | 24 ++++++++++++++++- .../store-layout/store-layout.component.html | 1 + .../store-layout.component.spec.ts | 27 +++++++++++++++++++ .../store-layout/store-layout.component.ts | 3 +++ 6 files changed, 82 insertions(+), 2 deletions(-) diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.html b/src/app/core/layout/store-layout/store-header/store-header.component.html index 61d06cd..2a385e4 100644 --- a/src/app/core/layout/store-layout/store-header/store-header.component.html +++ b/src/app/core/layout/store-layout/store-header/store-header.component.html @@ -153,7 +153,7 @@
-
+
@if (displayCategories()) {
} + + @if (checkoutRemainingTime(); as remainingTime) { +
+ Tiempo restante de compra: + {{ remainingTime }} +
+ }
diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.scss b/src/app/core/layout/store-layout/store-header/store-header.component.scss index f86987c..256dd7c 100644 --- a/src/app/core/layout/store-layout/store-header/store-header.component.scss +++ b/src/app/core/layout/store-layout/store-header/store-header.component.scss @@ -14,6 +14,22 @@ height: 3.5rem; } +.store-layout__checkout-timer { + color: var(--tenant-primary); + font-weight: 700; + white-space: nowrap; +} + +.store-layout__checkout-timer-label { + font-size: 13px; +} + +.store-layout__checkout-timer-value { + font-size: 20px; + line-height: 1; + font-variant-numeric: tabular-nums; +} + .store-layout__brand-slot { min-width: 150px; } diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.ts b/src/app/core/layout/store-layout/store-header/store-header.component.ts index 9d7723b..dfe1831 100644 --- a/src/app/core/layout/store-layout/store-header/store-header.component.ts +++ b/src/app/core/layout/store-layout/store-header/store-header.component.ts @@ -1,4 +1,13 @@ -import { Component, ElementRef, HostListener, inject, input, output, signal } from '@angular/core'; +import { + Component, + computed, + ElementRef, + HostListener, + inject, + input, + output, + signal, +} from '@angular/core'; import { Router, RouterLink } from '@angular/router'; import { AuthUser } from '../../../services/auth/auth.interfaces'; import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component'; @@ -40,6 +49,7 @@ export class StoreHeaderComponent { readonly displaySeachBar = input(true); readonly displayCart = input(true); readonly cartDisabled = input(false); + readonly checkoutRemainingSeconds = input(null); readonly cartClick = output(); readonly ticketsClick = output(); readonly loginClick = output(); @@ -53,6 +63,18 @@ export class StoreHeaderComponent { protected readonly minSearchLength = 3; protected readonly showSearchError = signal(false); protected readonly searchControl = new FormControl('', { nonNullable: true }); + protected readonly checkoutRemainingTime = computed(() => { + const remainingSeconds = this.checkoutRemainingSeconds(); + + if (remainingSeconds === null) { + return null; + } + + const minutes = Math.floor(remainingSeconds / 60); + const seconds = remainingSeconds % 60; + + return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; + }); protected onCartClick(): void { if (this.cartDisabled()) { diff --git a/src/app/core/layout/store-layout/store-layout.component.html b/src/app/core/layout/store-layout/store-layout.component.html index 896168b..01f5dfe 100644 --- a/src/app/core/layout/store-layout/store-layout.component.html +++ b/src/app/core/layout/store-layout/store-layout.component.html @@ -13,6 +13,7 @@ [displaySeachBar]="tenant()?.display_seach_bar ?? true" [displayCart]="displayCart()" [cartDisabled]="isCheckoutRoute()" + [checkoutRemainingSeconds]="isCheckoutRoute() ? checkoutRemainingSeconds() : null" (cartClick)="onCartClick()" (ticketsClick)="onTicketsClick()" (loginClick)="onLoginClick()" diff --git a/src/app/core/layout/store-layout/store-layout.component.spec.ts b/src/app/core/layout/store-layout/store-layout.component.spec.ts index 2f6f160..b222a46 100644 --- a/src/app/core/layout/store-layout/store-layout.component.spec.ts +++ b/src/app/core/layout/store-layout/store-layout.component.spec.ts @@ -24,6 +24,7 @@ import { AuthUser } from '../../services/auth/auth.interfaces'; import { StoreLayoutComponent } from './store-layout.component'; import { StoreHeaderComponent } from './store-header/store-header.component'; import { CheckoutService } from '../../services/checkout.service'; +import { CheckoutCountdownService } from '../../services/checkout-countdown.service'; import { TenantUrlSerializer } from '../../services/tenant-url.serializer'; const tenant: Tenant = { @@ -150,6 +151,7 @@ describe('StoreLayoutComponent', () => { let tenantState = signal(tenant); let cartState = signal(null); let authUserState = signal(null); + let checkoutRemainingSecondsState = signal(null); let checkoutServiceStub: { startCheckout: ReturnType }; let queryParamMapState: BehaviorSubject; @@ -157,6 +159,7 @@ describe('StoreLayoutComponent', () => { tenantState = signal(tenant); cartState = signal(null); authUserState = signal(null); + checkoutRemainingSecondsState = signal(null); queryParamMapState = new BehaviorSubject(convertToParamMap({})); const isAuthenticatedState = signal(false); checkoutServiceStub = { @@ -215,6 +218,12 @@ describe('StoreLayoutComponent', () => { provide: CheckoutService, useValue: checkoutServiceStub, }, + { + provide: CheckoutCountdownService, + useValue: { + remainingSeconds: checkoutRemainingSecondsState.asReadonly(), + }, + }, ], }).compileComponents(); }); @@ -271,6 +280,24 @@ describe('StoreLayoutComponent', () => { expect(element.querySelector('.store-layout__cart-overlay')).toBeNull(); }); + it('shows the synchronized checkout countdown aligned in the header', () => { + const router = TestBed.inject(Router); + vi.spyOn(router, 'url', 'get').mockReturnValue('/checkout/25'); + checkoutRemainingSecondsState.set(587); + + const fixture = TestBed.createComponent(StoreLayoutComponent); + fixture.detectChanges(); + + const element = fixture.nativeElement as HTMLElement; + + expect(element.querySelector('.store-layout__checkout-timer-label')?.textContent).toContain( + 'Tiempo restante de compra:', + ); + expect(element.querySelector('.store-layout__checkout-timer-value')?.textContent?.trim()).toBe( + '09:47', + ); + }); + it('hides the configured header elements when the tenant disables them', () => { tenantState.set({ ...tenant, diff --git a/src/app/core/layout/store-layout/store-layout.component.ts b/src/app/core/layout/store-layout/store-layout.component.ts index e812afc..ccd0869 100644 --- a/src/app/core/layout/store-layout/store-layout.component.ts +++ b/src/app/core/layout/store-layout/store-layout.component.ts @@ -24,6 +24,7 @@ import { } from '../../services/checkout.service'; import { ToastService } from '../../services/toast.service'; import { Category } from '../../services/tenant.interface'; +import { CheckoutCountdownService } from '../../services/checkout-countdown.service'; @Component({ selector: 'app-store-layout', @@ -42,6 +43,7 @@ export class StoreLayoutComponent implements OnInit { private readonly cartService = inject(CartService); private readonly authService = inject(AuthService); private readonly checkoutService = inject(CheckoutService); + private readonly checkoutCountdownService = inject(CheckoutCountdownService); private readonly toastService = inject(ToastService); private readonly router = inject(Router); private readonly route = inject(ActivatedRoute); @@ -49,6 +51,7 @@ export class StoreLayoutComponent implements OnInit { protected readonly isCartOpen = signal(false); protected readonly isCheckoutRoute = signal(this.isCheckoutUrl(this.router.url)); + protected readonly checkoutRemainingSeconds = this.checkoutCountdownService.remainingSeconds; protected readonly isCreatingPurchase = signal(false); protected readonly displayCart = computed(() => this.tenant()?.display_cart ?? true); protected readonly cartEditingPolicy = computed(() => this.tenant()?.cart_editing_policy ?? null); -- 2.49.1 From 51d051733c7e608c06c622ea91d7f72d9200a855 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 08:59:41 -0300 Subject: [PATCH 06/17] fix(store-layout): update checkout countdown logic and test description --- src/app/core/layout/store-layout/store-layout.component.html | 2 +- .../core/layout/store-layout/store-layout.component.spec.ts | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/core/layout/store-layout/store-layout.component.html b/src/app/core/layout/store-layout/store-layout.component.html index 01f5dfe..e3113a9 100644 --- a/src/app/core/layout/store-layout/store-layout.component.html +++ b/src/app/core/layout/store-layout/store-layout.component.html @@ -13,7 +13,7 @@ [displaySeachBar]="tenant()?.display_seach_bar ?? true" [displayCart]="displayCart()" [cartDisabled]="isCheckoutRoute()" - [checkoutRemainingSeconds]="isCheckoutRoute() ? checkoutRemainingSeconds() : null" + [checkoutRemainingSeconds]="checkoutRemainingSeconds()" (cartClick)="onCartClick()" (ticketsClick)="onTicketsClick()" (loginClick)="onLoginClick()" diff --git a/src/app/core/layout/store-layout/store-layout.component.spec.ts b/src/app/core/layout/store-layout/store-layout.component.spec.ts index b222a46..28be962 100644 --- a/src/app/core/layout/store-layout/store-layout.component.spec.ts +++ b/src/app/core/layout/store-layout/store-layout.component.spec.ts @@ -280,9 +280,7 @@ describe('StoreLayoutComponent', () => { expect(element.querySelector('.store-layout__cart-overlay')).toBeNull(); }); - it('shows the synchronized checkout countdown aligned in the header', () => { - const router = TestBed.inject(Router); - vi.spyOn(router, 'url', 'get').mockReturnValue('/checkout/25'); + it('shows the synchronized countdown in the header whenever one is active', () => { checkoutRemainingSecondsState.set(587); const fixture = TestBed.createComponent(StoreLayoutComponent); -- 2.49.1 From b6a52ceb8c9c6d181b3048581747846a19802dca Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 09:03:38 -0300 Subject: [PATCH 07/17] feat(checkout): enhance countdown synchronization and cleanup logic --- .../checkout-countdown.service.spec.ts | 12 +++++++++++ .../services/checkout-countdown.service.ts | 20 ++++++++++++++----- .../checkout-page/checkout-page.component.ts | 6 +++++- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/app/core/services/checkout-countdown.service.spec.ts b/src/app/core/services/checkout-countdown.service.spec.ts index c104e28..212579c 100644 --- a/src/app/core/services/checkout-countdown.service.spec.ts +++ b/src/app/core/services/checkout-countdown.service.spec.ts @@ -54,4 +54,16 @@ describe('CheckoutCountdownService', () => { expect(service.remainingSeconds()).toBeNull(); }); + + it('keeps the active countdown when a partial checkout response omits timing fields', () => { + service.synchronize({ + expires_at: null, + expires_in_seconds: 10, + server_time: '2026-08-27T15:00:00.000Z', + }); + + service.synchronize({}); + + expect(service.remainingSeconds()).toBe(10); + }); }); diff --git a/src/app/core/services/checkout-countdown.service.ts b/src/app/core/services/checkout-countdown.service.ts index 6038230..3141fd3 100644 --- a/src/app/core/services/checkout-countdown.service.ts +++ b/src/app/core/services/checkout-countdown.service.ts @@ -16,9 +16,13 @@ export class CheckoutCountdownService implements OnDestroy { readonly remainingSeconds = this.remainingSecondsState.asReadonly(); - synchronize(timing: CheckoutTiming): void { + synchronize(timing: Partial): void { const remainingSeconds = this.resolveRemainingSeconds(timing); + if (remainingSeconds === undefined) { + return; + } + if (remainingSeconds === null) { this.clear(); return; @@ -43,9 +47,15 @@ export class CheckoutCountdownService implements OnDestroy { this.clear(); } - private resolveRemainingSeconds(timing: CheckoutTiming): number | null { - const expiresAt = timing.expires_at ? Date.parse(timing.expires_at) : Number.NaN; - const serverTime = Date.parse(timing.server_time); + private resolveRemainingSeconds(timing: Partial): number | null | undefined { + if (timing.expires_at === null && timing.expires_in_seconds === null) { + return null; + } + + const expiresAt = + typeof timing.expires_at === 'string' ? Date.parse(timing.expires_at) : Number.NaN; + const serverTime = + typeof timing.server_time === 'string' ? Date.parse(timing.server_time) : Number.NaN; if (Number.isFinite(expiresAt) && Number.isFinite(serverTime)) { return Math.max(0, Math.ceil((expiresAt - serverTime) / 1_000)); @@ -62,7 +72,7 @@ export class CheckoutCountdownService implements OnDestroy { return Math.max(0, Math.ceil((expiresAt - Date.now()) / 1_000)); } - return null; + return undefined; } private updateRemainingSeconds(): void { diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.ts index c9d0913..2802068 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts @@ -177,7 +177,6 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { ngOnDestroy(): void { this.stopQrPolling(); this.stopTransferPolling(); - this.checkoutCountdownService.clear(); } private mapPurchaseItemToMock(item: PurchaseDetailItemResponse): CartItemMock { @@ -287,6 +286,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { const tenant = this.tenantService.tenant(); const purchaseId = this.createdPurchaseId(); if (!tenant || !purchaseId) { + this.checkoutCountdownService.clear(); return true; } @@ -297,6 +297,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { await firstValueFrom(this.cartService.loadCart()); this.createdPurchaseId.set(null); this.createdPurchase.set(null); + this.checkoutCountdownService.clear(); this.navigationStarted = true; return true; @@ -310,6 +311,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { }); this.createdPurchaseId.set(null); this.createdPurchase.set(null); + this.checkoutCountdownService.clear(); this.navigationStarted = true; return true; } @@ -671,6 +673,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { this.navigationStarted = true; this.stopQrPolling(); this.stopTransferPolling(); + this.checkoutCountdownService.clear(); void this.router.navigate(['/checkout/status', purchaseId]); } @@ -792,6 +795,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { this.navigationStarted = true; this.stopQrPolling(); this.stopTransferPolling(); + this.checkoutCountdownService.clear(); void this.router.navigate(['/checkout/status', purchaseId], { queryParams: { status: 'expired' }, }); -- 2.49.1 From 91b8788c917e356b177cb8044e2e577e1f6092c3 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 09:20:24 -0300 Subject: [PATCH 08/17] feat(checkout): implement mobile countdown display and logic --- .../store-header/store-header.component.html | 2 +- .../checkout-page.component.html | 11 +++++++ .../checkout-page.component.scss | 18 +++++++++++ .../checkout-page.component.spec.ts | 30 +++++++++++++++++++ .../checkout-page/checkout-page.component.ts | 24 +++++++++++++-- 5 files changed, 82 insertions(+), 3 deletions(-) diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.html b/src/app/core/layout/store-layout/store-header/store-header.component.html index 2a385e4..b8a3115 100644 --- a/src/app/core/layout/store-layout/store-header/store-header.component.html +++ b/src/app/core/layout/store-layout/store-header/store-header.component.html @@ -179,7 +179,7 @@ @if (checkoutRemainingTime(); as remainingTime) {
diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.html b/src/app/features/store/pages/checkout-page/checkout-page.component.html index 57a7eb2..336fc3d 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.html +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.html @@ -46,6 +46,17 @@
+ @if (checkoutRemainingTime(); as remainingTime) { +
+ Tiempo restante de compra: + {{ remainingTime }} +
+ } + { @@ -129,6 +130,35 @@ describe('CheckoutPageComponent payment validation', () => { return { fixture, component: fixture.componentInstance as any }; } + it('does not expose an active countdown until the purchase timing is loaded', async () => { + const countdown = TestBed.inject(CheckoutCountdownService); + countdown.synchronize({ + expires_at: null, + expires_in_seconds: 600, + server_time: new Date().toISOString(), + }); + checkoutServiceStub.getPurchase.mockResolvedValue({ + id: 25, + status: 'created', + expires_at: '2026-08-27T15:10:00.000Z', + expires_in_seconds: 600, + server_time: '2026-08-27T15:00:00.000Z', + items: [], + subtotal: '0.00', + total: '0.00', + }); + routeParamMap = convertToParamMap({ id: 25 }); + + const { component } = createComponent(); + + expect(component.checkoutRemainingTime()).toBeNull(); + + await Promise.resolve(); + + expect(countdown.remainingSeconds()).toBe(600); + expect(component.checkoutRemainingTime()).toBe('10:00'); + }); + it('polls QR after five seconds and navigates only when payment is paid', async () => { checkoutServiceStub.getPurchase .mockResolvedValueOnce({ status: 'pending_payment' }) diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.ts index 2802068..5a29c14 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts @@ -97,6 +97,28 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { protected readonly createdPurchase = signal(null); protected readonly isLoadingPurchase = signal(true); protected readonly checkoutStepIndex = signal(0); + protected readonly checkoutRemainingTime = computed(() => { + const purchase = this.createdPurchase(); + + if ( + !purchase || + (typeof purchase.expires_at !== 'string' && + typeof purchase.expires_in_seconds !== 'number') + ) { + return null; + } + + const remainingSeconds = this.checkoutCountdownService.remainingSeconds(); + + if (remainingSeconds === null) { + return null; + } + + const minutes = Math.floor(remainingSeconds / 60); + const seconds = remainingSeconds % 60; + + return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; + }); protected readonly cartSubtotal = computed(() => { const purchase = this.createdPurchase(); return purchase ? parseFloat(purchase.subtotal) : 0; @@ -163,8 +185,6 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { } ngOnInit(): void { - this.checkoutCountdownService.clear(); - const purchaseId = Number(this.route.snapshot.paramMap.get('id')); if (!Number.isInteger(purchaseId) || purchaseId <= 0) { void this.router.navigate(['/']); -- 2.49.1 From a5420e6a4210c4e6e00d4dae4773f73d7cdf5141 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 09:50:33 -0300 Subject: [PATCH 09/17] feat(checkout): refresh catalog availability on checkout failure --- .../core/services/checkout.service.spec.ts | 21 +++++++++++- src/app/core/services/checkout.service.ts | 32 ++++++++++++------- 2 files changed, 40 insertions(+), 13 deletions(-) diff --git a/src/app/core/services/checkout.service.spec.ts b/src/app/core/services/checkout.service.spec.ts index 57cdc79..ee3adb7 100644 --- a/src/app/core/services/checkout.service.spec.ts +++ b/src/app/core/services/checkout.service.spec.ts @@ -1,9 +1,10 @@ import { provideHttpClient } from '@angular/common/http'; import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; import { TestBed } from '@angular/core/testing'; -import { afterEach, beforeEach, describe, expect, it } from 'vitest'; +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; import { environment } from '../../../environments/environment'; +import { CatalogAvailabilityService } from './catalog/catalog-availability.service'; import { CheckoutService } from './checkout.service'; describe('CheckoutService', () => { @@ -39,6 +40,24 @@ describe('CheckoutService', () => { await expect(purchasePromise).resolves.toMatchObject({ id: 55 }); }); + it('refreshes catalog availability when starting checkout fails', async () => { + const catalogAvailabilityService = TestBed.inject(CatalogAvailabilityService); + const notifyAvailabilityChanged = vi.spyOn( + catalogAvailabilityService, + 'notifyAvailabilityChanged', + ); + const purchasePromise = service.startCheckout('desfile', { cart_id: 12 }); + const request = httpMock.expectOne(`${environment.url}tenants/desfile/compras/start-checkout`); + + request.flush( + { message: 'No hay stock disponible.' }, + { status: 422, statusText: 'Unprocessable Entity' }, + ); + + await expect(purchasePromise).rejects.toBeTruthy(); + expect(notifyAvailabilityChanged).toHaveBeenCalledOnce(); + }); + it('preserves checkout timing fields when completing a purchase', async () => { const purchasePromise = service.completePurchase('desfile', 55); const request = httpMock.expectOne(`${environment.url}tenants/desfile/compras/55/complete`); diff --git a/src/app/core/services/checkout.service.ts b/src/app/core/services/checkout.service.ts index 4d1d2bb..70886d6 100644 --- a/src/app/core/services/checkout.service.ts +++ b/src/app/core/services/checkout.service.ts @@ -1,10 +1,11 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { firstValueFrom } from 'rxjs'; import { environment } from '../../../environments/environment'; import { ApiPaginatedResponse } from './api-paginated-response.interface'; import { ApiPaginationQueryParams } from './api-pagination-query-params.interface'; import { BaseApiService } from './base-api.service'; +import { CatalogAvailabilityService } from './catalog/catalog-availability.service'; export interface UpdatePurchaseCustomerPayload { dni: string; @@ -126,24 +127,31 @@ export interface PurchaseDetailResponse extends PurchaseStatusResponse { providedIn: 'root', }) export class CheckoutService extends BaseApiService { + private readonly catalogAvailabilityService = inject(CatalogAvailabilityService); + async startCheckout( tenantCode: string, payload: StartCheckoutPayload, ): Promise { - const response = await firstValueFrom( - this.http.post<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>( - `${environment.url}tenants/${tenantCode}/compras/start-checkout`, - payload, - ), - ); + try { + const response = await firstValueFrom( + this.http.post<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>( + `${environment.url}tenants/${tenantCode}/compras/start-checkout`, + payload, + ), + ); - const purchase = this.extractResponseData(response); + const purchase = this.extractResponseData(response); - if (!purchase?.id) { - throw new Error('Error al crear la compra.'); + if (!purchase?.id) { + throw new Error('Error al crear la compra.'); + } + + return purchase; + } catch (error) { + this.catalogAvailabilityService.notifyAvailabilityChanged(); + throw error; } - - return purchase; } async generatePaymentIntent( -- 2.49.1 From 679342ec8dc80cd297bf134a80a691a620d90281 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 09:54:15 -0300 Subject: [PATCH 10/17] fix(checkout): defer catalog refresh for expired reservations --- .../core/services/checkout.service.spec.ts | 21 +++++++++++++++++++ src/app/core/services/checkout.service.ts | 5 ++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/app/core/services/checkout.service.spec.ts b/src/app/core/services/checkout.service.spec.ts index ee3adb7..8bfede7 100644 --- a/src/app/core/services/checkout.service.spec.ts +++ b/src/app/core/services/checkout.service.spec.ts @@ -58,6 +58,27 @@ describe('CheckoutService', () => { expect(notifyAvailabilityChanged).toHaveBeenCalledOnce(); }); + it('waits for the expired cart refresh before refreshing catalog availability', async () => { + const catalogAvailabilityService = TestBed.inject(CatalogAvailabilityService); + const notifyAvailabilityChanged = vi.spyOn( + catalogAvailabilityService, + 'notifyAvailabilityChanged', + ); + const purchasePromise = service.startCheckout('desfile', { cart_id: 12 }); + const request = httpMock.expectOne(`${environment.url}tenants/desfile/compras/start-checkout`); + + request.flush( + { + code: 'stock_reservation.expired', + message: 'La reserva de stock venció.', + }, + { status: 422, statusText: 'Unprocessable Entity' }, + ); + + await expect(purchasePromise).rejects.toBeTruthy(); + expect(notifyAvailabilityChanged).not.toHaveBeenCalled(); + }); + it('preserves checkout timing fields when completing a purchase', async () => { const purchasePromise = service.completePurchase('desfile', 55); const request = httpMock.expectOne(`${environment.url}tenants/desfile/compras/55/complete`); diff --git a/src/app/core/services/checkout.service.ts b/src/app/core/services/checkout.service.ts index 70886d6..459f779 100644 --- a/src/app/core/services/checkout.service.ts +++ b/src/app/core/services/checkout.service.ts @@ -149,7 +149,10 @@ export class CheckoutService extends BaseApiService { return purchase; } catch (error) { - this.catalogAvailabilityService.notifyAvailabilityChanged(); + const responseBody = (error as { error?: unknown } | null)?.error; + if (!isExpiredStockReservationResponse(responseBody)) { + this.catalogAvailabilityService.notifyAvailabilityChanged(); + } throw error; } } -- 2.49.1 From a825b3693b938d0ecc523b32aac5240f061b05df Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 09:54:21 -0300 Subject: [PATCH 11/17] fix(catalog): refresh after expired cart replacement --- .../layout/store-layout/store-layout.component.ts | 2 +- src/app/core/services/cart/cart.service.spec.ts | 14 ++++++++++++++ src/app/core/services/cart/cart.service.ts | 9 +++++++-- .../category-items-page.component.ts | 2 +- .../pages/checkout-page/checkout-page.component.ts | 2 +- .../pages/search-page/search-page.component.ts | 2 +- .../store-home-page/store-home-page.component.ts | 2 +- src/app/shared/components/cart/cart.component.ts | 2 +- 8 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/app/core/layout/store-layout/store-layout.component.ts b/src/app/core/layout/store-layout/store-layout.component.ts index ccd0869..b880ea9 100644 --- a/src/app/core/layout/store-layout/store-layout.component.ts +++ b/src/app/core/layout/store-layout/store-layout.component.ts @@ -290,7 +290,7 @@ export class StoreLayoutComponent implements OnInit { this.toastService.danger(message); if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) { - this.cartService.loadCart().subscribe({ + this.cartService.loadCart(true).subscribe({ error: (refreshError) => console.error('Error refreshing expired cart', refreshError), }); } diff --git a/src/app/core/services/cart/cart.service.spec.ts b/src/app/core/services/cart/cart.service.spec.ts index 0a43a80..fd9a117 100644 --- a/src/app/core/services/cart/cart.service.spec.ts +++ b/src/app/core/services/cart/cart.service.spec.ts @@ -83,6 +83,20 @@ describe('CartService', () => { req.flush({ data: mockCart }); }); + it('refreshes catalog availability only after the expired cart has been reloaded', () => { + const availabilityChanged = vi.fn(); + catalogAvailabilityService.availabilityChanged$.subscribe(availabilityChanged); + + service.loadCart(true).subscribe(); + + expect(availabilityChanged).not.toHaveBeenCalled(); + const req = httpMock.expectOne('http://api.test/tenants/acme/cart'); + req.flush({ data: mockCart }); + + expect(service.cart()).toEqual(mockCart); + expect(availabilityChanged).toHaveBeenCalledOnce(); + }); + it('propagates a custom loading mode to the request context', () => { service.withCustomLoading().loadCart().subscribe(); diff --git a/src/app/core/services/cart/cart.service.ts b/src/app/core/services/cart/cart.service.ts index 5f5c42d..2fc206d 100644 --- a/src/app/core/services/cart/cart.service.ts +++ b/src/app/core/services/cart/cart.service.ts @@ -34,14 +34,19 @@ export class CartService extends BaseApiService { }); } - loadCart(): Observable { + loadCart(refreshCatalogAvailability = false): Observable { return this.http .get>(`${this.tenantApiUrl}/cart`, { withCredentials: true, }) .pipe( map((response) => response.data), - tap((cart) => this.cartState.set(cart)), + tap((cart) => { + this.cartState.set(cart); + if (refreshCatalogAvailability) { + this.catalogAvailabilityService.notifyAvailabilityChanged(); + } + }), ); } diff --git a/src/app/features/store/pages/category-items-page/category-items-page.component.ts b/src/app/features/store/pages/category-items-page/category-items-page.component.ts index 8150675..815e8f7 100644 --- a/src/app/features/store/pages/category-items-page/category-items-page.component.ts +++ b/src/app/features/store/pages/category-items-page/category-items-page.component.ts @@ -180,7 +180,7 @@ export class CategoryItemsPageComponent { this.toastService.danger(message); if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) { - this.cartService.loadCart().subscribe({ + this.cartService.loadCart(true).subscribe({ error: (refreshError) => console.error('Error refreshing expired cart', refreshError), }); } diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.ts index 5a29c14..f580edd 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts @@ -326,7 +326,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { if (this.isStockReservationExpiredError(error)) { this.showRequestError(error, 'La reserva de stock venció.'); - this.cartService.loadCart().subscribe({ + this.cartService.loadCart(true).subscribe({ error: (refreshError) => console.error('Error refreshing expired cart', refreshError), }); this.createdPurchaseId.set(null); diff --git a/src/app/features/store/pages/search-page/search-page.component.ts b/src/app/features/store/pages/search-page/search-page.component.ts index ab84859..672897d 100644 --- a/src/app/features/store/pages/search-page/search-page.component.ts +++ b/src/app/features/store/pages/search-page/search-page.component.ts @@ -212,7 +212,7 @@ export class SearchPageComponent { this.toastService.danger(message); if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) { - this.cartService.loadCart().subscribe({ + this.cartService.loadCart(true).subscribe({ error: (refreshError) => console.error('Error refreshing expired cart', refreshError), }); } diff --git a/src/app/features/store/pages/store-home-page/store-home-page.component.ts b/src/app/features/store/pages/store-home-page/store-home-page.component.ts index bb4a236..3092cd0 100644 --- a/src/app/features/store/pages/store-home-page/store-home-page.component.ts +++ b/src/app/features/store/pages/store-home-page/store-home-page.component.ts @@ -224,7 +224,7 @@ export class StoreHomePageComponent implements OnInit, OnDestroy { if (error instanceof HttpErrorResponse && isExpiredStockReservationResponse(error.error)) { this.toastService.danger(error.error.message); - this.cartService.loadCart().subscribe({ + this.cartService.loadCart(true).subscribe({ error: (refreshError) => console.error('Error refreshing expired cart', refreshError), }); return; diff --git a/src/app/shared/components/cart/cart.component.ts b/src/app/shared/components/cart/cart.component.ts index 2f57de5..2fed061 100644 --- a/src/app/shared/components/cart/cart.component.ts +++ b/src/app/shared/components/cart/cart.component.ts @@ -330,7 +330,7 @@ export class CartComponent { return; } - this.cartService.loadCart().subscribe({ + this.cartService.loadCart(true).subscribe({ error: (refreshError) => console.error('Error refreshing expired cart', refreshError), }); } -- 2.49.1 From dddb086cd83eae9c3a6ce83f9d33151eabfe8c5a Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 12:11:16 -0300 Subject: [PATCH 12/17] refactor(catalog): remove obsolete products request --- src/app/core/services/catalog/catalog.service.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/app/core/services/catalog/catalog.service.ts b/src/app/core/services/catalog/catalog.service.ts index 9f103f7..9c22600 100644 --- a/src/app/core/services/catalog/catalog.service.ts +++ b/src/app/core/services/catalog/catalog.service.ts @@ -14,7 +14,6 @@ import { CatalogItemDetail, CatalogVariantOptionsResponse, CategoryItemsResponse, - Product, } from './catalog.interface'; type HttpParamValue = string | number | boolean | readonly (string | number | boolean)[]; @@ -33,12 +32,6 @@ export class CatalogService extends BaseApiService { return this.tenantService.getTenantApiUrl(); } - getProductos(params?: ApiPaginationQueryParams): Observable> { - return this.http.get>(`${this.tenantApiUrl}/productos`, { - params: this.buildHttpParams(params), - }); - } - getCatalog(): Observable { return this.http.get(`${this.tenantApiUrl}/catalog`); } -- 2.49.1 From dbfadf417a95edfc346829537280fc12ca291dd4 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 12:11:16 -0300 Subject: [PATCH 13/17] refactor(checkout): remove unused completion request --- src/app/core/services/checkout.service.ts | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/app/core/services/checkout.service.ts b/src/app/core/services/checkout.service.ts index 459f779..ace291b 100644 --- a/src/app/core/services/checkout.service.ts +++ b/src/app/core/services/checkout.service.ts @@ -199,23 +199,6 @@ export class CheckoutService extends BaseApiService { return purchase; } - async completePurchase(tenantCode: string, purchaseId: number): Promise { - const response = await firstValueFrom( - this.http.post<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>( - `${environment.url}tenants/${tenantCode}/compras/${purchaseId}/complete`, - {}, - ), - ); - - const purchase = this.extractResponseData(response); - - if (!purchase) { - throw new Error('Error al finalizar la compra.'); - } - - return purchase; - } - async submitPurchaseForReview( tenantCode: string, purchaseId: number, -- 2.49.1 From 4997665da605a36b6a7850a8801160f45114fdf3 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 15:38:23 -0300 Subject: [PATCH 14/17] feat(checkout): show transfer candidate issue --- src/app/core/services/checkout.service.ts | 22 +++++++++++ .../purchase-status-page.component.html | 36 ++++++++++++++---- .../purchase-status-page.component.spec.ts | 35 ++++++++++++++--- .../purchase-status-page.component.ts | 38 +++++++++++++++++++ 4 files changed, 118 insertions(+), 13 deletions(-) diff --git a/src/app/core/services/checkout.service.ts b/src/app/core/services/checkout.service.ts index ace291b..ef214b5 100644 --- a/src/app/core/services/checkout.service.ts +++ b/src/app/core/services/checkout.service.ts @@ -74,6 +74,28 @@ export interface PurchaseStatusResponse { expires_at: string | null; expires_in_seconds: number | null; server_time: string; + payment_verification?: PurchasePaymentVerificationResponse; +} + +export type PurchasePaymentCandidateReason = + | 'ambiguous_exact_match' + | 'exact_dni_near_amount' + | 'exact_amount_different_dni'; + +export interface PurchasePaymentCandidatePrimaryResponse { + reason: PurchasePaymentCandidateReason; + payment_amount: string; + purchase_amount: string; + amount_difference: string; + confidence: 'exact' | 'high' | 'medium'; + detected_at: string | null; +} + +export interface PurchasePaymentVerificationResponse { + status: 'pending' | 'candidate'; + candidate_count: number; + primary: PurchasePaymentCandidatePrimaryResponse | null; + reasons: PurchasePaymentCandidateReason[]; } export interface PurchaseSummaryResponse extends PurchaseStatusResponse { diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html index 9018c1f..0c3b067 100644 --- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html +++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html @@ -17,7 +17,9 @@
@if (ticketsRoute()) { -

A continuación, vas a poder ver los tickets que debés presentar en el evento.

+

+ A continuación, vas a poder ver los tickets que debés presentar en el evento. +

Mis tickets } @else if (whatsappUrl()) { -

Comunicate con nosotros para coordinar el envío.

+

+ Comunicate con nosotros para coordinar el envío. +

ESTAMOS VERIFICANDO TU PAGO

-

Tu compra ya fue registrada y estamos esperando la confirmación del pago.

+

+ Tu compra ya fue registrada y estamos esperando la confirmación del pago. +

-

Te avisaremos cuando el pago sea confirmado.

+ @if (paymentIssueMessage()) { +

+ {{ paymentIssueMessage() }} Estamos revisando el pago. +

+ } @else { +

Te avisaremos cuando el pago sea confirmado.

+ }
} @else if (status() === 'expired') {
@@ -65,13 +77,17 @@

LA COMPRA VENCIÓ

-

El plazo de pago terminó y liberamos el stock reservado.

+

+ El plazo de pago terminó y liberamos el stock reservado. +

-

Podés volver a la tienda e iniciar una nueva compra.

+

+ Podés volver a la tienda e iniciar una nueva compra. +

} @else if (status() === 'rejected') {
@@ -79,7 +95,9 @@

NO PUDIMOS CONFIRMAR EL PAGO

-

Revisá el medio de pago o comunicate con nosotros para continuar.

+

+ Revisá el medio de pago o comunicate con nosotros para continuar. +

@@ -114,7 +132,9 @@
-

Volvé a ingresar más tarde. Si el problema sigue, comunicate con nosotros.

+

+ Volvé a ingresar más tarde. Si el problema sigue, comunicate con nosotros. +

@if (whatsappUrl()) {
diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts index 6dcf23c..1b8fcdc 100644 --- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts +++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts @@ -67,9 +67,13 @@ describe('PurchaseStatusPageComponent', () => { TestBed.resetTestingModule(); }); - async function render(hasGeneratedTickets: boolean, forcedStatus?: string) { + async function render( + hasGeneratedTickets: boolean, + forcedStatus?: string, + purchaseResponse = purchase(hasGeneratedTickets), + ) { const checkoutService = { - getPurchase: vi.fn().mockResolvedValue(purchase(hasGeneratedTickets)), + getPurchase: vi.fn().mockResolvedValue(purchaseResponse), withCustomLoading() { return this; }, @@ -91,9 +95,7 @@ describe('PurchaseStatusPageComponent', () => { useValue: { snapshot: { paramMap: convertToParamMap({ id: '42' }), - queryParamMap: convertToParamMap( - forcedStatus ? { status: forcedStatus } : {}, - ), + queryParamMap: convertToParamMap(forcedStatus ? { status: forcedStatus } : {}), }, }, }, @@ -159,6 +161,29 @@ describe('PurchaseStatusPageComponent', () => { expect(checkoutService.getPurchase).not.toHaveBeenCalled(); }); + it('shows the primary transfer candidate issue while the purchase is in review', async () => { + const { element } = await render(false, undefined, { + status: 'in_review', + payment_verification: { + status: 'candidate', + candidate_count: 2, + primary: { + reason: 'exact_dni_near_amount', + payment_amount: '49000.00', + purchase_amount: '50000.00', + amount_difference: '1000.00', + confidence: 'high', + detected_at: '2026-08-27T18:00:00-03:00', + }, + reasons: ['exact_dni_near_amount', 'exact_amount_different_dni'], + }, + } as PurchaseDetailResponse); + + expect(element.textContent).toContain('Encontramos 2 transferencias posibles.'); + expect(element.textContent).toMatch(/diferencia de \$\s*1\.000/); + expect(element.textContent).toContain('Estamos revisando el pago.'); + }); + it('polls every five seconds while the payment is pending and shows the confirmation', async () => { vi.useFakeTimers(); diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts index f04a492..154381a 100644 --- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts +++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts @@ -13,6 +13,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { CheckoutService, + PurchasePaymentVerificationResponse, PurchaseStatusResponse, } from '../../../../core/services/checkout.service'; import { CartService } from '../../../../core/services/cart/cart.service'; @@ -48,6 +49,7 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { protected readonly isLoading = signal(true); protected readonly status = signal('pending'); protected readonly hasGeneratedTickets = signal(false); + protected readonly paymentIssueMessage = signal(null); protected readonly ticketsRoute = computed(() => { if (!this.hasGeneratedTickets()) { return null; @@ -105,6 +107,7 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { const status = this.resolveStatus(purchase); this.status.set(status); this.hasGeneratedTickets.set(purchase.has_generated_tickets === true); + this.paymentIssueMessage.set(this.resolvePaymentIssueMessage(purchase.payment_verification)); if (status === 'approved') { this.cartService.clearCart(); @@ -169,6 +172,41 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { return 'pending'; } + private resolvePaymentIssueMessage( + verification?: PurchasePaymentVerificationResponse, + ): string | null { + const primary = verification?.primary; + + if (!primary) { + return null; + } + + const primaryMessage = (() => { + switch (primary.reason) { + case 'ambiguous_exact_match': + return 'Encontramos una transferencia que también coincide con otra compra.'; + case 'exact_dni_near_amount': + return `El DNI coincide, pero el monto transferido tiene una diferencia de ${this.formatCurrency(primary.amount_difference)}.`; + case 'exact_amount_different_dni': + return 'El monto coincide, pero el DNI del pagador es diferente.'; + } + })(); + + if (verification.candidate_count > 1) { + return `Encontramos ${verification.candidate_count} transferencias posibles. ${primaryMessage}`; + } + + return primaryMessage; + } + + private formatCurrency(amount: string): string { + return new Intl.NumberFormat('es-AR', { + style: 'currency', + currency: 'ARS', + maximumFractionDigits: 2, + }).format(Number(amount)); + } + private isPurchaseExpiredError(error: unknown): boolean { if (typeof error !== 'object' || error === null || !('error' in error)) { return false; -- 2.49.1 From 07500f699da21540fd49bcb97213408e0aec2640 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 16:04:13 -0300 Subject: [PATCH 15/17] feat(checkout): show candidate DNI distance --- src/app/core/services/checkout.service.ts | 1 + .../purchase-status-page.component.spec.ts | 1 + .../purchase-status-page/purchase-status-page.component.ts | 4 +++- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/core/services/checkout.service.ts b/src/app/core/services/checkout.service.ts index ef214b5..5a5eb76 100644 --- a/src/app/core/services/checkout.service.ts +++ b/src/app/core/services/checkout.service.ts @@ -84,6 +84,7 @@ export type PurchasePaymentCandidateReason = export interface PurchasePaymentCandidatePrimaryResponse { reason: PurchasePaymentCandidateReason; + dni_distance: number | null; payment_amount: string; purchase_amount: string; amount_difference: string; diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts index 1b8fcdc..8a22780 100644 --- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts +++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts @@ -169,6 +169,7 @@ describe('PurchaseStatusPageComponent', () => { candidate_count: 2, primary: { reason: 'exact_dni_near_amount', + dni_distance: 0, payment_amount: '49000.00', purchase_amount: '50000.00', amount_difference: '1000.00', diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts index 154381a..b74f216 100644 --- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts +++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts @@ -188,7 +188,9 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { case 'exact_dni_near_amount': return `El DNI coincide, pero el monto transferido tiene una diferencia de ${this.formatCurrency(primary.amount_difference)}.`; case 'exact_amount_different_dni': - return 'El monto coincide, pero el DNI del pagador es diferente.'; + return primary.dni_distance === null + ? 'El monto coincide, pero el DNI del pagador es diferente.' + : `El monto coincide, pero el DNI del pagador presenta ${primary.dni_distance} ${primary.dni_distance === 1 ? 'diferencia' : 'diferencias'} de escritura.`; } })(); -- 2.49.1 From 65e8436ae1d50613dfd721576340a45527fb22e7 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 16:55:13 -0300 Subject: [PATCH 16/17] refactor(checkout): rename transfer candidate reasons --- src/app/core/services/checkout.service.ts | 2 +- .../purchase-status-page/purchase-status-page.component.spec.ts | 2 +- .../purchase-status-page/purchase-status-page.component.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/core/services/checkout.service.ts b/src/app/core/services/checkout.service.ts index 5a5eb76..4cad0da 100644 --- a/src/app/core/services/checkout.service.ts +++ b/src/app/core/services/checkout.service.ts @@ -80,7 +80,7 @@ export interface PurchaseStatusResponse { export type PurchasePaymentCandidateReason = | 'ambiguous_exact_match' | 'exact_dni_near_amount' - | 'exact_amount_different_dni'; + | 'exact_amount_near_dni'; export interface PurchasePaymentCandidatePrimaryResponse { reason: PurchasePaymentCandidateReason; diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts index 8a22780..895968a 100644 --- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts +++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts @@ -176,7 +176,7 @@ describe('PurchaseStatusPageComponent', () => { confidence: 'high', detected_at: '2026-08-27T18:00:00-03:00', }, - reasons: ['exact_dni_near_amount', 'exact_amount_different_dni'], + reasons: ['exact_dni_near_amount', 'exact_amount_near_dni'], }, } as PurchaseDetailResponse); diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts index b74f216..6560292 100644 --- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts +++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts @@ -187,7 +187,7 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy { return 'Encontramos una transferencia que también coincide con otra compra.'; case 'exact_dni_near_amount': return `El DNI coincide, pero el monto transferido tiene una diferencia de ${this.formatCurrency(primary.amount_difference)}.`; - case 'exact_amount_different_dni': + case 'exact_amount_near_dni': return primary.dni_distance === null ? 'El monto coincide, pero el DNI del pagador es diferente.' : `El monto coincide, pero el DNI del pagador presenta ${primary.dni_distance} ${primary.dni_distance === 1 ? 'diferencia' : 'diferencias'} de escritura.`; -- 2.49.1 From eb524c7d99bfe7677fa2ea48a3d0e46b5c4e8730 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 27 Aug 2026 16:55:21 -0300 Subject: [PATCH 17/17] feat(checkout): show transfer candidate reason after polling --- .../checkout-page.component.html | 1 + .../checkout-page.component.spec.ts | 46 +++++++++++++++---- .../checkout-page/checkout-page.component.ts | 27 +++++++++-- .../checkout-payment-step.component.html | 1 + .../checkout-payment-step.component.ts | 1 + .../checkout-payment-transfer.component.html | 1 + ...heckout-payment-transfer.component.spec.ts | 19 ++++++++ .../checkout-payment-transfer.component.ts | 1 + .../payment-verification-error.component.html | 2 +- .../payment-verification-error.component.ts | 4 ++ 10 files changed, 90 insertions(+), 13 deletions(-) diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.html b/src/app/features/store/pages/checkout-page/checkout-page.component.html index 336fc3d..27c6d57 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.html +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.html @@ -34,6 +34,7 @@ [qrPaymentAmount]="cartTotal()" [whatsappUrl]="whatsappUrl()" [transferValidationStatus]="transferValidationStatus()" + [transferVerificationErrorTitle]="transferVerificationErrorTitle()" (paymentMethodChange)="selectPaymentMethod($event)" (copyTransferValue)="copyTransferValue($event.field, $event.value)" (cancelStep)="onCancel()" diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts index c93fd86..ace59a0 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts @@ -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')); diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.ts index f580edd..bd8e320 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts @@ -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 | 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('idle'); protected readonly isCheckingQrPayment = signal(false); protected readonly transferValidationStatus = signal('idle'); + private readonly transferPrimaryCandidateReason = signal( + 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; diff --git a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html index 7970925..553115f 100644 --- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html +++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html @@ -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()" diff --git a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts index e43cb1a..3b77621 100644 --- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts +++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts @@ -33,6 +33,7 @@ export class CheckoutPaymentStepComponent { readonly qrPaymentAmount = input(0); readonly whatsappUrl = input(null); readonly transferValidationStatus = input('idle'); + readonly transferVerificationErrorTitle = input(null); readonly paymentMethodChange = output(); readonly copyTransferValue = output<{ field: TransferField; value: string }>(); diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html index 46167a6..3fdc97d 100644 --- a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html @@ -3,6 +3,7 @@ } @else {
diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.spec.ts b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.spec.ts index ec21f16..d8967f9 100644 --- a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.spec.ts +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.spec.ts @@ -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'); + }); }); diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts index 29aed7b..5ebeb56 100644 --- a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts @@ -41,6 +41,7 @@ export class CheckoutPaymentTransferComponent implements OnInit { readonly validationStatus = input('idle'); readonly paymentAmount = input(0); readonly whatsappUrl = input(null); + readonly verificationErrorTitle = input(null); readonly copyTransferValue = output<{ field: TransferField; value: string }>(); readonly submitDni = output(); diff --git a/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.html b/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.html index 64e0374..fcf033f 100644 --- a/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.html +++ b/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.html @@ -2,7 +2,7 @@ -

No pudimos verificar el pago de {{ formattedAmount() }}.

+

{{ displayTitle() }}

Por favor contactate con nosotros para resolverlo.

@if (whatsappUrl()) { (0); readonly whatsappUrl = input(null); + readonly title = input(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(); -- 2.49.1