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

🚑 fix Account Page

Browse Source
This commit is contained in:
sonnguyenkieio
2021-09-14 18:38:33 +07:00
parent 9a385a3f14
commit eab45e229c
16 changed files with 101 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
next-env.d.ts vendored
View File

@@ -1,3 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/types/global" /> /// <reference types="next/types/global" />
/// <reference types="next/image-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.

2
src/components/common/TabCommon/TabCommon.module.scss
View File

@@ -7,7 +7,7 @@
.tabList { .tabList {
@apply flex; @apply flex;
position: relative; position: relative;
border-bottom: 2px solid #FBFBFB; border-bottom: 2px solid #EBEBEB;
padding: 0.8rem 0; padding: 0.8rem 0;
&.center{ &.center{
margin: auto; margin: auto;

2
src/components/modules/account/AccountPage/AccountPage.module.scss
View File

@@ -6,6 +6,8 @@
margin-top: -3.2rem; margin-top: -3.2rem;
padding-top: 3.2rem; padding-top: 3.2rem;
padding-bottom: 3.2rem; padding-bottom: 3.2rem;
min-height: 70rem;
@screen md { @screen md {
padding-left: 3.2rem; padding-left: 3.2rem;

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

@@ -5,9 +5,12 @@ import { HeadingCommon, TabPane } from "src/components/common"
import AccountNavigation from '../AccountNavigation/AccountNavigation' import AccountNavigation from '../AccountNavigation/AccountNavigation'
import AccountInfomation from "./components/AccountInfomation/AccountInfomation" import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
import FavouriteProducts from "./components/FavouriteProducts/FavouriteProducts"
import OrderInfomation from './components/OrderInformation/OrderInformation' import OrderInfomation from './components/OrderInformation/OrderInformation'
import EditInfoModal from './components/EditInfoModal/EditInfoModal' import EditInfoModal from './components/EditInfoModal/EditInfoModal'
import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
const waiting = [ const waiting = [
{ {
id: "NO 123456", id: "NO 123456",
@@ -74,7 +77,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
<OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} /> <OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
</TabPane> </TabPane>
<TabPane tabName="Favourite"> <TabPane tabName="Favourite">
{/* <FavoriteProduct active={activeTab === 2} favProducts={favProducts} /> */} <FavouriteProducts products={PRODUCT_CART_DATA_TEST} />
</TabPane> </TabPane>
</AccountNavigation> </AccountNavigation>
</section> </section>

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

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

40
src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
View File

@@ -21,34 +21,30 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
return ( return (
<section className={s.accountInfomation}> <section className={s.accountInfomation}>
{ <div className={s.avatar}>
<div> <Image src={avatar} alt="avatar" />
<div className={s.avatar}> </div>
<Image src={avatar} alt="avatar" />
</div>
<div className={s.accountName}> <div className={s.accountName}>
{account.name} {account.name}
</div> </div>
<div className={s.accountEmail}> <div className={s.accountEmail}>
{account.email} {account.email}
</div> </div>
<div className={s.horizontalSeparator}></div> <div className={s.horizontalSeparator}></div>
<div className={s.shippingInfo}>Shipping Infomation</div> <div className={s.shippingInfo}>Shipping Infomation</div>
<div className={s.accountAddress}> <div className={s.accountAddress}>
{account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`} {account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`}
</div> </div>
<div className={s.accountPhoneNumber}> <div className={s.accountPhoneNumber}>
{account.phoneNumber} {account.phoneNumber}
</div> </div>
<div onClick={showEditForm} className={s.editInfoBtn}>Edit</div> <div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
</div>
}
</section> </section>
) )
} }

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

@@ -32,30 +32,7 @@
} }
.buttons { .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;
}
}
} }
} }

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

