fix conflict

pages/index.tsx

@@ -1,19 +1,37 @@
+import { ProductCard } from '@commerce/types/product';
+import { ProductVariables } from '@framework/api/operations/get-all-products';
+import { Collection, FacetValue } from '@framework/schema';
+import commerce from '@lib/api/commerce';
+import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
-import { FeaturedProductsCarousel, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+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 { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED } from 'src/utils/constanst.utils';
+import { getAllFacetValueIdsByParentCode, getAllFacetValuesForFeatuedProducts, getAllPromies, getFreshFacetId } from 'src/utils/funtion.utils';
+import { PromiseWithKey } from 'src/utils/types.utils';
 
-export default function Home() {
+interface Props {
+  featuredAndDiscountFacetsValue: FacetValue[],
+  freshProducts: ProductCard[],
+  featuredProducts: ProductCard[],
+  collections: Collection[]
+
+}
+export default function Home({ featuredAndDiscountFacetsValue,
+  freshProducts, featuredProducts,
+  collections }: Props) {
   return (
     <>
       <HomeBanner />
       <HomeFeature />
       <HomeCategories />
+      <FreshProducts data={freshProducts} collections={collections} />
       <HomeCollection />
       <HomeVideo />
-      <HomeSpice/>
-      <FeaturedProductsCarousel/>
+      <HomeSpice />
+      <FeaturedProductsCarousel data={featuredProducts} featuredFacetsValue={featuredAndDiscountFacetsValue} />
       <HomeCTA />
-      <HomeRecipe />  
+      <HomeRecipe />
       <HomeSubscribe />
 
       {/* // todo: uncomment
@@ -22,4 +40,83 @@ export default function Home() {
   )
 }
 
+
+export async function getStaticProps({
+  preview,
+  locale,
+  locales,
+}: GetStaticPropsContext) {
+  const config = { locale, locales }
+  let promisesWithKey = [] as PromiseWithKey[]
+  let props = {} as any
+
+  const { facets } = await commerce.getAllFacets({
+    variables: {},
+    config,
+    preview,
+  })
+  props.featuredAndDiscountFacetsValue = getAllFacetValuesForFeatuedProducts(facets)
+  
+  // fresh products
+  const freshProductvariables: ProductVariables = {}
+  const freshFacetId = getFreshFacetId(facets)
+  if (freshFacetId) {
+    freshProductvariables.facetValueIds = [freshFacetId]
+    const freshProductsPromise = commerce.getAllProducts({
+      variables: freshProductvariables,
+      config,
+      preview,
+    })
+    promisesWithKey.push({ key: 'freshProducts', promise: freshProductsPromise, keyResult: 'products' })
+  } else {
+    props.freshProducts = []
+  }
+
+
+  // featured products
+  const allFeaturedFacetIds = getAllFacetValueIdsByParentCode(facets, CODE_FACET_FEATURED)
+  const allDiscountFacetIds = getAllFacetValueIdsByParentCode(facets, CODE_FACET_DISCOUNT)
+  const facetValueIdsForFeaturedProducts = [...allFeaturedFacetIds, ...allDiscountFacetIds]
+  
+  if (facetValueIdsForFeaturedProducts.length > 0) {
+    const featuredProductsPromise = commerce.getAllProducts({
+      variables: {
+        facetValueIds: facetValueIdsForFeaturedProducts
+      },
+      config,
+      preview,
+    })
+    promisesWithKey.push({ key: 'featuredProducts', promise: featuredProductsPromise, keyResult: 'products'  })
+  } else {
+    props.featuredProducts = []
+  }
+
+  // collection
+  const collectionsPromise = commerce.getAllCollections({
+    variables: {},
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections'  })
+
+
+  try {
+    const promises = getAllPromies(promisesWithKey)
+    const rs = await Promise.all(promises)
+
+    promisesWithKey.map((item, index) => {
+      props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index]
+      return null
+    })
+
+    return {
+      props,
+      revalidate: 60,
+    }
+  } catch (err) {
+
+  }
+}
+
+
 Home.Layout = Layout

pages/product/[slug].tsx

@@ -1,17 +1,114 @@
 
+import { Product } from '@framework/schema'
+import commerce from '@lib/api/commerce'
+import { GetStaticPathsContext, GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import { Layout, RecipeDetail, RecommendedRecipes, RelevantBlogPosts } from 'src/components/common'
 import { ProductInfoDetail, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
+import { MAX_PRODUCT_CAROUSEL, REVALIDATE_TIME } from 'src/utils/constanst.utils'
 import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
+import { getAllPromies } from 'src/utils/funtion.utils'
+import { PromiseWithKey } from 'src/utils/types.utils'
+
+export default function Slug({ product, relevantProducts, collections }: InferGetStaticPropsType<typeof getStaticProps>) {
 
-export default function Slug() {
   return <>
-    <ProductInfoDetail />
+    <ProductInfoDetail productDetail={product} collections={collections}/>
     <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
-    <ReleventProducts />
+    <ReleventProducts data={relevantProducts} collections={collections}/>
     <ViewedProducts />
-    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="relevent blog posts"/>
+    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="relevent blog posts" />
   </>
 }
 
+export async function getStaticProps({
+  params,
+  locale,
+  locales,
+  preview,
+}: GetStaticPropsContext<{ slug: string }>) {
+  const config = { locale, locales }
+  let promisesWithKey = [] as PromiseWithKey[]
+  let props = {} as any
+
+  const product = await commerce.getProduct({
+    variables: { slug: params!.slug },
+    config,
+    preview,
+  })
+  props.product = product
+
+
+  if (!product) {
+    throw new Error(`Product with slug '${params!.slug}' not found`)
+  }
+
+  // relevant product (filter by product detail's facetIds)
+  const relevantFacetIds = product.facetValueIds
+  if (relevantFacetIds && relevantFacetIds.length > 0) {
+    const relevantProductsPromise = commerce.getAllProducts({
+      variables: {
+        first: MAX_PRODUCT_CAROUSEL,
+        facetValueIds: relevantFacetIds,
+      },
+      config,
+      preview,
+    })
+    promisesWithKey.push({ key: 'relevantProducts', promise: relevantProductsPromise, keyResult: 'products' })
+  } else {
+    props.relevantProducts = []
+  }
+
+
+  // collection
+  const collectionsPromise = commerce.getAllCollections({
+    variables: {},
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' })
+
+
+  try {
+    const promises = getAllPromies(promisesWithKey)
+    const rs = await Promise.all(promises)
+
+    promisesWithKey.map((item, index) => {
+      props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index]
+      return null
+    })
+
+    if (props.relevantProducts.length > 0) {
+      const relevantProducts = props.relevantProducts.filter((item: Product) => item.id !== product.id)
+      props.relevantProducts = relevantProducts
+    }
+
+    return {
+      props,
+      revalidate: REVALIDATE_TIME,
+    }
+  } catch (err) {
+    console.log('err: ', err)
+  }
+}
+
+
+export async function getStaticPaths({ locales }: GetStaticPathsContext) {
+  const { products } = await commerce.getAllProductPaths()
+
+  return {
+    paths: locales
+      ? locales.reduce<string[]>((arr, locale) => {
+        // Add a product path for every locale
+        products.forEach((product: any) => {
+          arr.push(`/${locale}/product${product.path}`)
+        })
+        return arr
+      }, [])
+      : products.map((product: any) => `/product${product.path}`),
+    fallback: 'blocking',
+  }
+}
+
+
 Slug.Layout = Layout

pages/products.tsx

@@ -1,19 +1,97 @@
+import { ProductCard } from '@commerce/types/product';
+import { Collection, Facet } from '@framework/schema';
+import commerce from '@lib/api/commerce';
+import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
 import { ViewedProducts } from 'src/components/modules/product-detail';
 import ProductListFilter from 'src/components/modules/product-list/ProductListFilter/ProductListFilter';
-import RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner';
-import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList';
+import { CODE_FACET_BRAND, CODE_FACET_FEATURED, DEFAULT_PAGE_SIZE, REVALIDATE_TIME } from 'src/utils/constanst.utils';
+import { getAllPromies } from 'src/utils/funtion.utils';
+import { PromiseWithKey, SortOrder } from 'src/utils/types.utils';
 import ProductListBanner from '../src/components/modules/product-list/ProductListBanner/ProductListBanner';
 
+interface Props {
+  facets: Facet[],
+  collections: Collection[],
+  productsResult: { products: ProductCard[], totalItems: number },
 
-export default function Products() {
+}
+
+export default function Products({ facets, collections, productsResult }: Props) {
   return (
     <>
       <ProductListBanner />
-      <ProductListFilter/>
-      <ViewedProducts/>
+      <ProductListFilter
+        collections={collections}
+        facets={facets}
+        products={productsResult.products}
+        total={productsResult.totalItems} />
+      <ViewedProducts />
     </>
   )
 }
 
+export async function getStaticProps({
+  preview,
+  locale,
+  locales,
+}: GetStaticPropsContext) {
+  const config = { locale, locales }
+  let promisesWithKey = [] as PromiseWithKey[]
+  let props = {} as any
+
+  const facetsPromise = commerce.getAllFacets({
+    variables: {
+      sort: {
+        code: SortOrder.Asc
+      },
+      filter: {
+        code: {
+          in: [CODE_FACET_FEATURED, CODE_FACET_BRAND]
+        }
+      }
+    },
+    config,
+    preview,
+  })
+
+  promisesWithKey.push({ key: 'facets', promise: facetsPromise, keyResult: 'facets' })
+
+  // collection
+  const collectionsPromise = commerce.getAllCollections({
+    variables: {},
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' })
+
+  // products
+  const productsPromise = commerce.getAllProducts({
+    variables: {
+      first: DEFAULT_PAGE_SIZE,
+    },
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'productsResult', promise: productsPromise })
+
+
+  try {
+    const promises = getAllPromies(promisesWithKey)
+    const rs = await Promise.all(promises)
+
+    promisesWithKey.map((item, index) => {
+      props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index]
+      return null
+    })
+
+    return {
+      props,
+      revalidate: REVALIDATE_TIME,
+    }
+  } catch (err) {
+
+  }
+}
+
 Products.Layout = Layout

pages/test.tsx

@@ -1,18 +1,34 @@
-import { Layout } from 'src/components/common'
-import { useMessage } from 'src/components/contexts'
-
-export default function Test() {
-  const { showMessageError } = useMessage()
-
-  const handleClick = () => {
-    showMessageError("Create account successfully")
-  }
+import commerce from '@lib/api/commerce';
+import { GetStaticPropsContext } from 'next';
+import { ProductCard } from '@commerce/types/product';
+import { Layout, ListProductCardSkeleton } from 'src/components/common';
 
+interface Props {
+  productDetail: ProductCard[],
+}
+export default function Home({ productDetail }: Props) {
   return (
     <>
-    <button onClick={handleClick}>Click me</button>
+      {/* <ListProductCardSkeleton /> */}
+      {/* <ListProductCardSkeleton count={1} /> */}
+      <ListProductCardSkeleton count={10} />
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab qui magnam debitis ex laborum laboriosam suscipit! Totam excepturi eum libero.
+      <ListProductCardSkeleton count={10} isWrap/>
     </>
   )
 }
 
-Test.Layout = Layout
+
+export async function getServerSideProps({
+  preview,
+  locale,
+  locales,
+}: GetStaticPropsContext) {
+
+  return {
+    props: {},
+  }
+}
+
+
+Home.Layout = Layout