feat(purchase-item): enhance layout for items without images and add description handling

2026-07-21 12:21:26 -03:00
parent da6614a9f8
commit 8f57af3cf5
5 changed files with 142 additions and 34 deletions
--- 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,15 +1,15 @@
-<article class="w-100 py-3 rounded-0 cart-item">
-  <div class="position-relative overflow-hidden cart-item-media">
-    @if (item.discountPercentage) {
-      <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ item.discountPercentage }}%</span>
-    }
+<article class="w-100 py-3 rounded-0 cart-item" [class.cart-item--without-image]="!item.imageUrl">
+  @if (item.imageUrl) {
+    <div class="position-relative overflow-hidden cart-item-media">
+      @if (item.discountPercentage) {
+        <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge"
+          >-{{ item.discountPercentage }}%</span
+        >
+      }

-    @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>
+  }

  <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">
@@ -17,33 +17,57 @@

      <div class="cart-item-prices">
        @if (item.originalPrice) {
-          <span class="text-decoration-line-through cart-item-original-price">$ {{ item.originalPrice }}</span>
+          <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"
-      [class.cart-item-attributes--quantity-only]="item.attributes.length === 0"
-    >
-      <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>
+    @if (item.imageUrl) {
+      <div
+        class="d-grid cart-item-attributes"
+        [class.cart-item-attributes--quantity-only]="item.attributes.length === 0"
+      >
+        <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="cart-item-attribute-label">{{ attribute.label }}: </span>
+            <span class="fw-bold">{{ attribute.value }}</span>
+          </div>
+        }
      </div>

-      @for (attribute of item.attributes; track attribute.label + attribute.value) {
-        <div class="cart-item-attribute">
-          <span class="cart-item-attribute-label">{{ attribute.label }}: </span>
-          <span class="fw-bold">{{ attribute.value }}</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>
+    } @else {
+      <p class="m-0 cart-item-description">{{ item.description }}</p>

-    @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 class="d-grid cart-item-bottom-details">
+        @for (attribute of item.attributes; track attribute.label + attribute.value) {
+          <div class="cart-item-attribute">
+            <span class="cart-item-attribute-label">{{ attribute.label }}: </span>
+            <span class="fw-bold">{{ attribute.value }}</span>
+          </div>
+        }
+
+        <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>
      </div>
    }
  </div>
--- 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
@@ -13,6 +13,10 @@
  gap: 0.75rem;
  background-color: transparent;
  position: relative;
+
+  &--without-image {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }

 .cart-item-media {
@@ -44,12 +48,6 @@
  line-height: 1;
 }

-.cart-item-placeholder {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
-}
-
 .cart-item-content {
  gap: 0.5rem;
 }
@@ -116,3 +114,16 @@
  display: grid;
  justify-items: end;
 }
+
+.cart-item-description {
+  color: #666666;
+  font-size: 9px;
+  font-weight: 325;
+  line-height: 1.35;
+  white-space: pre-line;
+}
+
+.cart-item-bottom-details {
+  gap: 0.125rem;
+  justify-items: end;
+}
--- a/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.spec.ts
+++ b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.spec.ts
@@ -0,0 +1,68 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { PurchaseItem, PurchaseItemViewModel } from './purchase-item';
+
+describe('PurchaseItem', () => {
+  let fixture: ComponentFixture<PurchaseItem>;
+
+  const item: PurchaseItemViewModel = {
+    id: 1,
+    title: 'Entrada general',
+    description: 'Acceso al evento durante toda la jornada.',
+    imageUrl: null,
+    quantity: 2,
+    attributes: [{ label: 'Turno', value: 'Tarde' }],
+    price: '20000.00',
+    transferPrice: '18000.00',
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [PurchaseItem] }).compileComponents();
+    fixture = TestBed.createComponent(PurchaseItem);
+  });
+
+  it('uses the image-free layout and moves description and item details', () => {
+    fixture.componentInstance.item = item;
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(
+      element.querySelector('.cart-item')?.classList.contains('cart-item--without-image'),
+    ).toBe(true);
+    expect(element.querySelector('.cart-item-media')).toBeNull();
+    expect(element.querySelector('.cart-item-description')?.textContent?.trim()).toBe(
+      item.description,
+    );
+    expect(element.querySelector('.cart-item-bottom-details')?.textContent).toContain(
+      'Turno: Tarde',
+    );
+    expect(element.querySelector('.cart-item-bottom-details')?.textContent).toContain(
+      'Cantidad: 2 unidades',
+    );
+    expect(element.querySelector('.cart-item-transfer-price')).toBeNull();
+  });
+
+  it('keeps the existing layout when the product has an image', () => {
+    fixture.componentInstance.item = {
+      ...item,
+      imageUrl: 'https://example.com/product.png',
+    };
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(
+      element.querySelector('.cart-item')?.classList.contains('cart-item--without-image'),
+    ).toBe(false);
+    expect(element.querySelector('.cart-item-media img')).not.toBeNull();
+    expect(element.querySelector('.cart-item-description')).toBeNull();
+    expect(element.querySelector('.cart-item-attributes')?.textContent).toContain(
+      'Cantidad: 2 unidades',
+    );
+    expect(element.querySelector('.cart-item-transfer-price')?.textContent).toContain(
+      'Precio por transferencia',
+    );
+  });
+});
--- 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
@@ -3,6 +3,7 @@ import { Component, Input } from '@angular/core';
 export type PurchaseItemViewModel = {
  id: number;
  title: string;
+  description: string | null;
  imageUrl: string | null;
  quantity: number;
  attributes: Array<{
--- 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
@@ -2,7 +2,10 @@ import { CommonModule } from '@angular/common';
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';

-import { CheckoutService, PurchaseDetailResponse } from '../../../../../../core/services/checkout.service';
+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';
@@ -80,6 +83,7 @@ export class PurchaseDetailPage implements OnInit {
    return purchase.items.map((item) => ({
      id: item.id,
      title: item.item_details.nombre || 'Producto sin nombre',
+      description: item.item_details.descripcion,
      imageUrl: item.item_details.imagen,
      quantity: item.quantity,
      attributes: item.item_details.attributes.map((attribute) => ({