mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
✨ feat: show menu in mode login/ nit login
:%s
This commit is contained in:
@@ -1,15 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Layout } from 'src/components/common';
|
|
||||||
import { AccountSignIn } from 'src/components/modules/account';
|
|
||||||
|
|
||||||
const AccountNotLogin = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<AccountSignIn/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
AccountNotLogin.Layout = Layout
|
|
||||||
|
|
||||||
export default AccountNotLogin;
|
|
@@ -1,7 +1,6 @@
|
|||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
|
import React, { memo, useEffect, useRef, useState } from 'react'
|
||||||
import { useModalCommon } from 'src/components/hooks'
|
import { useModalCommon } from 'src/components/hooks'
|
||||||
import { CartDrawer } from '..'
|
|
||||||
import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
|
import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
|
||||||
import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
|
import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
|
||||||
import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
|
import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
|
||||||
@@ -17,6 +16,7 @@ interface props {
|
|||||||
const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
||||||
const headeFullRef = useRef<HTMLDivElement>(null)
|
const headeFullRef = useRef<HTMLDivElement>(null)
|
||||||
const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
|
const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
|
||||||
|
const [isModeAuthenRegister, setIsModeAuthenRegister] = useState<boolean>(false)
|
||||||
const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
|
const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
|
||||||
const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
|
const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
|
||||||
|
|
||||||
@@ -32,7 +32,17 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
|||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('scroll', handleScroll)
|
window.removeEventListener('scroll', handleScroll)
|
||||||
}
|
}
|
||||||
}, [headeFullRef.current])
|
}, [])
|
||||||
|
|
||||||
|
const openModalRegister = () => {
|
||||||
|
setIsModeAuthenRegister(true)
|
||||||
|
openModalAuthen()
|
||||||
|
}
|
||||||
|
|
||||||
|
const openModalLogin = () => {
|
||||||
|
setIsModeAuthenRegister(false)
|
||||||
|
openModalAuthen()
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -43,7 +53,8 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
|||||||
<HeaderMenu
|
<HeaderMenu
|
||||||
isStickyHeader={true}
|
isStickyHeader={true}
|
||||||
toggleFilter={toggleFilter}
|
toggleFilter={toggleFilter}
|
||||||
openModalAuthen={openModalAuthen}
|
openModalLogin={openModalLogin}
|
||||||
|
openModalRegister={openModalRegister}
|
||||||
openModalInfo={openModalInfo} />
|
openModalInfo={openModalInfo} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -54,16 +65,17 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
|||||||
isFull={isFullHeader}
|
isFull={isFullHeader}
|
||||||
visibleFilter={visibleFilter}
|
visibleFilter={visibleFilter}
|
||||||
toggleFilter={toggleFilter}
|
toggleFilter={toggleFilter}
|
||||||
openModalAuthen={openModalAuthen}
|
openModalLogin={openModalLogin}
|
||||||
openModalInfo={openModalInfo} />
|
openModalRegister = {openModalRegister}
|
||||||
|
openModalInfo={openModalInfo}
|
||||||
|
/>
|
||||||
<HeaderSubMenu />
|
<HeaderSubMenu />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<HeaderSubMenuMobile />
|
<HeaderSubMenuMobile />
|
||||||
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
|
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} mode={isModeAuthenRegister? 'register': ''} />
|
||||||
<ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
|
<ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
@@ -22,12 +22,14 @@ import {
|
|||||||
import Logo from '../../../Logo/Logo'
|
import Logo from '../../../Logo/Logo'
|
||||||
import s from './HeaderMenu.module.scss'
|
import s from './HeaderMenu.module.scss'
|
||||||
import { useLogout } from '../../../../hooks/auth'
|
import { useLogout } from '../../../../hooks/auth'
|
||||||
|
import useActiveCustomer from 'src/components/hooks/useActiveCustomer'
|
||||||
interface Props {
|
interface Props {
|
||||||
children?: any
|
children?: any
|
||||||
isFull?: boolean
|
isFull?: boolean
|
||||||
isStickyHeader?: boolean
|
isStickyHeader?: boolean
|
||||||
visibleFilter?: boolean
|
visibleFilter?: boolean
|
||||||
openModalAuthen: () => void
|
openModalLogin: () => void
|
||||||
|
openModalRegister: () => void
|
||||||
openModalInfo: () => void
|
openModalInfo: () => void
|
||||||
toggleFilter: () => void
|
toggleFilter: () => void
|
||||||
}
|
}
|
||||||
@@ -37,29 +39,37 @@ const HeaderMenu = memo(
|
|||||||
isFull,
|
isFull,
|
||||||
isStickyHeader,
|
isStickyHeader,
|
||||||
visibleFilter,
|
visibleFilter,
|
||||||
openModalAuthen,
|
openModalLogin,
|
||||||
|
openModalRegister,
|
||||||
openModalInfo,
|
openModalInfo,
|
||||||
toggleFilter,
|
toggleFilter,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const { toggleCartDrawer } = useCartDrawer()
|
const { toggleCartDrawer } = useCartDrawer()
|
||||||
|
const { customer } = useActiveCustomer()
|
||||||
|
|
||||||
const { logout } = useLogout()
|
const { logout } = useLogout()
|
||||||
|
|
||||||
const optionMenu = useMemo(
|
const optionMenuNotAuthen = useMemo(
|
||||||
() => [
|
() => [
|
||||||
{
|
{
|
||||||
onClick: openModalAuthen,
|
onClick: openModalLogin,
|
||||||
name: 'Login (Demo)',
|
name: 'Sign in',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
onClick: openModalInfo,
|
onClick: openModalRegister,
|
||||||
name: 'Create User Info (Demo)',
|
name: 'Create account',
|
||||||
},
|
|
||||||
{
|
|
||||||
link: '/account-not-login',
|
|
||||||
name: 'Account Not Login (Demo)',
|
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
[openModalLogin, openModalRegister]
|
||||||
|
)
|
||||||
|
|
||||||
|
const optionMenu = useMemo(
|
||||||
|
() => [
|
||||||
|
// {
|
||||||
|
// onClick: openModalInfo,
|
||||||
|
// name: 'Create User Info (Demo)',
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
link: '/demo',
|
link: '/demo',
|
||||||
name: 'Notifications Empty (Demo)',
|
name: 'Notifications Empty (Demo)',
|
||||||
@@ -78,7 +88,7 @@ const HeaderMenu = memo(
|
|||||||
onClick: logout,
|
onClick: logout,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[openModalAuthen, openModalInfo, logout]
|
[logout]
|
||||||
)
|
)
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
@@ -140,7 +150,7 @@ const HeaderMenu = memo(
|
|||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<MenuDropdown options={optionMenu} isHasArrow={false}>
|
<MenuDropdown options={customer ? optionMenu : optionMenuNotAuthen} isHasArrow={false}>
|
||||||
<IconUser />
|
<IconUser />
|
||||||
</MenuDropdown>
|
</MenuDropdown>
|
||||||
</li>
|
</li>
|
||||||
|
Reference in New Issue
Block a user