feat: enhance variant handling in selector and layout components for improved display and selection

src/app/core/layout/store-layout/store-layout.component.ts

@@ -6,7 +6,7 @@ import { StoreFooterComponent, StoreFooterSection } from './store-footer/store-f
 import { StoreHeaderComponent } from './store-header/store-header.component';
 import { CartComponent, CartItemMock } from '../../../shared/components/cart/cart.component';
 import { ButtonComponent } from '../../../shared/components/button/button.component';
-import { CartItem } from '../../services/cart/cart.interface';
+import { CartItem, CartItemVariantValue } from '../../services/cart/cart.interface';
 import { AuthService } from '../../services/auth/auth.service';
 import { findMenu } from '../../services/menu.utils';
 import { CheckoutService } from '../../services/checkout.service';
@@ -80,7 +80,7 @@ export class StoreLayoutComponent implements OnInit {
     if (selectedVariant) {
       attributes = Object.entries(selectedVariant.values).map(([label, value]) => ({
         label: this.formatAttributeLabel(label),
-        value: Array.isArray(value) ? value.join(', ') : value,
+        value: this.formatAttributeValue(value),
       }));
     }
 
@@ -103,6 +103,11 @@ export class StoreLayoutComponent implements OnInit {
     return label.charAt(0).toUpperCase() + label.slice(1);
   }
 
+  private formatAttributeValue(value: CartItemVariantValue): string {
+    const values = Array.isArray(value) ? value : [value];
+    return values.map((item) => (typeof item === 'string' ? item : item.label)).join(', ');
+  }
+
   protected readonly currentYear = new Date().getFullYear();
   protected readonly tenant = this.tenantService.tenant;
   protected readonly user = this.authService.user;

src/app/core/services/cart/cart.interface.ts

@@ -4,11 +4,21 @@ export interface CartItemProduct {
   variants?: CartItemVariant[];
 }
 
+export interface CartItemVariantOption {
+  value: string;
+  label: string;
+}
+
+export type CartItemVariantValue =
+  | string
+  | CartItemVariantOption
+  | Array<string | CartItemVariantOption>;
+
 export interface CartItemVariant {
   id: number;
   precio: string;
   stock_tecnico: number | null;
-  values: Record<string, string | string[]>;
+  values: Record<string, CartItemVariantValue>;
 }
 
 export interface CartItem {