reza added orders and order

src/components/Navbar/index.js

@@ -43,7 +43,7 @@ function Navbar({ pages, isDark, headerOptions }) {
     <div
       className={_.join(
         [
-          "z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300",
+          "z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300 shadow-md",
         ],
         " "
       )}

src/redux/reducers/public.js

@@ -1,7 +1,7 @@
 import location from "../../utils/location";
 
 const initialState = {
-  isDark: localStorage.getItem("isDark") || false,
+  isDark: localStorage.getItem("isDark") || true,
   homeData: [],
   newProducts: [],
   levels: [],

src/router.js

@@ -14,6 +14,9 @@ import ShoppingCart from "./views/ShoppingCart";
 import DeliveryForm from "./views/DeliveryForm";
 import Videos from "./views/Videos";
 import QR from "./views/QR";
+import NotFound from "./views/404";
+import Orders from "./views/Orders";
+import Order from "./views/Order";
 // import VideoTube from "./views/Home/VideoTube";
 
 function Router({ isDark, isLogin, headerOptions }) {
@@ -142,18 +145,60 @@ function Router({ isDark, isLogin, headerOptions }) {
               element={
                 <QR
                   headerOptions={{
-                    shown : 'false'
+                    shown: "false",
                   }}
                   page="scan"
                 />
               }
             />
+            <Route
+              path="/orders"
+              exact
+              element={
+                <Orders
+                  headerOptions={{
+                    shown: "true",
+                    title: "سفارش من",
+                    back: true,
+                    logo: false,
+                    menu: false,
+                    hamburgerMenu: false,
+                    bookmark: false,
+                  }}
+                />
+              }
+            />
+            <Route
+              path="/orders/order"
+              exact
+              element={
+                <Order
+                  headerOptions={{
+                    logo: true,
+                    hamburgerMenu: false,
+                    qr: true,
+                    title: false,
+                    shown: true,
+                    menu: false,
+                    back: true,
+                  }}
+                />
+              }
+            />
             <Route
               path="*"
               element={
-                <main>
-                  <h1>No matches routes.</h1>
-                </main>
+                <NotFound
+                  headerOptions={{
+                    logo: true,
+                    hamburgerMenu: true,
+                    qr: true,
+                    title: false,
+                    back: false,
+                    shown: true,
+                    menu: false,
+                  }}
+                />
               }
             />
           </Routes>

src/views/404/index.js

@@ -0,0 +1,36 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import notFoundImage from "./404.svg";
+import { publicApi } from "../../redux/actions";
+
+function NotFound({ headerOptions, setHeaderOptions }) {
+  useEffect(() => {
+    setHeaderOptions(headerOptions);
+  }, []);
+  return (
+    <div
+      className="w-full flex h-full transform justify-center items-center flex-col bg-transparent px-4"
+      style={{ height: "calc(100vh - 160px)" }}
+    >
+      <h1
+        className="dark:text-white text-5xl font-semibold"
+        style={{ fontFamily: "tahoma" }}
+      >
+        404
+      </h1>
+      <img src={notFoundImage} alt="404" className="mt-10" />
+      <p className="text-base dark:text-white mt-12">
+        وای!!
+        <br />
+        صفحه ای که بدنبال آن بوده‌اید دیگر وجود ندارد :(
+      </p>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {
+  setHeaderOptions: publicApi.setHeaderOptions,
+};
+export default connect(mapStateToProps, mapDispatchToProps)(NotFound);

src/views/Order/components/Book.js

@@ -0,0 +1,27 @@
+import React from "react";
+import _ from "lodash";
+
+export default function Book({ book }) {
+  return (
+    <div className="w-full flex flex-row justify-between py-3 border-b border-solid border-blueFF1 dark:border-gray45">
+      <div className="flex flex-row items-center flex-1">
+        <img
+          src={book}
+          className="rounded-md"
+          style={{ width: 60, height: 90 }}
+        />
+        <div className="flex flex-col mr-2">
+          <strong className="text-xs text-blue5 dark:text-white">علوم اجتماعی</strong>
+          <span className="mt-2 text-xs text-gray70 dark:text-greenBA">پایه دوم</span>
+          <span className="mt-1 text-xs text-blue5F dark:text-white">نسخه دیجیتال</span>
+        </div>
+      </div>
+      <div className="flex flex-row items-center">
+        <span className="py-1 px-2 rounded-sm text-blue52 text-sm bg-grayF9 dark:bg-gray-500 dark:text-white">
+          1
+        </span>
+        <div className="mr-3 text-blue52 text-xs dark:text-white">126.000 تومان</div>
+      </div>
+    </div>
+  );
+}

src/views/Order/index.js

@@ -0,0 +1,158 @@
+import React, { useEffect } from "react";
+import Book from "./components/Book";
+import { connect } from "react-redux";
+import {publicApi} from '../../redux/actions';
+import b1Image from "./assets/b1.png";
+import _ from "lodash";
+
+const colors = {
+  1: "#FFF700",
+  4: "#FF0000",
+  3: "#4CFF00",
+  2: "#196EC0",
+};
+
+const status = {
+  1: "در حال پردازش",
+  4: "درخواست رد شد",
+  3: "تکمیل شد",
+  2: "ارسال شده",
+};
+
+function OrderDetails({ order, setHeaderOptions, headerOptions }) {
+  useEffect(() => {
+    setHeaderOptions(headerOptions);
+  },[]);
+  return (
+    <div className="px-4 flex flex-col py-5">
+      <div className="flex flex-row w-full justify-between items-center p-3 bg-blueFF1 rounded-t-md dark:bg-blueC0 dark:bg-opacity-10">
+        <strong className="font-medium text-sm text-blue52 dark:text-white">
+          {_.join(["شماره سفارش:", order.number], " ")}
+        </strong>
+        <div className="flex flex-row items-center">
+          <span className="text-xs 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 py-4 border-b border-solid border-blueFF1 dark:border-gray45">
+        <strong className="text-xs text-blue5F dark:text-white">آدرس تحویل:</strong>
+        <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F 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 text-blue5F dark:text-white">مشخصات تحویل گیرنده:</strong>
+          <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
+            {order.name}
+          </span>
+        </div>
+        <div className="flex flex-row py-4">
+          <strong className="text-xs text-blue5F dark:text-white">شماره موبایل:</strong>
+          <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
+            {order.cellphone}
+          </span>
+        </div>
+      </div>
+      <div className="w-full rounded-md flex flex-col p-4 mt-2 bg-blueFF1 dark:bg-blueC0 dark:bg-opacity-20 dark:border-blueC0 dark:border dark:border-solid">
+        <strong className="text-xs text-blue5F dark:text-white">
+          {_.join(["کد تحویل", order.receiveCode], " ")}
+        </strong>
+        <p className="font-light text-right mt-1 text-xs text-blue5F dark:text-white">
+          این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید
+        </p>
+      </div>
+      <div className="w-full flex flex-col">
+        {order.items.map((item, index) => (
+          <Book book={item} 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 text-blue5F dark:text-white">مبلغ سبد خرید:</strong>
+          <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
+            {_.join([order.shoppingCardPrice, "تومان"], " ")}
+          </span>
+        </div>
+        <div className="flex flex-row py-4">
+          <strong className="text-xs text-blue5F dark:text-white">تخفیف:</strong>
+          <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
+            {_.join([order.discountPrice, "تومان"], " ")}
+          </span>
+        </div>
+      </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 text-blue5F dark:text-white"> هزینه ارسال کالا:</strong>
+          <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
+            {_.join([order.sendPrice, "تومان"], " ")}
+          </span>
+        </div>
+        <div className="flex flex-row py-4 border">
+          <strong className="text-xs text-blue5F dark:text-white">جمع هزینه پرداختی:</strong>
+          <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
+            {_.join([order.totalPrice, "تومان"], " ")}
+          </span>
+        </div>
+      </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 text-blue5F dark:text-white">نحوه پرداخت:</strong>
+          <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
+            {order.payMethod}
+          </span>
+        </div>
+        <div className="flex flex-row py-4">
+          <strong className="text-xs text-blue5F dark:text-white"> شماره تراکنش:</strong>
+          <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
+            {order.transactionNumber}
+          </span>
+        </div>
+      </div>
+      <div className="w-full flex flex-row justify-between py-2">
+        <div className="w-full flex flex-row py-4">
+          <strong className="text-xs text-blue5F dark:text-white">تاریخ تحویل:</strong>
+          <span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
+            {order.date}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+
+});
+
+const mapDispatchToProps = {
+  setHeaderOptions: publicApi.setHeaderOptions,
+}
+
+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:
+      "تهران خیابان انقلاب حدفاصل ابوریحان و فلسطین بن بست سروش پلاک 2 واحد 12 شرقی",
+    name: "هومن عابدی",
+    cellphone: "09121234568",
+    shoppingCardPrice: "981.000",
+    discountPrice: "12.000",
+    sendPrice: "18.000",
+    totalPrice: "18.000",
+    payMethod: "حضوری",
+    transactionNumber: " BS3194DNB98312",
+  },
+};

src/views/Orders/components/Order.js

@@ -0,0 +1,106 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import leftArrowIcon from "../assets/leftArrow.png";
+import _ from "lodash";
+
+const colors = {
+  1: "#FFF700",
+  4: "#FF0000",
+  3: "#4CFF00",
+  2: "#196EC0",
+};
+
+const status = {
+  1: "در حال پردازش",
+  4: "درخواست رد شد",
+  3: "تکمیل شد",
+  2: "ارسال شده",
+};
+
+function Order({ order }) {
+  return (
+    <div className="w-full flex flex-col rounded-md overflow-hidden my-3 border border-solid border-blueFF1 dark:border-bluec0 dark:border-opacity-10">
+      <div className="flex flex-row w-full justify-between items-center p-3 bg-blueFF1 dark:bg-blueC0 dark:bg-opacity-10">
+        <strong className="font-medium text-sm text-blue52 dark:text-white">
+          {_.join(["شماره سفارش:", order.number], " ")}
+        </strong>
+        <div className="flex flex-row items-center">
+          <span className="text-xs 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 justify-between p-3">
+        <div className="flex flex-col">
+          <div className="flex flex-row mb-2">
+            {order.items.length < 2
+              ? order?.items?.map((item) => (
+                  <img
+                    src={item}
+                    className="rounded-md ml-1.5"
+                    style={{ width: 60, height: 90 }}
+                  />
+                ))
+              : order.items
+                  ?.slice(0, 1)
+                  ?.map((item) => (
+                    <img
+                      src={item}
+                      className="rounded-md ml-1.5"
+                      style={{ width: 60, height: 90 }}
+                    />
+                  ))}
+            {order.items.length >= 2 && (
+              <div
+                className="flex flex-row items-center justify-center relative rounded-md overflow-hidden bg-grayEE dark:bg-gray-400"
+                style={{
+                  width: 60,
+                  height: 90,
+                }}
+              ></div>
+            )}
+          </div>
+          <div>
+            <div
+              className="p-2 rounded-md text-center text-xs bg-grayEE dark:bg-gray-400 dark:text-white text-blue5F"
+              style={{
+                fontFamily: "bold",
+              }}
+            >
+              {_.join(["کد تحویل:", order.receiveCode], " ")}
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col items-center mr-4">
+          <strong
+            className="my-3 text-sm bg-gray-100 p-2 rounded-md dark:bg-blueC0 dark:text-white text-blue52"
+            style={{
+              fontFamily: "bold",
+            }}
+          >
+            {_.join(["جمع فاکتور:", order.cost], " ")}
+          </strong>
+          <Link
+            to="/orders/order"
+            className="rounded-md flex flex-row justify-center px-5 py-2 border border-solid border-blueC01 text-blueC01"
+          >
+            جزئیات سفارش
+            <img
+              src={leftArrowIcon}
+              style={{ width: 18, height: 18, marginRight: 10 }}
+            />
+          </Link>
+          <span className="my-5 text-xs text-blue52 font-light dark:text-white">
+            {_.join(["تاریخ سفارش:", order.date], " ")}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Order;

src/views/Orders/index.js

@@ -0,0 +1,56 @@
+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";
+
+function Orders({ orders, headerOptions, setHeaderOptions }) {
+  useEffect(() => {
+    setHeaderOptions(headerOptions);
+  }, []);
+  return (
+    <div className="flex flex-col px-4">
+      {orders.map((order, index) => (
+        <Order order={order} key={index} />
+      ))}
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {
+  setHeaderOptions: publicApi.setHeaderOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Orders);
+
+Orders.defaultProps = {
+  orders: [
+    {
+      number: "535353523653",
+      receiveCode: "300031",
+      status: 2,
+      items: [bookImage, bookImage, bookImage, bookImage],
+      date: "1400/1/12",
+      cost: "1.240.000",
+    },
+    {
+      number: "535353523653",
+      receiveCode: "300031",
+      status: 3,
+      items: [bookImage, bookImage, bookImage],
+      date: "1400/1/12",
+      cost: "1.240.000",
+    },
+    {
+      number: "535353523653",
+      receiveCode: "300031",
+      status: 4,
+      items: [bookImage, bookImage, bookImage],
+      date: "1400/1/12",
+      cost: "1.240.000",
+    },
+  ],
+};

tailwind.config.js

@@ -32,6 +32,7 @@ module.exports = {
       ...theme("colors"),
       primary: "#235A90",
       blueC0: "#196EC0",
+      blueC01: "#1999C0",
       blueE8: "#2E81E8",
       blue52: "#132F52",
       blue5F: "#05335F",
@@ -47,10 +48,13 @@ module.exports = {
     borderColor: (theme) => ({
       ...theme("colors"),
       blueC0: "#196EC0",
+      blueC01: "#1999C0",
       blueFE: "#C1E0FE",
+      blueFF1: "#E9F0FF",
       blueB9: '#86A0B9',
       grayDB: "#DBDBDB",
       gray45: "#454545",
+
     }),
     fill: (theme) => ({
       ...theme("colors"),