From e00084ce45eabdf84d2bfafcce4ad798a7a4a1d3 Mon Sep 17 00:00:00 2001
From: Quangnhankie <nhantran@kie.io>
Date: Tue, 14 Sep 2021 18:26:43 +0700
Subject: [PATCH 01/17] bug: fux cursor

---
 src/components/common/MenuFilter/MenuFilter.module.scss         | 1 +
 .../MenuNavigationProductList/MenuSort/MenuSort.module.scss     | 1 +
 src/components/modules/error/ErrorPage/Errorpage.module.scss    | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss
index 87a792297..b8b6596ce 100644
--- a/src/components/common/MenuFilter/MenuFilter.module.scss
+++ b/src/components/common/MenuFilter/MenuFilter.module.scss
@@ -28,6 +28,7 @@
              margin-right: 0.8rem;
              background-color: var(--gray);
              border-radius: 0.8rem;
+             cursor: pointer;
              &.active {
                 color:white;
                 background-color: var(--primary);
diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
index d259611c7..732f0e6eb 100644
--- a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
@@ -19,6 +19,7 @@
              padding: 0 1.6rem;
              margin-right: 0.8rem;
              border-radius: 0.8rem;
+             cursor: pointer;
              &.active {
                 @apply font-bold relative;
                 color:var(--text-active);
diff --git a/src/components/modules/error/ErrorPage/Errorpage.module.scss b/src/components/modules/error/ErrorPage/Errorpage.module.scss
index 562a20f8b..57259b1aa 100644
--- a/src/components/modules/error/ErrorPage/Errorpage.module.scss
+++ b/src/components/modules/error/ErrorPage/Errorpage.module.scss
@@ -6,7 +6,7 @@
   
     background-color: white;
     .inner{
-        height: 100vh;
+        padding: 8rem;
         .logo{
             margin-top: 2rem;
         }

From c85942add4e9b92f09d8be5c7904fe25fd254fbe Mon Sep 17 00:00:00 2001
From: Quangnhankie <nhantran@kie.io>
Date: Tue, 14 Sep 2021 18:33:34 +0700
Subject: [PATCH 02/17] bug: import className

---
 .../common/Header/components/HeaderMenu/HeaderMenu.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index 4487fa83c..f1d81eab6 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -7,6 +7,7 @@ import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/compo
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'
+import classNames from 'classnames'
 interface Props {
     children?: any,
     isFull: boolean,

From 149c12fbe4972133f5a36e6dcf9a3114a6f90d12 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Thu, 16 Sep 2021 12:43:28 +0700
Subject: [PATCH 03/17] :art: restyle: Layout for Account Page

---
 src/components/common/Layout/Layout.module.scss | 5 +++++
 src/components/common/Layout/Layout.tsx         | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss
index 679b0b48f..447ecb107 100644
--- a/src/components/common/Layout/Layout.module.scss
+++ b/src/components/common/Layout/Layout.module.scss
@@ -8,6 +8,11 @@
         max-width: min( 100%, 1536px);
         margin: auto;
     }
+    .bgForAccount {
+        flex: 1;
+        width: 100%;
+        margin: auto;
+    }
 }
 .filter{
     @screen xl {
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index 233c53bbc..b1f2d5c0b 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -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,15 @@ const Layout: FC<Props> = ({ children }) => {
             openFilter()
         }
     }
+
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
                 <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
-                <main >{children}</main>
+                { router.pathname === "/account" ?
+                    <section className={s.bgForAccount}>{children}</section> :
+                    <main>{children}</main> }
+                {/* <main>{children}</main> */}
                 <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
                 <ScrollToTop visibilityHeight={1500} />
                 <Footer />

From 149bc296ab5dba49402bb72eecc3c5749c9446bd Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Thu, 16 Sep 2021 12:45:12 +0700
Subject: [PATCH 04/17] :bug: bug: fix bug in Account Page

---
 .../AccountPage/AccountPage.module.scss       | 19 +++++++++++--------
 .../OrderInformation/OrderInformation.tsx     |  6 +++---
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss
index 5eece6c80..5660d7707 100644
--- a/src/components/modules/account/AccountPage/AccountPage.module.scss
+++ b/src/components/modules/account/AccountPage/AccountPage.module.scss
@@ -1,23 +1,26 @@
 @import '../../../../styles/utilities';
 
 .accountPage {
-    @apply spacing-horizontal;
     background-color: #F5F4F2;
     margin-top: -3.2rem;
-    padding-top: 3.2rem;
-    padding-bottom: 3.2rem;
+    padding: 3.2rem 2rem;
     min-height: 70rem;
 
-
     @screen md {
-        padding-left: 3.2rem;
-        padding-right: 3.2rem;
+        padding-left: 2.8rem;
+        padding-right: 2.8rem;
+    }
+
+    @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;
 
diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
index 858526f26..211cebe3b 100644
--- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
+++ b/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} />
                                 )
                             }) 
                         }

From 1b311a69a2c61802a7469289a5cc4fba23312a26 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Thu, 16 Sep 2021 12:45:36 +0700
Subject: [PATCH 05/17] :bug: bug: fix bug in Delivery Item

---
 .../account/DeliveryItem/DeliveryItem.tsx        |  4 ++--
 .../components/IdAndStatus/IdAndStatus.tsx       |  4 ++--
 .../components/ReOrder/ReOrder.module.scss       | 16 ++++++++++++++--
 .../DeliveryItem/components/ReOrder/ReOrder.tsx  | 12 ++++++++----
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
index a8ccbb69d..b42a0f91e 100644
--- a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
+++ b/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>
     )
 }
diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
index 578c94f97..d09868272 100644
--- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
+++ b/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}>
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
index 517dd2e4f..8b855196e 100644
--- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
index aaef9153c..4d6164676 100644
--- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
+++ b/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>
     )
 }

From a4d1e913a1a74b69d492cef01097e94ee9d8bca6 Mon Sep 17 00:00:00 2001
From: Quangnhankie <nhantran@kie.io>
Date: Thu, 16 Sep 2021 14:27:47 +0700
Subject: [PATCH 06/17] bug: fix recipeCard mobile and
 MenuNavigationProductList

---
 next-env.d.ts                                 |  3 -
 .../MenuNavigationProductList.module.scss     |  4 +-
 .../common/RecipeCard/RecipeCard.module.scss  | 13 +++-
 .../BlogDetailImg/BlogDetailImg.module.scss   |  3 +-
 .../RecipesItem/RecipesItem.module.scss       | 61 -------------------
 .../RecipesList/RecipesItem/RecipesItem.tsx   | 32 ----------
 .../RecipesList/RecipesList.module.scss       | 13 +++-
 7 files changed, 27 insertions(+), 102 deletions(-)
 delete mode 100644 src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss
 delete mode 100644 src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx

diff --git a/next-env.d.ts b/next-env.d.ts
index 9bc3dd46b..c6643fda1 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
index 353b9073e..3732c00d8 100644
--- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
@@ -20,7 +20,7 @@
             width: 100%;
             height: 100vh;
             position: fixed;
