♻️ enhan: shorcut demo modal create user info

:%s

src/components/common/Header/Header.tsx

@@ -3,6 +3,7 @@ import React, { memo, useEffect, useState } from 'react'
 import { useModalCommon } from 'src/components/hooks/useModalCommon'
 import { isMobile } from 'src/utils/funtion.utils'
 import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
+import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
 import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
 import HeaderMenu from './components/HeaderMenu/HeaderMenu'
 import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
@@ -13,6 +14,7 @@ import s from './Header.module.scss'
 const Header = memo(() => {
     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 })
 
     useEffect(() => {
         window.addEventListener('scroll', handleScroll)
@@ -35,12 +37,15 @@ const Header = memo(() => {
             <header className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
                 <HeaderHighLight isShow={isFullHeader} />
                 <div className={s.menu}>
-                    <HeaderMenu isFull={isFullHeader} openModalAuthen={openModalAuthen} />
+                    <HeaderMenu isFull={isFullHeader}
+                        openModalAuthen={openModalAuthen}
+                        openModalInfo={openModalInfo} />
                     <HeaderSubMenu isShow={isFullHeader} />
                 </div>
             </header>
             <HeaderSubMenuMobile />
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
+            <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo}/>
         </>
     )
 })

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

@@ -11,14 +11,19 @@ interface Props {
     children?: any,
     isFull: boolean,
     openModalAuthen: () => void,
+    openModalInfo: () => void,
 }
 
-const HeaderMenu = memo(({ isFull, openModalAuthen }: Props) => {
+const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
     const optionMenu = useMemo(() => [
         {
             onClick: openModalAuthen,
             name: 'Login (Demo)',
         },
+        {
+            onClick: openModalInfo,
+            name: 'Create User Info (Demo)',
+        },
         {
             link: ROUTE.ACCOUNT,
             name: 'Account',