✨ feat: get all collection

:%s

src/components/common/LabelCommon/LabelCommon.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React from 'react'
 import s from './LabelCommon.module.scss'
 interface LabelCommonProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
   size?: 'default' | 'large'
   shape?: 'half' | 'round' | 'default'
   type?: 'default' | 'discount' | 'waiting' | 'delivering' | 'delivered'

src/components/common/ProductCard/ProductCard.tsx

@@ -17,7 +17,7 @@ export interface ProductCardProps extends ProductCard {
 }
 
 const ProductCardComponent = ({
-  category,
+  collection,
   name,
   slug,
   weight,
@@ -45,9 +45,9 @@ const ProductCardComponent = ({
           </a>
         </Link>
         {
-          category &&
+          collection &&
         <div className={s.productLabel}>
-          <LabelCommon shape="half">{category}</LabelCommon>
+          <LabelCommon shape="half">{collection}</LabelCommon>
         </div>
         }
       </div>

src/components/modules/home/CollectionCarcousel/CollectionCarcousel.tsx

@@ -12,7 +12,7 @@ interface ColectionCarcouselProps extends CollectionHeadingProps {
   data: ProductCardProps[]
   itemKey: string
   viewAllLink?: string,
-  category:string
+  category?: string
 }
 
 const ColectionCarcousel = ({
@@ -21,7 +21,8 @@ const ColectionCarcousel = ({
   title,
   subtitle,
   type,
-  category
+  category,
+  viewAllLink = ROUTE.PRODUCTS,
 }: ColectionCarcouselProps) => {
   return (
     <div className={s.colectionCarcoucelWarpper}>
@@ -34,7 +35,7 @@ const ColectionCarcousel = ({
           ></CollectionHeading>
         </div>
         <div className={s.right}>
-          <ViewAllItem link={`${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${category}`}/>
+          <ViewAllItem link={category ? `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=${category}` : viewAllLink} />
         </div>
       </div>
       <div className={s.bot}>

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

@@ -1,12 +1,32 @@
 import { ProductCard } from '@commerce/types/product'
-import { Product } from '@framework/schema'
-import React from 'react'
+import { Collection } from '@framework/schema'
+import React, { useMemo } from 'react'
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import { CollectionCarcousel } from '..'
 interface FreshProductsProps {
   data: ProductCard[]
+  collections: Collection[]
 }
 
-const FreshProducts = ({ data }: FreshProductsProps) => {
+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 => {
+      return {
+        ...item,
+        collection: getCategoryNameFromCollectionId(collections, item.collectionIds ? item.collectionIds[0] : undefined)
+      }
+    })
+  }, [data, collections])
+
   if (data.length === 0) {
     return null
   }
@@ -14,11 +34,11 @@ const FreshProducts = ({ data }: FreshProductsProps) => {
     <div className="w-full">
       <CollectionCarcousel
         type="highlight"
-        data={data}
+        data={dataWithCategory}
         itemKey="product-1"
         title="Fresh Products Today"
         subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
+        viewAllLink={`${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=${OPTION_ALL}`}
       />
     </div>
   )

src/utils/funtion.utils.ts

@@ -1,6 +1,7 @@
 import { Facet } from "@commerce/types/facet";
 import { FacetValue } from './../../framework/vendure/schema.d';
 import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT } from "./constanst.utils";
+import { PromiseWithKey } from "./types.utils";
 
 export function isMobile() {
   return window.innerWidth < 768
@@ -55,4 +56,8 @@ export function getFacetNamesFromIds(facets: FacetValue[], ids?: string[]): stri
   const facetItems = facets.filter((item: FacetValue) => ids.includes(item.id))
   const names = facetItems.map((item: FacetValue) => item.name)
   return names.join(", ")
-}
+}
+
+export function getAllPromies (promies: PromiseWithKey[]) {
+  return promies.map(item => item.promise)
+}

src/utils/types.utils.ts

@@ -50,4 +50,10 @@ export type filterContextType = {
     visible: boolean;
     open: () => void;
     close: () => void;
-};
+};
+
+export type PromiseWithKey = {
+    key: string
+    promise: PromiseLike<any>
+    keyResult?: string,
+}