user can check bill

README.md

@@ -21,7 +21,7 @@ final exam of web programming with ~~PHP~~ **JavaScript** and using ~~Framework~
   - ใส่ข้อมูลการเชื่อมต่อที่ `.env` 
   - migration
     - `npx prisma migrate dev` เพื่อทำการ migrate ฐานข้อมูล
-    - * หาก error อาจจะต้องทำการ upgrade mysql โดย
+    -  *หาก error อาจจะต้องทำการ upgrade mysql โดย
       - รันไฟล์ชื่อ `mysql_upgrade` ที่โฟลเดอร์ `xampp/bin`
   - กำหนดสิทธิ์ admin 
     - หลังจากสมัครสมาชิก เข้าไปยังฐานข้อมูลและเปลี่ยน `rank` ของ user เป็น 1

app/controllers/OrderController.js

@@ -12,7 +12,7 @@ const OrderController = {
       const order = await db.order.findMany({
         where: { user_id: Number(req.user.id) },
       });
-      res.json(order)
+      res.json(order);
     } catch (err) {
       res.json({ status: 100, message: "server found some error" });
     }
@@ -82,6 +82,23 @@ const OrderController = {
       res.json({ status: 200, message: "server error with some error" });
     }
   },
+  /**
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
+  async check(req, res) {
+    try {
+      const { id } = req.query;
+      if (!id) throw 300;
+      await db.order.update({ where: { id: Number(id) }, data: { pay_status: 1 } });
+      res.json({
+        status: 301, message: "check order success"
+      })
+    } catch (err) {
+      res.json({ status: 300, message: "check failed with error" });
+    }
+  },
 };
 
 export default OrderController;

app/routes/user.js

@@ -15,6 +15,7 @@ UserRouter.delete("/cart", CartController.delete);
 
 UserRouter.get("/order", OrderController.index);
 UserRouter.post("/order", OrderController.create);
+UserRouter.put("/order/check", OrderController.check);
 
 UserRouter.get("/order/detail", OrderDetailController.index);
 

src/components/CircleLoading.js

+import * as React from "react";
+import PropTypes from "prop-types";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+
+function CircleLoading(props) {
+  return (
+    <Box sx={{ position: "relative", display: "inline-flex" }}>
+      <CircularProgress variant="determinate" {...props} />
+      <Box
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: "absolute",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Typography variant="caption" component="div" color="text.secondary">
+          {`${Math.round(props.value)}%`}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+export default CircleLoading;

src/components/order/ConfirmPayment.js

+import { useState, useEffect, useContext } from "react";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import {
+  Alert,
+  Box,
+  CircularProgress,
+  Fab,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Snackbar,
+} from "@mui/material";
+import axios from "axios";
+import { CartContext, UserContext } from "@/pages/_app";
+import { CurrencyBitcoin } from "@mui/icons-material";
+import { Payment } from "@mui/icons-material";
+import { AccountBalance } from "@mui/icons-material";
+import { Check } from "@mui/icons-material";
+import CircleLoading from "../CircleLoading";
+
+export default function ConfirmPayment({ open, handleClose, id, price }) {
+  const user = useContext(UserContext);
+  const cart = useContext(CartContext);
+  const [message, setMessage] = useState({ message: "", error: false });
+
+  const [paymentType, setPaymentType] = useState(0);
+  const [loading, setLoading] = useState(-1);
+
+  useEffect(() => {
+    if (-1 < loading && loading < 100) {
+      setTimeout(() => {
+        setLoading(loading + 10);
+      }, 400);
+    } else if (loading > 99) {
+      setTimeout(() => {
+        handleClose();
+      }, 2000);
+    }
+  }, [loading]);
+  /**
+   *
+   * @param {FormDataEvent} e
+   */
+  async function onOrder(e) {
+    e.preventDefault();
+    try {
+      setLoading(0);
+      let response = await axios.put(
+        "/api/u/order/check?id=" + id,
+        {},
+        { headers: { token: user.value.token } }
+      );
+      console.log(response.data);
+    } catch (err) {}
+  }
+
+  return (
+    <>
+      <Snackbar
+        anchorOrigin={{ horizontal: "center", vertical: "top" }}
+        open={!!message.message.length}
+      >
+        <Alert severity={message.error ? "error" : "success"}>
+          {message.message}
+        </Alert>
+      </Snackbar>
+      <Dialog open={open} onClose={handleClose}>
+        <form onSubmit={onOrder}>
+          <DialogTitle>ดำเนินการชำระเงิน</DialogTitle>
+          {loading !== -1 ? (
+            <Box sx={{ textAlign: "center" }}>
+              {loading === 100 ? (
+                <Fab aria-label="save" color="success">
+                  <Check />
+                </Fab>
+              ) : (
+                <CircleLoading value={loading} />
+              )}
+            </Box>
+          ) : (
+            <DialogContent className="text-center">
+              <div>
+                ทั้งหมด{" "}
+                <Box component={"span"} color={"orangered"}>
+                  ${Number(price).toLocaleString()}
+                </Box>
+              </div>
+              <FormControl
+                className="m-1"
+                variant="standard"
+                sx={{ minWidth: 170, p: 2 }}
+              >
+                <InputLabel>ชำระเงินด้วย</InputLabel>
+                <Select
+                  value={paymentType}
+                  onChange={(e) => setPaymentType(e.target.value)}
+                  required
+                >
+                  <MenuItem selected value={0}>
+                    <Box sx={{ display: "flex" }}>
+                      <CurrencyBitcoin /> Bitcoin
+                    </Box>
+                  </MenuItem>
+                  <MenuItem selected value={1}>
+                    <Box sx={{ display: "flex" }}>
+                      <Payment /> บัตรเครดิต/เดบิต
+                    </Box>
+                  </MenuItem>
+                  <MenuItem selected value={2}>
+                    <Box sx={{ display: "flex" }}>
+                      <AccountBalance /> โอนผ่านธนาคาร
+                    </Box>
+                  </MenuItem>
+                </Select>
+              </FormControl>
+            </DialogContent>
+          )}
+          <DialogActions>
+            <Button color="error" onClick={handleClose}>
+              ยกเลิก
+            </Button>
+            <Button type="submit">ชำระเงิน</Button>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </>
+  );
+}

