Commit 49cb2cf8 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

show sending price on confirm order

parent 741f2d08
...@@ -7,6 +7,7 @@ import DialogContent from "@mui/material/DialogContent"; ...@@ -7,6 +7,7 @@ import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle"; import DialogTitle from "@mui/material/DialogTitle";
import { import {
Alert, Alert,
Box,
FormControl, FormControl,
InputLabel, InputLabel,
MenuItem, MenuItem,
...@@ -19,7 +20,7 @@ import { CartContext, OrderContext, UserContext } from "@/pages/_app"; ...@@ -19,7 +20,7 @@ import { CartContext, OrderContext, UserContext } from "@/pages/_app";
export default function ConfirmOrder({ open, handleClose }) { export default function ConfirmOrder({ open, handleClose }) {
const user = useContext(UserContext); const user = useContext(UserContext);
const cart = useContext(CartContext); const cart = useContext(CartContext);
const order = useContext(OrderContext) const order = useContext(OrderContext);
const [message, setMessage] = useState({ message: "", error: false }); const [message, setMessage] = useState({ message: "", error: false });
const [address, setAddress] = useState(user.value?.address ?? ""); const [address, setAddress] = useState(user.value?.address ?? "");
...@@ -97,8 +98,11 @@ export default function ConfirmOrder({ open, handleClose }) { ...@@ -97,8 +98,11 @@ export default function ConfirmOrder({ open, handleClose }) {
["ธรรมดา", 40], ["ธรรมดา", 40],
["ช้า", 20], ["ช้า", 20],
].map((ls, idx) => ( ].map((ls, idx) => (
<MenuItem key={idx} selected={ls[1] === 40} value={ls[1]}> <MenuItem sx={{display: "flex", justifyContent: "space-between"}} key={idx} selected={ls[1] === 40} value={ls[1]}>
{ls[0]} {ls[0]}
<Box sx={{ml: 3}} component={"span"} color={"orangered"}>
${ls[1]}
</Box>
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
......
...@@ -27,6 +27,7 @@ export default function Cart() { ...@@ -27,6 +27,7 @@ export default function Cart() {
const [orderState, setOrderState] = useState(false); const [orderState, setOrderState] = useState(false);
const router = useRouter(); const router = useRouter();
const [CartProduct, setCartProduct] = useState([]); const [CartProduct, setCartProduct] = useState([]);
const [totalProduct, setTotalProduct] = useState(0);
const removeFromCart = async (id) => { const removeFromCart = async (id) => {
let response = await axios.delete(`/api/u/cart?id=${id}`, { let response = await axios.delete(`/api/u/cart?id=${id}`, {
...@@ -64,6 +65,15 @@ export default function Cart() { ...@@ -64,6 +65,15 @@ export default function Cart() {
); );
}, [cart, products]); }, [cart, products]);
useEffect(() => {
let total = 0;
CartProduct.map((pdt) => {
if (!pdt) return;
total += pdt.price - pdt.price * (pdt.discount / 100);
});
setTotalProduct(Math.floor(total));
}, [CartProduct]);
return ( return (
<> <>
<Head> <Head>
...@@ -75,7 +85,7 @@ export default function Cart() { ...@@ -75,7 +85,7 @@ export default function Cart() {
isError={message.error} isError={message.error}
message={message.message} message={message.message}
/> />
<Paper className="shadow-none" sx={{ p: 2, overflowX: "scroll" }}> <Paper className="shadow-none" sx={{ p: 2, overflowX: "scroll", maxWidth: 1200, mx: "auto" }}>
{cart.value.length > 0 ? ( {cart.value.length > 0 ? (
<Box> <Box>
<Table> <Table>
...@@ -136,6 +146,13 @@ export default function Cart() { ...@@ -136,6 +146,13 @@ export default function Cart() {
</TableBody> </TableBody>
</Table> </Table>
<Box sx={{ textAlign: "right", p: 1 }}> <Box sx={{ textAlign: "right", p: 1 }}>
<Box sx={{ p: 1 }}>
ทั้งหมด
<Box component={"span"} color={"orangered"}>
{" "}
${totalProduct.toLocaleString()}
</Box>
</Box>
<Button size="large" onClick={() => setOrderState(true)}> <Button size="large" onClick={() => setOrderState(true)}>
<ShoppingBag /> สั่งซื้อ <ShoppingBag /> สั่งซื้อ
</Button> </Button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment