feat(purchase): enhance purchase detail and summary interfaces, update purchase item component for improved data handling

2026-07-08 15:31:37 -03:00
parent 451dc58cd7
commit 9fcbf34573
9 changed files with 247 additions and 141 deletions
--- a/src/app/core/services/checkout.service.ts
+++ b/src/app/core/services/checkout.service.ts
@@ -16,6 +16,51 @@ export interface PurchaseStatusResponse {
  status: string | null;
 }

+export interface PurchaseSummaryResponse extends PurchaseStatusResponse {
+  id: number;
+  created_at: string | null;
+  total: string;
+}
+
+export interface PurchaseDetailAttributeResponse {
+  name: string;
+  value: string | null;
+}
+
+export interface PurchaseDetailItemResponse {
+  id: number;
+  quantity: number;
+  unit_price: string;
+  line_total: string;
+  product: {
+    id: number;
+    nombre: string;
+    slug: string;
+    imagen: string | null;
+  } | null;
+  variant: {
+    id: number;
+    attributes: PurchaseDetailAttributeResponse[];
+  } | null;
+}
+
+export interface PurchaseDetailResponse extends PurchaseStatusResponse {
+  id: number;
+  cart_id: number | null;
+  tenant_codigo: string;
+  user_id: number;
+  created_at: string | null;
+  payment_method: string | null;
+  dni: string | null;
+  telefono: string | null;
+  nombre_apellido: string | null;
+  email: string | null;
+  items_source: 'purchase' | 'cart' | null;
+  items: PurchaseDetailItemResponse[];
+  subtotal: string;
+  total: string;
+}
+
@Injectable({
  providedIn: 'root'
 })
@@ -62,13 +107,13 @@ export class CheckoutService {
    };
  }

-  async getPurchases(tenantCode: string, status?: string): Promise<{ data: any[] }> {
+  async getPurchases(tenantCode: string, status?: string): Promise<{ data: PurchaseSummaryResponse[] }> {
    let url = `${environment.url}tenants/${tenantCode}/compras`;
    if (status) {
      url += `?status=${status}`;
    }
    const response = await firstValueFrom(
-      this.http.get<{ data: any[] }>(url)
+      this.http.get<{ data: PurchaseSummaryResponse[] }>(url)
    );
    if (!response) {
      throw new Error('Error al obtener las compras.');
@@ -76,20 +121,18 @@ export class CheckoutService {
    return response;
  }

-  async getPurchase(tenantCode: string, purchaseId: string | number): Promise<PurchaseStatusResponse> {
+  async getPurchase(tenantCode: string, purchaseId: string | number): Promise<PurchaseDetailResponse> {
    const response = await firstValueFrom(
-      this.http.get<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
+      this.http.get<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
    );

-    const purchase = this.extractResponseData<PurchaseStatusResponse>(response);
+    const purchase = this.extractResponseData<PurchaseDetailResponse>(response);

    if (!purchase) {
      throw new Error('Error al obtener la compra.');
    }

-    return {
-      status: purchase.status ?? null
-    };
+    return purchase;
  }

  private extractResponseData<T>(response: T | { data?: T } | null | undefined): T | null {
--- a/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.html
+++ b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.html
@@ -1,49 +1,47 @@
 <article class="w-100 py-3 rounded-0 cart-item">
  <div class="position-relative overflow-hidden cart-item-media">
-    @if (product.discountPercentage) {
-      <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ product.discountPercentage }}%</span>
+    @if (item.discountPercentage) {
+      <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ item.discountPercentage }}%</span>
    }
-    
-    @if (product.imageUrl) {
-      <img class="w-100 h-100 object-fit-cover d-block" [src]="product.imageUrl" [alt]="product.name" />
+
+    @if (item.imageUrl) {
+      <img class="w-100 h-100 object-fit-cover d-block" [src]="item.imageUrl" [alt]="item.title" />
    } @else {
      <div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
    }
  </div>

-  <div class="d-flex justify-content-between w-100 h-100 py-1">
-    
-    <!-- Left Column -->
-    <div class="d-flex flex-column justify-content-between h-100 pe-2" style="max-width: 65%;">
-      <h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ product.name }}</h3>
-      
-      <div class="d-grid cart-item-attributes">
+  <div class="d-flex flex-column justify-content-between w-100 h-100 py-1 cart-item-content">
+    <div class="d-grid cart-item-top-row align-items-start">
+      <h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ item.title }}</h3>
+
+      <div class="cart-item-prices">
+        @if (item.originalPrice) {
+          <span class="text-decoration-line-through cart-item-original-price">$ {{ item.originalPrice }}</span>
+        }
+        <span class="fw-bold cart-item-discounted-price">$ {{ item.price }}</span>
+      </div>
+    </div>
+
+    <div class="d-grid cart-item-attributes">
+      <div class="cart-item-attribute">
+        <span class="cart-item-attribute-label">Cantidad: </span>
+        <span class="fw-bold">{{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }}</span>
+      </div>
+
+      @for (attribute of item.attributes; track attribute.label + attribute.value) {
        <div class="cart-item-attribute">
-          <span class="fw-normal cart-item-attribute-label">Cantidad: </span>
-          <span class="fw-bold">{{ product.quantity }} unidad</span>
+          <span class="cart-item-attribute-label">{{ attribute.label }}: </span>
+          <span class="fw-bold">{{ attribute.value }}</span>
        </div>
-        @for (attribute of product.attributes; track attribute.label) {
-          <div class="cart-item-attribute">
-            <span class="fw-normal cart-item-attribute-label">{{ attribute.label }}: </span>
-            <span class="fw-bold">{{ attribute.value }}</span>
-          </div>
-        }
-      </div>
+      }
    </div>

