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

src/app/shared/components/product-row-card/product-row-card.component.html

@@ -27,20 +27,11 @@
 
     <!-- Bottom Row: Attribute selects, Quantity, and Agregar al carrito button -->
     <div class="d-flex align-items-center justify-content-end gap-2">
-      <div class="product-row-card__selectors">
-        @for (selector of variantSelectors(); track selector.key) {
-          <select
-            class="form-select product-row-card__select"
-            [attr.aria-label]="selector.label"
-            [ngModel]="selectedValues()[selector.key]"
-            (ngModelChange)="onVariantValueChange(selector.key, $event)"
-          >
-            @for (option of selector.options; track option.key) {
-              <option [ngValue]="option.value">{{ option.label }}</option>
-            }
-          </select>
-        }
-      </div>
+      <app-variant-selector
+        class="product-row-card__selectors"
+        [variants]="variants()"
+        [(selectedVariant)]="selectedVariant"
+      />
 
       <app-quantity-selector [(quantity)]="quantity"></app-quantity-selector>
 

src/app/shared/components/product-row-card/product-row-card.component.scss

@@ -31,28 +31,6 @@
     color: var(--tenant-primary, #009933) !important; /* Green matching screenshot */
   }
 
-  &__selectors {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-  }
-
-  &__select {
-    width: auto;
-    min-width: 120px;
-    font-size: 14px;
-    height: 38px;
-    color: #666;
-    border-color: #ccc;
-    cursor: pointer;
-
-    &:focus {
-      border-color: var(--tenant-primary);
-      box-shadow: 0 0 0 0.25rem rgba(0, 153, 51, 0.25);
-    }
-  }
-
   &__btn-wrapper {
     min-width: 160px; /* To make both buttons equal width as in screenshot */
 

src/app/shared/components/product-row-card/product-row-card.component.ts

@@ -1,44 +1,21 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-  model,
-  output,
-  signal,
-  untracked,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
+import {
+  VariantSelectorComponent,
+  VariantSelectorVariant,
+} from '../variant-selector/variant-selector.component';
 
-export interface Variant {
+export interface Variant extends VariantSelectorVariant {
   label?: string;
-  value: unknown;
   descripcion?: string | null;
   precio?: string | number;
-  values: Record<string, string | string[]>;
-}
-
-type VariantAttributeValue = string | string[];
-
-interface VariantSelectorOption {
-  key: string;
-  label: string;
-  value: VariantAttributeValue;
-}
-
-interface VariantSelector {
-  key: string;
-  label: string;
-  options: VariantSelectorOption[];
 }
 
 @Component({
   selector: 'app-product-row-card',
   standalone: true,
-  imports: [ButtonComponent, QuantitySelectorComponent, FormsModule],
+  imports: [ButtonComponent, QuantitySelectorComponent, VariantSelectorComponent],
   templateUrl: './product-row-card.component.html',
   styleUrl: './product-row-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -58,51 +35,6 @@ export class ProductRowCardComponent {
   readonly buy = output<{ quantity: number; variant: unknown }>();
   readonly addToCart = output<{ quantity: number; variant: unknown }>();
 
-  protected readonly selectedValues = signal<Record<string, VariantAttributeValue>>({});
-  protected readonly attributeKeys = computed(() =>
-    Array.from(new Set(this.variants().flatMap((variant) => Object.keys(variant.values)))),
-  );
-  protected readonly variantSelectors = computed<VariantSelector[]>(() => {
-    const variants = this.variants();
-    const keys = this.attributeKeys();
-    const selectedValues = this.selectedValues();
-
-    return keys.map((key, index) => {
-      const previousKeys = keys.slice(0, index);
-      const compatibleVariants = variants.filter((variant) =>
-        previousKeys.every((previousKey) =>
-          this.sameValue(variant.values[previousKey], selectedValues[previousKey]),
-        ),
-      );
-
-      return {
-        key,
-        label: this.formatVariantLabel(key),
-        options: this.optionsFor(compatibleVariants, key),
-      };
-    });
-  });
-
-  constructor() {
-    effect(() => {
-      const variants = this.variants();
-      const selectedVariant = this.selectedVariant();
-
-      untracked(() => {
-        if (variants.length === 0) {
-          this.selectedValues.set({});
-          this.selectedVariant.set(null);
-          return;
-        }
-
-        const selected =
-          variants.find((variant) => Object.is(variant.value, selectedVariant)) ?? variants[0];
-        this.selectedValues.set({ ...selected.values });
-        this.selectedVariant.set(selected.value);
-      });
-    });
-  }
-
   protected readonly selectedVariantData = computed(() =>
     this.variants().find((variant) => Object.is(variant.value, this.selectedVariant())),
   );
@@ -117,42 +49,6 @@ export class ProductRowCardComponent {
 
   readonly formattedPrice = computed(() => this.formatCurrency(this.effectivePrice()));
 
-  protected onVariantValueChange(key: string, value: VariantAttributeValue): void {
-    const variants = this.variants();
-    const keys = this.attributeKeys();
-    const changedIndex = keys.indexOf(key);
-    const values = { ...this.selectedValues(), [key]: value };
-
-    for (let index = changedIndex + 1; index < keys.length; index++) {
-      const currentKey = keys[index];
-      const previousKeys = keys.slice(0, index);
-      const compatibleVariants = variants.filter((variant) =>
-        previousKeys.every((previousKey) =>
-          this.sameValue(variant.values[previousKey], values[previousKey]),
-        ),
-      );
-      const options = this.optionsFor(compatibleVariants, currentKey);
-
-      if (!options.some((option) => this.sameValue(option.value, values[currentKey]))) {
-        const firstOption = options[0];
-        if (firstOption) {
-          values[currentKey] = firstOption.value;
-        } else {
-          delete values[currentKey];
-        }
-      }
-    }
-
-    const matchingVariant = variants.find((variant) =>
-      keys.every((attributeKey) =>
-        this.sameValue(variant.values[attributeKey], values[attributeKey]),
-      ),
-    );
-
-    this.selectedValues.set(values);
-    this.selectedVariant.set(matchingVariant?.value ?? null);
-  }
-
   protected onAddToCart(): void {
     this.addToCart.emit({
       quantity: this.quantity(),
@@ -167,46 +63,6 @@ export class ProductRowCardComponent {
     });
   }
 
-  private optionsFor(variants: Variant[], key: string): VariantSelectorOption[] {
-    const options = new Map<string, VariantSelectorOption>();
-
-    for (const variant of variants) {
-      const value = variant.values[key];
-      if (value === undefined || value === '') {
-        continue;
-      }
-
-      const optionKey = this.valueKey(value);
-      if (!options.has(optionKey)) {
-        options.set(optionKey, {
-          key: optionKey,
-          label: Array.isArray(value) ? value.join(', ') : value,
-          value,
-        });
-      }
-    }
-
-    return Array.from(options.values());
-  }
-
-  private sameValue(
-    left: VariantAttributeValue | undefined,
-    right: VariantAttributeValue | undefined,
-  ): boolean {
-    return (
-      left !== undefined && right !== undefined && this.valueKey(left) === this.valueKey(right)
-    );
-  }
-
-  private valueKey(value: VariantAttributeValue): string {
-    return JSON.stringify(value);
-  }
-
-  private formatVariantLabel(key: string): string {
-    const label = key.replace(/[_-]+/g, ' ');
-    return label.charAt(0).toUpperCase() + label.slice(1);
-  }
-
   /**
    * Helper method to format currency numbers to Argentine Pesos style "$ XX.XXX".
    */