fix(purchase-detail): add in-review section with WhatsApp contact option

This commit is contained in:
2026-08-24 12:35:33 -03:00
parent f2c1542e46
commit 7fbdd3844f
3 changed files with 66 additions and 3 deletions

View File

@@ -15,6 +15,27 @@
@if (isLoading()) {
<p class="purchase-loading">Cargando detalle de compra...</p>
} @else if (purchase(); as purchase) {
@if (purchase.isInReview) {
<section class="purchase-review" aria-labelledby="purchase-review-title">
<h3 id="purchase-review-title" class="purchase-review__title">ESPERANDO CONFIRMACIÓN</h3>
<p class="purchase-review__message">
Tu compra aún no ha sido confirmada.<br />
Si no te contactaste con nosotros, podés hacerlo a través del siguiente WhatsApp
</p>
@if (whatsappUrl()) {
<app-button
type="button"
variant="primary"
hostClass="purchase-review__button"
(click)="openWhatsApp()"
>
WhatsApp
</app-button>
}
</section>
}
<div
class="d-flex justify-content-between align-items-center mb-4 pb-3"
style="border-bottom: 1px solid #dddddd"

View File

@@ -52,6 +52,32 @@
font-size: 17px;
}
.purchase-review {
padding-bottom: 2rem;
margin-bottom: 2rem;
border-bottom: 1px solid #dddddd;
}
.purchase-review__title {
margin: 0 0 0.5rem;
color: var(--color-primary, var(--tenant-primary, #5b75ff));
font-size: 14px;
font-weight: 700;
line-height: 1.25;
}
.purchase-review__message {
margin: 0 0 1.5rem;
color: #777777;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
}
.purchase-review__button {
width: 185px;
}
.purchase-loading,
.purchase-empty {
color: #666666;

View File

@@ -1,5 +1,4 @@
import { CommonModule } from '@angular/common';
import { Component, OnInit, inject, signal } from '@angular/core';
import { Component, OnInit, computed, inject, signal } from '@angular/core';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import {
@@ -8,6 +7,7 @@ import {
} from '../../../../../../core/services/checkout.service';
import { TenantService } from '../../../../../../core/services/tenant.service';
import { ToastService } from '../../../../../../core/services/toast.service';
import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
import { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';
import { PurchaseItem, PurchaseItemViewModel } from '../../components/purchase-item/purchase-item';
@@ -16,12 +16,13 @@ type PurchaseDetailViewModel = {
date: string;
total: string;
items: PurchaseItemViewModel[];
isInReview: boolean;
};
@Component({
selector: 'app-purchase-detail-page',
standalone: true,
imports: [CommonModule, RouterLink, PurchaseItem, MenuContentSectionComponent],
imports: [RouterLink, PurchaseItem, MenuContentSectionComponent, ButtonComponent],
templateUrl: './purchase-detail-page.html',
styleUrl: './purchase-detail-page.scss',
})
@@ -34,6 +35,12 @@ export class PurchaseDetailPage implements OnInit {
readonly isLoading = signal(true);
readonly purchase = signal<PurchaseDetailViewModel | null>(null);
protected readonly whatsappUrl = computed(
() =>
this.tenantService
.tenant()
?.social_media?.find((socialMedia) => socialMedia.code === 'whatsapp')?.url ?? null,
);
async ngOnInit(): Promise<void> {
const purchaseId = this.route.snapshot.paramMap.get('id');
@@ -54,6 +61,7 @@ export class PurchaseDetailPage implements OnInit {
date: this.formatDate(response.created_at),
total: response.total,
items: this.mapItems(response),
isInReview: response.status === 'in_review',
});
} catch (error) {
console.error('Failed to fetch purchase detail:', error);
@@ -64,6 +72,14 @@ export class PurchaseDetailPage implements OnInit {
}
}
protected openWhatsApp(): void {
const url = this.whatsappUrl();
if (url) {
window.open(url, '_blank', 'noopener,noreferrer');
}
}
private formatDate(value: string | null): string {
if (!value) {
return '-';