feat: enhance variant attribute handling across components for improved selection and display

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

@@ -28,8 +28,8 @@
               [ngModel]="selectedValues()[selector.key]"
               (ngModelChange)="onVariantValueChange(selector.key, $event)"
             >
-              @for (option of selector.options; track option) {
-                <option [ngValue]="option">{{ option }}</option>
+              @for (option of selector.options; track option.key) {
+                <option [ngValue]="option.value">{{ option.label }}</option>
               }
             </select>
           }

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

@@ -136,6 +136,24 @@ describe('ProductVerticalWithCartCardComponent', () => {
     expect(selectors?.querySelector('app-quantity-selector')).toBeNull();
   });
 
+  it('uses the variant value for selection and renders its label', async () => {
+    const fixture = await createComponent();
+    fixture.componentRef.setInput('variants', [
+      {
+        id: 10,
+        values: { event_date: { value: '2', label: '10/10/2026 · 09:00 a 18:00' } },
+      },
+    ]);
+    fixture.detectChanges();
+
+    const option = fixture.nativeElement.querySelector(
+      '.product-vertical-with-cart-card__variant-select option',
+    ) as HTMLOptionElement;
+
+    expect(option.textContent?.trim()).toBe('10/10/2026 · 09:00 a 18:00');
+    expect((fixture.componentInstance as any).selectedValues()).toEqual({ event_date: '2' });
+  });
+
   it('places all variant selectors together below price and quantity', async () => {
     const fixture = await createComponent();
     fixture.componentRef.setInput('variants', [

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

@@ -13,18 +13,27 @@ import { FormsModule } from '@angular/forms';
 
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
+import { VariantAttributeValue } from '../../../core/services/catalog/catalog.interface';
+
+type VariantSelectionValue = string | string[];
 
 export interface VerticalCartVariant {
   id: number;
   descripcion?: string | null;
   precio?: string | number;
-  values: Record<string, string>;
+  values: Record<string, VariantAttributeValue>;
+}
+
+interface VariantSelectorOption {
+  key: string;
+  value: VariantSelectionValue;
+  label: string;
 }
 
 interface VariantSelector {
   key: string;
   label: string;
-  options: string[];
+  options: VariantSelectorOption[];
 }
 
 @Component({
@@ -46,7 +55,7 @@ export class ProductVerticalWithCartCardComponent {
   readonly buy = output<{ quantity: number; variant: number | null }>();
   readonly addToCart = output<{ quantity: number; variant: number | null }>();
 
-  protected readonly selectedValues = signal<Record<string, string>>({});
+  protected readonly selectedValues = signal<Record<string, VariantSelectionValue>>({});
 
   protected readonly selectedVariantData = computed(() =>
     this.variants().find((variant) => variant.id === this.selectedVariant()),
@@ -67,13 +76,7 @@ export class ProductVerticalWithCartCardComponent {
     return keys.map((key) => ({
       key,
       label: this.formatVariantLabel(key),
-      options: Array.from(
-        new Set(
-          variants
-            .map((variant) => variant.values[key])
-            .filter((value): value is string => Boolean(value)),
-        ),
-      ),
+      options: this.optionsFor(variants, key),
     }));
   });
 
@@ -92,17 +95,21 @@ export class ProductVerticalWithCartCardComponent {
 
         const selected =
           variants.find((variant) => variant.id === this.selectedVariant()) ?? variants[0];
-        this.selectedValues.set({ ...selected.values });
+        this.selectedValues.set(this.selectionValues(selected.values));
         this.selectedVariant.set(selected.id);
       });
     });
   }
 
-  protected onVariantValueChange(key: string, value: string): void {
+  protected onVariantValueChange(key: string, value: VariantSelectionValue): void {
     const values = { ...this.selectedValues(), [key]: value };
     const selectors = this.variantSelectors();
     const matchingVariant = this.variants().find((variant) =>
-      selectors.every((selector) => variant.values[selector.key] === values[selector.key]),
+      selectors.every(
+        (selector) =>
+          this.valueKey(this.selectionValue(variant.values[selector.key])) ===
+          this.valueKey(values[selector.key]),
+      ),
     );
 
     this.selectedValues.set(values);
@@ -117,6 +124,55 @@ export class ProductVerticalWithCartCardComponent {
     this.buy.emit({ quantity: this.quantity(), variant: this.selectedVariant() });
   }
 
+  private optionsFor(variants: VerticalCartVariant[], key: string): VariantSelectorOption[] {
+    const options = new Map<string, VariantSelectorOption>();
+
+    for (const variant of variants) {
+      const attributeValue = variant.values[key];
+      if (attributeValue === undefined) continue;
+
+      const value = this.selectionValue(attributeValue);
+      const optionKey = this.valueKey(value);
+      if (!options.has(optionKey)) {
+        options.set(optionKey, {
+          key: optionKey,
+          value,
+          label: this.selectionLabel(attributeValue),
+        });
+      }
+    }
+
+    return Array.from(options.values());
+  }
+
+  private selectionValues(
+    values: Record<string, VariantAttributeValue>,
+  ): Record<string, VariantSelectionValue> {
+    return Object.fromEntries(
+      Object.entries(values).map(([key, value]) => [key, this.selectionValue(value)]),
+    );
+  }
+
+  private selectionValue(value: VariantAttributeValue): VariantSelectionValue {
+    if (typeof value === 'string') return value;
+    if (Array.isArray(value)) {
+      return value.map((item) => (typeof item === 'string' ? item : item.value));
+    }
+    return value.value;
+  }
+
+  private selectionLabel(value: VariantAttributeValue): string {
+    if (typeof value === 'string') return value;
+    if (Array.isArray(value)) {
+      return value.map((item) => (typeof item === 'string' ? item : item.label)).join(', ');
+    }
+    return value.label;
+  }
+
+  private valueKey(value: VariantSelectionValue | undefined): string {
+    return JSON.stringify(value);
+  }
+
   private formatVariantLabel(key: string): string {
     const label = key.replace(/[_-]+/g, ' ');
     return label.charAt(0).toUpperCase() + label.slice(1);