feat: enhance product attributes and event date handling for improved user experience and data management

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

@@ -6,9 +6,9 @@
     <h3 class="product-row-card__title text-uppercase mb-1 m-0">
       {{ title() }}
     </h3>
-    @if (description()) {
+    @if (effectiveDescription()) {
       <p class="product-row-card__description m-0 mt-1">
-        {{ description() }}
+        {{ effectiveDescription() }}
       </p>
     }
   </div>

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

@@ -14,6 +14,8 @@ import { QuantitySelectorComponent } from '../quantity-selector/quantity-selecto
 export interface Variant {
   label: string;
   value: any;
+  descripcion?: string | null;
+  precio?: string | number;
 }
 
 @Component({
@@ -53,11 +55,20 @@ export class ProductRowCardComponent {
     });
   }
 
-  // Formatted string for price: "$ 10.000"
-  readonly formattedPrice = computed(() => {
-    return this.formatCurrency(this.price());
+  protected readonly selectedVariantData = computed(() =>
+    this.variants().find((variant) => Object.is(variant.value, this.selectedVariant())),
+  );
+  protected readonly effectiveDescription = computed(
+    () => this.selectedVariantData()?.descripcion ?? this.description(),
+  );
+  protected readonly effectivePrice = computed(() => {
+    const variantPrice = Number(this.selectedVariantData()?.precio);
+
+    return Number.isFinite(variantPrice) ? variantPrice : this.price();
   });
 
+  readonly formattedPrice = computed(() => this.formatCurrency(this.effectivePrice()));
+
   protected onAddToCart(): void {
     this.addToCart.emit({
       quantity: this.quantity(),