PNSPS-frontend-MaterialUI/src/pages/Payment/MultiPaymentWindow.js

import {
  useEffect,
  useState
} from "react";
import * as React from "react";

// material-ui
import {
  Button,
  FormLabel,
  Stack,
  Typography,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Grid
} from '@mui/material';
import { useFormik, FormikProvider } from 'formik';
import * as yup from 'yup';
import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

import VisaIcon from "assets/images/icons/visacard.svg";
import MasterIcon from "assets/images/icons/mastercard.svg";
import JcbIcon from "assets/images/icons/jcb.svg";
import UnionPayIcon from "assets/images/icons/unionpay.svg";
import PpsIcon from "assets/images/icons/ppshk.svg";
import FpsIcon from "assets/images/icons/fps.svg";

const MultiPaymentWindow = (props) => {

  const windowTitle = "請選擇付款方式";
  const [content, setContent] = useState();
  const [loadtTransactionData, setLoadtTransactionData] = useState({});
  const [loadAvailableMethodData, setLoadAvailableMethodData] = useState([]);
  const [paymentMethod, setPaymentMethod] = useState("");
  const [transactionData, setTransactionData] = useState({});
  const [availableMethodData, setAvailableMethodData] = useState([]);
  const [onReady, setOnReady] = useState(false);

  useEffect(() => {
    console.log(props.transactionData)
    if(Object.keys(props.transactionData).length > 0){
      setLoadtTransactionData(props.transactionData)
    }
  }, [props.transactionData]);

  useEffect(() => {
    console.log(props.availableMethods)
    if(props.availableMethods.length > 0){
      setLoadAvailableMethodData(props.availableMethods)
    }
  }, [props.availableMethods]);

  useEffect(() => {
    if(loadAvailableMethodData.length > 0){
        setAvailableMethodData(loadAvailableMethodData)
    }
  }, [loadAvailableMethodData]);

  useEffect(() => {
    if(Object.keys(loadtTransactionData).length > 0){
        setTransactionData(loadtTransactionData)
    }
  }, [loadtTransactionData]);

  useEffect(() => {
    if(availableMethodData.length > 0 && Object.keys(transactionData).length > 0){
        setOnReady(true)
    }
  }, [availableMethodData,transactionData]);

  useEffect(() => {
    console.log(paymentMethod)
  }, [paymentMethod]);

  const selectedPaymentMethodHandle = (method) => () =>{
    setPaymentMethod(method)
    props.setSelectedPaymentMethod(method);
  };

  const confirmPaymentHandle = () => () =>{
      props.setConfirmPayment(true);    
  };


  useEffect(() => {
    if(props.selectedPaymentMethod === ""){
      setPaymentMethod("")
    }
    setPaymentMethod
    if(availableMethodData.length > 0){
      setContent(
        <Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
          <Grid item xs={12} md={12}>
            <Grid container >
              <Grid item>
                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                  交易參考編號:
                </FormLabel>
              </Grid>
              <Grid item>
                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                  {transactionData.transicationId}
                </FormLabel>
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12} md={12}>
            <Grid container >
              <Grid item>
                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                  付款金額:
                </FormLabel>
              </Grid>
              <Grid item>
                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                   {"HK$ "+props.totalAmount}
                </FormLabel>
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12} md={12}>
            <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
              <Grid item>
                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                  付款方式:
                </FormLabel>
              </Grid>
              <Grid item>
                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
                <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
                </Button>
              </Grid>
              <Grid item>
                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
                <img src={VisaIcon} width="80" height="80" alt="Visa"></img>
                </Button>
              </Grid>
              <Grid item>
                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
                <img src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
                </Button>
              </Grid>
              <Grid item>
                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
                <img src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
                </Button>
              </Grid>
              <Grid item>
                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}>
                <img src={JcbIcon} width="80" height="80" alt="JCB"></img>
                </Button>
              </Grid>
              <Grid item>
                <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
                <img src={PpsIcon} width="80" height="80" alt="PPS"></img>
                </Button>
              </Grid>
            </Grid>
          </Grid>
          {paymentMethod !=""?
            <Grid item xs={12} md={12}>
              <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                  <Grid item>
                    <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                      已選擇付款方式:
                    </FormLabel>
                  </Grid>
                  <Grid item>
                    <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                      {paymentMethod}
                    </FormLabel>
                  </Grid>
                </Grid>
              </Grid>
          : null}
        </Grid>
      )
    }else{
      setContent(
        <Grid container direction="row" justifyContent="center" alignItems="center">
            <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
            付款功能現在不可用。
            </FormLabel>
        </Grid>
      )
    }
  }, [availableMethodData]);

  const formik = useFormik({
    initialValues: ({
      username: '',
    }),
    validationSchema: yup.object().shape({
    }),
  });

  return (
    <Dialog
      open={props.open}
      onClose={props.handleClose}
      fullWidth={true}
      maxWidth={'xl'}
    >
      <DialogTitle >
        <Grid container>
          <Grid item>
            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
              <Typography variant="h4">
                {windowTitle}              
              </Typography>
            </Stack>
          </Grid>
        </Grid>
      </DialogTitle>
      <FormikProvider value={formik}>
        <form>
          <DialogContent>
            <DialogContentText>
              {!onReady ?
              <LoadingComponent />
              :content
              }
            </DialogContentText>
          </DialogContent>
        </form>
      </FormikProvider>
      <Stack direction="row" justifyContent="space-around">
        <DialogActions>
          <Button variant="contained" onClick={props.handleClose} autoFocus >
            取消
          </Button>
        </DialogActions>
        <DialogActions>
          <Button variant="contained" color="success" onClick={confirmPaymentHandle()} disabled={paymentMethod === ""}>
            確認
          </Button>
        </DialogActions>
      </Stack>
    </Dialog>
  );
};

export default MultiPaymentWindow;