mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
🚑 fix Account Page
This commit is contained in:
sonnguyenkieio
parent
9a385a3f14
commit
eab45e229c
3
next-env.d.ts
vendored
3
next-env.d.ts
vendored
@ -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.
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
|
||||
.shippingInfo {
|
||||
@apply heading-3 font-heading;
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
|
||||
.accountAddress {
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -32,30 +32,7 @@
|
||||
}
|
||||
|
||||
.buttons {
|
||||
@apply flex;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@apply grid grid-cols-2;
|
||||
grid-gap: 1.6rem;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
<div onClick={saveInfo} className={s.buttonSave}>Save</div>
|
||||
<ButtonCommon onClick={closeModal} type="light" size="large" >Cancel</ButtonCommon>
|
||||
<ButtonCommon onClick={saveInfo} size="large" >Save</ButtonCommon>
|
||||
</div>
|
||||
</section>
|
||||
</ModalCommon>
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
@import '../../../../../../styles/utilities';
|
||||
|
||||
.favouriteProducts {
|
||||
|
||||
}
|
||||
@ -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
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -2,11 +2,7 @@
|
||||
|
||||
.totalPrice {
|
||||
margin-left: auto;
|
||||
margin-right: 1rem;
|
||||
|
||||
@screen md {
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
margin-right: 2.4rem;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user