-    <!-- Right Column -->
-    <div class="d-flex flex-column position-relative text-end flex-grow-1 h-100">
-      <div class="cart-item-prices d-flex flex-column align-items-end">
-        @if (product.originalPrice) {
-          <span class="text-decoration-line-through fw-light cart-item-original-price">$ {{ product.originalPrice }}</span>
-        }
-        <span class="fw-bold cart-item-discounted-price">$ {{ product.discountedPrice }}</span>
+    @if (item.transferPrice) {
+      <div class="cart-item-transfer-price">
+        <span class="cart-item-price-label">Precio por transferencia</span>
+        <span class="fw-bold">${{ item.transferPrice }}</span>
      </div>
-
-      <div class="cart-item-transfer-price position-absolute top-50 end-0 translate-middle-y w-100">
-        <span class="fw-bold">${{ product.transferPrice }}</span> con transferencia
-      </div>
-    </div>
-
+    }
  </div>
 </article>
--- a/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss
+++ b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss
@@ -84,6 +84,12 @@
  font-weight: bold;
 }

+.cart-item-price-label {
+  color: #a0a0a0;
+  font-size: 9px;
+  font-weight: 325;
+}
+
 .cart-item-attributes {
  gap: 0.125rem;
 }
@@ -102,4 +108,6 @@
  color: #666666;
  font-size: 9px;
  line-height: 1.2;
+  display: grid;
+  justify-items: end;
 }
--- a/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.ts
+++ b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.ts
@@ -1,5 +1,20 @@
 import { Component, Input } from '@angular/core';

+export type PurchaseItemViewModel = {
+  id: number;
+  title: string;
+  imageUrl: string | null;
+  quantity: number;
+  attributes: Array<{
+    label: string;
+    value: string | null;
+  }>;
+  price: string;
+  originalPrice?: string | null;
+  transferPrice?: string | null;
+  discountPercentage?: string | number | null;
+};
+
@Component({
  selector: 'app-purchase-item',
  standalone: true,
@@ -8,5 +23,5 @@ import { Component, Input } from '@angular/core';
  styleUrl: './purchase-item.scss',
 })
 export class PurchaseItem {
-  @Input() product!: any;
+  @Input() item!: PurchaseItemViewModel;
 }
--- a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts
+++ b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts
@@ -9,6 +9,6 @@ import { RouterLink } from '@angular/router';
  styleUrl: './purchase-list-item.scss',
 })
 export class PurchaseListItem {
-  @Input() purchase!: { id: string; date: string };
+  @Input() purchase!: { id: number; date: string };
 }

--- a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts
+++ b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts
@@ -1,10 +1,15 @@
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PurchaseListItem } from '../purchase-list-item/purchase-list-item';
-import { CheckoutService } from '../../../../../../core/services/checkout.service';
+import { CheckoutService, PurchaseSummaryResponse } from '../../../../../../core/services/checkout.service';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { TenantService } from '../../../../../../core/services/tenant.service';

