feat: enhance cart layout and styling for improved user experience

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -1,6 +1,6 @@
 <header class="store-layout__header">
   <div class="store-layout__header-main">
-    <div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
+    <div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-row flex-wrap align-items-center justify-content-between gap-3">
       <div
         class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0"
         data-testid="store-header-brand-slot"
@@ -15,8 +15,8 @@
         }
       </div>
 
-      <div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 ms-auto w-100 w-lg-auto">
-        <div class="input-group store-layout__search" role="search">
+      <div class="d-flex flex-row align-items-center gap-3 ms-auto flex-nowrap w-100 justify-content-between justify-content-md-end">
+        <div class="input-group store-layout__search flex-grow-1" role="search">
           <label class="visually-hidden" for="store-search-input">Buscar productos</label>
           <input
             id="store-search-input"

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -42,50 +42,55 @@
 
 .store-layout__search {
   width: min(100%, 24rem);
-  min-width: 18rem;
+  min-width: 0;
 }
 
 .store-layout__search-input {
-  border-color: rgba(255, 255, 255, 0.2);
+  color: #666666;
+  border-color: #cccccc;
   background-color: rgba(255, 255, 255, 0.96);
 }
 
+.store-layout__search-input::placeholder {
+  color: #666666;
+}
+
 .store-layout__search-input:focus {
   border-color: var(--tenant-primary);
   box-shadow: 0 0 0 0.25rem color-mix(in srgb, white 70%, var(--tenant-primary));
 }
 
 .store-layout__search-button {
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.2);
-  background-color: color-mix(in srgb, white 10%, var(--tenant-header-bg));
+  color: #a0a0a0;
+  border-color: #cccccc;
+  background-color: rgba(255, 255, 255, 0.96);
 }
 
 .store-layout__search-button:hover,
 .store-layout__search-button:focus-visible {
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.28);
-  background-color: color-mix(in srgb, white 16%, var(--tenant-header-bg));
+  color: #8a8a8a;
+  border-color: #cccccc;
+  background-color: #ffffff;
 }
 
 .store-layout__action-button {
-  color: #ffffff;
+  color: #a0a0a0;
 }
 
 .store-layout__action-button:hover,
 .store-layout__action-button:focus-visible {
-  color: color-mix(in srgb, white 84%, var(--tenant-primary));
+  color: #8a8a8a;
 }
 
 .store-layout__category-trigger {
   font-size: 0.8rem;
   letter-spacing: 0.02em;
-  color: #ffffff;
+  color: #a0a0a0;
 }
 
 .store-layout__category-trigger:hover,
 .store-layout__category-trigger:focus-visible {
-  color: color-mix(in srgb, white 84%, var(--tenant-primary));
+  color: #8a8a8a;
 }
 
 @keyframes store-header-logo-skeleton {
@@ -102,8 +107,4 @@
   .store-layout__brand-slot {
     min-width: 0;
   }
-
-  .store-layout__search {
-    min-width: 0;
-  }
 }

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -207,6 +207,37 @@
           (pageChange)="currentPage = $event"
         />
       </div>
+
+      <hr class="section-divider" />
+
+      <div class="cart-showcase">
+        <div class="cart-showcase__header">
+          <div>
+            <h2>Carrito mock</h2>
+            <p class="text-muted mb-0">
+              Demo visual aislada del carrito con scroll a partir del cuarto item.
+            </p>
+          </div>
+
+          @if (!cartVisible) {
+            <app-button variant="secondary" (click)="showCart()">Volver a mostrar carrito</app-button>
+          }
+        </div>
+
+        @if (cartVisible) {
+          <div class="cart-showcase__viewport">
+            <app-cart
+              [showClose]="true"
+              [items]="cartMockItems"
+              [subtotal]="366000"
+              [discount]="66000"
+              [total]="300000"
+              [backgroundColor]="cartBackgroundColor"
+              (closed)="hideCart()"
+            />
+          </div>
+        }
+      </div>
     </div>
   </section>
 

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -62,6 +62,26 @@ h1 {
   text-align: center;
 }
 
