Merge branch 'feature/m2-featured-product' of github.com:KieIO/grocery-vercel-commerce into feature/m2-add-product-to-cart

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

@@ -0,0 +1,148 @@
+import { Product } from '@framework/schema'
+import React from 'react'
+import { CollectionCarcousel } from '..'
+import image5 from '../../../../../public/assets/images/image5.png'
+import image6 from '../../../../../public/assets/images/image6.png'
+import image7 from '../../../../../public/assets/images/image7.png'
+import image8 from '../../../../../public/assets/images/image8.png'
+interface FreshProductsProps {
+  data: Product[]
+}
+const dataTest = [
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+]
+
+const FreshProducts = ({data}: FreshProductsProps) => {
+  return (
+    <div className="w-full">
+      <CollectionCarcousel
+        type="highlight"
+        data={data}
+        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"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+      <CollectionCarcousel
+        data={dataTest}
+        itemKey="product-3"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+      <CollectionCarcousel
+        data={dataTest}
+        itemKey="product-4"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+      <CollectionCarcousel
+        data={dataTest}
+        itemKey="product-5"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+      <CollectionCarcousel
+        data={dataTest}
+        itemKey="product-6"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+    </div>
+  )
+}
+
+export default FreshProducts

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

@@ -107,7 +107,15 @@ export const CATEGORY = [
       link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chinsu`,
     },
   ]
-  
+
+export const FACET = {
+  FEATURE: {
+    PARENT_NAME: 'Featured',
+    FRESH: 'Fresh',
+    BEST_SELLERS: 'Best seller'
+  }
+}
+
 export const FEATURED = [
     {
       name: 'Best Sellers',
@@ -141,3 +149,4 @@ export const STATE_OPTIONS = [
     value: 'Hà Nội',
   },
 ]
+

src/utils/funtion.utils.ts

@@ -1,11 +1,29 @@
+import { FacetValue } from './../../framework/vendure/schema.d';
+import { Facet } from "@commerce/types/facet";
+import { FACET } from "./constanst.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];
+}
+
+export function getFreshProductFacetId(facets: Facet[]) {
+  const featuredFacet = facets.find((item: Facet) => item.name === FACET.FEATURE.PARENT_NAME)
+  const freshFacetValue = featuredFacet?.values.find((item: FacetValue) => item.name === FACET.FEATURE.FRESH)
+
+  return freshFacetValue?.id
+}
+
+export function getAllFeaturedFacetId(facets: Facet[]) {
+  const featuredFacet = facets.find((item: Facet) => item.name === FACET.FEATURE.PARENT_NAME)
+  const rs = featuredFacet?.values.map((item: FacetValue) => item.id)
+
+  return rs
 }