fix(purchase-detail): add in-review section with WhatsApp contact option
This commit is contained in:
@@ -15,6 +15,27 @@
|
|||||||
@if (isLoading()) {
|
@if (isLoading()) {
|
||||||
<p class="purchase-loading">Cargando detalle de compra...</p>
|
<p class="purchase-loading">Cargando detalle de compra...</p>
|
||||||
} @else if (purchase(); as purchase) {
|
} @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
|
<div
|
||||||
class="d-flex justify-content-between align-items-center mb-4 pb-3"
|
class="d-flex justify-content-between align-items-center mb-4 pb-3"
|
||||||
style="border-bottom: 1px solid #dddddd"
|
style="border-bottom: 1px solid #dddddd"
|
||||||
|
|||||||
@@ -52,6 +52,32 @@
|
|||||||
font-size: 17px;
|
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-loading,
|
||||||
.purchase-empty {
|
.purchase-empty {
|
||||||
color: #666666;
|
color: #666666;
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { CommonModule } from '@angular/common';
|
import { Component, OnInit, computed, inject, signal } from '@angular/core';
|
||||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
|
||||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -8,6 +7,7 @@ import {
|
|||||||
} from '../../../../../../core/services/checkout.service';
|
} from '../../../../../../core/services/checkout.service';
|
||||||
import { TenantService } from '../../../../../../core/services/tenant.service';
|
import { TenantService } from '../../../../../../core/services/tenant.service';
|
||||||
import { ToastService } from '../../../../../../core/services/toast.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 { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';
|
||||||
import { PurchaseItem, PurchaseItemViewModel } from '../../components/purchase-item/purchase-item';
|
import { PurchaseItem, PurchaseItemViewModel } from '../../components/purchase-item/purchase-item';
|
||||||
|
|
||||||
@@ -16,12 +16,13 @@ type PurchaseDetailViewModel = {
|
|||||||
date: string;
|
date: string;
|
||||||
total: string;
|
total: string;
|
||||||
items: PurchaseItemViewModel[];
|
items: PurchaseItemViewModel[];
|
||||||
|
isInReview: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-purchase-detail-page',
|
selector: 'app-purchase-detail-page',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule, RouterLink, PurchaseItem, MenuContentSectionComponent],
|
imports: [RouterLink, PurchaseItem, MenuContentSectionComponent, ButtonComponent],
|
||||||
templateUrl: './purchase-detail-page.html',
|
templateUrl: './purchase-detail-page.html',
|
||||||
styleUrl: './purchase-detail-page.scss',
|
styleUrl: './purchase-detail-page.scss',
|
||||||
})
|
})
|
||||||
@@ -34,6 +35,12 @@ export class PurchaseDetailPage implements OnInit {
|
|||||||
|
|
||||||
readonly isLoading = signal(true);
|
readonly isLoading = signal(true);
|
||||||
readonly purchase = signal<PurchaseDetailViewModel | null>(null);
|
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> {
|
async ngOnInit(): Promise<void> {
|
||||||
const purchaseId = this.route.snapshot.paramMap.get('id');
|
const purchaseId = this.route.snapshot.paramMap.get('id');
|
||||||
@@ -54,6 +61,7 @@ export class PurchaseDetailPage implements OnInit {
|
|||||||
date: this.formatDate(response.created_at),
|
date: this.formatDate(response.created_at),
|
||||||
total: response.total,
|
total: response.total,
|
||||||
items: this.mapItems(response),
|
items: this.mapItems(response),
|
||||||
|
isInReview: response.status === 'in_review',
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch purchase detail:', 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 {
|
private formatDate(value: string | null): string {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return '-';
|
return '-';
|
||||||
|
|||||||
Reference in New Issue
Block a user