✨ feat: (product list) all products, brands, collection, featured

:%s

src/components/common/MenuNavigation/MenuNavigation.tsx

@@ -1,15 +1,17 @@
 import classNames from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { ROUTE } from 'src/utils/constanst.utils'
 import s from './MenuNavigation.module.scss'
 
 interface Props {
     children?: any,
-    heading:string,
-    categories:{name:string,link:string}[]
+    heading: string,
+    linkPrefix: string,
+    categories: { name: string, slug?: string, code?: string }[]
 }
 
-const MenuNavigation = ({heading,categories}:Props)=> {
+const MenuNavigation = ({ heading, linkPrefix, categories }: Props) => {
     const router = useRouter()
 
     return (
@@ -19,8 +21,8 @@ const MenuNavigation = ({heading,categories}:Props)=> {
                 {
                     categories.map(item => <li key={item.name}
                        >
-                        <Link href={item.link}>
-                            <a className={classNames({ [s.active]: router.asPath === item.link})}>
+                        <Link href={`${linkPrefix}${item.slug || item.code}`}>
+                            <a className={classNames({ [s.active]: router.asPath === `${linkPrefix}${item.slug || item.code}`})}>
                                 {item.name}
                             </a>
                         </Link>

src/components/common/ProductList/ProductList.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { DEFAULT_PAGE_SIZE } from 'src/utils/constanst.utils'
 import PaginationCommon from '../PaginationCommon/PaginationCommon'
 import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
 import s from "./ProductList.module.scss"
@@ -15,13 +16,13 @@ const ProductList = ({data}: ProductListProps) => {
         <div className={s.wrapper}>
             <div className={s.list}>
                 {
-                    data.slice(currentPage*20,(currentPage+1)*20).map((product,index)=>{
+                    data.slice(currentPage*DEFAULT_PAGE_SIZE,(currentPage+1)* DEFAULT_PAGE_SIZE).map((product,index)=>{
                         return <ProductCard {...product} key={index}/>
                     })
                 }
             </div>
             <div className={s.pagination}>
-                <PaginationCommon total={data.length} pageSize={20} onChange={onPageChange}/>
+                <PaginationCommon total={data.length} pageSize={DEFAULT_PAGE_SIZE} onChange={onPageChange}/>
             </div>
         </div>
     )

src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx

@@ -1,12 +1,19 @@
+import { ProductCard } from '@commerce/types/product'
+import { Collection, Facet } from '@framework/schema'
 import React from 'react'
 import { HeadingCommon, ProductList, SelectCommon } from 'src/components/common'
 import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'
 import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation'
-import { BRAND, CATEGORY, FEATURED} from 'src/utils/constanst.utils'
-import {  PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data'
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import { PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data'
 import s from './ProductListFilter.module.scss'
 
-interface ProductListFilterProps {}
+interface ProductListFilterProps {
+  facets: Facet[]
+  collections: Collection[]
+  products: ProductCard[]
+
+}
 
 const BREADCRUMB = [
   {
@@ -29,11 +36,7 @@ const OPTIONSLECT = [
 	},
 ]
 
-const onModalClose = () => {
-	
-}
-
-const ProductListFilter = (props: ProductListFilterProps) => {
+const ProductListFilter = ({facets, collections, products}: ProductListFilterProps) => {
   return (
     <div className={s.warpper}>
       <div className={s.breadcrumb}>
@@ -41,9 +44,14 @@ const ProductListFilter = (props: ProductListFilterProps) => {
       </div>
       <div className={s.main}>
         <div className={s.categories}>
-          <MenuNavigation categories={CATEGORY} heading="Categories" />
-          <MenuNavigation categories={BRAND} heading="Brands" />
-          <MenuNavigation categories={FEATURED} heading="featured" />
+          <MenuNavigation categories={collections} heading="Categories" linkPrefix={`${ROUTE.PRODUCTS}?${QUERY_KEY.CATEGORY}=`}/>
+          {
+            facets.map(item => <MenuNavigation 
+              key={item.id} 
+              linkPrefix={`${ROUTE.PRODUCTS}/${item.code}=`}
+              categories={item.values} 
+              heading={item.name} />)
+          }
         </div>
 
         <div className={s.list}>
@@ -56,7 +64,7 @@ const ProductListFilter = (props: ProductListFilterProps) => {
               </div>
             </div>
           </div>
-          <ProductList data={PRODUCT_DATA_TEST_PAGE} />
+          <ProductList data={products} />
         </div>
       </div>
     </div>

src/utils/constanst.utils.ts

@@ -113,6 +113,7 @@ export const BRAND = [
 
 export const CODE_FACET_FEATURED = 'featured'
 export const CODE_FACET_DISCOUNT = 'discount'
+export const CODE_FACET_BRAND = 'brand'
 export const CODE_FACET_FEATURED_VARIANT = {
   FRESH: 'fresh',
 }

src/utils/types.utils.ts

@@ -34,18 +34,23 @@ export interface BlogProps {
 
 export interface CheckOutForm {
     name?: string
-    email?:string
+    email?: string
     address?: string
-    city?:string
-    state?:string
-    code?:number
-    phone?:number
-    method?:string
-    shipping_fee?:number
+    city?: string
+    state?: string
+    code?: number
+    phone?: number
+    method?: string
+    shipping_fee?: number
 }
 
 export type MouseAndTouchEvent = MouseEvent | TouchEvent
 
+export enum SortOrder {
+    Asc = 'ASC',
+    Desc = 'DESC',
+}
+
 export type filterContextType = {
     visible: boolean;
     open: () => void;