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

point of sale complete with QrCode and Cash

Browse Source
This commit is contained in:
Sibunnayak 2024-04-28 17:25:03 +05:30
parent 0cd74fcf00
commit 0277bbe888
11 changed files with 2448 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -61,6 +61,7 @@
"react-dom": "^18.0.0",
"react-draft-wysiwyg": "^1.15.0",
"react-hot-toast": "^2.4.0",
"react-modal": "^3.16.1",
"react-qr-code": "^2.0.11",
"react-quill": "^2.0.0",
"react-redux": "^7.2.9",

23
public/index.html
View File

@ -7,22 +7,14 @@
* License MIT
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta
name="description"
content="CoreUI for React - Open Source Bootstrap Admin Template"
/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template" />
<meta name="author" content="Łukasz Holeczek" />
<meta
name="keyword"
content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React"
/>
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React" />
<title>Smellika Admin</title>
<!--
manifest.json provides metadata used when your web app is added to the
@ -30,10 +22,7 @@
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<link rel="react" href="https://coreui.io/react/" />
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> -->
@ -66,6 +55,8 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</body>
<!-- <script src="/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script> -->
</html>

12
src/_nav.js
View File

@ -156,6 +156,18 @@ const _nav = [
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/orders/cancelled",
},
{
component: CNavItem,
name: "In Store Cash Orders",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/inStoreCashOrders/new",
},
{
component: CNavItem,
name: "In Store QRCode Orders",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/InStoreQRCodeOrders/new",
},
],
},
{

7
src/routes.js
View File

@ -138,6 +138,9 @@ import OrderdayChart from "./views/Charts/OrderDaywise";
import RevenueCharts from "./views/Charts/RevenueCharts";
import AddCustomer from "./views/customerDetails/addCustomer";
import Pos from "./views/PointOfSale/Pos";
import InStoreCashOrders from "./views/orders/InStoreCashOrders";
import POSViewOrders from "./views/orders/POSViewOrders";
import InStoreQRCodeOrders from "./views/orders/InStoreQRCodeOrders";
const routes = [
{ path: "/", exact: true, name: "Home" },
{
@ -445,6 +448,10 @@ const routes = [
name: "Returned Orders",
element: ReturnedOrders,
},
//Point of sale orders
{ path: "/inStoreCashOrders/new", name: "In Store Cash Orders", element:InStoreCashOrders },
{ path: "/InStoreQRCodeOrders/new", name: "In Store QR Code Orders", element:InStoreQRCodeOrders },
{ path: "/inStoreOrders/:status/:id", name: "View In Store Cash Orders", element: POSViewOrders },
// { path: "/order/:status/:id", name: "View Order", element: ViewOdr },
//dashboard

77
src/views/PointOfSale/AddressSelectionModal.js Normal file
View File

@ -0,0 +1,77 @@
import React from "react";
import Modal from "react-modal";
const AddressSelectionModal = ({ isOpen, onClose, addresses, onSelect }) => {
const modalStyle = {
overlay: {
backgroundColor: "rgba(0, 0, 0, 0.5)",
},
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
maxWidth: "800px",
width: "90%",
},
};
const tableStyle = {
width: "100%",
borderCollapse: "collapse",
};
const thTdStyle = {
border: "1px solid #ddd",
padding: "8px",
};
const thStyle = {
...thTdStyle,
backgroundColor: "#f2f2f2",
};
// console.log(addresses);
return (
<Modal isOpen={isOpen} onRequestClose={onClose} style={modalStyle}>
<h2>Select Address</h2>
<table style={tableStyle}>
<thead>
<tr>
<th style={thStyle}>First Name</th>
<th style={thStyle}>Last Name</th>
<th style={thStyle}>Phone Number</th>
<th style={thStyle}>Street</th>
<th style={thStyle}>City</th>
<th style={thStyle}>Postal Code</th>
<th style={thStyle}>State</th>
{/* Add additional columns as needed */}
</tr>
</thead>
<tbody>
{addresses.map((address, index) => (
<tr
key={index}
onClick={() => onSelect(address)}
style={{ cursor: "pointer", ...thTdStyle }}
>
<td>{address.first_Name}</td>
<td>{address.last_Name}</td>
<td>{address.phone_Number}</td>
<td>{address.street}</td>
<td>{address.city}</td>
<td>{address.postalCode}</td>
<td>{address.state}</td>
{/* Add additional columns as needed */}
</tr>
))}
</tbody>
</table>
<button onClick={onClose}>Close</button>
</Modal>
);
};
export default AddressSelectionModal;

675
src/views/PointOfSale/Pos.js
View File

@ -18,7 +18,7 @@ import {
Paper,
Typography,
} from "@mui/material";
import toast, { Toaster } from "react-hot-toast";
import SearchIcon from "@mui/icons-material/Search";
import ClearIcon from "@mui/icons-material/Clear";
// import PercentIcon from "@mui/icons-material/Percent";
@ -28,96 +28,63 @@ import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import AddressSelectionModal from "./AddressSelectionModal";
const Pos = () => {
const token = isAutheticated();
const [query, setQuery] = useState("");
const navigate = useNavigate();
const [loading, setLoading] = useState(true);
const [success, setSuccess] = useState(true);
const [posData, setPosData] = useState([]);
const [user, setUser] = useState([
// {
// id: 1,
// first_Name: "John",
// last_Name: "Doe",
// street: "123 Main St",
// city: "New York",
// state: "NY",
// country: "USA",
// postalCode: "10001",
// phone_Number: "123-456-7890",
// },
// {
// id: 2,
// first_Name: "Jane",
// last_Name: "Smith",
// street: "456 Elm St",
// city: "Los Angeles",
// state: "CA",
// country: "USA",
// postalCode: "90001",
// phone_Number: "123-456-7890",
// },
// {
// id: 3,
// first_Name: "Michael",
// last_Name: "Johnson",
// street: "789 Oak St",
// city: "Chicago",
// state: "IL",
// country: "USA",
// postalCode: "60007",
// phone_Number: "123-456-7890",
// },
// {
// id: 4,
// first_Name: "Sarah",
// last_Name: "Williams",
// street: "101 Pine St",
// city: "Miami",
// state: "FL",
// country: "USA",
// postalCode: "33101",
// phone_Number: "123-456-7890",
// },
// {
// id: 5,
// first_Name: "John",
// last_Name: "Doe",
// street: " Main St",
// city: "New York",
// state: "NY",
// country: "USA",
// postalCode: "10001",
// phone_Number: "123-122-3210",
// },
]);
const getUsers = async () => {
axios
.get(`/api/v1/admin/users`, {
const [usersWithAddresses, setUsersWithAddresses] = useState([]);
const getUsersWithAddresses = async () => {
try {
const usersResponse = await axios.get("/api/v1/admin/users", {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setUser(res.data.users);
setLoading(false);
})
.catch((error) => {
});
const users = usersResponse.data.users;
const usersWithAddressesPromises = users.map(async (user) => {
try {
const addressResponse = await axios.get(
`/api/shipping/address/user/address/${user._id}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
const userWithAddress = {
...user,
address: addressResponse.data?.UserShippingAddress || [],
};
return userWithAddress;
} catch (error) {
throw new Error(`Error fetching address for user ${user._id}`);
}
});
const usersWithAddresses = await Promise.all(usersWithAddressesPromises);
setUsersWithAddresses(usersWithAddresses);
} catch (error) {
swal({
title: error,
text: "please login to access the resource or refresh the page ",
text: "Please login to access the resource or refresh the page.",
icon: "error",
button: "Retry",
dangerMode: true,
});
setLoading(false);
});
}
};
const [showData, setShowData] = useState(user);
useEffect(() => {
getUsersWithAddresses();
}, [token]);
const [showData, setShowData] = useState(usersWithAddresses);
const [currentUser, setCurrentUser] = useState(null);
const [salesType, setSalesType] = useState("");
const [storedelivery, setStoreDelivery] = useState("");
// Function to handle change in radio button selection
@ -133,23 +100,19 @@ const Pos = () => {
setCurrentUser(null);
const lowerCaseQuery = query.toLowerCase(); // Convert query to lowercase
const searchedResult = user.filter((item) =>
const searchedResult = usersWithAddresses.filter((item) =>
item.name.toString().toLowerCase().includes(lowerCaseQuery)
);
setShowData(searchedResult);
setLoading(false);
}
// else {
// setShowData(user); // Show all users when query is empty
// setCurrentUser(null); // Reset current user when query is empty
// }
}, 100);
}, [query]);
const handleClick = (id) => {
setQuery("");
const customer = user.find((user) => user.id === id);
const customer = usersWithAddresses.find((user) => user._id === id);
setCurrentUser(customer);
};
@ -165,7 +128,7 @@ const Pos = () => {
const getAllProducts = async () => {
try {
const response = await axios.get("/api/product/getAll/");
const response = await axios.get("/api/product/getAll/user/");
if (response.status === 200) {
// setProductData(response?.data?.product);
const activeProducts = response?.data?.product.filter(
@ -254,15 +217,49 @@ const Pos = () => {
};
const addToCart = (item) => {
// Check if the item is already in the cart
const isItemInCart = cartItem.find((cartItem) => cartItem._id === item._id);
// Check if the item is already in the cart with the same product ID and variant
const existingCartItemIndex = cartItem.findIndex(
(cartItem) =>
cartItem.product._id === item._id &&
cartItem.variant._id === selectedVariants[item._id]?._id
);
if (isItemInCart) {
// Item is already in the cart, show a confirmation message
swal("Item already in cart", "", "info");
if (existingCartItemIndex !== -1) {
// Item with the same product ID and variant already exists in the cart, update its quantity
const newCart = [...cartItem];
const existingCartItem = newCart[existingCartItemIndex];
const selectedVariant = selectedVariants[item._id];
const price = selectedVariant ? selectedVariant.price : item.price;
existingCartItem.quantity += 1;
existingCartItem.subtotal +=
parseFloat(price) + parseFloat(item.gst_amount);
setCartItem(newCart);
// Show a success message
swal("Item quantity updated in cart", "", "success");
} else {
// Item is not in the cart, add it to the cart with quantity initialized to 1
setCartItem([...cartItem, { ...item, quantity: 1 }]);
// Item is not in the cart, add it
const selectedVariant = selectedVariants[item._id];
const price = selectedVariant ? selectedVariant.price : item.price;
const totalAmount = parseFloat(price) + parseFloat(item.gst_amount);
setCartItem([
...cartItem,
{
product: item,
quantity: 1,
variant: {
_id: selectedVariant?._id,
gst_Id: selectedVariant?.gst_Id,
price: selectedVariant?.price,
volume: selectedVariant?.volume,
weight: selectedVariant?.weight,
variant_Name: selectedVariant?.variant_Name,
},
subtotal: totalAmount,
},
]);
// Show a success message
swal("Item added to cart", "", "success");
}
@ -270,34 +267,53 @@ const Pos = () => {
const handleIncrease = (index) => {
const newCart = [...cartItem];
const item = newCart[index];
const selectedVariant = selectedVariants[item.product._id];
const price = selectedVariant ? selectedVariant.price : item.product.price;
const totalAmount =
(item.quantity + 1) * parseFloat(price) +
parseFloat(item.product.gst_amount);
newCart[index].quantity += 1;
newCart[index].total_amount =
newCart[index].quantity * newCart[index].price +
newCart[index].gst_amount; // Recalculate total amount
newCart[index].subtotal = totalAmount;
setCartItem(newCart);
};
const handleDecrease = (index) => {
const newCart = [...cartItem];
if (newCart[index].quantity > 1) {
const item = newCart[index];
if (item.quantity > 1) {
const selectedVariant = selectedVariants[item.product._id];
const price = selectedVariant
? selectedVariant.price
: item.product.price;
const totalAmount =
(item.quantity - 1) * parseFloat(price) +
parseFloat(item.product.gst_amount);
newCart[index].quantity -= 1;
newCart[index].total_amount =
newCart[index].quantity * newCart[index].price +
newCart[index].gst_amount; // Recalculate total amount
newCart[index].subtotal = totalAmount;
setCartItem(newCart);
}
};
const removeCartItemHandler = (id) => {
console.log("id", id);
const newCart = cartItem.filter((item) => item._id !== id);
// console.log(cartItem)
const removeCartItemHandler = (id, variant) => {
const newCart = cartItem.filter(
(item) => item?.product._id !== id || item.variant._id !== variant
);
setCartItem(newCart);
};
// Calculate subtotal of all items in cart
const calculateTotal = () => {
let subtotal = 0;
cartItem.forEach((item) => {
subtotal += item.total_amount;
subtotal += item.subtotal;
});
setTotal(subtotal);
};
@ -305,7 +321,274 @@ const Pos = () => {
useEffect(() => {
calculateTotal();
}, [cartItem]);
console.log(user);
// console.log(usersWithAddresses);
const [showChangeAddress, setShowChangeAddress] = useState(false);
const [selectedAddress, setSelectedAddress] = useState(
currentUser?.address[0]
);
useEffect(() => {
setSelectedAddress(currentUser?.address[0]);
}, [currentUser]);
const handleChangeAddress = () => {
setShowChangeAddress(true);
};
const handleSelectAddress = (address) => {
setSelectedAddress(address);
setShowChangeAddress(false);
};
// const checkoutCash = async () => {
// // console.log("Checkout button clicked");
// try {
// const config = {
// headers: {
// Authorization: `Bearer ${token}`,
// },
// };
// const cartData = cartItem.map((item) => ({
// product: item.product, // Entire product object
// quantity: item.quantity,
// variant: item.variant, // Entire variant object
// subtotal: item.subtotal,
// }));
// const order = {
// userr: currentUser._id,
// address: selectedAddress._id,
// cart: cartData,
// subtotal: total,
// orderType: "PointOfSale",
// };
// // Send POST request to backend API endpoint
// const response = await axios.post(
// "/api/order/pos-checkout/",
// order,
// config
// );
// toast.success("Order Placed! Your order has been successfully placed.");
// swal({
// title: "Order Placed!",
// text: `Order ID: ${
// response.data.order.orderID
// }\nDate and Time: ${new Date(
// response.data.order.createdAt
// ).toLocaleString("en-IN", {
// month: "short",
// day: "numeric",
// year: "numeric",
// hour: "2-digit",
// minute: "numeric",
// hour12: true,
// })}`,
// icon: "success",
// button: "OK",
// });
// // Clear cart items, reset current user and address, and reset radio button states
// setCartItem([]);
// setCurrentUser(null);
// setSelectedAddress(null);
// setSalesType("");
// setStoreDelivery("");
// setTotal(0);
// setCategoryValue("All");
// } catch (error) {
// // Handle errors
// console.error("Error placing order:", error);
// toast.error(
// "Error! There was an error placing your order. Please try again later."
// );
// }
// };
const checkoutCash = async () => {
const config = {
headers: {
Authorization: `Bearer ${token}`,
},
};
const cartData = cartItem.map((item) => ({
product: item.product, // Entire product object
quantity: item.quantity,
variant: item.variant, // Entire variant object
subtotal: item.subtotal,
}));
const order = {
userr: currentUser._id,
address: selectedAddress._id,
cart: cartData,
subtotal: total,
orderType: "PointOfSale",
};
// Send POST request to backend API endpoint
axios
.post("/api/order/pos-checkout/", order, config)
.then((response) => {
// Handle successful response
swal({
title: "Order Placed!",
text: `Order ID: ${
response.data.order.orderID
}\nDate and Time: ${new Date(
response.data.order.createdAt
).toLocaleString("en-IN", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
})}`,
icon: "success",
button: "OK",
});
// Clear cart items, reset current user and address, and reset radio button states
setCartItem([]);
setCurrentUser(null);
setSelectedAddress(null);
setStoreDelivery("");
setTotal(0);
setCategoryValue("All");
})
.catch((error) => {
// Handle errors
console.error("Error placing order:", error);
toast.error(
"Error! There was an error placing your order. Please try again later."
);
});
};
// for QR Code
const checkoutQRCode = async () => {
try {
const {
data: { key },
} = await axios.get(
`/api/order/getRzpKey/${currentUser.name}/${currentUser.email}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
const cartData = cartItem.map((item) => ({
product: item.product, // Entire product object
quantity: item.quantity,
variant: item.variant, // Entire variant object
subtotal: item.subtotal,
}));
const {
data: { order },
} = await axios.post(
"/api/order/Rzpcheckout",
{
userr: currentUser._id,
address: selectedAddress._id,
cart: cartData,
subtotal: total,
orderType: "PointOfSale",
},
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
const options = {
key,
amount: order.amount,
currency: "INR",
name: "Smellika",
description: "Smellika RazorPay",
image:
"https://res.cloudinary.com/dnmgivd1x/image/upload/v1707058241/bolo/Logo/aasy4ulmbbtqmcxi64j0.jpg",
order_id: order.id,
// callback_url:
// "http://localhost:5000/api/order/pos-paymentverification/",
callback_url:
"https://api.smellika.com/api/order/pos-paymentverification/",
prefill: {
name: currentUser.name,
email: currentUser.email,
},
notes: {
address: "Razorpay Corporate Office",
},
theme: {
color: "#121212",
},
};
const razor = new window.Razorpay(options);
razor.on("payment.success", async function (response) {
// Handle successful payment
console.log("Payment successful:", response);
});
razor.open();
} catch (error) {
if (
error.response &&
error.response.data &&
error.response.data.message
) {
// If error.response and its properties exist, handle the error message
toast.error(error.response.data.message);
} else {
// If error.response or its properties are undefined, handle the error generically
toast.error("An error occurred. Please try again later.");
}
}
};
// varient
const [selectedVariants, setSelectedVariants] = useState({});
// Function to set default variant for each product
const setDefaultVariants = () => {
const defaultVariants = {};
filteredItems.forEach((item) => {
defaultVariants[item._id] =
item.variants && item.variants.length > 0 ? item.variants[0] : null;
});
setSelectedVariants(defaultVariants);
};
// Function to handle variant change
const handleVariantChange = (productId, event) => {
const selectedVariantName = event.target.value;
const selectedVariant = filteredItems
.find((item) => item._id === productId)
?.variants.find(
(variant) => variant.variant_Name === selectedVariantName
);
setSelectedVariants((prevState) => ({
...prevState,
[productId]: selectedVariant,
}));
};
// console.log(selectedVariants);
// console.log(cartItem);
// Call setDefaultVariants when the component mounts
useEffect(() => {
setDefaultVariants();
}, [filteredItems]);
// console.log("currentUser", currentUser);
return (
<div className="main-content">
<div className="page-content">
@ -403,7 +686,7 @@ const Pos = () => {
textTransform: "capitalize",
}}
onClick={() => {
navigate("/pos/new-customer", {
navigate("/add-customer", {
replace: true,
});
}}
@ -424,12 +707,32 @@ const Pos = () => {
showData.map((user, index) => (
<tr
key={index}
onClick={() => handleClick(user?._id)}
className="cursor-pointer hover:bg-gray-100"
onClick={() => {
if (user.address.length === 0) {
toast.error(
"Please add an address for shopping."
);
} else {
handleClick(user?._id);
}
}}
className={`cursor-pointer hover:bg-gray-100 ${
user.address.length === 0 ? "opacity-50" : ""
}`}
>
<td className="text-start">{user.name}</td>
{/* <td className="text-start">{`${user?.street}, ${user?.city}, ${user?.state}, ${user?.country}, ${user?.postalCode}`}</td>
<td className="text-start">{`${user?.phone_Number}`}</td> */}
{user.address.length === 0 ? (
<td colSpan="2" className="text-start">
Add address for shopping
</td>
) : (
<>
<td className="text-start">
{`${user?.address[0]?.street}, ${user?.address[0]?.city}, ${user?.address[0]?.state}, ${user?.address[0]?.country}, ${user?.address[0]?.postalCode}`}
</td>
<td className="text-start">{`${user?.address[0]?.phone_Number}`}</td>
</>
)}
</tr>
))
)}
@ -438,8 +741,8 @@ const Pos = () => {
</div>
)}
{/* Display selected customer */}
<div>
{currentUser && (
// Display customer details
<div style={{ display: "flex" }}>
<div style={{ flex: "1" }}>
<div
@ -457,7 +760,7 @@ const Pos = () => {
>
Customer Name:
</Typography>
<Typography>{`${currentUser?.first_Name} ${currentUser?.last_Name}`}</Typography>
<Typography>{`${currentUser?.name}`}</Typography>
</div>
<div style={{ display: "flex" }}>
<Typography
@ -468,7 +771,7 @@ const Pos = () => {
>
Mobile No.:
</Typography>
<Typography>{`${currentUser?.phone_Number}`}</Typography>
<Typography>{`${selectedAddress?.phone_Number}`}</Typography>
</div>
<div style={{ display: "flex" }}>
<Typography
@ -479,60 +782,28 @@ const Pos = () => {
>
Address:
</Typography>
<Typography>{`${currentUser?.street}, ${currentUser?.city}, ${currentUser?.state}, ${currentUser?.country}, ${currentUser?.postalCode}`}</Typography>
<Typography>{`${selectedAddress?.street}, ${selectedAddress?.city}, ${selectedAddress?.state}, ${selectedAddress?.country}, ${selectedAddress?.postalCode}`}</Typography>
</div>
<Button
variant="contained"
color="primary"
onClick={handleChangeAddress}
>
Change Address
</Button>
</div>
</div>
</div>
)}
{/* Sales Type radio buttons */}
<div style={{ display: "flex", alignItems: "center" }}>
<Typography
style={{ fontWeight: "bold", marginRight: "0.5rem" }}
>
Sales Type:
</Typography>
<div style={{ display: "flex", flexDirection: "row" }}>
<div
style={{
display: "flex",
marginRight: "0.5rem",
}}
>
<input
type="radio"
id="inStoreDelivery"
name="salesType"
value="inStoreDelivery"
checked={salesType === "inStoreDelivery"}
onChange={handleSalesTypeChange}
className="mr-2"
{/* Render AddressSelectionModal only when currentUser exists */}
{currentUser && (
<AddressSelectionModal
isOpen={showChangeAddress}
onClose={() => setShowChangeAddress(false)}
addresses={currentUser.address}
onSelect={handleSelectAddress}
/>
<label
htmlFor="inStoreDelivery"
style={{ marginTop: "2px" }}
>
In Store Delivery
</label>
</div>
<div style={{ display: "flex" }}>
<input
type="radio"
id="shipToCustomer"
name="salesType"
value="shipToCustomer"
checked={salesType === "shipToCustomer"}
onChange={handleSalesTypeChange}
className="mr-2"
/>
<label
htmlFor="shipToCustomer"
style={{ marginTop: "2px" }}
>
Ship to Customer
</label>
</div>
</div>
)}
</div>
</div>
</div>
@ -601,6 +872,7 @@ const Pos = () => {
<tr>
<th>Product Image</th>
<th>Product Name</th>
<th>variant</th>
<th>Price</th>
<th>Action</th>
</tr>
@ -618,7 +890,50 @@ const Pos = () => {
)}
</td>
<td>{item.name}</td>
<td>{item.price}</td>
<td>
{item.variants && item.variants.length > 0 ? (
<FormControl
variant="standard"
style={{ width: "100%" }}
>
<Select
labelId={`variant-label-${item._id}`}
id={`variant-select-${item._id}`}
value={
selectedVariants[item._id]
? selectedVariants[item._id]
.variant_Name
: ""
}
onChange={(e) =>
handleVariantChange(item._id, e)
}
style={{
display: "flex",
width: "100%",
}}
>
{item.variants.map((variant, i) => (
<MenuItem
key={i}
value={variant.variant_Name}
style={{ display: "block" }}
>
{variant.variant_Name}
</MenuItem>
))}
</Select>
</FormControl>
) : (
"No Variant"
)}
</td>
<td>
{selectedVariants[item._id]
? selectedVariants[item._id].price
: item.price}
</td>
<td>
<Button
variant="contained"
@ -740,7 +1055,8 @@ const Pos = () => {
width: "100%",
}}
src={
row.image && row.image[0].url
row?.product.image &&
row?.product.image[0].url
}
alt=""
/>
@ -755,11 +1071,14 @@ const Pos = () => {
ml: "10px",
}}
>
{row.name}
{row?.product.name}
</Typography>
<Box
onClick={() =>
removeCartItemHandler(row._id)
removeCartItemHandler(
row?.product._id,
row.variant._id
)
}
sx={{
color: "#6C7275",
@ -827,7 +1146,13 @@ const Pos = () => {
color: "#121212",
}}
>
₹{row.price}
₹
{row?.variant.price
? row.variant.price
: row.product.price}
{/* {selectedVariants[row._id]
? selectedVariants[row._id].price
: row.price} */}
</TableCell>
<TableCell
sx={{
@ -837,7 +1162,7 @@ const Pos = () => {
color: "#121212",
}}
>
₹{row?.gst_amount}
₹{row?.product.gst_amount}
</TableCell>
<TableCell
@ -848,8 +1173,7 @@ const Pos = () => {
color: "#121212",
}}
>
{/* ${row.subtotal}${individualSubtotals[index]} */}
₹{row.total_amount}
₹{row.subtotal}
</TableCell>
</TableRow>
))
@ -875,12 +1199,10 @@ const Pos = () => {
<div
style={{ display: "flex", justifyContent: "space-between" }}
>
{/* Left side content */}
<div>
{salesType === "" ? null : salesType ===
"inStoreDelivery" ? (
{/* {salesType === "" ? null : salesType ===
"inStoreDelivery" ? ( */}
<div style={{ display: "flex", flexDirection: "row" }}>
{/* Display in-store delivery options */}
<Typography
style={{
fontWeight: "bold",
@ -913,6 +1235,7 @@ const Pos = () => {
/>
<label htmlFor="Cash">Cash</label>
</div>
{storedelivery && (
<Button
variant="contained"
color="primary"
@ -920,16 +1243,24 @@ const Pos = () => {
fontWeight: "bold",
textTransform: "capitalize",
}}
onClick={
storedelivery === "QRCode"
? checkoutQRCode
: checkoutCash
}
>
Checkout
</Button>
)}
</div>
) : (
{/* ) : (
<div>
{/* Display button for sending payment link */}
{salesType === "shipToCustomer" && (
<Button variant="contained" color="primary">
Send Payment Link to Customer
</Button>
)}
{salesType !== "shipToCustomer" && (
<Button
variant="contained"
color="primary"
@ -938,12 +1269,14 @@ const Pos = () => {
marginLeft: "5rem",
textTransform: "capitalize",
}}
onClick={checkout}
>
Checkout
</Button>
</div>
)}
</div>
)} */}
</div>
{/* Total Section */}
<div

386
src/views/orders/InStoreCashOrders.js Normal file
View File

@ -0,0 +1,386 @@
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { isAutheticated } from "src/auth";
import Button from "@material-ui/core/Button";
function InStoreCashOrders() {
const token = isAutheticated();
const [loading, setLoading] = useState(true);
const [success, setSuccess] = useState(true);
const [newOrdersData, setNewOrdersData] = useState([]);
console.log(newOrdersData);
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(10);
const [showData, setShowData] = useState(newOrdersData);
const handleShowEntries = (e) => {
setCurrentPage(1);
setItemPerPage(e.target.value);
};
useEffect(() => {
function getNewOrder() {
axios
.get(`/api/order/getAll/new`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
const filteredOrders = res.data.order.filter(
(order) => order.orderType === "PointOfSale" && order.paymentMode === "cod"
);
// Set the filtered orders data
setNewOrdersData(filteredOrders);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
}
getNewOrder();
}, [success]);
useEffect(() => {
const loadData = () => {
const indexOfLastPost = currentPage * itemPerPage;
const indexOfFirstPost = indexOfLastPost - itemPerPage;
setShowData(newOrdersData.slice(indexOfFirstPost, indexOfLastPost));
};
loadData();
}, [currentPage, itemPerPage, newOrdersData]);
const handleDelete = (id) => {
console.log(id);
swal({
title: "Are you sure?",
icon: "error",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.delete(`/api/order/delete/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
};
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
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
New Orders
</div>
{/* <div className="page-title-right">
<Link to="/order/add">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Add Order
</Button>
</Link>
</div> */}
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="col-sm-12 col-md-12">
<div className="dataTables_length">
<label className="w-100">
Show
<select
style={{ width: "10%" }}
name=""
onChange={(e) => handleShowEntries(e)}
className="
select-w
custom-select custom-select-sm
form-control form-control-sm
"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{ border: "1px solid" }}
>
<thead
className="thead"
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th className="text-start">Order ID</th>
<th className="text-start">Customer</th>
<th className="text-start">Order value</th>
<th className="text-start">Order At</th>
<th className="text-start">Status</th>
<th className="text-start">Actions</th>
</tr>
</thead>
<tbody>
{!loading && showData.length === 0 && (
<tr className="text-center">
<td colSpan="6">
<h5>No Data Available</h5>
</td>
</tr>
)}
{loading ? (
<tr>
<td className="text-center" colSpan="6">
Loading...
</td>
</tr>
) : (
showData.map((order, i) => {
return (
<tr key={i}>
<td className="text-start">{order?.orderID}</td>
<td className="text-start">
{order?.user?.name}
</td>
<td className="text-start">
₹{order?.total_amount}
</td>
<td className="text-start">
{new Date(order?.createdAt).toLocaleString(
"en-IN",
{
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
}
)}
</td>
<td className="text-start">
<span className="badge text-bg-primary text-white">
{order?.orderStatus}
</span>
</td>
<td className="text-start">
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
<Link
to={`/inStoreOrders/${order.orderStatus}/${order._id}`}
>
<button
style={{ color: "white" }}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
ms-2 mt-1
"
>
View
</button>
</Link>
{/* <Link to={`/orders/edit/${order._id}`}>
<button
style={{ color: "white" }}
type="button"
className="
btn btn-info btn-sm
waves-effect waves-light
btn-table
ms-2 mt-1
"
>
Edit
</button>
</Link> */}
{/* <button
style={{ color: "white" }}
type="button"
className="
btn btn-danger btn-sm
waves-effect waves-light
btn-table
ms-2 mt-1
"
onClick={() => handleDelete(order._id)}
>
Delete
</button> */}
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
<div className="row mt-20">
<div className="col-sm-12 col-md-6 mb-20">
<div
className="dataTables_info"
id="datatable_info"
role="status"
aria-live="polite"
>
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
{Math.min(
currentPage * itemPerPage,
newOrdersData.length
)}{" "}
of {newOrdersData.length} entries
</div>
</div>
<div className="col-sm-12 col-md-6">
<div className="d-flex">
<ul className="pagination ms-auto">
<li
className={
currentPage === 1
? "paginate_button page-item previous disabled"
: "paginate_button page-item previous"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev - 1)}
>
Previous
</span>
</li>
{!(currentPage - 1 < 1) && (
<li className="paginate_button page-item">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={(e) =>
setCurrentPage((prev) => prev - 1)
}
>
{currentPage - 1}
</span>
</li>
)}
<li className="paginate_button page-item active">
<span
className="page-link"
style={{ cursor: "pointer" }}
>
{currentPage}
</span>
</li>
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
newOrdersData.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
newOrdersData.length - 1
)
? "paginate_button page-item next"
: "paginate_button page-item next disabled"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev + 1)}
>
Next
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default InStoreCashOrders;

386
src/views/orders/InStoreQRCodeOrders.js Normal file
View File

@ -0,0 +1,386 @@
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { isAutheticated } from "src/auth";
import Button from "@material-ui/core/Button";
function InStoreQRCodeOrders() {
const token = isAutheticated();
const [loading, setLoading] = useState(true);
const [success, setSuccess] = useState(true);
const [newOrdersData, setNewOrdersData] = useState([]);
console.log(newOrdersData);
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(10);
const [showData, setShowData] = useState(newOrdersData);
const handleShowEntries = (e) => {
setCurrentPage(1);
setItemPerPage(e.target.value);
};
useEffect(() => {
function getNewOrder() {
axios
.get(`/api/order/getAll/new`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
const filteredOrders = res.data.order.filter(
(order) => order.orderType === "PointOfSale" && order.paymentMode === "online"
);
// Set the filtered orders data
setNewOrdersData(filteredOrders);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
}
getNewOrder();
}, [success]);
useEffect(() => {
const loadData = () => {
const indexOfLastPost = currentPage * itemPerPage;
const indexOfFirstPost = indexOfLastPost - itemPerPage;
setShowData(newOrdersData.slice(indexOfFirstPost, indexOfLastPost));
};
loadData();
}, [currentPage, itemPerPage, newOrdersData]);
const handleDelete = (id) => {
console.log(id);
swal({
title: "Are you sure?",
icon: "error",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.delete(`/api/order/delete/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
};
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
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
New Orders
</div>
{/* <div className="page-title-right">
<Link to="/order/add">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Add Order
</Button>
</Link>
</div> */}
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="col-sm-12 col-md-12">
<div className="dataTables_length">
<label className="w-100">
Show
<select
style={{ width: "10%" }}
name=""
onChange={(e) => handleShowEntries(e)}
className="
select-w
custom-select custom-select-sm
form-control form-control-sm
"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{ border: "1px solid" }}
>
<thead
className="thead"
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th className="text-start">Order ID</th>
<th className="text-start">Customer</th>
<th className="text-start">Order value</th>
<th className="text-start">Order At</th>
<th className="text-start">Status</th>
<th className="text-start">Actions</th>
</tr>
</thead>
<tbody>
{!loading && showData.length === 0 && (
<tr className="text-center">
<td colSpan="6">
<h5>No Data Available</h5>
</td>
</tr>
)}
{loading ? (
<tr>
<td className="text-center" colSpan="6">
Loading...
</td>
</tr>
) : (
showData.map((order, i) => {
return (
<tr key={i}>
<td className="text-start">{order?.orderID}</td>
<td className="text-start">
{order?.user?.name}
</td>
<td className="text-start">
₹{order?.total_amount}
</td>
<td className="text-start">
{new Date(order?.createdAt).toLocaleString(
"en-IN",
{
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
}
)}
</td>
<td className="text-start">
<span className="badge text-bg-primary text-white">
{order?.orderStatus}
</span>
</td>
<td className="text-start">
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
<Link
to={`/inStoreOrders/${order.orderStatus}/${order._id}`}
>
<button
style={{ color: "white" }}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
ms-2 mt-1
"
>
View
</button>
</Link>
{/* <Link to={`/orders/edit/${order._id}`}>
<button
style={{ color: "white" }}
type="button"
className="
btn btn-info btn-sm
waves-effect waves-light
btn-table
ms-2 mt-1
"
>
Edit
</button>
</Link> */}
{/* <button
style={{ color: "white" }}
type="button"
className="
btn btn-danger btn-sm
waves-effect waves-light
btn-table
ms-2 mt-1
"
onClick={() => handleDelete(order._id)}
>
Delete
</button> */}
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
<div className="row mt-20">
<div className="col-sm-12 col-md-6 mb-20">
<div
className="dataTables_info"
id="datatable_info"
role="status"
aria-live="polite"
>
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
{Math.min(
currentPage * itemPerPage,
newOrdersData.length
)}{" "}
of {newOrdersData.length} entries
</div>
</div>
<div className="col-sm-12 col-md-6">
<div className="d-flex">
<ul className="pagination ms-auto">
<li
className={
currentPage === 1
? "paginate_button page-item previous disabled"
: "paginate_button page-item previous"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev - 1)}
>
Previous
</span>
</li>
{!(currentPage - 1 < 1) && (
<li className="paginate_button page-item">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={(e) =>
setCurrentPage((prev) => prev - 1)
}
>
{currentPage - 1}
</span>
</li>
)}
<li className="paginate_button page-item active">
<span
className="page-link"
style={{ cursor: "pointer" }}
>
{currentPage}
</span>
</li>
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
newOrdersData.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
newOrdersData.length - 1
)
? "paginate_button page-item next"
: "paginate_button page-item next disabled"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev + 1)}
>
Next
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default InStoreQRCodeOrders;

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

@ -31,7 +31,11 @@ function NewOrders() {
},
})
.then((res) => {
setNewOrdersData(res.data.order);
const filteredOrders = res.data.order.filter(
(order) => order.orderType === "WebSite"
);
setNewOrdersData(filteredOrders);
setLoading(false);
})
.catch((err) => {
@ -42,6 +46,7 @@ function NewOrders() {
getNewOrder();
}, [success]);
useEffect(() => {
const loadData = () => {
const indexOfLastPost = currentPage * itemPerPage;

946
src/views/orders/POSViewOrders.js Normal file
View File

@ -0,0 +1,946 @@
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 { isAutheticated } from "src/auth";
import { useDispatch, useSelector } from "react-redux";
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 POSViewOrders() {
const { status, id } = useParams();
const [success, setSuccess] = useState(true);
const { cartItems, subTotal, shippingCharge, tax, shipingInfo, total } =
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 [productDetails, setProductDetails] = useState();
const [loading, setLoading] = useState(true);
const [orderId, setOrderId] = useState(null);
const [orderStatus, setOrderStatus] = useState("");
// const [data, setData] = useState({
// 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);
// 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 {
if (e.target.value === "") toast.error("please select status");
setOrderStatus(e.target.value);
}
};
const handleQuantityChange = (e) => {
setData((prev) => ({
...prev,
quantity: e.target.value,
total_Price: productDetails?.base_Price * e.target.value,
}));
};
// ------------------------------------------------------
const handlechangestatus = () => {
if (orderStatus === "dispatched") {
swal({
title: `Are you sure for ${orderStatus}?`,
icon: "warning",
content: {
element: "div",
attributes: {
innerHTML:
'<input id="input1" placeholder="Enter Courier Name" className="swal2-input" style="margin:3px;height:40px;text-align:center;">' +
'<input id="input2" placeholder="Courier Tracking ID" className="swal2-input" style="margin:3px;height:40px;text-align:center;">',
},
},
buttons: {
Yes: { text: "Submit", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((result) => {
if (result === true) {
// You have the input values, you can use them in your API call
const courierName = document.getElementById("input1").value.trim();
const TrackingID = document.getElementById("input2").value.trim();
// Check if values are entered
if (courierName === "" || TrackingID === "") {
swal({
title: "Warning",
text: "Please enter values Courier Name And Tracking ID",
icon: "warning",
button: "Ok",
dangerMode: true,
});
} else {
axios
.patch(
`/api/order/change/status/${id}`,
{
status: orderStatus,
courierName,
TrackingID,
sendemail: orderDetails?.user?.email,
customerName: orderDetails?.user?.name,
},
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
console.log("status");
toast.success(
`Order status change ${status} to ${orderStatus}`
);
// setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
}
// else {
// swal.close(); // Close the popup if canceled
// }
});
} else if (orderStatus === "cancelled") {
swal({
title: `Are you sure for ${orderStatus}?`,
icon: "warning",
content: {
element: "div",
attributes: {
innerHTML:
'<p>Reson for cancellation.?</p><input id="input1" placeholder="Enter Reason for Cancellation" className="swal2-input" style="margin:3px;height:40px;text-align:center;">',
},
},
buttons: {
Yes: { text: "Submit", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((result) => {
if (result === true) {
// You have the input values, you can use them in your API call
const ReasonforCancellation = document
.getElementById("input1")
.value.trim();
// Check if values are entered
if (ReasonforCancellation === "") {
swal({
title: "Warning",
text: "Please enter Reason for Cancellation",
icon: "warning",
button: "Ok",
dangerMode: true,
});
} else {
axios
.patch(
`/api/order/change/status/${id}`,
{
status: orderStatus,
ReasonforCancellation,
},
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
console.log("status");
toast.success(
`Order status change ${status} to ${orderStatus}`
);
// setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
}
// else {
// swal.close(); // Close the popup if canceled
// }
});
} else if (orderStatus === "delivered") {
swal({
title: `Are you sure for ${orderStatus}?`,
icon: "warning",
content: {
element: "div",
attributes: {
innerHTML:
'<input id="input1" type="date" placeholder="Delivered ON" className="swal2-input" style="height:40px;text-align:center;">',
// '<input id="input2" placeholder="Courier Tracking ID" className="swal2-input" style="margin:3px;height:40px">',
},
},
buttons: {
Yes: { text: "Submit", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((result) => {
if (result === true) {
// You have the input values, you can use them in your API call
const DDate = document.getElementById("input1").value.trim();
// Check if values are entered
if (DDate === "") {
swal({
title: "Warning",
text: "Please enter Delivered Date",
icon: "warning",
button: "Ok",
dangerMode: true,
});
} else {
axios
.patch(
`/api/order/change/status/${id}`,
{
status: orderStatus,
DDate,
},
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
console.log("status");
toast.success(
`Order status change ${status} to ${orderStatus}`
);
// setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
}
// else {
// swal.close(); // Close the popup if canceled
// }
});
} else {
swal({
title: `Are you sure for ${orderStatus}?`,
icon: "warning",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.patch(
`/api/order/change/status/${id}`,
{ status: orderStatus },
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
console.log("status");
toast.success(`order status change ${status} to ${orderStatus}`);
// setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
}
};
function getBack() {
navigate(`/orders/${status}`, { replace: true });
}
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
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
<p> View Order</p>
</div>
<div className="m-4">
{orderDetails?.orderID && (
<span>
<h6 className="">Order ID : {orderDetails?.orderID}</h6>{" "}
</span>
)}
</div>
{orderDetails?.courier_name && (
<div className="m-4">
<span>
<h6 className="">
Courier Name: {orderDetails?.courier_name}
</h6>{" "}
<h6 className="">
Tracking ID : {orderDetails?.courier_tracking_id}
</h6>
</span>
</div>
)}
{orderDetails?.isDelivered && (
<div className="m-4">
<span>
<h6 className="">Delivered: Yes</h6>{" "}
<h6 className="">
Delivered Date: {orderDetails?.DeliveredDate}
</h6>
</span>
</div>
)}
<div className="page-title-right">
{/* <Button
variant="contained"
color="primary"
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
marginRight: '5px',
}}
onClick={() => handleSubmit()}
disabled={loading}
>
{loading ? 'Loading' : 'Edit Now'}
</Button> */}
<Link
to={
orderDetails?.paymentMode === "cod"
? `/inStoreCashOrders/${status}`
: `/InStoreQRCodeOrders/${status}`
}
>
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
{loading ? (
<div className="d-flex justify-content-center">
<div className="spinner-border text-info" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
) : (
<div className="row">
<div className="col-lg-7 mt-3">
{orderDetails?.shipingInfo !== null && (
<div className="card">
<div className="card-body">
{/* <div className="mt-1">
<label className="fw-bold">Select Product:</label>
<div className="d-flex">
<select
className="form-control me-2"
// onChange={handleGetSingleProduct}
// value={productData?._id}
ref={getValue}
>
<option value="" >-----</option>
{productData && productData.map((item, index) =>
<option key={index} value={item?._id}>{item?.name}</option>
)}
</select>
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleProduct(e)}>Add</button>
</div>
</div> */}
<div className="mt-2">
<h6 className="fw-bold">
Products : {orderDetails?.orderItems?.length}
</h6>
<hr />
{orderDetails?.orderItems &&
orderDetails?.orderItems.map(
(productDetails, i) => (
<div className="my-2">
<div
className="row"
style={{ fontSize: "14px" }}
>
<div className="col-sm-4">
<img
src={productDetails?.image[0]?.url}
alt={productDetails?.name}
style={{
width: "100%",
objectFit: "contain",
maxHeight: "150px",
}}
/>
</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={{
width: "6rem",
}}
>
<span
className="px-2 mt-1"
style={{}}
>
{" "}
Quantity:{" "}
{productDetails?.quantity}
</span>
</div>
<p className="m-0 mt-3 ms-3">
<stong> Subtotal:</stong> ₹
{productDetails?.quantity *
productDetails?.price}
</p>
<p className="m-0 mt-3 ms-3">
<stong> Variant:</stong>{" "}
{productDetails?.variant_Name}
</p>
</div>
<div className="col-sm-6">
<p className="m-0 mt-3">
<stong> Price:</stong> ₹
{productDetails?.price}
</p>
<p className="m-0 mt-3">
<stong> GST:</stong> ₹
{productDetails?.gst_amount}
</p>
</div>
</div>
</div>
</div>
<hr />
</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 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" className="text-warning">
Processing Started
</th>
<td className="text-warning"> : </td>
<td className="text-warning">
{orderDetails?.status_timeline?.processing
? new Date(
orderDetails?.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" className="text-primary">
Dispatched On
</th>
<td className="text-primary"> : </td>
<td className="text-primary">
{orderDetails?.status_timeline?.dispatched
? new Date(
orderDetails?.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" className="text-success">
Delivered On
</th>
<td className="text-success"> : </td>
<td className="text-success">
{orderDetails?.status_timeline?.delivered
? new Date(
orderDetails?.status_timeline?.delivered
).toLocaleString("en-IN", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
})
: "-"}
</td>
</tr>
{orderDetails?.status_timeline?.cancelled && (
<tr className="text-center">
<th scope="row" className="text-danger">
Cancelled On
</th>
<td className="text-danger"> : </td>
<td className="text-danger">
{orderDetails?.status_timeline?.cancelled
? new Date(
orderDetails?.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>
{orderDetails?.status_timeline?.returned
? new Date(
orderDetails?.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 className="col-lg-5 mt-3">
<div className="card">
<div className="card-body">
<div className="mt-1">
{orderDetails?.orderStatus !== "cancelled" ? (
<h5 className="text-success">
Order Status: {orderDetails?.orderStatus}
</h5>
) : (
<>
<h5 className="text-danger">
Order Status: {orderDetails?.orderStatus}
</h5>
<p className="text-danger">
{" "}
Order Cancelled Reason:{" "}
{orderDetails?.order_Cancelled_Reason}
</p>
</>
)}
{/* order status change */}{" "}
<div className="mb-2">
{" "}
{status !== "cancelled" &&
status !== "returned" &&
status !== "delivered" && (
<div className="mt-1">
<label className="fw-bold">
Change Status :
</label>
<div className="row">
<div className="col-lg-9">
<select
className="form-control"
onChange={handleChange}
value={orderStatus}
>
{orderDetails?.orderStatus === "new" && (
<>
<option value="">New</option>
<option value="processing">
Processing
</option>
<option value="cancelled">
Cancelled
</option>
</>
)}
{orderDetails?.orderStatus ===
"processing" && (
<>
<option value="">Processing</option>
<option value="dispatched">
Dispatch
</option>
</>
)}
{orderDetails?.orderStatus ===
"dispatched" && (
<>
<option value="">Dispatch</option>
<option value="delivered">
Delivered
</option>
</>
)}
</select>
</div>
{orderStatus && (
<div className="col-lg-3">
<button
className="btn btn-primary"
onClick={(e) => handlechangestatus(e)}
>
Update
</button>
</div>
)}
</div>
</div>
)}
</div>
{/* */}
<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="">
<label>
<span className="fw-bold">Payment Mode : </span>
{orderDetails?.paymentMode === "online" ? (
<span className="fw-bold text-success">ONLINE</span>
) : (
<span className="fw-bold text-primary">
CASH ON DELIVERY
</span>
)}
</label>
</div>
<div className="">
<label>
<span className="fw-bold"> Paid At: </span>
{orderDetails?.paidAt
? new Date(orderDetails?.paidAt).toLocaleString(
"en-IN",
{
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
}
)
: "----"}
</label>
</div>
<div className="">
<label>
<span className="fw-bold"> Order Created By: </span>
{orderDetails?.user?.name}
</label>
</div>
<div className="mt-1">
<label>
<span className="fw-bold">
Razorpay Payment ID :{" "}
</span>
{orderDetails?.razorpay_payment_id
? orderDetails?.razorpay_payment_id
: "----"}
</label>
</div>
<div className="">
<label>
<span className="fw-bold">Razorpay Order ID : </span>
{orderDetails?.razorpay_order_id
? orderDetails?.razorpay_order_id
: "----"}
</label>
</div>
</div>
</div>
</div>
</div>
)}
</div>
</div>
</div>
<div style={{ display: "none" }}>
{/* <PrintOrderDetails productData={productData} ref={printOrderRef} /> */}
</div>
</>
);
}
export default POSViewOrders;