refactor: simplify purchase status page by removing polling logic and updating messages
This commit is contained in:
@@ -41,21 +41,7 @@
|
|||||||
<hr class="status-content__divider" />
|
<hr class="status-content__divider" />
|
||||||
|
|
||||||
<div class="status-content__section status-content__section--secondary">
|
<div class="status-content__section status-content__section--secondary">
|
||||||
<p class="status-content__message">Esta pantalla se actualiza automáticamente cuando el pago impacta.</p>
|
<p class="status-content__message">Te avisaremos cuando el pago sea confirmado.</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>
|
|
||||||
</div>
|
</div>
|
||||||
} @else if (status() === 'expired') {
|
} @else if (status() === 'expired') {
|
||||||
<div class="status-content__section status-content__section--primary">
|
<div class="status-content__section status-content__section--primary">
|
||||||
@@ -83,19 +69,9 @@
|
|||||||
<hr class="status-content__divider" />
|
<hr class="status-content__divider" />
|
||||||
|
|
||||||
<div class="status-content__section status-content__section--secondary">
|
<div class="status-content__section status-content__section--secondary">
|
||||||
<p class="status-content__message">Si ya pagaste, podé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">
|
<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
|
<app-button
|
||||||
type="button"
|
type="button"
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
@@ -120,19 +96,9 @@
|
|||||||
<hr class="status-content__divider" />
|
<hr class="status-content__divider" />
|
||||||
|
|
||||||
<div class="status-content__section status-content__section--secondary">
|
<div class="status-content__section status-content__section--secondary">
|
||||||
<p class="status-content__message">Reintentá en unos segundos. Si el problema sigue, comunicate con nosotros.</p>
|
<p class="status-content__message">Volvé a ingresar más tarde. Si el problema sigue, comunicate con nosotros.</p>
|
||||||
|
|
||||||
<div class="status-content__actions">
|
<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
|
<app-button
|
||||||
type="button"
|
type="button"
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
|
|||||||
@@ -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 { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
|
||||||
import { CheckoutService, PurchaseStatusResponse } from '../../../../core/services/checkout.service';
|
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',
|
styleUrl: './purchase-status-page.component.scss',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||||||
})
|
})
|
||||||
export class PurchaseStatusPageComponent implements OnInit, OnDestroy {
|
export class PurchaseStatusPageComponent implements OnInit {
|
||||||
private readonly route = inject(ActivatedRoute);
|
private readonly route = inject(ActivatedRoute);
|
||||||
private readonly router = inject(Router);
|
private readonly router = inject(Router);
|
||||||
private readonly checkoutService = inject(CheckoutService);
|
private readonly checkoutService = inject(CheckoutService);
|
||||||
private readonly tenantService = inject(TenantService);
|
private readonly tenantService = inject(TenantService);
|
||||||
|
|
||||||
private readonly pollIntervalMs = 5000;
|
|
||||||
private purchaseId: string | null = null;
|
private purchaseId: string | null = null;
|
||||||
private tenantCode: string | null = null;
|
private tenantCode: string | null = null;
|
||||||
private pollTimeoutId: ReturnType<typeof setTimeout> | null = null;
|
|
||||||
|
|
||||||
protected readonly isLoading = signal(true);
|
protected readonly isLoading = signal(true);
|
||||||
protected readonly isRefreshing = signal(false);
|
|
||||||
protected readonly status = signal<PurchaseStatusView>('pending');
|
protected readonly status = signal<PurchaseStatusView>('pending');
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
@@ -42,45 +39,22 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy {
|
|||||||
this.purchaseId = purchaseId;
|
this.purchaseId = purchaseId;
|
||||||
this.tenantCode = tenant.codigo;
|
this.tenantCode = tenant.codigo;
|
||||||
|
|
||||||
void this.refreshStatus(true);
|
void this.loadStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
private async loadStatus(): Promise<void> {
|
||||||
this.clearScheduledPoll();
|
|
||||||
}
|
|
||||||
|
|
||||||
protected retryStatusCheck(): void {
|
|
||||||
void this.refreshStatus(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async refreshStatus(showLoader: boolean): Promise<void> {
|
|
||||||
if (!this.purchaseId || !this.tenantCode) {
|
if (!this.purchaseId || !this.tenantCode) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.clearScheduledPoll();
|
|
||||||
|
|
||||||
if (showLoader) {
|
|
||||||
this.isLoading.set(true);
|
|
||||||
} else {
|
|
||||||
this.isRefreshing.set(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const purchase = await this.checkoutService.getPurchase(this.tenantCode, this.purchaseId);
|
const purchase = await this.checkoutService.getPurchase(this.tenantCode, this.purchaseId);
|
||||||
const resolvedStatus = this.resolveStatus(purchase);
|
this.status.set(this.resolveStatus(purchase));
|
||||||
|
|
||||||
this.status.set(resolvedStatus);
|
|
||||||
|
|
||||||
if (resolvedStatus === 'pending') {
|
|
||||||
this.scheduleNextPoll();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch purchase status:', error);
|
console.error('Failed to fetch purchase status:', error);
|
||||||
this.status.set('error');
|
this.status.set('error');
|
||||||
} finally {
|
} finally {
|
||||||
this.isLoading.set(false);
|
this.isLoading.set(false);
|
||||||
this.isRefreshing.set(false);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -100,26 +74,6 @@ export class PurchaseStatusPageComponent implements OnInit, OnDestroy {
|
|||||||
return 'pending';
|
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 {
|
protected getWhatsAppLink(): string {
|
||||||
const phone = '5493416658247';
|
const phone = '5493416658247';
|
||||||
const message = encodeURIComponent('Hola! Mi compra fue realizada con \u00E9xito.');
|
const message = encodeURIComponent('Hola! Mi compra fue realizada con \u00E9xito.');
|
||||||
|
|||||||
Reference in New Issue
Block a user