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) =>
await proxy.get("userFactor/fullList", data, { dispatch }),
selectOrder:
(data = {}) =>
(dispatch) =>
dispatch({ type: "userFactor/selectOrder", data }),
//vod
vodPayment:
(data1 = {}, data2 = {}) =>

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

@ -1,35 +1,37 @@
import React from "react";
import _ from "lodash";
import { connect } from "react-redux";
export default function Book({ book }) {
function Book({ book, grades }) {
return (
<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">
<img
src={book}
className="rounded-md"
style={{ width: 60, height: 90 }}
src={`https://dnvn.ir/api/v1/file/${book?.product?.book.fileIds}`}
className="rounded-sm lg:w-24 object-cover"
/>
<div className="flex flex-col mr-2">
<strong className="text-xs text-blueC0 dark:text-white lg:text-tiny">
{window.t("علوم اجتماعی")}
{book?.product?.book?.name || " "}
</strong>
<span className="mt-4 text-xs lg:text-sm text-gray70 dark:text-greenBA">
{window.t("پایه دوم")}
</span>
<span className="mt-2 text-xs lg:text-sm text-gray70 dark:text-white">
{window.t("نسخه دیجیتال")}
{"پایه" + " " + grades[book?.product?.book?.gradeId]}
</span>
</div>
</div>
<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">
1
{book?.product?.count}
</span>
<div className="mr-3 text-blueC0 text-xs lg:text-base dark:text-white">
126.000 {window.t("تومان")}
{book?.product?.price + " " + "تومان"}
</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 { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import moment from "jalali-moment";
//assets
import b1Image from "./assets/b1.png";
import _ from "lodash";
const colors = {
1: "#FFF700",
@ -25,53 +27,65 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, 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">
<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("مشخصات تحویل گیرنده:")}
{order?.transactionId ? (
<strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
{"شماره سفارش:" + " " + order?.transactionId}
</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">
) : 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("شماره موبایل:")}
{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}
{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">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([window.t("کد تحویل:"), order.receiveCode], " ")}
</strong>
{order?.recieverPostalCode ? (
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{"کد تحویل" + " " + order?.recieverPostalCode}
</strong>
) : null}
<p className="font-light text-right mt-3 text-xs lg:text-sm text-green4F dark:text-white">
{window.t(
"این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید"
@ -79,62 +93,52 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
</p>
</div>
<div className="w-full flex flex-col">
{order.items.map((item, index) => (
<Book book={item} key={index} />
{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">
<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>
{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 + " " + "تومان"}
</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">
{_.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>
{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 + " " + "تومان"}
</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 + " " + "تومان"}
</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.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}
{order?.transactionId}
</span>
</div>
</div>
@ -144,7 +148,7 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
{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}
{moment(order?.payedAt)?.format("jYYYY/jMM/jDD")}
</span>
</div>
</div>
@ -154,6 +158,7 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
const mapStateToProps = (state) => ({
isMobile: state.config.device === "mobile",
order: state.userFactor.selectedOrder
});
const mapDispatchToProps = {
@ -161,25 +166,3 @@ const mapDispatchToProps = {
};
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 { Link } from "react-router-dom";
import moment from "jalali-moment";
import { userFactor } from "../../../redux/actions";
//assets
import leftArrowIcon from "../../../assets/icons/dropdown-blue.svg";
@ -20,7 +21,7 @@ const status = {
2: window.t("ارسال شده"),
};
function Order({ order, setDashboardPage, isDashboard }) {
function Order({ order, setDashboardPage, isDashboard, selectOrder }) {
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="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
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"
onClick={() => (isDashboard ? setDashboardPage("order") : {})}
onClick={() => {
if (isDashboard) {
selectOrder(order);
setDashboardPage("order");
} else {
selectOrder(order);
return;
}
}}
>
{window.t("جزئیات سفارش")}
<img
@ -112,4 +121,8 @@ const mapStateToProps = (state) => ({
isMobile: state.config.device === "mobile",
});
export default connect(mapStateToProps)(Order);
const mapDispatchToProps = {
selectOrder: userFactor.selectOrder,
};
export default connect(mapStateToProps, mapDispatchToProps)(Order);

Loading…
Cancel
Save