♻️ enhan: shorcut demo modal create user info

:%s

pages/index.tsx

@@ -1,6 +1,6 @@
 
-import { Layout, ModalCreateUserInfo } from 'src/components/common'
-import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home';
+import { Layout } from 'src/components/common';
+import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 
 export default function Home() {
   return (
@@ -14,7 +14,8 @@ export default function Home() {
       <HomeRecipe />
       <HomeSubscribe />
 
-      <ModalCreateUserInfo/>
+      // todo: uncomment
+      {/* <ModalCreateUserInfo/> */}
     </>
   )
 }

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',

src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx

@@ -8,9 +8,15 @@ import ButtonCommon from '../ButtonCommon/ButtonCommon';
 import ModalCommon from '../ModalCommon/ModalCommon';
 import s from './ModalCreateUserInfo.module.scss';
 
+// todo: remove
+interface Props {
+    demoVisible: boolean,
+    demoCloseModal: () => void,
+}
 
-const ModalCreateUserInfo = () => {
-    const { visible, closeModal } = useModalCommon({ initialValue: true })
+
+const ModalCreateUserInfo = ({ demoVisible: visible, demoCloseModal: closeModal }: Props) => {
+    // const { visible, closeModal } = useModalCommon({ initialValue: false})
     const firstInputRef = useRef<CustomInputCommon>(null)
 
     return (
@@ -21,6 +27,7 @@ const ModalCreateUserInfo = () => {
                         <Inputcommon placeholder='Street Address' ref={firstInputRef} />
                         <Inputcommon placeholder='City' />
                         <div className={s.line}>
+                            {/* todo: select, not input */}
                             <Inputcommon placeholder='State' />
                             <Inputcommon placeholder='Zip code' />
                         </div>
@@ -29,7 +36,6 @@ const ModalCreateUserInfo = () => {
                     <div className={s.bottom}>
                         <ButtonCommon size='large' onClick={closeModal} type='light'>Skip</ButtonCommon>
                         <ButtonCommon size='large'>Submit</ButtonCommon>
-
                     </div>
                 </div>
             </div>