feat(purchase-detail): implement purchase item component with dynamic attributes and styling

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.html

@@ -0,0 +1,49 @@
+<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 (product.imageUrl) {
+      <img class="w-100 h-100 object-fit-cover d-block" [src]="product.imageUrl" [alt]="product.name" />
+    } @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="cart-item-attribute">
+          <span class="fw-normal cart-item-attribute-label">Cantidad: </span>
+          <span class="fw-bold">{{ product.quantity }} unidad</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>
+      </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>

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

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

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html

@@ -6,72 +6,22 @@
     <h2 class="page-title m-0">MIS COMPRAS</h2>
   </div>
 
-  <div class="d-flex justify-content-between align-items-end mb-4 pb-2 border-bottom">
+  <div class="d-flex justify-content-between align-items-end mb-4 pb-2" style="border-bottom: 1px solid #dddddd;">
     <div class="purchase-info pb-3">
       <span class="purchase-id">Compra #{{ purchase.id }}.</span>
       <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
     </div>
-    <div class="purchase-total pb-3">
+    <div class="purchase-total ">
       <span class="purchase-total-label">Total:</span>
       <span class="purchase-total-value">${{ purchase.total }}</span>
     </div>
   </div>
 
-  <p class="mb-3" style="font-size: 12px; color: #666666; font-weight: 325;">Productos:</p>
+  <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) {
-      <article class="w-100 py-3 rounded-0 cart-item">
+      <app-purchase-item [product]="product"></app-purchase-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 (product.imageUrl) {
-            <img class="w-100 h-100 object-fit-cover d-block" [src]="product.imageUrl" [alt]="product.name" />
-          } @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="cart-item-attribute">
-                <span class="fw-normal cart-item-attribute-label">Cantidad: </span>
-                <span class="fw-bold">{{ product.quantity }} unidad</span>
-              </div>
-              <div class="cart-item-attribute">
-                <span class="fw-normal cart-item-attribute-label">Color: </span>
-                <span class="fw-bold">{{ product.color }}</span>
-              </div>
-              <div class="cart-item-attribute">
-                <span class="fw-normal cart-item-attribute-label">Talle: </span>
-                <span class="fw-bold">{{ product.size }}</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>
-            </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>
     }
   </div>
 </div>

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;
+  font-size: 17px;
-}
-
-.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;
 }

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',
+        attributes: [
-        size: 'S',
+          { 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',
+        attributes: [
-        size: 'M',
+          { 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',
+        attributes: [
-        size: 'M',
+          { 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',
+        attributes: [
-        size: 'M',
+          { label: 'Color', value: 'Beige' },
+          { label: 'Talle', value: 'M' }
+        ],
         originalPrice: '68.500',
         discountedPrice: '61.000',
         transferPrice: '59.800',