✨ feat: featured product sub text

:%s

pages/index.tsx

@@ -1,18 +1,21 @@
 import { ProductCard } from '@commerce/types/product';
 import { ProductVariables } from '@framework/api/operations/get-all-products';
+import { FacetValue } from '@framework/schema';
 import commerce from '@lib/api/commerce';
 import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
 import { FeaturedProductsCarousel, FreshProducts, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice';
-import { getAllFeaturedFacetId, getFreshFacetId } from 'src/utils/funtion.utils';
+import { getAllFeaturedFacetId, getAllFeaturedFacetValue, getFreshFacetId } from 'src/utils/funtion.utils';
 
 interface Props {
+  featuredFacetsValue: FacetValue[],
   freshProducts: ProductCard[],
   featuredProducts: ProductCard[],
 
 }
-export default function Home({ freshProducts, featuredProducts }: Props) {
+export default function Home({ featuredFacetsValue, 
+  freshProducts, featuredProducts }: Props) {
   return (
     <>
       <HomeBanner />
@@ -22,7 +25,7 @@ export default function Home({ freshProducts, featuredProducts }: Props) {
       <HomeCollection />
       <HomeVideo />
       <HomeSpice />
-      <FeaturedProductsCarousel data={featuredProducts} />
+      <FeaturedProductsCarousel data={featuredProducts} featuredFacetsValue={featuredFacetsValue} />
       <HomeCTA />
       <HomeRecipe />
       <HomeSubscribe />
@@ -45,7 +48,7 @@ export async function getStaticProps({
     config,
     preview,
   })
-
+  const featuredFacetsValue = getAllFeaturedFacetValue(facets)
 
   const freshProductvariables: ProductVariables = {}
   const freshFacetId = getFreshFacetId(facets)
@@ -60,7 +63,6 @@ export async function getStaticProps({
   })
 
   const allFeaturedFacetId = getAllFeaturedFacetId(facets)
-  console.log("featured** ", allFeaturedFacetId)
   const featuredProductsPromise = commerce.getAllProducts({
     variables: {
       facetValueIds: allFeaturedFacetId
@@ -78,6 +80,7 @@ export async function getStaticProps({
     return {
       props: {
         facets,
+        featuredFacetsValue,
         freshProducts: freshFacetId ? rs[0].products : [],
         featuredProducts: rs[1].products
       },

src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss

@@ -21,6 +21,9 @@
             width: 24rem;
             height: 24rem;
         }
+        img {
+            object-fit: contain;
+        }
     }
     .right{
         margin-left: 1.2rem;

src/components/common/FeaturedProductCard/FeaturedProductCard.tsx

@@ -1,4 +1,5 @@
 import { ProductCard } from '@commerce/types/product'
+import { Facet, FacetValue } from '@framework/schema'
 import Link from 'next/link'
 import React from 'react'
 import { ROUTE } from 'src/utils/constanst.utils'
@@ -8,8 +9,8 @@ import ButtonCommon from '../ButtonCommon/ButtonCommon'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import s from './FeaturedProductCard.module.scss'
 export interface FeaturedProductCardProps extends ProductCard {
-  buttonText?: string
-  featuredFacetId?: string,
+  buttonText?: string,
+  subText?: string,
 }
 
 const FeaturedProductCard = ({
@@ -17,9 +18,12 @@ const FeaturedProductCard = ({
   name,
   slug,
   price,
+  subText,
   currencyCode,
   buttonText = LANGUAGE.BUTTON_LABEL.BUY_NOW,
 }: FeaturedProductCardProps) => {
+  
+  
   return (
     <div className={s.featuredProductCardWarpper}>
       <div className={s.left}>
@@ -36,9 +40,7 @@ const FeaturedProductCard = ({
               <div className={s.title}>{name}</div>
             </a>
           </Link>
-
-          {/* TODO: */}
-          {/* <div className={s.subTitle}>{subTitle}</div> */}
+          <div className={s.subTitle}>{subText}</div>
           <div className={s.priceWrapper}>
             <div className={s.price}>{price} {currencyCode}</div>
             {/* TODO: */}

src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx

@@ -1,15 +1,15 @@
-import { ProductCard } from '@commerce/types/product'
-import React from 'react'
+import { FacetValue } from '@framework/schema'
+import React, { useMemo } from 'react'
 import { ResponsiveType } from 'react-multi-carousel'
 import { CarouselCommon, FeaturedProductCard, HeadingCommon } from 'src/components/common'
 import { FeaturedProductCardProps } from 'src/components/common/FeaturedProductCard/FeaturedProductCard'
+import { getFacetNamesFromIds } from 'src/utils/funtion.utils'
 import s from "./FeaturedProductsCarousel.module.scss"
 interface FeaturedProductsCarouselProps {
-  title?: string,
-  data: ProductCard[]
+  data: FeaturedProductCardProps[]
+  featuredFacetsValue: FacetValue[],
 }
 
-
 const RESPONSIVE: ResponsiveType = {
   hugeScreen: {
     breakpoint: { max: 9999, min: 1500 },
@@ -62,13 +62,26 @@ interface FeaturedProductsCarouselProps {
   },
 }
 
-const FeaturedProductsCarousel = ({title="Featured Products", data}: FeaturedProductsCarouselProps) => {
+const FeaturedProductsCarousel = ({ data, featuredFacetsValue }: FeaturedProductsCarouselProps) => {
+  const featuredProducts = useMemo(() => {
+    return data.map(item => {
+      return {
+        ...item,
+        subText: getFacetNamesFromIds(featuredFacetsValue, item.facetValueIds)
+      }
+    })
+  }, [data, featuredFacetsValue])
   return (
     <div className={s.warpper}>
       <div className={s.heading}>
-            <HeadingCommon>{title}</HeadingCommon>
+        <HeadingCommon>Featured Products</HeadingCommon>
       </div>
-            <CarouselCommon<FeaturedProductCardProps> data={data} Component={FeaturedProductCard} itemKey="featured-products" responsive={RESPONSIVE}/>
+      <CarouselCommon<FeaturedProductCardProps>
+        data={featuredProducts}
+        defaultComponentProps={featuredFacetsValue}
+        Component={FeaturedProductCard}
+        itemKey="featured-products"
+        responsive={RESPONSIVE} />
     </div>
   )
 }

src/utils/funtion.utils.ts

@@ -36,3 +36,18 @@ export function getAllFeaturedFacetId(facets: Facet[]) {
 
   return rs
 }
+
+export function getAllFeaturedFacetValue(facets: Facet[]) {
+  const featuredFacet = facets.find((item: Facet) => item.code === CODE_FACET_FEATURED)
+  return featuredFacet?.values
+}
+
+export function getFacetNamesFromIds(facets: FacetValue[], ids?: string[]): string {
+  if (!ids || ids?.length === 0) {
+    return ''
+  }
+
+  const facetItems = facets.filter((item: FacetValue) => ids.includes(item.id))
+  const names = facetItems.map((item: FacetValue) => item.name)
+  return names.join(", ")
+}