feat(product-detail): implement resolver for product details and update component logic for improved error handling

feat(product-carousel): enhance image loading with optimized attributes and improve layout consistency
style: refactor HTML structure for better readability and maintainability
test(product-detail): add unit tests for product detail resolver and component behavior

src/app/features/store/store.routes.ts

@@ -4,6 +4,7 @@ import { SimpleLayoutComponent } from '../../core/layout/simple-layout/simple-la
 import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
 import { authGuard, guestOnlyGuard } from '../../core/services/auth/auth.guards';
 import { LoginPageComponent } from './pages/login-page/login-page.component';
+import { productDetailResolver } from './pages/product-detail-page/product-detail-page.resolver';
 import { RegisterPageComponent } from './pages/register-page/register-page.component';
 import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';
 import { storeHomeProductsResolver } from './pages/store-home-page/store-home-page.resolver';
@@ -17,8 +18,8 @@ export const routes: Routes = [
         path: '',
         component: StoreHomePageComponent,
         resolve: {
-          productsData: storeHomeProductsResolver
-        }
+          productsData: storeHomeProductsResolver,
+        },
       },
       {
         path: 'login',
@@ -27,9 +28,9 @@ export const routes: Routes = [
         children: [
           {
             path: '',
-            component: LoginPageComponent
-          }
-        ]
+            component: LoginPageComponent,
+          },
+        ],
       },
       {
         path: 'register',
@@ -38,24 +39,27 @@ export const routes: Routes = [
         children: [
           {
             path: '',
-            component: RegisterPageComponent
-          }
-        ]
+            component: RegisterPageComponent,
+          },
+        ],
       },
       {
         path: 'producto/:id',
+        resolve: {
+          productDetailData: productDetailResolver,
+        },
         loadComponent: () =>
           import('./pages/product-detail-page/product-detail-page.component').then(
-            (m) => m.ProductDetailPageComponent
-          )
+            (m) => m.ProductDetailPageComponent,
+          ),
       },
       {
         path: 'checkout',
         canActivate: [authGuard],
         loadComponent: () =>
           import('./pages/checkout-page/checkout-page.component').then(
-            (m) => m.CheckoutPageComponent
-          )
+            (m) => m.CheckoutPageComponent,
+          ),
       },
       {
         path: 'checkout/status',
@@ -65,47 +69,45 @@ export const routes: Routes = [
             path: ':id',
             loadComponent: () =>
               import('./pages/purchase-status-page/purchase-status-page.component').then(
-                (m) => m.PurchaseStatusPageComponent
-              )
-          }
-        ]
+                (m) => m.PurchaseStatusPageComponent,
+              ),
+          },
+        ],
       },
       {
         path: 'mi-cuenta',
         canActivate: [authGuard],
         loadComponent: () =>
-          import('./pages/account-page/account-layout/account-layout').then(
-            (m) => m.AccountLayout
-          ),
+          import('./pages/account-page/account-layout/account-layout').then((m) => m.AccountLayout),
         children: [
           {
             path: 'datos-personales',
             loadComponent: () =>
               import('./pages/account-page/pages/profile-page/profile-page').then(
-                (m) => m.ProfilePage
-              )
+                (m) => m.ProfilePage,
+              ),
           },
           {
             path: 'compras',
             loadComponent: () =>
               import('./pages/account-page/pages/purchases-page/purchases-page').then(
-                (m) => m.PurchasesPage
-              )
+                (m) => m.PurchasesPage,
+              ),
           },
           {
             path: 'compras/:id',
             loadComponent: () =>
               import('./pages/account-page/pages/purchase-detail-page/purchase-detail-page').then(
-                (m) => m.PurchaseDetailPage
-              )
+                (m) => m.PurchaseDetailPage,
+              ),
           },
           {
             path: '',
             redirectTo: 'datos-personales',
-            pathMatch: 'full'
-          }
-        ]
-      }
-    ]
-  }
+            pathMatch: 'full',
+          },
+        ],
+      },
+    ],
+  },
 ];