@@ -1,7 +1,7 @@
import React from "react" import React from "react"
import s from './EditInfoModal.module.scss' import s from './EditInfoModal.module.scss'
import { ModalCommon, Inputcommon, SelectCommon } from '../../../../../common' import { ModalCommon, Inputcommon, SelectCommon, ButtonCommon } from '../../../../../common'
interface EditInfoModalProps { interface EditInfoModalProps {
accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string}; 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>
<div className={s.buttons}> <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> </div>
</section> </section>
</ModalCommon> </ModalCommon>

5
src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss Normal file
View File

@@ -0,0 +1,5 @@
@import '../../../../../../styles/utilities';
.favouriteProducts {
}

20
src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx Normal file
View File

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

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

@@ -16,48 +16,44 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
return ( return (
<section className={s.orderInformation}> <section className={s.orderInformation}>
{ <div className={s.title}>Order Information</div>
<div>
<div className={s.title}>Order Information</div>
<div className={s.tabs}> <div className={s.tabs}>
<TabCommon> <TabCommon>
<TabPane tabName={"Wait for Comfirmation"} > <TabPane tabName={"Wait for Comfirmation"} >
<div className={s.blank}></div> <div className={s.blank}></div>
{ {
waiting.map((order, i) => { waiting.map((order, i) => {
return ( return (
<DeliveryItem key={order.id} 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>
<TabPane tabName={"Delivering"}> <TabPane tabName={"Delivering"}>
<div className={s.blank}></div> <div className={s.blank}></div>
{ {
delivering.map((order, i) => { delivering.map((order, i) => {
return ( return (
<DeliveryItem key={order.id} 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>
<TabPane tabName={"Delivered"}> <TabPane tabName={"Delivered"}>
<div className={s.blank}></div> <div className={s.blank}></div>
{ {
delivered.map((order, i) => { delivered.map((order, i) => {
return ( return (
<DeliveryItem key={order.id} 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> </TabPane>
</TabCommon> </TabCommon>
</div> </div>
</div>
}
</section> </section>
) )
} }

3
src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
View File

@@ -1,9 +1,8 @@
@import '../../../../styles/utilities'; @import '../../../../styles/utilities';
.deliveryItem { .deliveryItem {
@apply flex bg-white items-center custom-border-radius; @apply flex bg-white items-center shape-common;
margin-bottom: 1.6rem; margin-bottom: 1.6rem;
border: 1px solid var(--primary)
} }
.separator { .separator {

6
src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
View File

@@ -2,11 +2,7 @@
.idAndStatus { .idAndStatus {
@apply items-center; @apply items-center;
padding: 2.4rem 0 2.4rem 1rem; padding: 2.4rem 0 2.4rem 1.2rem;
@screen md {
padding: 2.4rem 0 2.4rem 1.2rem;
}
@screen lg { @screen lg {
padding: 2.4rem 0 2.4rem 2.4rem; padding: 2.4rem 0 2.4rem 2.4rem;

6
src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
View File

@@ -5,10 +5,10 @@ import s from './IdAndStatus.module.scss'
interface IdAndStatusProps { interface IdAndStatusProps {
id?: string; id?: string;
status: "waiting" | "delivering" | "delivered"; status: "Waiting" | "Delivering" | "Delivered";
} }
const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => { const IdAndStatus = ({ id, status="Waiting" } : IdAndStatusProps) => {
return ( return (
<div className={s.idAndStatus}> <div className={s.idAndStatus}>
<div className={s.id}> <div className={s.id}>
@@ -16,7 +16,7 @@ const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
</div> </div>
<div className={classNames(s.deliveryStatus, { <div className={classNames(s.deliveryStatus, {
[s[status]]: status [s[status]]: status
})}> {status} })}> {status.charAt(0).toUpperCase() + status.slice(1)}
</div> </div>
</div> </div>
) )

7
src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
View File

@@ -3,14 +3,9 @@
.reOrder { .reOrder {
@apply text-white custom-border-radius hidden font-bold; @apply text-white custom-border-radius hidden font-bold;
padding: .4rem .6rem; padding: .4rem .6rem;
margin-right: 1rem; margin-right: 1.2rem;
background-color: var(--primary); background-color: var(--primary);
@screen md {
padding: .4rem .6rem;
margin-right: 1.2rem;
}
@screen lg { @screen lg {
padding: .8rem 1.2rem; padding: .8rem 1.2rem;
margin-right: 2.4rem; margin-right: 2.4rem;

6
src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
View File

@@ -2,11 +2,7 @@
.totalPrice { .totalPrice {
margin-left: auto; margin-left: auto;
margin-right: 1rem; margin-right: 1.2rem;
@screen md {
margin-right: 1.2rem;
}
@screen lg { @screen lg {
margin-right: 2.4rem; margin-right: 2.4rem;