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

refactor: simplify purchase status page by removing polling logic and updating messages

Browse Source
This commit is contained in:
ncoronel
2026-07-28 16:03:17 -03:00
parent b96d6f23b6
commit 58e9dc06b1
2 changed files with 8 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html
View File

@@ -41,21 +41,7 @@
<hr class="status-content__divider" />
<div class="status-content__section status-content__section--secondary">
<p class="status-content__message">Esta pantalla se actualiza autom&aacute;ticamente cuando el pago impacta.</p>
@if (isRefreshing()) {
<p class="status-content__hint">Actualizando estado...</p>
}
<app-button
type="button"
variant="secondary"
hostClass="status-content__button d-block"
buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center py-2"
[disabled]="isRefreshing()"
(click)="retryStatusCheck()"
>
Actualizar estado
</app-button>
<p class="status-content__message">Te avisaremos cuando el pago sea confirmado.</p>
</div>
} @else if (status() === 'expired') {
<div class="status-content__section status-content__section--primary">
@@ -83,19 +69,9 @@
<hr class="status-content__divider" />
<div class="status-content__section status-content__section--secondary">
<p class="status-content__message">Si ya pagaste, pod&eacute;s reintentar la consulta o escribirnos para revisarlo.</p>
<p class="status-content__message">Si ya pagaste, escribinos para que podamos revisarlo.</p>
<div class="status-content__actions">
<app-button
type="button"
variant="secondary"
hostClass="status-content__button d-block"
buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center py-2"
(click)="retryStatusCheck()"
>
Reintentar
</app-button>
<app-button
type="button"
variant="secondary"
@@ -120,19 +96,9 @@
<hr class="status-content__divider" />
<div class="status-content__section status-content__section--secondary">
<p class="status-content__message">Reintent&aacute; en unos segundos. Si el problema sigue, comunicate con nosotros.</p>
<p class="status-content__message">Volv&eacute; a ingresar m&aacute;s tarde. Si el problema sigue, comunicate con nosotros.</p>
<div class="status-content__actions">
<app-button
type="button"
variant="secondary"
hostClass="status-content__button d-block"
buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center py-2"
(click)="retryStatusCheck()"
>
Reintentar
</app-button>
<app-button
type="button"
variant="secondary"

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

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
import { ChangeDetectionStrategy, Component, OnInit, inject, signal } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CheckoutService, PurchaseStatusResponse } from '../../../../core/services/checkout.service';
@@ -15,19 +15,16 @@ type PurchaseStatusView = 'approved' | 'pending' | 'rejected' | 'expired' | 'err
styleUrl: './purchase-status-page.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PurchaseStatusPageComponent implements OnInit, OnDestroy {
export class PurchaseStatusPageComponent implements OnInit {
private readonly route = inject(ActivatedRoute);
private readonly router = inject(Router);
private readonly checkoutService = inject(CheckoutService);
private readonly tenantService = inject(TenantService);
private readonly pollIntervalMs = 5000;
private purchaseId: string | null = null;
private tenantCode: string | null = null;
private pollTimeoutId: ReturnType<typeof setTimeout> | null = null;
protected readonly isLoading = signal(true);
protected readonly isRefreshing = signal(false);
protected readonly status = signal<PurchaseStatusView>('pending');
ngOnInit(): void {
@@ -42,45 +39,22 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy {
this.purchaseId = purchaseId;
this.tenantCode = tenant.codigo;
void this.refreshStatus(true);
void this.loadStatus();
}
ngOnDestroy(): void {
this.clearScheduledPoll();
}
protected retryStatusCheck(): void {
void this.refreshStatus(false);
}
private async refreshStatus(showLoader: boolean): Promise<void> {
private async loadStatus(): Promise<void> {
if (!this.purchaseId || !this.tenantCode) {
return;
}
this.clearScheduledPoll();
if (showLoader) {
this.isLoading.set(true);
} else {
this.isRefreshing.set(true);
}
try {
const purchase = await this.checkoutService.getPurchase(this.tenantCode, this.purchaseId);
const resolvedStatus = this.resolveStatus(purchase);
this.status.set(resolvedStatus);
if (resolvedStatus === 'pending') {
this.scheduleNextPoll();
}
this.status.set(this.resolveStatus(purchase));
} catch (error) {
console.error('Failed to fetch purchase status:', error);
this.status.set('error');
} finally {
this.isLoading.set(false);
this.isRefreshing.set(false);
}
}
@@ -100,26 +74,6 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy {
return 'pending';
}
private scheduleNextPoll(): void {
if (this.pollTimeoutId !== null) {
return;
}
this.pollTimeoutId = setTimeout(() => {
this.pollTimeoutId = null;
void this.refreshStatus(false);
}, this.pollIntervalMs);
}
private clearScheduledPoll(): void {
if (this.pollTimeoutId === null) {
return;
}
clearTimeout(this.pollTimeoutId);
this.pollTimeoutId = null;
}
protected getWhatsAppLink(): string {
const phone = '5493416658247';
const message = encodeURIComponent('Hola! Mi compra fue realizada con \u00E9xito.');