refactor(variants): standardize variant structure and improve variant handling across components

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.html

@@ -21,10 +21,7 @@
         </div>
 
         <div class="product-vertical-with-cart-card__variant-selectors">
-          <app-variant-selector
-            [variants]="selectorVariants()"
-            [(selectedVariant)]="selectedVariant"
-          />
+          <app-variant-selector [variants]="variants()" [(selectedVariant)]="selectedVariant" />
         </div>
       </div>
     }

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, getTestBed } from '@angular/core/testing';
+import { TestBed, getTestBed } from '@angular/core/testing';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
@@ -17,7 +17,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
     TestBed.resetTestingModule();
   });
 
-  async function createComponent(description = 'Pancho con aderezo a elección.') {
+  async function createComponent(description = 'Pancho con aderezo a elección.') {
     await TestBed.configureTestingModule({
       imports: [ProductVerticalWithCartCardComponent],
     }).compileComponents();
@@ -40,7 +40,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
     );
     expect(
       element.querySelector('.product-vertical-with-cart-card__description')?.textContent,
-    ).toContain('Pancho con aderezo a elección.');
+    ).toContain('Pancho con aderezo a elección.');
     expect(
       element.querySelector('.product-vertical-with-cart-card__price')?.textContent?.trim(),
     ).toBe('$ 11.500');
@@ -130,16 +130,14 @@ describe('ProductVerticalWithCartCardComponent', () => {
 
     expect(summary?.querySelector('.product-vertical-with-cart-card__price')).not.toBeNull();
     expect(summary?.querySelector('app-quantity-selector')).not.toBeNull();
-    expect(
-      selectors?.querySelectorAll('.variant-selector__select'),
-    ).toHaveLength(1);
+    expect(selectors?.querySelectorAll('.variant-selector__select')).toHaveLength(1);
     expect(selectors?.querySelector('app-quantity-selector')).toBeNull();
   });
 
   it('places all variant selectors together below price and quantity', async () => {
     const fixture = await createComponent();
     fixture.componentRef.setInput('variants', [
-      { id: 20, values: { fecha: '10 de octubre', turno: 'Mañana' } },
+      { id: 20, values: { fecha: '10 de octubre', turno: 'Mañana' } },
       { id: 21, values: { fecha: '10 de octubre', turno: 'Tarde' } },
     ]);
     fixture.detectChanges();
@@ -181,7 +179,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
   });
 
   it('prioritizes the selected variant description and price', async () => {
-    const fixture = await createComponent('Descripción general');
+    const fixture = await createComponent('Descripción general');
     fixture.componentRef.setInput('variants', [
       {
         id: 40,
@@ -206,9 +204,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
       element.querySelector('.product-vertical-with-cart-card__price')?.textContent?.trim(),
     ).toBe('$ 10.000');
 
-    const select = element.querySelector(
-      '.variant-selector__select',
-    ) as HTMLSelectElement;
+    const select = element.querySelector('.variant-selector__select') as HTMLSelectElement;
     select.value = select.options[1].value;
     select.dispatchEvent(new Event('change'));
     fixture.detectChanges();

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.ts

@@ -1,11 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  model,
-  output,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';
 
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
@@ -14,11 +7,9 @@ import {
   VariantSelectorVariant,
 } from '../variant-selector/variant-selector.component';
 
-export interface VerticalCartVariant {
-  id: number;
+export interface VerticalCartVariant extends VariantSelectorVariant {
   descripcion?: string | null;
   precio?: string | number;
-  values: Record<string, string>;
 }
 
 @Component({
@@ -52,10 +43,7 @@ export class ProductVerticalWithCartCardComponent {
     return Number.isFinite(variantPrice) ? variantPrice : this.price();
   });
   protected readonly formattedPrice = computed(() => this.formatCurrency(this.effectivePrice()));
-  protected readonly selectorVariants = computed<VariantSelectorVariant[]>(() =>
-    this.variants().map((variant) => ({ value: variant.id, values: variant.values })),
-  );
-  protected readonly hasVariants = computed(() => this.selectorVariants().length > 0);
+  protected readonly hasVariants = computed(() => this.variants().length > 0);
 
   protected onAddToCart(): void {
     this.addToCart.emit({ quantity: this.quantity(), variant: this.selectedVariant() });