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

merge branch m7-sonnguyen-fix-account-page into common

Browse Source
This commit is contained in:
sonnguyenkieio
2021-09-16 20:06:36 +07:00
parent cd216519ba c5a084fa3d
commit fceb3c3ece
10 changed files with 73 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/common/Layout/Layout.module.scss
View File

@@ -2,15 +2,22 @@
display: flex;
flex-direction: column;
min-height: 100vh;
> main {
.wrapperWithBg {
@apply bg-background-gray;
width: 100%;
margin-top: -3.2rem;
}
> main,
.wrapperWithBg > main {
flex: 1;
width: 100%;
max-width: min( 100%, 1536px);
max-width: min(100%, 1536px);
margin: auto;
}
}
.filter{
.filter {
@screen xl {
display: none;
}
}
}

13
src/components/common/Layout/Layout.tsx
View File

@@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework'
import { useRouter } from 'next/router'
import { FC } from 'react'
import { useModalCommon } from 'src/components/hooks'
import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
import { BRAND, CATEGORY, FEATURED, ROUTE } from 'src/utils/constanst.utils'
import { ScrollToTop } from '..'
import Footer from '../Footer/Footer'
import Header from '../Header/Header'
@@ -19,6 +19,8 @@ const Layout: FC<Props> = ({ children }) => {
const { locale = 'en-US' } = useRouter()
const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
const router = useRouter()
const toggleFilter = () => {
if (visibleFilter) {
closeFilter()
@@ -26,11 +28,18 @@ const Layout: FC<Props> = ({ children }) => {
openFilter()
}
}
return (
<CommerceProvider locale={locale}>
<div className={s.mainLayout}>
<Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
<main >{children}</main>
{
router.pathname === ROUTE.ACCOUNT ?
<section className={s.wrapperWithBg}>
<main>{children}</main>
</section> :
<main>{children}</main>
}
<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
<ScrollToTop visibilityHeight={1500} />
<Footer />

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

@@ -1,23 +1,26 @@
@import '../../../../styles/utilities';
.accountPage {
@apply spacing-horizontal;
background-color: #F5F4F2;
margin-top: -3.2rem;
padding-top: 3.2rem;
padding-bottom: 3.2rem;
@apply bg-background-gray;
padding: 3.2rem 2rem;
min-height: 70rem;
@screen md {
padding-left: 3.2rem;
padding-right: 3.2rem;
padding-left: 2.8rem;
padding-right: 2.8rem;
padding: 5.4rem 2rem;
}
@screen lg {
padding-left: 6.4rem;
padding-right: 6.4rem;
}
@screen xl {
@apply spacing-horizontal
padding-left: 11.2rem;
padding-right: 11.2rem;
}
.header {
margin-bottom: 1.2rem;

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

@@ -16,7 +16,6 @@
margin: auto;
margin-bottom: 4rem;
@screen md {
margin-left: 0
}
@@ -56,22 +55,16 @@
}
.editInfoBtn {
@apply text-center font-bold custom-border-radius;
margin: auto;
@apply flex items-center justify-center;
margin-top: 2.4rem;
margin-bottom: 2.4rem;
padding: .8rem 1.6rem;
color: #141414;
border: 1px solid #141414;
max-width: 8.8rem;
&:hover {
@apply cursor-pointer;
background-color: #FBFBFB;
button div {
background-color: #F5F4F2 !important;
}
@screen md {
margin-left: 0;
@apply block;
}
}
}

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

@@ -4,6 +4,8 @@ import s from './AccountInfomation.module.scss'
import Image from "next/image"
import avatar from '../../assets/avatar.png';
import { ButtonCommon } from 'src/components/common'
interface AccountProps {
name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string
}
@@ -44,7 +46,9 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
{account.phoneNumber}
</div>
<div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
<div className={s.editInfoBtn}>
<ButtonCommon onClick={showEditForm} type="light" size="small">Edit</ButtonCommon>
</div>
</section>
)
}

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

@@ -25,7 +25,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
{
waiting.map((order, i) => {
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} />
)
})
}
@@ -36,7 +36,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
{
delivering.map((order, i) => {
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} />
)
})
}
@@ -47,7 +47,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
{
delivered.map((order, i) => {
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} />
)
})
}

4
src/components/modules/account/DeliveryItem/DeliveryItem.tsx
View File

@@ -9,7 +9,7 @@ import ReOrder from './components/ReOrder/ReOrder'
interface DeliveryItemProps {
id: string;
status: "Waiting" | "Delivering" | "Delivered";
status: "waiting" | "delivering" | "delivered";
products: string[];
totalPrice: number;
}
@@ -21,7 +21,7 @@ const DeliveryItem = ({ id, status, products, totalPrice } : DeliveryItemProps)
<div className={s.separator}></div>
<Products products={products} />
<TotalPrice totalPrice={totalPrice} />
<ReOrder show={status === "Delivered" ? true : false}/>
<ReOrder visible={status === "delivered" ? true : false}/>
</section>
)
}

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

@@ -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
src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
View File

@@ -1,9 +1,21 @@
@import '../../../../../../styles/utilities';
.reOrder {
@apply hidden;
@apply hidden shape-common text-white font-bold;
background-color: var(--primary);
margin-right: 1.2rem;
&.show {
padding: .4rem .6rem;
@screen lg {
padding: .8rem 1.2rem;
margin-right: 2.4rem;
}
&.visible {
@apply block;
}
&:hover {
@apply cursor-pointer;
}
}

12
src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
View File

@@ -1,18 +1,22 @@
import classNames from "classnames"
import React from "react"
import { ButtonCommon } from "src/components/common"
import Link from 'next/link'
import s from './ReOrder.module.scss'
interface ReOrderProps {
show: boolean;
visible: boolean;
href?: string;
}
const ReOrder = ({ show=false } : ReOrderProps) => {
const ReOrder = ({ visible=false, href="#" } : ReOrderProps) => {
return (
<div className={classNames(s.reOrder, {
[s.show]: show
[s.visible]: visible
})}>
<ButtonCommon>Re-Order</ButtonCommon>
<Link href={href}>
<a>Re-Order</a>
</Link>
</div>
)
}