crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 03:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Account Page

Browse Source
This commit is contained in:
sonnguyenkieio 2021-09-09 15:46:20 +07:00
parent 06fc9cb288
commit a52a673a7f
6 changed files with 37 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/modules/account/AccountPage/AccountPage.tsx
View File

@ -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} />
</>

3
src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
View File

@ -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;

8
src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss
View File

@ -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 {

2
src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
View File

@ -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;

8
src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss
View File

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

53
src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
View File

@ -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 [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") },
]
const OrderInformation = ({ waiting, delivering, delivered, active } : OrderInformationProps) => {
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} />
<div className={s.tabPanes}>
<TabPane active={activeTabPane==="waiting" ? `active` : ""}>
<TabCommon>
<TabPane tabName={"Wait for Comfirmation"} >
<div className={s.blank}></div>
{
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>
}