Merge pull request #44 from KieIO/m5-sonnguyen-hotfix

🚑 hotfix: Account Page

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <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.

src/components/common/TabCommon/TabCommon.module.scss

@@ -7,7 +7,7 @@
         .tabList {
             @apply flex;
             position: relative;
-            border-bottom: 2px solid #FBFBFB;
+            border-bottom: 2px solid #EBEBEB;
             padding: 0.8rem 0;
             &.center{
                 margin: auto;

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

@@ -1,27 +1,54 @@
 @import '../../../../styles/utilities';
 
 .accountNavigation {
-    @apply flex;
+    @apply relative;
     width: 100%;
 
+    @screen md {
+        @apply flex;
+        width: 100%;
+    }
+
     .slider {
+        @apply hidden; 
+        
+        @screen md {
             @apply inline-block;
             width: 0.2rem;
             height: 4.8rem;
             border-radius: 3px;
             background-color: var(--primary);
             position: absolute;
-        left: 11.2rem;
+            left: 0;
+            top: 450;
             transition: all .2s linear;
         }
+    }
     
     .tabList {
-        margin-top: 3.8rem;
+        @apply flex;
+        
+        @screen md {
+            @apply block;
+            margin-right: 0rem;
+        }
+
+        @screen lg {
+            @apply block;
+            margin-right: 4.8rem;
+        }
+
+        @screen xl {
+            @apply block;
             margin-right: 12.4rem;
         }
+    }
 
     .tabBody {
-        margin-top: -4.7rem;
         width: 100%;
+
+        @screen md {
+            margin-top: -8.6rem;
+        }
     }
 }

src/components/modules/account/AccountNavigation/AccountNavigation.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react"
 import s from './AccountNavigation.module.scss'
-
+import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
-import AccountNavigationItem from './components/AccountNavigationItem'
 import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane'
 
 interface AccountNavigationProps {
@@ -14,6 +13,12 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
     const sliderRef = useRef<HTMLDivElement>(null);
     const headerRef = useRef<HTMLUListElement>(null)
 
+    useEffect(() => {
+        if (defaultActiveIndex !== undefined) {
+            setActive(defaultActiveIndex)
+        }
+    }, [defaultActiveIndex])
+
     const onTabClick = (index: number) => {
         setActive(index)
     }
@@ -21,10 +26,12 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
     function slide(index: number) {       
         const active = headerRef.current?.children.item(index)?.getBoundingClientRect()
         const header = headerRef.current?.getBoundingClientRect()
+        const firstEl = headerRef.current?.children.item(0)?.getBoundingClientRect()
         const current = sliderRef.current
 
-        if (current && active && header) {
+        if (current && active && header && firstEl) {
-            const top = active.top;
+            const firstElTop = firstEl.top
+            const top = active.top - firstElTop;
             current.style.top = top.toString()+"px";
         }
     }
@@ -63,7 +70,6 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
                     })
                }
             </div>
-            <div ref={slider} className={s.slider}></div>
         </section>
     )
 }

src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss

@@ -1,17 +0,0 @@
-@import '../../../../../styles/utilities';
-
-.accountNavigationItem {
-    width: 28rem;
-    padding: 1.2rem 0 1.2rem 1.6rem;
-    margin-bottom: 1.2rem;
-
-
-    &:hover {
-        @apply cursor-pointer;
-    }
-
-    &.active {
-        background-color: #FBFBFB;
-        border-radius: 0 1.6rem 1.6rem 0;
-    }
-}

src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss

