feat: implement cart icon component with quantity badge and integrate into store header for improved UI

src/app/app.routes.spec.ts

@@ -2,10 +2,13 @@ import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { provideRouter, Router } from '@angular/router';
 
+import { of } from 'rxjs';
+
 import { App } from './app';
 import { routes } from './app.routes';
 import { Tenant } from './core/services/tenant.interface';
 import { TenantService } from './core/services/tenant.service';
+import { CartService } from './core/services/cart/cart.service';
 
 const tenant: Tenant = {
   id: 1,
@@ -57,6 +60,13 @@ async function renderAppAt(
       {
         provide: TenantService,
         useValue: tenantService
+      },
+      {
+        provide: CartService,
+        useValue: {
+          cart: signal(null).asReadonly(),
+          loadCart: () => of({ id: 1, items: [], subtotal: '0' })
+        }
       }
     ]
   }).compileComponents();

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

@@ -6,8 +6,8 @@
         data-testid="store-header-brand-slot"
         aria-label="Logo del comercio"
       >
-        @if (logoUrl) {
+        @if (logoUrl()) {
-          <img class="store-layout__brand-logo" [src]="logoUrl" alt="Logo del comercio" />
+          <img class="store-layout__brand-logo" [src]="logoUrl()" alt="Logo del comercio" />
         } @else {
           <div class="store-layout__brand-logo-shell" aria-hidden="true">
             <span class="store-layout__brand-logo-skeleton"></span>
@@ -34,16 +34,16 @@
         </div>
 
         <div class="d-flex align-items-center justify-content-end gap-1" aria-label="Acciones de usuario">
-          @for (action of headerActions; track action.label) {
+          <app-cart-icon
-            <button
+            [quantity]="cartQuantity()"
-              type="button"
+            ariaLabel="Carrito de compras"
-              class="btn btn-link store-layout__action-button p-2 text-decoration-none"
+            title="Carrito"
-              [attr.aria-label]="action.label"
+          />
-              [attr.title]="action.label"
+          <app-icon-button
-            >
+            variant="user"
-              <i [class]="action.iconClass" aria-hidden="true"></i>
+            ariaLabel="Mi cuenta"
-            </button>
+            title="Mi cuenta"
-          }
+          />
         </div>
       </div>
     </div>

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

@@ -1,17 +1,14 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
-
+import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
-export type StoreHeaderAction = {
+import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
-  label: string;
-  iconClass: string;
-};
 
 @Component({
   selector: 'app-store-header',
-  imports: [],
+  imports: [CartIconComponent, IconButtonComponent],
   templateUrl: './store-header.component.html',
   styleUrl: './store-header.component.scss'
 })
 export class StoreHeaderComponent {
-  @Input({ required: true }) headerActions: StoreHeaderAction[] = [];
+  readonly logoUrl = input<string | null>(null);
-  @Input() logoUrl: string | null = null;
+  readonly cartQuantity = input<number>(0);
 }

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

@@ -1,5 +1,5 @@
 <div class="store-layout d-flex flex-column flex-grow-1">
-  <app-store-header [headerActions]="headerActions" [logoUrl]="tenant()?.header_logo ?? null" />
+  <app-store-header [cartQuantity]="cartQuantity()" [logoUrl]="tenant()?.header_logo ?? null" />
 
   <main class="flex-grow-1 d-block">
     <router-outlet />

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -2,8 +2,11 @@ import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 
+import { of } from 'rxjs';
+
 import { Tenant } from '../../services/tenant.interface';
 import { TenantService } from '../../services/tenant.service';
+import { CartService } from '../../services/cart/cart.service';
 import { StoreLayoutComponent } from './store-layout.component';
 
 const tenant: Tenant = {
@@ -37,6 +40,13 @@ describe('StoreLayoutComponent', () => {
             getTenant: () => tenantState(),
             bootstrap: vi.fn().mockResolvedValue(undefined)
           }
+        },
+        {
+          provide: CartService,
+          useValue: {
+            cart: signal(null).asReadonly(),
+            loadCart: () => of({ id: 1, items: [], subtotal: '0' })
+          }
         }
       ]
     }).compileComponents();

