From e06edaaa42e78ceef19ac0d629ce45be74c7525c Mon Sep 17 00:00:00 2001 From: ncoronel Date: Wed, 8 Jul 2026 13:40:29 -0300 Subject: [PATCH] feat(purchase-detail): add purchase detail page with routing and mock data --- .../purchase-list-item.html | 2 +- .../purchase-list-item/purchase-list-item.ts | 3 +- .../purchase-detail-page.html | 74 +++++++++ .../purchase-detail-page.scss | 142 ++++++++++++++++++ .../purchase-detail-page.ts | 80 ++++++++++ src/app/features/store/store.routes.ts | 7 + 6 files changed, 306 insertions(+), 2 deletions(-) create mode 100644 src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html create mode 100644 src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss create mode 100644 src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts diff --git a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html index 8be48cc..f77451c 100644 --- a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html +++ b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html @@ -1,4 +1,4 @@ -
+
Compra {{ purchase.id }}. Fecha de compra: {{ purchase.date }} diff --git 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 index 393f6e5..b423d1c 100644 --- 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 @@ -1,9 +1,10 @@ import { Component, Input } from '@angular/core'; +import { RouterLink } from '@angular/router'; @Component({ selector: 'app-purchase-list-item', standalone: true, - imports: [], + imports: [RouterLink], templateUrl: './purchase-list-item.html', styleUrl: './purchase-list-item.scss', }) diff --git 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 new file mode 100644 index 0000000..1f34489 --- /dev/null +++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html @@ -0,0 +1,74 @@ +
+
+ + + +

MIS COMPRAS

+
+ +
+
+ Compra #{{ purchase.id }}. + Fecha de compra: {{ purchase.date }} +
+
+ Total: + ${{ purchase.total }} +
+
+ +

Productos:

+ +
+ @for (product of purchase.products; track product.id) { +
+
+ @if (product.discountPercentage) { + -{{ product.discountPercentage }}% + } + + @if (product.imageUrl) { + + } @else { + + } +
+ +
+
+

{{ product.name }}

+ +
+ @if (product.originalPrice) { + $ {{ product.originalPrice }} + } + $ {{ product.discountedPrice }} +
+
+ +
+
+
+ Cantidad: + {{ product.quantity }} unidad +
+
+ Color: + {{ product.color }} +
+
+ Talle: + {{ product.size }} +
+
+ +
+ ${{ product.transferPrice }} + con transferencia +
+
+
+
+ } +
+
diff --git 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 new file mode 100644 index 0000000..f2fc769 --- /dev/null +++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss @@ -0,0 +1,142 @@ +.page-container { + display: flex; + flex-direction: column; + width: 100%; + max-width: 600px; +} + +.page-title { + font-size: 15px; + font-weight: bold; + color: #888; +} + +.purchase-info { + display: flex; + flex-direction: column; + gap: 4px; +} +.purchase-id { + font-weight: bold; + color: #666666; + font-size: 13px; +} +.purchase-date { + font-weight: 325; + color: #666666; + font-size: 10px; +} + +.purchase-total { + display: flex; + align-items: center; + gap: 0.5rem; +} +.purchase-total-label { + font-size: 13px; + color: #666666; + font-weight: 325; +} +.purchase-total-value { + color: var(--bs-primary, #5b75ff); + font-weight: bold; + font-size: 15px; +} + +.cart-item { + display: grid; + grid-template-columns: 90px minmax(0, 1fr); + gap: 0.75rem; + background-color: transparent; + position: relative; + border-bottom: 1px solid #eaeaea; +} + +.cart-item:last-child { + border-bottom: none; +} + +.cart-item-media { + width: 90px; + aspect-ratio: 1 / 1; + border-radius: 5px 0 0 5px; + background-color: #ffffff; + border: 1px solid #eaeaea; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } +} + +.cart-item-discount-badge { + padding: 2px 5px; + border-bottom-right-radius: 4px; + background-color: var(--bs-primary, #5b75ff); + color: #ffffff; + font-size: 8px; + font-weight: 500; + line-height: 1; +} + +.cart-item-placeholder { + width: 100%; + height: 100%; + background: linear-gradient(135deg, #e0e0e0, #f5f5f5); +} + +.cart-item-content { + gap: 0.5rem; +} + +.cart-item-top-row { + grid-template-columns: minmax(0, 1fr) auto; + gap: 0.75rem; +} + +.cart-item-product { + color: #666666; + font-size: 12px; + line-height: 1.25; + font-weight: 325; +} + +.cart-item-prices { + display: grid; + justify-items: end; + line-height: 1.1; +} + +.cart-item-original-price { + color: #a0a0a0; + font-size: 10px; + font-weight: 325; +} + +.cart-item-discounted-price { + color: var(--bs-primary, #5b75ff); + font-size: 13px; + font-weight: 425; +} + +.cart-item-attributes { + gap: 0.125rem; +} + +.cart-item-attribute { + color: #666666; + font-size: 11px; + line-height: 1.2; +} + +.cart-item-attribute-label { + font-weight: 325; +} + +.cart-item-transfer-price { + color: #666666; + font-size: 10px; + line-height: 1.2; +} 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 new file mode 100644 index 0000000..5e92219 --- /dev/null +++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts @@ -0,0 +1,80 @@ +import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; +import { ActivatedRoute, RouterLink } from '@angular/router'; + +@Component({ + selector: 'app-purchase-detail-page', + standalone: true, + imports: [CommonModule, RouterLink], + templateUrl: './purchase-detail-page.html', + styleUrl: './purchase-detail-page.scss', +}) +export class PurchaseDetailPage { + purchaseId = 'A00013'; + + // 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, + color: 'Beige', + size: '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, + color: 'Beige', + size: '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, + color: 'Beige', + size: 'M', + originalPrice: null, + discountedPrice: '120.000', + transferPrice: '180.000', + discountPercentage: null, + imageUrl: '' + }, + { + id: 4, + name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU', + quantity: 1, + color: 'Beige', + size: 'M', + originalPrice: '68.500', + discountedPrice: '61.000', + transferPrice: '59.800', + discountPercentage: '10', + imageUrl: '' + } + ] + }; + + constructor(private route: ActivatedRoute) { + this.route.params.subscribe(params => { + if (params['id']) { + this.purchaseId = params['id']; + this.purchase.id = this.purchaseId; + } + }); + } +} diff --git a/src/app/features/store/store.routes.ts b/src/app/features/store/store.routes.ts index 15325a4..027e776 100644 --- a/src/app/features/store/store.routes.ts +++ b/src/app/features/store/store.routes.ts @@ -88,6 +88,13 @@ export const routes: Routes = [ (m) => m.PurchasesPage ) }, + { + path: 'compras/:id', + loadComponent: () => + import('./pages/account-page/pages/purchase-detail-page/purchase-detail-page').then( + (m) => m.PurchaseDetailPage + ) + }, { path: '', redirectTo: 'datos-personales',