@@ -0,0 +1,46 @@
+@import '../../../../../../styles/utilities';
+
+.accountNavigationItem {
+    width: fit-content;
+    padding: 1.2rem 1.6rem 1.2rem 0rem;
+    
+    margin-bottom: 1.2rem;
+
+    &:hover {
+        @apply cursor-pointer;
+    }
+
+    &.active {
+        @apply shape-common font-bold;
+        background-color: var(--primary);
+        color: white;
+        padding: 1.2rem 1.6rem 1.2rem 1.6rem;
+        margin-right: 1.6rem;
+        
+        @screen md {
+            @apply font-normal;
+            background-color: #FBFBFB;
+            border-radius: 0 1.6rem 1.6rem 0;
+            color: #3D3D3D;
+            clip-path: none;
+        }
+    }
+
+    @screen md {
+        max-width: 24rem;
+        min-width: 22rem;
+        padding: 1.2rem 1.6rem 1.2rem 1.6rem;
+    }
+
+    @screen lg {
+        max-width: 26rem;
+        min-width: 23rem;
+        padding: 1.2rem 1.6rem 1.2rem 1.6rem;
+    }
+
+    @screen xl {
+        max-width: 28rem;
+        min-width: 24rem;
+        padding: 1.2rem 1.6rem 1.2rem 1.6rem;
+    }
+}

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

@@ -6,6 +6,8 @@
     margin-top: -3.2rem;
     padding-top: 3.2rem;
     padding-bottom: 3.2rem;
+    min-height: 70rem;
+
 
     @screen md {
         padding-left: 3.2rem;

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

@@ -1,18 +1,28 @@
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import s from './AccountPage.module.scss'
 
+import { HeadingCommon, TabPane } from "src/components/common"
+
 import AccountNavigation from '../AccountNavigation/AccountNavigation'
-import HeadingCommon from '../../../common/HeadingCommon/HeadingCommon'
 import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
+import FavouriteProducts from "./components/FavouriteProducts/FavouriteProducts"
 import OrderInfomation from './components/OrderInformation/OrderInformation'
 import EditInfoModal from './components/EditInfoModal/EditInfoModal'
-import TabPane from "src/components/common/TabCommon/components/TabPane/TabPane"
+
+import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
+import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils"
+import { useRouter } from "next/router"
 
 const waiting = [
     {
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
+    },
+    {
+        id: "NO 123457",
+        products: ["Tomato", "Fish", "Pork", "Onion"],
+        totalPrice : 1000
     }
 ]
 
@@ -21,6 +31,11 @@ const delivering = [
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
+    },
+    {
+        id: "NO 123457",
+        products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
+        totalPrice : 1000
     }
 ]
 
@@ -29,6 +44,11 @@ const delivered = [
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
+    },
+    {
+        id: "NO 123457",
+        products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
+        totalPrice : 1000
     }
 ]
 
