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

♻️ enhan: replace link in delivery item to button common

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-15 14:37:21 +07:00
parent f4fc30a792
commit a7d39f3d1a
4 changed files with 10 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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