update 6 files

master
Reza_ashrafi 2 years ago
parent b442d23e50
commit 23464e18e2
  1. 4
      src/redux/actions/userFactor.js
  2. 8
      src/redux/reducers/userFactor.js
  3. 4
      src/views/Dashboard/layouts/Main/index.js
  4. 13
      src/views/Order/index.js
  5. 133
      src/views/Orders/components/Order.js
  6. 67
      src/views/Orders/index.js

@ -22,6 +22,10 @@ const userFactor = {
await proxy.delete("userFactor/delete", data);
await proxy.get("userFactor/list", data2, { dispatch });
},
fullList:
(data = {}) =>
async (dispatch) =>
await proxy.get("userFactor/fullList", data, { dispatch }),
//vod
vodPayment:

@ -7,6 +7,7 @@ const initialState = {
sum: null,
checkEmpty: false,
isVerified: null,
fullList: [],
};
export default function userFactor(state = initialState, action) {
@ -24,6 +25,13 @@ export default function userFactor(state = initialState, action) {
checkEmpty: checkEmpty.length > 0 ? false : true,
error: null,
};
case "userFactor/fullList":
return {
...state,
loading: false,
fullList: data,
error: null,
};
case "userFactor/info":
return { ...state, loading: false, info: data, error: null };
case "userFactor/add":

@ -3,6 +3,7 @@ import { connect } from "react-redux";
import { publicApi } from "../../../../redux/actions";
import Orders from "../../../Orders";
import Order from "../../../Order";
import UserItems from "../Main/UserItems";
import MyBooks from "./MyBooks";
import Ticket from "../../../Contact/layouts/Ticket";
@ -12,7 +13,8 @@ import Address from "../../../Address";
import Profile from "../../../Auth/Profile";
const views = {
orders: <Orders />,
orders: <Orders isDashboard={true} />,
order: <Order isDashboard={true} />,
myBooks: <MyBooks />,
userItems: <UserItems />,
ticket: (

@ -19,12 +19,15 @@ const status = {
2: window.t("ارسال شده"),
};
function OrderDetails({ order, setHeaderOptions, headerOptions }) {
function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
useEffect(() => {
setHeaderOptions(headerOptions);
if (isMobile) {
setHeaderOptions(headerOptions);
}
}, []);
return (
<div className="px-4 flex flex-col py-5 lg:pt-24 lg:w-3/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">
<strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
{_.join([window.t("شماره سفارش:"), order.number], " ")}
@ -149,7 +152,9 @@ function OrderDetails({ order, setHeaderOptions, headerOptions }) {
);
}
const mapStateToProps = (state) => ({});
const mapStateToProps = (state) => ({
isMobile: state.config.device === "mobile",
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,

@ -1,8 +1,10 @@
import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import moment from "jalali-moment";
//assets
import leftArrowIcon from "../../../assets/icons/dropdown-blue.svg";
import _ from "lodash";
const colors = {
1: "#FFF700",
@ -18,107 +20,88 @@ const status = {
2: window.t("ارسال شده"),
};
function Order({ order, isMobile }) {
function Order({ order, setDashboardPage, isDashboard }) {
return (
<div className="w-full flex flex-col rounded-md overflow-hidden my-3 border border-solid border-blueC0 border-opacity-50 dark:border-blueC0 dark:border-opacity-10 lg:w-4/5 mx-auto">
<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">
<strong className="font-medium text-sm lg:text-tiny text-green4F dark:text-white">
{_.join([window.t("شماره سفارش:"), order.number], " ")}
</strong>
<div className="flex items-center">
<span className="text-xs lg:text-tiny font-light text-green4F dark:text-white">
{status[order.status]}
</span>
<div
className="h-4 w-4 rounded-full mr-2"
style={{ backgroundColor: colors[order.status] }}
></div>
</div>
{order?.transactionId ? (
<strong className="font-medium text-sm lg:text-sm text-green4F dark:text-white">
{"شماره سفارش:" + " " + order?.transactionId}
</strong>
) : null}
{order?.condition ? (
<div className="flex items-center">
<span className="text-xs lg:text-sm font-light text-green4F 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>
<div className="w-full flex justify-between p-3">
<div className="flex flex-col">
<div className="flex mb-2">
{order.items.length < 2
? order?.items?.map((item, index) => (
{order.userProducts.length < 2
? order?.userProducts?.map((product, index) => (
<img
key={index}
src={item}
className="rounded-md ml-1.5"
style={{
width: isMobile ? 60 : 100,
height: isMobile ? 90 : 150,
}}
src={`https://dnvn.ir/api/v1/file/${product?.product?.book?.fileIds}`}
className="rounded-md ml-1.5 object-cover lg:w-1/5"
alt=""
/>
))
: order.items?.slice(0, 1)?.map((item, index) => (
<img
key={index}
src={item}
className="rounded-md ml-1.5"
style={{
width: isMobile ? 60 : 100,
height: isMobile ? 90 : 150,
}}
alt=""
/>
))}
{isMobile && order.items.length >= 2 && (
<div
className="flex items-center justify-center relative rounded-md overflow-hidden bg-grayEE dark:bg-gray-400"
style={{
width: 60,
height: 90,
}}
></div>
)}
: order.userProducts
?.slice(0, 1)
?.map((product, index) => (
<img
key={index}
src={`https://dnvn.ir/api/v1/file/${product?.product?.book?.fileIds}`}
className="rounded-md ml-1.5 object-cover lg:w-1/5"
alt=""
/>
))}
</div>
<div>
<div
className="p-2 rounded-md text-center text-xs bg-grayEE dark:bg-gray-400 dark:text-white text-blue5F lg:hidden"
style={{
fontFamily: "bold",
}}
>
{_.join([window.t("کد تحویل:"), order.receiveCode], " ")}
</div>
{order?.followCode ? (
<div className="p-2 rounded-md text-center text-xs bg-grayEE dark:bg-gray-400 dark:text-white text-blue5F lg:hidden">
{"کد تحویل:" + " " + order?.followCode}
</div>
) : null}
</div>
</div>
<div className="flex flex-col items-center mr-4">
<div className="hidden lg:flex w-full">
<div
className="py-4 rounded-md text-center text-sm dark:bg-gray-400 dark:text-white text-blue5 w-full"
{order?.payPrice ? (
<strong
className="my-3 text-sm bg-gray-100 py-4 rounded-md dark:bg-blueC0 dark:text-white text-blue52 lg:w-full text-center"
style={{
fontFamily: "bold",
backgroundColor: "#F0FFF1",
}}
>
{_.join([window.t("کد تحویل:"), order.receiveCode], " ")}
</div>
</div>
<strong
className="my-3 text-sm bg-gray-100 py-4 rounded-md dark:bg-blueC0 dark:text-white text-blue52 lg:w-full text-center"
style={{
fontFamily: "bold",
}}
>
{_.join([window.t("جمع فاکتور:"), order.cost], " ")}
</strong>
{"جمع فاکتور:" + " " + order?.payPrice}
</strong>
) : null}
<Link
to="/orders/order"
className="rounded-md flex justify-center px-5 py-2.5 border border-solid border-blueC0 text-green4F bg-blueC0 bg-opacity-10"
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") : {})}
>
{window.t("جزئیات سفارش")}
<img
src={leftArrowIcon}
style={{ width: 18 }}
className="transform rotate-90"
className="transform rotate-90 w-4"
alt=""
/>
</Link>
<span className="my-5 text-xs text-blue52 font-light dark:text-white lg:hidden">
{_.join([window.t("تاریخ سفارش:"), order.date], " ")}
</span>
{order?.payedAt ? (
<span className="my-5 text-xs text-blue52 font-light dark:text-white lg:hidden">
{"تاریخ سفارش:" +
" " +
moment(order?.payedAt)?.format("jYYYY/jMM/jDD")}{" "}
</span>
) : null}
</div>
</div>
</div>
@ -126,7 +109,7 @@ function Order({ order, isMobile }) {
}
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
isMobile: state.config.device === "mobile",
});
export default connect(mapStateToProps)(Order);

@ -1,44 +1,63 @@
import React, { useEffect } from "react";
import Order from "./components/Order";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
//assets
import bookImage from "../../assets/images/book-mini.svg";
import { publicApi, userFactor, dashboard } from "../../redux/actions";
import { useNavigate } from "react-router-dom";
function Orders({ orders = [], headerOptions, setHeaderOptions }) {
//components
import Order from "./components/Order";
import Empty from "../../components/Empty";
React.useEffect(() => {
setHeaderOptions({
logo: true,
hamburgerMenu: true,
qr: true,
title: false,
back: false,
shown: true,
menu: false,
});
}, []);
function Orders({
orders,
headerOptions,
setHeaderOptions,
getOrdersList,
isMobile,
isDashboard,
setDashboardPage,
}) {
const navigation = useNavigate();
useEffect(() => {
// alert();
window.scrollTo(0, 0);
React.useEffect(() => {
if (isMobile) {
setHeaderOptions(headerOptions);
}
getOrdersList();
}, []);
return (
<div className="flex flex-col px-4">
{orders.map((order, index) => (
<Order order={order} key={index} />
))}
<div className="flex flex-col px-4 flex-1">
{orders?.length ? (
<div className="flex-1 flex flex-wrap lg:justify-center">
{orders.map((order, index) => (
<Order
order={order}
key={index}
setDashboardPage={setDashboardPage}
isDashboard={isDashboard}
/>
))}
</div>
) : (
<Empty
text="هیچ محصولی برای شما به ثبت نرسیده است."
buttonText="ثبت اولین سفارش"
buttonAction={() => navigation("/products")}
/>
)}
</div>
);
}
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
orders: state.userFactor.fullList,
isMobile: state.config.device === "mobile",
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
getOrdersList: userFactor.fullList,
setDashboardPage: dashboard.setPage,
};
export default connect(mapStateToProps, mapDispatchToProps)(Orders);

Loading…
Cancel
Save