#1150 [Recommendation] Adjust product detail page to show similar pro…

…duct

- Fix build

storefront/modules/catalog/components/SimilarProduct.tsx

@@ -4,6 +4,7 @@ import { Col, Row } from 'react-bootstrap';
 import SimilarProductCard from '@/common/components/SimilarProductCard';
 import { ProductThumbnail } from '../models/ProductThumbnail';
 import { getSimilarProductsByProductId } from '../services/ProductService';
+import { SimilarProduct } from '../models/SimilarProduct';
 
 type SimilarProductProps = {
   productId: number;
@@ -16,24 +17,27 @@ const SimilarProduct = ({ productId }: SimilarProductProps) => {
     fetchSimilarProducts();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
-  const fetchSimilarProducts = () => {
+    // Convert API response to ProductThumbnail[
+  const convertToProductThumbnail = (response: SimilarProduct[]): ProductThumbnail[] => {
+    return response.map((product) => ({
+    id: product.id,
+    name: product.name,
+    slug: product.slug,
+    thumbnailUrl: product.thumbnail?.url || '',
+    price: product.price
+  }));
+};
+const fetchSimilarProducts = () => {
     getSimilarProductsByProductId(productId)
        .then((response) => {
          // Transform response to match ProductThumbnail[]
-         const products: ProductThumbnail[] = response.map((product) => ({
-           id: product.id,
-           name: product.name,
-           slug: product.slug,
-           thumbnailUrl: product.thumbnail?.url || '',
-           price: product.price
-         }));
+         const products: ProductThumbnail[] = convertToProductThumbnail(response);
          setProducts(products);
        })
        .catch((error) => console.log(error));
-  };
+};
 
-  return (
+return (
     <div className="my-5">
       <h4 className="mb-2 text-black">Similar Products</h4>
            {products.length > 0 && (
@@ -48,7 +52,6 @@ const SimilarProduct = ({ productId }: SimilarProductProps) => {
               ))}
             </Row>
           )}
-
       {products.length === 0 && <p className="mt-4">No product</p>}
     </div>
   );

storefront/modules/catalog/models/SimilarProduct.ts

@@ -0,0 +1,10 @@
+export type SimilarProduct = {
+  id: number;
+  name: string;
+  slug: string;
+  price: number;
+  thumbnail: {
+      id: number;
+      url: string;
+  }
+};

storefront/modules/catalog/services/ProductService.ts

@@ -4,6 +4,7 @@ import { ProductAll, ProductFeature } from '../models/ProductFeature';
 import { ProductOptionValueGet } from '../models/ProductOptionValueGet';
 import { ProductVariation } from '../models/ProductVariation';
 import { ProductsGet } from '../models/ProductsGet';
+import { SimilarProduct } from '../models/SimilarProduct';
 
 export async function getFeaturedProducts(pageNo: number): Promise<ProductFeature> {
   const response = await fetch(`api/product/storefront/products/featured?pageNo=${pageNo}`);
@@ -55,7 +56,7 @@ export async function getRelatedProductsByProductId(productId: number): Promise<
   return Promise.reject(res);
 }
 
-export async function getSimilarProductsByProductId(productId: number): Promise<ProductsGet> {
+export async function getSimilarProductsByProductId(productId: number): Promise<SimilarProduct[]> {
   const res = await fetch(`/api/recommendation/embedding/product/${productId}/similarity`, {
     method: 'GET',
     headers: {