diff --git 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 index 4ce92db..85f6946 100644 --- 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 @@ -
-
- @if (item.discountPercentage) { - -{{ item.discountPercentage }}% - } +
+ @if (item.imageUrl) { +
+ @if (item.discountPercentage) { + -{{ item.discountPercentage }}% + } - @if (item.imageUrl) { - } @else { - - } -
+
+ }
@@ -17,33 +17,57 @@
@if (item.originalPrice) { - $ {{ item.originalPrice }} + $ {{ item.originalPrice }} } $ {{ item.price }}
-
-
- Cantidad: - {{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }} + @if (item.imageUrl) { +
+
+ Cantidad: + {{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }} +
+ + @for (attribute of item.attributes; track attribute.label + attribute.value) { +
+ {{ attribute.label }}: + {{ attribute.value }} +
+ }
- @for (attribute of item.attributes; track attribute.label + attribute.value) { -
- {{ attribute.label }}: - {{ attribute.value }} + @if (item.transferPrice) { +
+ Precio por transferencia + ${{ item.transferPrice }}
} -
+ } @else { +

{{ item.description }}

- @if (item.transferPrice) { -
- Precio por transferencia - ${{ item.transferPrice }} +
+ @for (attribute of item.attributes; track attribute.label + attribute.value) { +
+ {{ attribute.label }}: + {{ attribute.value }} +
+ } + +
+ Cantidad: + {{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }} +
}
diff --git 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 index 45c2758..98e50d0 100644 --- 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; +} diff --git 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 new file mode 100644 index 0000000..785a475 --- /dev/null +++ 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; + + 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', + ); + }); +}); diff --git 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 index fb2e298..0df160e 100644 --- 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<{ diff --git 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 index 91197a3..64af312 100644 --- 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) => ({