show order
This commit is contained in:
pawan-dot
parent
c0862b0b1e
commit
4ca7f525d6
@ -13,7 +13,7 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
|
"author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "react-scripts --openssl-legacy-provider start",
|
"dev": "react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"build:n17": "react-scripts --openssl-legacy-provider build",
|
"build:n17": "react-scripts --openssl-legacy-provider build",
|
||||||
"changelog": "auto-changelog --starting-version 4.1.0 --commit-limit false --hide-credit",
|
"changelog": "auto-changelog --starting-version 4.1.0 --commit-limit false --hide-credit",
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,84 +1,91 @@
|
|||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from "react";
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from "react-router-dom";
|
||||||
import axios from 'axios'
|
import axios from "axios";
|
||||||
|
|
||||||
import { isAutheticated } from 'src/auth'
|
import { isAutheticated } from "src/auth";
|
||||||
import Button from '@material-ui/core/Button'
|
import Button from "@material-ui/core/Button";
|
||||||
|
|
||||||
function NewOrders() {
|
function NewOrders() {
|
||||||
const token = isAutheticated()
|
const token = isAutheticated();
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true);
|
||||||
const [success, setSuccess] = useState(true)
|
const [success, setSuccess] = useState(true);
|
||||||
const [newOrdersData, setNewOrdersData] = useState([])
|
const [newOrdersData, setNewOrdersData] = useState([]);
|
||||||
|
|
||||||
const [currentPage, setCurrentPage] = useState(1)
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [itemPerPage, setItemPerPage] = useState(10)
|
const [itemPerPage, setItemPerPage] = useState(10);
|
||||||
const [showData, setShowData] = useState(newOrdersData)
|
const [showData, setShowData] = useState(newOrdersData);
|
||||||
|
|
||||||
const handleShowEntries = (e) => {
|
const handleShowEntries = (e) => {
|
||||||
setCurrentPage(1)
|
setCurrentPage(1);
|
||||||
setItemPerPage(e.target.value)
|
setItemPerPage(e.target.value);
|
||||||
}
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function getNewOrder() {
|
function getNewOrder() {
|
||||||
axios
|
axios
|
||||||
.get(`/api/order/getAll`, {
|
.get(`/api/order/getAll/:new`, {
|
||||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
headers: {
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
setNewOrdersData(res.data.order)
|
setNewOrdersData(res.data.order);
|
||||||
// console.log(res.data.order)
|
console.log(res.data);
|
||||||
setLoading(false)
|
setLoading(false);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err)
|
console.log(err);
|
||||||
setLoading(false)
|
setLoading(false);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
getNewOrder()
|
getNewOrder();
|
||||||
}, [success])
|
}, [success]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadData = () => {
|
const loadData = () => {
|
||||||
const indexOfLastPost = currentPage * itemPerPage
|
const indexOfLastPost = currentPage * itemPerPage;
|
||||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||||
setShowData(newOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
setShowData(newOrdersData.slice(indexOfFirstPost, indexOfLastPost));
|
||||||
}
|
};
|
||||||
loadData()
|
loadData();
|
||||||
}, [currentPage, itemPerPage, newOrdersData])
|
}, [currentPage, itemPerPage, newOrdersData]);
|
||||||
|
|
||||||
|
|
||||||
const handleDelete = (id) => {
|
const handleDelete = (id) => {
|
||||||
console.log(id)
|
console.log(id);
|
||||||
swal({
|
swal({
|
||||||
title: 'Are you sure?',
|
title: "Are you sure?",
|
||||||
icon: 'error',
|
icon: "error",
|
||||||
buttons: { Yes: { text: 'Yes', value: true }, Cancel: { text: 'Cancel', value: 'cancel' } },
|
buttons: {
|
||||||
|
Yes: { text: "Yes", value: true },
|
||||||
|
Cancel: { text: "Cancel", value: "cancel" },
|
||||||
|
},
|
||||||
}).then((value) => {
|
}).then((value) => {
|
||||||
if (value === true) {
|
if (value === true) {
|
||||||
axios
|
axios
|
||||||
.delete(`/api/order/delete/${id}`, {
|
.delete(`/api/order/delete/${id}`, {
|
||||||
headers: {
|
headers: {
|
||||||
'Access-Control-Allow-Origin': '*',
|
"Access-Control-Allow-Origin": "*",
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
setSuccess((prev) => !prev)
|
setSuccess((prev) => !prev);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
swal({
|
swal({
|
||||||
title: 'Warning',
|
title: "Warning",
|
||||||
text: err.response.data.message ? err.response.data.message : 'Something went wrong!',
|
text: err.response.data.message
|
||||||
icon: 'error',
|
? err.response.data.message
|
||||||
button: 'Retry',
|
: "Something went wrong!",
|
||||||
|
icon: "error",
|
||||||
|
button: "Retry",
|
||||||
dangerMode: true,
|
dangerMode: true,
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="main-content">
|
<div className="main-content">
|
||||||
@ -94,26 +101,25 @@ function NewOrders() {
|
|||||||
justify-content-between
|
justify-content-between
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||||
New Orders
|
New Orders
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="page-title-right">
|
{/* <div className="page-title-right">
|
||||||
<Link to="/order/add">
|
<Link to="/order/add">
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="primary"
|
color="primary"
|
||||||
style={{
|
style={{
|
||||||
fontWeight: 'bold',
|
fontWeight: "bold",
|
||||||
marginBottom: '1rem',
|
marginBottom: "1rem",
|
||||||
textTransform: 'capitalize',
|
textTransform: "capitalize",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Add Order
|
Add Order
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div> */}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -127,7 +133,7 @@ function NewOrders() {
|
|||||||
<label className="w-100">
|
<label className="w-100">
|
||||||
Show
|
Show
|
||||||
<select
|
<select
|
||||||
style={{ width: '10%' }}
|
style={{ width: "10%" }}
|
||||||
name=""
|
name=""
|
||||||
onChange={(e) => handleShowEntries(e)}
|
onChange={(e) => handleShowEntries(e)}
|
||||||
className="
|
className="
|
||||||
@ -150,13 +156,15 @@ function NewOrders() {
|
|||||||
<div className="table-responsive table-shoot mt-3">
|
<div className="table-responsive table-shoot mt-3">
|
||||||
<table
|
<table
|
||||||
className="table table-centered table-nowrap"
|
className="table table-centered table-nowrap"
|
||||||
style={{ border: '1px solid' }}
|
style={{ border: "1px solid" }}
|
||||||
>
|
>
|
||||||
<thead className="thead" style={{ background: 'rgb(140, 213, 213)' }}>
|
<thead
|
||||||
|
className="thead"
|
||||||
|
style={{ background: "rgb(140, 213, 213)" }}
|
||||||
|
>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<th className="text-start">Order ID</th>
|
<th className="text-start">Order ID</th>
|
||||||
<th className="text-start">Franchisee</th>
|
<th className="text-start">Customer</th>
|
||||||
<th className="text-start">Order value</th>
|
<th className="text-start">Order value</th>
|
||||||
<th className="text-start">Order At</th>
|
<th className="text-start">Order At</th>
|
||||||
<th className="text-start">Status</th>
|
<th className="text-start">Status</th>
|
||||||
@ -181,18 +189,25 @@ function NewOrders() {
|
|||||||
showData.map((order, i) => {
|
showData.map((order, i) => {
|
||||||
return (
|
return (
|
||||||
<tr key={i}>
|
<tr key={i}>
|
||||||
<td className="text-start">{order?.order_id}</td>
|
<td className="text-start">{order?.orderID}</td>
|
||||||
<td className="text-start">{order?.shippingInfo?.name}</td>
|
|
||||||
<td className="text-start">₹{order?.total_amount}</td>
|
|
||||||
<td className="text-start">
|
<td className="text-start">
|
||||||
{new Date(order?.createdAt).toLocaleString('en-IN', {
|
{order?.user?.name}
|
||||||
month: 'short',
|
</td>
|
||||||
day: 'numeric',
|
<td className="text-start">
|
||||||
year: 'numeric',
|
${order?.total_amount}
|
||||||
hour: '2-digit',
|
</td>
|
||||||
minute: 'numeric',
|
<td className="text-start">
|
||||||
hour12: true,
|
{new Date(order?.paidAt).toLocaleString(
|
||||||
})}
|
"en-IN",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
}
|
||||||
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td className="text-start">
|
<td className="text-start">
|
||||||
<span className="badge text-bg-success text-white">
|
<span className="badge text-bg-success text-white">
|
||||||
@ -200,12 +215,10 @@ function NewOrders() {
|
|||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="text-start">
|
<td className="text-start">
|
||||||
|
|
||||||
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
|
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
|
||||||
<Link to={`/orders/view/${order._id}`}>
|
<Link to={`/orders/view/${order._id}`}>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
style={{ color: 'white' }}
|
style={{ color: "white" }}
|
||||||
type="button"
|
type="button"
|
||||||
className="
|
className="
|
||||||
btn btn-primary btn-sm
|
btn btn-primary btn-sm
|
||||||
@ -219,7 +232,7 @@ function NewOrders() {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link to={`/orders/edit/${order._id}`}>
|
<Link to={`/orders/edit/${order._id}`}>
|
||||||
<button
|
<button
|
||||||
style={{ color: 'white' }}
|
style={{ color: "white" }}
|
||||||
type="button"
|
type="button"
|
||||||
className="
|
className="
|
||||||
btn btn-info btn-sm
|
btn btn-info btn-sm
|
||||||
@ -233,7 +246,7 @@ function NewOrders() {
|
|||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
style={{ color: 'white' }}
|
style={{ color: "white" }}
|
||||||
type="button"
|
type="button"
|
||||||
className="
|
className="
|
||||||
btn btn-danger btn-sm
|
btn btn-danger btn-sm
|
||||||
@ -245,10 +258,9 @@ function NewOrders() {
|
|||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)
|
);
|
||||||
})
|
})
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -263,9 +275,12 @@ function NewOrders() {
|
|||||||
role="status"
|
role="status"
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
>
|
>
|
||||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
|
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||||
{Math.min(currentPage * itemPerPage, newOrdersData.length)} of{' '}
|
{Math.min(
|
||||||
{newOrdersData.length} entries
|
currentPage * itemPerPage,
|
||||||
|
newOrdersData.length
|
||||||
|
)}{" "}
|
||||||
|
of {newOrdersData.length} entries
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -275,13 +290,13 @@ function NewOrders() {
|
|||||||
<li
|
<li
|
||||||
className={
|
className={
|
||||||
currentPage === 1
|
currentPage === 1
|
||||||
? 'paginate_button page-item previous disabled'
|
? "paginate_button page-item previous disabled"
|
||||||
: 'paginate_button page-item previous'
|
: "paginate_button page-item previous"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="page-link"
|
className="page-link"
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: "pointer" }}
|
||||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||||
>
|
>
|
||||||
Previous
|
Previous
|
||||||
@ -292,8 +307,10 @@ function NewOrders() {
|
|||||||
<li className="paginate_button page-item">
|
<li className="paginate_button page-item">
|
||||||
<span
|
<span
|
||||||
className="page-link"
|
className="page-link"
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: "pointer" }}
|
||||||
onClick={(e) => setCurrentPage((prev) => prev - 1)}
|
onClick={(e) =>
|
||||||
|
setCurrentPage((prev) => prev - 1)
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{currentPage - 1}
|
{currentPage - 1}
|
||||||
</span>
|
</span>
|
||||||
@ -301,7 +318,10 @@ function NewOrders() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<li className="paginate_button page-item active">
|
<li className="paginate_button page-item active">
|
||||||
<span className="page-link" style={{ cursor: 'pointer' }}>
|
<span
|
||||||
|
className="page-link"
|
||||||
|
style={{ cursor: "pointer" }}
|
||||||
|
>
|
||||||
{currentPage}
|
{currentPage}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
@ -310,18 +330,18 @@ function NewOrders() {
|
|||||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||||
newOrdersData.length - 1
|
newOrdersData.length - 1
|
||||||
) && (
|
) && (
|
||||||
<li className="paginate_button page-item ">
|
<li className="paginate_button page-item ">
|
||||||
<span
|
<span
|
||||||
className="page-link"
|
className="page-link"
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: "pointer" }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setCurrentPage((prev) => prev + 1)
|
setCurrentPage((prev) => prev + 1);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{currentPage + 1}
|
{currentPage + 1}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<li
|
<li
|
||||||
className={
|
className={
|
||||||
@ -329,13 +349,13 @@ function NewOrders() {
|
|||||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||||
newOrdersData.length - 1
|
newOrdersData.length - 1
|
||||||
)
|
)
|
||||||
? 'paginate_button page-item next'
|
? "paginate_button page-item next"
|
||||||
: 'paginate_button page-item next disabled'
|
: "paginate_button page-item next disabled"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="page-link"
|
className="page-link"
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: "pointer" }}
|
||||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||||
>
|
>
|
||||||
Next
|
Next
|
||||||
@ -352,7 +372,7 @@ function NewOrders() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default NewOrders
|
export default NewOrders;
|
||||||
|
|||||||
@ -1,144 +1,128 @@
|
|||||||
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
|
import axios from "axios";
|
||||||
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||||
|
import QRCode from "react-qr-code";
|
||||||
import React, { useState, useEffect, useRef } from 'react'
|
import { isAutheticated } from "src/auth";
|
||||||
import axios from 'axios'
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
import { addItemsToCart } from "src/redux/Actions/cartAction";
|
||||||
import QRCode from 'react-qr-code'
|
import toast from "react-hot-toast";
|
||||||
import { isAutheticated } from 'src/auth'
|
import { cibBlackberry } from "@coreui/icons";
|
||||||
import { useDispatch, useSelector } from 'react-redux'
|
import Button from "@material-ui/core/Button";
|
||||||
import { addItemsToCart } from 'src/redux/Actions/cartAction'
|
|
||||||
import toast from 'react-hot-toast'
|
|
||||||
import { cibBlackberry } from '@coreui/icons'
|
|
||||||
import Button from '@material-ui/core/Button'
|
|
||||||
|
|
||||||
function ViewOrders() {
|
function ViewOrders() {
|
||||||
const { status, id } = useParams()
|
const { status, id } = useParams();
|
||||||
|
|
||||||
const { cartItems, subTotal, shippingCharge, tax, shipingInfo, total } = useSelector(
|
const { cartItems, subTotal, shippingCharge, tax, shipingInfo, total } =
|
||||||
(state) => state.cart
|
useSelector((state) => state.cart);
|
||||||
);
|
|
||||||
|
|
||||||
|
const AllStates = useSelector((state) => state);
|
||||||
|
const getValue = useRef();
|
||||||
|
const getFranchiseeID = useRef();
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const printOrderRef = useRef();
|
||||||
|
const token = isAutheticated();
|
||||||
|
const [productData, setProductData] = useState([]);
|
||||||
|
const [allFranchisee, setAllFranchisee] = useState([]);
|
||||||
|
const [allTax, setAllTax] = useState([]);
|
||||||
|
const [orderDetails, setOrderDetails] = useState();
|
||||||
|
|
||||||
const AllStates = useSelector(
|
const [productDetails, setProductDetails] = useState();
|
||||||
(state) => state
|
const [loading, setLoading] = useState(true);
|
||||||
);
|
const [orderId, setOrderId] = useState(null);
|
||||||
const getValue = useRef()
|
const [orderStatus, setOrderStatus] = useState("");
|
||||||
const getFranchiseeID = useRef()
|
// const [data, setData] = useState({
|
||||||
const dispatch = useDispatch();
|
// product_Name: '',
|
||||||
const navigate = useNavigate()
|
// address: '',
|
||||||
const printOrderRef = useRef()
|
// quantity: '',
|
||||||
const token = isAutheticated()
|
// contact_Number: '',
|
||||||
const [productData, setProductData] = useState([])
|
// total_Price: '',
|
||||||
const [allFranchisee, setAllFranchisee] = useState([])
|
// })
|
||||||
const [allTax, setAllTax] = useState([])
|
useEffect(() => {
|
||||||
const [orderDetails, setOrderDetails] = useState()
|
const getSingleOrder = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const res = await axios.get(`/api/order/getOne/${id}`, {
|
||||||
|
headers: {
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (res.data) {
|
||||||
|
setLoading(false);
|
||||||
|
setOrderId(res.data?.order?.order_id);
|
||||||
|
setOrderDetails(res.data?.order);
|
||||||
|
console.log(res.data?.order);
|
||||||
|
// let options = {
|
||||||
|
// Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
|
||||||
|
// name: res.data?.order?.shippingInfo?.name,
|
||||||
|
|
||||||
|
// contact_Number: res.data?.order?.shippingInfo?.contact_Number,
|
||||||
|
// contact_Person_Name: res.data?.order?.shippingInfo?.contact_Person_Name,
|
||||||
|
// address: res.data?.order?.shippingInfo?.address,
|
||||||
|
// city: res.data?.order?.shippingInfo?.city,
|
||||||
|
// price_Lable: res.data?.order?.shippingInfo?.Franchisee?.price_Lable,
|
||||||
|
// state: res.data?.order?.shippingInfo?.state,
|
||||||
|
// banner: res.data?.order?.shippingInfo?.Franchisee?.banner?.url,
|
||||||
|
// // Franchisee_Url: res?.data?.data?.url
|
||||||
|
// }
|
||||||
|
// dispatch({ type: "addShippingInfo", payload: options });
|
||||||
|
// if (res.data?.order?.orderItems) {
|
||||||
|
// res.data?.order?.orderItems.map((i, ind) => {
|
||||||
|
// dispatch({ type: "addToCart", payload: i });
|
||||||
|
// dispatch({ type: "calculatePrice" });
|
||||||
|
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
getSingleOrder();
|
||||||
|
}, [token]);
|
||||||
|
|
||||||
const [productDetails, setProductDetails] = useState()
|
const handleChange = (e) => {
|
||||||
const [loading, setLoading] = useState(true)
|
if (e.target.type === "text") {
|
||||||
const [orderId, setOrderId] = useState(null)
|
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||||
const [orderStatus, setOrderStatus] = useState('')
|
} else {
|
||||||
// const [data, setData] = useState({
|
setOrderStatus(e.target.value);
|
||||||
// product_Name: '',
|
|
||||||
// address: '',
|
|
||||||
// quantity: '',
|
|
||||||
// contact_Number: '',
|
|
||||||
// total_Price: '',
|
|
||||||
// })
|
|
||||||
useEffect(() => {
|
|
||||||
const getSingleOrder = async () => {
|
|
||||||
setLoading(true)
|
|
||||||
const res = await axios.get(`/api/order/getOne/${id}`, {
|
|
||||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
|
||||||
})
|
|
||||||
if (res.data) {
|
|
||||||
setLoading(false)
|
|
||||||
setOrderId(res.data?.order?.order_id)
|
|
||||||
setOrderDetails(res.data?.order)
|
|
||||||
console.log(res.data?.order.shippingInfo?.city)
|
|
||||||
// let options = {
|
|
||||||
// Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
|
|
||||||
// name: res.data?.order?.shippingInfo?.name,
|
|
||||||
|
|
||||||
|
|
||||||
// contact_Number: res.data?.order?.shippingInfo?.contact_Number,
|
|
||||||
// contact_Person_Name: res.data?.order?.shippingInfo?.contact_Person_Name,
|
|
||||||
// address: res.data?.order?.shippingInfo?.address,
|
|
||||||
// city: res.data?.order?.shippingInfo?.city,
|
|
||||||
// price_Lable: res.data?.order?.shippingInfo?.Franchisee?.price_Lable,
|
|
||||||
// state: res.data?.order?.shippingInfo?.state,
|
|
||||||
// banner: res.data?.order?.shippingInfo?.Franchisee?.banner?.url,
|
|
||||||
// // Franchisee_Url: res?.data?.data?.url
|
|
||||||
// }
|
|
||||||
// dispatch({ type: "addShippingInfo", payload: options });
|
|
||||||
// if (res.data?.order?.orderItems) {
|
|
||||||
// res.data?.order?.orderItems.map((i, ind) => {
|
|
||||||
// dispatch({ type: "addToCart", payload: i });
|
|
||||||
// dispatch({ type: "calculatePrice" });
|
|
||||||
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
getSingleOrder()
|
|
||||||
|
|
||||||
}, [token])
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleChange = (e) => {
|
|
||||||
if (e.target.type === 'text') {
|
|
||||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
|
|
||||||
} else {
|
|
||||||
setOrderStatus(e.target.value)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
const handleQuantityChange = (e) => {
|
};
|
||||||
|
const handleQuantityChange = (e) => {
|
||||||
|
setData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
quantity: e.target.value,
|
||||||
|
total_Price: productDetails?.base_Price * e.target.value,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
setData((prev) => ({
|
function getBack() {
|
||||||
...prev,
|
navigate(`/orders/${status}`, { replace: true });
|
||||||
quantity: e.target.value,
|
}
|
||||||
total_Price: (productDetails?.base_Price * e.target.value)
|
|
||||||
}))
|
|
||||||
|
|
||||||
}
|
return (
|
||||||
|
<>
|
||||||
|
{" "}
|
||||||
|
<div className="main-content">
|
||||||
|
<div className="page-content">
|
||||||
|
<div className="container-fluid">
|
||||||
function getBack() {
|
<div className="row">
|
||||||
navigate(`/orders/${status}`, { replace: true })
|
<div className="col-12">
|
||||||
}
|
<div
|
||||||
|
className="
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{' '}
|
|
||||||
<div className="main-content">
|
|
||||||
<div className="page-content">
|
|
||||||
<div className="container-fluid">
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-12">
|
|
||||||
<div
|
|
||||||
className="
|
|
||||||
page-title-box
|
page-title-box
|
||||||
d-flex
|
d-flex
|
||||||
align-items-center
|
align-items-center
|
||||||
justify-content-between
|
justify-content-between
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
<p> View Order</p>
|
||||||
<p> View Order</p>
|
{orderId && (
|
||||||
{orderId && <span><small>Order ID : {orderId}</small> </span>}
|
<span>
|
||||||
|
<small>Order ID : {orderId}</small>{" "}
|
||||||
</div>
|
</span>
|
||||||
<div className="page-title-right">
|
)}
|
||||||
{/* <Button
|
</div>
|
||||||
|
<div className="page-title-right">
|
||||||
|
{/* <Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="primary"
|
color="primary"
|
||||||
style={{
|
style={{
|
||||||
@ -152,145 +136,36 @@ function ViewOrders() {
|
|||||||
>
|
>
|
||||||
{loading ? 'Loading' : 'Edit Now'}
|
{loading ? 'Loading' : 'Edit Now'}
|
||||||
</Button> */}
|
</Button> */}
|
||||||
<Link to="/orders/new">
|
<Link to="/orders/new">
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
style={{
|
style={{
|
||||||
fontWeight: 'bold',
|
fontWeight: "bold",
|
||||||
marginBottom: '1rem',
|
marginBottom: "1rem",
|
||||||
textTransform: 'capitalize',
|
textTransform: "capitalize",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Back
|
Back
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
{loading ? (
|
||||||
</div>
|
<div class="d-flex justify-content-center">
|
||||||
{loading ? (
|
<div class="spinner-border text-info" role="status">
|
||||||
<div class="d-flex justify-content-center">
|
<span class="visually-hidden">Loading...</span>
|
||||||
<div class="spinner-border text-info" role="status">
|
</div>
|
||||||
<span class="visually-hidden">Loading...</span>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
</div>
|
<div className="row">
|
||||||
) : (
|
<div className="col-lg-7 mt-3">
|
||||||
|
{orderDetails?.shipingInfo !== null && (
|
||||||
<div className="row">
|
<div className="card">
|
||||||
<div className="col-lg-6 mt-3">
|
<div className="card-body">
|
||||||
<div className="card">
|
{/* <div className="mt-1">
|
||||||
<div className="card-body">
|
|
||||||
<div className="mt-1">
|
|
||||||
<h5 className='text-success'>Order Status: {orderDetails?.orderStatus}</h5>
|
|
||||||
<label className="fw-bold">Franchisee :</label>
|
|
||||||
{/* <div className="d-flex">
|
|
||||||
<select
|
|
||||||
className="form-control me-2"
|
|
||||||
onChange={handleChange}
|
|
||||||
value={orderStatus}
|
|
||||||
ref={getFranchiseeID}
|
|
||||||
disabled={shipingInfo !== null}
|
|
||||||
>
|
|
||||||
<option value="" disabled></option>
|
|
||||||
{allFranchisee && allFranchisee.map((item, index) =>
|
|
||||||
<option key={index} value={item?._id}>{item?.name}</option>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleFrenchisee(e)} >Add</button>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
{
|
|
||||||
orderDetails?.shipingInfo !== null &&
|
|
||||||
<div className="my-2">
|
|
||||||
<div className="row" style={{ fontSize: '14px' }}>
|
|
||||||
<div className="col-sm-4">
|
|
||||||
<img
|
|
||||||
src={orderDetails?.shippingInfo?.Franchisee?.banner?.url}
|
|
||||||
alt={orderDetails?.shippingInfo?.name}
|
|
||||||
// width='100%'
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
objectFit: 'contain',
|
|
||||||
maxHeight: '100px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-sm-8">
|
|
||||||
<h6 className="m-0 ms-2">{orderDetails?.shippingInfo?.name}</h6>
|
|
||||||
<parent className="m-0 ms-2 mt-3">
|
|
||||||
Address. : {orderDetails?.shippingInfo?.address}
|
|
||||||
</parent>
|
|
||||||
<p className="m-0 ms-2 mt-1">
|
|
||||||
Contact No. : {orderDetails?.shippingInfo?.contact_Number}
|
|
||||||
</p>
|
|
||||||
<p className="m-0 ms-2 mt-1">
|
|
||||||
Contact Person Name : {orderDetails?.shippingInfo?.contact_Person_Name}
|
|
||||||
</p>
|
|
||||||
<p className="m-0 ms-2 mt-1">
|
|
||||||
Price Lable : {orderDetails?.shippingInfo?.Franchisee?.price_Lable}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="m-0 ms-2 mt-1">
|
|
||||||
City : {orderDetails?.shippingInfo?.city}
|
|
||||||
</p>
|
|
||||||
<p className="m-0 ms-2 mt-1">
|
|
||||||
State : {orderDetails?.shippingInfo?.state}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
<div className="mt-3">
|
|
||||||
<label>
|
|
||||||
<span className="fw-bold">Payment Status : </span>
|
|
||||||
{orderDetails?.isPaid === false ? 'Not Paid' : 'Paid'}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="mt-1">
|
|
||||||
<label>
|
|
||||||
<span className="fw-bold"> Order Created By: </span>
|
|
||||||
{orderDetails?.user?.name}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="mt-1">
|
|
||||||
<label>
|
|
||||||
<span className="fw-bold">Razorpay Order ID : </span>
|
|
||||||
{productData?.razorpay_order_id}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-1">
|
|
||||||
<label>
|
|
||||||
<span className="fw-bold">Razorpay Payment ID : </span>
|
|
||||||
{productData?.razorpay_payment_id}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="col-lg-6 mt-3">
|
|
||||||
|
|
||||||
{orderDetails?.shipingInfo !== null && <div className="card">
|
|
||||||
<div className="card-body">
|
|
||||||
{/* <div className="mt-1">
|
|
||||||
<label className="fw-bold">Select Product:</label>
|
<label className="fw-bold">Select Product:</label>
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<select
|
<select
|
||||||
@ -312,232 +187,337 @@ function ViewOrders() {
|
|||||||
|
|
||||||
</div> */}
|
</div> */}
|
||||||
|
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
<h6 className="fw-bold">Products : {orderDetails?.orderItems?.length}</h6>
|
<h6 className="fw-bold">
|
||||||
|
Products : {orderDetails?.orderItems?.length}
|
||||||
|
</h6>
|
||||||
|
<hr />
|
||||||
|
|
||||||
{
|
{orderDetails?.orderItems &&
|
||||||
orderDetails?.orderItems && orderDetails?.orderItems.map((productDetails, i) =>
|
orderDetails?.orderItems.map(
|
||||||
<div className="my-2">
|
(productDetails, i) => (
|
||||||
<div className="row" style={{ fontSize: '14px' }}>
|
<div className="my-2">
|
||||||
<div className="col-sm-4">
|
<div
|
||||||
<img
|
className="row"
|
||||||
src={productDetails?.image}
|
style={{ fontSize: "14px" }}
|
||||||
alt={productDetails?.name}
|
>
|
||||||
style={{
|
<div className="col-sm-4">
|
||||||
width: '100%',
|
<img
|
||||||
objectFit: 'contain',
|
src={productDetails?.image[0]?.url}
|
||||||
maxHeight: '150px',
|
alt={productDetails?.name}
|
||||||
}}
|
style={{
|
||||||
/>
|
width: "100%",
|
||||||
</div>
|
objectFit: "contain",
|
||||||
<div className="col-sm-8">
|
maxHeight: "150px",
|
||||||
<h6 className="m-0 ms-2">{productDetails?.name}</h6>
|
}}
|
||||||
<div className="row">
|
/>
|
||||||
<div className="col-sm-6">
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
className='d-flex justify-content-center mt-3 me-3 '
|
|
||||||
style={{
|
|
||||||
|
|
||||||
width: "6rem",
|
|
||||||
|
|
||||||
|
|
||||||
}}>
|
|
||||||
<span className='px-2 mt-1' style={{}}> Quantity: {productDetails?.quantity}</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="m-0 mt-3 ms-3">
|
|
||||||
<stong>Price With Tax:</stong> ₹{productDetails?.price_With_Tax}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="col-sm-6">
|
|
||||||
<p className="m-0 mt-3">
|
|
||||||
<stong> Price:</stong> ₹{productDetails?.price}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
<h5 className="m-0 contents-center mt-3">
|
|
||||||
|
|
||||||
<small className='mb-2'>Shipping Charge: </small> ₹{orderDetails?.shipping_charge}
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<span className='mt-2'> Total Order Value: </span> ₹{orderDetails?.total_amount}
|
|
||||||
</h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-sm-8">
|
||||||
}
|
<h6 className="m-0 ms-2">
|
||||||
|
{productDetails?.name}
|
||||||
|
</h6>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<div
|
||||||
|
className="d-flex justify-content-center mt-3 me-3 "
|
||||||
|
style={{
|
||||||
<div className="card my-1">
|
width: "6rem",
|
||||||
<div className="card-body">
|
}}
|
||||||
<label className="fw-bold">Status Timeline :</label>
|
>
|
||||||
<table
|
<span
|
||||||
className="table table-info table-sm m-0"
|
className="px-2 mt-1"
|
||||||
style={{
|
style={{}}
|
||||||
borderRadius: '8px',
|
|
||||||
borderCollapse: 'collapse',
|
|
||||||
overflow: 'hidden',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<tbody>
|
{" "}
|
||||||
<tr className="text-center">
|
Quantity:{" "}
|
||||||
<th scope="row">Order Placed On</th>
|
{productDetails?.quantity}
|
||||||
<td> : </td>
|
</span>
|
||||||
<td>
|
</div>
|
||||||
{orderDetails?.createdAt
|
|
||||||
? new Date(orderDetails?.createdAt).toLocaleString('en-IN', {
|
<p className="m-0 mt-3 ms-3">
|
||||||
month: 'short',
|
<stong> Total Price:</stong> $
|
||||||
day: 'numeric',
|
{productDetails?.quantity *
|
||||||
year: 'numeric',
|
productDetails?.price}
|
||||||
hour: '2-digit',
|
</p>
|
||||||
minute: 'numeric',
|
|
||||||
hour12: true,
|
|
||||||
})
|
|
||||||
: new Date(productData?.placed_on).toLocaleString('en-IN', {
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: 'numeric',
|
|
||||||
hour12: true,
|
|
||||||
})}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="text-center">
|
|
||||||
<th scope="row">Processing Started</th>
|
|
||||||
<td> : </td>
|
|
||||||
<td>
|
|
||||||
{productData?.status_timeline?.processing
|
|
||||||
? new Date(productData?.status_timeline?.processing).toLocaleString(
|
|
||||||
'en-IN',
|
|
||||||
{
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: 'numeric',
|
|
||||||
hour12: true,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
: '-'}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="text-center">
|
|
||||||
<th scope="row">Dispatched On</th>
|
|
||||||
<td> : </td>
|
|
||||||
<td>
|
|
||||||
{productData?.status_timeline?.dispatched
|
|
||||||
? new Date(productData?.status_timeline?.dispatched).toLocaleString(
|
|
||||||
'en-IN',
|
|
||||||
{
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: 'numeric',
|
|
||||||
hour12: true,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
: '-'}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="text-center">
|
|
||||||
<th scope="row">Delivered On</th>
|
|
||||||
<td> : </td>
|
|
||||||
<td>
|
|
||||||
{productData?.status_timeline?.delivered
|
|
||||||
? new Date(productData?.status_timeline?.delivered).toLocaleString(
|
|
||||||
'en-IN',
|
|
||||||
{
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: 'numeric',
|
|
||||||
hour12: true,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
: '-'}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="text-center">
|
|
||||||
<th scope="row">Cancelled On</th>
|
|
||||||
<td> : </td>
|
|
||||||
<td>
|
|
||||||
{productData?.status_timeline?.cancelled
|
|
||||||
? new Date(productData?.status_timeline?.cancelled).toLocaleString(
|
|
||||||
'en-IN',
|
|
||||||
{
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: 'numeric',
|
|
||||||
hour12: true,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
: '-'}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr className="text-center">
|
|
||||||
<th scope="row">Returned On</th>
|
|
||||||
<td> : </td>
|
|
||||||
<td>
|
|
||||||
{productData?.status_timeline?.returned
|
|
||||||
? new Date(productData?.status_timeline?.returned).toLocaleString(
|
|
||||||
'en-IN',
|
|
||||||
{
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: 'numeric',
|
|
||||||
hour12: true,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
: '-'}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<p className="m-0 mt-3">
|
||||||
|
<stong> Price:</stong> $
|
||||||
|
{productDetails?.price}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>)}
|
)
|
||||||
|
)}
|
||||||
|
<div className="m-0 contents-center mt-3 mb-2">
|
||||||
|
<small className="mb-4">Shipping Charge: </small> $
|
||||||
|
{orderDetails?.shipping_charge}
|
||||||
|
<br />
|
||||||
|
<span className="mt-2"> Total Order Value: </span> $
|
||||||
|
{orderDetails?.total_amount}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="card my-1">
|
||||||
|
<div className="card-body">
|
||||||
|
<label className="fw-bold">Status Timeline :</label>
|
||||||
|
<table
|
||||||
|
className="table table-info table-sm m-0"
|
||||||
|
style={{
|
||||||
|
borderRadius: "8px",
|
||||||
|
borderCollapse: "collapse",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<tbody>
|
||||||
|
<tr className="text-center">
|
||||||
|
<th scope="row">Order Placed On</th>
|
||||||
|
<td> : </td>
|
||||||
|
<td>
|
||||||
|
{orderDetails?.createdAt
|
||||||
|
? new Date(
|
||||||
|
orderDetails?.createdAt
|
||||||
|
).toLocaleString("en-IN", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
})
|
||||||
|
: new Date(
|
||||||
|
productData?.placed_on
|
||||||
|
).toLocaleString("en-IN", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
})}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="text-center">
|
||||||
|
<th scope="row">Processing Started</th>
|
||||||
|
<td> : </td>
|
||||||
|
<td>
|
||||||
|
{productData?.status_timeline?.processing
|
||||||
|
? new Date(
|
||||||
|
productData?.status_timeline?.processing
|
||||||
|
).toLocaleString("en-IN", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
})
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="text-center">
|
||||||
|
<th scope="row">Dispatched On</th>
|
||||||
|
<td> : </td>
|
||||||
|
<td>
|
||||||
|
{productData?.status_timeline?.dispatched
|
||||||
|
? new Date(
|
||||||
|
productData?.status_timeline?.dispatched
|
||||||
|
).toLocaleString("en-IN", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
})
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="text-center">
|
||||||
|
<th scope="row">Delivered On</th>
|
||||||
|
<td> : </td>
|
||||||
|
<td>
|
||||||
|
{productData?.status_timeline?.delivered
|
||||||
|
? new Date(
|
||||||
|
productData?.status_timeline?.delivered
|
||||||
|
).toLocaleString("en-IN", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
})
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="text-center">
|
||||||
|
<th scope="row">Cancelled On</th>
|
||||||
|
<td> : </td>
|
||||||
|
<td>
|
||||||
|
{productData?.status_timeline?.cancelled
|
||||||
|
? new Date(
|
||||||
|
productData?.status_timeline?.cancelled
|
||||||
|
).toLocaleString("en-IN", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
})
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="text-center">
|
||||||
|
<th scope="row">Returned On</th>
|
||||||
|
<td> : </td>
|
||||||
|
<td>
|
||||||
|
{productData?.status_timeline?.returned
|
||||||
|
? new Date(
|
||||||
|
productData?.status_timeline?.returned
|
||||||
|
).toLocaleString("en-IN", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "numeric",
|
||||||
|
hour12: true,
|
||||||
|
})
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="col-lg-5 mt-3">
|
||||||
<div style={{ display: 'none' }}>
|
<div className="card">
|
||||||
{/* <PrintOrderDetails productData={productData} ref={printOrderRef} /> */}
|
<div className="card-body">
|
||||||
</div>
|
<div className="mt-1">
|
||||||
</>
|
<h5 className="text-success">
|
||||||
)
|
Order Status: {orderDetails?.orderStatus}
|
||||||
|
</h5>
|
||||||
|
<label className="fw-bold mt-1">Shipping Info :</label>
|
||||||
|
{/* <div className="d-flex">
|
||||||
|
<select
|
||||||
|
className="form-control me-2"
|
||||||
|
onChange={handleChange}
|
||||||
|
value={orderStatus}
|
||||||
|
ref={getFranchiseeID}
|
||||||
|
disabled={shipingInfo !== null}
|
||||||
|
>
|
||||||
|
<option value="" disabled></option>
|
||||||
|
{allFranchisee && allFranchisee.map((item, index) =>
|
||||||
|
<option key={index} value={item?._id}>{item?.name}</option>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleFrenchisee(e)} >Add</button>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{orderDetails?.shipingInfo !== null && (
|
||||||
|
<div className="">
|
||||||
|
<div className="row" style={{ fontSize: "14px" }}>
|
||||||
|
{/* <div className="col-sm-4">
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
orderDetails?.shippingInfo?.Franchisee?.banner
|
||||||
|
?.url
|
||||||
|
}
|
||||||
|
alt={orderDetails?.shippingInfo?.name}
|
||||||
|
// width='100%'
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
objectFit: "contain",
|
||||||
|
maxHeight: "100px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div> */}
|
||||||
|
<div className="col-sm-12">
|
||||||
|
<h6 className="m-0 ms-2">
|
||||||
|
Name: {orderDetails?.shippingInfo?.first_Name}{" "}
|
||||||
|
{orderDetails?.shippingInfo?.last_Name}
|
||||||
|
</h6>
|
||||||
|
|
||||||
|
<p className="m-0 ms-2 mt-1">
|
||||||
|
Contact No. :{" "}
|
||||||
|
{orderDetails?.shippingInfo?.phone_Number}
|
||||||
|
</p>
|
||||||
|
<parent className="m-0 ms-2 mt-3">
|
||||||
|
street. : {orderDetails?.shippingInfo?.street}
|
||||||
|
</parent>
|
||||||
|
|
||||||
|
<p className="m-0 ms-2 mt-1">
|
||||||
|
City : {orderDetails?.shippingInfo?.city}
|
||||||
|
</p>
|
||||||
|
<p className="m-0 ms-2 mt-1">
|
||||||
|
State : {orderDetails?.shippingInfo?.state}
|
||||||
|
</p>
|
||||||
|
<p className="m-0 ms-2 mt-1">
|
||||||
|
country : {orderDetails?.shippingInfo?.country}
|
||||||
|
</p>
|
||||||
|
<p className="m-0 ms-2 mt-1">
|
||||||
|
Postal Code. :{" "}
|
||||||
|
{orderDetails?.shippingInfo?.postalCode}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="mt-3">
|
||||||
|
<label>
|
||||||
|
<span className="fw-bold">Payment Status : </span>
|
||||||
|
{orderDetails?.isPaid === false ? (
|
||||||
|
<span className="fw-bold text-danger">
|
||||||
|
Not Paid
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="fw-bold text-success">Paid</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="mt-1">
|
||||||
|
<label>
|
||||||
|
<span className="fw-bold"> Order Created By: </span>
|
||||||
|
{orderDetails?.user?.name}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="mt-1">
|
||||||
|
<label>
|
||||||
|
<span className="fw-bold">paypal_payment_id : </span>
|
||||||
|
{orderDetails?.paypal_payment_id}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-1">
|
||||||
|
<label>
|
||||||
|
<span className="fw-bold">paypal_payer_id : </span>
|
||||||
|
{orderDetails?.paypal_payer_id}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "none" }}>
|
||||||
|
{/* <PrintOrderDetails productData={productData} ref={printOrderRef} /> */}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ViewOrders
|
export default ViewOrders;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user