@@ -45,12 +65,30 @@ let account = {
 interface AccountPageProps {
     defaultActiveContent?: "info" | "orders" | "favorites"
 }
+const getTabIndex = (tab?: string): number => {
+    switch (tab) {
+        case ACCOUNT_TAB.CUSTOMER_INFO:
+            return 0;
+        case ACCOUNT_TAB.ORDER:
+            return 1;
+        case ACCOUNT_TAB.FAVOURITE:
+            return 2;
+        default:
+            return 0
+    }
+}
 
 const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
-    
+    const router = useRouter()
-    const [activeTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
+    const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
 
+    useEffect(() => {
+        const query = router.query[QUERY_KEY.TAB] as string
+        const index = getTabIndex(query)
+        setActiveTab(index)
+    }, [router.query[QUERY_KEY.TAB]])
+
     function showModal() {
         setModalVisible(true);
     }
@@ -74,7 +112,7 @@ const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
                         <OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
                     </TabPane>
                     <TabPane tabName="Favourite"> 
-                        {/* <FavoriteProduct active={activeTab === 2} favProducts={favProducts} /> */}
+                        <FavouriteProducts products={PRODUCT_CART_DATA_TEST}  />
                     </TabPane>
                 </AccountNavigation>
             </section>

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

@@ -1,13 +1,11 @@
 @import '../../../../../../styles/utilities';
 
 .accountInfomation {
-    @apply flex justify-center items-center;
+    @apply block text-center;
-    text-align: center;
     margin-top: 1.6rem;
     
     @screen md {
-        @apply block;
+        @apply text-left;
-        text-align: left;
         margin-top: 0;
     }
 
@@ -32,17 +30,29 @@
         border: 1px solid var(--disabled);
         max-width: 39.2rem;
         min-width: 30rem;
+        margin: auto;
         margin-top: 2.4rem;
         margin-bottom: 2.4rem;
+
+        @screen md {
+            margin-left: 0;
+        }
     }
 
     .shippingInfo {
         @apply heading-3 font-heading;
+        margin-bottom: .8rem;
     }
 
     .accountAddress {
+        margin: auto;
+        max-width: 28rem;
+
+        @screen md {
             max-width: 31rem;
             min-width: none;
+            margin-left: 0;
+        }
     }
 
     .editInfoBtn {

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

@@ -21,8 +21,6 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
 
     return (
         <section className={s.accountInfomation}>
-            {
-                <div>
             <div className={s.avatar}>
                 <Image src={avatar} alt="avatar" />
             </div>
@@ -47,8 +45,6 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
             </div>
 
             <div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
-                </div>
-            }
         </section>
     )
 }

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

@@ -5,77 +5,35 @@
         @apply bg-white;
         margin-bottom: 1.6rem;
         width: 100%;
-        border: 2px solid #EBEBEB;
-        border-radius: .8rem;
-        padding: 1.6rem;
     }
 
     .inputDisable {
         margin-bottom: 1.6rem;
         width: 100%;
-        border: 2px solid #EBEBEB;
-        border-radius: .8rem;
-        padding: 1.6rem;
-        background-color: #EBEBEB;
         color: #CCCCCC;
     }
 
-    .inputStateWrapper {
-        @apply bg-white;
-        margin-bottom: 1.6rem;
-        margin-right: 1.6rem;
-        border: 2px solid #EBEBEB;
-        border-radius: .8rem;
-        padding: 1.6rem;
-
     .inputState {
         @apply bg-white cursor-pointer;
         border: white;
-        }
+        margin-right: 0.8rem;
+        height: fit-content;
     }
 
     .inputPostalCode {
         @apply bg-white;
-        margin-bottom: 1.6rem;
+        margin-left: 0.8rem;
-        border: 2px solid #EBEBEB;
-        border-radius: .8rem;
-        padding: 1.6rem;
     }
 
     .inputPhoneNumber {
         @apply bg-white;
         margin-bottom: 4rem;
         width: 100%;
-        border: 2px solid #EBEBEB;
+        margin-top: 1.6rem;
-        border-radius: .8rem;
-        padding: 1.6rem;
     }
 
     .buttons {
-        @apply flex;
+        @apply grid grid-cols-2;
-
+        grid-gap: 1.6rem;
-        .buttonCancel {
-            @apply bg-white text-center font-bold custom-border-radius-lg;
-            color: #141414;
-            border: 1px solid #141414;
-            padding: 1.6rem;
-            margin-right: 1.6rem;
-            width: 100%;
-            
-            &:hover {
-                @apply cursor-pointer;
-            }
-        }
-
-        .buttonSave {
-            @apply text-center font-bold custom-border-radius-lg;
-            background-color: var(--primary);
-            color: white;
-            padding: 1.6rem;
-            width: 100%;
-            &:hover {
-                @apply cursor-pointer;
-            }
-        }
     }
 }

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

@@ -1,10 +1,7 @@
-import classNames from "classnames"
+import React from "react"
-import React, { useState } from "react"
 import s from './EditInfoModal.module.scss'
 
