🚑 fix 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/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

@@ -5,9 +5,12 @@ import { HeadingCommon, TabPane } from "src/components/common"
 
 import AccountNavigation from '../AccountNavigation/AccountNavigation'
 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 { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
+
 const waiting = [
     {
         id: "NO 123456",
@@ -74,7 +77,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

@@ -38,6 +38,7 @@
 
     .shippingInfo {
         @apply heading-3 font-heading;
+        margin-bottom: .8rem;
     }
 
     .accountAddress {

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

@@ -32,30 +32,7 @@
     }
 
     .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,7 +1,7 @@
 import React from "react"
 import s from './EditInfoModal.module.scss'
 
-import { ModalCommon, Inputcommon, SelectCommon } from '../../../../../common'
+import { ModalCommon, Inputcommon, SelectCommon, ButtonCommon } from '../../../../../common'
 
 interface EditInfoModalProps {
     accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
@@ -58,8 +58,8 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod
                 </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.tsx

@@ -16,8 +16,6 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
 
     return (
         <section className={s.orderInformation}>
-            {
-                <div>
             <div className={s.title}>Order Information</div>
 
             <div className={s.tabs}>
@@ -56,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,11 +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;

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;