mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
merge branch m7-sonnguyen-fix-account-page into common
This commit is contained in:
commit
fceb3c3ece
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 />
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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} />
|
||||
)
|
||||
})
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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}>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user