+.cart-showcase {
+  display: grid;
+  gap: 1rem;
+  justify-items: start;
+}
+
+.cart-showcase__viewport {
+  width: 100%;
+  max-width: 370px;
+  height: 360px;
+}
+
+.cart-showcase__header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
 .button-grid--single-char app-button {
   min-width: 3rem;
 }
@@ -108,6 +128,11 @@ h1 {
   .input-grid {
     grid-template-columns: minmax(0, 1fr);
   }
+
+  .cart-showcase__header {
+    align-items: start;
+    flex-direction: column;
+  }
 }
 
 .configuracion-tennant {

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
 import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
 import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
@@ -9,7 +10,7 @@ import { ToastService } from '../../../../core/services/toast.service';
 
 @Component({
   selector: 'app-reutilizables-test-page',
-  imports: [ButtonComponent, InputComponent, PaginatorComponent, ProductCardComponent, StoreSectionComponent],
+  imports: [ButtonComponent, CartComponent, InputComponent, PaginatorComponent, ProductCardComponent, StoreSectionComponent],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'
 })
@@ -33,7 +34,9 @@ export class ReutilizablesTestPageComponent {
   protected clearTrigger = 0;
   protected editableDisabled = true;
   protected currentPage = 1;
+  protected cartVisible = true;
   protected readonly paginatorTotalPages = 8;
+  protected readonly cartBackgroundColor = '#ffffff';
 
   protected readonly testProducts = [
     {
@@ -59,6 +62,57 @@ export class ReutilizablesTestPageComponent {
     }
   ];
 
+  protected readonly cartMockItems: CartItemMock[] = [
+    {
+      imageUrl: null,
+      product: 'Calza térmica unisex con proceso sense y cintura con mayor agarre',
+      originalPrice: 95000,
+      discountedPrice: 76000,
+      discountPercentage: 20,
+      quantity: 1,
+      attributes: [
+        { label: 'Color', value: 'Beige' },
+        { label: 'Talle', value: 'S' }
+      ]
+    },
+    {
+      imageUrl: null,
+      product: 'Pantalón recto de scuba negro',
+      originalPrice: null,
+      discountedPrice: 89000,
+      discountPercentage: null,
+      quantity: 1,
+      attributes: [
+        { label: 'Color', value: 'Beige' },
+        { label: 'Talle', value: 'S' }
+      ]
+    },
+    {
+      imageUrl: null,
+      product: 'Top de supplex color habano',
+      originalPrice: 98000,
+      discountedPrice: 85000,
+      discountPercentage: 20,
+      quantity: 1,
+      attributes: [
+        { label: 'Color', value: 'Negro' },
+        { label: 'Talle', value: 'XL' }
+      ]
+    },
+    {
+      imageUrl: null,
+      product: 'Buzo oversize canguro gris',
+      originalPrice: 72000,
+      discountedPrice: 69000,
+      discountPercentage: 5,
+      quantity: 2,
+      attributes: [
+        { label: 'Color', value: 'Gris' },
+        { label: 'Talle', value: 'M' }
+      ]
+    }
+  ];
+
   protected onProductBuy(productTitle: string): void {
     console.log(`Comprando: ${productTitle}`);
     alert(`Comprando: ${productTitle}`);
@@ -73,6 +127,15 @@ export class ReutilizablesTestPageComponent {
     this.clearTrigger += 1;
   }
 
+  protected showCart(): void {
+    this.cartVisible = true;
+  }
+
+  protected hideCart(): void {
+    this.cartVisible = false;
+    this.toastService.info('Se disparó el evento de cerrado del carrito mock.');
+  }
+
   protected triggerToast(type: 'success' | 'danger' | 'info'): void {
     if (type === 'success') {
       this.toastService.success('¡Operación exitosa! El producto se ha guardado correctamente.');

src/app/shared/components/cart-item/cart-item.component.html

@@ -0,0 +1,45 @@
+<article class="cart-item">
+  <div class="cart-item__media">
+    @if (discountPercentage() && discountPercentage()! > 0) {
+      <span class="cart-item__discount-badge">-{{ discountPercentage() }}%</span>
+    }
+
+    @if (imageUrl()) {
+      <img class="cart-item__image" [src]="imageUrl()" [alt]="product()" />
+    } @else {
+      <div class="cart-item__image cart-item__image--placeholder" aria-hidden="true"></div>
+    }
+  </div>
+
+  <div class="cart-item__content">
+    <div class="cart-item__top-row">
+      <h3 class="cart-item__product">{{ product() }}</h3>
+
+      <div class="cart-item__prices">
+        @if (formattedOriginalPrice(); as originalPrice) {
+          <span class="cart-item__price cart-item__price--original">{{ originalPrice }}</span>
+        }
+
+        <span class="cart-item__price cart-item__price--discounted">{{ formattedDiscountedPrice() }}</span>
+      </div>
+    </div>
+
+    <div class="cart-item__attributes">
+      @for (attribute of attributes(); track attribute.label + attribute.value) {
+        <div class="cart-item__attribute">
+          <span class="cart-item__attribute-label">{{ attribute.label }}:</span>
+          <span class="cart-item__attribute-value">{{ attribute.value }}</span>
+        </div>
+      }
+    </div>
+
+    <div class="cart-item__actions" aria-hidden="true">
+      <button class="cart-item__quantity-control" type="button">-</button>
+      <span class="cart-item__quantity">{{ quantity() }}</span>
+      <button class="cart-item__quantity-control" type="button">+</button>
+      <button class="cart-item__remove" type="button">
+        <i class="fa-solid fa-trash-can"></i>
+      </button>
+    </div>
+  </div>
+</article>

src/app/shared/components/cart-item/cart-item.component.scss

@@ -0,0 +1,160 @@
+:host {
+  display: block;
+}
+
+.cart-item {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 10px 12px;
+  border-radius: 0;
+  background-color: #f5f5f5;
+
+  &__media {
+    position: relative;
+    width: 64px;
+    height: 72px;
+    overflow: hidden;
+    border-radius: 6px 0 0 6px;
+    background-color: #d9d9d9;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  &__image--placeholder {
+    background: linear-gradient(135deg, #d2d2d2, #ececec);
+  }
+
+  &__discount-badge {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    padding: 2px 5px;
+    border-bottom-right-radius: 4px;
+    background-color: #6173ff;
+    color: #ffffff;
+    font-size: 8px;
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  &__content {
+    display: grid;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+  &__top-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.75rem;
+    align-items: start;
+  }
+
+  &__product {
+    margin: 0;
+    color: #666666;
+    font-size: 12px;
+    font-weight: 325;
+    line-height: 1.25;
+    text-transform: uppercase;
+  }
+
+  &__prices {
+    display: grid;
+    justify-items: end;
+    white-space: nowrap;
+    line-height: 1.1;
+  }
+
+  &__price {
+    color: #a0a0a0;
+  }
+
+  &__price--original {
+    font-size: 10px;
+    font-weight: 325;
+    text-decoration: line-through;
+  }
+
+  &__price--discounted {
+    font-size: 13px;
+    font-weight: 425;
+  }
+
+  &__attributes {
+    display: grid;
+    gap: 0.125rem;
+  }
+
+  &__attribute {
+    color: #666666;
+    font-size: 11px;
+    line-height: 1.2;
+  }
+
+  &__attribute-label {
+    font-weight: 325;
+  }
+
+  &__attribute-value {
+    font-weight: 700;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.125rem;
+    margin-top: auto;
+  }
+
+  &__quantity-control,
+  &__quantity {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #cfcfcf;
+    background-color: #ffffff;
+    color: #666666;
+    font-size: 10px;
+    line-height: 1;
+  }
+
+  &__quantity-control {
+    padding: 0;
+  }
+
+  &__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-left: 0.35rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: #b3b3b3;
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 420px) {
+  .cart-item {
+    grid-template-columns: 56px minmax(0, 1fr);
+
+    &__media {
+      width: 56px;
+      height: 64px;
+    }
+  }
+}

src/app/shared/components/cart-item/cart-item.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+export interface CartItemAttribute {
+  label: string;
+  value: string;
+}
+
+@Component({
+  selector: 'app-cart-item',
+  standalone: true,
+  templateUrl: './cart-item.component.html',
+  styleUrl: './cart-item.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CartItemComponent {
+  readonly imageUrl = input<string | null>(null);
+  readonly product = input<string>('');
+  readonly originalPrice = input<number | null>(null);
+  readonly discountedPrice = input<number>(0);
+  readonly discountPercentage = input<number | null>(null);
+  readonly attributes = input<CartItemAttribute[]>([]);
+  readonly quantity = input<number>(1);
+
+  protected readonly formattedOriginalPrice = computed(() => {
+    const price = this.originalPrice();
+    return price === null ? null : this.formatCurrency(price);
+  });
+
+  protected readonly formattedDiscountedPrice = computed(() => this.formatCurrency(this.discountedPrice()));
+
+  private formatCurrency(value: number): string {
+    const rounded = Math.round(value);
+    const parts = rounded.toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    return `$ ${parts.join(',')}`;
+  }
+}

src/app/shared/components/cart/cart.component.html

@@ -0,0 +1,42 @@
+<section class="cart" [style.background-color]="backgroundColor()">
+  <header class="cart__header">
+    <h2 class="cart__title">{{ title() }}</h2>
+
+    @if (showClose()) {
+      <button class="cart__close" type="button" aria-label="Cerrar carrito" (click)="closed.emit()">
+        <i class="fa-solid fa-xmark"></i>
+      </button>
+    }
+  </header>
+
+  <div class="cart__items">
+    @for (item of items(); track item.product + item.discountedPrice) {
+      <app-cart-item
+        [imageUrl]="item.imageUrl"
+        [product]="item.product"
+        [originalPrice]="item.originalPrice"
+        [discountedPrice]="item.discountedPrice"
+        [discountPercentage]="item.discountPercentage"
+        [attributes]="item.attributes"
+        [quantity]="item.quantity"
+      />
+    }
+  </div>
+
+  <footer class="cart__summary">
+    <div class="cart__summary-row">
+      <span class="cart__summary-label">Subtotal:</span>
+      <span class="cart__summary-value">{{ formattedSubtotal() }}</span>
+    </div>
+
+    <div class="cart__summary-row">
+      <span class="cart__summary-label">Descuento:</span>
+      <span class="cart__summary-value">{{ formattedDiscount() }}</span>
+    </div>
+
+    <div class="cart__summary-row cart__summary-row--total">
+      <span class="cart__summary-label">TOTAL:</span>
+      <span class="cart__summary-value">{{ formattedTotal() }}</span>
+    </div>
+  </footer>
+</section>

src/app/shared/components/cart/cart.component.scss

@@ -0,0 +1,106 @@
+:host {
+  display: block;
+  width: 100%;
+  max-width: 370px;
+  height: 100%;
+}
+
+.cart {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  width: 100%;
+  height: 100%;
+  color: #666666;
+  border-radius: 0;
+  overflow: hidden;
+
+  &__header,
+  &__summary {
+    background-color: inherit;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 8px 0 24px;
+  }
+
+  &__title {
+    margin: 0;
+    color: #a0a0a0;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+  }
+
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: #a0a0a0;
+    font-size: 14px;
+  }
+
+  &__items {
+    display: grid;
+    gap: 8px;
+    min-height: 0;
+    padding: 0 0 0 24px;
+    overflow-y: auto;
+    scrollbar-color: #d5d5d5 transparent;
+    scrollbar-width: thin;
+  }
+
+  &__items::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &__items::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: #d5d5d5;
+  }
+
+  &__summary {
+    display: grid;
+    gap: 0.35rem;
+    padding: 8px 22px 14px 24px;
+  }
+
+  &__summary-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  &__summary-label,
+  &__summary-value {
+    color: #a0a0a0;
+    font-size: 13px;
+  }
+
+  &__summary-label {
+    font-weight: 325;
+  }
+
+  &__summary-value {
+    font-weight: 700;
+  }
+
+  &__summary-row--total {
+    margin-top: 0.2rem;
+  }
+
+  &__summary-row--total .cart__summary-label,
+  &__summary-row--total .cart__summary-value {
+    color: #666666;
+    font-size: 15px;
+    font-weight: 700;
+  }
+}

src/app/shared/components/cart/cart.component.ts

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { CartItemAttribute, CartItemComponent } from '../cart-item/cart-item.component';
+
+export interface CartItemMock {
+  imageUrl: string | null;
+  product: string;
+  originalPrice: number | null;
+  discountedPrice: number;
+  discountPercentage: number | null;
+  attributes: CartItemAttribute[];
+  quantity: number;
+}
+
+@Component({
+  selector: 'app-cart',
+  standalone: true,
+  imports: [CartItemComponent],
+  templateUrl: './cart.component.html',
+  styleUrl: './cart.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CartComponent {
+  readonly title = input<string>('CARRITO');
+  readonly showClose = input<boolean>(false);
+  readonly items = input<CartItemMock[]>([]);
+  readonly subtotal = input<number>(0);
+  readonly discount = input<number>(0);
+  readonly total = input<number>(0);
+  readonly backgroundColor = input<string>('#ffffff');
+
+  readonly closed = output<void>();
+
+  protected readonly formattedSubtotal = computed(() => this.formatCurrency(this.subtotal()));
+  protected readonly formattedDiscount = computed(() => this.formatCurrency(this.discount()));
+  protected readonly formattedTotal = computed(() => this.formatCurrency(this.total()));
+
+  private formatCurrency(value: number): string {
+    const rounded = Math.round(value);
+    const parts = rounded.toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    return `$ ${parts.join(',')}`;
+  }
+}

src/app/shared/components/input/input.component.scss

@@ -14,7 +14,7 @@
   right: 1rem;
   top: 50%;
   z-index: 1;
-  color: #495057;
+  color: #a0a0a0;
   transform: translateY(-50%);
   pointer-events: none;
 }
@@ -23,7 +23,8 @@
   min-height: 40px;
   padding: 0.625rem 1rem;
   border-radius: 0.5rem;
-  color: #212529;
+  border-color: #cccccc;
+  color: #666666;
   font-size: 15px;
   font-weight: 400;
 
@@ -34,6 +35,10 @@
   &:disabled {
     opacity: 1;
   }
+
+  &::placeholder {
+    color: #666666;
+  }
 }
 
 .input-with-search-icon {
@@ -116,7 +121,7 @@ input[type='file'].form-control {
     padding: 0;
     border: 0;
     background: transparent;
-    color: #495057;
+    color: #a0a0a0;
     transform: translateY(-50%);
     cursor: pointer;
     transition: color 0.2s ease;
@@ -127,10 +132,10 @@ input[type='file'].form-control {
   }
 
   .input-icon-active {
-    color: #adb5bd;
+    color: #a0a0a0;
 
     &:hover {
-      color: #495057;
+      color: #8a8a8a;
     }
   }
 
@@ -145,7 +150,7 @@ input[type='file'].form-control {
     right: 1rem;
     top: 50%;
     z-index: 1;
-    color: #495057;
+    color: #a0a0a0;
     transform: translateY(-50%);
     pointer-events: none;
   }