mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
🐛 bug: fix bug in Delivery Item
This commit is contained in:
@@ -9,7 +9,7 @@ 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;
|
||||||
}
|
}
|
||||||
@@ -21,7 +21,7 @@ const DeliveryItem = ({ id, status, products, totalPrice } : DeliveryItemProps)
|
|||||||
<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}/>
|
<ReOrder visible={status === "delivered" ? true : false}/>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@@ -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}>
|
||||||
|
@@ -1,9 +1,21 @@
|
|||||||
@import '../../../../../../styles/utilities';
|
@import '../../../../../../styles/utilities';
|
||||||
|
|
||||||
.reOrder {
|
.reOrder {
|
||||||
@apply hidden;
|
@apply hidden shape-common text-white font-bold;
|
||||||
|
background-color: var(--primary);
|
||||||
margin-right: 1.2rem;
|
margin-right: 1.2rem;
|
||||||
&.show {
|
padding: .4rem .6rem;
|
||||||
|
|
||||||
|
@screen lg {
|
||||||
|
padding: .8rem 1.2rem;
|
||||||
|
margin-right: 2.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.visible {
|
||||||
@apply block;
|
@apply block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@apply cursor-pointer;
|
||||||
|
}
|
||||||
}
|
}
|
@@ -1,18 +1,22 @@
|
|||||||
import classNames from "classnames"
|
import classNames from "classnames"
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import { ButtonCommon } from "src/components/common"
|
import { ButtonCommon } from "src/components/common"
|
||||||
|
import Link from 'next/link'
|
||||||
import s from './ReOrder.module.scss'
|
import s from './ReOrder.module.scss'
|
||||||
|
|
||||||
interface ReOrderProps {
|
interface ReOrderProps {
|
||||||
show: boolean;
|
visible: boolean;
|
||||||
|
href?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ReOrder = ({ show=false } : ReOrderProps) => {
|
const ReOrder = ({ visible=false, href="#" } : ReOrderProps) => {
|
||||||
return (
|
return (
|
||||||
<div className={classNames(s.reOrder, {
|
<div className={classNames(s.reOrder, {
|
||||||
[s.show]: show
|
[s.visible]: visible
|
||||||
})}>
|
})}>
|
||||||
<ButtonCommon>Re-Order</ButtonCommon>
|
<Link href={href}>
|
||||||
|
<a>Re-Order</a>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user