Merge pull request #63 from KieIO/m7-lytran-fixbug

Fix bug responsive cart drawer & create cart drawer context

src/components/common/CartDrawer/CartDrawer.module.scss

@@ -2,8 +2,11 @@
 
 
 .cartDrawer {
-    @apply flex flex-col h-full;
+    @apply flex flex-col custom-scroll;
+    @screen md {
+        @apply h-full;
+    }
     .body {
-        @apply flex flex-col overflow-y-auto overflow-x-hidden h-full custom-scroll;
+        @apply flex flex-col overflow-x-hidden h-full custom-scroll;
     }
 }

src/components/common/CartDrawer/CartDrawer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useCartDrawer } from 'src/components/contexts/CartDrawer/CartDrawerContext';
 import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
 import { DrawerCommon } from '..';
 import s from './CartDrawer.module.scss';
@@ -8,24 +9,24 @@ import CartRecommendation from './components/CartRecommendation/CartRecommendati
 import ProductsInCart from './components/ProductsInCart/ProductsInCart';
 
 interface Props {
-  visible: boolean
+
-  onClose: () => void
 }
 
-const CartDrawer = ({ visible, onClose }: Props) => {
+const CartDrawer = ({ }: Props) => {
+  const { cartVisible, closeCartDrawer } = useCartDrawer()
   return (
     <DrawerCommon
       title={`Your cart (${PRODUCT_CART_DATA_TEST.length})`}
-      visible={visible}
+      visible={cartVisible}
-      onClose={onClose}>
+      onClose={closeCartDrawer}>
       <div className={s.cartDrawer}>
         <div className={s.body}>
-          <ProductsInCart data={PRODUCT_CART_DATA_TEST}/>
+          <ProductsInCart data={PRODUCT_CART_DATA_TEST} />
           <CartRecommendation />
         </div>
         <div>
           <CartMessage />
-          <CartCheckoutButton onClose={onClose}/>
+          <CartCheckoutButton onClose={closeCartDrawer} />
         </div>
       </div>
     </DrawerCommon>

src/components/common/DrawerCommon/DrawerCommon.module.scss

@@ -30,12 +30,12 @@
         @apply flex flex-col bg-white;
         width: fit-content;
         height: 100vh;
-        width: 100%;
+        width: 90%;
         margin-left: auto;
         box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
-        // transform: none;
 
         @screen md {
+            width: 100%;
             max-width: 52rem;
         }
         .top {

src/components/common/Header/Header.tsx

@@ -19,15 +19,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: 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()
-        }
-    }
 
     useEffect(() => {
         const handleScroll = () => {
@@ -36,10 +27,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
             } else {
                 setIsFullHeader(true)
             }
-            // if (!isMobile()) {
-            // } else {
-            //     setIsFullHeader(true)
-            // }
         }
         window.addEventListener('scroll', handleScroll)
         return () => {
@@ -56,7 +43,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
                 <HeaderMenu
                     isStickyHeader={true}
                     toggleFilter={toggleFilter}
-                    toggleCart={toggleCart}
                     openModalAuthen={openModalAuthen}
                     openModalInfo={openModalInfo} />
             </div>
@@ -68,7 +54,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
                         isFull={isFullHeader}
                         visibleFilter={visibleFilter}
                         toggleFilter={toggleFilter}
-                        toggleCart={toggleCart}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
                     <HeaderSubMenu />
@@ -78,9 +63,7 @@ const Header = memo(({ toggleFilter, visibleFilter }: 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

@@ -5,6 +5,7 @@ import { memo, useMemo } from 'react'
 import { ButtonCommon } from 'src/components/common'
 import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
+import { useCartDrawer } from 'src/components/contexts/CartDrawer/CartDrawerContext'
 import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons'
 import { ACCOUNT_TAB, FILTER_PAGE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import Logo from '../../../Logo/Logo'
@@ -17,13 +18,12 @@ interface Props {
     openModalAuthen: () => void,
     openModalInfo: () => void,
     toggleFilter: () => void,
-    toggleCart: () => void,
 }
 
 
-const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
+const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter }: Props) => {
     const router = useRouter()
-
+    const { toggleCartDrawer } = useCartDrawer()
 
     const optionMenu = useMemo(() => [
         {
@@ -74,7 +74,7 @@ const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthe
                                 </button>
                             )
                         }
-                        <button className={`${s.iconCart} ${s.btnCart}`} onClick={toggleCart}>
+                        <button className={`${s.iconCart} ${s.btnCart}`} onClick={toggleCartDrawer}>
                             <IconBuy />
                         </button>
                     </div>
@@ -108,7 +108,7 @@ const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthe
                     <MenuDropdown options={optionMenu} isHasArrow={false}><IconUser /></MenuDropdown>
                 </li>
                 <li>
-                    <button className={s.btnCart} onClick={toggleCart}>
+                    <button className={s.btnCart} onClick={toggleCartDrawer}>
                         <IconBuy />
                     </button>
                 </li>

src/components/common/Layout/Layout.tsx

@@ -1,14 +1,8 @@
 import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
-import { useModalCommon } from 'src/components/hooks'
+import { CartDrawerProvider } from 'src/components/contexts/CartDrawer/CartDrawerProvider'
-import { BRAND, CATEGORY, FEATURED, FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils'
+import LayoutContent from './LayoutContent/LayoutContent'
-import { ScrollToTop } from '..'
-import Footer from '../Footer/Footer'
-import Header from '../Header/Header'
-import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList'
-import s from './Layout.module.scss'
-
 interface Props {
     className?: string
     children?: any
@@ -16,37 +10,14 @@ interface Props {
 
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
-    const { locale = 'en-US', pathname } = useRouter()
+    const { locale = 'en-US' } = useRouter()
-    const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
-
-    const router = useRouter()
-
-    const toggleFilter = () => {
-        if (visibleFilter) {
-            closeFilter()
-        } else {
-            openFilter()
-        }
-    }
-
     return (
         <CommerceProvider locale={locale}>
-            <div className={s.mainLayout}>
+            <CartDrawerProvider>
-                <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
+                <LayoutContent>
-                {
+                    {children}
-                    router.pathname === ROUTE.ACCOUNT ?
+                </LayoutContent>
-                        <section className={s.wrapperWithBg}>
+            </CartDrawerProvider>
-                            <main>{children}</main>
-                        </section> :
-                        <main>{children}</main>
-                }
-                <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
-                <ScrollToTop visibilityHeight={1500} />
-                {
-                    FILTER_PAGE.includes(pathname) && (<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>)
-                }
-                <Footer />
-            </div>
         </CommerceProvider>
 
     )

src/components/common/Layout/LayoutContent/LayoutContent.tsx

@@ -0,0 +1,53 @@
+import { useRouter } from 'next/router'
+import { FC } from 'react'
+import { useCartDrawer } from 'src/components/contexts/CartDrawer/CartDrawerContext'
+import { useModalCommon } from 'src/components/hooks'
+import { BRAND, CATEGORY, FEATURED, FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils'
+import { CartDrawer, Footer, ScrollToTop } from '../..'
+import Header from '../../Header/Header'
+import MenuNavigationProductList from '../../MenuNavigationProductList/MenuNavigationProductList'
+import s from './LayoutContent.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const LayoutContent: FC<Props> = ({ children }) => {
+    const { pathname } = useRouter()
+    const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
+    const router = useRouter()
+
+    const toggleFilter = () => {
+        if (visibleFilter) {
+            closeFilter()
+        } else {
+            openFilter()
+        }
+    }
+
+    return (
+        <>
+            <div className={s.mainLayout}>
+                <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
+                {
+                    router.pathname === ROUTE.ACCOUNT ?
+                        <section className={s.wrapperWithBg}>
+                            <main>{children}</main>
+                        </section> :
+                        <main>{children}</main>
+                }
+                <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
+                <ScrollToTop visibilityHeight={1500} />
+                {
+                    FILTER_PAGE.includes(pathname) && (<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>)
+                }
+                <Footer />
+            </div>
+            <CartDrawer />
+        </>
+
+    )
+}
+
+export default LayoutContent

src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss

@@ -4,7 +4,7 @@
     @apply spacing-horizontal;
     margin: 0 auto 5.6rem;
     @screen md {
-        @apply flex;
+        @apply flex justify-center;
         margin: 5.6rem auto;
     }
 
@@ -16,6 +16,9 @@
         @screen sm-only {
             margin-bottom: 2rem;
         }
+        @screen md {
+            max-width: 50%;
+        }
         @screen lg {
             max-width: 60rem;
         }

src/components/contexts/CartDrawer/CartDrawerContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+export type CartDrawerContextType = {
+    cartVisible: boolean;
+    toggleCartDrawer: (visible?: boolean) => void;
+    openCartDrawer: () => void;
+    closeCartDrawer: () => void;
+};
+export const DEFAULT_CART_DRAWER_CONTEXT: CartDrawerContextType = {
+    cartVisible: false,
+    toggleCartDrawer: () => { },
+    openCartDrawer: () => { },
+    closeCartDrawer: () => { },
+};
+
+export const CartDrawerContext = createContext<CartDrawerContextType>(DEFAULT_CART_DRAWER_CONTEXT)
+
+export function useCartDrawer() {
+    return useContext(CartDrawerContext);
+}

src/components/contexts/CartDrawer/CartDrawerProvider.tsx

@@ -0,0 +1,42 @@
+import { ReactNode, useEffect, useState } from "react";
+import { CartDrawerContext } from "./CartDrawerContext";
+
+type Props = {
+    children: ReactNode;
+};
+
+export function CartDrawerProvider({ children }: Props) {
+    const [visible, setVisible] = useState<boolean>(false);
+    
+    useEffect(() => {
+        const bodyElement = document.getElementsByTagName('body')[0]
+        if (bodyElement) {
+            if (visible) {
+                bodyElement.style.overflow = 'hidden'
+            } else {
+                bodyElement.style.overflow = 'auto'
+                bodyElement.removeAttribute('scroll')
+            }
+        }
+    }, [visible])
+
+    const closeCartDrawer = () => {
+        setVisible(false);
+    };
+
+    const openCartDrawer = () => {
+        setVisible(true);
+    };
+
+    const toggleCartDrawer = () => {
+        setVisible(!visible);
+    };
+    
+    return (
+        <>
+            <CartDrawerContext.Provider value={{cartVisible: visible, closeCartDrawer, openCartDrawer, toggleCartDrawer}}>
+                {children}
+            </CartDrawerContext.Provider>
+        </>
+    );
+}

src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss

@@ -4,7 +4,7 @@
     @apply spacing-horizontal;
     padding-bottom: 4rem;
     @screen md {
-        @apply flex;
+        @apply flex justify-center;
         padding-bottom: 5.6rem;
     }
 }

src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss

@@ -3,6 +3,9 @@
     @screen sm-only {
         margin-bottom: 2rem;
     }
+@screen md {
+    max-width: 50%;
+}
     @screen lg {
         max-width: 60rem;
     }

src/utils/constanst.utils.ts

@@ -1,4 +1,4 @@
-export const BLUR_DATA_IMG = 'data:image/png;base64,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'
+export const BLUR_DATA_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8fBIAApUBruKYvzsAAAAASUVORK5CYII='
 
 export const SOCIAL_LINKS = {
     FB: 'FB',