src/app/core/layout/store-layout/store-layout.component.ts

@@ -1,8 +1,9 @@
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { TenantService } from '../../services/tenant.service';
+import { CartService } from '../../services/cart/cart.service';
 import { StoreFooterComponent, StoreFooterSection, StoreSocialLink } from './store-footer/store-footer.component';
-import { StoreHeaderComponent, StoreHeaderAction } from './store-header/store-header.component';
+import { StoreHeaderComponent } from './store-header/store-header.component';
 
 @Component({
   selector: 'app-store-layout',
@@ -10,22 +11,25 @@ import { StoreHeaderComponent, StoreHeaderAction } from './store-header/store-he
   templateUrl: './store-layout.component.html',
   styleUrl: './store-layout.component.scss'
 })
-export class StoreLayoutComponent {
+export class StoreLayoutComponent implements OnInit {
   private readonly tenantService = inject(TenantService);
+  private readonly cartService = inject(CartService);
 
   protected readonly currentYear = new Date().getFullYear();
   protected readonly tenant = this.tenantService.tenant;
 
-  protected readonly headerActions: StoreHeaderAction[] = [
+  protected readonly cartQuantity = computed(() => {
-    {
+    const cart = this.cartService.cart();
-      label: 'Carrito',
+    if (!cart || !cart.items) return 0;
-      iconClass: 'fa-solid fa-cart-shopping'
+    return cart.items.reduce((total, item) => total + item.cantidad, 0);
-    },
+  });
-    {
+
-      label: 'Mi cuenta',
+  ngOnInit(): void {
-      iconClass: 'fa-solid fa-circle-user'
+    this.cartService.loadCart().subscribe({
-    }
+      error: (err) => console.error('Error loading cart', err)
-  ];
+    });
+  }
+
 
   protected readonly footerSections: StoreFooterSection[] = [
     {

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

@@ -114,6 +114,42 @@
         </div>
       </div>
 
+      <div class="icon-button-showcase mt-4">
+        <h2>Cart Icons</h2>
+        <p class="text-muted mb-4">
+          Icono de carrito con badge opcional indicando cantidad.
+        </p>
+
+        <div class="icon-button-showcase__grid">
+          <!-- Disabled Row -->
+          <div class="icon-button-showcase__row">
+            <span class="icon-button-showcase__label">Disabled</span>
+            <div class="icon-button-showcase__items">
+              <app-cart-icon [disabled]="true" [quantity]="3" />
+              <app-cart-icon [disabled]="true" />
+            </div>
+          </div>
+
+          <!-- Normal Row -->
+          <div class="icon-button-showcase__row">
+            <span class="icon-button-showcase__label">Normal</span>
+            <div class="icon-button-showcase__items">
+              <app-cart-icon [quantity]="3" />
+              <app-cart-icon />
+            </div>
+          </div>
+
+          <!-- Hover/Active Row -->
+          <div class="icon-button-showcase__row">
+            <span class="icon-button-showcase__label">Active / Hover</span>
+            <div class="icon-button-showcase__items">
+              <app-cart-icon [quantity]="3" class="hover-preview" />
+              <app-cart-icon class="hover-preview" />
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="input-grid">
         <div class="input-field">
           <label for="search-input">Texto</label>

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

@@ -6,6 +6,7 @@ import { PaginatorComponent } from '../../../../shared/components/paginator/pagi
 import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
+import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
 
@@ -18,7 +19,8 @@ import { ToastService } from '../../../../core/services/toast.service';
     PaginatorComponent,
     ProductCardComponent,
     StoreSectionComponent,
-    IconButtonComponent
+    IconButtonComponent,
+    CartIconComponent
   ],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'

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

@@ -0,0 +1,13 @@
+<button
+  type="button"
+  [disabled]="disabled()"
+  [attr.aria-label]="ariaLabel()"
+  class="cart-icon"
+>
+  <div class="cart-icon__container">
+    <i class="fa-solid fa-cart-shopping cart-icon__glyph" aria-hidden="true"></i>
+    @if (hasQuantity()) {
+      <span class="cart-icon__badge" data-testid="cart-badge">{{ quantity() }}</span>
+    }
+  </div>
+</button>

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

@@ -0,0 +1,79 @@
+:host {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.cart-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 4px;
+  margin: 0;
+  color: #666666;
+  cursor: pointer;
+  outline: none;
+  transition: color 0.15s ease-in-out, transform 0.1s ease-in-out;
+  border-radius: 4px;
+
+  // Active state subtle scale down
+  &:active:not(:disabled) {
+    transform: scale(0.92);
+  }
+
+  // Focus ring for accessibility
+  &:focus-visible {
+    outline: 2px solid var(--tenant-primary);
+    outline-offset: 2px;
+  }
+
+  // Disabled state
+  &:disabled {
+    color: #A0A0A0;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// Hover/Active/Focus colors (non-disabled)
+.cart-icon:hover:not(:disabled),
+.cart-icon:focus-visible:not(:disabled),
+.cart-icon.hover-preview:not(:disabled),
+:host(.hover-preview) .cart-icon:not(:disabled) {
+  color: var(--tenant-primary);
+}
+
+.cart-icon__container {
+  position: relative;
+  display: inline-flex;
+}
+
+.cart-icon__glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 23px;
+  height: 23px;
+  font-size: 23px;
+  line-height: 1;
+}
+
+.cart-icon__badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background-color: var(--tenant-primary);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  line-height: 1;
+  box-sizing: border-box;
+}

src/app/shared/components/cart-icon/cart-icon.component.spec.ts

@@ -0,0 +1,60 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { CartIconComponent } from './cart-icon.component';
+
+describe('CartIconComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CartIconComponent]
+    }).compileComponents();
+  });
+
+  function setup(quantity?: number | null, disabled = false) {
+    const fixture = TestBed.createComponent(CartIconComponent);
+    if (quantity !== undefined) {
+      fixture.componentRef.setInput('quantity', quantity);
+    }
+    fixture.componentRef.setInput('disabled', disabled);
+    fixture.detectChanges();
+
+    return {
+      fixture,
+      element: fixture.nativeElement as HTMLElement
+    };
+  }
+
+  it('renders the cart shopping icon', () => {
+    const { element } = setup();
+    expect(element.querySelector('.fa-cart-shopping')).not.toBeNull();
+  });
+
+  it('does not render the badge when quantity is undefined', () => {
+    const { element } = setup();
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
+  });
+
+  it('does not render the badge when quantity is 0', () => {
+    const { element } = setup(0);
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
+  });
+
+  it('renders the badge with correct quantity when positive', () => {
+    const { element } = setup(3);
+    const badge = element.querySelector('[data-testid="cart-badge"]');
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent?.trim()).toBe('3');
+  });
+
+  it('disables the button when disabled is true', () => {
+    const { element } = setup(undefined, true);
+    const button = element.querySelector('button');
+    expect(button?.disabled).toBe(true);
+  });
+
+  it('enables the button when disabled is false', () => {
+    const { element } = setup(undefined, false);
+    const button = element.querySelector('button');
+    expect(button?.disabled).toBe(false);
+  });
+});

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

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+  selector: 'app-cart-icon',
+  imports: [],
+  templateUrl: './cart-icon.component.html',
+  styleUrl: './cart-icon.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CartIconComponent {
+  readonly quantity = input<number | null | undefined>(undefined);
+  readonly disabled = input(false);
+  readonly ariaLabel = input<string>('Carrito de compras');
+
+  protected readonly hasQuantity = computed(() => {
+    const q = this.quantity();
+    return q !== null && q !== undefined && q > 0;
+  });
+}