Feature/sameproducts

src/components/Product/product.js

@@ -1,56 +1,34 @@
-import React from 'react'
-import ReactStars from 'react-stars'
+import React, {useCallback} from 'react'
 import {
-  CurrencyBeforeComponent,
-  CurrencyBeforeValue,
+  CurrencyAfterValue,
 } from 'components/Utilities/common'
-import { useAuth } from 'context/auth-provider'
+
+import { TENANT } from 'constants/localstorage'
+import { useNavigate } from 'react-router-dom'
 
 const Product = (props) => {
-  const { isLoggedIn } = useAuth()
+  const navigate = useNavigate()
+  const userTenant = localStorage.getItem(TENANT)
+  const handleProductDetail = useCallback(() => {
+    navigate(`/${userTenant}/product/details/${props.id}`)
+  }, [userTenant, props.id])
   return (
-    <div className="mx-3">
-      <div className="w-full h-3 flex justify-between ">
-        <div
-          className={
-            props.stock === 'Low'
-              ? 'text-emporixGold font-inter font-bold text-[12px] pt-[6px]'
-              : 'text-brightGreen font-inter font-bold text-[12px] pt-[6px]'
-          }
-        >
-          {props.stock} Stock
-        </div>
-        <div className="flex h-5">
-          <ReactStars size={16} value={props.rating} color2={'#FBB13C'} />(
-          {props.total_count})
-        </div>
-      </div>
+    <div className="mx-3 hover:cursor-pointer" onClick={handleProductDetail}>
       <div className="pt-[47px] w-[260px] h-[240px] items-center mx-auto ">
         <img src={props.src} className="h-full mx-auto" />
       </div>
-      <div className="mt-11 w-full font-inter">
-        <div className="text-left text-[12px] leading-[12px] text-gray">
+      <div className="mt-11 w-full font-inter flex flex-col items-center">
+        <div className="text-left text-[12px] leading-[12px] font-bold">
           {props.code}
         </div>
-        <div className="mt-2 text-left max-w-[240px] text-base font-bold">
+        <div className="mt-2 text-left max-w-[240px] text-base text-gray">
           {props.name}
         </div>
       </div>
-      <div className="w-full flex justify-between h-[56px] pt-2">
-        <div className="text-[12px] text-gray w-[150px] text-left">
-          {isLoggedIn ? 'Your negotiated price' : 'List Price'}
-          <CurrencyBeforeComponent>
-            <del>{props.list_price}</del>
-          </CurrencyBeforeComponent>
-        </div>
+      <div className="w-full flex justify-center h-[56px] pt-2">
         <div className="flex">
-          <img src="/products/pencil.png" className="w-4 h-4 mt-1" />
           <div className="text-[20px] leading-[24px] font-bold ml-1">
-            <CurrencyBeforeValue value={props.price} />
-            <br />
-            <span className="text-[12px] font-normal text-gray">
-              (Incl. VAT)
-            </span>
+            <CurrencyAfterValue value={props.price} />
           </div>
         </div>
       </div>

src/pages/product/ProductDetailPage.js

@@ -4,6 +4,7 @@ import React, {
   useContext,
   useMemo,
   useState,
+  useEffect
 } from 'react'
 import Typography from '@mui/material/Typography'
 import Breadcrumbs from '@mui/material/Breadcrumbs'
@@ -31,6 +32,42 @@ import { PriceTierValues } from './VariantAccordion'
 import { useCart } from 'context/cart-provider'
 import { useAuth } from 'context/auth-provider'
 import { formatPrice } from 'helpers/price'
+import { getLanguageFromLocalStorage } from 'context/language-provider'
+import productService from '../../services/product/product.service'
+import priceService from '../../services/product/price.service'
+
+const getRelatedProducts = async (language, product) => {
+  let productIds = []
+  const relatedItems = product.relatedItems
+  if(!relatedItems ) return null
+
+  relatedItems.forEach((item) => {
+    productIds.push(item.refId)
+  })
+  const products = await productService.getProductsWithIds(productIds)
+  const prices = await priceService.getPriceWithProductIds(productIds)
+
+  const prices_obj = {}
+  prices.forEach((p) => {
+    prices_obj[`p${p.itemId.id}`] = p
+  })
+
+  let price_id
+  let result = []
+  for (let i = 0; i < products.length; i++) {
+    price_id = `p${products[i]['id']}`
+    if (prices_obj[price_id] !== undefined)
+      result.push({
+        id: products[i].id,
+        code: products[i].code,
+        name: prices_obj[price_id].itemId?.name[language] || "",
+        price: prices_obj[price_id].effectiveValue,
+        listprice: prices_obj[price_id].effectiveValue,
+        src: products[i].media[0].url
+      })
+  }
+  return result
+}
 
 const ProductContext = createContext()
 
@@ -550,82 +587,39 @@ const ProductDetailInfo = ({ product }) => {
   )
 }
 
-const products = [
-  {
-    stock: 'Low',
-    rating: 4,
-    count: 8,
-    src: '/products/hp_laser_printer.png',
-    code: 'TY2-B#M74A',
-    name: 'HP LaserJet 1*500-sheet Paper Feeder and Cabinet',
-    price: '341.89',
-    listPrice: '389.50',
-  },
+const ProductMatchItems = ({productInput}) => {
+  const [products, setProducts] = useState([]); 
+  const language = getLanguageFromLocalStorage()
 
-  {
-    stock: 'In',
-    rating: 4,
-    count: 8,
-    src: '/products/comfort_chair.png',
-    code: 'BB2-B3M987',
-    name: 'RP9 Retail Compact Stand Silver PC Multimedia stand',
-    price: '84.89',
-    listPrice: '94.10',
-  },
-  {
-    stock: 'In',
-    rating: 4,
-    count: 8,
-    src: '/products/pc_stand.png',
-    code: 'BB2-B3M987',
-    name: 'Zenith Plier stapler 548/E Silver',
-    price: '27.50',
-    listPrice: '34.99',
-  },
-  {
-    stock: 'Low',
-    rating: 4,
-    count: 8,
-    src: '/products/stapler.png',
-    code: 'TY2-B#M74A',
-    name: 'Comfort Ergo 2-Lever Operator Chairs',
-    price: '53.59',
-    listPrice: '59.99',
-  },
-  {
-    stock: 'Low',
-    rating: 4,
-    count: 8,
-    src: '/products/comfort_chair.png',
-    code: 'TY2-B#M74A',
-    name: 'Comfort Ergo 2-Lever Operator Chairs',
-    price: '53.59',
-    listPrice: '59.99',
-  },
-]
-
-const ProductMatchItems = () => {
+  useEffect(() => {
+    getRelatedProducts(language, productInput).then(result => {
+        result ? setProducts(result.slice(0, 5)) : setProducts([])
+    })
+  },[language])
+
   return (
-    <div className="product-match-items-wrapper grid grid-cols-1">
-      <div className="product-match-caption w-full">Match it with</div>
-      <div className="product-match-items-content w-full">
-        <SliderComponent>
-          {products.map((item, index) => (
-            <Product
-              key={index}
-              stock={item.stock}
-              rating={item.rating}
-              total_count={item.count}
-              src={item.src}
-              code={item.code}
-              name={item.name}
-              price={item.price}
-              listPrice={item.listPrice}
-            />
-          ))}
-        </SliderComponent>
+    <>
+      {products.length > 0 && 
+      <div className="product-match-items-wrapper grid grid-cols-1">
+        <div className="product-match-caption w-full p-0">Match it with</div>
+        <div className="product-match-items-content w-full">
+          <SliderComponent>
+            {products.map((item) => (
+              <Product
+                id={item.id}
+                key={item.id}
+                src={item.src}
+                code={item.code}
+                name={item.name}
+                price={item.price}
+                listPrice={item.listPrice}
+              />
+            ))}
+          </SliderComponent>
+        </div>
       </div>
-    </div>
+      }
+    </>
   )
 }
 
@@ -639,7 +633,7 @@ const ProductDetailPage = ({ product, brand, labels }) => {
           <ProductVariants product={product} />
         )}
         <ProductDetailInfo product={product} />
-        <ProductMatchItems />
+        <ProductMatchItems productInput={product}/>
       </div>
     </div>
   )

src/services/product/category.service.js

@@ -177,4 +177,4 @@ export const getAllParentCategories = async (categoryId) => {
   const url = `${parentCategoriesApi()}/${categoryId}/parents`
   const categories = await api.get(url, { headers })
   return categories
-}
+}