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.
 
 
 

167 lines
6.8 KiB

import React, { useEffect } from "react";
import Book from "./components/Book";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import moment from "jalali-moment";
//assets
import b1Image from "./assets/b1.png";
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, isMobile }) {
useEffect(() => {
if (isMobile) {
setHeaderOptions(headerOptions);
}
}, []);
return (
<div className="px-4 flex flex-col py-5 lg:w-4/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">
{order?.transactionId ? (
<strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
{window.t("شماره سفارش:") + " " + order?.transactionId}
</strong>
) : null}
{order?.condition ? (
<div className="flex items-center">
<span className="text-xs lg:text-tiny font-light text-blue52 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>
{order?.recieverAddress ? (
<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?.recieverAddress}
</span>
</div>
) : null}
<div className="w-full flex flex-row justify-between py-0 border-b border-solid border-blueFF1 dark:border-gray45">
{order?.recieverName ? (
<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.recieverName}
</span>
</div>
) : null}
{order?.recieverPhone ? (
<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.recieverPhone}
</span>
</div>
) : null}
</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">
{order?.recieverPostalCode ? (
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("کد تحویل") + " " + order?.recieverPostalCode}
</strong>
) : null}
<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?.userProducts?.map((product, index) => (
<Book book={product} key={index} />
))}
</div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
{order?.sumPrice ? (
<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?.sumPrice + " " + window.t("تومان")}
</span>
</div>
) : null}
</div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
{order?.transportPrice ? (
<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?.transportPrice + " " + window.t("تومان")}
</span>
</div>
) : null}
{order?.payPrice ? (
<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">
{order?.payPrice + " " + window.t("تومان")}
</span>
</div>
) : null}
</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?.transactionId}
</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">
{moment(order?.payedAt)?.format("jYYYY/jMM/jDD")}
</span>
</div>
</div>
</div>
);
}
const mapStateToProps = (state) => ({
isMobile: state.config.device === "mobile",
order: state.userFactor.selectedOrder,
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(OrderDetails);