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,
  Box
} 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 * as FormatUtils from "utils/FormatUtils";

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";
import {FormattedMessage, useIntl} from "react-intl";

const MultiPaymentWindow = (props) => {
  const intl = useIntl();
  const windowTitle = intl.formatMessage({id: 'selectPaymentMethod'});
  // 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 [fpsClass, setFpsClass] = useState("");
  const [visaClass, setVisaClass] = useState("");
  const [mastercardClass, setMastercardClass] = useState("");
  const [jCBClass, setJCBClass] = useState("");
  const [unionPayClass, setUnionPayClass] = useState("");
  const [pPSClass, setPPSlass] = useState("");
  const [filteredPaymentMethod, setFilteredPaymentMethod] = 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(Object.keys(loadtTransactionData).length > 0){
        setTransactionData(loadtTransactionData)
    }
  }, [loadtTransactionData]);
  
  useEffect(() => {
    if(Object.keys(transactionData).length > 0&&props.availableMethods.length > 0){
      setLoadAvailableMethodData(props.availableMethods)
    }
  }, [transactionData]);

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

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

  useEffect(() => {
    // console.log(paymentMethod)
    // const subtype = (paymentMethod === "Visa" || paymentMethod === "MasterCard" || paymentMethod === "JCB" || paymentMethod === "UnionPay") ? "CreditCard" : paymentMethod; 
    // const filteredPaymentMethod = availableMethodData.filter(obj => obj.subtype === subtype);
    const filteredPaymentMethod = availableMethodData.filter(obj => {
      if (obj.supportedcard && obj.supportedcard.includes(paymentMethod)) {
        return obj.subtype === "CreditCard";
      }
      return obj.subtype === paymentMethod;
    });
    // console.log(filteredPaymentMethod)
    setFilteredPaymentMethod(filteredPaymentMethod);

    setFpsClass(paymentMethod == "FPS" || paymentMethod == "" ? "" : "grayscale")
    setVisaClass(paymentMethod == "Visa" || paymentMethod == "" ? "" : "grayscale")
    setMastercardClass(paymentMethod == "MasterCard" || paymentMethod == "" ? "" : "grayscale")
    setJCBClass(paymentMethod == "JCB" || paymentMethod == "" ? "" : "grayscale")
    setUnionPayClass(paymentMethod == "UnionPay" || paymentMethod == "" ? "" : "grayscale")
    setPPSlass(paymentMethod == "PPS" || paymentMethod == "" ? "" : "grayscale")
    // getMethodImgClass(paymentMethod)
  }, [paymentMethod]);

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

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

  useEffect(() => {
    if(props.selectedPaymentMethod === ""){
      setPaymentMethod("")
    }
  }, [availableMethodData]);

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

  return (
    <Dialog
      open={props.open}
      onClose={() => props.setOpen(false)}
      fullWidth={true}
      maxWidth={'xl'}
    >
      <DialogTitle >
        <Grid container>
          <Grid item>
            <Stack direction="row" justifyContent="flex-start" alignItems="center">
              <Typography variant="h4">
                {windowTitle}              
              </Typography>
            </Stack>
          </Grid>
        </Grid>
      </DialogTitle>
      <FormikProvider value={formik}>
        <form>
          <DialogContent>
            <DialogContentText>
              <Grid item xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%' }} width="100%">
                <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
                  <Grid container justifyContent="flex-start" alignItems="left" >
                    <center>
                        <Grid item xs={12} md={12} width="100%">
                              <Typography variant="h5" sx={{ textAlign: "left" }}>
                                <FormattedMessage id="transactionRefNo"/>: {transactionData.transactionid}
                              </Typography>

                              {/* <Typography variant="h5" sx={{ textAlign: "left" }}>
                                  支付金額: HK$ {FormatUtils.currencyFormat(props.totalAmount)}
                              </Typography> */}
                              {!props.onReady ?
                                  <LoadingComponent />
                                  :availableMethodData.length>0?
                                    <Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
                                      <Grid item xs={12} md={12}>
                                        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
                                          <Grid item>
                                              <Typography variant="h5" sx={{ textAlign: "left" }}>
                                                <FormattedMessage id="selectPaymentMethod"/>:
                                              </Typography>
                                          </Grid>
                                          <Grid item>
                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
                                                  <img className={fpsClass} 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 className={visaClass} 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 className={mastercardClass} 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 className={unionPayClass} 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 className={jCBClass} 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 className={pPSClass} 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: "20px", color: "#000000", textAlign: "center" }}>
                                                <FormattedMessage id="selectedPaymentMethod"/>:&nbsp;
                                              </FormLabel>
                                            </Grid>
                                            <Grid item>
                                              <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
                                                {paymentMethod}
                                              </FormLabel>
                                            </Grid>
                                          </Grid>
                                        </Grid>
                                      : null}
                                    </Grid>:
                                    <Grid container direction="row" justifyContent="center" alignItems="center">
                                      <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center"}}>
                                        <FormattedMessage id="paymentMethodNotAvailable"/>。
                                      </FormLabel>
                                    </Grid>
                              }
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item>
                                    <Typography variant="pnspsFormParagraphBold" sx={{ color: "#000000", textAlign: "left" }}>
                                      <FormattedMessage id="payTotal"/>(HK$):&nbsp;
                                    </Typography>
                                </Grid>
                                <Grid item>
                                    <Typography variant="pnspsFormParagraphBold" sx={{color: "#000000", textAlign: "left" }}>
                                        {" HK$ " + FormatUtils.currencyFormat(props.totalAmount)}
                                    </Typography>
                                </Grid>
                            </Grid>
                            {paymentMethod !=""?
                              filteredPaymentMethod.map((availableMethod) => {
                                return (
                                  <Grid container key={availableMethod.subtype} className={"css-1tx0bae"} sx={{ mt: 1, p:2 }}>
                                    {availableMethod.pointstonote.map((pointstonote) => {
                                      return (
                                        <Grid container key={pointstonote.order} sx={{ p:0.5 }} direction="row" justifyContent="flex-start" alignItems="center">
                                          <Grid item>
                                            <Typography sx={{fontSize: "16px", color: "#000000", textAlign: "left" }}>
                                             {pointstonote.content}
                                            </Typography> 
                                          </Grid>
                                        </Grid>
                                      );
                                    })}
                                  </Grid>
                                );
                              }) 
                            : null}
                        </Grid>
                    </center>
                  </Grid>
                </Box>
              </Grid>
            </DialogContentText>
          </DialogContent>
        </form>
      </FormikProvider>
      <Stack direction="row" justifyContent="space-around">
        <DialogActions>
          <Button variant="contained" onClick={() => props.setOpen(false)} autoFocus >
            <FormattedMessage id="cancel"/>
          </Button>
        </DialogActions>
        <DialogActions>
          <Button variant="contained" color="success" onClick={confirmPaymentHandle()} disabled={paymentMethod === ""}>
            <FormattedMessage id="confirm"/>
          </Button>
        </DialogActions>
      </Stack>
    </Dialog>
  );
};

export default MultiPaymentWindow;