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
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", |
|
}, |
|
};
|
|
|