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

Squashed commit of the following: 

commit 38d03588b1
Merge: 8e987d0 6f4aa3b
Author: ncoronel <ncoronel@quo.ar>
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 8e987d0ce6
Author: ncoronel <ncoronel@quo.ar>
Date:   Wed Aug 26 10:02:26 2026 -0300

    fix(purchase-status): clear cart on approved purchase

commit e171b9a233
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 17:06:07 2026 -0300

    refactor(checkout): use purchase id route segment

commit 643d43adea
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 17:05:59 2026 -0300

    fix(checkout): handle expired purchase exits

commit d89d01b511
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 16:47:17 2026 -0300

    fix(checkout): refresh expired carts

commit eeb245209b
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 16:46:12 2026 -0300

    fix(checkout): show backend start errors

commit 9d3754c2d8
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 16:33:44 2026 -0300

    fix(cart): refresh state after expiration

commit 6f4aa3b1bd
Author: ncoronel <ncoronel@quo.ar>
Date:   Wed Aug 26 10:02:26 2026 -0300

    fix(purchase-status): clear cart on approved purchase

commit 2b342ec235
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 17:06:07 2026 -0300

    refactor(checkout): use purchase id route segment

commit d06b146104
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 17:05:59 2026 -0300

    fix(checkout): handle expired purchase exits

commit f4e0a9e028
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 16:47:17 2026 -0300

    fix(checkout): refresh expired carts

commit 8c2b738806
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 16:46:12 2026 -0300

    fix(checkout): show backend start errors

commit 1362d0c163
Author: ncoronel <ncoronel@quo.ar>
Date:   Tue Aug 25 16:33:44 2026 -0300

    fix(cart): refresh state after expiration
This commit is contained in:
ncoronel 2026-08-26 10:29:23 -03:00
parent 85529f40f2
commit 591f53c102
18 changed files with 455 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/app.routes.spec.ts
View File

@ -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');
});
});

2
src/app/core/guards/menu.guard.spec.ts
View File

@ -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('/');

43
src/app/core/layout/store-layout/store-layout.component.spec.ts
View File

@ -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,

22
src/app/core/layout/store-layout/store-layout.component.ts
View File

@ -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);
}

6
src/app/core/services/auth/auth.guards.spec.ts
View File

@ -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);

15
src/app/core/services/checkout.service.ts
View File

@ -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<ExpiredStockReservationResponse>).code === 'stock_reservation.expired'
);
}
export type StartCheckoutPayload =
| {
cart_id: number;

19
src/app/features/store/pages/category-items-page/category-items-page.component.ts
View File

@ -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);
}

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

@ -33,7 +33,7 @@ describe('CheckoutPageComponent payment validation', () => {
stop: ReturnType<typeof vi.fn>;
};
let cartServiceStub: { loadCart: ReturnType<typeof vi.fn> };
let routeQueryParamMap: ReturnType<typeof convertToParamMap>;
let routeParamMap: ReturnType<typeof convertToParamMap>;
let authUserState: ReturnType<typeof signal>;
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' },
});
});
});

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

@ -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();

4
src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
View File

@ -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 () => {

4
src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
View File

@ -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 =

35
src/app/features/store/pages/purchase-status-page/purchase-status-page.component.spec.ts
View File

@ -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<HTMLButtonElement>('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,

25
src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts
View File

@ -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();

19
src/app/features/store/pages/search-page/search-page.component.ts
View File

@ -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);
}

11
src/app/features/store/pages/store-home-page/store-home-page.component.ts
View File

@ -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)

18
src/app/features/store/store.routes.ts
View File

@ -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')],

57
src/app/shared/components/cart/cart.component.spec.ts
View File

@ -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')));

41
src/app/shared/components/cart/cart.component.ts
View File

@ -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),
});
}
}