feat: implement variant selection in cart and product components for enhanced user experience

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

@@ -16,6 +16,7 @@ import { CartItemAttribute, CartItemComponent } from '../cart-item/cart-item.com
 import { ModalService } from '../../../core/services/modal.service';
 import { CartService } from '../../../core/services/cart/cart.service';
 import { ToastService } from '../../../core/services/toast.service';
+import { VariantSelectorVariant } from '../variant-selector/variant-selector.component';
 
 export interface CartItemMock {
   cartItemId?: number;
@@ -26,6 +27,8 @@ export interface CartItemMock {
   discountPercentage: number | null;
   attributes: CartItemAttribute[];
   quantity: number;
+  variantId?: number | null;
+  variants?: VariantSelectorVariant[];
 }
 
 @Component({
@@ -64,6 +67,7 @@ export class CartComponent {
   }>();
 
   protected readonly quantityOverrides = signal<Record<number, number>>({});
+  protected readonly variantOverrides = signal<Record<number, number>>({});
   constructor() {
     this.quantityUpdates$
       .pipe(
@@ -104,6 +108,13 @@ export class CartComponent {
     return item.quantity;
   }
 
+  protected getItemVariant(item: CartItemMock): number | null {
+    if (item.cartItemId !== undefined && this.variantOverrides()[item.cartItemId] !== undefined) {
+      return this.variantOverrides()[item.cartItemId];
+    }
+    return item.variantId ?? null;
+  }
+
   private clearOverride(cartItemId: number): void {
     this.quantityOverrides.update((overrides) => {
       const copy = { ...overrides };
@@ -153,6 +164,36 @@ export class CartComponent {
     }
   }
 
+  protected onItemVariantChange(index: number, variantId: number): void {
+    const item = this.items()[index];
+    const cartItemId = item?.cartItemId;
+
+    if (!item || !cartItemId || variantId === this.getItemVariant(item)) return;
+
+    this.variantOverrides.update((overrides) => ({ ...overrides, [cartItemId]: variantId }));
+    this.cartService
+      .updateItemVariant(cartItemId, this.getItemQuantity(item), variantId)
+      .subscribe({
+        next: (response) => {
+          this.clearVariantOverride(cartItemId);
+          this.toastService.success(response.message || 'Variante actualizada.');
+        },
+        error: (error: HttpErrorResponse) => {
+          console.error('Error updating cart item variant', error);
+          this.clearVariantOverride(cartItemId);
+          this.toastService.danger(error.error?.message || 'No se pudo actualizar la variante.');
+        },
+      });
+  }
+
+  private clearVariantOverride(cartItemId: number): void {
+    this.variantOverrides.update((overrides) => {
+      const copy = { ...overrides };
+      delete copy[cartItemId];
+      return copy;
+    });
+  }
+
   protected onItemRemove(index: number): void {
     const target = this.resolveRemoveTarget(index);