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.
 
 
 

180 lines
7.5 KiB

import React, { useEffect } from "react";
import Book from "./components/Book";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import b1Image from "./assets/b1.png";
import _ from "lodash";
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 OrderDetails({ order, setHeaderOptions, headerOptions }) {
useEffect(() => {
setHeaderOptions(headerOptions);
}, []);
return (
<div className="px-4 flex flex-col py-5 lg:pt-24 lg:w-3/5 lg:mx-auto">
<div className="flex w-full justify-between items-center p-3 bg-blueC0 bg-opacity-10 rounded-t-md dark:bg-blueC0 dark:bg-opacity-10">
<strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
{_.join([window.t("شماره سفارش:"), order.number], " ")}
</strong>
<div className="flex items-center">
<span className="text-xs lg:text-tiny font-light text-blue52 dark:text-white">
{status[order.status]}
</span>
<div
className="h-4 w-4 rounded-full mr-2"
style={{ backgroundColor: colors[order.status] }}
></div>
</div>
</div>
<div className="w-full flex flex-row items-center py-4 border-b border-solid border-blueFF1 dark:border-gray45">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("آدرس تحویل")}:
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.address}
</span>
</div>
<div className="w-full flex flex-row justify-between py-0 border-b border-solid border-blueFF1 dark:border-gray45">
<div className="flex flex-row py-4">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("مشخصات تحویل گیرنده:")}
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.name}
</span>
</div>
<div className="flex flex-row py-4">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("شماره موبایل:")}
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.cellphone}
</span>
</div>
</div>
<div className="w-full rounded-md flex flex-col p-4 mt-2 bg-blueC0 bg-opacity-10 dark:bg-blueC0 dark:bg-opacity-20 dark:border-blueC0 dark:border dark:border-solid">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([window.t("کد تحویل:"), order.receiveCode], " ")}
</strong>
<p className="font-light text-right mt-3 text-xs lg:text-sm text-green4F dark:text-white">
{window.t(
"این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید"
)}
</p>
</div>
<div className="w-full flex flex-col">
{order.items.map((item, index) => (
<Book book={item} key={index} />
))}
</div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
<div className="flex flex-row py-4">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("مبلغ سبد خرید:")}
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([order.shoppingCardPrice, window.t("تومان")], " ")}
</span>
</div>
<div className="flex flex-row py-4">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("تخفیف:")}
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([order.discountPrice, window.t("تومان")], " ")}
</span>
</div>
</div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
<div className="flex flex-row py-4">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("هزینه ارسال کالا:")}
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([order.sendPrice, window.t("تومان")], " ")}
</span>
</div>
<div className="flex flex-row py-4 border">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("جمع هزینه پرداختی:")}
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([order.totalPrice, window.t("تومان")], " ")}
</span>
</div>
</div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
<div className="flex flex-row py-4">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("نحوه پرداخت:")}
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.payMethod}
</span>
</div>
<div className="flex flex-row py-4">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{" "}
{window.t("شماره تراکنش:")}
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.transactionNumber}
</span>
</div>
</div>
<div className="w-full flex flex-row justify-between py-2">
<div className="w-full flex flex-row py-4">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("تاریخ تحویل:")}
</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.date}
</span>
</div>
</div>
</div>
);
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(OrderDetails);
OrderDetails.defaultProps = {
order: {
number: "535353523653",
receiveCode: "300031",
status: 2,
items: [b1Image, b1Image],
date: "1400/1/11",
cost: "1.240.000",
address: window.t(
"تهران خیابان انقلاب حدفاصل ابوریحان و فلسطین بن بست سروش پلاک 2 واحد 12 شرقی"
),
name: window.t("هومن عابدی"),
cellphone: "09121234568",
shoppingCardPrice: "981.000",
discountPrice: "12.000",
sendPrice: "18.000",
totalPrice: "18.000",
payMethod: window.t("حضوری"),
transactionNumber: " BS3194DNB98312",
},
};