Merge branch 'common' of https://github.com/KieIO/grocery-vercel-commerce into m6-quangnhanupdate

next-env.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -5,7 +5,7 @@
     "dev": "NODE_OPTIONS='--inspect' PORT=3005 next dev",
     "dev-windows": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "PORT=3005 next start",
     "analyze": "BUNDLE_ANALYZE=both yarn build",
     "prettier-fix": "prettier --write .",
     "find:unused": "npx next-unused",

pages/_error.tsx

@@ -1,12 +0,0 @@
-import { } from "src/components/modules/404"
-import { Layout } from 'src/components/common'
-import { ErrorPage } from "src/components/modules/error"
-
-export default function Error() {
-  return (
-    <div>
-        <ErrorPage/>
-    </div>
-  )
-}
-Error.Layout = Layout

pages/account.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Layout } from 'src/components/common';
+import { AccountPage } from 'src/components/modules/account';
+
+const Account = () => {
+    return (
+        <AccountPage/>
+    );
+};
+
+Account.Layout = Layout
+
+export default Account;

src/components/common/Header/Header.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useModalCommon } from 'src/components/hooks'
 import { isMobile } from 'src/utils/funtion.utils'
+import { CartDrawer } from '..'
 import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
 import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
 import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
@@ -10,14 +11,23 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
 import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
 import s from './Header.module.scss'
 interface props {
-    toggleFilter:()=>void
+    toggleFilter: () => void
 }
 
-const Header = memo(({toggleFilter}:props) => {
+const Header = memo(({ toggleFilter }: props) => {
     const headeFullRef = useRef<HTMLDivElement>(null)
     const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
     const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
     const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
+    const { visible: visibleCartDrawer, openModal: openCartDrawer, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
+
+    const toggleCart = () => {
+        if (visibleCartDrawer) {
+            closeCartDrawer()
+        } else {
+            openCartDrawer()
+        }
+    }
 
     const headerHeight = useMemo(() => {
         return headeFullRef.current?.offsetHeight
@@ -46,6 +56,7 @@ const Header = memo(({toggleFilter}:props) => {
                 <div className={s.menu}>
                     <HeaderMenu
                         toggleFilter={toggleFilter}
+                        toggleCart={toggleCart}
                         isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
@@ -60,6 +71,7 @@ const Header = memo(({toggleFilter}:props) => {
             })}>
                 <HeaderMenu isFull={isFullHeader}
                     toggleFilter={toggleFilter}
+                    toggleCart={toggleCart}
                     openModalAuthen={openModalAuthen}
                     openModalInfo={openModalInfo} />
             </div>
@@ -67,6 +79,9 @@ const Header = memo(({toggleFilter}:props) => {
             <HeaderSubMenuMobile />
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
             <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
+            <CartDrawer
+                visible={visibleCartDrawer}
+                onClose={closeCartDrawer} />
         </>
     )
 })

src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx

@@ -14,11 +14,12 @@ interface Props {
     openModalAuthen: () => void,
     openModalInfo: () => void,
     toggleFilter:() => void,
+    toggleCart:() => void,
 }
 
 const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
 
-const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter }: Props) => {
+const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
     const router = useRouter()
     const optionMenu = useMemo(() => [
         {
@@ -81,7 +82,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter
                     <MenuDropdown options={optionMenu} isHasArrow={false}><IconUser /></MenuDropdown>
                 </li>
                 <li>
-                    <button className={s.btnCart}>
+                    <button className={s.btnCart} onClick={toggleCart}>
                         <IconBuy />
                     </button>
                 </li>

src/components/common/Layout/Layout.tsx

@@ -1,10 +1,9 @@
 import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
-import { FilterProvider } from 'src/components/contexts/FilterContext'
 import { useModalCommon } from 'src/components/hooks'
 import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
-import { CartDrawer, CustomShapeSvg } from '..'
+import { CustomShapeSvg } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
 import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList'
@@ -18,18 +17,9 @@ interface Props {
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
-    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
     const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
-
+    
-    const toggle = () => {
-        if (visibleCartDrawer) {
-            closeCartDrawer()
-        } else {
-            openModal()
-        }
-    }
     const toggleFilter = () => {
-        console.log("click")
         if (visibleFilter) {
             closeFilter()
         } else {
@@ -41,11 +31,8 @@ const Layout: FC<Props> = ({ children }) => {
                 <div className={s.mainLayout}>
                     <Header toggleFilter={toggleFilter}/>
                     <main >{children}</main>
-                    <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
+                    
                     <CustomShapeSvg/>
-                    <CartDrawer
-                        visible={visibleCartDrawer}
-                        onClose={closeCartDrawer} />
 					<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>
                     <Footer />
                 </div>

src/components/common/ProductCard/ProductCard.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import React from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
 import { ProductProps } from 'src/utils/types.utils'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
@@ -31,7 +32,7 @@ const ProductCard = ({
   return (
     <div className={s.productCardWarpper}>
       <div className={s.cardTop}>
-        <Link href="#">
+        <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
           <div className={s.productImage}>
             <img src={imageSrc} alt="image" />
           </div>
@@ -42,7 +43,7 @@ const ProductCard = ({
       </div>
       <div className={s.cardMid}>
         <div className={s.cardMidTop}>
-          <Link href="#">
+          <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
             <div className={s.productname}>{name} </div>
           </Link>
           <div className={s.productWeight}>{weight}</div>

src/components/modules/account/AccountNavigation/AccountNavigation.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react"
 import s from './AccountNavigation.module.scss'
 
-import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
+import AccountNavigationItem from './components/AccountNavigationItem'
 import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane'
 
 interface AccountNavigationProps {

src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../styles/utilities';
+@import '../../../../../styles/utilities';
 
 .accountNavigationItem {
     width: 28rem;

src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject } from "react";
+import React from "react";
 import classNames from "classnames";
 import s from './AccountNavigationItem.module.scss'