refactor(user-dropdown): remove registration functionality and simplify user dropdown structure

package-lock.json

@@ -17,9 +17,9 @@
         "@angular/router": "^22.0.0",
         "@angular/ssr": "^22.0.4",
         "@fortawesome/fontawesome-free": "^7.2.0",
-        "angularx-qrcode": "^21.0.5",
         "bootstrap": "^5.3.8",
         "express": "^5.1.0",
+        "qrcode": "1.5.4",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
       },
@@ -3217,6 +3217,17 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.60.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.2.tgz",
@@ -4091,20 +4102,6 @@
         "node": ">= 14.0.0"
       }
     },
-    "node_modules/angularx-qrcode": {
-      "version": "21.0.5",
-      "resolved": "https://registry.npmjs.org/angularx-qrcode/-/angularx-qrcode-21.0.5.tgz",
-      "integrity": "sha512-9Kv/Mi5tKzAkBL2xhYZyPaJEoq+b24mIpUAntp16kIBiozVnpGI6DbigTPJiSDkV7EpYHdjBJNGj8igFAHEp6g==",
-      "license": "MIT",
-      "dependencies": {
-        "qrcode": "1.5.4",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^21.0.0",
-        "@angular/core": "^21.0.0"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz",

package.json

@@ -21,9 +21,9 @@
     "@angular/router": "^22.0.0",
     "@angular/ssr": "^22.0.4",
     "@fortawesome/fontawesome-free": "^7.2.0",
-    "angularx-qrcode": "^21.0.5",
     "bootstrap": "^5.3.8",
     "express": "^5.1.0",
+    "qrcode": "1.5.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

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

@@ -40,12 +40,24 @@
             title="Carrito"
             (click)="cartClick.emit()"
           />
-          <app-icon-button
-            variant="user"
-            ariaLabel="Mi cuenta"
-            title="Mi cuenta"
-            (click)="userClick.emit()"
-          />
+          <div class="store-layout__user-menu">
+            <app-icon-button
+              variant="user"
+              ariaLabel="Mi cuenta"
+              ariaControls="store-user-dropdown"
+              [ariaExpanded]="isUserDropdownOpen()"
+              title="Mi cuenta"
+              (clicked)="toggleUserDropdown()"
+            />
+
+            @if (isUserDropdownOpen()) {
+              <app-user-dropdown
+                id="store-user-dropdown"
+                [user]="user()"
+                (logoutClick)="onLogoutClick()"
+              />
+            }
+          </div>
         </div>
       </div>
     </div>

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

@@ -83,6 +83,11 @@
   color: #8a8a8a;
 }
 
+.store-layout__user-menu {
+  position: relative;
+  display: inline-flex;
+}
+
 .store-layout__category-trigger {
   font-size: 0.8rem;
   letter-spacing: 0.02em;

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

@@ -1,17 +1,62 @@
-import { Component, input, output } from '@angular/core';
+import { Component, ElementRef, HostListener, inject, input, output, signal } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { AuthUser } from '../../../services/auth/auth.interfaces';
 import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
+import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
 
 @Component({
   selector: 'app-store-header',
-  imports: [CartIconComponent, IconButtonComponent, RouterLink],
+  imports: [CartIconComponent, IconButtonComponent, RouterLink, UserDropdownComponent],
   templateUrl: './store-header.component.html',
   styleUrl: './store-header.component.scss'
 })
 export class StoreHeaderComponent {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
   readonly logoUrl = input<string | null>(null);
   readonly cartQuantity = input<number>(0);
+  readonly user = input<AuthUser | null>(null);
+  readonly isAuthenticated = input<boolean>(false);
   readonly cartClick = output<void>();
-  readonly userClick = output<void>();
+  readonly loginClick = output<void>();
+  readonly logoutClick = output<void>();
+
+  protected readonly isUserDropdownOpen = signal(false);
+
+  @HostListener('document:click', ['$event'])
+  protected onDocumentClick(event: MouseEvent): void {
+    if (!this.isUserDropdownOpen()) {
+      return;
+    }
+
+    const target = event.target;
+    if (target instanceof Node && !this.elementRef.nativeElement.contains(target)) {
+      this.isUserDropdownOpen.set(false);
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  protected onEscapeKey(): void {
+    this.isUserDropdownOpen.set(false);
+  }
+
+  protected toggleUserDropdown(): void {
+    if (!this.isAuthenticated()) {
+      this.loginClick.emit();
+      return;
+    }
+
+    this.isUserDropdownOpen.update((isOpen) => !isOpen);
+  }
+
+  protected onLoginClick(): void {
+    this.isUserDropdownOpen.set(false);
+    this.loginClick.emit();
+  }
+
+  protected onLogoutClick(): void {
+    this.isUserDropdownOpen.set(false);
+    this.logoutClick.emit();
+  }
 }

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

@@ -0,0 +1,23 @@
+<section class="user-dropdown" role="menu" aria-label="Menu de usuario">
+  <div class="user-dropdown__profile">
+    <span class="user-dropdown__name">{{ displayName() }}</span>
+  </div>
+
+  <div class="user-dropdown__divider"></div>
+
+  <button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-account">
+    Mi cuenta
+  </button>
+  <button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-purchases">
+    Mis compras
+  </button>
+  <button
+    type="button"
+    class="user-dropdown__item"
+    role="menuitem"
+    data-testid="user-dropdown-logout"
+    (click)="logoutClick.emit()"
+  >
+    Cerrar sesion
+  </button>
+</section>

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

@@ -0,0 +1,74 @@
+:host {
+  position: absolute;
+  top: calc(100% + 0.75rem);
+  right: 0;
+  z-index: 1060;
+  display: block;
+  width: min(18rem, calc(100vw - 2rem));
+}
+
+.user-dropdown {
+  display: grid;
+  background: #ffffff;
+  border: 1px solid rgba(32, 32, 32, 0.1);
+  border-radius: 8px;
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
+  padding: 0.75rem;
+  animation: user-dropdown-enter 0.16s ease-out;
+}
+
+.user-dropdown__profile {
+  padding: 0.25rem;
+}
+
+.user-dropdown__name {
+  color: #a0a0a0;
+  font-size: 13px;
+  font-weight: 325;
+  line-height: 1.2;
+}
+
+.user-dropdown__divider {
+  height: 1px;
+  margin: 0.6rem 0;
+  background: rgba(32, 32, 32, 0.08);
+}
+
+.user-dropdown__item {
+  width: 100%;
+  border: 0;
+  border-radius: 6px;
+  padding: 0.65rem 0.6rem;
+  color: #8a8a8a;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.user-dropdown__item:active,
+.user-dropdown__item:hover,
+.user-dropdown__item:focus-visible {
+  color: var(--tenant-primary);
+  outline: none;
+}
+
+@keyframes user-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.35rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 575.98px) {
+  :host {
+    right: -0.5rem;
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Component, computed, input, output } from '@angular/core';
+import { AuthUser } from '../../../../services/auth/auth.interfaces';
+
+@Component({
+  selector: 'app-user-dropdown',
+  templateUrl: './user-dropdown.component.html',
+  styleUrl: './user-dropdown.component.scss'
+})
+export class UserDropdownComponent {
+  readonly user = input<AuthUser | null>(null);
+  readonly logoutClick = output<void>();
+
+  protected readonly displayName = computed(() => this.user()?.nombre_apellido || 'Mi cuenta');
+}

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

@@ -2,8 +2,11 @@
   <app-store-header
     [cartQuantity]="cartQuantity()"
     [logoUrl]="tenant()?.header_logo ?? null"
+    [user]="user()"
+    [isAuthenticated]="isAuthenticated()"
     (cartClick)="isCartOpen.set(!isCartOpen())"
-    (userClick)="onUserClick()"
+    (loginClick)="onLoginClick()"
+    (logoutClick)="onLogoutClick()"
   />
 
   @if (isCartOpen()) {

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

@@ -24,7 +24,6 @@
   top: 76px;
   right: calc((100% - 1320px) / 2 + 1.5rem);
  
-  height: 520px;
   max-height: calc(100vh - 120px);
   z-index: 1050;
   background-color: #ffffff;

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

@@ -10,6 +10,7 @@ import { TenantService } from '../../services/tenant.service';
 import { CartService } from '../../services/cart/cart.service';
 import { ToastService } from '../../services/toast.service';
 import { AuthService } from '../../services/auth/auth.service';
+import { AuthUser } from '../../services/auth/auth.interfaces';
 import { StoreLayoutComponent } from './store-layout.component';
 
 const tenant: Tenant = {
@@ -30,6 +31,8 @@ const tenant: Tenant = {
 describe('StoreLayoutComponent', () => {
   beforeEach(async () => {
     const tenantState = signal(tenant);
+    const authUserState = signal<AuthUser | null>(null);
+    const isAuthenticatedState = signal(false);
 
     await TestBed.configureTestingModule({
       imports: [StoreLayoutComponent],
@@ -66,7 +69,9 @@ describe('StoreLayoutComponent', () => {
         {
           provide: AuthService,
           useValue: {
-            isAuthenticated: signal(false)
+            user: authUserState,
+            isAuthenticated: isAuthenticatedState,
+            logout: vi.fn().mockReturnValue(of(void 0))
           }
         }
       ]
@@ -112,7 +117,6 @@ describe('StoreLayoutComponent', () => {
     const router = TestBed.inject(Router);
     vi.spyOn(router, 'navigate');
 
-    // Set isAuthenticated to false
     (authService.isAuthenticated as any).set(false);
 
     const fixture = TestBed.createComponent(StoreLayoutComponent);
@@ -124,16 +128,21 @@ describe('StoreLayoutComponent', () => {
     userButton.click();
     fixture.detectChanges();
 
+    expect(compiled.querySelector('app-user-dropdown')).toBeNull();
     expect(router.navigate).toHaveBeenCalledWith(['/login']);
   });
 
-  it('does not redirect to /login when user icon is clicked and user is logged in', () => {
+  it('opens authenticated user dropdown without redirecting on icon click', () => {
     const authService = TestBed.inject(AuthService);
     const router = TestBed.inject(Router);
     vi.spyOn(router, 'navigate');
 
-    // Set isAuthenticated to true
     (authService.isAuthenticated as any).set(true);
+    (authService.user as any).set({
+      id: 1,
+      nombre_apellido: 'Ada Lovelace',
+      email: 'ada@example.com'
+    });
 
     const fixture = TestBed.createComponent(StoreLayoutComponent);
     fixture.detectChanges();
@@ -144,9 +153,40 @@ describe('StoreLayoutComponent', () => {
     userButton.click();
     fixture.detectChanges();
 
+    expect(compiled.querySelector('app-user-dropdown')).not.toBeNull();
+    expect(compiled.textContent).toContain('Ada Lovelace');
     expect(router.navigate).not.toHaveBeenCalled();
   });
 
+  it('logs out from the authenticated user dropdown', () => {
+    const authService = TestBed.inject(AuthService);
+    const router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate');
+
+    (authService.isAuthenticated as any).set(true);
+    (authService.user as any).set({
+      id: 1,
+      nombre_apellido: 'Ada Lovelace',
+      email: 'ada@example.com'
+    });
+
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const userButton = compiled.querySelector('app-icon-button[variant="user"] button') as HTMLButtonElement;
+    userButton.click();
+    fixture.detectChanges();
+
+    const logoutButton = compiled.querySelector('[data-testid="user-dropdown-logout"]') as HTMLButtonElement;
+    expect(logoutButton).not.toBeNull();
+    logoutButton.click();
+    fixture.detectChanges();
+
+    expect(authService.logout).toHaveBeenCalled();
+    expect(router.navigate).toHaveBeenCalledWith(['/login']);
+  });
+
   it('redirects to /checkout when cart buy button is clicked', () => {
     const router = TestBed.inject(Router);
     vi.spyOn(router, 'navigate');

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

@@ -70,6 +70,8 @@ export class StoreLayoutComponent implements OnInit {
 
   protected readonly currentYear = new Date().getFullYear();
   protected readonly tenant = this.tenantService.tenant;
+  protected readonly user = this.authService.user;
+  protected readonly isAuthenticated = this.authService.isAuthenticated;
 
   protected readonly cartQuantity = computed(() => {
     const cart = this.cartService.cart();
@@ -83,10 +85,15 @@ export class StoreLayoutComponent implements OnInit {
     });
   }
 
-  protected onUserClick(): void {
-    if (!this.authService.isAuthenticated()) {
-      this.router.navigate(['/login']);
-    }
+  protected onLoginClick(): void {
+    void this.router.navigate(['/login']);
+  }
+
+  protected onLogoutClick(): void {
+    this.authService.logout().subscribe({
+      next: () => void this.router.navigate(['/login']),
+      error: (err) => console.error('Error logging out', err)
+    });
   }
 
   protected onCheckoutClick(): void {

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

@@ -454,6 +454,7 @@
           </div>
         }
       </div>
+
     </div>
   </section>
 
@@ -652,3 +653,4 @@
     </div>
   </app-store-section>
 </main>
+

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

@@ -113,8 +113,8 @@ h1 {
 
 .cart-showcase__viewport {
   width: 100%;
-  max-width: 370px;
-  height: 360px;
+  max-width: 504px;
+  height: 640px;
 }
 
 .cart-showcase__header {

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

@@ -257,3 +257,5 @@ export class ReutilizablesTestPageComponent {
     });
   }
 }
+
+

src/app/features/store/pages/checkout-page/checkout-data-step.component.scss

@@ -9,19 +9,18 @@
   }
 
   &__actions {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
     gap: 1rem;
     margin-top: 0.5rem;
-
-    @media (max-width: 540px) {
-      grid-template-columns: 1fr;
-    }
   }
 
   &__action-btn {
     display: block;
     width: 100%;
+    flex: 1 1 290px;
+    max-width: 290px;
   }
 }
 
@@ -46,3 +45,4 @@
     color: var(--bs-danger, #dc3545);
   }
 }
+

src/app/features/store/pages/checkout-page/checkout-page.component.html

@@ -1,6 +1,6 @@
 <div class="container-xl px-3 px-md-4 py-4">
   <div class="checkout-page">
-    <div class="checkout-page__stepper-col">
+    <div class="checkout-page__stepper-col ">
       <app-stepper #stepper>
         <app-step label="Datos" [isValid]="isStep1Valid()">
           <app-checkout-data-step

src/app/features/store/pages/checkout-page/checkout-page.component.scss

@@ -1,7 +1,7 @@
 .checkout-page {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 420px;
-  gap: 2rem;
+  gap: 4rem;
   align-items: start;
   padding: 2rem 0;
 
@@ -16,9 +16,7 @@
   }
 
   &__cart-col {
-    border: 1px solid #ececec;
-    border-radius: 4px;
-    padding: 1.25rem 1.5rem;
+
     max-height: 80vh;
     overflow: hidden;
     display: flex;

src/app/features/store/pages/checkout-page/checkout-payment-step.component.html

@@ -34,7 +34,7 @@
       </div>
     </section>
 
-    <section class="payment-panel" aria-live="polite">
+    <section class="payment-panel d-flex justify-content-end" aria-live="polite">
       @if (isGeneratingIntent()) {
         <div class="payment-panel__card" style="text-align: center; padding: 2rem;">
           <h3 class="payment-panel__title">Cargando información de pago...</h3>
@@ -133,7 +133,8 @@
       type="button"
       variant="cancel"
       hostClass="checkout-payment__action-btn"
-      (click)="cancelStep.emit()"
+      buttonClass="w-100"
+      [disabled]="true"
     >
       Cancelar
     </app-button>
@@ -141,6 +142,7 @@
     <app-button
       type="button"
       hostClass="checkout-payment__action-btn"
+      buttonClass="w-100"
       [disabled]="isGeneratingIntent()"
       (click)="complete.emit()"
     >
@@ -148,3 +150,4 @@
     </app-button>
   </div>
 </div>
+

src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss

@@ -14,17 +14,17 @@
   }
 
   &__actions {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
     gap: 1rem;
     margin-top: 2rem;
-
-    @media (max-width: 540px) {
-      grid-template-columns: 1fr;
-    }
   }
 
   &__action-btn {
+    width: 100%;
+    flex: 1 1 290px;
+    max-width: 290px;
     display: block;
   }
 }
@@ -110,10 +110,9 @@
 
 .payment-panel {
   min-width: 0;
-
   &__card {
-    width: fit-content;
-    max-width: 100%;
+    width: 100%;
+    max-width: 290px;
     min-height: 269px;
     padding: 1.5rem 1.75rem;
     border-radius: 5px;
@@ -304,3 +303,4 @@
     }
   }
 }
+

src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
-import { QRCodeComponent } from 'angularx-qrcode';
-
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
+import { QRCodeComponent } from '../../../../shared/components/qrcode/qrcode.component';
 import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
 
 @Component({

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

@@ -17,7 +17,9 @@ export type ButtonVariant =
   styleUrl: './button.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class]': 'hostClass()'
+    '[class]': 'hostClasses()',
+    '[attr.aria-disabled]': 'disabled()',
+    '(click)': 'onHostClick($event)'
   }
 })
 export class ButtonComponent {
@@ -26,6 +28,9 @@ export class ButtonComponent {
   readonly disabled = input(false);
   readonly hostClass = input<string>('');
   readonly buttonClass = input<string>('');
+  protected readonly hostClasses = computed(() =>
+    [this.hostClass(), this.disabled() ? 'app-button--disabled' : ''].filter(Boolean).join(' ')
+  );
 
   protected readonly buttonClasses = computed(() => {
     const variants: Record<ButtonVariant, string> = {
@@ -40,4 +45,14 @@ export class ButtonComponent {
 
     return ['btn', variants[this.variant()], this.buttonClass()];
   });
+
+  protected onHostClick(event: Event): void {
+    if (!this.disabled()) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+  }
 }

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

@@ -1,4 +1,4 @@
-<article class="w-100 rounded-0 cart-item">
+<article class="w-100 p-3 rounded-0 cart-item">
   <div class="position-relative overflow-hidden cart-item-media">
     @if (discountPercentage() && discountPercentage()! > 0) {
       <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
@@ -17,10 +17,10 @@
 
       <div class="text-nowrap cart-item-prices">
         @if (formattedOriginalPrice(); as originalPrice) {
-          <span class="text-decoration-line-through fw-light cart-item-original-price">{{ originalPrice }}</span>
+          <span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">{{ originalPrice }}</span>
         }
 
-        <span class="fw-normal cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
+        <span class="fw-bold cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
       </div>
     </div>
 

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

@@ -1,28 +1,43 @@
 :host {
   display: block;
-  --item-media-width: 64px;
-  --item-media-height: 72px;
+  --item-media-size: 90px;
+  --item-divider-inset: 1rem;
 }
 
-@media (max-width: 420px) {
-  :host {
-    --item-media-width: 56px;
-    --item-media-height: 64px;
-  }
+:host(:first-child) .cart-item,
+:host .cart-item {
+  position: relative;
+}
+
+:host(:first-child) .cart-item::before,
+:host .cart-item::after {
+  content: "";
+  position: absolute;
+  right: var(--item-divider-inset);
+  left: var(--item-divider-inset);
+  height: 1px;
+  background-color: #ffffff;
+}
+
+:host(:first-child) .cart-item::before {
+  top: 0;
+}
+
+:host .cart-item::after {
+  bottom: 0;
 }
 
 .cart-item {
   display: grid;
-  grid-template-columns: var(--item-media-width) minmax(0, 1fr);
+  grid-template-columns: var(--item-media-size) minmax(0, 1fr);
   gap: 0.75rem;
-  padding: 10px 12px;
   background-color: #f5f5f5;
 }
 
 .cart-item-media {
-  width: var(--item-media-width);
-  height: var(--item-media-height);
-  border-radius: 6px;
+  width: var(--item-media-size);
+  aspect-ratio: 1 / 1;
+  border-radius: 5px 0 0 5px;
   background-color: #ffffff;
   border: 1px solid #eaeaea;
   overflow: hidden;
@@ -30,14 +45,14 @@
   img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
   }
 }
 
 .cart-item-discount-badge {
   padding: 2px 5px;
   border-bottom-right-radius: 4px;
-  background-color: #6173ff;
+  background-color: var(--bs-primary);
   color: #ffffff;
   font-size: 8px;
   font-weight: 500;
@@ -45,6 +60,8 @@
 }
 
 .cart-item-placeholder {
+  width: 100%;
+  height: 100%;
   background: linear-gradient(135deg, #d2d2d2, #ececec);
 }
 
@@ -100,9 +117,6 @@
   gap: 0.125rem;
 }
 
-
-
-
 .cart-item-remove-btn {
   margin-left: 0.35rem;
 }

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

@@ -1,5 +1,5 @@
 <section class="d-flex flex-column h-100 overflow-hidden text-secondary" [style.background-color]="backgroundColor()">
-  <header class="d-flex align-items-center justify-content-between bg-transparent cart-header">
+  <header class="d-flex align-items-center p-3 justify-content-between bg-transparent cart-header">
     <h2 class="m-0 text-uppercase fw-bold cart-title">{{ title() }}</h2>
 
     @if (showClose()) {
@@ -9,7 +9,7 @@
     }
   </header>
 
-  <div class="d-grid gap-2 flex-grow-1 overflow-y-auto cart-items-container">
+  <div class="d-grid w-100 flex-grow-1 overflow-y-auto cart-items-container">
     @for (item of items(); track item.productVariantId || item.product + item.discountedPrice; let idx = $index) {
       <app-cart-item
         [imageUrl]="item.imageUrl"
@@ -48,3 +48,4 @@
 </section>
 
 
+

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

@@ -23,10 +23,16 @@
 
 .cart-items-container {
   min-height: 0;
-  padding: 0 0 0 24px;
+  gap: 0;
   scrollbar-color: #d5d5d5 transparent;
   scrollbar-width: thin;
 
+  app-cart-item {
+    display: block;
+  }
+
+  
+
   &::-webkit-scrollbar {
     width: 6px;
   }

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

@@ -3,6 +3,9 @@
   [disabled]="disabled()"
   [ngClass]="buttonClasses()"
   [attr.aria-label]="ariaLabel() || variant()"
+  [attr.aria-expanded]="ariaExpanded()"
+  [attr.aria-controls]="ariaControls()"
+  (click)="clicked.emit($event)"
 >
   <i [ngClass]="iconClass()"></i>
 </button>

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 import { NgClass } from '@angular/common';
 
 export type IconButtonVariant =
@@ -21,6 +21,9 @@ export class IconButtonComponent {
   readonly variant = input.required<IconButtonVariant>();
   readonly disabled = input(false);
   readonly ariaLabel = input<string>('');
+  readonly ariaExpanded = input<boolean | null>(null);
+  readonly ariaControls = input<string | null>(null);
+  readonly clicked = output<MouseEvent>();
 
   protected readonly iconClass = computed(() => {
     const classes: Record<IconButtonVariant, string> = {

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

@@ -0,0 +1,68 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  ViewChild
+} from '@angular/core';
+
+import * as QRCode from 'qrcode';
+
+type QRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+@Component({
+  selector: 'qrcode',
+  standalone: true,
+  template: '<canvas #canvas [attr.aria-label]="ariaLabel" role="img"></canvas>',
+  styles: [
+    `
+      :host {
+        display: inline-block;
+        line-height: 0;
+      }
+
+      canvas {
+        display: block;
+        height: auto;
+        max-width: 100%;
+      }
+    `
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class QRCodeComponent implements AfterViewInit, OnChanges {
+  @Input({ required: true }) qrdata = '';
+  @Input() width = 200;
+  @Input() errorCorrectionLevel: QRCodeErrorCorrectionLevel = 'M';
+  @Input() ariaLabel = 'Codigo QR';
+
+  @ViewChild('canvas', { static: true }) private readonly canvas!: ElementRef<HTMLCanvasElement>;
+
+  private viewReady = false;
+
+  ngAfterViewInit(): void {
+    this.viewReady = true;
+    this.render();
+  }
+
+  ngOnChanges(): void {
+    this.render();
+  }
+
+  private render(): void {
+    if (!this.viewReady || !this.qrdata) {
+      return;
+    }
+
+    void QRCode.toCanvas(this.canvas.nativeElement, this.qrdata, {
+      errorCorrectionLevel: this.errorCorrectionLevel,
+      margin: 2,
+      width: this.width
+    }).catch(() => {
+      const context = this.canvas.nativeElement.getContext('2d');
+      context?.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
+    });
+  }
+}

src/types/qrcode.d.ts

@@ -0,0 +1,15 @@
+declare module 'qrcode' {
+  export type QRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+  export interface QRCodeToCanvasOptions {
+    errorCorrectionLevel?: QRCodeErrorCorrectionLevel;
+    margin?: number;
+    width?: number;
+  }
+
+  export function toCanvas(
+    canvasElement: HTMLCanvasElement,
+    text: string,
+    options?: QRCodeToCanvasOptions
+  ): Promise<void>;
+}