-import {ModalCommon, MenuDropdown} from '../../../../../common'
+import { ModalCommon, Inputcommon, SelectCommon, ButtonCommon } from '../../../../../common'
-
-import {ButtonCommon} from '../../../../../common'
 
 interface EditInfoModalProps {
     accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
@@ -14,14 +11,6 @@ interface EditInfoModalProps {
 
 const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoModalProps) => {
 
-    const [name, setName] = useState(accountInfo.name);
-    const [email, setEmail] = useState(accountInfo.email);
-    const [address, setAddress] = useState(accountInfo.address);
-    const [state, setState] = useState(accountInfo.state);
-    const [city, setCity] = useState(accountInfo.city);
-    const [postalCode, setPostalCode] = useState(accountInfo.postalCode);
-    const [phoneNumber, setPhoneNumber] = useState(accountInfo.phoneNumber);
-
     function saveInfo() {
         console.log("saved !!!");
 
@@ -29,51 +18,48 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod
     }
 
     const states = [
-        {name: "D1", onClick: () => {setState("D1")}},
+        {name: "District 1", value: "D1"},
-        {name: "D2", onClick: () => {setState("D2")}},
+        {name: "District 2", value: "D2"},
-        {name: "D3", onClick: () => {setState("D3")}}
+        {name: "District 3", value: "D3"}
     ]
 
     return (
         <ModalCommon onClose={closeModal} visible={visible} title="Edit Infomation">
             <section className={s.editInfoModal}>
-                <div>
+                <div className={s.input}>
-                    <input className={s.input} type="text" name="name" placeholder="Name"
+                    <Inputcommon placeholder="Name" value={accountInfo.name} type="text" />
-                        value={name} onChange={e => {setName(e.target.value)}} />
                 </div>
-                <div>
+
-                    <input className={s.inputDisable} type="text" name="email" placeholder="Email"
+                <div className={s.inputDisable}>
-                        value={email} onChange={e => {setEmail(e.target.value)}} />
+                    <Inputcommon placeholder="Email" value={accountInfo.email} type="email" />
                 </div>
-                <div>
+
-                    <input className={s.input} type="text" name="address" placeholder="Address" 
+                <div className={s.input}>
-                        value={address} onChange={e => {setAddress(e.target.value)}}/>
+                    <Inputcommon placeholder="Address" value={accountInfo.address} type="text" />
                 </div>
-                <div>
+                
-                    <input className={s.input} type="text" name="city" placeholder="City"
+                <div className={s.input}>
-                        value={city} onChange={e => {setCity(e.target.value)}} />
+                    <Inputcommon placeholder="City" value={accountInfo.city} type="text" />
                 </div>
                 
+
                 <div className="flex">
-                    <div className={s.inputStateWrapper}>
+                    <div className={s.inputState}>
-                        <MenuDropdown options={states} isHasArrow={true} >
+                        <SelectCommon type="custom" placeholder="State" option={states} />
-                            <input className={s.inputState} type="text" name="state" placeholder="State"
-                                value={state} disabled />
-                        </MenuDropdown>
                     </div>
 
-                    <input className={s.inputPostalCode} type="text" name="postalCode" placeholder="Postal code"
+                    <div className={s.inputPostalCode}>
-                        value={postalCode} onChange={e => {setPostalCode(e.target.value)}} />
+                        <Inputcommon placeholder="Postal code" value={accountInfo.postalCode} type="text" />
+                    </div>
                 </div>
 
-                <div>
+                <div className={s.inputPhoneNumber}>
-                    <input className={s.inputPhoneNumber} type="text" name="phoneNumber" placeholder="Phone number"
+                    <Inputcommon placeholder="Phone number" value={accountInfo.phoneNumber} type="text" />
-                        value={phoneNumber} onChange={e => {setPhoneNumber(e.target.value)}} />
                 </div>
 
                 <div className={s.buttons}>
-                    <div onClick={closeModal} className={s.buttonCancel}>Cancel</div>
+                    <ButtonCommon onClick={closeModal} type="light" size="large" >Cancel</ButtonCommon>
-                    <div onClick={saveInfo} className={s.buttonSave}>Save</div>
+                    <ButtonCommon onClick={saveInfo} size="large" >Save</ButtonCommon>
                 </div>
             </section>
         </ModalCommon>

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

@@ -0,0 +1,5 @@
+@import '../../../../../../styles/utilities';
+
+.favouriteProducts {
+   
+}

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

@@ -0,0 +1,20 @@
+import React from "react"
+import s from './FavouriteProducts.module.scss'
+import {ProductList} from '../../../../../common'
+import { ProductCardProps } from '../../../../../common/ProductCard/ProductCard'
+
+
+interface FavouriteProductsProps {
+    products: ProductCardProps[];
+}
+
+const FavouriteProducts = ({ products } : FavouriteProductsProps) => {
+
+    return (
+        <section className={s.favouriteProducts}>
+            <ProductList data={products} />
+        </section>
+    )
+}
+
+export default FavouriteProducts

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

@@ -8,6 +8,8 @@
 
     .tabs {
         margin-top: 3.2rem;
+        width: 100%;
+        border-bottom: black;
     
         .blank {
             margin-bottom: 2.4rem;

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

@@ -10,15 +10,12 @@ interface OrderInformationProps {
     waiting: {id: string, products: string[], totalPrice: number}[],
     delivering: {id: string, products: string[], totalPrice: number}[],
     delivered: {id: string, products: string[], totalPrice: number}[],
-    // active?: boolean
 }
 
 const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationProps) => {
 
     return (
         <section className={s.orderInformation}>
-            {
-                <div>
             <div className={s.title}>Order Information</div>
 
             <div className={s.tabs}>
@@ -57,8 +54,6 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
                     </TabPane>
                 </TabCommon>
             </div>
-                </div>
-            }
         </section>
     )
 }

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

@@ -1,9 +1,8 @@
 @import '../../../../styles/utilities';
 
 .deliveryItem {
-    @apply flex bg-white items-center custom-border-radius;
+    @apply flex bg-white items-center shape-common;
     margin-bottom: 1.6rem;
-    border: 1px solid var(--primary)
 }
 
 .separator {

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

@@ -2,48 +2,7 @@
 
 .idAndStatus {
     @apply items-center;
-    padding: 2.4rem 0 2.4rem 1rem;
-
-    @screen md {
     padding: 2.4rem 0 2.4rem 1.2rem;
-    }
-
-    @screen lg {
-        padding: 2.4rem 0 2.4rem 2.4rem;
-    }
-
-    .id {
-        @apply font-bold;
-        margin-bottom: .8rem;
-    }
-
-    .deliveryStatus {
-        @apply font-bold text-white;
-        font-size: 1.2rem;
-        line-height: 2rem;
-        padding: 0 .8rem;
-        border-radius: 0.5rem;
-        width: fit-content;
-
-        &.waiting {
-            background-color: #D9A645;
-        }
-        &.delivering {
-            background-color: var(--info-dark);
-        }
-        &.delivered {
-            background-color: var(--primary);
-        }
-    }
-}@import '../../../../../../styles/utilities';
-
-.idAndStatus {
-    @apply items-center;
-    padding: 2.4rem 0 2.4rem 1rem;
-
-    @screen md {
-        padding: 2.4rem 0 2.4rem 1.2rem;
-    }
 
     @screen lg {
         padding: 2.4rem 0 2.4rem 2.4rem;

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}>
@@ -16,7 +16,7 @@ const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
             </div>
             <div className={classNames(s.deliveryStatus, {
                 [s[status]]: status
-            })}> {status}
+            })}> {status.charAt(0).toUpperCase() + status.slice(1)}
             </div>
         </div>
     )

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

@@ -2,14 +2,9 @@
 
 .reOrder {
     @apply text-white custom-border-radius hidden font-bold;
-    padding: .4rem .6rem;
-    margin-right: 1rem;
-    background-color: var(--primary);
-
-    @screen md {
     padding: .4rem .6rem;
     margin-right: 1.2rem;
-    }
+    background-color: var(--primary);
 
     @screen lg {
         padding: .8rem 1.2rem;

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

@@ -2,11 +2,7 @@
 
 .totalPrice {
     margin-left: auto; 
-    margin-right: 1rem;
-
-    @screen md {
     margin-right: 1.2rem;
-    }
 
     @screen lg {
         margin-right: 2.4rem;