crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
quangnhan
2021-09-13 10:03:52 +07:00
parent 206b536a97 d99abb51e9
commit 50ff62109f
11 changed files with 43 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
next-env.d.ts vendored
View File

@@ -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.

2
package.json
View File

@@ -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",

12
pages/_error.tsx
View File

@@ -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

13
pages/account.tsx Normal file
View File

@@ -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;

15
src/components/common/Header/Header.tsx
View File

@@ -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'
@@ -18,6 +19,15 @@ const Header = memo(({toggleFilter}:props) => {
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} />
</>
)
})

5
src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
View File

@@ -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>

17
src/components/common/Layout/Layout.tsx
View File

@@ -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>

5
src/components/common/ProductCard/ProductCard.tsx
View File

@@ -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>

2
src/components/modules/account/AccountNavigation/AccountNavigation.tsx
View File

@@ -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 {

2
src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
View File

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

2
src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
View File

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