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

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) {
-          <img class="store-layout__brand-logo" [src]="logoUrl" alt="Logo del comercio" />
+        @if (logoUrl()) {
+          <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) {
-            <button
-              type="button"
-              class="btn btn-link store-layout__action-button p-2 text-decoration-none"
-              [attr.aria-label]="action.label"
-              [attr.title]="action.label"
-            >
-              <i [class]="action.iconClass" aria-hidden="true"></i>
-            </button>
-          }
+          <app-cart-icon
+            [quantity]="cartQuantity()"
+            ariaLabel="Carrito de compras"
+            title="Carrito"
+          />
+          <app-icon-button
+            variant="user"
+            ariaLabel="Mi cuenta"
+            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';
-
-export type StoreHeaderAction = {
-  label: string;
-  iconClass: string;
-};
+import { Component, input } from '@angular/core';
+import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
+import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
 
 @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[] = [];
-  @Input() logoUrl: string | null = null;
+  readonly logoUrl = input<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[] = [
-    {
-      label: 'Carrito',
-      iconClass: 'fa-solid fa-cart-shopping'
-    },
-    {
-      label: 'Mi cuenta',
-      iconClass: 'fa-solid fa-circle-user'
-    }
-  ];
+  protected readonly cartQuantity = computed(() => {
+    const cart = this.cartService.cart();
+    if (!cart || !cart.items) return 0;
+    return cart.items.reduce((total, item) => total + item.cantidad, 0);
+  });
+
+  ngOnInit(): void {
+    this.cartService.loadCart().subscribe({
+      error: (err) => console.error('Error loading cart', err)
+    });
+  }
+
 
   protected readonly footerSections: StoreFooterSection[] = [
     {