src/pages/order.js

@@ -15,6 +15,7 @@ import axios from "axios";
 import PopupAlert from "@/components/PopupAlert";
 import Head from "next/head";
 import Link from "next/link";
+import ConfirmPayment from "@/components/order/ConfirmPayment";
 
 export default function Order() {
   const user = useContext(UserContext);
@@ -23,6 +24,7 @@ export default function Order() {
   const [message, setMessage] = useState({ error: false, message: "" });
   const [orderList, setOrderList] = useState([]);
   const [CartProduct, setCartProduct] = useState([]);
+  const [payment, setPayment] = useState({ open: false, id: -1, price: -1 });
 
   const fetchOrder = async () => {
     if (!user.value?.token) return;
@@ -46,7 +48,7 @@ export default function Order() {
 
   useEffect(() => {
     fetchOrder();
-  }, [user]);
+  }, [user, payment]);
 
   useEffect(() => {
     setCartProduct(
@@ -61,6 +63,14 @@ export default function Order() {
       <Head>
         <title>คำสั่งซื้อ | OpenShop</title>
       </Head>
+      {payment.open && (
+        <ConfirmPayment
+          open={payment.open}
+          handleClose={() => setPayment({ open: false, id: -1 })}
+          id={payment.id}
+          price={payment.price}
+        />
+      )}
       <Box>
         <PopupAlert
           open={!!message.message.length}
@@ -106,9 +116,21 @@ export default function Order() {
                           <TableCell>{order.shipping_price}</TableCell>
                           <TableCell>
                             <Box color={order.pay_status ? "green" : "red"}>
-                              {order.pay_status
-                                ? "ชำระเงินแล้ว"
-                                : "ยังไม่ชำระเงิน"}
+                              {order.pay_status ? (
+                                "ชำระเงินแล้ว"
+                              ) : (
+                                <Button
+                                  onClick={() =>
+                                    setPayment({
+                                      open: true,
+                                      id: order.id,
+                                      price: order.total_price,
+                                    })
+                                  }
+                                >
+                                  ดำเนินการชำระเงิน
+                                </Button>
+                              )}
                             </Box>
                           </TableCell>
                           <TableCell>