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

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);