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

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

@@ -44,11 +44,14 @@
         [discountedPrice]="item.discountedPrice"
         [discountPercentage]="item.discountPercentage"
         [attributes]="item.attributes"
+        [variants]="item.variants ?? []"
+        [selectedVariant]="getItemVariant(item)"
         [quantity]="getItemQuantity(item)"
         [readonly]="readonly()"
         [quantityDisabled]="editingDisabled() || (allowEditing() && !editing())"
         [showRemove]="allowRemove()"
         (quantityChange)="onItemQuantityChange(idx, $event)"
+        (variantChange)="onItemVariantChange(idx, $event)"
         (remove)="onItemRemove(idx)"
       />
     } @empty {

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

@@ -407,4 +407,57 @@ describe('CartComponent', () => {
       fixture.debugElement.query(By.css('app-cart-item')).componentInstance.quantityDisabled(),
     ).toBe(false);
   });
+
+  it('persists a variant selected from a cart row', async () => {
+    const updateItemVariant = vi.fn().mockReturnValue(
+      of({
+        message: 'Variante actualizada.',
+        data: {},
+      }),
+    );
+
+    await TestBed.configureTestingModule({
+      imports: [CartComponent],
+      providers: [
+        {
+          provide: CartService,
+          useValue: {
+            cart: signal(null).asReadonly(),
+            updateItemQuantity: vi.fn(),
+            updateItemVariant,
+            removeItem: vi.fn(),
+          },
+        },
+        { provide: ModalService, useValue: {} },
+        {
+          provide: ToastService,
+          useValue: { success: vi.fn(), info: vi.fn(), danger: vi.fn() },
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(CartComponent);
+    fixture.componentRef.setInput('items', [
+      {
+        cartItemId: 10,
+        imageUrl: null,
+        product: 'Comida',
+        originalPrice: null,
+        discountedPrice: 1000,
+        discountPercentage: null,
+        attributes: [{ label: 'Servicio', value: 'Almuerzo' }],
+        quantity: 2,
+        variantId: 20,
+        variants: [
+          { value: 20, values: { servicio: 'Almuerzo' } },
+          { value: 21, values: { servicio: 'Cena' } },
+        ],
+      },
+    ]);
+    fixture.detectChanges();
+
+    fixture.debugElement.query(By.css('app-cart-item')).triggerEventHandler('variantChange', 21);
+
+    expect(updateItemVariant).toHaveBeenCalledWith(10, 2, 21);
+  });
 });

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);