update 5 files

master
Reza_ashrafi 2 years ago
parent 23464e18e2
commit 35cde1c121
  1. 4
      src/redux/actions/userFactor.js
  2. 8
      src/redux/reducers/userFactor.js
  3. 26
      src/views/Order/components/Book.js
  4. 189
      src/views/Order/index.js
  5. 19
      src/views/Orders/components/Order.js

@ -27,6 +27,10 @@ const userFactor = {
async (dispatch) => async (dispatch) =>
await proxy.get("userFactor/fullList", data, { dispatch }), await proxy.get("userFactor/fullList", data, { dispatch }),
selectOrder:
(data = {}) =>
(dispatch) =>
dispatch({ type: "userFactor/selectOrder", data }),
//vod //vod
vodPayment: vodPayment:
(data1 = {}, data2 = {}) => (data1 = {}, data2 = {}) =>

@ -8,6 +8,7 @@ const initialState = {
checkEmpty: false, checkEmpty: false,
isVerified: null, isVerified: null,
fullList: [], fullList: [],
selectedOrder: null,
}; };
export default function userFactor(state = initialState, action) { export default function userFactor(state = initialState, action) {
@ -32,6 +33,13 @@ export default function userFactor(state = initialState, action) {
fullList: data, fullList: data,
error: null, error: null,
}; };
case "userFactor/selectOrder":
return {
...state,
loading: false,
selectedOrder: data,
error: null,
};
case "userFactor/info": case "userFactor/info":
return { ...state, loading: false, info: data, error: null }; return { ...state, loading: false, info: data, error: null };
case "userFactor/add": case "userFactor/add":

@ -1,35 +1,37 @@
import React from "react"; import React from "react";
import _ from "lodash"; import { connect } from "react-redux";
export default function Book({ book }) { function Book({ book, grades }) {
return ( return (
<div className="w-full flex justify-between py-3 border-b border-solid border-blueFF1 dark:border-gray45"> <div className="w-full flex justify-between py-3 border-b border-solid border-blueFF1 dark:border-gray45">
<div className="flex items-center flex-1"> <div className="flex items-center flex-1">
<img <img
src={book} src={`https://dnvn.ir/api/v1/file/${book?.product?.book.fileIds}`}
className="rounded-md" className="rounded-sm lg:w-24 object-cover"
style={{ width: 60, height: 90 }}
/> />
<div className="flex flex-col mr-2"> <div className="flex flex-col mr-2">
<strong className="text-xs text-blueC0 dark:text-white lg:text-tiny"> <strong className="text-xs text-blueC0 dark:text-white lg:text-tiny">
{window.t("علوم اجتماعی")} {book?.product?.book?.name || " "}
</strong> </strong>
<span className="mt-4 text-xs lg:text-sm text-gray70 dark:text-greenBA"> <span className="mt-4 text-xs lg:text-sm text-gray70 dark:text-greenBA">
{window.t("پایه دوم")} {"پایه" + " " + grades[book?.product?.book?.gradeId]}
</span>
<span className="mt-2 text-xs lg:text-sm text-gray70 dark:text-white">
{window.t("نسخه دیجیتال")}
</span> </span>
</div> </div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<span className="py-1 px-2 rounded-sm text-green4F2 text-sm lg:text-base bg-grayF9 dark:bg-gray-500 dark:text-white"> <span className="py-1 px-2 rounded-sm text-green4F2 text-sm lg:text-base bg-grayF9 dark:bg-gray-500 dark:text-white">
1 {book?.product?.count}
</span> </span>
<div className="mr-3 text-blueC0 text-xs lg:text-base dark:text-white"> <div className="mr-3 text-blueC0 text-xs lg:text-base dark:text-white">
126.000 {window.t("تومان")} {book?.product?.price + " " + "تومان"}
</div> </div>
</div> </div>
</div> </div>
); );
} }
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
});
export default connect(mapStateToProps)(Book);

