Merge branch 'release-stable' of https://github.com/KieIO/grocery-vercel-commerce into feature/m1-get-product-detail

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,39 +1,55 @@
+import { ProductCard } from '@commerce/types/product'
+import { Facet, FacetValue } from '@framework/schema'
+import Link from 'next/link'
 import React from 'react'
-import { FeaturedProductProps } from 'src/utils/types.utils'
-import s from './FeaturedProductCard.module.scss'
-import { LANGUAGE } from '../../../utils/language.utils'
-import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
-import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import { ROUTE } from 'src/utils/constanst.utils'
 import { ImgWithLink } from '..'
-export interface FeaturedProductCardProps extends FeaturedProductProps {
-  buttonText?: string
+import { LANGUAGE } from '../../../utils/language.utils'
+import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
+import s from './FeaturedProductCard.module.scss'
+export interface FeaturedProductCardProps extends ProductCard {
+  buttonText?: string,
+  subText?: string,
 }
 
 const FeaturedProductCard = ({
   imageSrc,
-  title,
-  subTitle,
+  name,
+  slug,
   price,
-  originPrice,
+  subText,
+  currencyCode,
   buttonText = LANGUAGE.BUTTON_LABEL.BUY_NOW,
 }: FeaturedProductCardProps) => {
+  
+  
   return (
     <div className={s.featuredProductCardWarpper}>
       <div className={s.left}>
-        <ImgWithLink src={imageSrc} alt={title}/>
+        <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+          <a>
+            <ImgWithLink src={imageSrc} alt={name} />
+          </a>
+        </Link>
       </div>
       <div className={s.right}>
         <div className={s.rightTop}>
-          <div className={s.title}>{title}</div>
-          <div className={s.subTitle}>{subTitle}</div>
+          <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+            <a>
+              <div className={s.title}>{name}</div>
+            </a>
+          </Link>
+          <div className={s.subTitle}>{subText}</div>
           <div className={s.priceWrapper}>
-            <div className={s.price}>{price} </div>
-            <div className={s.originPrice}>{originPrice} </div>
+            <div className={s.price}>{price} {currencyCode}</div>
+            {/* TODO: */}
+            {/* <div className={s.originPrice}>{originPrice} </div> */}
           </div>
         </div>
         <div className={s.buttonWarpper}>
           <div className={s.icon}>
-            <ButtonIconBuy size='default'/>
+            <ButtonIconBuy size='default' />
           </div>
           <div className={s.button}>
             <ButtonCommon>{buttonText}</ButtonCommon>

src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { memo } from 'react'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
+import { useGetAllCollection } from 'src/components/hooks/collection'
 import { ProductFeature, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import HeaderNoti from './HeaderNoti/HeaderNoti'
 import s from './HeaderSubMenu.module.scss'
@@ -30,39 +31,18 @@ const MENU = [
     },
 ]
 
-// note: hard code, remove later
-const CATEGORY = [
-    {
-        name: 'Veggie',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-    },
-    {
-        name: 'Seafood',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
-    },
-    {
-        name: 'Frozen',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-    },
-    {
-        name: 'Coffee Bean',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
-    },
-    {
-        name: 'Sauce',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
-    },
-]
+
 
 const HeaderSubMenu = memo(() => {
     const router = useRouter()
+    const {collections} = useGetAllCollection();
 
     return (
         <section className={s.headerSubMenu}>
             <ul className={s.menu}>
                 {/* todo: handle active item */}
                 <li>
-                    <MenuDropdown options={CATEGORY} align="left">Categories</MenuDropdown>
+                    <MenuDropdown options={collections?.items ?? []} align="left">Categories</MenuDropdown>
                 </li>
                 {
                     MENU.map(item => <li key={item.name}

src/components/common/ImgWithLink/ImgWithLink.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import s from './ImgWithLink.module.scss'
 import Image from 'next/image'
-import { BLUR_DATA_IMG } from 'src/utils/constanst.utils'
+import { BLUR_DATA_IMG, DEFAULT_IMG } from 'src/utils/constanst.utils'
 
 export interface ImgWithLinkProps {
     src: string,
@@ -12,7 +12,7 @@ export interface ImgWithLinkProps {
 const ImgWithLink = ({ src, alt, blurDataURL = BLUR_DATA_IMG }: ImgWithLinkProps) => {
     return (
         <div className={s.imgWithLink}>
-            <Image src={src} alt={alt}
+            <Image src={src || DEFAULT_IMG.src} alt={alt}
                 layout="fill"
                 className={s.imgWithLink}
                 placeholder="blur"

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/ModalAuthenticate/components/FormRegister/FormRegister.tsx

@@ -48,7 +48,7 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
 
   const onSignupCallBack = (isSuccess: boolean, message?: string) => {
     if (isSuccess) {
-      showMessageSuccess("Create account successfully. Please verify your email to login.")
+      showMessageSuccess("Create account successfully. Please verify your email to login.", 15000)
     } else {
       showMessageError(message || LANGUAGE.MESSAGE.ERROR)
     }
@@ -71,7 +71,7 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
             validationSchema={DisplayingErrorMessagesSchema}
             onSubmit={onSignup}
           >
-            {({ errors, touched }) => (
+            {({ errors, touched, isValid, submitForm }) => (
               <Form className="u-form">
                 <div className="body">
                   <InputFiledInForm
@@ -93,6 +93,7 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
                         ? errors.password.toString()
                         : ''
                     }
+                    onEnter={isValid ? submitForm : undefined}
                   />
                   <div className={styles.passwordNote}>
                     Must contain 8 characters with at least 1 uppercase and 1

src/components/common/ProductCard/ProductCard.tsx

@@ -1,8 +1,8 @@
+import { ProductCard } from '@commerce/types/product'
 import Link from 'next/link'
 import React from 'react'
 import { IconBuy } from 'src/components/icons'
 import { ROUTE } from 'src/utils/constanst.utils'
-import { ProductProps } from 'src/utils/types.utils'
 import { ImgWithLink } from '..'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
@@ -11,16 +11,18 @@ import LabelCommon from '../LabelCommon/LabelCommon'
 import s from './ProductCard.module.scss'
 import ProductNotSell from './ProductNotSell/ProductNotSell'
 
-export interface ProductCardProps extends ProductProps {
+export interface ProductCardProps extends ProductCard {
   buttonText?: string
   isSingleButton?: boolean,
 }
 
-const ProductCard = ({
-  category,
+const ProductCardComponent = ({
+  collection,
   name,
+  slug,
   weight,
   price,
+  currencyCode,
   buttonText = 'Buy Now',
   imageSrc,
   isNotSell,
@@ -35,24 +37,31 @@ const ProductCard = ({
   return (
     <div className={s.productCardWarpper}>
       <div className={s.cardTop}>
-        <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
-          <div className={s.productImage}>
-            <ImgWithLink src={imageSrc} alt={name}/>
-          </div>
+        <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+          <a>
+            <div className={s.productImage}>
+              <ImgWithLink src={imageSrc} alt={name}/>
+            </div>
+          </a>
         </Link>
+        {
+          collection &&
         <div className={s.productLabel}>
-          <LabelCommon shape="half">{category}</LabelCommon>
+          <LabelCommon shape="half">{collection}</LabelCommon>
         </div>
+        }
       </div>
       <div className={s.cardMid}>
         <div className={s.cardMidTop}>
-          <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
-            <div className={s.productname}>{name} </div>
+          <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+            <a>
+              <div className={s.productname}>{name} </div>
+            </a>
           </Link>
           <div className={s.productWeight}>{weight}</div>
         </div>
         <div className={s.cardMidBot}>
-          <div className={s.productPrice}>{price}</div>
+          <div className={s.productPrice}>{price} {currencyCode}</div>
           <div className={s.wishList}>
             <ItemWishList />
           </div>
@@ -80,4 +89,4 @@ const ProductCard = ({
   )
 }
 
-export default ProductCard
+export default ProductCardComponent

src/components/hooks/collection/index.ts

@@ -0,0 +1 @@
+export {default as useGetAllCollection} from "./useGetAllCollection"

src/components/hooks/collection/useGetAllCollection.tsx

@@ -0,0 +1,12 @@
+import { GetCollectionsQuery } from '@framework/schema';
+import { getCollectionsNameQuery } from '@framework/utils/queries/get-collections-query';
+import gglFetcher from 'src/utils/gglFetcher';
+import useSWR from 'swr';
+
+
+const useGetAllCollection =  () => {
+    const { data, ...rest } =  useSWR<GetCollectionsQuery>([getCollectionsNameQuery], gglFetcher)
+    return { collections: data?.collections, ...rest }
+}
+
+export default useGetAllCollection;

src/components/hooks/facets/index.ts

@@ -0,0 +1,3 @@
+export { default as useFacets } from './useFacets'
+
+

src/components/hooks/facets/useFacets.tsx

@@ -0,0 +1,11 @@
+import { GetAllFacetsQuery, QueryFacetsArgs } from '@framework/schema'
+import { getAllFacetsQuery } from '@framework/utils/queries/get-all-facets-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useFacets = (options?: QueryFacetsArgs) => {
+  const { data, isValidating, ...rest } = useSWR<GetAllFacetsQuery>([getAllFacetsQuery, options], gglFetcher)
+  return { items: data?.facets.items, totalItems: data?.facets.totalItems, loading: isValidating, ...rest }
+}
+
+export default useFacets

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/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx

@@ -1,92 +1,89 @@
-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: FeaturedProductCardProps[]
+  featuredFacetsValue: FacetValue[],
 }
 
-const dataDemo:FeaturedProductCardProps[] = [{
-    title: "Sale 25% Coffee Bean",
-    subTitle: "50 first Orders within a day",
-    originPrice: "$20.00",
-    price: "$14.00",
-    imageSrc: "https://user-images.githubusercontent.com/76099413/133043628-db7813f9-1bb7-4ee1-b028-dc4295563494.png"
-},{
-    title: "Sale 20% Fruits",
-    subTitle: "50 first Orders within a day",
-    originPrice: "$20.00",
-    price: "$14.00",
-    imageSrc: "https://user-images.githubusercontent.com/76099413/133043630-07a353b9-573d-4c1d-b1de-2c932e3f14f7.png"
-},{
-    title: "Sale 25% Coffee Bean",
-    subTitle: "50 first Orders within a day",
-    originPrice: "$20.00",
-    price: "$14.00",
-    imageSrc: "https://user-images.githubusercontent.com/76099413/133043633-954c105b-c703-4e5c-8f5f-7943ad633ff0.png"
-}]
-  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"}: FeaturedProductsCarouselProps) => {
-    return (
-        <div className={s.warpper}>
-           <div className={s.heading}>
-            <HeadingCommon>{title}</HeadingCommon>
-          </div>
-            <CarouselCommon<FeaturedProductCardProps> data={dataDemo} 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/components/modules/home/FreshProducts/FreshProducts.tsx

@@ -0,0 +1,47 @@
+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 { 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 => {
+      return {
+        ...item,
+        collection: getCategoryNameFromCollectionId(collections, item.collectionIds ? item.collectionIds[0] : undefined)
+      }
+    })
+  }, [data, collections])
+
+  if (data.length === 0) {
+    return null
+  }
+  return (
+    <div className="w-full">
+      <CollectionCarcousel
+        type="highlight"
+        data={dataWithCategory}
+        itemKey="product-1"
+        title="Fresh Products Today"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        viewAllLink={`${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=${OPTION_ALL}`}
+      />
+    </div>
+  )
+}
+
+export default FreshProducts

src/components/modules/home/HomeCollection/HomeCollection.tsx

@@ -95,14 +95,6 @@ const dataTest = [
 const HomeCollection = (props: HomeCollectionProps) => {
   return (
     <div className="w-full">
-      <CollectionCarcousel
-        type="highlight"
-        data={dataTest}
-        itemKey="product-1"
-        title="Fresh Products Today"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
       <CollectionCarcousel
         data={dataTest}
         itemKey="product-2"

src/components/modules/home/index.ts

@@ -4,6 +4,7 @@ export { default as HomeCategories } from './HomeCategories/HomeCategories'
 export { default as HomeCTA } from './HomeCTA/HomeCTA'
 export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe'
 export { default as HomeVideo } from './HomeVideo/HomeVideo'
+export { default as FreshProducts } from './FreshProducts/FreshProducts'
 export { default as HomeCollection } from './HomeCollection/HomeCollection'
 export { default as HomeRecipe } from './HomeRecipe/HomeRecipe'
 export { default as FeaturedProductsCarousel } from './FeaturedProductsCarousel/FeaturedProductsCarousel'

src/utils/constanst.utils.ts

@@ -1,41 +1,44 @@
+import DefaultImg from '../../public/assets/images/default_img.jpg'
+
 export const BLUR_DATA_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8fBIAApUBruKYvzsAAAAASUVORK5CYII='
+export const DEFAULT_IMG = DefaultImg
 
 export const SOCIAL_LINKS = {
-    FB: 'FB',
-    TWITTER: 'TWITTER',
-    YOUTUBE: 'YOUTUBE',
-    IG: 'IG',
+  FB: 'FB',
+  TWITTER: 'TWITTER',
+  YOUTUBE: 'YOUTUBE',
+  IG: 'IG',
 }
 
 export const ROUTE = {
-    HOME: '/',
-    ABOUT: '/about',
-    ACCOUNT: '/account',
+  HOME: '/',
+  ABOUT: '/about',
+  ACCOUNT: '/account',
 
-    PRODUCTS: '/products',
-    PRODUCT_DETAIL: '/product',
-    
-    BLOGS: '/blogs',
-    BLOG_DETAIL: '/blog',
+  PRODUCTS: '/products',
+  PRODUCT_DETAIL: '/product',
 
-    RECIPES: '/recipes',
-    RECIPE_DETAIL: '/recipe',
+  BLOGS: '/blogs',
+  BLOG_DETAIL: '/blog',
 
-    NOTIFICATION: '/notifications',
-    BUSSINESS: '/bussiness',
-    CONTACT: '/contact',
-    CHECKOUT: '/checkout',
-    FAQ: '/faq',
-    CUSTOMER_SERVICE: '/customer-service',
-    TERM_CONDITION: '/term-condition',
-    PRIVACY_POLICY: '/privacy-policy',
-    FORGOT_PASSWORD: '/forgot-password'
+  RECIPES: '/recipes',
+  RECIPE_DETAIL: '/recipe',
+
+  NOTIFICATION: '/notifications',
+  BUSSINESS: '/bussiness',
+  CONTACT: '/contact',
+  CHECKOUT: '/checkout',
+  FAQ: '/faq',
+  CUSTOMER_SERVICE: '/customer-service',
+  TERM_CONDITION: '/term-condition',
+  PRIVACY_POLICY: '/privacy-policy',
+  FORGOT_PASSWORD: '/forgot-password'
 }
 
 export const ACCOUNT_TAB = {
-    CUSTOMER_INFO: '',
-    ORDER: 'orders',
-    FAVOURITE: 'wishlist',
+  CUSTOMER_INFO: '',
+  ORDER: 'orders',
+  FAVOURITE: 'wishlist',
 }
 
 export const LOCAL_STORAGE_KEY = {
@@ -43,93 +46,99 @@ export const LOCAL_STORAGE_KEY = {
 }
 
 export const QUERY_KEY = {
-    TAB: 'tab',
-    CATEGORY: 'category',
-    BRAND: 'brand',
-    FEATURED: 'feature',
-    SORTBY:'sortby',
-    RECIPES:'recipes'
+  TAB: 'tab',
+  CATEGORY: 'category',
+  BRAND: 'brand',
+  FEATURED: 'feature',
+  SORTBY: 'sortby',
+  RECIPES: 'recipes'
 }
 
 export enum ProductFeature {
-    BestSellers = 'Best Sellers',
-    Sales = 'Sales',
-    NewItem = 'New Item',
-    Viewed = 'Viewed',
+  BestSellers = 'Best Sellers',
+  Sales = 'Sales',
+  NewItem = 'New Item',
+  Viewed = 'Viewed',
 }
 
 export const KEY = {
-    ENTER: 'Enter',
+  ENTER: 'Enter',
 }
 
 export const OPTION_ALL = 'all';
-export const DEFAULT_PAGE_SIZE=20;
+export const DEFAULT_PAGE_SIZE = 20;
 
 
 export const CATEGORY = [
-    {
-      name: 'All',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=${OPTION_ALL}`,
-    },
-    {
-      name: 'Veggie',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=veggie`,
-    },
-    {
-      name: 'Seafood',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=seafood`,
-    },
-    {
-      name: 'Frozen',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=frozen`,
-    },
-    {
-      name: 'Coffee Bean',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=coffee_bean`,
-    },
-    {
-      name: 'Sauce',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=sauce`,
-    },
-  ]
-  
-  export  const BRAND = [
-    {
-      name: 'Maggi',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=maggi`,
-    },
-    {
-      name: 'Chomilex',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chomilex`,
-    },
-    {
-      name: 'Chinsu',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chinsu`,
-    },
-  ]
-  
-export const FEATURED = [
-    {
-      name: 'Best Sellers',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=best_sellers`,
-    },
-    {
-      name: 'Sales',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=sales`,
-    },
-    {
-      name: 'New Item',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=new_item`,
-    },
-    {
-      name: 'Viewed',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=viewed`,
-    },
-  ]
-  
-export const DEFAULT_BLOG_PAGE_SIZE=6;
+  {
+    name: 'All',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=${OPTION_ALL}`,
+  },
+  {
+    name: 'Veggie',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=veggie`,
+  },
+  {
+    name: 'Seafood',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=seafood`,
+  },
+  {
+    name: 'Frozen',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=frozen`,
+  },
+  {
+    name: 'Coffee Bean',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=coffee_bean`,
+  },
+  {
+    name: 'Sauce',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=sauce`,
+  },
+]
 
-export const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
+export const BRAND = [
+  {
+    name: 'Maggi',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=maggi`,
+  },
+  {
+    name: 'Chomilex',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chomilex`,
+  },
+  {
+    name: 'Chinsu',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chinsu`,
+  },
+]
+
+export const CODE_FACET_FEATURED = 'featured'
+export const CODE_FACET_DISCOUNT = 'discount'
+export const CODE_FACET_FEATURED_VARIANT = {
+  FRESH: 'fresh',
+}
+
+export const FEATURED = [
+  {
+    name: 'Best Sellers',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=best_sellers`,
+  },
+  {
+    name: 'Sales',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=sales`,
+  },
+  {
+    name: 'New Item',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=new_item`,
+  },
+  {
+    name: 'Viewed',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=viewed`,
+  },
+]
+
+export const DEFAULT_BLOG_PAGE_SIZE = 6;
+
+export const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
 
 export const STATE_OPTIONS = [
   {
@@ -141,3 +150,4 @@ export const STATE_OPTIONS = [
     value: 'Hà Nội',
   },
 ]
+

src/utils/funtion.utils.ts

@@ -1,11 +1,63 @@
+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
+  return window.innerWidth < 768
 }
 
-export function removeItem<T>(arr: Array<T>, value: T): Array<T> { 
-    const index = arr.indexOf(value);
-    if (index > -1) {
-      arr.splice(index, 1);
-    }
-    return [...arr];
-}
+export function removeItem<T>(arr: Array<T>, value: T): Array<T> {
+  const index = arr.indexOf(value);
+  if (index > -1) {
+    arr.splice(index, 1);
+  }
+  return [...arr];
+}
+
+function findFacetByCode(code: string, facets?: Facet) {
+  return facets?.values.find((item: FacetValue) => item.code === code)
+}
+
+export function getFeaturedFacetId(facets: Facet[]) {
+  const featuredFacet = facets.find((item: Facet) => item.code === CODE_FACET_FEATURED)
+  return featuredFacet?.id
+}
+
+export function getFreshFacetId(facets: Facet[]) {
+  const featuredFacet = facets.find((item: Facet) => item.code === CODE_FACET_FEATURED)
+  const freshFacetValue = findFacetByCode(CODE_FACET_FEATURED_VARIANT.FRESH, featuredFacet)
+
+  return freshFacetValue?.id
+}
+
+export function getAllFacetValueIdsByParentCode(facets: Facet[], code: string) {
+  const featuredFacet = facets.find((item: Facet) => item.code === code)
+  const rs = featuredFacet?.values.map((item: FacetValue) => item.id)
+
+  return rs || []
+}
+
+export function getAllFacetValuesForFeatuedProducts(facets: Facet[]) {
+  const facetsRs = facets.filter((item: Facet) => item.code === CODE_FACET_FEATURED || item.code === CODE_FACET_DISCOUNT)
+  let rs = [] as FacetValue[]
+  facetsRs.map((item: Facet) => {
+    rs = rs.concat(item.values)
+    return null
+  })
+  return rs
+}
+
+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(", ")
+}
+
+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,
+}