gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show order

Browse Source
This commit is contained in:
pawan-dot 2023-11-29 16:02:06 +05:30
parent c0862b0b1e
commit 4ca7f525d6
4 changed files with 1311 additions and 1330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

755
src/views/orders/EditOrder.js
View File

File diff suppressed because it is too large Load Diff

202
src/views/orders/NewOrders.js
View File

@ -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">
{new Date(order?.paidAt).toLocaleString(
"en-IN",
{
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true, 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>
@ -313,9 +333,9 @@ 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={() => { onClick={() => {
setCurrentPage((prev) => prev + 1) setCurrentPage((prev) => prev + 1);
}} }}
> >
{currentPage + 1} {currentPage + 1}
@ -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;

590
src/views/orders/ViewOrders.js
View File

@ -1,46 +1,36 @@
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 AllStates = useSelector( const getValue = useRef();
(state) => state const getFranchiseeID = useRef();
);
const getValue = useRef()
const getFranchiseeID = useRef()
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate() const navigate = useNavigate();
const printOrderRef = useRef() const printOrderRef = useRef();
const token = isAutheticated() const token = isAutheticated();
const [productData, setProductData] = useState([]) const [productData, setProductData] = useState([]);
const [allFranchisee, setAllFranchisee] = useState([]) const [allFranchisee, setAllFranchisee] = useState([]);
const [allTax, setAllTax] = useState([]) const [allTax, setAllTax] = useState([]);
const [orderDetails, setOrderDetails] = useState() const [orderDetails, setOrderDetails] = useState();
const [productDetails, setProductDetails] = useState();
const [loading, setLoading] = useState(true);
const [productDetails, setProductDetails] = useState() const [orderId, setOrderId] = useState(null);
const [loading, setLoading] = useState(true) const [orderStatus, setOrderStatus] = useState("");
const [orderId, setOrderId] = useState(null)
const [orderStatus, setOrderStatus] = useState('')
// const [data, setData] = useState({ // const [data, setData] = useState({
// product_Name: '', // product_Name: '',
// address: '', // address: '',
@ -50,20 +40,22 @@ function ViewOrders() {
// }) // })
useEffect(() => { useEffect(() => {
const getSingleOrder = async () => { const getSingleOrder = async () => {
setLoading(true) setLoading(true);
const res = await axios.get(`/api/order/getOne/${id}`, { const res = await axios.get(`/api/order/getOne/${id}`, {
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` }, headers: {
}) "Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res.data) { if (res.data) {
setLoading(false) setLoading(false);
setOrderId(res.data?.order?.order_id) setOrderId(res.data?.order?.order_id);
setOrderDetails(res.data?.order) setOrderDetails(res.data?.order);
console.log(res.data?.order.shippingInfo?.city) console.log(res.data?.order);
// let options = { // let options = {
// Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id, // Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
// name: res.data?.order?.shippingInfo?.name, // name: res.data?.order?.shippingInfo?.name,
// contact_Number: res.data?.order?.shippingInfo?.contact_Number, // contact_Number: res.data?.order?.shippingInfo?.contact_Number,
// contact_Person_Name: res.data?.order?.shippingInfo?.contact_Person_Name, // contact_Person_Name: res.data?.order?.shippingInfo?.contact_Person_Name,
// address: res.data?.order?.shippingInfo?.address, // address: res.data?.order?.shippingInfo?.address,
@ -81,43 +73,33 @@ function ViewOrders() {
// }) // })
// } // }
} }
} };
getSingleOrder() getSingleOrder();
}, [token]);
}, [token])
const handleChange = (e) => { const handleChange = (e) => {
if (e.target.type === 'text') { if (e.target.type === "text") {
setData((prev) => ({ ...prev, [e.target.id]: e.target.value })) setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
} else { } else {
setOrderStatus(e.target.value) setOrderStatus(e.target.value);
}
} }
};
const handleQuantityChange = (e) => { const handleQuantityChange = (e) => {
setData((prev) => ({ setData((prev) => ({
...prev, ...prev,
quantity: e.target.value, quantity: e.target.value,
total_Price: (productDetails?.base_Price * e.target.value) total_Price: productDetails?.base_Price * e.target.value,
})) }));
};
}
function getBack() { function getBack() {
navigate(`/orders/${status}`, { replace: true }) navigate(`/orders/${status}`, { replace: true });
} }
return ( return (
<> <>
{' '} {" "}
<div className="main-content"> <div className="main-content">
<div className="page-content"> <div className="page-content">
<div className="container-fluid"> <div className="container-fluid">
@ -131,11 +113,13 @@ function ViewOrders() {
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 && <span><small>Order ID : {orderId}</small> </span>} {orderId && (
<span>
<small>Order ID : {orderId}</small>{" "}
</span>
)}
</div> </div>
<div className="page-title-right"> <div className="page-title-right">
{/* <Button {/* <Button
@ -157,18 +141,16 @@ function ViewOrders() {
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> </div>
{loading ? ( {loading ? (
@ -178,117 +160,10 @@ function ViewOrders() {
</div> </div>
</div> </div>
) : ( ) : (
<div className="row"> <div className="row">
<div className="col-lg-6 mt-3"> <div className="col-lg-7 mt-3">
{orderDetails?.shipingInfo !== null && (
<div className="card"> <div className="card">
<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="card-body">
{/* <div className="mt-1"> {/* <div className="mt-1">
<label className="fw-bold">Select Product:</label> <label className="fw-bold">Select Product:</label>
@ -313,80 +188,82 @@ 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(
(productDetails, i) => (
<div className="my-2"> <div className="my-2">
<div className="row" style={{ fontSize: '14px' }}> <div
className="row"
style={{ fontSize: "14px" }}
>
<div className="col-sm-4"> <div className="col-sm-4">
<img <img
src={productDetails?.image} src={productDetails?.image[0]?.url}
alt={productDetails?.name} alt={productDetails?.name}
style={{ style={{
width: '100%', width: "100%",
objectFit: 'contain', objectFit: "contain",
maxHeight: '150px', maxHeight: "150px",
}} }}
/> />
</div> </div>
<div className="col-sm-8"> <div className="col-sm-8">
<h6 className="m-0 ms-2">{productDetails?.name}</h6> <h6 className="m-0 ms-2">
{productDetails?.name}
</h6>
<div className="row"> <div className="row">
<div className="col-sm-6"> <div className="col-sm-6">
<div <div
className='d-flex justify-content-center mt-3 me-3 ' className="d-flex justify-content-center mt-3 me-3 "
style={{ style={{
width: "6rem", width: "6rem",
}}
>
}}> <span
<span className='px-2 mt-1' style={{}}> Quantity: {productDetails?.quantity}</span> className="px-2 mt-1"
style={{}}
>
{" "}
Quantity:{" "}
{productDetails?.quantity}
</span>
</div> </div>
<p className="m-0 mt-3 ms-3"> <p className="m-0 mt-3 ms-3">
<stong>Price With Tax:</stong> ₹{productDetails?.price_With_Tax} <stong> Total Price:</stong> $
{productDetails?.quantity *
productDetails?.price}
</p> </p>
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<p className="m-0 mt-3"> <p className="m-0 mt-3">
<stong> Price:</stong> ₹{productDetails?.price} <stong> Price:</stong> $
{productDetails?.price}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr /> <hr />
</div> </div>
) )
} )}
<h5 className="m-0 contents-center mt-3"> <div className="m-0 contents-center mt-3 mb-2">
<small className="mb-4">Shipping Charge: </small> $
<small className='mb-2'>Shipping Charge: </small> ₹{orderDetails?.shipping_charge} {orderDetails?.shipping_charge}
<br /> <br />
<span className='mt-2'> Total Order Value: </span> ₹{orderDetails?.total_amount} <span className="mt-2"> Total Order Value: </span> $
</h5> {orderDetails?.total_amount}
</div> </div>
</div> </div>
</div> </div>
</div>
} )}
<div className="card my-1"> <div className="card my-1">
<div className="card-body"> <div className="card-body">
@ -394,9 +271,9 @@ function ViewOrders() {
<table <table
className="table table-info table-sm m-0" className="table table-info table-sm m-0"
style={{ style={{
borderRadius: '8px', borderRadius: "8px",
borderCollapse: 'collapse', borderCollapse: "collapse",
overflow: 'hidden', overflow: "hidden",
}} }}
> >
<tbody> <tbody>
@ -405,20 +282,24 @@ function ViewOrders() {
<td> : </td> <td> : </td>
<td> <td>
{orderDetails?.createdAt {orderDetails?.createdAt
? new Date(orderDetails?.createdAt).toLocaleString('en-IN', { ? new Date(
month: 'short', orderDetails?.createdAt
day: 'numeric', ).toLocaleString("en-IN", {
year: 'numeric', month: "short",
hour: '2-digit', day: "numeric",
minute: 'numeric', year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true, hour12: true,
}) })
: new Date(productData?.placed_on).toLocaleString('en-IN', { : new Date(
month: 'short', productData?.placed_on
day: 'numeric', ).toLocaleString("en-IN", {
year: 'numeric', month: "short",
hour: '2-digit', day: "numeric",
minute: 'numeric', year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true, hour12: true,
})} })}
</td> </td>
@ -428,18 +309,17 @@ function ViewOrders() {
<td> : </td> <td> : </td>
<td> <td>
{productData?.status_timeline?.processing {productData?.status_timeline?.processing
? new Date(productData?.status_timeline?.processing).toLocaleString( ? new Date(
'en-IN', productData?.status_timeline?.processing
{ ).toLocaleString("en-IN", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
hour: '2-digit', hour: "2-digit",
minute: 'numeric', minute: "numeric",
hour12: true, hour12: true,
}, })
) : "-"}
: '-'}
</td> </td>
</tr> </tr>
<tr className="text-center"> <tr className="text-center">
@ -447,18 +327,17 @@ function ViewOrders() {
<td> : </td> <td> : </td>
<td> <td>
{productData?.status_timeline?.dispatched {productData?.status_timeline?.dispatched
? new Date(productData?.status_timeline?.dispatched).toLocaleString( ? new Date(
'en-IN', productData?.status_timeline?.dispatched
{ ).toLocaleString("en-IN", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
hour: '2-digit', hour: "2-digit",
minute: 'numeric', minute: "numeric",
hour12: true, hour12: true,
}, })
) : "-"}
: '-'}
</td> </td>
</tr> </tr>
<tr className="text-center"> <tr className="text-center">
@ -466,18 +345,17 @@ function ViewOrders() {
<td> : </td> <td> : </td>
<td> <td>
{productData?.status_timeline?.delivered {productData?.status_timeline?.delivered
? new Date(productData?.status_timeline?.delivered).toLocaleString( ? new Date(
'en-IN', productData?.status_timeline?.delivered
{ ).toLocaleString("en-IN", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
hour: '2-digit', hour: "2-digit",
minute: 'numeric', minute: "numeric",
hour12: true, hour12: true,
}, })
) : "-"}
: '-'}
</td> </td>
</tr> </tr>
<tr className="text-center"> <tr className="text-center">
@ -485,18 +363,17 @@ function ViewOrders() {
<td> : </td> <td> : </td>
<td> <td>
{productData?.status_timeline?.cancelled {productData?.status_timeline?.cancelled
? new Date(productData?.status_timeline?.cancelled).toLocaleString( ? new Date(
'en-IN', productData?.status_timeline?.cancelled
{ ).toLocaleString("en-IN", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
hour: '2-digit', hour: "2-digit",
minute: 'numeric', minute: "numeric",
hour12: true, hour12: true,
}, })
) : "-"}
: '-'}
</td> </td>
</tr> </tr>
<tr className="text-center"> <tr className="text-center">
@ -504,40 +381,143 @@ function ViewOrders() {
<td> : </td> <td> : </td>
<td> <td>
{productData?.status_timeline?.returned {productData?.status_timeline?.returned
? new Date(productData?.status_timeline?.returned).toLocaleString( ? new Date(
'en-IN', productData?.status_timeline?.returned
{ ).toLocaleString("en-IN", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
hour: '2-digit', hour: "2-digit",
minute: 'numeric', minute: "numeric",
hour12: true, hour12: true,
}, })
) : "-"}
: '-'}
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div>)} <div className="col-lg-5 mt-3">
<div className="card">
<div className="card-body">
<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 style={{ display: 'none' }}> </div>
</div>
)}
</div>
</div>
</div>
<div style={{ display: "none" }}>
{/* <PrintOrderDetails productData={productData} ref={printOrderRef} /> */} {/* <PrintOrderDetails productData={productData} ref={printOrderRef} /> */}
</div> </div>
</> </>
) );
} }
export default ViewOrders export default ViewOrders;