You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
4.1 KiB
115 lines
4.1 KiB
import React from "react"; |
|
import { connect } from "react-redux"; |
|
import { Link } from "react-router-dom"; |
|
import moment from "jalali-moment"; |
|
|
|
//assets |
|
import leftArrowIcon from "../../../assets/icons/dropdown-blue.svg"; |
|
|
|
const colors = { |
|
1: "#FFF700", |
|
4: "#FF0000", |
|
3: "#4CFF00", |
|
2: "#196EC0", |
|
}; |
|
|
|
const status = { |
|
1: window.t("در حال پردازش"), |
|
4: window.t("درخواست رد شد"), |
|
3: window.t("تکمیل شد"), |
|
2: window.t("ارسال شده"), |
|
}; |
|
|
|
function Order({ order, setDashboardPage, isDashboard }) { |
|
return ( |
|
<div className="w-full lg:w-2/3 flex flex-col rounded-md overflow-hidden my-3 border border-solid border-blueC0 border-opacity-50 dark:border-blueC0 dark:border-opacity-10"> |
|
<div className="flex w-full justify-between items-center p-3 bg-blueC0 bg-opacity-10 dark:bg-blueC0 dark:bg-opacity-10"> |
|
{order?.transactionId ? ( |
|
<strong className="font-medium text-sm lg:text-sm text-green4F dark:text-white"> |
|
{"شماره سفارش:" + " " + order?.transactionId} |
|
</strong> |
|
) : null} |
|
{order?.condition ? ( |
|
<div className="flex items-center"> |
|
<span className="text-xs lg:text-sm font-light text-green4F dark:text-white"> |
|
{status[order?.condition]} |
|
</span> |
|
<div |
|
className="h-4 w-4 rounded-full mr-2" |
|
style={{ backgroundColor: colors[order?.condition] }} |
|
></div> |
|
</div> |
|
) : null} |
|
</div> |
|
<div className="w-full flex justify-between p-3"> |
|
<div className="flex flex-col"> |
|
<div className="flex mb-2"> |
|
{order.userProducts.length < 2 |
|
? order?.userProducts?.map((product, index) => ( |
|
<img |
|
key={index} |
|
src={`https://dnvn.ir/api/v1/file/${product?.product?.book?.fileIds}`} |
|
className="rounded-md ml-1.5 object-cover lg:w-1/5" |
|
alt="" |
|
/> |
|
)) |
|
: order.userProducts |
|
?.slice(0, 1) |
|
?.map((product, index) => ( |
|
<img |
|
key={index} |
|
src={`https://dnvn.ir/api/v1/file/${product?.product?.book?.fileIds}`} |
|
className="rounded-md ml-1.5 object-cover lg:w-1/5" |
|
alt="" |
|
/> |
|
))} |
|
</div> |
|
<div> |
|
{order?.followCode ? ( |
|
<div className="p-2 rounded-md text-center text-xs bg-grayEE dark:bg-gray-400 dark:text-white text-blue5F lg:hidden"> |
|
{"کد تحویل:" + " " + order?.followCode} |
|
</div> |
|
) : null} |
|
</div> |
|
</div> |
|
<div className="flex flex-col items-center mr-4"> |
|
{order?.payPrice ? ( |
|
<strong |
|
className="my-3 text-sm bg-gray-100 py-4 rounded-md dark:bg-blueC0 dark:text-white text-blue52 lg:w-full text-center" |
|
style={{ |
|
fontFamily: "bold", |
|
}} |
|
> |
|
{"جمع فاکتور:" + " " + order?.payPrice} |
|
</strong> |
|
) : null} |
|
<Link |
|
to={isDashboard ? "#" : "/orders/order"} |
|
className="rounded-md flex items-center lg:text-sm justify-center px-5 py-2.5 border border-solid border-blueC0 text-green4F bg-blueC0 bg-opacity-10" |
|
onClick={() => (isDashboard ? setDashboardPage("order") : {})} |
|
> |
|
{window.t("جزئیات سفارش")} |
|
<img |
|
src={leftArrowIcon} |
|
className="transform rotate-90 w-4" |
|
alt="" |
|
/> |
|
</Link> |
|
{order?.payedAt ? ( |
|
<span className="my-5 text-xs text-blue52 font-light dark:text-white lg:hidden"> |
|
{"تاریخ سفارش:" + |
|
" " + |
|
moment(order?.payedAt)?.format("jYYYY/jMM/jDD")}{" "} |
|
</span> |
|
) : null} |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
isMobile: state.config.device === "mobile", |
|
}); |
|
|
|
export default connect(mapStateToProps)(Order);
|
|
|