update 6 files

src/redux/actions/userFactor.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:

src/redux/reducers/userFactor.js

@@ -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":

src/views/Dashboard/layouts/Main/index.js

@@ -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: (

src/views/Order/index.js

@@ -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,

src/views/Orders/components/Order.js

@@ -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">
+        {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 className="w-full flex justify-between p-3">
         <div className="flex flex-col">
           <div className="flex mb-2">
-            {order.items.length < 2
+            {order.userProducts.length < 2
-              ? order?.items?.map((item, index) => (
+              ? order?.userProducts?.map((product, index) => (
                   <img
                     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=""
                   />
                 ))
-              : 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
+            {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 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={{
                 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
-            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("جزئیات سفارش")}
             <img
               src={leftArrowIcon}
-              style={{ width: 18 }}
+              className="transform rotate-90 w-4"
-              className="transform rotate-90"
               alt=""
             />
           </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>
@@ -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);

src/views/Orders/index.js

@@ -1,44 +1,63 @@
 import React, { useEffect } from "react";
-import Order from "./components/Order";
 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";
+import Empty from "../../components/Empty";
 
-  React.useEffect(() => {
+function Orders({
-    setHeaderOptions({
+  orders,
-      logo: true,
+  headerOptions,
-      hamburgerMenu: true,
+  setHeaderOptions,
-      qr: true,
+  getOrdersList,
-      title: false,
+  isMobile,
-      back: false,
+  isDashboard,
-      shown: true,
+  setDashboardPage,
-      menu: false,
+}) {
-    });
+  const navigation = useNavigate();
-  }, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
-    // alert();
+    if (isMobile) {
-    window.scrollTo(0, 0);
+      setHeaderOptions(headerOptions);
+    }
+    getOrdersList();
   }, []);
 
   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>
   );
 }
 
 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);