alex
/
PNSPS-frontend-MaterialUI
2
0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
1612 Commits
3 Branches
16 MiB
 
 
Tag: a00b9f4cc5
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de a00b9f4cc5
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/Payment/FPS/FPS.js

546 linhas
28 KiB
Original Anotar Histórico 

  1. // material-ui

  2. import {

  3.     Grid,

  4.     Typography,

  5.     Stack,

  6.     Button,

  7.     Box,

  8. } from '@mui/material';

  9. import * as React from "react";

  10. import * as HttpUtils from "utils/HttpUtils";

  11. import * as UrlUtils from "utils/ApiPathConst";

  12. import { useNavigate } from "react-router-dom";

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

  14. import expiredQrcodeEN from "assets/images/icons/expiredQrcodeEN.png";

  15. import expiredQrcodeZH from "assets/images/icons/expiredQrcodeZH.png";

  16. import expiredQrcodeCN from "assets/images/icons/expiredQrcodeCN.png";

  17. import { useLocation } from 'react-router-dom';

  18. // import {paymentPath} from "auth/utils";

  19. import {currencyFormat} from "utils/FormatUtils";

  20. // import {poll} from "utils/Utils";

  21. 

  22. import Loadable from 'components/Loadable';

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

  24. 

  25. import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

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

  27. import { PRIMARY_CONTAINED_BUTTON_SX, ERROR_CONTAINED_BUTTON_SX } from "themes/colorConst";

  28. const BackgroundHead = {

  29.     backgroundImage: `url(${titleBackgroundImg})`,

  30.     width: '100%',

  31.     height: '100%',

  32.     backgroundSize: 'contain',

  33.     backgroundRepeat: 'no-repeat',

  34.     backgroundColor: '#0C489E',

  35.     backgroundPosition: 'right'

  36. }

  37. 

  38. 

  39. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  40. 

  41. const Index = () => {

  42.     const navigate = useNavigate()

  43.     const location = useLocation();

  44.     const intl = useIntl();

  45.     const { locale } = intl;

  46. 

  47.     const [locationData, setLocationData] = React.useState({});

  48.     const [paymentData, setPaymentData] = React.useState({});

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

  50.     const [qrCodeTimeout, setqrCodeTimeout] = React.useState(false);

  51.     const [paymentStatusCode, setPaymentStatusCode] = React.useState("");

  52.     const [expiredQrcode, setExpiredQrcode] = React.useState(expiredQrcodeEN);

  53.     

  54.     const [responeData, setResponeDataData] = React.useState({});

  55.     const [fpsTransctionData, setFpsTransctionData] = React.useState({});

  56.     const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");

  57.     const [timeDownCount, setTimeDownCount] = React.useState(0);

  58.     const [paymentId, setPaymentId] = React.useState("");

  59.     const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");

  60.     const [fpsqrcodeurlPrd, setFpsqrcodeurlPrd] = React.useState("");

  61.     const [fpsqrcodeurlFps, setFpsqrcodeurlFps] = React.useState("");

  62.     const [browserType, setBrowserType] = React.useState("");

  63.     const [sysEnv, setSysEnv] = React.useState("");

  64.     const [isError, setIsError] = React.useState(false);

  65.     const mobileBrowser = "Mobile";

  66.     const desktopBrowser = "Desktop";

  67.     

  68.     const pasgPathPrd = 'https://fps.payapps.hkicl.com.hk'; //PRD

  69.     const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing

  70.     // const loadPaymentUrl = "/api/payment/wallet/fps";

  71.     // const cancelPaymentUrl = "/api/payment/cancelpayment";

  72.     // const paymentStatusApi = "/api/payment/status/";

  73.     // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";

  74.     // const receiverUrl = "/noti-api/payment/payment-notification";

  75.     

  76.     //timer

  77.     const currentTimer = React.useRef();

  78.     const [time, setTime] = React.useState(0);

  79. 

  80.     React.useEffect(() => {

  81.         // console.log (location.state)

  82.         if(Object.keys(location.state).length > 0){

  83.             // console.log (location.state)

  84.             setLocationData(location.state)

  85.             setBrowserType(desktopBrowser)

  86. 

  87.             if (/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) {

  88.                 // console.log('Mobile web browser');

  89.                 setBrowserType(mobileBrowser)

  90.                 // setFpsqrcodeurl(openPASGUrl)

  91.             } else {

  92.                 // console.log('Desktop web browser');

  93.                 setBrowserType(desktopBrowser)

  94.             }

  95.         }

  96.     }, []);

  97. 

  98.     React.useEffect(() => {

  99.         // console.log (locationData)

  100.         if (Object.keys(locationData).length > 0){

  101.             setPaymentData(locationData)

  102.             // loadForm();

  103.         }

  104.     }, [locationData]);

  105. 

  106.     React.useEffect(() => {

  107.         // console.log (locationData)

  108.         if (locale === 'zh-HK'){

  109.             setExpiredQrcode(expiredQrcodeZH)

  110.         } else if (locale === 'en'){

  111.             setExpiredQrcode(expiredQrcodeEN)

  112.         } else {

  113.             setExpiredQrcode(expiredQrcodeCN)

  114.         }

  115.     }, [locale]);

  116. 

  117.     React.useEffect(() => {

  118.         // console.log (paymentData)

  119.         if (Object.keys(paymentData).length > 0){

  120.             loadForm();

  121.         }

  122.     }, [paymentData]);

  123. 

  124.     React.useEffect(() => {

  125.         // console.log(responeData)

  126.         if(Object.keys(responeData).length > 0 && fpsmerchanttimeoutdatetime!=""){

  127.             setFpsTransctionData(responeData)

  128.         }

  129.     }, [responeData]);

  130. 

  131.     React.useEffect(() => {

  132.         // console.log(fpsTransctionData)

  133.         if(Object.keys(fpsTransctionData).length > 0 ){

  134.             setPaymentId(fpsTransctionData.paymentid)

  135.             currentTimer.current = setInterval(() => {

  136.                 setTime((prevTime) => prevTime + 1);

  137.             }, 1000);

  138.             setOnReady(true);

  139.             return () => clearInterval(currentTimer.current);

  140.         }

  141.     }, [fpsTransctionData]);

  142. 

  143. 

  144.     const loadForm = () => {

  145.         const webtoken = paymentData.webtoken;

  146.         const transactionid = paymentData.transactionid;

  147.         console.log(webtoken)

  148.         console.log(transactionid)

  149.         localStorage.removeItem("transactionid")

  150.         localStorage.removeItem("webtoken")

  151.         localStorage.setItem("transactionid", transactionid)

  152.         localStorage.setItem("webtoken", webtoken)

  153. 

  154.         HttpUtils.post({

  155.             url: UrlUtils.LOAD_PAYMENT_FPS_URL,

  156.             params:{

  157.                 "transactionid": transactionid,

  158.                 "webtoken": webtoken,

  159.                 "paymentmethod":"04,BCFP,FPS",

  160.                 "order": { 

  161.                     "totalamount":paymentData.amount,

  162.                     "currency":"HKD",

  163.                     "orderdetail": 

  164.                     [ 

  165.                         { 

  166.                             "itemid": "1",

  167.                             "qty":"1",

  168.                             "unitprice":paymentData.amount,

  169.                             "amount":paymentData.amount

  170.                         },

  171.                     ]

  172.                 },

  173.                 // "locale":"<locale>",

  174.                 // "eserviceid":"<eserviceid>"

  175.             },

  176.             onSuccess: function(responseData){

  177.                 try {

  178.                     /*

  179.                         {

  180.                             "paymentid": "<paymentid>",

  181.                             "paymentstatus": "<paymentstatus>",

  182.                             "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,

  183.                             "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",

  184.                             "fpsqrcodeurl": "<fpsqrcodeurl>"

  185.                         }

  186.                     */

  187.                    if (!responseData || !responseData.fpsqrcodeurl) {

  188.                        throw new Error("Missing expected response data");

  189.                    }

  190.                    setResponeDataData(responseData)

  191.                    const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime

  192.                    setSysEnv(responseData.sysEnv)

  193.                    const searchString = "[UTC]";

  194.                    let convertedDateString = "";

  195.                    if ( timeoutdatetime.toString().includes(searchString) ){

  196.                         convertedDateString = timeoutdatetime.replace("[UTC]", "");

  197.                     } else {

  198.                         convertedDateString = timeoutdatetime;

  199.                     }

  200.                     setFpsmerchanttimeoutdatetime(convertedDateString)

  201.                    

  202.                     const parsedUrl = new URL(responseData.fpsqrcodeurl);

  203.                     const fpsqrcodeurl = "https://"+window.location.hostname+'/payment'+parsedUrl.pathname;

  204.                     const fpsqrcodeurlwithFps = "https://"+"fps."+window.location.hostname+parsedUrl.pathname;

  205.                     console.log(parsedUrl)

  206.                     console.log(fpsqrcodeurl)

  207.                     console.log(fpsqrcodeurlwithFps)

  208.      

  209.                     const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  210.                                      + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));

  211.                     const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  212.                                      + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));

  213.                     const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  214.                                      + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));

  215.                     // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  216.                     //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  217.                     // const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  218.                     //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  219.                     // const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  220.                     //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  221.                     setFpsqrcodeurl(openPASGUrl)

  222.                     setFpsqrcodeurlPrd(openPASGUrlPrd)

  223.                     setFpsqrcodeurlFps(openPASGUrlPrdFps)

  224.                 } catch (e) {

  225.                     console.error("Error processing response:", e);

  226.                     setIsError(true);

  227.                     setOnReady(true);

  228.                 }

  229.             },

  230.             onFail: function(error){

  231.                 console.error("post onFail:", error);

  232.                 setIsError(true);

  233.                 setOnReady(true);

  234.             },

  235.             onError: function(error){

  236.                 console.error("post onError:", error);

  237.                 setIsError(true);

  238.                 setOnReady(true);

  239.             }

  240.         });

  241. 

  242.         //testing

  243.         // const timeoutdatetime = "2024-11-18T07:04:35Z[UTC]"

  244.         // const convertedDateString = timeoutdatetime.replace("[UTC]", "");

  245.         // setFpsmerchanttimeoutdatetime(convertedDateString)

  246.         // setPaymentId("C202310268000681")

  247.         // const responseData= 

  248.         // {

  249.         //     "paymentid": "C202310268000681",

  250.         //     "paymentstatus": "INPR",

  251.         //     "fpsmerchanttimeoutdatetime": "2024-11-18T07:04:35Z[UTC]",

  252.         //     "fpsqrcodeimgbase64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAuyklEQVR4Xu3dfcy/d1nff2IAAAAASUVORK5CYII=",

  253.         //     "fpsqrcodeurl": "http://127.0.0.1:8080/api/payment/wallet/fps/enquiryfpspayload/vm.JKDDlTOavR3ASviSwUnS1Lw4-"

  254.         // }

  255.         // setResponeDataData(responseData)

  256.         // const parsedUrl = new URL(responseData.fpsqrcodeurl);

  257.         // const fpsqrcodeurl = "https://"+window.location.hostname+'/payment'+parsedUrl.pathname;

  258.         // const fpsqrcodeurlwithFps = "https://"+"fps."+window.location.hostname+parsedUrl.pathname;

  259.         // console.log(parsedUrl)

  260.         // console.log(fpsqrcodeurl)

  261.         // console.log(fpsqrcodeurlwithFps)

  262. 

  263.         // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurl) + '&callback='

  264.         //                     + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  265.         // const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurl) + '&callback='

  266.         //                     + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  267.         // const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  268.         //                     + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  269.         // setFpsqrcodeurl(openPASGUrl)

  270.         // setFpsqrcodeurlPrd(openPASGUrlPrd)

  271.         // setFpsqrcodeurlFps(openPASGUrlPrdFps)

  272. 

  273.     }

  274. 

  275.     const getPaymentStatus = () => {

  276.         if(Object.keys(paymentData).length > 0){

  277.             HttpUtils.post({

  278.                 url: UrlUtils.PAYMENT_STATUS_API,

  279.                 params:{

  280.                     "apprefid": paymentData.transactionid,

  281.                     // "webtoken": paymentData.webtoken, 

  282.                     "transactionid":Number(paymentData.transactionid)  

  283.                 },

  284.                 onSuccess: function(responseData){

  285.                     const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;

  286.                     setPaymentStatusCode(paymentstatuscode)

  287.                     if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){

  288.                         if (paymentstatuscode === 'APPR') {

  289.                             // const timestamp = Date.now();

  290.                             let page = '/paymentPage/fps/ackpage';

  291.                             let stateParams = { state: { transactionid: paymentData.transactionid} }

  292.                             navigate(page, stateParams);

  293.                         } else if (paymentstatuscode === 'CANC') {

  294.                             // const timestamp = Date.now();

  295.                             let page = '/paymentPage/fps/ackpage';

  296.                             let stateParams = { state: { transactionid: paymentData.transactionid} }

  297.                             navigate(page, stateParams);

  298.                         } else {

  299.                             // window.top.location.href = paymentPath + payment.config.errPagePath;

  300.                             alert("ERROR")

  301.                         }

  302.                     }

  303.                 },

  304.                 onError: function(){

  305.                     alert("ERROR")

  306.                     // cancelPayment()

  307.                     // clearInterval(currentTimer.current);

  308.                 }

  309.             });

  310.         }

  311.     };

  312.     

  313.     React.useEffect(() => {

  314.         const timeOutDate = new Date(fpsmerchanttimeoutdatetime);

  315.         const currentTime = new Date;

  316.         const timedowncount = Math.round((timeOutDate.getTime() - currentTime.getTime()) / 1000);

  317.         // console.log(time)

  318.         // console.log(timeOutDate)

  319.         // console.log(currentTime)

  320.         // console.log(timeOutDate.getTime()-currentTime.getTime())

  321.         if (browserType === desktopBrowser){

  322.             getPaymentStatus();

  323.             if (timeOutDate.getTime()<currentTime.getTime()){

  324.                 // console.log("stop");

  325.                 clearInterval(currentTimer.current);

  326.                 setqrCodeTimeout(true)

  327.                 setTimeDownCount(0);

  328.                 // cancelPayment()

  329.             }else{

  330.                 setTimeDownCount(timedowncount);

  331.             }

  332.         }

  333.     },[time])

  334. 

  335.     const cancelPayment = ()=>{

  336.         if (Object.keys(paymentData).length>0){

  337.             getPaymentStatus()

  338.             if (paymentStatusCode === "INPR" || isError || paymentStatusCode === ""){

  339.                 HttpUtils.post({

  340.                     url: UrlUtils.CANCEL_PAYMENT_URL,

  341.                     params:{

  342.                         "transactionid": paymentData.transactionid,

  343.                         "webtoken": paymentData.webtoken,

  344.                         "paymentid": fpsTransctionData.paymentid || localStorage.getItem("paymentId")

  345.                     },

  346.                     onSuccess: function(){

  347.                         navigate('/paymentPage/fps/ackpage');

  348.                         let page = '/paymentPage/fps/ackpage';

  349.                         let stateParams = { state: { transactionid: paymentData.transactionid} }

  350.                         navigate(page, stateParams);                    

  351.                     },

  352.                     onFail: function(){

  353.                         let page = '/paymentPage/fps/ackpage';

  354.                         let stateParams = { state: { transactionid: paymentData.transactionid} }

  355.                         navigate(page, stateParams);                    

  356.                     },

  357.                     onError: function(){

  358.                         let page = '/paymentPage/fps/ackpage';

  359.                         let stateParams = { state: { transactionid: paymentData.transactionid} }

  360.                         navigate(page, stateParams);                    

  361.                     }

  362.                 });

  363.             }

  364.         }

  365.     }

  366. 

  367.     const mobliePayment = ()=>{

  368.         window.location.assign(fpsqrcodeurl);

  369.     }

  370. 

  371.     const mobliePaymentPrd = ()=>{

  372.         window.location.assign(fpsqrcodeurlPrd);

  373.     }

  374. 

  375.     const mobliePaymentFps = ()=>{

  376.         window.location.assign(fpsqrcodeurlFps);

  377.     }

  378. 

  379.     return (

  380.         !onReady ?

  381.             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">

  382.                 <Grid item>

  383.                     <LoadingComponent />

  384.                 </Grid>

  385.             </Grid>

  386.             :

  387.             (

  388.                 <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >

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

  390.                         <div style={BackgroundHead} width="100%">

  391.                             <Stack direction="row" height='70px'>

  392.                                 <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>

  393.                                     <FormattedMessage id="publicNoticePaymentFPSPay"/>

  394.                                 </Typography>

  395.                             </Stack>

  396.                         </div>

  397.                     </Grid>

  398.                     {/*row 1*/}

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

  400.                         <Grid container justifyContent="flex-start" alignItems="center" width="100%">

  401.                             <center style={{ width: '100%', display: 'block' }}>

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

  403.                                     <Box sx={{ width: { xs: '90%', md: '40%' }, mx: 'auto', mt: 4, textAlign: 'left' }}>

  404.                                         {!isError &&

  405.                                             <Typography component="div" variant="body1" color="error" sx={{ fontSize: '20px', fontWeight: 700, textAlign: 'center' }}>

  406.                                                 <FormattedMessage id="payAlert"/>

  407.                                             </Typography>

  408.                                         }

  409.                                         {isError &&

  410.                                             <Typography component="div" variant="body1" color="error" sx={{ fontSize: '20px', fontWeight: 700, textAlign: 'justify' }}>

  411.                                                 <FormattedMessage id="fpsPaymentErrorMsg1"/>

  412.                                                 <Box

  413.                                                     component="ul"

  414.                                                     sx={{

  415.                                                         m: 0,

  416.                                                         mt: 1,

  417.                                                         px: 0,

  418.                                                         width: '100%',

  419.                                                         boxSizing: 'border-box',

  420.                                                         listStylePosition: 'outside',

  421.                                                         paddingLeft: '1.5em',

  422.                                                         textAlign: 'justify',

  423.                                                     }}

  424.                                                 >

  425.                                                     <li style={{fontWeight:'bold', textAlign: 'justify'}}><FormattedMessage id="fpsPaymentErrorMsg2"/></li>

  426.                                                     <li style={{fontWeight:'bold', textAlign: 'justify'}}><FormattedMessage id="fpsPaymentErrorMsg3"/></li>

  427.                                                 </Box>

  428.                                             </Typography>

  429.                                         }

  430.                                     </Box>

  431.                                     <Typography component="span" variant="body1" sx={{ width: '80%', margin: 'auto', mt: 4, textAlign: "center", fontSize: '20px', display: 'block' }}>

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

  433.                                         <br />

  434.                                         <FormattedMessage id="payTotalDeatail"/>

  435.                                         <br />

  436.                                         {"HK$ " + currencyFormat(paymentData.amount)}

  437.                                     </Typography>

  438.                                     <br />

  439.                                     {!isError &&

  440.                                         (browserType==mobileBrowser?

  441.                                         <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

  442.                                             {

  443.                                                 sysEnv=="prod"?

  444.                                                     <Button

  445.                                                         component="span"

  446.                                                         variant="contained"

  447.                                                         size="large"

  448.                                                         color="primary"

  449.                                                         onClick={()=>{

  450.                                                             mobliePaymentPrd();

  451.                                                         }}

  452.                                                         sx={{ m: 4 }}

  453.                                                     ><FormattedMessage id="fpsSelectPaymentApp"/></Button>

  454.                                                 :

  455.                                                 <>

  456.                                                     <Button

  457.                                                         component="span"

  458.                                                         variant="contained"

  459.                                                         size="large"

  460.                                                         color="primary"

  461.                                                         onClick={()=>{

  462.                                                             mobliePayment();

  463.                                                         }}

  464.                                                         sx={{ m: 4 }}

  465.                                                     ><FormattedMessage id="fpsSelectPaymentApp"/>-Testing</Button>

  466.                                                     <Button

  467.                                                         component="span"

  468.                                                         variant="contained"

  469.                                                         size="large"

  470.                                                         color="primary"

  471.                                                         onClick={()=>{

  472.                                                             mobliePaymentFps();

  473.                                                         }}

  474.                                                         sx={{ m: 4 }}

  475.                                                     ><FormattedMessage id="fpsSelectPaymentApp"/>-fps prefix</Button>

  476.                                                 </>

  477.                                             }

  478.                                         </Typography>

  479.                                         :

  480.                                         <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

  481.                                             <FormattedMessage id="fpsQrcodeTitle1"/>

  482.                                             <br />

  483.                                             { 

  484.                                                 !qrCodeTimeout?

  485.                                                 <img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/>

  486.                                                 :<img src={expiredQrcode} alt="Expired QR Code"/>

  487.                                             }

  488.                                             <br />

  489.                                             {"["+paymentId+"]"}

  490.                                             <br/>

  491.                                             

  492.                                             {

  493.                                                 timeDownCount<=0?

  494.                                                 <FormattedMessage id="fpsQrcodeExpired"/>:

  495.                                                 <>

  496.                                                     <FormattedMessage id="fpsQrcodeTitle2"/>

  497.                                                     <br />

  498.                                                     <FormattedMessage id="fpsQrcodeTitle3"/>

  499.                                                     <br />

  500.                                                     <FormattedMessage id="fpsQrcodeTitle4"/>&nbsp;

  501.                                                     {timeDownCount}&nbsp; 

  502.                                                     <FormattedMessage id="fpsQrcodeTitle5"/>

  503.                                                 </>

  504.                                             }

  505.                                         </Typography>

  506.                                     )}

  507.                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

  508.                                         {isError ?

  509.                                             <Button

  510.                                                 component="span"

  511.                                                 variant="contained"

  512.                                                 size="large"

  513.                                                 color="primary"

  514.                                                 onClick={() => navigate("/dashboard")}

  515.                                                 sx={{ m: 4, ...PRIMARY_CONTAINED_BUTTON_SX }}

  516.                                             >

  517.                                                 <FormattedMessage id="backToMainPage"/>

  518.                                             </Button>

  519.                                             :

  520.                                             <Button

  521.                                                 component="span"

  522.                                                 variant="contained"

  523.                                                 size="large"

  524.                                                 onClick={()=>{

  525.                                                     cancelPayment();

  526.                                                 }}

  527.                                                 sx={{ m: 4, ...ERROR_CONTAINED_BUTTON_SX }}

  528.                                             >

  529.                                                 <FormattedMessage id="payCancel"/>

  530.                                             </Button>

  531.                                         }

  532.                                     </Typography>

  533.                                 </Grid>

  534.                             </center>

  535.                         </Grid>

  536.                     </Grid>

  537.                     {/*row 2*/}

  538.                 </Grid >

  539.             )

  540. 

  541. 

  542.     );

  543. };

  544. 

  545. export default Index;