From 41b51f06e74ff76248c10f3396a20a6ad97f9405 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Wed, 1 Jul 2026 10:22:46 -0300
Subject: [PATCH] feat: add product detail page component and corresponding
 unit tests

---
 .../product-detail-page.component.spec.ts     | 22 ++++++++++---------
 .../product-detail-page.component.ts          | 17 +++++++++-----
 .../store-home-page.component.spec.ts         |  3 ---
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git 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
index 7bf3a87..93e457f 100644
--- 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
@@ -16,7 +16,6 @@ import { ProductDetailPageComponent } from './product-detail-page.component';
 describe('ProductDetailPageComponent', () => {
   const mockProduct: ProductDetail = {
     id: 1,
-    tenant_codigo: 'test',
     category_id: 10,
     brand_id: null,
     slug: 'auriculares-bluetooth',
@@ -27,7 +26,8 @@ describe('ProductDetailPageComponent', () => {
     brand: 'Sony',
     images: ['https://example.com/image.png'],
     attributes: [],
-    default_variant: null
+    variants_map: [],
+    variant: null
   };
 
   let paramMapSubject: BehaviorSubject<any>;
@@ -132,10 +132,11 @@ describe('ProductDetailPageComponent', () => {
     const detailProduct: ProductDetail = {
       ...mockProduct,
       images: ['https://example.com/product.png'],
-      default_variant: {
-        variant_id: 123,
+      variant: {
+        id: 123,
+        stock: 10,
         images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
-        attributes: {}
+        definitions: {}
       }
     };
     catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
@@ -152,7 +153,7 @@ describe('ProductDetailPageComponent', () => {
     const detailProduct: ProductDetail = {
       ...mockProduct,
       images: ['https://example.com/product.png'],
-      default_variant: null
+      variant: null
     };
     catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
 
@@ -168,7 +169,7 @@ describe('ProductDetailPageComponent', () => {
     const detailProduct: ProductDetail = {
       ...mockProduct,
       images: [],
-      default_variant: null
+      variant: null
     };
     catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
 
@@ -233,10 +234,11 @@ describe('ProductDetailPageComponent', () => {
           ]
         }
       ],
-      default_variant: {
-        variant_id: 123,
+      variant: {
+        id: 123,
+        stock: 10,
         images: ['https://example.com/variant1.png'],
-        attributes: {
+        definitions: {
           color: 'beige',
           material: 'Cuero'
         }
diff --git 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
index 67beb3d..dcd296c 100644
--- 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
@@ -8,9 +8,10 @@ import {
   effect,
   inject,
   signal,
-  viewChild
+  viewChild,
+  PLATFORM_ID
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { combineLatest, Subscription } from 'rxjs';
 
@@ -38,6 +39,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
   private readonly catalogService = inject(CatalogService);
   private readonly carouselHost = viewChild<ElementRef<HTMLElement>>('carouselHost');
   private readonly descriptionBody = viewChild<ElementRef<HTMLElement>>('descriptionBody');
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly isBrowser = isPlatformBrowser(this.platformId);
 
   private routeSub: Subscription | null = null;
   private productSub: Subscription | null = null;
@@ -82,10 +85,12 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
       this.product();
       this.descriptionExpanded();
 
-      queueMicrotask(() => {
-        this.bindCarouselResizeObserver();
-        this.refreshMeasurements();
-      });
+      if (this.isBrowser) {
+        queueMicrotask(() => {
+          this.bindCarouselResizeObserver();
+          this.refreshMeasurements();
+        });
+      }
     });
   }
 
diff --git 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
index 4a6ba18..6d7bb2b 100644
--- 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
@@ -37,7 +37,6 @@ describe('StoreHomePageComponent', () => {
   const pageOneProducts: Product[] = [
     {
       id: 1,
-      tenant_codigo: 'test',
       category_id: 10,
       brand_id: null,
       slug: 'auriculares-bluetooth',
@@ -50,7 +49,6 @@ describe('StoreHomePageComponent', () => {
     },
     {
       id: 2,
-      tenant_codigo: 'test',
       category_id: 11,
       brand_id: null,
       slug: 'teclado-mecanico',
@@ -106,7 +104,6 @@ describe('StoreHomePageComponent', () => {
               [
                 {
                   id: 3,
-                  tenant_codigo: 'test',
                   category_id: 12,
                   brand_id: null,
                   slug: 'mouse-gamer',