alex
/
PNSPS-frontend-MaterialUI
2
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
1648 Commit
3 Rami (Branch)
16 MiB
 
 
Albero (Tree): 0294c7c8ad
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da '0294c7c8ad'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/Payment/PaymentCallback.js

340 righe
18 KiB
Originale Blame Cronologia 

  1. // material-ui

  2. import {

  3.     Grid,

  4.     Typography,

  5.     Stack,

  6.     Box

  7.     // Button,

  8.     // FormLabel,

  9. } from '@mui/material';

  10. import * as React from "react";

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

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

  13. //import { useNavigate } from 'react-router-dom';

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

  15. import * as DateUtils from "utils/DateUtils"

  16. 

  17. import Loadable from 'components/Loadable';

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

  19. const PaymentDetails = Loadable(React.lazy(() => import('./Details_Public/PaymentDetails')));

  20. const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid')));

  21. 

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

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

  24. import { toReceiptLanguage } from "utils/Utils";

  25. const BackgroundHead = {

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

  27.     width: '100%',

  28.     height: '100%',

  29.     backgroundSize: 'contain',

  30.     backgroundRepeat: 'no-repeat',

  31.     backgroundColor: '#0C489E',

  32.     backgroundPosition: 'right'

  33. }

  34. 

  35. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  36. 

  37. const Index = () => {

  38.     //const navigate = useNavigate()

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

  40. 

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

  42.     const [itemList, setItemList] = React.useState([]);

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

  44.     const [onDownload, setOnDownload] = React.useState(false);

  45. 

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

  47.     // const [transactionDate, setTransactionDate] = React.useState("");

  48.     // const [transactionTime, setTransactionTime] = React.useState("");

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

  50.     // const updatePaymentApi = "/api/payment/updatepayment";

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

  52.     const intl = useIntl();

  53.     const { locale } = intl;

  54. 

  55. 

  56.     React.useEffect(() => {

  57.         loadForm();

  58.     }, []);

  59. 

  60.     React.useEffect(() => {

  61.         if (Object.keys(responeData).length > 0) {

  62.             console.log(responeData)

  63.             setTransactionData(responeData)

  64.         }

  65.     }, [responeData]);

  66. 

  67.     React.useEffect(() => {

  68.         if (Object.keys(transactionData).length > 0) {

  69.             console.log(transactionData)

  70.             console.log(itemList)

  71.             console.log(paymentData)

  72.             setOnReady(true);

  73.         }

  74.     }, [transactionData]);

  75. 

  76.     const loadForm = () => {

  77.         // const date = new Date();

  78.         // const trnDate = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear();

  79.         // const trnTime = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

  80.         // setTransactionDate(trnDate)

  81.         // setTransactionTime(trnTime)

  82.         const params = new URLSearchParams(window.location.search);

  83.         let transactionid = params.get("TRANSACTION_ID")

  84.         let receipt_token = params.get("RECEIPT_TOKEN").replace("%3D", "=")

  85. 

  86.         HttpUtils.post({

  87.             url: UrlUtils.UPDATE_PAYMENT_API,

  88.             params: {

  89.                 "transactionid": transactionid,

  90.                 "receipttoken": receipt_token,

  91.             },

  92.             onSuccess: function () {

  93.                 //     {

  94.                 //         "amount": 999.99,

  95.                 //         "currencycode": "HKD",

  96.                 //         "paymentdetail": {

  97.                 //             "attemptno": 1,

  98.                 //             "channel": "MobileWallet",

  99.                 //             "paymentid": "C202310268000681",

  100.                 //             "paymentmethod": "04",

  101.                 //             "result": {

  102.                 //                 "canretry": "Y",

  103.                 //                 "description": "CANC - Cancelled by user or Payment Server.",

  104.                 //                 "paymentstatuscode": "CANC",

  105.                 //                 "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]"

  106.                 //             },

  107.                 //             "subtype": "FPS",

  108.                 //             "time": "2023-10-26T09:02:17Z[UTC]"

  109.                 //         },

  110.                 //         "transactionid": "20231026170103921"

  111.                 //     }

  112.                 // )

  113. 

  114.                 HttpUtils.post({

  115.                     url: UrlUtils.PAYMENT_CALLBACK_STATUS_API,

  116.                     params: {

  117.                         "apprefid": transactionid,

  118.                         // "webtoken": localStorage.getItem("webtoken"),

  119.                         // "paymentId": localStorage.getItem("paymentId"),

  120.                         "transactionid":Number(transactionid)

  121.                     },

  122.                     onSuccess: function (responseData) {

  123.                         if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {

  124.                             localStorage.removeItem("webtoken");

  125.                             localStorage.removeItem("transactionid");

  126.                         }

  127.                         responseData.data["transDateStr"] = responseData.data.transDateTime;

  128.                         responseData.data["transTimeStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "HH:mm:ss");

  129.                         setResponeDataData(responseData.transactionData)

  130.                         setItemList(responseData.paymentItemList)

  131.                         setPaymentData(responseData.data);

  132.                         // if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {

  133.                             

  134.                         // }

  135.                         // HttpUtils.post({

  136.                         //     url: UrlUtils.PAYMENT_SAVE,

  137.                         //     params: {

  138.                         //         id: localStorage.getItem("paymentId"),

  139.                         //         transNo: responseData.transactionid,

  140.                         //         transDateTime: new Date(responseData.paymentdetail.time).toISOString(),

  141.                         //         egisRefNo: responseData.paymentdetail.paymentid,

  142.                         //         status: responseData.paymentdetail.result.paymentstatuscode,

  143.                         //         payload: responseData

  144.                         //     },

  145.                         //     onSuccess: function (responseData2) {

  146.                         //         responseData2.data["transDateStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "DD/MM/YYYY");

  147.                         //         responseData2.data["transTimeStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "HH:mm:ss");

  148.                         //         setItemList(responseData2.paymentItemList)

  149.                         //         setPaymentData(responseData2.data);

  150.                         //         // localStorage.removeItem("paymentId");

  151.                         //         // setPaymentId(responseData2.id)

  152.                         //     }

  153.                         // });

  154.                     }

  155.                 });

  156.             }

  157.         });

  158.     }

  159. 

  160.     const doPrint = () => {

  161.         // window.print();

  162.         setOnDownload(true)

  163.         HttpUtils.fileDownload({

  164.             url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentData.id+"/"+toReceiptLanguage(locale),

  165.             onResponse:()=>{

  166.                 setOnDownload(false)

  167.             },

  168.             onError:()=>{

  169.                 setOnDownload(false)

  170.             }

  171.         });

  172.     };

  173. 

  174.     return (

  175.         !onReady ?

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

  177.                 <Grid item>

  178.                     <LoadingComponent />

  179.                 </Grid>

  180.             </Grid>

  181.             :

  182.             transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ?

  183.                 (

  184.                     <div>

  185.                         <style>

  186.                             {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}

  187.                         </style>

  188.                         <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center">

  189.                             <Grid className="printHidden" item xs={12} width="100%">

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

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

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

  193.                                             <FormattedMessage id="publicNoticePaymentSuccess"/>

  194.                                         </Typography>

  195.                                     </Stack>

  196.                                 </div>

  197.                             </Grid>

  198.                             {/*row 1*/}

  199.                             <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>

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

  201.                                     <FormattedMessage id="MSG.paymentMsg"/>

  202.                                 </Typography>

  203.                                 <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >

  204.                                     <Grid item className="printOrder" xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>

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

  206.                                             <PaymentDetails

  207.                                                 formData={paymentData}

  208.                                                 doPrint={doPrint}

  209.                                                 onDownload={onDownload}

  210.                                                 style={{

  211.                                                     display: "flex",

  212.                                                     height: "100%",

  213.                                                     flex: 1

  214.                                                 }}

  215.                                             />

  216.                                         </Box>

  217.                                     </Grid>

  218.                                     <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 2 }}>

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

  220.                                             <DataGrid

  221.                                                 recordList={itemList}

  222.                                             />

  223.                                         </Box>

  224.                                     </Grid>

  225.                                 </Grid>

  226.                             </Grid>

  227.                             {/*row 2*/}

  228.                         </Grid >

  229.                     </div>

  230.                 ) :

  231.                 (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?

  232.                     <div>

  233.                         <style>

  234.                             {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}

  235.                         </style>

  236.                         <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >

  237.                             <Grid className="printHidden" item xs={12} width="100%">

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

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

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

  241.                                             <FormattedMessage id="publicNoticePaymentCancel"/>

  242.                                         </Typography>

  243.                                     </Stack>

  244.                                 </div>

  245.                             </Grid>

  246.                             {/*row 1*/}

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

  248.                                 <Grid container justifyContent="flex-start" alignItems="center" >

  249.                                     <center>

  250.                                         <Grid item xs={12} md={8} >

  251.                                             <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>

  252.                                                 <FormattedMessage id="MSG.paymentCancelMsg1"/>

  253.                                                 <br /><br />

  254.                                                 <FormattedMessage id="MSG.paymentCancelMsg2"/>

  255.                                                 <br /><br />

  256.                                                 <FormattedMessage id="MSG.paymentCancelMsg3"/>

  257.                                                 <br />

  258.                                                 <FormattedMessage id="MSG.paymentCancelMsg4"/>

  259.                                                 <br /><br />

  260.                                                 <FormattedMessage id="MSG.paymentCancelMsg5"/>

  261.                                                 <br />

  262.                                                 <FormattedMessage id="MSG.paymentCancelMsg6"/>

  263.                                                 <br />

  264.                                                 <FormattedMessage id="MSG.paymentCancelMsg7"/>

  265.                                                 <br /><br />

  266.                                                 <FormattedMessage id="MSG.paymentCancelMsg8"/>

  267.                                             </Typography>

  268.                                         </Grid>

  269.                                     </center>

  270.                                 </Grid>

  271.                             </Grid>

  272.                             {/*row 2*/}

  273.                         </Grid >

  274.                     </div>

  275.                     :

  276.                     <div>

  277.                         <style>

  278.                             {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}

  279.                         </style>

  280.                         <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }}direction="column" justifyContent="flex-start" alignItems="center" >

  281.                             <Grid className="printHidden" item xs={12} width="100%">

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

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

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

  285.                                             <FormattedMessage id="publicNoticePaymentFail"/>

  286.                                         </Typography>

  287.                                     </Stack>

  288.                                 </div>

  289.                             </Grid>

  290.                             {/*row 1*/}

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

  292.                                 <Grid container justifyContent="flex-start" alignItems="center" >

  293.                                     <center>

  294.                                         <Grid item xs={12} md={8} >

  295.                                             <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>

  296.                                                 <FormattedMessage id="MSG.paymentFailMsg1"/>

  297.                                                 <br /><br />

  298.                                                 <FormattedMessage id="MSG.paymentFailMsg2"/>

  299.                                                 <br /><br />

  300.                                                 <ul>

  301.                                                     <li>

  302.                                                         <FormattedMessage id="MSG.paymentFailMsg3"/>

  303.                                                     </li>

  304.                                                     <li>

  305.                                                         <FormattedMessage id="MSG.paymentFailMsg4"/>

  306.                                                     </li>

  307.                                                     <li>

  308.                                                         <FormattedMessage id="MSG.paymentFailMsg5"/>

  309.                                                     </li>

  310.                                                 </ul>

  311.                                                 <br /><br />

  312.                                                 <FormattedMessage id="MSG.paymentFailMsg6"/>

  313.                                                 <br /><br />

  314.                                                 <ul>

  315.                                                     <li>

  316.                                                         <FormattedMessage id="MSG.paymentFailMsg7"/>

  317.                                                     </li>

  318.                                                     <li>

  319.                                                         <FormattedMessage id="MSG.paymentFailMsg8"/>

  320.                                                     </li>

  321.                                                     <li>

  322.                                                         <FormattedMessage id="MSG.paymentFailMsg9"/>

  323.                                                     </li>

  324.                                                 </ul>

  325.                                                 <br /><br />

  326.                                                 <FormattedMessage id="MSG.paymentFailMsg10"/>

  327.                                             </Typography> 

  328.                                         </Grid>

  329.                                     </center>

  330.                                 </Grid>

  331.                             </Grid>

  332.                             {/*row 2*/}

  333.                         </Grid >

  334.                     </div>

  335.                 )

  336.     );

  337. };

  338. 

  339. export default Index;