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