fix(purchase-detail): add in-review section with WhatsApp contact option
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 '-';
|
||||
|
||||
Reference in New Issue
Block a user