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 new file mode 100644 index 0000000..5813035 --- /dev/null +++ b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.html @@ -0,0 +1,49 @@ +
+
+ @if (product.discountPercentage) { + -{{ product.discountPercentage }}% + } + + @if (product.imageUrl) { + + } @else { + + } +
+ +
+ + +
+

{{ product.name }}

+ +
+
+ Cantidad: + {{ product.quantity }} unidad +
+ @for (attribute of product.attributes; track attribute.label) { +
+ {{ attribute.label }}: + {{ attribute.value }} +
+ } +
+
+ + +
+
+ @if (product.originalPrice) { + $ {{ product.originalPrice }} + } + $ {{ product.discountedPrice }} +
+ +
+ ${{ product.transferPrice }} con transferencia +
+
+ +
+
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 new file mode 100644 index 0000000..cc5e567 --- /dev/null +++ b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss @@ -0,0 +1,101 @@ +:host { + display: block; + border-bottom: 1px solid #dddddd; +} + +:host(:last-child) { + border-bottom: none; +} + +.cart-item { + display: grid; + grid-template-columns: 90px minmax(0, 1fr); + gap: 0.75rem; + background-color: transparent; + position: relative; +} + +.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: 15px; + font-weight: bold; +} + +.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/components/purchase-item/purchase-item.ts b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.ts new file mode 100644 index 0000000..5277d78 --- /dev/null +++ b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.ts @@ -0,0 +1,12 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-purchase-item', + standalone: true, + imports: [], + templateUrl: './purchase-item.html', + styleUrl: './purchase-item.scss', +}) +export class PurchaseItem { + @Input() product!: any; +} 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 index 482c86e..675fdf0 100644 --- 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,72 +6,22 @@

MIS COMPRAS

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

Productos:

+

Productos:

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

{{ product.name }}

- -
-
- Cantidad: - {{ product.quantity }} unidad -
-
- Color: - {{ product.color }} -
-
- Talle: - {{ product.size }} -
-
-
- - -
-
- @if (product.originalPrice) { - $ {{ product.originalPrice }} - } - $ {{ product.discountedPrice }} -
- -
- ${{ 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 index f2fc769..d8759df 100644 --- 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 @@ -33,110 +33,12 @@ gap: 0.5rem; } .purchase-total-label { - font-size: 13px; + font-size: 17px; 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; + font-size: 17px; } 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 5e92219..bc93012 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 @@ -1,11 +1,12 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { ActivatedRoute, RouterLink } from '@angular/router'; +import { PurchaseItem } from '../../components/purchase-item/purchase-item'; @Component({ selector: 'app-purchase-detail-page', standalone: true, - imports: [CommonModule, RouterLink], + imports: [CommonModule, RouterLink, PurchaseItem], templateUrl: './purchase-detail-page.html', styleUrl: './purchase-detail-page.scss', }) @@ -22,8 +23,10 @@ export class PurchaseDetailPage { id: 1, name: 'PANTALÓN RECTO DE SCUBA NEGRO', quantity: 1, - color: 'Beige', - size: 'S', + attributes: [ + { label: 'Color', value: 'Beige' }, + { label: 'Talle', value: 'S' } + ], originalPrice: '95.000', discountedPrice: '76.000', transferPrice: '74.800', @@ -34,8 +37,10 @@ export class PurchaseDetailPage { id: 2, name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU', quantity: 1, - color: 'Beige', - size: 'M', + attributes: [ + { label: 'Color', value: 'Beige' }, + { label: 'Talle', value: 'M' } + ], originalPrice: '68.500', discountedPrice: '61.000', transferPrice: '59.800', @@ -46,8 +51,10 @@ export class PurchaseDetailPage { id: 3, name: 'CALZA TÉRMICA UNISEX CON PROCESO SENSE Y CINTURA CON MAYOR AGARRE', quantity: 1, - color: 'Beige', - size: 'M', + attributes: [ + { label: 'Color', value: 'Beige' }, + { label: 'Talle', value: 'M' } + ], originalPrice: null, discountedPrice: '120.000', transferPrice: '180.000', @@ -58,8 +65,10 @@ export class PurchaseDetailPage { id: 4, name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU', quantity: 1, - color: 'Beige', - size: 'M', + attributes: [ + { label: 'Color', value: 'Beige' }, + { label: 'Talle', value: 'M' } + ], originalPrice: '68.500', discountedPrice: '61.000', transferPrice: '59.800',