mirror of
https://github.com/vercel/commerce.git
synced 2025-07-21 11:51:20 +00:00
✨ feat: Account Page
This commit is contained in:
sonnguyenkieio
parent
398b1f5148
commit
2ca772c7fe
@ -1,22 +1,9 @@
|
||||
@import '../../../../styles/utilities';
|
||||
|
||||
.accountPage {
|
||||
@apply flex spacing-horizontal;
|
||||
@apply spacing-horizontal;
|
||||
background-color: #F5F4F2;
|
||||
margin-top: -3.2rem;
|
||||
padding-top: 3.2rem;
|
||||
padding-bottom: 3.2rem;
|
||||
|
||||
.pageLeft {
|
||||
padding-top: 5.6rem;
|
||||
margin-right: 12.4rem;
|
||||
|
||||
.accNavi{
|
||||
margin-top: 3.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pageRight {
|
||||
padding-top: 5.6rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useRef, useState } from "react"
|
||||
import React, { useState } from "react"
|
||||
import s from './AccountPage.module.scss'
|
||||
|
||||
import AccountNavigation from '../AccountNavigation/AccountNavigation'
|
||||
@ -6,18 +6,9 @@ import HeadingCommon from '../../../common/HeadingCommon/HeadingCommon'
|
||||
import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
|
||||
import OrderInfomation from './components/OrderInformation/OrderInformation'
|
||||
import EditInfoModal from './components/EditInfoModal/EditInfoModal'
|
||||
import TabPane from "src/components/common/TabCommon/components/TabPane/TabPane"
|
||||
|
||||
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"],
|
||||
@ -57,7 +48,7 @@ interface AccountPageProps {
|
||||
|
||||
const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
|
||||
|
||||
const [activeTab, setActiveTab] = useState(defaultActiveContent==="info"? 0 : defaultActiveContent==="orders"? 1 : 2)
|
||||
const [activeTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
|
||||
function showModal() {
|
||||
@ -68,33 +59,22 @@ const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
|
||||
setModalVisible(false);
|
||||
}
|
||||
|
||||
const changeTab = (tabIndex: number) => {
|
||||
setActiveTab(tabIndex);
|
||||
}
|
||||
|
||||
const accNavItems = [
|
||||
{ref: useRef<HTMLDivElement>(null), active: activeTab===0, itemName: "Customer Information", onClick: changeTab},
|
||||
{ref: useRef<HTMLDivElement>(null), active: activeTab===1, itemName: "Your Orders", onClick: changeTab},
|
||||
{ref: useRef<HTMLDivElement>(null), active: activeTab===2, itemName: "Favorites", onClick: changeTab}
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className={s.accountPage}>
|
||||
<div className={s.pageLeft}>
|
||||
<HeadingCommon>Account</HeadingCommon>
|
||||
<div className={s.accNavi}>
|
||||
<AccountNavigation items={accNavItems} defaultActiveIndex={activeTab} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={s.pageRight}>
|
||||
<AccountInfomation active={activeTab === 0} account={account} onClick={showModal} />
|
||||
<OrderInfomation active={activeTab === 1} waiting={waiting} delivering={delivering} delivered={delivered} />
|
||||
|
||||
{/* Thieu cai favorite */}
|
||||
{/* <FavoriteProduct active={favoritesActive} favProducts={favProducts} /> */}
|
||||
</div>
|
||||
<AccountNavigation defaultActiveIndex={activeTab}>
|
||||
<TabPane tabName="Customer Information">
|
||||
<AccountInfomation account={account} onClick={showModal} />
|
||||
</TabPane>
|
||||
<TabPane tabName="Your Orders">
|
||||
<OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
|
||||
</TabPane>
|
||||
<TabPane tabName="Favourite">
|
||||
{/* <FavoriteProduct active={activeTab === 2} favProducts={favProducts} /> */}
|
||||
</TabPane>
|
||||
</AccountNavigation>
|
||||
</section>
|
||||
<EditInfoModal accountInfo={account} closeModal={closeModal} visible={modalVisible} />
|
||||
</>
|
||||
|
||||
@ -4,13 +4,16 @@ import s from './AccountInfomation.module.scss'
|
||||
import Image from "next/image"
|
||||
import avatar from '../../assets/avatar.png';
|
||||
|
||||
interface AccountProps {
|
||||
name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string
|
||||
}
|
||||
|
||||
interface AccountInfomationProps {
|
||||
account: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
|
||||
active: boolean;
|
||||
account: AccountProps;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const AccountInfomation = ({ account, active=false, onClick } : AccountInfomationProps) => {
|
||||
const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
|
||||
|
||||
// need to handle call back when edit account information
|
||||
|
||||
@ -19,7 +22,7 @@ const AccountInfomation = ({ account, active=false, onClick } : AccountInfomatio
|
||||
return (
|
||||
<section className={s.accountInfomation}>
|
||||
{
|
||||
active && <div>
|
||||
<div>
|
||||
<div className={s.avatar}>
|
||||
<Image src={avatar} alt="avatar" />
|
||||
</div>
|
||||
@ -46,8 +49,6 @@ const AccountInfomation = ({ account, active=false, onClick } : AccountInfomatio
|
||||
<div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -58,7 +58,6 @@
|
||||
@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%;
|
||||
padding: 1.6rem;
|
||||
margin-right: 1.6rem;
|
||||
width: 100%;
|
||||
@ -72,7 +71,6 @@
|
||||
@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%;
|
||||
padding: 1.6rem;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
|
||||
@ -10,15 +10,14 @@ 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, active } : OrderInformationProps) => {
|
||||
const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationProps) => {
|
||||
|
||||
return (
|
||||
<section className={s.orderInformation}>
|
||||
{
|
||||
active && <div>
|
||||
<div>
|
||||
<div className={s.title}>Order Information</div>
|
||||
|
||||
<div className={s.tabs}>
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
@import '../../../../../../styles/utilities';
|
||||
|
||||
.tabPane {
|
||||
@apply hidden;
|
||||
animation-duration: 0.6s;
|
||||
animation-name: appear;
|
||||
@keyframes appear {
|
||||
from {
|
||||
margin-left: 100%;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
to {
|
||||
margin-left: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import classNames from "classnames"
|
||||
import React from "react"
|
||||
import s from './TabPane.module.scss'
|
||||
|
||||
interface TabPaneProps {
|
||||
active: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const TabPane = ({ active="", children } : TabPaneProps) => {
|
||||
return (
|
||||
<section className={classNames(s.tabPane, {
|
||||
[s[active]] : active
|
||||
})}>
|
||||
{children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabPane
|
||||
Loading…
x
Reference in New Issue
Block a user