+type PurchaseListViewModel = {
+  id: number;
+  date: string;
+};
+
@Component({
  selector: 'app-purchase-list',
  standalone: true,
@@ -17,7 +22,7 @@ export class PurchaseList implements OnInit {
  private readonly toastService = inject(ToastService);
  private readonly tenantService = inject(TenantService);

-  purchases = signal<{ id: string; date: string }[]>([]);
+  purchases = signal<PurchaseListViewModel[]>([]);
  isLoading = signal<boolean>(true);

  async ngOnInit(): Promise<void> {
@@ -25,9 +30,9 @@ export class PurchaseList implements OnInit {
      const tenantCode = this.tenantService.tenant()?.codigo || '';
      
      const response = await this.checkoutService.getPurchases(tenantCode, 'paid');
-      const mappedPurchases = response.data.map((purchase: any) => ({
-        id: `#${purchase.id.toString().padStart(5, '0')}`,
-        date: '08/06/2026' // Fecha hardcodeada temporalmente
+      const mappedPurchases = response.data.map((purchase: PurchaseSummaryResponse) => ({
+        id: purchase.id,
+        date: this.formatDate(purchase.created_at),
      }));
      this.purchases.set(mappedPurchases);
    } catch (error) {
@@ -36,4 +41,22 @@ export class PurchaseList implements OnInit {
      this.isLoading.set(false);
    }
  }
+
+  private formatDate(value: string | null): string {
+    if (!value) {
+      return '-';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+      return '-';
+    }
+
+    return new Intl.DateTimeFormat('es-AR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    }).format(date);
+  }
 }
--- a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
+++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
@@ -6,22 +6,28 @@
    <h2 class="page-title m-0">MIS COMPRAS</h2>
  </div>

-  <div class="d-flex justify-content-between align-items-center mb-4 pb-3" style="border-bottom: 1px solid #dddddd;">
-    <div class="purchase-info">
-      <span class="purchase-id">Compra #{{ purchase.id }}.</span>
-      <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
+  @if (isLoading()) {
+    <p class="purchase-loading">Cargando detalle de compra...</p>
+  } @else if (purchase(); as purchase) {
+    <div class="d-flex justify-content-between align-items-center mb-4 pb-3" style="border-bottom: 1px solid #dddddd;">
+      <div class="purchase-info">
+        <span class="purchase-id">Compra {{ purchase.id }}.</span>
+        <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
+      </div>
+      <div class="purchase-total ">
+        <span class="purchase-total-label">Total:</span>
+        <span class="purchase-total-value">${{ purchase.total }}</span>
+      </div>
    </div>
-    <div class="purchase-total ">
-      <span class="purchase-total-label">Total:</span>
-      <span class="purchase-total-value">${{ purchase.total }}</span>
+
+    <p style="font-size: 12px; color: #666666; margin:0;">Productos:</p>
+
+    <div class="d-flex flex-column">
+      @for (item of purchase.items; track item.id) {
+        <app-purchase-item [item]="item"></app-purchase-item>
+      } @empty {
+        <p class="purchase-empty">No hay productos para mostrar en esta compra.</p>
+      }
    </div>
-  </div>
-
-  <p style="font-size: 12px; color: #666666; margin:0;">Productos:</p>
-
-  <div class="d-flex flex-column">
-    @for (product of purchase.products; track product.id) {
-      <app-purchase-item [product]="product"></app-purchase-item>
-    }
-  </div>
+  }
 </div>
--- a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss
+++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss
@@ -42,3 +42,10 @@
  font-weight: bold;
  font-size: 17px;
 }
+
+.purchase-loading,
+.purchase-empty {
+  color: #666666;
+  font-size: 12px;
+  margin: 0;
+}
--- a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts
+++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts
@@ -1,7 +1,18 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { ActivatedRoute, RouterLink } from '@angular/router';
-import { PurchaseItem } from '../../components/purchase-item/purchase-item';
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+
+import { CheckoutService, PurchaseDetailResponse } from '../../../../../../core/services/checkout.service';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { PurchaseItem, PurchaseItemViewModel } from '../../components/purchase-item/purchase-item';
+
+type PurchaseDetailViewModel = {
+  id: number;
+  date: string;
+  total: string;
+  items: PurchaseItemViewModel[];
+};

@Component({
  selector: 'app-purchase-detail-page',
@@ -10,80 +21,75 @@ import { PurchaseItem } from '../../components/purchase-item/purchase-item';
  templateUrl: './purchase-detail-page.html',
  styleUrl: './purchase-detail-page.scss',
 })
-export class PurchaseDetailPage {
-  purchaseId = 'A00013';
+export class PurchaseDetailPage implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly tenantService = inject(TenantService);
+  private readonly toastService = inject(ToastService);

-  // Mocked data based on the provided image
-  purchase = {
-    id: this.purchaseId,
-    date: '15/04/2026',
-    total: '365.480,00',
-    products: [
-      {
-        id: 1,
-        name: 'PANTALÓN RECTO DE SCUBA NEGRO',
-        quantity: 1,
-        attributes: [
-          { label: 'Color', value: 'Beige' },
-          { label: 'Talle', value: 'S' }
-        ],
-        originalPrice: '95.000',
-        discountedPrice: '76.000',
-        transferPrice: '74.800',
-        discountPercentage: '20',
-        imageUrl: '' // placeholder
-      },
-      {
-        id: 2,
-        name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU',
-        quantity: 1,
-        attributes: [
-          { label: 'Color', value: 'Beige' },
-          { label: 'Talle', value: 'M' }
-        ],
-        originalPrice: '68.500',
-        discountedPrice: '61.000',
-        transferPrice: '59.800',
-        discountPercentage: '10',
-        imageUrl: ''
-      },
-      {
-        id: 3,
-        name: 'CALZA TÉRMICA UNISEX CON PROCESO SENSE Y CINTURA CON MAYOR AGARRE',
-        quantity: 1,
-        attributes: [
-          { label: 'Color', value: 'Beige' },
-          { label: 'Talle', value: 'M' }
-        ],
-        originalPrice: null,
-        discountedPrice: '120.000',
-        transferPrice: '180.000',
-        discountPercentage: null,
-        imageUrl: ''
-      },
-      {
-        id: 4,
-        name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU',
-        quantity: 1,
-        attributes: [
-          { label: 'Color', value: 'Beige' },
-          { label: 'Talle', value: 'M' }
-        ],
-        originalPrice: '68.500',
-        discountedPrice: '61.000',
-        transferPrice: '59.800',
-        discountPercentage: '10',
-        imageUrl: ''
-      }
-    ]
-  };
+  readonly isLoading = signal(true);
+  readonly purchase = signal<PurchaseDetailViewModel | null>(null);

-  constructor(private route: ActivatedRoute) {
-    this.route.params.subscribe(params => {
-      if (params['id']) {
-        this.purchaseId = params['id'];
-        this.purchase.id = this.purchaseId;
-      }
-    });
+  async ngOnInit(): Promise<void> {
+    const purchaseId = this.route.snapshot.paramMap.get('id');
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant) {
+      void this.router.navigate(['/mi-cuenta/compras']);
+      return;
+    }
+
+    try {
+      const response = await this.checkoutService.getPurchase(tenant.codigo, purchaseId);
+
+      this.purchase.set({
+        id: response.id,
+        date: this.formatDate(response.created_at),
+        total: response.total,
+        items: this.mapItems(response),
+      });
+    } catch (error) {
+      console.error('Failed to fetch purchase detail:', error);
+      this.toastService.danger('Hubo un error al cargar el detalle de la compra');
+      void this.router.navigate(['/mi-cuenta/compras']);
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  private formatDate(value: string | null): string {
+    if (!value) {
+      return '-';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+      return '-';
+    }
+
+    return new Intl.DateTimeFormat('es-AR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    }).format(date);
+  }
+
+  private mapItems(purchase: PurchaseDetailResponse): PurchaseItemViewModel[] {
+    return purchase.items.map((item) => ({
+      id: item.id,
+      title: item.product?.nombre ?? 'Producto sin nombre',
+      imageUrl: item.product?.imagen ?? null,
+      quantity: item.quantity,
+      attributes: (item.variant?.attributes ?? []).map((attribute) => ({
+        label: attribute.name,
+        value: attribute.value,
+      })),
+      price: item.line_total,
+      originalPrice: null,
+      transferPrice: null,
+      discountPercentage: null,
+    }));
  }
 }