-            z-index: 9999;
+            z-index: 99999999999;
         }
     }
     .menuNavigationProductModal{
@@ -30,7 +30,7 @@
         top: 0;
         width: 100%;
         height: 100vh;
-        z-index: 10000;
+        z-index: 999999999999;
         transform: translateY(100%);
 
         &.animation{
diff --git a/src/components/common/RecipeCard/RecipeCard.module.scss b/src/components/common/RecipeCard/RecipeCard.module.scss
index 19f3eb76a..6b07d9109 100644
--- a/src/components/common/RecipeCard/RecipeCard.module.scss
+++ b/src/components/common/RecipeCard/RecipeCard.module.scss
@@ -4,7 +4,6 @@
     @apply inline-flex flex-col justify-start;
     .image{
         width: 100%;
-        max-height: 22rem;
         border-radius: 2.4rem;
         img {
             border-radius: 2.4rem;
@@ -12,14 +11,20 @@
         &:hover{
             cursor: pointer;
         }
+        @screen md{
+            max-height: 22rem;
+        }
     }
     .title{
         padding: 1.6rem 0.8rem 0.4rem 0.8rem;
-        @apply font-bold;
+        @apply font-bold overflow-hidden overflow-ellipsis ;
         font-size: 2rem;
         line-height: 2.8rem;
         letter-spacing: -0.01em;
         color: var(--text-active);
+         display: -webkit-box;
+        -webkit-line-clamp: 2; /* number of lines to show */
+        -webkit-box-orient: vertical;
         &:hover{
             cursor: pointer;
         }
@@ -30,5 +35,9 @@
         display: -webkit-box;
         -webkit-line-clamp: 3; /* number of lines to show */
         -webkit-box-orient: vertical;
+        margin-bottom: 3rem;
+        @screen md{
+            margin-bottom: 0;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss
index aad3aebbf..b07e8ef46 100644
--- a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss
+++ b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss
@@ -1,11 +1,12 @@
+@import "../../../../styles/_utilities";
 .beadcrumb{
     padding-left: 3.2rem;
     padding-bottom: 3.2rem;
 }
 .image{
+    @apply spacing-horizontal;
     div{
         width: 100%;
-        padding: 0 2rem;
         margin-bottom: 2rem;
         border-radius: 2.4rem;
         min-height: 45.2rem;
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss
deleted file mode 100644
index dac6dbbc9..000000000
--- a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import "../../../../../styles/_utilities";
-
-.recipesItem {
-    @apply flex justify-between;
-    margin: 1.5rem 0;
-
-    @screen md{
-        @apply block;
-    }
-
-    .recipesItemImage {
-        @apply transition-all duration-200;
-        width: 31%;
-        a{
-            div{
-                @apply object-cover;
-                min-height: 19.6rem;
-                border-radius: 1.5rem;
-            }
-        }
-
-        @screen md {
-            @apply object-cover cursor-pointer;
-            width: 100%;
-            margin: 0 auto;
-            img{
-                height:100%;
-                border-radius: 2.4rem;
-            }
-        }
-    }
-    .recipesItemText {
-        width: 65%;
-        .recipesItemName{
-            @apply topline font-bold cursor-pointer;
-
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-             overflow: hidden;
-            -webkit-box-orient: vertical;
-            font-feature-settings: "salt" on;
-            color:var(--text-active);
-            margin-top: 1.6rem;
-            &:hover {
-                color: var(--primary);
-            }
-        }
-        @screen md {
-            width: 100%;
-        }
-    }
-
-    .recipesItemDescription{
-        color:var(--text-label);
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-         overflow: hidden;
-        -webkit-box-orient: vertical;
-    }
- 
-}
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx
deleted file mode 100644
index 01918c86e..000000000
--- a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { ImgWithLink } from 'src/components/common';
-import s from './RecipesItem.module.scss';
-interface RecipesItem {
-    image:string,
-    name: string,
-    description:string,
-    link: string
-}
-
-const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
-    return (
-        <div className={s.recipesItem}>
-            <div className={s.recipesItemImage}>
-                <Link href={link}>
-                    <a>
-                        <ImgWithLink src={image} alt="author" />
-                    </a>
-                </Link>
-            </div>
-            <Link href={link}>
-                <a className={s.recipesItemText}>
-                    <div className={s.recipesItemName}>{name}</div>
-                    <div className={s.recipesItemDescription}>{description}</div>
-                </a>
-            </Link>
-        </div >
-    )
-}
-
-export default RecipesItem
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss
index 5f9ded191..51ed15a3e 100644
--- a/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss
+++ b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss
@@ -6,6 +6,10 @@
         padding:0 3.2rem;
         padding-bottom:5.6rem;
     }
+    div{
+        max-width: 100%;
+        max-height: 100%;
+    }
     .breadcrumb{
         padding:1rem 0;
     }
@@ -39,11 +43,16 @@
                     @screen md {
                         @apply flex justify-between flex-wrap;
                         margin: 1rem 0;
+                      
                     }
                     .item {
+                        img{
+                            width: 100%;
+                        }
                         @screen md {
                             width: calc(97% / 2);
                             margin-top:1rem;
+                            
                         }
                         @screen lg{
                             width: calc(97% / 3);
@@ -63,7 +72,9 @@
             .boxSelect{
                 @apply flex justify-between w-full;
                 padding: 2.5rem 0;
-           
+                div{
+                    max-width: 17.6rem;
+                }
                 @screen xl {
                     @apply block;
                     width: auto;

From db1ad6b07bb02db4a2d688dae2519aaa4cade732 Mon Sep 17 00:00:00 2001
From: Quangnhankie <nhantran@kie.io>
Date: Thu, 16 Sep 2021 14:41:18 +0700
Subject: [PATCH 07/17] bug: delete import classNames

---
 report.20210916.143314.10644.0.001.json       | 635 ++++++++++++++++++
 .../components/HeaderMenu/HeaderMenu.tsx      |   1 -
 2 files changed, 635 insertions(+), 1 deletion(-)
 create mode 100644 report.20210916.143314.10644.0.001.json

diff --git a/report.20210916.143314.10644.0.001.json b/report.20210916.143314.10644.0.001.json
new file mode 100644
index 000000000..c4641195e
--- /dev/null
+++ b/report.20210916.143314.10644.0.001.json
@@ -0,0 +1,635 @@
+
+{
+  "header": {
+    "reportVersion": 1,
+    "event": "Allocation failed - JavaScript heap out of memory",
+    "trigger": "FatalError",
+    "filename": "report.20210916.143314.10644.0.001.json",
+    "dumpEventTime": "2021-09-16T14:33:14Z",
+    "dumpEventTimeStamp": "1631777594647",
+    "processId": 10644,
+    "cwd": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce",
+    "commandLine": [
+      "node",
+      "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce\\node_modules\\.bin\\\\..\\next\\dist\\bin\\next",
+      "dev"
+    ],
+    "nodejsVersion": "v12.15.0",
+    "wordSize": 64,
+    "arch": "x64",
+    "platform": "win32",
+    "componentVersions": {
+      "node": "12.15.0",
+      "v8": "7.7.299.13-node.16",
+      "uv": "1.33.1",
+      "zlib": "1.2.11",
+      "brotli": "1.0.7",
+      "ares": "1.15.0",
+      "modules": "72",
+      "nghttp2": "1.40.0",
+      "napi": "5",
+      "llhttp": "2.0.4",
+      "http_parser": "2.9.3",
+      "openssl": "1.1.1d",
+      "cldr": "35.1",
+      "icu": "64.2",
+      "tz": "2019c",
+      "unicode": "12.1"
+    },
+    "release": {
+      "name": "node",
+      "lts": "Erbium",
+      "headersUrl": "https://nodejs.org/download/release/v12.15.0/node-v12.15.0-headers.tar.gz",
+      "sourceUrl": "https://nodejs.org/download/release/v12.15.0/node-v12.15.0.tar.gz",
+      "libUrl": "https://nodejs.org/download/release/v12.15.0/win-x64/node.lib"
+    },
+    "osName": "Windows_NT",
+    "osRelease": "10.0.19043",
+    "osVersion": "Windows 10 Pro",
+    "osMachine": "x86_64",
+    "cpus": [
+      {
+        "model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
+        "speed": 2395,
+        "user": 4751531,
+        "nice": 0,
+        "sys": 2306406,
+        "idle": 17286484,
+        "irq": 211515
+      },
+      {
+        "model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
+        "speed": 2395,
+        "user": 4863890,
+        "nice": 0,
+        "sys": 1779625,
+        "idle": 17700703,
+        "irq": 34734
+      },
+      {
+        "model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
+        "speed": 2395,
+        "user": 5401078,
+        "nice": 0,
+        "sys": 1836687,
+        "idle": 17106453,
+        "irq": 23031
+      },
+      {
+        "model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
+        "speed": 2395,
+        "user": 5444765,
+        "nice": 0,
+        "sys": 1738531,
+        "idle": 17160921,
+        "irq": 17453
+      }
+    ],
+    "networkInterfaces": [
+      {
+        "name": "Wi-Fi",
+        "internal": false,
+        "mac": "a4:17:31:1d:cc:e5",
+        "address": "2402:800:6318:9d24:f937:34a5:8214:a074",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "Wi-Fi",
+        "internal": false,
+        "mac": "a4:17:31:1d:cc:e5",
+        "address": "2402:800:6318:9d24:205b:1df6:f692:6c1f",
+        "netmask": "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "Wi-Fi",
+        "internal": false,
+        "mac": "a4:17:31:1d:cc:e5",
+        "address": "fe80::f937:34a5:8214:a074",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 19
+      },
+      {
+        "name": "Wi-Fi",
+        "internal": false,
+        "mac": "a4:17:31:1d:cc:e5",
+        "address": "192.168.1.13",
+        "netmask": "255.255.255.0",
+        "family": "IPv4"
+      },
+      {
+        "name": "Loopback Pseudo-Interface 1",
+        "internal": true,
+        "mac": "00:00:00:00:00:00",
+        "address": "::1",
+        "netmask": "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "Loopback Pseudo-Interface 1",
+        "internal": true,
+        "mac": "00:00:00:00:00:00",
+        "address": "127.0.0.1",
+        "netmask": "255.0.0.0",
+        "family": "IPv4"
+      }
+    ],
+    "host": "DESKTOP-TILU55O"
+  },
+  "javascriptStack": {
+    "message": "No stack.",
+    "stack": [
+      "Unavailable."
+    ]
+  },
+  "nativeStack": [
+    {
+      "pc": "0x00007ff7f3851759",
+      "symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+10873"
+    },
+    {
+      "pc": "0x00007ff7f3855b7c",
+      "symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+28316"
+    },
+    {
+      "pc": "0x00007ff7f3854b38",
+      "symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+24152"
+    },
+    {
+      "pc": "0x00007ff7f394446b",
+      "symbol": "v8::base::CPU::has_sse+37723"
+    },
+    {
+      "pc": "0x00007ff7f4148d9e",
+      "symbol": "v8::Isolate::ReportExternalAllocationLimitReached+94"
+    },
+    {
+      "pc": "0x00007ff7f4130de1",
+      "symbol": "v8::SharedArrayBuffer::Externalize+833"
+    },
+    {
+      "pc": "0x00007ff7f3ffe6ac",
+      "symbol": "v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436"
+    },
+    {
+      "pc": "0x00007ff7f4009a50",
+      "symbol": "v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312"
+    },
+    {
+      "pc": "0x00007ff7f4006584",
+      "symbol": "v8::internal::Heap::PageFlagsAreConsistent+3204"
+    },
+    {
+      "pc": "0x00007ff7f3ffbe13",
+      "symbol": "v8::internal::Heap::CollectGarbage+1283"
+    },
+    {
+      "pc": "0x00007ff7f3ffa5e4",
+      "symbol": "v8::internal::Heap::AddRetainedMap+2356"
+    },
+    {
+      "pc": "0x00007ff7f401b8b5",
+      "symbol": "v8::internal::Factory::NewFillerObject+53"
+    },
+    {
+      "pc": "0x00007ff7f3d87b89",
+      "symbol": "v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+4057"
+    },
+    {
+      "pc": "0x00007ff7f4574d3d",
+      "symbol": "v8::internal::SetupIsolateDelegate::SetupHeap+567949"
+    },
+    {
+      "pc": "0x000003477520dd23",
+      "symbol": ""
+    }
+  ],
+  "javascriptHeap": {
+    "totalMemory": 2169589760,
+    "totalCommittedMemory": 2169589760,
+    "usedMemory": 2052092520,
+    "availableMemory": 60753408,
+    "memoryLimit": 2197815296,
+    "heapSpaces": {
+      "read_only_space": {
+        "memorySize": 262144,
+        "committedMemory": 262144,
+        "capacity": 261872,
+        "used": 32296,
+        "available": 229576
+      },
+      "new_space": {
+        "memorySize": 33554432,
+        "committedMemory": 33554432,
+        "capacity": 16759808,
+        "used": 1314664,
+        "available": 15445144
+      },
+      "old_space": {
+        "memorySize": 1655812096,
+        "committedMemory": 1655812096,
+        "capacity": 1577001080,
+        "used": 1576907736,
+        "available": 93344
+      },
+      "code_space": {
+        "memorySize": 4882432,
+        "committedMemory": 4882432,
+        "capacity": 4069312,
+        "used": 4069312,
+        "available": 0
+      },
+      "map_space": {
+        "memorySize": 8916992,
+        "committedMemory": 8916992,
+        "capacity": 4130000,
+        "used": 4130000,
+        "available": 0
+      },
+      "large_object_space": {
+        "memorySize": 464965632,
+        "committedMemory": 464965632,
+        "capacity": 464541264,
+        "used": 464541264,
+        "available": 0
+      },
+      "code_large_object_space": {
+        "memorySize": 1196032,
+        "committedMemory": 1196032,
+        "capacity": 1097248,
+        "used": 1097248,
+        "available": 0
+      },
+      "new_large_object_space": {
+        "memorySize": 0,
+        "committedMemory": 0,
+        "capacity": 16759808,
+        "used": 0,
+        "available": 16759808
+      }
+    }
+  },
+  "resourceUsage": {
+    "userCpuSeconds": 3438.73,
+    "kernelCpuSeconds": 172.546,
+    "cpuConsumptionPercent": 31.9469,
+    "maxRss": 3366490112,
+    "pageFaults": {
+      "IORequired": 29847545,
+      "IONotRequired": 0
+    },
+    "fsActivity": {
+      "reads": 41064,
+      "writes": 891846
+    }
+  },
+  "libuv": [
+  ],
+  "environmentVariables": {
+    "=G:": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce",
+    "ALLUSERSPROFILE": "C:\\ProgramData",
+    "ANDROID_HOME": "G:\\ASDK",
+    "ANDROID_SDK_ROOT": "G:\\ASDK",
+    "APPDATA": "C:\\Users\\nhan\\AppData\\Roaming",
+    "APPLICATION_INSIGHTS_NO_DIAGNOSTIC_CHANNEL": "true",
+    "ChocolateyInstall": "C:\\ProgramData\\chocolatey",
+    "ChocolateyLastPathUpdate": "132608575831335062",
+    "CHROME_CRASHPAD_PIPE_NAME": "\\\\.\\pipe\\crashpad_7556_KVXXHZZOUDSIJETD",
+    "CLASSPATH": "C:\\Program Files\\Java\\jdk1.8.0_231\\bin",
+    "COLORTERM": "truecolor",
+    "COMMERCE_CUSTOMERAUTH_ENABLED": "true",
+    "COMMERCE_PROVIDER": "vendure",
+    "CommonProgramFiles": "C:\\Program Files\\Common Files",
+    "CommonProgramFiles(x86)": "C:\\Program Files (x86)\\Common Files",
+    "CommonProgramW6432": "C:\\Program Files\\Common Files",
+    "COMPUTERNAME": "DESKTOP-TILU55O",
+    "ComSpec": "C:\\WINDOWS\\system32\\cmd.exe",
+    "dp0": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce\\node_modules\\.bin\\",
+    "DriverData": "C:\\Windows\\System32\\Drivers\\DriverData",
+    "FPS_BROWSER_APP_PROFILE_STRING": "Internet Explorer",
+    "FPS_BROWSER_USER_PROFILE_STRING": "Default",
+    "GIT_ASKPASS": "c:\\Users\\nhan\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass.sh",
+    "GIT_LFS_PATH": "C:\\Program Files\\Git LFS",
+    "HOME": "C:\\Users\\nhan",
+    "HOMEDRIVE": "C:",
+    "HOMEPATH": "\\Users\\nhan",
+    "INIT_CWD": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce",
+    "JAVA_HOME": "C:\\Program Files\\Java\\jdk1.8.0_281",
+    "LANG": "en_US.UTF-8",
+    "LOCALAPPDATA": "C:\\Users\\nhan\\AppData\\Local",
+    "LOGONSERVER": "\\\\DESKTOP-TILU55O",
+    "NEXT_PUBLIC_VENDURE_LOCAL_URL": "/vendure-shop-api",
+    "NEXT_PUBLIC_VENDURE_SHOP_API_URL": "https://demo.vendure.io/shop-api",
+    "NODE": "C:\\Program Files\\nodejs\\node.exe",
+    "NODE_ENV": "development",
+    "NODE_EXE": "C:\\Program Files\\nodejs\\\\node.exe",
+    "NODE_OPTIONS": "'--inspect' ",
+    "NPM_CLI_JS": "C:\\Program Files\\nodejs\\\\node_modules\\npm\\bin\\npm-cli.js",
+    "npm_config_access": "",
+    "npm_config_allow_same_version": "",
+    "npm_config_also": "",
+    "npm_config_always_auth": "",
+    "npm_config_argv": "{\"remain\":[],\"cooked\":[\"run\",\"dev-windows\"],\"original\":[\"run\",\"dev-windows\"]}",
+    "npm_config_audit": "true",
+    "npm_config_audit_level": "low",
+    "npm_config_auth_type": "legacy",
+    "npm_config_before": "",
+    "npm_config_bin_links": "true",
+    "npm_config_browser": "",
+    "npm_config_ca": "",
+    "npm_config_cache": "C:\\Users\\nhan\\AppData\\Roaming\\npm-cache",
+    "npm_config_cache_lock_retries": "10",
+    "npm_config_cache_lock_stale": "60000",
+    "npm_config_cache_lock_wait": "10000",
+    "npm_config_cache_max": "Infinity",
+    "npm_config_cache_min": "10",
+    "npm_config_cafile": "",
+    "npm_config_cert": "",
+    "npm_config_cidr": "",
+    "npm_config_color": "true",
+    "npm_config_commit_hooks": "true",
+    "npm_config_depth": "Infinity",
+    "npm_config_description": "true",
+    "npm_config_dev": "",
+    "npm_config_dry_run": "",
+    "npm_config_editor": "notepad.exe",
+    "npm_config_engine_strict": "",
+    "npm_config_fetch_retries": "2",
+    "npm_config_fetch_retry_factor": "10",
+    "npm_config_fetch_retry_maxtimeout": "60000",
+    "npm_config_fetch_retry_mintimeout": "10000",
+    "npm_config_force": "",
+    "npm_config_format_package_lock": "true",
+    "npm_config_fund": "true",
+    "npm_config_git": "git",
+    "npm_config_git_tag_version": "true",
+    "npm_config_global": "",
+    "npm_config_globalconfig": "C:\\Users\\nhan\\AppData\\Roaming\\npm\\etc\\npmrc",
+    "npm_config_globalignorefile": "C:\\Users\\nhan\\AppData\\Roaming\\npm\\etc\\npmignore",
+    "npm_config_global_style": "",
+    "npm_config_group": "",
+    "npm_config_ham_it_up": "",
+    "npm_config_heading": "npm",
+    "npm_config_https_proxy": "",
+    "npm_config_if_present": "",
+    "npm_config_ignore_prepublish": "",
+    "npm_config_ignore_scripts": "",
+    "npm_config_init_author_email": "",
+    "npm_config_init_author_name": "",
+    "npm_config_init_author_url": "",
+    "npm_config_init_license": "ISC",
+    "npm_config_init_module": "C:\\Users\\nhan\\.npm-init.js",
+    "npm_config_init_version": "1.0.0",
+    "npm_config_json": "",
+    "npm_config_key": "",
+    "npm_config_legacy_bundling": "",
+    "npm_config_link": "",
+    "npm_config_local_address": "",
+    "npm_config_loglevel": "notice",
+    "npm_config_logs_max": "10",
+    "npm_config_long": "",
+    "npm_config_maxsockets": "50",
+    "npm_config_message": "%s",
+    "npm_config_metrics_registry": "https://registry.npmjs.org/",
+    "npm_config_node_gyp": "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js",
+    "npm_config_node_options": "",
+    "npm_config_node_version": "12.15.0",
+    "npm_config_noproxy": "",
+    "npm_config_offline": "",
+    "npm_config_onload_script": "",
+    "npm_config_only": "",
+    "npm_config_optional": "true",
+    "npm_config_otp": "",
+    "npm_config_package_lock": "true",
+    "npm_config_package_lock_only": "",
+    "npm_config_parseable": "",
+    "npm_config_prefer_offline": "",
+    "npm_config_prefer_online": "",
+    "npm_config_prefix": "C:\\Users\\nhan\\AppData\\Roaming\\npm",
+    "npm_config_preid": "",
+    "npm_config_production": "",
+    "npm_config_progress": "true",
+    "npm_config_proxy": "",
+    "npm_config_read_only": "",
+    "npm_config_rebuild_bundle": "true",
+    "npm_config_registry": "https://registry.npmjs.org/",
+    "npm_config_rollback": "true",
+    "npm_config_save": "true",
+    "npm_config_save_bundle": "",
+    "npm_config_save_dev": "",
+    "npm_config_save_exact": "",
+    "npm_config_save_optional": "",
+    "npm_config_save_prefix": "^",
+    "npm_config_save_prod": "",
+    "npm_config_scope": "",
+    "npm_config_scripts_prepend_node_path": "warn-only",
+    "npm_config_script_shell": "",
+    "npm_config_searchexclude": "",
+    "npm_config_searchlimit": "20",
+    "npm_config_searchopts": "",
+    "npm_config_searchstaleness": "900",
+    "npm_config_send_metrics": "",
+    "npm_config_shell": "C:\\WINDOWS\\system32\\cmd.exe",
+    "npm_config_shrinkwrap": "true",
+    "npm_config_sign_git_commit": "",
+    "npm_config_sign_git_tag": "",
+    "npm_config_sso_poll_frequency": "500",
+    "npm_config_sso_type": "oauth",
+    "npm_config_strict_ssl": "true",
+    "npm_config_tag": "latest",
+    "npm_config_tag_version_prefix": "v",
+    "npm_config_timing": "",
+    "npm_config_tmp": "C:\\Users\\nhan\\AppData\\Local\\Temp",
+    "npm_config_umask": "0000",
+    "npm_config_unicode": "",
+    "npm_config_unsafe_perm": "true",
+    "npm_config_update_notifier": "true",
+    "npm_config_usage": "",
+    "npm_config_user": "",
+    "npm_config_userconfig": "C:\\Users\\nhan\\.npmrc",
+    "npm_config_user_agent": "npm/6.13.4 node/v12.15.0 win32 x64",
+    "npm_config_version": "",
+    "npm_config_versions": "",
+    "npm_config_viewer": "browser",
+    "npm_execpath": "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js",
+    "npm_lifecycle_event": "dev-windows",
+    "npm_lifecycle_script": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
+    "npm_node_execpath": "C:\\Program Files\\nodejs\\node.exe",
+    "npm_package_dependencies_autoprefixer": "^10.2.6",
+    "npm_package_dependencies_body_scroll_lock": "^3.1.5",
+    "npm_package_dependencies_classnames": "^2.3.1",
+    "npm_package_dependencies_cookie": "^0.4.1",
+    "npm_package_dependencies_email_validator": "^2.0.4",
+    "npm_package_dependencies_eslint": "^7.32.0",
+    "npm_package_dependencies_eslint_config_next": "^11.1.2",
+    "npm_package_dependencies_immutability_helper": "^3.1.1",
+    "npm_package_dependencies_js_cookie": "^2.2.1",
+    "npm_package_dependencies_keen_slider": "^5.5.1",
+    "npm_package_dependencies_lodash_debounce": "^4.0.8",
+    "npm_package_dependencies_lodash_random": "^3.2.0",
+    "npm_package_dependencies_lodash_throttle": "^4.1.1",
+    "npm_package_dependencies_next": "^11.0.0",
+    "npm_package_dependencies_next_seo": "^4.26.0",
+    "npm_package_dependencies_next_themes": "^0.0.14",
+    "npm_package_dependencies_postcss": "^8.3.5",
+    "npm_package_dependencies_postcss_nesting": "^8.0.1",
+    "npm_package_dependencies_react": "^17.0.2",
+    "npm_package_dependencies_react_dom": "^17.0.2",
+    "npm_package_dependencies_react_fast_marquee": "^1.1.4",
+    "npm_package_dependencies_react_merge_refs": "^1.1.0",
+    "npm_package_dependencies_react_player": "^2.9.0",
+    "npm_package_dependencies_react_use_measure": "^2.0.4",
+    "npm_package_dependencies_sass": "^1.38.0",
+    "npm_package_dependencies_swell_js": "^4.0.0-next.0",
+    "npm_package_dependencies_swr": "^0.5.6",
+    "npm_package_dependencies_tabbable": "^5.2.0",
+    "npm_package_dependencies_tailwindcss": "^2.2.2",
+    "npm_package_dependencies_uuidv4": "^6.2.10",
+    "npm_package_dependencies__react_spring_web": "^9.2.1",
+    "npm_package_dependencies__vercel_fetch": "^6.1.0",
+    "npm_package_description": "[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20e-commerce%20sites.&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&integration-ids=oac_MuWZiE4jtmQ2ejZQaQ7ncuDT)",
+    "npm_package_devDependencies_deepmerge": "^4.2.2",
+    "npm_package_devDependencies_eslint_config_prettier": "^8.3.0",
+    "npm_package_devDependencies_graphql": "^15.5.1",
+    "npm_package_devDependencies_husky": "^6.0.0",
+    "npm_package_devDependencies_lint_staged": "^11.0.0",
+    "npm_package_devDependencies_postcss_flexbugs_fixes": "^5.0.2",
+    "npm_package_devDependencies_postcss_import": "^14.0.2",
+    "npm_package_devDependencies_postcss_preset_env": "^6.7.0",
+    "npm_package_devDependencies_prettier": "^2.3.0",
+    "npm_package_devDependencies_typescript": "4.3.4",
+    "npm_package_devDependencies__graphql_codegen_cli": "^1.21.5",
+    "npm_package_devDependencies__graphql_codegen_schema_ast": "^1.18.3",
+    "npm_package_devDependencies__graphql_codegen_typescript": "^1.22.2",
+    "npm_package_devDependencies__graphql_codegen_typescript_operations": "^1.18.1",
+    "npm_package_devDependencies__next_bundle_analyzer": "^10.2.3",
+    "npm_package_devDependencies__types_body_scroll_lock": "^2.6.1",
+    "npm_package_devDependencies__types_cookie": "^0.4.0",
+    "npm_package_devDependencies__types_js_cookie": "^2.2.6",
+    "npm_package_devDependencies__types_lodash_debounce": "^4.0.6",
+    "npm_package_devDependencies__types_lodash_random": "^3.2.6",
+    "npm_package_devDependencies__types_lodash_throttle": "^4.1.6",
+    "npm_package_devDependencies__types_node": "^15.12.4",
+    "npm_package_devDependencies__types_react": "^17.0.8",
+    "npm_package_engines_node": ">=14.x",
+    "npm_package_gitHead": "c85942add4e9b92f09d8be5c7904fe25fd254fbe",
+    "npm_package_license": "MIT",
+    "npm_package_lint_staged_______js_jsx_ts_tsx__0": "prettier --write",
+    "npm_package_lint_staged_______js_jsx_ts_tsx__1": "git add",
+    "npm_package_lint_staged_______md_mdx_json__0": "prettier --write",
+    "npm_package_lint_staged_______md_mdx_json__1": "git add",
+    "npm_package_name": "nextjs-commerce",
+    "npm_package_next_unused_alias__assets___0": "assets/*",
+    "npm_package_next_unused_alias__components___0": "components/*",
+    "npm_package_next_unused_alias__config___0": "config/*",
+    "npm_package_next_unused_alias__lib___0": "lib/*",
+    "npm_package_next_unused_alias__utils___0": "utils/*",
+    "npm_package_next_unused_debug": "true",
+    "npm_package_next_unused_entrypoints_0": "pages",
+    "npm_package_next_unused_include_0": "components",
+    "npm_package_next_unused_include_1": "lib",
+    "npm_package_next_unused_include_2": "pages",
+    "npm_package_readmeFilename": "README.md",
+    "npm_package_scripts_analyze": "BUNDLE_ANALYZE=both yarn build",
+    "npm_package_scripts_build": "next build",
+    "npm_package_scripts_dev": "NODE_OPTIONS='--inspect' PORT=3005 next dev",
+    "npm_package_scripts_dev_windows": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
+    "npm_package_scripts_find_unused": "npx next-unused",
+    "npm_package_scripts_generate": "graphql-codegen",
+    "npm_package_scripts_generate_definitions": "node framework/bigcommerce/scripts/generate-definitions.js",
+    "npm_package_scripts_generate_shopify": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config framework/shopify/codegen.json",
+    "npm_package_scripts_generate_vendure": "graphql-codegen --config framework/vendure/codegen.json",
+    "npm_package_scripts_prettier_fix": "prettier --write .",
+    "npm_package_scripts_start": "PORT=3005 next start",
+    "npm_package_sideEffects": "false",
+    "npm_package_version": "1.0.0",
+    "NPM_PREFIX_NPM_CLI_JS": "C:\\Users\\nhan\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js",
+    "NUMBER_OF_PROCESSORS": "4",
+    "OneDrive": "C:\\Users\\nhan\\OneDrive",
+    "OneDriveConsumer": "C:\\Users\\nhan\\OneDrive",
+    "OPENSSL_CONF": "C:\\Program Files\\PostgreSQL\\psqlODBC\\etc\\openssl.cnf",
+    "ORIGINAL_XDG_CURRENT_DESKTOP": "undefined",
+    "OS": "Windows_NT",
+    "Path": "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\npm-lifecycle\\node-gyp-bin;G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce\\node_modules\\.bin;C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;C:\\WINDOWS\\system32;C:\\WINDOWS;C:\\WINDOWS\\System32\\Wbem;C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\;C:\\WINDOWS\\System32\\OpenSSH\\;C:\\Program Files\\Java\\jdk1.8.0_231\\bin;C:\\Program Files\\nodejs\\;C:\\Program Files\\MySQL\\MySQL Server 8.0\\bin;C:\\Program Files\\Git\\cmd;C:\\Program Files\\MongoDB\\Server\\4.2\\bin;;C:\\Program Files\\Git LFS;D:\\hoc-fpt\\code-tren-lop\\php\\xampp3\\php;C:\\ProgramData\\ComposerSetup\\bin;C:\\ProgramData\\chocolatey\\bin;C:\\Program Files\\AdoptOpenJDK\\jdk8u192-b12\\bin;C:\\Program Files\\Java\\jdk1.8.0_211\\bin;C:\\Android\\android-sdk\\tools;C:\\Android\\android-sdk\\platform-tools;C:\\Android\\android-sdk\\tools\\bin;C:\\Program Files\\MySQL\\MySQL Shell 8.0\\bin\\;C:\\Program Files\\Java\\jdk1.8.0_231\\bin;C:\\Users\\nhan\\AppData\\Local\\Programs\\Microsoft VS Code\\bin;C:\\Users\\nhan\\AppData\\Roaming\\npm;C:\\Program Files\\MySQL\\MySQL Server 8.0\\bin;C:\\Program Files\\heroku\\bin;C:\\Users\\nhan\\AppData\\Local\\Microsoft\\WindowsApps;C:\\Users\\nhan\\AppData\\Roaming\\Composer\\vendor\\bin",
+    "PATHEXT": ".COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JSE;.WSF;.WSH;.MSC;.CPL",
+    "PORT": "3005 ",
+    "PROCESSOR_ARCHITECTURE": "AMD64",
+    "PROCESSOR_IDENTIFIER": "Intel64 Family 6 Model 58 Stepping 9, GenuineIntel",
+    "PROCESSOR_LEVEL": "6",
+    "PROCESSOR_REVISION": "3a09",
+    "ProgramData": "C:\\ProgramData",
+    "ProgramFiles": "C:\\Program Files",
+    "ProgramFiles(x86)": "C:\\Program Files (x86)",
+    "ProgramW6432": "C:\\Program Files",
+    "PROMPT": "$P$G",
+    "PSModulePath": "C:\\Users\\nhan\\Documents\\WindowsPowerShell\\Modules;C:\\Program Files\\WindowsPowerShell\\Modules;C:\\WINDOWS\\system32\\WindowsPowerShell\\v1.0\\Modules",
+    "PUBLIC": "C:\\Users\\Public",
+    "SESSIONNAME": "Console",
+    "SystemDrive": "C:",
+    "SystemRoot": "C:\\WINDOWS",
+    "TEMP": "C:\\Users\\nhan\\AppData\\Local\\Temp",
+    "TERM_PROGRAM": "vscode",
+    "TERM_PROGRAM_VERSION": "1.60.1",
+    "TMP": "C:\\Users\\nhan\\AppData\\Local\\Temp",
+    "TRACE_ID": "82005ee4f98e2f63",
+    "USERDOMAIN": "DESKTOP-TILU55O",
+    "USERDOMAIN_ROAMINGPROFILE": "DESKTOP-TILU55O",
+    "USERNAME": "nhan",
+    "USERPROFILE": "C:\\Users\\nhan",
+    "VSCODE_GIT_ASKPASS_MAIN": "c:\\Users\\nhan\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass-main.js",
+    "VSCODE_GIT_ASKPASS_NODE": "C:\\Users\\nhan\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe",
+    "VSCODE_GIT_IPC_HANDLE": "\\\\.\\pipe\\vscode-git-d5d8071aa9-sock",
+    "windir": "C:\\WINDOWS",
+    "_prog": "node",
+    "__NEXT_PROCESSED_ENV": "true"
+  },
+  "sharedObjects": [
+    "C:\\Program Files\\nodejs\\node.exe",
+    "C:\\WINDOWS\\SYSTEM32\\ntdll.dll",
+    "C:\\WINDOWS\\System32\\KERNEL32.DLL",
+    "C:\\WINDOWS\\System32\\KERNELBASE.dll",
+    "C:\\WINDOWS\\System32\\WS2_32.dll",
+    "C:\\WINDOWS\\System32\\RPCRT4.dll",
+    "C:\\WINDOWS\\System32\\ADVAPI32.dll",
+    "C:\\WINDOWS\\System32\\msvcrt.dll",
+    "C:\\WINDOWS\\System32\\sechost.dll",
+    "C:\\WINDOWS\\System32\\USER32.dll",
+    "C:\\WINDOWS\\System32\\win32u.dll",
+    "C:\\WINDOWS\\System32\\GDI32.dll",
+    "C:\\WINDOWS\\System32\\gdi32full.dll",
+    "C:\\WINDOWS\\System32\\msvcp_win.dll",
+    "C:\\WINDOWS\\System32\\ucrtbase.dll",
+    "C:\\WINDOWS\\System32\\PSAPI.DLL",
+    "C:\\WINDOWS\\System32\\CRYPT32.dll",
+    "C:\\WINDOWS\\System32\\bcrypt.dll",
+    "C:\\WINDOWS\\SYSTEM32\\dbghelp.dll",
+    "C:\\WINDOWS\\SYSTEM32\\IPHLPAPI.DLL",
+    "C:\\WINDOWS\\SYSTEM32\\USERENV.dll",
+    "C:\\WINDOWS\\SYSTEM32\\WINMM.dll",
+    "C:\\WINDOWS\\System32\\IMM32.DLL",
+    "C:\\WINDOWS\\SYSTEM32\\powrprof.dll",
+    "C:\\WINDOWS\\SYSTEM32\\UMPDC.dll",
+    "C:\\WINDOWS\\SYSTEM32\\CRYPTBASE.DLL",
+    "C:\\WINDOWS\\system32\\uxtheme.dll",
+    "C:\\WINDOWS\\System32\\combase.dll",
+    "C:\\WINDOWS\\system32\\mswsock.dll",
+    "C:\\WINDOWS\\SYSTEM32\\kernel.appcore.dll",
+    "C:\\WINDOWS\\System32\\bcryptprimitives.dll",
+    "C:\\WINDOWS\\System32\\NSI.dll",
+    "C:\\WINDOWS\\SYSTEM32\\dhcpcsvc6.DLL",
+    "C:\\WINDOWS\\SYSTEM32\\dhcpcsvc.DLL",
+    "C:\\WINDOWS\\SYSTEM32\\DNSAPI.dll",
+    "C:\\WINDOWS\\system32\\napinsp.dll",
+    "C:\\WINDOWS\\system32\\pnrpnsp.dll",
+    "C:\\WINDOWS\\system32\\wshbth.dll",
+    "C:\\WINDOWS\\system32\\NLAapi.dll",
+    "C:\\WINDOWS\\System32\\winrnr.dll",
+    "C:\\Windows\\System32\\rasadhlp.dll",
+    "C:\\WINDOWS\\System32\\fwpuclnt.dll"
+  ]
+}
\ No newline at end of file
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index ad9e30d96..869b029cd 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -9,7 +9,6 @@ import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/compo
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'
-import classNames from 'classnames'
 interface Props {
     children?: any,
     isFull?: boolean,

From 9186f8b011895e694e2bc509daae2bf76517f215 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Thu, 16 Sep 2021 14:43:14 +0700
Subject: [PATCH 08/17] :art: styles: quantity input shape common

:%s
---
 .../QuanittyInput/QuanittyInput.module.scss   | 19 ++++++++++--
 .../common/QuanittyInput/QuanittyInput.tsx    | 30 ++++++++++---------
 src/components/icons/IconMinus.tsx            |  8 ++---
 src/components/icons/IconPlus.tsx             |  8 ++---
 src/styles/_utilities.scss                    |  2 --
 5 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/src/components/common/QuanittyInput/QuanittyInput.module.scss b/src/components/common/QuanittyInput/QuanittyInput.module.scss
index d8a0e5fc1..7609ad10d 100644
--- a/src/components/common/QuanittyInput/QuanittyInput.module.scss
+++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss
@@ -1,10 +1,23 @@
 @import '../../../styles/utilities';
-.quanittyInputWarper{
-    border-color: theme("textColor.active");
-    @apply border border-solid inline-flex justify-between items-center custom-border-radius;
+.quanittyInputWarper {
+    @apply shape-common-border;
+    &::before{
+        height: 100%;
+        top: 1px;
+        background-color: var(--text-active);
+    }
+    .inner {
+        @apply inline-flex justify-between items-center;
+        margin: 0;
+    }
     .plusIcon, .minusIcon{
+        @apply flex justify-center items-center;
+        min-height: 2rem;
         &:hover{
             cursor: pointer;
+            svg path {
+                fill: var(--primary);
+            }
         }
     }
     &.default{
diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx
index 20baba9ea..e31abb880 100644
--- a/src/components/common/QuanittyInput/QuanittyInput.tsx
+++ b/src/components/common/QuanittyInput/QuanittyInput.tsx
@@ -4,8 +4,8 @@ import classNames from 'classnames'
 import { IconMinus, IconPlus } from '../../icons'
 interface QuanittyInputProps
   extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    'onChange' | 'min' | 'max' | 'step' | "type" | "size"
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'min' | 'max' | 'step' | "type" | "size"
   > {
   size?: 'default' | 'small'
   onChange?: (value: number) => void
@@ -63,18 +63,20 @@ const QuanittyInput = ({
 
   return (
     <div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
-      <div className={s.minusIcon} onClick={onMinusClick}>
-        <IconMinus />
-      </div>
-      <input
-        {...props}
-        type="number"
-        value={value}
-        onChange={onValueChange}
-        className={s.quanittyInput}
-      />
-      <div className={s.plusIcon} onClick={onPlusClick}>
-        <IconPlus />
+      <div className={s.inner}>
+        <div className={s.minusIcon} onClick={onMinusClick}>
+          <IconMinus />
+        </div>
+        <input
+          {...props}
+          type="number"
+          value={value}
+          onChange={onValueChange}
+          className={s.quanittyInput}
+        />
+        <div className={s.plusIcon} onClick={onPlusClick}>
+          <IconPlus />
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx
index abf3a2907..6e572412a 100644
--- a/src/components/icons/IconMinus.tsx
+++ b/src/components/icons/IconMinus.tsx
@@ -1,14 +1,14 @@
-const IconMinus = ({ ...props }) => {
+const IconMinus = () => {
   return (
     <svg
       width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      height="2"
+      viewBox="0 0 12 2"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
+        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
         fill="#141414"
       />
     </svg>
diff --git a/src/components/icons/IconPlus.tsx b/src/components/icons/IconPlus.tsx
index 63d6d2dd4..634027c4e 100644
--- a/src/components/icons/IconPlus.tsx
+++ b/src/components/icons/IconPlus.tsx
@@ -1,14 +1,14 @@
-const IconPlus = ({ ...props }) => {
+const IconPlus = () => {
   return (
     <svg
       width="12"
-      height="2"
-      viewBox="0 0 12 2"
+      height="12"
+      viewBox="0 0 12 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
+        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
         fill="#141414"
       />
     </svg>
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 5ce5f24af..8abfb0104 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -114,8 +114,6 @@
 
     .shape-common {
         position: relative;
-        $border: 2px;
-        margin: $border;
         clip-path: url(#svg-custom-shape);
     }
 

From 035fca4563386307b7bbeeb895a4f2fd5c2c819e Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Thu, 16 Sep 2021 14:57:23 +0700
Subject: [PATCH 09/17] :art: styles: button size small

:%s
---
 .../common/ButtonCommon/ButtonCommon.module.scss   | 14 ++++++++++++++
 .../common/ButtonCommon/ButtonCommon.tsx           |  2 +-
 .../common/ButtonIconBuy/ButtonIconBuy.tsx         |  4 ++--
 src/components/common/ProductCard/ProductCard.tsx  |  6 +++---
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index a0c33947d..32cf65655 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -103,6 +103,20 @@
       }
     }
   }
+  &.small {
+    .inner {
+      padding: .5rem 1rem;
+      &.onlyIcon {
+        padding: 1rem;
+      }
+      @screen md {
+        padding: .8rem 1.6rem;
+        &.onlyIcon {
+          padding: .8rem;
+        }
+      }
+    }
+  }
 
   &.large {
     .inner {
diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx
index 965e9519e..d83621d30 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -5,7 +5,7 @@ import s from './ButtonCommon.module.scss'
 interface Props {
     children?: React.ReactNode,
     type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
-    size?: 'default' | 'large',
+    size?: 'default' | 'large' | 'small',
     icon?: React.ReactNode,
     isIconSuffix?: boolean,
     loading?: boolean,
diff --git a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
index c1209c1f8..c93b8ca6f 100644
--- a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
+++ b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
@@ -4,13 +4,13 @@ import ButtonCommon from '../ButtonCommon/ButtonCommon'
 
 interface Props {
     type?: 'primary' | 'light' | 'ghost',
-    size?: 'default' | 'large',
+    size?: 'default' | 'large' | 'small',
     loading?: boolean,
     disabled?: boolean,
     onClick?: () => void,
 }
 
-const ButtonIconBuy = memo(({ type = 'light', size = 'default', loading = false, disabled, onClick }: Props) => {
+const ButtonIconBuy = memo(({ type = 'light', size = 'small', loading = false, disabled, onClick }: Props) => {
     return (
         <ButtonCommon
             type={type}
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx
index af982cbd1..a46e8a6fb 100644
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -63,15 +63,15 @@ const ProductCard = ({
         {
           isSingleButton ?
             <div className={s.cardButton}>
-              <ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon>
+              <ButtonCommon type="light" icon={<IconBuy />} size='small'>Add to cart</ButtonCommon>
             </div>
             :
             <>
               <div className={s.cardIcon}>
-                <ButtonIconBuy />
+                <ButtonIconBuy/>
               </div>
               <div className={s.cardButton}>
-                <ButtonCommon type="light">{buttonText}</ButtonCommon>
+                <ButtonCommon type="light" size='small'>{buttonText}</ButtonCommon>
               </div>
             </>
         }

From dfed9478c2910aedb11f804302952ec9691f4033 Mon Sep 17 00:00:00 2001
From: Quangnhankie <nhantran@kie.io>
Date: Thu, 16 Sep 2021 15:03:01 +0700
Subject: [PATCH 10/17] bug: fix z-index MenuNavigationProductList

---
 .../MenuNavigationProductList.module.scss                     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
index 3732c00d8..6c7ee9c17 100644
--- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
@@ -20,7 +20,7 @@
             width: 100%;
             height: 100vh;
             position: fixed;
-            z-index: 99999999999;
+            z-index: 9999999;
         }
     }
     .menuNavigationProductModal{
@@ -30,7 +30,7 @@
         top: 0;
         width: 100%;
         height: 100vh;
-        z-index: 999999999999;
+        z-index: 99999999;
         transform: translateY(100%);
 
         &.animation{

From bb5aec7dba497f3302128432328741fae511aba0 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Thu, 16 Sep 2021 15:04:11 +0700
Subject: [PATCH 11/17] :art: restyle: Layout for Account Page

---
 src/components/common/Layout/Layout.module.scss |  5 -----
 src/components/common/Layout/Layout.tsx         | 11 ++++++-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss
index 447ecb107..679b0b48f 100644
--- a/src/components/common/Layout/Layout.module.scss
+++ b/src/components/common/Layout/Layout.module.scss
@@ -8,11 +8,6 @@
         max-width: min( 100%, 1536px);
         margin: auto;
     }
-    .bgForAccount {
-        flex: 1;
-        width: 100%;
-        margin: auto;
-    }
 }
 .filter{
     @screen xl {
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index b1f2d5c0b..5d1a61985 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/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'
@@ -33,10 +33,11 @@ const Layout: FC<Props> = ({ children }) => {
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
                 <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
-                { router.pathname === "/account" ?
-                    <section className={s.bgForAccount}>{children}</section> :
-                    <main>{children}</main> }
-                {/* <main>{children}</main> */}
+                {   
+                    router.pathname === ROUTE.ACCOUNT ?
+                    <section>{children}</section> :
+                    <main>{children}</main> 
+                }
                 <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
                 <ScrollToTop visibilityHeight={1500} />
                 <Footer />

From fbfa580ade87e72e134f50823fe80014f4d6997e Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Thu, 16 Sep 2021 15:04:33 +0700
Subject: [PATCH 12/17] :bug: bug: fix bug in Account Page

---
 .../AccountInfomation.module.scss              | 18 ++++++++----------
 .../AccountInfomation/AccountInfomation.tsx    |  6 +++++-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
index 6e8150f1b..7b35b673b 100644
--- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
+++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
@@ -56,22 +56,20 @@
     }
 
     .editInfoBtn {
-        @apply text-center font-bold custom-border-radius;
-        margin: auto;
+        @apply flex items-center justify-center;
         margin-top: 2.4rem;
         margin-bottom: 2.4rem;
-        padding: .8rem 1.6rem;
-        color: #141414;
-        border: 1px solid #141414;
-        max-width: 8.8rem;
+        // padding: .8rem 1.6rem;
+        // color: #141414;
+        // border: 1px solid #141414;
+        // max-width: 8.8rem;
 
-        &:hover {
-            @apply cursor-pointer;
-            background-color: #FBFBFB;
+        ButtonCommon {
+            height: 700px;
         }
 
         @screen md {
-            margin-left: 0;
+            @apply block;
         }
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
index dac651fea..1506bc91b 100644
--- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
+++ b/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">Edit</ButtonCommon>
+            </div>
         </section>
     )
 }

From 1d988ee93a0fa95a5c2e018176d9dfa60b54327b Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Thu, 16 Sep 2021 15:16:23 +0700
Subject: [PATCH 13/17] :art: styles: FeaturedProductCard shape common, img
 common

:%s
---
 pages/test.tsx                                | 106 ++++++++----------
 .../common/ButtonIconBuy/ButtonIconBuy.tsx    |   2 +-
 .../FeaturedProductCard.module.scss           |  24 ++--
 .../FeaturedProductCard.tsx                   |   5 +-
 src/styles/_base.scss                         |   2 +-
 5 files changed, 63 insertions(+), 76 deletions(-)

diff --git a/pages/test.tsx b/pages/test.tsx
index a16ef6ed1..769a94e53 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,102 +1,84 @@
 import {
-  CartDrawer,
+  FeaturedProductCard,
   Layout
 } from 'src/components/common';
-import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
 // import { RecipeListPage } from 'src/components/modules/recipes';
 import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
-import { useModalCommon } from 'src/components/hooks';
+import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data';
 
 const CATEGORY = [
   {
-      name: 'All',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+    name: 'All',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
   },
   {
-      name: 'Veggie',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    name: 'Veggie',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
   },
   {
-      name: 'Seafood',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    name: 'Seafood',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
   },
   {
-      name: 'Frozen',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+    name: 'Frozen',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
   },
   {
-      name: 'Coffee Bean',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+    name: 'Coffee Bean',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
   },
   {
-      name: 'Sauce',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+    name: 'Sauce',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
   },
 ]
 const BRAND = [
   {
-      name: 'Maggi',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    name: 'Maggi',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
   },
   {
-      name: 'Cholimes',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    name: 'Cholimes',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
   },
   {
-      name: 'Chinsu',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+    name: 'Chinsu',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
   }
 ];
 
 const FEATURED = [
 
-    {
-        name: 'Best Sellers',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-    },
-    {
-        name: 'Sales',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
-    },
-    {
-        name: 'New Item',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-    },
-    {
-        name: 'Viewed',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
-    }
-  ];
+  {
+    name: 'Best Sellers',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+    name: 'Sales',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+    name: 'New Item',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+    name: 'Viewed',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
+  }
+];
 
 
-import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess'
-import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
-import SkeletonParagraph from 'src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph'
-import SkeletonImage from 'src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage'
 
+const data = PRODUCT_DATA_TEST[0]
 export default function Test() {
   return (
     <>
-    <div className="shape-common-border">
-      <div className="inner">
-        Lorem ipsum dolor sit amet.
-      </div>
-    </div>
-      {/* <BlogDetailPage /> */}
-      
-      {/* <RecipeListPage/> */}
-        {/*<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>*/}
-        {/* <button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
-           <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/>  */}
-           {/* <CartDrawer  /> */}
-           <div className="shape-common-lg">
-              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit maiores aut, delectus assumenda explicabo, dolore facilis, quasi quae sed obcaecati doloribus dolorum architecto aperiam nisi dignissimos consequuntur amet neque possimus.
-           </div>
-           <div className="shape-common-lg-border">
-              <div className="inner">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, porro aut. Quas, consequuntur! Officiis magni cum placeat magnam ut hic beatae error facere obcaecati. Labore eius explicabo fugit minus veritatis.
-              </div>
-           </div>
+      <FeaturedProductCard
+        imageSrc={data.imageSrc}
+        title="Sale 25% coffee bean"
+        subTitle="50 first orders within a day"
+        price={data.price}
+        originPrice="$20.00" />
     </>
   )
 }
diff --git a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
index c93b8ca6f..7b2cdd9ce 100644
--- a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
+++ b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
@@ -3,7 +3,7 @@ import { IconBuy } from 'src/components/icons'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
 
 interface Props {
-    type?: 'primary' | 'light' | 'ghost',
+    type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
     size?: 'default' | 'large' | 'small',
     loading?: boolean,
     disabled?: boolean,
diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
index eefd101c4..217b3944c 100644
--- a/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
@@ -3,7 +3,7 @@
     width: 59.8rem;
     height: 28.8rem;
     padding: 2.4rem;
-    @apply bg-primary-light inline-flex justify-start items-center custom-border-radius ;
+    @apply bg-primary-light inline-flex justify-start items-center shape-common;
     .left{
         width: 24rem;
         height: 24rem;
@@ -30,18 +30,15 @@
                 line-height: 2.4rem;
             }
             .priceWrapper{
-                @apply flex justify-start;
+                @apply flex justify-start sm-headline;
                 .price{
-                    @apply font-bold;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
-                    letter-spacing: -0.01em;
+                    @apply font-bold sm-headline;
                     color: var(--text-active);
                 }
                 .originPrice{
+                    @apply sm-headline;
+                    font-weight: normal;
                     margin-left: 0.8rem;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
                     color: var(--text-label);
                     text-decoration-line: line-through;
                 }
@@ -50,11 +47,18 @@
         .buttonWarpper{
             @apply flex;
             .icon{
-                width: 5.6rem;
+                button {
+                    >div {
+                        @apply bg-primary-light;
+                    }
+                }
             }
             .button{
                 margin-left: 0.8rem;
-                width: 20.6rem;
+                flex: 1;
+                button {
+                    @apply w-full;
+                }
             }
         }
     }
diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
index fb3d82d41..9cd84235a 100644
--- a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
@@ -4,6 +4,7 @@ import s from './FeaturedProductCard.module.scss'
 import { LANGUAGE } from '../../../utils/language.utils'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import { ImgWithLink } from '..'
 interface FeaturedProductCardProps extends FeaturedProductProps {
   buttonText?: string
 }
@@ -19,7 +20,7 @@ const FeaturedProductCard = ({
   return (
     <div className={s.featuredProductCardWarpper}>
       <div className={s.left}>
-        <img src={imageSrc} alt="image" />
+        <ImgWithLink src={imageSrc} alt={title}/>
       </div>
       <div className={s.right}>
         <div className={s.rightTop}>
@@ -32,7 +33,7 @@ const FeaturedProductCard = ({
         </div>
         <div className={s.buttonWarpper}>
           <div className={s.icon}>
-            <ButtonIconBuy />
+            <ButtonIconBuy size='default'/>
           </div>
           <div className={s.button}>
             <ButtonCommon>{buttonText}</ButtonCommon>
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index a3ba0a6db..41d33bdf1 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -3,7 +3,7 @@
 
 :root {
   --primary: #5b9a74;
-  --primary-light: #e0f6e8;
+  --primary-light: #e3f2e9;
   --primary-lightest: #effaf4;
 
   --info-dark: #00317a;

From c9ba83b2651e25e99085eccea3551a9fe62d8229 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Thu, 16 Sep 2021 15:23:48 +0700
Subject: [PATCH 14/17] :art: styles: HomeRecipe shape common

:%s
---
 .../modules/home/HomeRecipe/HomeRecipe.module.scss | 14 ++++----------
 src/styles/_utilities.scss                         |  2 +-
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
index 6ec4159a0..8f5145d88 100644
--- a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
+++ b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
@@ -17,17 +17,11 @@
 			padding-bottom: 3.2rem; 
       @apply flex justify-start spacing-horizontal;
       .tab{
-          font-family: var(--font-heading);
-          padding: 1.6rem 1.6rem 0.8rem 1.6rem;
-          font-size: 2.4rem;
-          line-height: 2.8rem;
-          @screen md{   
-            font-size: 3.2rem;
-            line-height: 4rem;
-          }
-					outline: none;
+          all: unset;
+          @apply heading-3 font-heading cursor-pointer outline-none;
+          padding: 1.6rem;
           &.active{
-            @apply text-background custom-border-radius bg-primary;
+            @apply text-background shape-common bg-primary;
           }
 					
       }
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 8abfb0104..af566560a 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -25,7 +25,7 @@
     }
     .heading-3 {
         font-size: 24px;
-        line-height: 32px;
+        line-height: 28px;
         letter-spacing: -0.01em;
         font-weight: bold;
         text-transform: uppercase;

From 533951ac785c283f0531db6d75c640ea69de098f Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Thu, 16 Sep 2021 17:25:20 +0700
Subject: [PATCH 15/17] :bug: bug: fix bug in Account Page

---
 .../AccountInfomation/AccountInfomation.module.scss      | 9 ++-------
 .../components/AccountInfomation/AccountInfomation.tsx   | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
index 7b35b673b..e8dd88a65 100644
--- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
+++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
@@ -16,7 +16,6 @@
         margin: auto;
         margin-bottom: 4rem;
         
-
         @screen md {
             margin-left: 0
         }
@@ -59,13 +58,9 @@
         @apply flex items-center justify-center;
         margin-top: 2.4rem;
         margin-bottom: 2.4rem;
-        // padding: .8rem 1.6rem;
-        // color: #141414;
-        // border: 1px solid #141414;
-        // max-width: 8.8rem;
 
-        ButtonCommon {
-            height: 700px;
+        button div {
+            background-color: #F5F4F2 !important;
         }
 
         @screen md {
diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
index 1506bc91b..241c631d6 100644
--- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
+++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
@@ -47,7 +47,7 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
             </div>
 
             <div className={s.editInfoBtn}>
-                <ButtonCommon onClick={showEditForm} type="light">Edit</ButtonCommon>
+                <ButtonCommon onClick={showEditForm} type="light" size="small">Edit</ButtonCommon>
             </div>
         </section>
     )

From 1b769e8258b6565a127532e70ce62e731b2e3cd7 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Thu, 16 Sep 2021 17:43:02 +0700
Subject: [PATCH 16/17] :art: styles: HomeRecipeTab shape

:%s
---
 .../home/HomeRecipe/HomeRecipe.module.scss    |  9 -----
 .../modules/home/HomeRecipe/HomeRecipe.tsx    | 35 ++++++++++++++++---
 .../HomeRecipeTab/HomeRecipeTab.module.scss   | 17 +++++++++
 .../HomeRecipeTab/HomeRecipeTab.tsx           | 26 ++++++++++++++
 4 files changed, 74 insertions(+), 13 deletions(-)
 create mode 100644 src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss
 create mode 100644 src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx

diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
index 8f5145d88..02a34d2bf 100644
--- a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
+++ b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
@@ -16,14 +16,5 @@
 			padding-top: 3.2rem; 
 			padding-bottom: 3.2rem; 
       @apply flex justify-start spacing-horizontal;
-      .tab{
-          all: unset;
-          @apply heading-3 font-heading cursor-pointer outline-none;
-          padding: 1.6rem;
-          &.active{
-            @apply text-background shape-common bg-primary;
-          }
-					
-      }
   }
 }
diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
index fa9daabf1..65c0b2ac7 100644
--- a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
+++ b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {  HeadingCommon, ViewAllItem } from 'src/components/common'
 import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'
 import RecipeCarousel from 'src/components/common/RecipeCarousel/RecipeCarousel'
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import image13 from "../../../../../public/assets/images/image13.png"
 import image14 from "../../../../../public/assets/images/image14.png"
 import image12 from "../../../../../public/assets/images/image12.png"
+import HomeRecipeTab from './HomeRecipeTab/HomeRecipeTab'
 
 interface HomeRecipeProps {
   data?: RecipeCardProps[]
@@ -44,7 +45,28 @@ const recipe:RecipeCardProps[] = [{
 }]
 
 
+const TABS = [
+  {
+    name: 'Noodle',
+    value: 'Noodle',
+  },
+  {
+    name: 'Curry',
+    value: 'Curry',
+  },
+  {
+    name: 'Special Recipes',
+    value: 'Special Recipes',
+  }
+]
+
 const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipes" }: HomeRecipeProps) => {
+  const [activeTab, setActiveTab] = useState<string>(TABS[0].value)
+
+  const  onTabChanged = (value: string) => {
+    setActiveTab(value)
+  }
+  
   return (
     <div className={s.homeRecipeWarpper}>
       <div className={s.top}>
@@ -56,9 +78,14 @@ const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipe
         </div>
       </div>
 			<div className={s.mid}>
-        <button className={classNames(s.tab,s.active)}>Noodle</button>
-        <button className={s.tab}>Curry</button>
-        <button className={s.tab}>Special Recipes</button>
+        {
+          TABS.map(item => <HomeRecipeTab
+            key={item.value}
+            activeValue={activeTab}
+            name={item.name}
+            value={item.value}
+            onClick={onTabChanged} />)
+        }
       </div>
       <div className={s.bot}>
         <RecipeCarousel data={data} itemKey={itemKey} />
diff --git a/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss
new file mode 100644
index 000000000..08c5e2777
--- /dev/null
+++ b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss
@@ -0,0 +1,17 @@
+@import "../../../../../styles/utilities";
+
+.tab {
+    all: unset;
+    @apply heading-3 font-heading cursor-pointer outline-none;
+    padding: 1.6rem;
+    &:focus {
+        outline: none;
+        filter: brightness(1.05);
+    }
+    &:focus-visible {
+        outline: 2px solid var(--text-active);
+    }
+    &.active {
+        @apply text-background shape-common bg-primary;
+    }
+}
diff --git a/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx
new file mode 100644
index 000000000..c9031bf1e
--- /dev/null
+++ b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx
@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './HomeRecipeTab.module.scss'
+
+interface Props {
+    activeValue: string
+    name: string
+    value: string
+    onClick: (value: string) => void
+}
+
+
+const HomeRecipeTab = ({ activeValue, name, value, onClick }: Props) => {
+    const handleClick = () => {
+        onClick(value)
+    }
+
+    return (
+        <button onClick={handleClick} className={classNames(s.tab, {
+            [s.active]: activeValue === value
+        })}>{name}</button>
+
+    );
+};
+
+export default HomeRecipeTab;
\ No newline at end of file

From c5a084fa3db92f33020b550a7a3894316247b747 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Thu, 16 Sep 2021 17:59:18 +0700
Subject: [PATCH 17/17] :art: styles: account page layout

:%s
---
 src/components/common/Layout/Layout.module.scss   | 15 +++++++++++----
 src/components/common/Layout/Layout.tsx           |  8 +++++---
 .../account/AccountPage/AccountPage.module.scss   |  4 ++--
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss
index 679b0b48f..97ed29624 100644
--- a/src/components/common/Layout/Layout.module.scss
+++ b/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;
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index 5d1a61985..979e55c84 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -33,10 +33,12 @@ const Layout: FC<Props> = ({ children }) => {
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
                 <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
-                {   
+                {
                     router.pathname === ROUTE.ACCOUNT ?
-                    <section>{children}</section> :
-                    <main>{children}</main> 
+                        <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} />
diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss
index 5660d7707..89beebd86 100644
--- a/src/components/modules/account/AccountPage/AccountPage.module.scss
+++ b/src/components/modules/account/AccountPage/AccountPage.module.scss
@@ -1,14 +1,14 @@
 @import '../../../../styles/utilities';
 
 .accountPage {
-    background-color: #F5F4F2;
-    margin-top: -3.2rem;
+    @apply bg-background-gray;
     padding: 3.2rem 2rem;
     min-height: 70rem;
 
     @screen md {
         padding-left: 2.8rem;
         padding-right: 2.8rem;
+        padding: 5.4rem 2rem;
     }
 
     @screen lg {