From 4b8df3eaa7af317cc1ac18de8000d5ee628ac19b Mon Sep 17 00:00:00 2001
From: Chinh Duong <chinh.duongthi@harveynash.vn>
Date: Thu, 10 Oct 2024 20:58:57 +0700
Subject: [PATCH] #1150 [Recommendation] Adjust product detail page to show
 similar product

- Fix build
---
 .../catalog/components/SimilarProduct.tsx     | 27 ++++++++++---------
 .../modules/catalog/models/SimilarProduct.ts  | 10 +++++++
 .../catalog/services/ProductService.ts        |  3 ++-
 3 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 storefront/modules/catalog/models/SimilarProduct.ts

diff --git a/storefront/modules/catalog/components/SimilarProduct.tsx b/storefront/modules/catalog/components/SimilarProduct.tsx
index 013452353e..8dab8cc537 100644
--- a/storefront/modules/catalog/components/SimilarProduct.tsx
+++ b/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>
   );
diff --git a/storefront/modules/catalog/models/SimilarProduct.ts b/storefront/modules/catalog/models/SimilarProduct.ts
new file mode 100644
index 0000000000..ea458eb12c
--- /dev/null
+++ b/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;
+  }
+};
diff --git a/storefront/modules/catalog/services/ProductService.ts b/storefront/modules/catalog/services/ProductService.ts
index 781758b91b..8e3c7d7c78 100644
--- a/storefront/modules/catalog/services/ProductService.ts
+++ b/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: {