✨ feat: (product detail) show category in relevant products

:%s

src/components/modules/home/FreshProducts/FreshProducts.tsx

@@ -2,21 +2,13 @@ import { ProductCard } from '@commerce/types/product'
 import { Collection } from '@framework/schema'
 import React, { useMemo } from 'react'
 import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import { getCategoryNameFromCollectionId } from 'src/utils/funtion.utils'
 import { CollectionCarcousel } from '..'
 interface FreshProductsProps {
   data: ProductCard[]
   collections: Collection[]
 }
 
-const getCategoryNameFromCollectionId = (colelctions: Collection[], collectionId?: string ) => {
-  if (!collectionId) {
-    return ''
-  }
-
-  const collection = colelctions.find(item => item.id === collectionId)
-  return collection?.name || ''
-}
-
 const FreshProducts = ({ data, collections }: FreshProductsProps) => {
   const dataWithCategory = useMemo(() => {
     return data.map(item => {

src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx

@@ -1,17 +1,34 @@
 import { ProductCard } from '@commerce/types/product';
-import React from 'react';
+import { Collection } from '@framework/schema';
+import React, { useMemo } from 'react';
 import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
+import { getCategoryNameFromCollectionId } from 'src/utils/funtion.utils';
 
 interface Props {
     data: ProductCard[]
+    collections: Collection[]
+
 }
 
-const ReleventProducts = ({ data }: Props) => {
+const ReleventProducts = ({ data, collections }: Props) => {
+    const dataWithCategoryName = useMemo(() => {
+        return data.map(item => {
+            return {
+              ...item,
+              collection: getCategoryNameFromCollectionId(collections, item.collectionIds ? item.collectionIds[0] : undefined)
+            }
+          })
+    }, [data, collections])
+
+    if (data.length === 0) {
+        return null
+    }
+
     return (
         <ListProductWithInfo
             title="Relevant Products"
             subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-            data={data}
+            data={dataWithCategoryName}
         />
     );
 };

src/utils/funtion.utils.ts

@@ -1,5 +1,5 @@
 import { Facet } from "@commerce/types/facet";
-import { FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
+import { Collection, FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
 import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, PRODUCT_SORT_OPTION_VALUE } from "./constanst.utils";
 import { PromiseWithKey, SortOrder } from "./types.utils";
 
@@ -116,6 +116,15 @@ export function getFacetIdsFromCodes(facets: FacetValue[], codes?: string[]): st
   return ids
 }
 
+export const getCategoryNameFromCollectionId = (colelctions: Collection[], collectionId?: string ) => {
+  if (!collectionId) {
+    return ''
+  }
+
+  const collection = colelctions.find(item => item.id === collectionId)
+  return collection?.name || ''
+}
+
 export function getAllPromies(promies: PromiseWithKey[]) {
   return promies.map(item => item.promise)
-}
+}