alex
/
PNSPS-frontend-MaterialUI
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
792 커밋
5 브랜치
19 MiB
 
 
트리: b0571125f4
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from 'b0571125f4'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/Payment/MultiPaymentWindow.js

473 lines
21 KiB
Raw Blame 히스토리 

  1. import {

  2.   useEffect,

  3.   useState

  4. } from "react";

  5. import * as React from "react";

  6. import {getBowserType} from "auth/utils";

  7. 

  8. // material-ui

  9. import {

  10.   Button,

  11.   FormLabel,

  12.   Stack,

  13.   Typography,

  14.   Dialog,

  15.   DialogActions,

  16.   DialogContent,

  17.   DialogContentText,

  18.   DialogTitle,

  19.   Grid,

  20.   Box

  21. } from '@mui/material';

  22. import { useFormik, FormikProvider } from 'formik';

  23. import * as yup from 'yup';

  24. import Loadable from 'components/Loadable';

  25. const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

  26. import * as FormatUtils from "utils/FormatUtils";

  27. 

  28. import VisaIcon from "assets/images/icons/visacard.svg";

  29. import MasterIcon from "assets/images/icons/mastercard.svg";

  30. import JcbIcon from "assets/images/icons/jcb.svg";

  31. import UnionPayIcon from "assets/images/icons/unionpay.svg";

  32. import PpsIcon from "assets/images/icons/ppshk.svg";

  33. import FpsIcon from "assets/images/icons/fps.svg";

  34. import {FormattedMessage, useIntl} from "react-intl";

  35. import * as HttpUtils from "utils/HttpUtils"

  36. import * as UrlUtils from "utils/ApiPathConst"

  37. 

  38. const MultiPaymentWindow = (props) => {

  39.   const intl = useIntl();

  40.   const windowTitle = intl.formatMessage({id: 'selectPaymentMethod'});

  41.   // const [content, setContent] = useState();

  42.   const [loadtTransactionData, setLoadtTransactionData] = useState({});

  43.   const [loadAvailableMethodData, setLoadAvailableMethodData] = useState([]);

  44.   const [paymentMethod, setPaymentMethod] = useState("");

  45.   const [isLimit, setIsLimit] = useState(false);

  46.   const [isPPSLimit, setIsPPSLimit] = useState(false);

  47.   const [transactionData, setTransactionData] = useState({});

  48.   const [availableMethodData, setAvailableMethodData] = useState([]);

  49.   const [fpsClass, setFpsClass] = useState("");

  50.   const [visaClass, setVisaClass] = useState("");

  51.   const [mastercardClass, setMastercardClass] = useState("");

  52.   const [jCBClass, setJCBClass] = useState("");

  53.   const [unionPayClass, setUnionPayClass] = useState("");

  54.   const [pPSClass, setPPSlass] = useState("");

  55.   const [filteredPaymentMethod, setFilteredPaymentMethod] = useState([]);

  56.   const [onReady, setOnReady] = useState(false);

  57.   

  58.   const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");

  59.   const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);

  60.   

  61.   useEffect(() => {

  62.     // console.log(props.transactionData)

  63.     if(Object.keys(props.transactionData).length > 0){

  64.       setLoadtTransactionData(props.transactionData)

  65.     }

  66.   }, [props.transactionData]);

  67. 

  68.   useEffect(() => {

  69.     // console.log(props.availableMethods)

  70.     if(props.availableMethods.length > 0){

  71.       setLoadAvailableMethodData(props.availableMethods)

  72.     }

  73.   }, [props.availableMethods]);

  74. 

  75.   useEffect(() => {

  76.     if(Object.keys(loadtTransactionData).length > 0){

  77.         setTransactionData(loadtTransactionData)

  78.     }

  79.   }, [loadtTransactionData]);

  80.   

  81.   useEffect(() => {

  82.     if(Object.keys(transactionData).length > 0&&props.availableMethods.length > 0){

  83.       setLoadAvailableMethodData(props.availableMethods)

  84.     }

  85.   }, [transactionData]);

  86. 

  87.   useEffect(() => {

  88.     if(loadAvailableMethodData.length > 0){

  89.         setAvailableMethodData(loadAvailableMethodData)

  90.     }

  91.   }, [loadAvailableMethodData]);

  92. 

  93.   useEffect(() => {

  94.     if(filteredPaymentMethod!= undefined && filteredPaymentMethod.length>0){

  95.         setOnReady(true)

  96.     } else if(filteredPaymentMethod!= undefined && Object.keys(filteredPaymentMethod).length > 0){

  97.         setOnReady(true)

  98.     }

  99. 

  100.   }, [filteredPaymentMethod]);

  101. 

  102.   useEffect(() => {

  103.     const availableMethod = availableMethodData;

  104. 

  105.     if(props.availableMethods.length > 0){

  106.       const filteringPaymentMethod = availableMethod.filter(obj => {

  107.         if (obj.supportedcard && obj.supportedcard.includes(paymentMethod)) {

  108.           return obj.subtype === "CreditCard";

  109.         }

  110.         return obj.subtype === paymentMethod;

  111.       });

  112. 

  113.       if (isLimit && filteringPaymentMethod!= undefined && filteringPaymentMethod.length>0){

  114.         if (paymentMethod == "FPS" || paymentMethod == "PPS"){

  115.           filteringPaymentMethod[0].pointstonote = paymentMethod + intl.formatMessage({id: 'paymentLimitPrice1'})

  116.           setFilteredPaymentMethod(filteringPaymentMethod[0]);

  117.         } else if (isLimit) {

  118.           filteringPaymentMethod[0].pointstonote = paymentMethod + intl.formatMessage({id: 'paymentLimitPrice2'})

  119.           setFilteredPaymentMethod(filteringPaymentMethod[0]);

  120.         }

  121.       }

  122.       

  123.       if (!isLimit && filteringPaymentMethod!= undefined && filteringPaymentMethod.length>0){

  124.         setFilteredPaymentMethod(filteringPaymentMethod);

  125.       }

  126.       

  127.       if(isPPSLimit && filteringPaymentMethod!= undefined && filteringPaymentMethod.length>0 && paymentMethod =="PPS"){

  128.         filteringPaymentMethod[0].pointstonote = paymentMethod + intl.formatMessage({id: 'paymentLimitPPS'})

  129.         setFilteredPaymentMethod(filteringPaymentMethod[0]);

  130.       }

  131.   

  132.       setFpsClass(paymentMethod == "FPS" || paymentMethod == "" ? "" : "grayscale")

  133.       setVisaClass(paymentMethod == "Visa" || paymentMethod == "" ? "" : "grayscale")

  134.       setMastercardClass(paymentMethod == "MasterCard" || paymentMethod == "" ? "" : "grayscale")

  135.       setJCBClass(paymentMethod == "JCB" || paymentMethod == "" ? "" : "grayscale")

  136.       setUnionPayClass(paymentMethod == "UnionPay" || paymentMethod == "" ? "" : "grayscale")

  137.       setPPSlass(paymentMethod == "PPS" || paymentMethod == "" ? "" : "grayscale")

  138. 

  139.     }

  140. 

  141.   }, [paymentMethod]);

  142.   

  143.   const selectedPaymentMethodHandle = (method) => () =>{

  144.     if (method != paymentMethod){

  145.       resetForm()

  146.       let totalAmount = props.totalAmount;

  147.       // totalAmount = 99999999.99

  148.       // totalAmount = 0.01

  149.       const paymentLimitList = props.paymentLimit

  150.       let limitRecordList;

  151.   

  152.       switch (method) { 

  153.         case "Visa":

  154.         case "JCB":

  155.         case "MasterCard":

  156.           limitRecordList = paymentLimitList.creditCardLimitRecord;

  157.           break;

  158.         case "FPS":

  159.           limitRecordList = paymentLimitList.fpsLimitRecord;

  160.           break;

  161.         case "PPS":

  162.           limitRecordList = paymentLimitList.ppsbLimitRecord;

  163.           break;

  164.         case "UnionPay":

  165.           limitRecordList = paymentLimitList.unionPlayLimitRecord;

  166.           break;

  167.         default:

  168.           break;

  169.       }

  170.   

  171.       if (totalAmount >= limitRecordList.minLimit && totalAmount <= limitRecordList.maxLimit) {

  172.         setIsLimit(false)

  173.       } else {

  174.         setIsLimit(true)

  175.       }

  176.       if (getBowserType() === "PC_Browser"){

  177.         setPaymentMethod(method)

  178.         props.setSelectedPaymentMethod(method);

  179.         setIsPPSLimit(false)

  180.       } else if (getBowserType() !== "PC_Browser" && method !== "PPS"){

  181.         setPaymentMethod(method)

  182.         props.setSelectedPaymentMethod(method);

  183.       } else {

  184.         setPaymentMethod(method)

  185.         setIsPPSLimit(true)

  186.       }

  187. 

  188.     }

  189. 

  190.   };

  191. 

  192.   const confirmPaymentHandle = () => () =>{

  193.       handlePaymentCheck()

  194.   };

  195. 

  196.   const handlePaymentCheck = () => {

  197.     let appIdList = props.appIds

  198.     // console.log(props.appIds)

  199.     // console.log(appIdList)

  200.     HttpUtils.post({

  201.         url: UrlUtils.PAYMENT_CHECK,

  202.         params: {

  203.             appIds: appIdList

  204.         },

  205.         onSuccess: (responseData) => {

  206.             const latestData = {};

  207. 

  208.             responseData.forEach(item => {

  209.             const { appId, timeDiff } = item;

  210.             if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {

  211.                 latestData[appId] = item;

  212.             }

  213.             });

  214.             const latestDataObjects = Object.values(latestData);

  215.             

  216.             const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 && item.status !== "APPR");

  217.             const filteredAppIds = filteredData.map(item => item.appId);

  218.             

  219.             const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));

  220.             const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];

  221.             

  222.             const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));

  223.             if (readyToPayment){

  224.                 // props.setConfirmPayment(true);

  225.                 return;

  226.             }else{

  227.                 const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));

  228.                 const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));

  229.                 const resultString = HoldingApplication.map(item => item.appNo).join(' , ');

  230.                 setPaymentHoldedErrText(resultString);

  231.                 // setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));

  232.                 setPaymentHoldedErr(true);

  233.             }

  234.         }

  235.     });

  236.   };

  237. 

  238.   const closeHandle = () => () =>{

  239.     resetForm()

  240.     props.setOpen(false)

  241.   };

  242. 

  243.   const resetForm = () =>{

  244.     setOnReady(false)

  245.     setPaymentMethod("")

  246.     setFilteredPaymentMethod([])

  247.     setIsLimit(false)

  248.     setIsPPSLimit(false)

  249.   };

  250. 

  251. 

  252.   useEffect(() => {

  253.     if(props.selectedPaymentMethod === ""){

  254.       setPaymentMethod("")

  255.     }

  256.   }, [availableMethodData]);

  257. 

  258.   const formik = useFormik({

  259.     initialValues: ({

  260.       username: '',

  261.     }),

  262.     validationSchema: yup.object().shape({

  263.     }),

  264.   });

  265. 

  266.   return (

  267.     <Dialog

  268.       open={props.open}

  269.       onClose={() => props.setOpen(false)}

  270.       fullWidth={true}

  271.       maxWidth={'xl'}

  272.       fullScreen={props.isFullScreen}

  273.     >

  274.       <DialogTitle >

  275.         <Grid container>

  276.           <Grid item>

  277.             <Stack direction="row" justifyContent="flex-start" alignItems="center">

  278.               <Typography variant="h4">

  279.                 {windowTitle}              

  280.               </Typography>

  281.             </Stack>

  282.           </Grid>

  283.         </Grid>

  284.       </DialogTitle>

  285.       <FormikProvider value={formik}>

  286.         <form>

  287.           <DialogContent>

  288.             <DialogContentText>

  289.               <Grid item xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%' }} width="100%">

  290.                 <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >

  291.                   <Grid container justifyContent="flex-start" alignItems="left" >

  292.                     <center>

  293.                         <Grid item xs={12} md={12} width="100%">

  294.                               <Typography variant="h5" sx={{ textAlign: "left" }}>

  295.                                 <FormattedMessage id="transactionRefNo"/>: {transactionData.transactionid}

  296.                               </Typography>

  297. 

  298.                               {/* <Typography variant="h5" sx={{ textAlign: "left" }}>

  299.                                   支付金額: HK$ {FormatUtils.currencyFormat(props.totalAmount)}

  300.                               </Typography> */}

  301.                               {!props.onReady ?

  302.                                   <LoadingComponent />

  303.                                   :availableMethodData.length>0?

  304.                                     <Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">

  305.                                       <Grid item xs={12} md={12}>

  306.                                         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">

  307.                                           <Grid item>

  308.                                               <Typography variant="h5" sx={{ textAlign: "left" }}>

  309.                                                 <FormattedMessage id="selectPaymentMethod"/>:

  310.                                               </Typography>

  311.                                           </Grid>

  312.                                           <Grid item sx={{display: { sm: 'block', md: 'none' }}}></Grid>

  313.                                           <Grid item>

  314.                                               <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>

  315.                                                   <img className={fpsClass} src={FpsIcon} width="80" height="80" alt="FPS"></img>

  316.                                               </Button>

  317.                                           </Grid>

  318.                                           <Grid item>

  319.                                               <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>

  320.                                                   <img className={visaClass} src={VisaIcon} width="80" height="80" alt="Visa"></img>

  321.                                               </Button>

  322.                                           </Grid>

  323.                                           <Grid item>

  324.                                               <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("MasterCard")} disabled={props.creditCardStatus.active === "N"}>

  325.                                                   <img className={mastercardClass} src={MasterIcon} width="80" height="80" alt="MasterCard"></img>

  326.                                               </Button>

  327.                                           </Grid>

  328.                                           <Grid item>

  329.                                               <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>

  330.                                                   <img className={unionPayClass} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>

  331.                                               </Button>

  332.                                           </Grid>

  333.                                           <Grid item>

  334.                                               <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}>

  335.                                                   <img className={jCBClass} src={JcbIcon} width="80" height="80" alt="JCB"></img>

  336.                                               </Button>

  337.                                           </Grid>

  338.                                           <Grid item>

  339.                                               <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>

  340.                                                   <img className={pPSClass} src={PpsIcon} width="80" height="80" alt="PPS"></img>

  341.                                               </Button>

  342.                                           </Grid>

  343.                                         </Grid>

  344.                                       </Grid>

  345.                                       {paymentMethod !=""?

  346.                                         <Grid item xs={12} md={12}>

  347.                                           <Grid container direction="row" justifyContent="flex-start" alignItems="center">

  348.                                             <Grid item>

  349.                                               <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>

  350.                                                 <FormattedMessage id="selectedPaymentMethod"/>:&nbsp;

  351.                                               </FormLabel>

  352.                                             </Grid>

  353.                                             <Grid item>

  354.                                               <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>

  355.                                                 {paymentMethod}

  356.                                               </FormLabel>

  357.                                             </Grid>

  358.                                           </Grid>

  359.                                         </Grid>

  360.                                       : null}

  361.                                     </Grid>:

  362.                                     <Grid container direction="row" justifyContent="center" alignItems="center">

  363.                                       <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center"}}>

  364.                                         <FormattedMessage id="paymentMethodNotAvailable"/>。

  365.                                       </FormLabel>

  366.                                     </Grid>

  367.                               }

  368.                         </Grid>

  369.                         <Grid item xs={12} md={12}>

  370.                             <Grid container >

  371.                                 <Grid item>

  372.                                     <Typography variant="pnspsFormParagraphBold" sx={{ color: "#000000", textAlign: "left" }}>

  373.                                       <FormattedMessage id="payTotal"/>(HK$):&nbsp;

  374.                                     </Typography>

  375.                                 </Grid>

  376.                                 <Grid item>

  377.                                     <Typography variant="pnspsFormParagraphBold" sx={{color: "#000000", textAlign: "left" }}>

  378.                                         {" HK$ " + FormatUtils.currencyFormat(props.totalAmount)}

  379.                                     </Typography>

  380.                                 </Grid>

  381.                             </Grid>

  382.                             {paymentMethod === "" ? 

  383.                               paymentMethod !="" && !onReady ? <LoadingComponent/> : null

  384.                               :

  385.                               !isLimit? 

  386.                                   !onReady? <LoadingComponent/> :

  387.                                     !isLimit? 

  388.                                       filteredPaymentMethod.map((availableMethod) => {

  389.                                         return (

  390.                                             <Grid container key={availableMethod.subtype} className={"css-1tx0bae"} sx={{ mt: 1, p:2 }}>

  391.                                               { 

  392.                                                 availableMethod.pointstonote.map((pointstonote) => {

  393.                                                   return (

  394.                                                     <Grid container key={pointstonote.order} sx={{ p:0.5 }} direction="row" justifyContent="flex-start" alignItems="center">

  395.                                                       <Grid item>

  396.                                                         <Typography sx={{fontSize: "16px", color: "#000000", textAlign: "left" }}>

  397.                                                         {pointstonote.content}

  398.                                                         </Typography> 

  399.                                                       </Grid>

  400.                                                     </Grid>

  401.                                                   );

  402.                                                 })

  403.                                               }

  404.                                             </Grid>

  405.                                         );

  406.                                       })

  407.                                     : null

  408.                                 :  

  409.                                 !onReady? <LoadingComponent/> :

  410.                                   <Grid container className={"css-1tx0bae"} sx={{ mt: 1, p:2 }}>

  411.                                     <Grid container sx={{ p:0.5 }} direction="row" justifyContent="flex-start" alignItems="center">

  412.                                       <Grid item>

  413.                                         <Typography color="error" sx={{fontSize: "16px", textAlign: "left" }}>

  414.                                         {filteredPaymentMethod.pointstonote}

  415.                                         </Typography> 

  416.                                       </Grid>

  417.                                     </Grid>

  418.                                   </Grid>

  419.                             }

  420.                         </Grid>

  421.                     </center>

  422.                   </Grid>

  423.                 </Box>

  424.               </Grid>

  425.             </DialogContentText>

  426.           </DialogContent>

  427.         </form>

  428.       </FormikProvider>

  429.       <Stack direction="row" justifyContent="space-around">

  430.         <DialogActions>

  431.           <Button variant="contained" onClick={closeHandle()} autoFocus >

  432.             <FormattedMessage id="cancel"/>

  433.           </Button>

  434.         </DialogActions>

  435.         <DialogActions>

  436.           <Button variant="contained" color="success" onClick={confirmPaymentHandle()} disabled={paymentMethod === "" || isLimit || isPPSLimit}>

  437.             <FormattedMessage id="pay"/>

  438.           </Button>

  439.         </DialogActions>

  440.       </Stack>

  441.       <div>

  442.           <Dialog

  443.               open={paymentHoldedErr}

  444.               onClose={() => setPaymentHoldedErr(false)}

  445.               PaperProps={{

  446.                   sx: {

  447.                       minWidth: '40vw',

  448.                       maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },

  449.                       maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }

  450.                   }

  451.               }}

  452.           >

  453.               <DialogTitle></DialogTitle>

  454.               <Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>

  455.               <DialogContent style={{ display: 'flex', }}>

  456.                   <Stack direction="column" justifyContent="space-between">

  457.                       <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />

  458.                   </Stack>

  459.               </DialogContent>

  460.               <DialogActions>

  461.                   <Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>

  462.                       <Typography variant="h5">

  463.                           <FormattedMessage id="close" />

  464.                       </Typography></Button>

  465.               </DialogActions>

  466.           </Dialog>

  467.       </div>

  468.     </Dialog>

  469.   );

  470. };

  471. 

  472. export default MultiPaymentWindow;