reza added orders and order

temp
Reza_ashrafi 3 years ago
parent 7e551c5a50
commit ebd0f71210
  1. 8
      src/assets/images/book-mini.svg
  2. 2
      src/components/Navbar/index.js
  3. 2
      src/redux/reducers/public.js
  4. 53
      src/router.js
  5. 8
      src/views/404/404.svg
  6. 36
      src/views/404/index.js
  7. BIN
      src/views/Order/assets/b1.png
  8. 27
      src/views/Order/components/Book.js
  9. 158
      src/views/Order/index.js
  10. BIN
      src/views/Orders/assets/leftArrow.png
  11. BIN
      src/views/Orders/assets/plus.png
  12. 106
      src/views/Orders/components/Order.js
  13. 56
      src/views/Orders/index.js
  14. 4
      tailwind.config.js

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 62 KiB

@ -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",
],
" "
)}

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

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

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 37 KiB

@ -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);

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

@ -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>
);
}

@ -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",
},
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 B

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

@ -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",
},
],
};

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

Loading…
Cancel
Save