commit(ark_order)

src/AppRouter.js

@@ -32,6 +32,7 @@ import Blogs from "./views/Blogs/index";
 import Blog from "./views/Blog/index";
 // import Sample from "./views/Sample/index";
 import PDF from "./views/PDF/index";
+import Orders from "./views/Orders";
 class AppRouter extends Component {
   constructor(props) {
     super(props);
@@ -100,6 +101,9 @@ class AppRouter extends Component {
           <Route exact path={"/products"}>
             <Products />
           </Route>
+          <Route exact path="/orders">
+            <Orders />
+          </Route>
           {/* <Route path={"/sample"}>
             <Sample />
           </Route> */}

src/Redux/actions/userFactor.js

@@ -3,7 +3,7 @@ const userFactor = {
   list:
     (data = {}) =>
     async (dispatch) =>
-      await proxy.get("userFactor/list", data, { dispatch }),
+      await proxy.get("userFactor/myList", data, { dispatch }),
   info:
     (data = {}) =>
     async (dispatch) =>

src/Redux/reducers/userFactor.js

@@ -3,7 +3,7 @@ import { toast } from "react-toastify";
 const initialState = {
   loading: false,
   error: null,
-  list: [],
+  list: null,
   info: null,
   sum: null,
   checkEmpty: false,

src/views/MyBook2/index.js

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import './index.css';
+
+const MyBooks=()=>{
+
+  const [data, set_data] = useState([
+    {
+      id: 1,
+      name: "ریاضی دهم",
+      activation_date: "1400/05/22",
+      activation_code: "2434df3r3",
+      ARId: "",
+      QRId: "",
+      type: 1,
+    },
+    {
+      id: 2,
+      name: "ریاضی دهم",
+      activation_date: "1400/05/22",
+      activation_code: "2434df3r3",
+      ARId: "",
+      QRId: "",
+      type: 1,
+    },
+    {
+      id: 3,
+      name: "ریاضی دهم",
+      activation_date: "1400/05/22",
+      activation_code: "2434df3r3",
+      ARId: "",
+      QRId: "",
+      type: 1,
+    },
+    {
+      id: 4,
+      name: "ریاضی دهم",
+      activation_date: "1400/05/22",
+      activation_code: "2434df3r3",
+      ARId: "",
+      QRId: "",
+      type: 1,
+    },
+  ]);
+  return (
+    <div className="mybooks">
+      <div className="mybooks-title">کتاب‌ های من</div>
+      <div className="mybooks-tabs">
+        <div className="mybooks-tabs-item mybooks-tabs-item1">
+          فعال سازی شده
+        </div>
+        <div className="mybooks-tabs-item mybooks-tabs-item2">دیجیتال</div>
+      </div>
+      <div className="mybooks-line"></div>
+      <div className="mybooks-main-content">
+
+      </div>
+    </div>
+  );
+}
+
+export default MyBooks;

src/views/Orders/index.css

@@ -0,0 +1,138 @@
+
+
+
+.order{
+  width: 100%;
+  margin-top: 70px;
+  padding: 0 5px;
+}
+
+/* .order-line{
+  width: 100%;
+  height: 1px;
+  background-color: rgb(201, 199, 199);
+  margin-top: 10px;
+} */
+
+.order-title{
+  width: 100%;
+  direction: rtl;
+  font-size: 25px;
+  font-weight: bold;
+  color: #5DC964;
+}
+
+.order-data-container{
+  width: 100%;
+}
+
+.order-data-container-item{
+  width: 100%;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgb(201, 199, 199);
+}
+
+.order-data-container-item-row1{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  direction: rtl;
+  margin-top: 10px;
+}
+
+.order-data-container-item-row1-order-id,
+.order-data-container-item-row2-order-date,
+.order-data-container-item-row3-order-price,
+.order-data-container-item-row2-transactionId,
+.order-data-container-item-row3-order-offcodeprice{
+  font-size: 16px;
+  color: #555;
+  direction: rtl;
+}
+
+.order-data-container-item-row1-order-id span,
+.order-data-container-item-row2-order-date span,
+.order-data-container-item-row3-order-price span,
+.order-data-container-item-row3-order-offcodeprice span{
+  font-size: 16px;
+  color: #333;
+  margin-right: 5px;
+  direction: ltr !important;
+}
+
+.order-data-container-item-row1-order-status{
+  display: flex;
+  align-items: center;
+  direction: rtl;
+}
+
+.order-data-container-item-row1-order-status-circle{
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: black;
+  margin-left: 3px;
+}
+
+.order-data-container-item-row1-order-status-text{
+  font-size: 13px;
+  width: 100px;
+  text-align: center;
+  padding: 2px 0;
+  background-color: #999;
+  border-radius: 5px;
+}
+
+.order-data-container-item-row2{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.odcir2op-unit,.odcir2oo-unit{
+  font-size: 12px !important;
+  margin-right: 3px !important;
+}
+
+.order-data-container-item-row3{
+  width: 100%;
+  margin-top: 10px;
+}
+
+.order-data-container-item-row3-order-offcodeprice{
+  margin-top: 10px;
+}
+
+
+.order-data-container-item-row4{
+  width: 100%;
+}
+
+.order-data-container-item-row4-imgs{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  direction: ltr;
+}
+
+.order-data-container-item-row4-imgs-container{
+  width:18%;
+  aspect-ratio: 1/1;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: brown;
+  margin-right: 5px;
+}
+
+.order-data-container-item-row4-imgs-img{
+  width: 100%;
+  height: 100%;
+}
+
+.order-message{
+  width: 100%;
+  font-size: 20px;
+}

src/views/Orders/index.js

@@ -0,0 +1,197 @@
+import { useState } from "react";
+import { userFactor } from "../../Redux/actions";
+import { connect } from "react-redux";
+import Navbar from "../Home/Navbar";
+
+
+import './index.css';
+
+const Orders=(props)=>{
+  // const [data, set_data] = useState([
+  //   {
+  //     id: "12345",
+  //     transactionId: "43448y35",
+  //     payedAt: "1400/06/24",
+  //     condition: 1,
+  //     payPrice: 2500000,
+  //     offPrice: 10000,
+  //     description: "",
+  //     products: [
+  //       {
+  //         id: 1,
+  //         ARId: "",
+  //         book: {
+  //           name: "",
+  //           fileId: "",
+  //         },
+  //       },
+  //       {
+  //         id: 2,
+  //         ARId: "",
+  //         book: {
+  //           name: "",
+  //           fileId: "",
+  //         },
+  //       },
+  //     ],
+  //   },
+  //   {
+  //     id: "45679f",
+  //     transactionId: "43448y35",
+  //     payedAt: "1400/06/24",
+  //     condition: 2,
+  //     payPrice: 2500000,
+  //     offPrice: 0,
+  //     description: "",
+  //     products: [
+  //       {
+  //         id: '1',
+  //         ARId: "",
+  //         book: {
+  //           name: "",
+  //           fileId: "",
+  //         },
+  //       },
+  //       {
+  //         id: 2,
+  //         ARId: "",
+  //         book: {
+  //           name: "",
+  //           fileId: "",
+  //         },
+  //       },
+  //     ],
+  //   },
+  //   {
+  //     id: "509685f",
+  //     transactionId: "43448y35",
+  //     payedAt: "1400/06/24",
+  //     condition: 3,
+  //     payPrice: 2500000,
+  //     offPrice: 10000,
+  //     description: "",
+  //     products: [
+  //       {
+  //         id: 1,
+  //         ARId: "",
+  //         book: {
+  //           name: "",
+  //           fileId: "",
+  //         },
+  //       },
+  //       {
+  //         id: 2,
+  //         ARId: "",
+  //         book: {
+  //           name: "",
+  //           fileId: "",
+  //         },
+  //       },
+  //     ],
+  //   },
+  // ]);
+  props.getList();
+  let data = props.list;
+  return (
+    <div className="order">
+      <Navbar />
+      <div className="order-title">سفارشات من</div>
+      <div className="order-data-container">
+        {data != null &&
+          data.map((item) => (
+            <div className="order-data-container-item">
+              <div className="order-data-container-item-row1">
+                <div className="order-data-container-item-row1-order-id">
+                  شناسه سفارش: <span>{item.id}</span>
+                </div>
+                <div className="order-data-container-item-row1-order-status">
+                  <div
+                    style={
+                      item.condition == 1
+                        ? { backgroundColor: "#11FA2F" }
+                        : item.condition == 2
+                        ? { backgroundColor: "#11FADB" }
+                        : item.condition == 3
+                        ? { backgroundColor: "#FA3011" }
+                        : null
+                    }
+                    className="order-data-container-item-row1-order-status-circle"
+                  ></div>
+                  <div
+                    style={
+                      item.condition == 1
+                        ? { backgroundColor: "#B0F8B5", color: "#0F9420" }
+                        : item.condition == 2
+                        ? { backgroundColor: "#B5FFFD", color: "#30C2BD" }
+                        : item.condition == 3
+                        ? { backgroundColor: "#FDC9B6", color: "#FA4C0D" }
+                        : null
+                    }
+                    className="order-data-container-item-row1-order-status-text"
+                  >
+                    {item.condition == 1 && "در حال پردازش"}
+                    {item.condition == 2 && "ارسال شد"}
+                    {item.condition == 3 && "لغو شد"}
+                  </div>
+                </div>
+              </div>
+              <div className="order-data-container-item-row2">
+                <div className="order-data-container-item-row2-transactionId">
+                  شناسه پرداخت : <span>{item.transactionId}</span>
+                </div>
+                <div className="order-data-container-item-row2-order-date">
+                  تاریخ سفارش : <span>{item.payedAt}</span>
+                </div>
+              </div>
+              <div className="order-data-container-item-row3">
+                <div className="order-data-container-item-row3-order-price">
+                  مبلغ : <span>{item.payPrice}</span>{" "}
+                  <span className="odcir2op-unit">تومان</span>
+                </div>
+                {item.offCodePrice != 0 && (
+                  <div className="order-data-container-item-row3-order-offcodeprice">
+                    میزان تخفیف : <span>{item.offPrice}</span>{" "}
+                    <span className="odcir2oo-unit">تومان</span>
+                  </div>
+                )}
+              </div>
+              <div className="order-data-container-item-row4">
+                <div className="order-data-container-item-row4-imgs">
+                  {item.products.map((item) => (
+                    <div className="order-data-container-item-row4-imgs-container">
+                      <img
+                        className="order-data-container-item-row4-imgs-img"
+                        src={`https://dnvn.ir/api/v1/file/${item.book.fileIds.split(",")[0]}`}
+                        alt="order-img"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        {data == null && (
+          <div className="order-message">سفارشی برای نماش وجود ندارد</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+
+const mapStateToPropS = state =>{
+  return{
+    list:state.list
+  }
+}
+
+const mapDispatchToProps = dispatch =>{
+  return{
+    getList:()=> dispatch(userFactor.list())
+  }
+}
+
+export default connect(mapStateToPropS, mapDispatchToProps)(Orders);
+
+
+