button add

src/pages/Proof/Payment/Pay.js

@@ -4,6 +4,7 @@ import {
     Typography,
     Stack,
     Button,
+    Dialog, DialogTitle, DialogContent, DialogActions
 } from '@mui/material';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
@@ -11,6 +12,7 @@ import * as HttpUtils from "utils/HttpUtils";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils"
+import * as FormatUtils from "utils/FormatUtils";
 
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
@@ -26,14 +28,20 @@ const BackgroundHead = {
     backgroundPosition: 'right'
 }
 
+import {
+    // useEffect,
+    useState
+} from "react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
     const params = useParams();
     const navigate = useNavigate()
+    const [fee, setFee] = useState(0);
 
     const [record, setRecord] = React.useState();
     const [onReady, setOnReady] = React.useState(false);
+    const [isPopUp, setIsPopUp] = useState(false);
 
     React.useEffect(() => {
         loadForm();
@@ -53,11 +61,17 @@ const Index = () => {
                         navigate("/proof/search");
                     }
                     setRecord(responseData.data);
+                    setFee(responseData.data.fee);
                 }
             });
         }
     }
 
+    function doPayment() {
+        setIsPopUp(false);
+        navigate('/paymentPage', { state: { amount: fee, appIdList: [record.id] } });
+    }
+
     return (
         !onReady ?
             <LoadingComponent />
@@ -95,6 +109,7 @@ const Index = () => {
                                             variant="contained"
                                             size="large"
                                             sx={{ m: 4}}
+                                            onClick={() => { setIsPopUp(true) }}
                                         ><Typography variant="h5">即時網上繳費</Typography></Button>
 
                                         或
@@ -113,6 +128,21 @@ const Index = () => {
                             </center>
                         </Grid>
                     </Grid>
+                    <div>
+                        <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
+                            <DialogTitle></DialogTitle>
+                            <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>
+                            <DialogContent style={{ display: 'flex', }}>
+                                <Stack direction="column" justifyContent="space-between">
+                                    <Typography variant="h4">總計金額: {FormatUtils.currencyFormat(fee)}</Typography>
+                                </Stack>
+                            </DialogContent>
+                            <DialogActions>
+                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button>
+                                <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
+                            </DialogActions>
+                        </Dialog>
+                    </div>
                     {/*row 2*/}
                 </Grid >