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

:%s

pages/product/[slug].tsx

@@ -9,13 +9,13 @@ import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/uti
 import { getAllPromies } from 'src/utils/funtion.utils'
 import { PromiseWithKey } from 'src/utils/types.utils'
 
-export default function Slug({ product, relevantProducts }: InferGetStaticPropsType<typeof getStaticProps>) {
+export default function Slug({ product, relevantProducts, collections }: InferGetStaticPropsType<typeof getStaticProps>) {
 
   return <>
     <ProductInfoDetail />
     <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
-    <ReleventProducts data={relevantProducts}/>
+    <ReleventProducts data={relevantProducts} collections={collections}/>
     <ViewedProducts />
     <RelevantBlogPosts data={BLOGS_DATA_TEST} title="relevent blog posts" />
   </>
@@ -43,7 +43,7 @@ export async function getStaticProps({
     throw new Error(`Product with slug '${params!.slug}' not found`)
   }
 
-  // relevant product
+  // relevant product (filter by product detail's facetIds)
   const relevantFacetIds = product.facetValueIds
   if (relevantFacetIds && relevantFacetIds.length > 0) {
     const relevantProductsPromise = commerce.getAllProducts({
@@ -60,6 +60,15 @@ export async function getStaticProps({
   }
 
 
+  // collection
+  const collectionsPromise = commerce.getAllCollections({
+    variables: {},
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' })
+
+
   try {
     const promises = getAllPromies(promisesWithKey)
     const rs = await Promise.all(promises)

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, 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
     }
 
-const ReleventProducts = ({ data }: Props) => {
     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)
 }