✨ feat: Account Page

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

@@ -8,6 +8,16 @@ import OrderInfomation from './components/OrderInformation/OrderInformation'
 import EditInfoModal from './components/EditInfoModal/EditInfoModal'
 
 const waiting = [
+    {
+        id: "NO 123456",
+        products: ["Tomato", "Fish", "Pork", "Onion"],
+        totalPrice : 1000
+    },
+    {
+        id: "NO 123456",
+        products: ["Tomato", "Fish", "Pork", "Onion"],
+        totalPrice : 1000
+    },
     {
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion"],
@@ -85,8 +95,6 @@ const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
                     {/* Thieu cai favorite */}
                     {/* <FavoriteProduct active={favoritesActive} favProducts={favProducts} /> */}
                 </div>
-
-                
             </section>
             <EditInfoModal accountInfo={account} closeModal={closeModal} visible={modalVisible} />
         </>

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

@@ -32,14 +32,13 @@
     }
 
     .editInfoBtn {
-        @apply text-center font-bold;
+        @apply text-center font-bold custom-border-radius;
         margin-top: 2.4rem;
         margin-bottom: 2.4rem;
         padding: .8rem 1.6rem;
         color: #141414;
         border: 1px solid #141414;
         max-width: 8.8rem;
-        border-radius: 25%;
 
         &:hover {
             @apply cursor-pointer;

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

@@ -55,10 +55,10 @@
         @apply flex;
 
         .buttonCancel {
-            @apply bg-white text-center font-bold;
+            @apply bg-white text-center font-bold custom-border-radius-lg;
             color: #141414;
             border: 1px solid #141414;
-            border-radius: 40% 30% 35% 20%/ 65% 55% 45% 50%;
+            // border-radius: 40% 30% 35% 20%/ 65% 55% 45% 50%;
             padding: 1.6rem;
             margin-right: 1.6rem;
             width: 100%;
@@ -69,10 +69,10 @@
         }
 
         .buttonSave {
-            @apply text-center font-bold;
+            @apply text-center font-bold custom-border-radius-lg;
             background-color: var(--primary);
             color: white;
-            border-radius: 40% 30% 35% 20%/ 65% 55% 45% 50%;
+            // border-radius: 40% 30% 35% 20%/ 65% 55% 45% 50%;
             padding: 1.6rem;
             width: 100%;
             &:hover {

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

@@ -4,6 +4,8 @@ import s from './EditInfoModal.module.scss'
 
 import {ModalCommon, MenuDropdown} from '../../../../../common'
 
+import {ButtonCommon} from '../../../../../common'
+
 interface EditInfoModalProps {
     accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
     visible: boolean;

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

@@ -8,9 +8,9 @@
 
     .tabs {
         margin-top: 3.2rem;
-    }
+    
-
+        .blank {
-    .tabPanes {
+            margin-bottom: 2.4rem;
-        margin-top: 2.4rem;
+        }
     }
 }

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

@@ -1,8 +1,8 @@
-import React, {useRef, useState, RefObject} from "react"
+import React from "react"
 import s from './OrderInformation.module.scss'
 
 import { TabCommon } from '../../../../../common'
-import TabPane from '../../components/TabPane/TabPane'
+import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
 import DeliveryItem from '../../../DeliveryItem/DeliveryItem'
 
 
@@ -13,31 +13,7 @@ interface OrderInformationProps {
     active: boolean
 }
 
-const OrderInformation = ({ waiting, delivering, delivered, active=true } : OrderInformationProps) => {
+const OrderInformation = ({ waiting, delivering, delivered, active } : OrderInformationProps) => {
-
-    const [activeTab, setActiveTab] = useState(0);
-    const [activeTabPane, setActiveTabPane] = useState("waiting");
-    const slider = useRef<HTMLDivElement>(null);
-
-    function slide(ref: RefObject<HTMLLIElement>) {
-        const width = ref.current.offsetWidth;
-        const left = ref.current.offsetLeft; 
-               
-        slider.current.style.width = (width-48).toString()+"px";
-        slider.current.style.left = left.toString()+"px";
-    }
-
-    function onTabClick(tabIndex: number, tabPane: string) {
-        setActiveTab(tabIndex);
-        setActiveTabPane(tabPane);
-        slide(tabs[tabIndex].ref)
-    }
-
-    const tabs = [
-        {ref: useRef<HTMLLIElement>(null), tabName: "Wait for comfirmation", active: activeTab === 0, onClick: () => onTabClick(0, "waiting") },
-        {ref: useRef<HTMLLIElement>(null), tabName: "Delivering", active: activeTab === 1, onClick: () => onTabClick(1, "delivering") },
-        {ref: useRef<HTMLLIElement>(null), tabName: "Delivered", active: activeTab === 2, onClick: () => onTabClick(2, "delivered") },
-    ]
 
     return (
         <section className={s.orderInformation}>
@@ -46,37 +22,40 @@ const OrderInformation = ({ waiting, delivering, delivered, active=true } : Orde
                     <div className={s.title}>Order Information</div>
 
                     <div className={s.tabs}>
-                        <TabCommon tabs={tabs} defaultActiveTab={activeTab} sliderRef={slider} slideToTab={slide} />
+                        <TabCommon>
-        
+                            <TabPane tabName={"Wait for Comfirmation"} >
-                        <div className={s.tabPanes}>
+                                <div className={s.blank}></div>
-                            <TabPane active={activeTabPane==="waiting" ? `active` : ""}>
                                 {
                                     waiting.map((order, i) => {
                                         return (
-                                            <DeliveryItem key={i} 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} />
                                         )
                                     }) 
                                 }
                             </TabPane>
-                            <TabPane active={activeTabPane==="delivering" ? `active` : ""}>
+
+                            <TabPane tabName={"Delivering"}>
+                                <div className={s.blank}></div>
                                 {
                                     delivering.map((order, i) => {
                                         return (
-                                            <DeliveryItem key={i} 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} />
                                         )
                                     }) 
                                 }
                             </TabPane>
-                            <TabPane active={activeTabPane==="delivered" ?`active` : ""}>
+
+                            <TabPane tabName={"Delivered"}>
+                                <div className={s.blank}></div>
                                 {
                                     delivered.map((order, i) => {
                                         return (
-                                            <DeliveryItem key={i} 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} />
                                         )
                                     }) 
                                 }
                             </TabPane>
-                        </div>
+                        </TabCommon>
                     </div>
                 </div>
             }