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. 69
      src/views/Orders/index.js

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

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

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

@ -19,12 +19,15 @@ const status = {
2: window.t("ارسال شده"), 2: window.t("ارسال شده"),
}; };
function OrderDetails({ order, setHeaderOptions, headerOptions }) { function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
useEffect(() => { useEffect(() => {
setHeaderOptions(headerOptions); if (isMobile) {
setHeaderOptions(headerOptions);
}
}, []); }, []);
return ( 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"> <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"> <strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
{_.join([window.t("شماره سفارش:"), order.number], " ")} {_.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 = { const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions, setHeaderOptions: publicApi.setHeaderOptions,

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

@ -1,44 +1,63 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import Order from "./components/Order";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../redux/actions"; import { publicApi, userFactor, dashboard } from "../../redux/actions";
//assets import { useNavigate } from "react-router-dom";
import bookImage from "../../assets/images/book-mini.svg";
function Orders({ orders = [], headerOptions, setHeaderOptions }) { //components
import Order from "./components/Order";
React.useEffect(() => { import Empty from "../../components/Empty";
setHeaderOptions({
logo: true, function Orders({
hamburgerMenu: true, orders,
qr: true, headerOptions,
title: false, setHeaderOptions,
back: false, getOrdersList,
shown: true, isMobile,
menu: false, isDashboard,
}); setDashboardPage,
}, []); }) {
const navigation = useNavigate();
useEffect(() => { React.useEffect(() => {
// alert(); if (isMobile) {
window.scrollTo(0, 0); setHeaderOptions(headerOptions);
}
getOrdersList();
}, []); }, []);
return ( return (
<div className="flex flex-col px-4"> <div className="flex flex-col px-4 flex-1">
{orders.map((order, index) => ( {orders?.length ? (
<Order order={order} key={index} /> <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> </div>
); );
} }
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile, orders: state.userFactor.fullList,
isMobile: state.config.device === "mobile",
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions, setHeaderOptions: publicApi.setHeaderOptions,
getOrdersList: userFactor.fullList,
setDashboardPage: dashboard.setPage,
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Orders); export default connect(mapStateToProps, mapDispatchToProps)(Orders);

Loading…
Cancel
Save