@ -2,8 +2,10 @@ import React, { useEffect } from "react";
import Book from "./components/Book"; import Book from "./components/Book";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../redux/actions"; import { publicApi } from "../../redux/actions";
import moment from "jalali-moment";
//assets
import b1Image from "./assets/b1.png"; import b1Image from "./assets/b1.png";
import _ from "lodash";
const colors = { const colors = {
1: "#FFF700", 1: "#FFF700",
@ -25,53 +27,65 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
} }
}, []); }, []);
return ( return (
<div className="px-4 flex flex-col py-5 lg:w-4/5 lg:mx-auto"> <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"> <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"> {order?.transactionId ? (
{_.join([window.t("شماره سفارش:"), order.number], " ")} <strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
</strong> {"شماره سفارش:" + " " + order?.transactionId}
<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> </strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white"> ) : null}
{order.name} {order?.condition ? (
</span> <div className="flex items-center">
</div> <span className="text-xs lg:text-tiny font-light text-blue52 dark:text-white">
<div className="flex flex-row py-4"> {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"> <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{window.t("شماره موبایل:")} {window.t("آدرس تحویل")}:
</strong> </strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white"> <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.cellphone} {order?.recieverAddress}
</span> </span>
</div> </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>
<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"> <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"> {order?.recieverPostalCode ? (
{_.join([window.t("کد تحویل:"), order.receiveCode], " ")} <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
</strong> {"کد تحویل" + " " + order?.recieverPostalCode}
</strong>
) : null}
<p className="font-light text-right mt-3 text-xs lg:text-sm text-green4F dark:text-white"> <p className="font-light text-right mt-3 text-xs lg:text-sm text-green4F dark:text-white">
{window.t( {window.t(
"این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید" "این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید"
@ -79,62 +93,52 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
</p> </p>
</div> </div>
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
{order.items.map((item, index) => ( {order?.userProducts?.map((product, index) => (
<Book book={item} key={index} /> <Book book={product} key={index} />
))} ))}
</div> </div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45"> <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"> {order?.sumPrice ? (
<strong className="text-xs lg:text-tiny text-green4F dark:text-white"> <div className="flex flex-row py-4">
{window.t("مبلغ سبد خرید:")} <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
</strong> {window.t("مبلغ سبد خرید:")}
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white"> </strong>
{_.join([order.shoppingCardPrice, window.t("تومان")], " ")} <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
</span> {order?.sumPrice + " " + "تومان"}
</div> </span>
<div className="flex flex-row py-4"> </div>
<strong className="text-xs lg:text-tiny text-green4F dark:text-white"> ) : null}
{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>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45"> <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"> {order?.transportPrice ? (
<strong className="text-xs lg:text-tiny text-green4F dark:text-white"> <div className="flex flex-row py-4">
{window.t("هزینه ارسال کالا:")} <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
</strong> {window.t("هزینه ارسال کالا:")}
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white"> </strong>
{_.join([order.sendPrice, window.t("تومان")], " ")} <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
</span> {order?.transportPrice + " " + "تومان"}
</div> </span>
<div className="flex flex-row py-4 border"> </div>
<strong className="text-xs lg:text-tiny text-green4F dark:text-white"> ) : null}
{window.t("جمع هزینه پرداختی:")} {order?.payPrice ? (
</strong> <div className="flex flex-row py-4 border">
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white"> <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([order.totalPrice, window.t("تومان")], " ")} {window.t("جمع هزینه پرداختی:")}
</span> </strong>
</div> <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order?.payPrice + " " + "تومان"}
</span>
</div>
) : null}
</div> </div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45"> <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"> <div className="flex flex-row py-4">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white"> <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{" "} {" "}
{window.t("شماره تراکنش:")} {window.t("شماره تراکنش:")}
</strong> </strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white"> <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.transactionNumber} {order?.transactionId}
</span> </span>
</div> </div>
</div> </div>
@ -144,7 +148,7 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
{window.t("تاریخ تحویل:")} {window.t("تاریخ تحویل:")}
</strong> </strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white"> <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.date} {moment(order?.payedAt)?.format("jYYYY/jMM/jDD")}
</span> </span>
</div> </div>
</div> </div>
@ -154,6 +158,7 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isMobile: state.config.device === "mobile", isMobile: state.config.device === "mobile",
order: state.userFactor.selectedOrder
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
@ -161,25 +166,3 @@ const mapDispatchToProps = {
}; };
export default connect(mapStateToProps, mapDispatchToProps)(OrderDetails); 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",
},
};

@ -2,6 +2,7 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import moment from "jalali-moment"; import moment from "jalali-moment";
import { userFactor } from "../../../redux/actions";
//assets //assets
import leftArrowIcon from "../../../assets/icons/dropdown-blue.svg"; import leftArrowIcon from "../../../assets/icons/dropdown-blue.svg";
@ -20,7 +21,7 @@ const status = {
2: window.t("ارسال شده"), 2: window.t("ارسال شده"),
}; };
function Order({ order, setDashboardPage, isDashboard }) { function Order({ order, setDashboardPage, isDashboard, selectOrder }) {
return ( 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="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"> <div className="flex w-full justify-between items-center p-3 bg-blueC0 bg-opacity-10 dark:bg-blueC0 dark:bg-opacity-10">
@ -86,7 +87,15 @@ function Order({ order, setDashboardPage, isDashboard }) {
<Link <Link
to={isDashboard ? "#" : "/orders/order"} 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" 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") : {})} onClick={() => {
if (isDashboard) {
selectOrder(order);
setDashboardPage("order");
} else {
selectOrder(order);
return;
}
}}
> >
{window.t("جزئیات سفارش")} {window.t("جزئیات سفارش")}
<img <img
@ -112,4 +121,8 @@ const mapStateToProps = (state) => ({
isMobile: state.config.device === "mobile", isMobile: state.config.device === "mobile",
}); });
export default connect(mapStateToProps)(Order); const mapDispatchToProps = {
selectOrder: userFactor.selectOrder,
};
export default connect(mapStateToProps, mapDispatchToProps)(Order);

Loading…
Cancel
Save