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

2026-08-07 14:16:02 -03:00
parent 8d88e1bb13
commit 1977df6765
18 changed files with 368 additions and 187 deletions
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.html
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.html
@@ -26,7 +26,7 @@

            <div class="product-detail__price-group">
              <span class="product-detail__price-current">
-                {{ getFormattedPrice(prod.precio) }}
+                {{ getFormattedPrice(effectivePrice()) }}
              </span>

              @if (oldPrice(); as oldPrice) {
@@ -35,31 +35,6 @@
            </div>
          </section>

-          @if (hasEventDates()) {
-            <div class="product-detail__divider"></div>
-
-            <section class="product-detail__section product-detail__section--event-date">
-              <label class="form-label" for="event-date-selector">Fecha</label>
-              <select
-                id="event-date-selector"
-                class="form-select"
-                [value]="selectedVariant()?.id ?? ''"
-                (change)="onEventDateChange($event)"
-              >
-                @for (eventDate of eventDates(); track eventDate.id) {
-                  <option
-                    [value]="eventDate.variant_id"
-                    [disabled]="
-                      prod.inventory_policy !== 'unlimited' && (eventDate.stock_tecnico ?? 0) <= 0
-                    "
-                  >
-                    {{ eventDate.label }}
-                  </option>
-                }
-              </select>
-            </section>
-          }
-
          @if (hasRenderableAttributes()) {
            <div class="product-detail__divider"></div>

@@ -124,7 +99,7 @@
              [class.product-detail__description-body--expanded]="descriptionExpanded()"
              [style.max-height.px]="descriptionExpanded() ? descriptionMaxHeight() || null : null"
            >
-              {{ prod.descripcion }}
+              {{ effectiveDescription() }}
            </div>

            @if (showDescriptionToggle()) {
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
@@ -22,6 +22,7 @@ import {
 describe('ProductDetailPageComponent', () => {
  const mockProduct: CatalogItemDetail = {
    id: 1,
+    type: 'product',
    category_id: 10,
    brand_id: null,
    slug: 'auriculares-bluetooth',
@@ -327,33 +328,39 @@ describe('ProductDetailPageComponent', () => {
    expect((swatches[0] as HTMLElement).style.backgroundColor).not.toBe('');
  });

-  it('renders event dates and resolves the selected date through its variant', async () => {
+  it('renders event dates as a dynamic attribute and resolves their variants', async () => {
    const detailProduct: CatalogItemDetail = {
      ...mockProduct,
      purpose: 'entry',
      has_tickets: true,
      variants: [
-        { id: 101, event_date_id: 20, stock_tecnico: 10, values: {} },
-        { id: 102, event_date_id: 21, stock_tecnico: 10, values: {} },
+        { id: 101, event_date_id: 20, stock_tecnico: 10, values: { event_date: '20' } },
+        { id: 102, event_date_id: 21, stock_tecnico: 10, values: { event_date: '21' } },
      ],
-      event_dates: [
+      attributes: [
        {
-          id: 20,
-          variant_id: 101,
-          date: '2026-10-09',
-          starts_at: '2026-10-09T10:00:00.000000Z',
-          ends_at: '2026-10-09T20:00:00.000000Z',
-          label: 'Viernes 9 de octubre - 10:00 a 20:00',
-          stock_tecnico: 10,
-        },
-        {
-          id: 21,
-          variant_id: 102,
-          date: '2026-10-10',
-          starts_at: '2026-10-10T10:00:00.000000Z',
-          ends_at: '2026-10-10T20:00:00.000000Z',
-          label: 'Sábado 10 de octubre - 10:00 a 20:00',
-          stock_tecnico: 10,
+          id: 99,
+          codigo: 'event_date',
+          nombre: 'Fecha',
+          is_required: true,
+          metadata_schema: null,
+          type: 'event_date',
+          options: [
+            {
+              id: 20,
+              value: '20',
+              label: '09/10/2026 · 10:00 a 20:00',
+              sort_order: 0,
+              metadata: null,
+            },
+            {
+              id: 21,
+              value: '21',
+              label: '10/10/2026 · 10:00 a 20:00',
+              sort_order: 1,
+              metadata: null,
+            },
+          ],
        },
      ],
      selected_variant: {
@@ -373,12 +380,13 @@ describe('ProductDetailPageComponent', () => {
    const fixture = TestBed.createComponent(ProductDetailPageComponent);
    fixture.detectChanges();

-    const select = fixture.nativeElement.querySelector('#event-date-selector') as HTMLSelectElement;
-    expect(select.options).toHaveLength(2);
-    expect(select.value).toBe('101');
+    const options = fixture.nativeElement.querySelectorAll(
+      '.attribute-selector__text-option',
+    ) as NodeListOf<HTMLButtonElement>;
+    expect(options).toHaveLength(2);
+    expect(options[0].classList.contains('attribute-selector__text-option--selected')).toBe(true);

-    select.value = '102';
-    select.dispatchEvent(new Event('change'));
+    options[1].click();
    fixture.detectChanges();

    expect(catalogServiceStub.getCatalogItem).toHaveBeenCalledWith(1, 102);
@@ -621,6 +629,39 @@ describe('ProductDetailPageComponent', () => {
    expect(fixture.componentInstance['quantity']()).toBe(2);
  });

+  it('caps an unlimited variant at the per-user purchase limit', async () => {
+    const unlimitedVariant = {
+      id: 322,
+      stock_tecnico: null,
+      values: {},
+    };
+    resolveProduct({
+      ...mockProduct,
+      inventory_policy: 'unlimited',
+      max_units_per_user: 2,
+      selected_variant: {
+        id: 322,
+        stock_tecnico: null,
+        images: [],
+        values: { event_date: '20' },
+      },
+      variants: [unlimitedVariant],
+    });
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const increaseButton = fixture.nativeElement.querySelector(
+      'app-quantity-selector button:last-child',
+    ) as HTMLButtonElement;
+    increaseButton.click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance['quantity']()).toBe(2);
+    expect(increaseButton.disabled).toBe(true);
+  });
+
  it('disables purchase actions for tracked variants without stock', async () => {
    const trackedVariant = {
      id: 654,
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
@@ -86,13 +86,28 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
  protected readonly creatingDirectPurchase = signal(false);
  protected readonly error = signal<string | null>(null);
  protected readonly selectedVariant = signal<CatalogItemVariant | null>(null);
+  protected readonly effectiveDescription = computed(
+    () => this.selectedVariant()?.descripcion ?? this.product()?.descripcion ?? '',
+  );
+  protected readonly effectivePrice = computed(
+    () => this.selectedVariant()?.precio ?? this.product()?.precio,
+  );
  protected readonly quantity = signal(1);
  protected readonly selectedVariantMax = computed<number | null>(() => {
    const prod = this.product();
    const variant = this.selectedVariant();
-    if (variant) return variant.stock_tecnico;
-    if (prod && prod.variants.length === 0) return prod.stock_tecnico ?? null;
-    return 0;
+    if (!prod) return 0;
+
+    const stockLimit = variant
+      ? variant.stock_tecnico
+      : prod.variants.length === 0
+        ? (prod.stock_tecnico ?? null)
+        : 0;
+    const userLimit = prod.max_units_per_user ?? null;
+
+    if (stockLimit === null) return userLimit;
+    if (userLimit === null) return stockLimit;
+    return Math.min(stockLimit, userLimit);
  });
  protected readonly selectedVariantAvailable = computed(() => {
    const prod = this.product();
@@ -109,14 +124,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
  protected readonly descriptionMaxHeight = signal(0);
  protected readonly descriptionHasOverflow = signal(false);
  protected readonly renderableAttributes = computed(() =>
-    (this.product()?.attributes ?? []).filter(
-      (attribute) =>
-        attribute.options.length > 0 &&
-        !(this.product()?.purpose === 'entry' && attribute.codigo === 'fecha'),
-    ),
+    (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0),
  );
-  protected readonly eventDates = computed(() => this.product()?.event_dates ?? []);
-  protected readonly hasEventDates = computed(() => this.eventDates().length > 0);
  protected readonly hasRenderableAttributes = computed(
    () => this.renderableAttributes().length > 0,
  );
@@ -130,6 +139,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
      this.carouselHost();
      this.descriptionBody();
      this.product();
+      this.selectedVariant();
      this.descriptionExpanded();

      if (this.isBrowser) {
@@ -237,8 +247,11 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
    }

    this.selectedVariant.set(variant);
-    if (variant && variant.stock_tecnico !== null && this.quantity() > variant.stock_tecnico) {
-      this.quantity.set(Math.max(1, variant.stock_tecnico));
+    this.descriptionExpanded.set(false);
+    this.descriptionHasOverflow.set(false);
+    const maximum = this.selectedVariantMax();
+    if (maximum !== null && this.quantity() > maximum) {
+      this.quantity.set(Math.max(1, maximum));
    }

    const currentProduct = this.product();
@@ -247,12 +260,6 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
    }
  }

-  protected onEventDateChange(event: Event): void {
-    const variantId = Number((event.target as HTMLSelectElement).value);
-    const variant = this.product()?.variants.find((item) => item.id === variantId) ?? null;
-    this.onVariantChange(variant);
-  }
-
  protected addToCart(): void {
    const currentProduct = this.product();
    const variant = this.selectedVariant();
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
@@ -195,11 +195,9 @@ describe('StoreHomePageComponent', () => {
        background_image_id: 'https://example.com/hero.jpg',
      },
    });
-    tenant.active_event_id = 10;
-    tenant.active_event = {
-      id: 10,
-      name: 'Fiesta Fútbol Infantil',
-      address: 'Rosario, Santa Fe',
+    tenant.event = {
+      title: 'Fiesta Fútbol Infantil',
+      location: 'Rosario, Santa Fe',
      dates: [
        {
          id: 20,
@@ -331,11 +329,9 @@ describe('StoreHomePageComponent', () => {

  it('renders only the active event data when the tenant does not have the hero extra', async () => {
    const tenant = createTenant();
-    tenant.active_event_id = 12;
-    tenant.active_event = {
-      id: 12,
-      name: 'Fiesta Fútbol Infantil',
-      address: 'Sunchales, Santa Fe',
+    tenant.event = {
+      title: 'Fiesta Fútbol Infantil',
+      location: 'Sunchales, Santa Fe',
      dates: [
        {
          id: 25,
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.ts
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.ts
@@ -68,14 +68,14 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
  protected readonly eventConfig = computed(() => {
    const tenant = this.tenant();
    const contact = tenant?.social_media ?? [];
-    const activeEvent = tenant?.active_event;
+    const event = tenant?.event;

-    if (activeEvent) {
+    if (event) {
      return {
-        id: activeEvent.id,
-        title: activeEvent.name,
-        location: activeEvent.address,
-        dates: activeEvent.dates.map((eventDate) => ({
+        id: tenant.id,
+        title: event.title,
+        location: event.location,
+        dates: event.dates.map((eventDate) => ({
          id: eventDate.id,
          date: eventDate.date,
          start_time: eventDate.time_start,