merge branch m7-sonnguyen-fix-account-page into common

src/components/common/Layout/Layout.module.scss

@@ -2,15 +2,22 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    > main {
+    .wrapperWithBg {
+        @apply bg-background-gray;
+        width: 100%;
+        margin-top: -3.2rem;
+    }
+
+    > main,
+    .wrapperWithBg > main {
         flex: 1;
         width: 100%;
-        max-width: min( 100%, 1536px);
+        max-width: min(100%, 1536px);
         margin: auto;
     }
 }
-.filter{
+.filter {
     @screen xl {
         display: none;
     }
-}
+}

src/components/common/Layout/Layout.tsx

@@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
 import { useModalCommon } from 'src/components/hooks'
-import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
+import { BRAND, CATEGORY, FEATURED, ROUTE } from 'src/utils/constanst.utils'
 import { ScrollToTop } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
@@ -19,6 +19,8 @@ const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
     const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
 
+    const router = useRouter()
+
     const toggleFilter = () => {
         if (visibleFilter) {
             closeFilter()
@@ -26,11 +28,18 @@ const Layout: FC<Props> = ({ children }) => {
             openFilter()
         }
     }
+
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
                 <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
-                <main >{children}</main>
+                {
+                    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} />
                 <Footer />

src/components/modules/account/AccountPage/AccountPage.module.scss

@@ -1,23 +1,26 @@
 @import '../../../../styles/utilities';
 
 .accountPage {
-    @apply spacing-horizontal;
+    @apply bg-background-gray;
-    background-color: #F5F4F2;
+    padding: 3.2rem 2rem;
-    margin-top: -3.2rem;
-    padding-top: 3.2rem;
-    padding-bottom: 3.2rem;
     min-height: 70rem;
 
-
     @screen md {
-        padding-left: 3.2rem;
+        padding-left: 2.8rem;
-        padding-right: 3.2rem;
+        padding-right: 2.8rem;
+        padding: 5.4rem 2rem;
+    }
+
+    @screen lg {
+        padding-left: 6.4rem;
+        padding-right: 6.4rem;
     }
 
     @screen xl {
-        @apply spacing-horizontal
+        padding-left: 11.2rem;
+        padding-right: 11.2rem;
     }
-
+   
     .header {
         margin-bottom: 1.2rem;
 

src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss

@@ -16,7 +16,6 @@
         margin: auto;
         margin-bottom: 4rem;
         
-
         @screen md {
             margin-left: 0
         }
@@ -56,22 +55,16 @@
     }
 
     .editInfoBtn {
-        @apply text-center font-bold custom-border-radius;
+        @apply flex items-center justify-center;
-        margin: auto;
         margin-top: 2.4rem;
         margin-bottom: 2.4rem;
-        padding: .8rem 1.6rem;
-        color: #141414;
-        border: 1px solid #141414;
-        max-width: 8.8rem;
 
-        &:hover {
+        button div {
-            @apply cursor-pointer;
+            background-color: #F5F4F2 !important;
-            background-color: #FBFBFB;
         }
 
         @screen md {
-            margin-left: 0;
+            @apply block;
         }
     }
 }

src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx

@@ -4,6 +4,8 @@ import s from './AccountInfomation.module.scss'
 import Image from "next/image"
 import avatar from '../../assets/avatar.png';
 
+import { ButtonCommon } from 'src/components/common'
+
 interface AccountProps {
     name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string
 }
@@ -44,7 +46,9 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
                 {account.phoneNumber}  
             </div>
 
-            <div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
+            <div className={s.editInfoBtn}>
+                <ButtonCommon onClick={showEditForm} type="light" size="small">Edit</ButtonCommon>
+            </div>
         </section>
     )
 }

src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx

@@ -25,7 +25,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
                         {
                             waiting.map((order, i) => {
                                 return (
-                                    <DeliveryItem key={order.id} id={order.id} status="Waiting" products={order.products} totalPrice={order.totalPrice} />
+                                    <DeliveryItem key={order.id} id={order.id} status="waiting" products={order.products} totalPrice={order.totalPrice} />
                                 )
                             }) 
                         }
@@ -36,7 +36,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
                         {
                             delivering.map((order, i) => {
                                 return (
-                                    <DeliveryItem key={order.id} id={order.id} status="Delivering" products={order.products} totalPrice={order.totalPrice} />
+                                    <DeliveryItem key={order.id} id={order.id} status="delivering" products={order.products} totalPrice={order.totalPrice} />
                                 )
                             }) 
                         }
@@ -47,7 +47,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
                         {
                             delivered.map((order, i) => {
                                 return (
-                                    <DeliveryItem key={order.id} id={order.id} status="Delivered" products={order.products} totalPrice={order.totalPrice} />
+                                    <DeliveryItem key={order.id} id={order.id} status="delivered" products={order.products} totalPrice={order.totalPrice} />
                                 )
                             }) 
                         }

src/components/modules/account/DeliveryItem/DeliveryItem.tsx

@@ -9,7 +9,7 @@ import ReOrder from './components/ReOrder/ReOrder'
 
 interface DeliveryItemProps {
     id: string;
-    status: "Waiting" | "Delivering" | "Delivered";
+    status: "waiting" | "delivering" | "delivered";
     products: string[];
     totalPrice: number;
 }
@@ -21,7 +21,7 @@ const DeliveryItem = ({ id, status, products, totalPrice } : DeliveryItemProps)
             <div className={s.separator}></div>
             <Products products={products} />
             <TotalPrice totalPrice={totalPrice} />
-            <ReOrder show={status === "Delivered" ? true : false}/>
+            <ReOrder visible={status === "delivered" ? true : false}/>
         </section>
     )
 }

src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx

@@ -5,10 +5,10 @@ import s from './IdAndStatus.module.scss'
 
 interface IdAndStatusProps {
     id?: string;
-    status: "Waiting" | "Delivering" | "Delivered";
+    status: "waiting" | "delivering" | "delivered";
 }
 
-const IdAndStatus = ({ id, status="Waiting" } : IdAndStatusProps) => {
+const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
     return (
         <div className={s.idAndStatus}>
             <div className={s.id}>

src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss

@@ -1,9 +1,21 @@
 @import '../../../../../../styles/utilities';
 
 .reOrder {
-    @apply hidden;
+    @apply hidden shape-common text-white font-bold;
+    background-color: var(--primary);
     margin-right: 1.2rem;
-    &.show {
+    padding: .4rem .6rem;
+
+    @screen lg {
+        padding: .8rem 1.2rem;
+        margin-right: 2.4rem;
+    }
+
+    &.visible {
         @apply block;
     }
+    
+    &:hover {
+        @apply cursor-pointer;
+    }
 }

src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx

@@ -1,18 +1,22 @@
 import classNames from "classnames"
 import React from "react"
 import { ButtonCommon } from "src/components/common"
+import Link from 'next/link'
 import s from './ReOrder.module.scss'
 
 interface ReOrderProps {
-    show: boolean;
+    visible: boolean;
+    href?: string;
 }
 
-const ReOrder = ({ show=false } : ReOrderProps) => {
+const ReOrder = ({ visible=false, href="#" } : ReOrderProps) => {
     return (
         <div className={classNames(s.reOrder, {
-            [s.show]: show
+            [s.visible]: visible
         })}>
-            <ButtonCommon>Re-Order</ButtonCommon>
+            <Link href={href}>
+                <a>Re-Order</a>
+            </Link>
         </div>
     )
 }