✨ 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,76 +1,89 @@
-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 { 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 },
+    items: 2.25,
+    slidesToSlide: 1, // optional, default to 1.
+  },
+  largeScreen: {
+    breakpoint: { max: 1500, min: 1440 },
+    items: 2.075,
+    slidesToSlide: 1, // optional, default to 1.
+  },
+  largeDesktop: {
+    breakpoint: { max: 1440, min: 1280 },
+    items: 1.75,
+    slidesToSlide: 1, // optional, default to 1.
+  },
+  desktop: {
+    breakpoint: { max: 1280, min: 1148 },
+    items: 1.5,
+    slidesToSlide: 1, // optional, default to 1.
+  },
+  smallDesktop: {
+    breakpoint: { max: 1148, min: 1024 },
+    items: 1.375,
+    slidesToSlide: 1, // optional, default to 1.
+  },
+  lap: {
+    breakpoint: { max: 1024, min: 968 },
+    items: 1.7,
+  },
+  tablet: {
+    breakpoint: { max: 968, min: 768 },
+    items: 1.075,
+  },
+  smallTablet: {
+    breakpoint: { max: 768, min: 640 },
+    items: 1.25,
+  },
+  largeMobile: {
+    breakpoint: { max: 640, min: 400 },
+    items: 1.275,
+  },
+  mobile: {
+    breakpoint: { max: 400, min: 300 },
+    items: 1.1,
+  },
+  smallMobile: {
+    breakpoint: { max: 300, min: 0 },
+    items: 1,
+  },
+}
 
-  const RESPONSIVE: ResponsiveType = {
-    hugeScreen: {
-      breakpoint: { max: 9999, min: 1500 },
-      items: 2.25,
-      slidesToSlide: 1, // optional, default to 1.
-    },
-    largeScreen: {
-      breakpoint: { max: 1500, min: 1440 },
-      items: 2.075,
-      slidesToSlide: 1, // optional, default to 1.
-    },
-    largeDesktop: {
-      breakpoint: { max: 1440, min: 1280 },
-      items: 1.75,
-      slidesToSlide: 1, // optional, default to 1.
-    },
-    desktop: {
-      breakpoint: { max: 1280, min: 1148 },
-      items: 1.5,
-      slidesToSlide: 1, // optional, default to 1.
-    },
-    smallDesktop: {
-      breakpoint: { max: 1148, min: 1024 },
-      items: 1.375,
-      slidesToSlide: 1, // optional, default to 1.
-    },
-    lap: {
-      breakpoint: { max: 1024, min: 968 },
-      items: 1.7,
-    },
-    tablet: {
-      breakpoint: { max: 968, min: 768 },
-      items: 1.075,
-    },
-    smallTablet: {
-      breakpoint: { max: 768, min: 640 },
-      items: 1.25,
-    },
-    largeMobile: {
-      breakpoint: { max: 640, min: 400 },
-      items: 1.275,
-    },
-    mobile: {
-      breakpoint: { max: 400, min: 300 },
-      items: 1.1,
-    },
-    smallMobile: {
-      breakpoint: { max: 300, min: 0 },
-      items: 1,
-    },
-  }
-
-const FeaturedProductsCarousel = ({title="Featured Products", data}: FeaturedProductsCarouselProps) => {
-    return (
-        <div className={s.warpper}>
-           <div className={s.heading}>
-            <HeadingCommon>{title}</HeadingCommon>
-          </div>
-            <CarouselCommon<FeaturedProductCardProps> data={data} Component={FeaturedProductCard} itemKey="featured-products" responsive={RESPONSIVE}/>
-        </div>
-    )
+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>Featured Products</HeadingCommon>
+      </div>
+      <CarouselCommon<FeaturedProductCardProps>
+        data={featuredProducts}
+        defaultComponentProps={featuredFacetsValue}
+        Component={FeaturedProductCard}
+        itemKey="featured-products"
+        responsive={RESPONSIVE} />
+    </div>
+  )
 }
 
 export default FeaturedProductsCarousel

src/utils/funtion.utils.ts

@@ -35,4 +35,19 @@ export function getAllFeaturedFacetId(facets: Facet[]) {
   const rs = featuredFacet?.values.map((item: FacetValue) => item.id)
 
   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(", ")
 }