alex
/
PNSPS-frontend-MaterialUI
1
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.
1333 Commit
5 Rami (Branch)
94 MiB
 
 
Albero (Tree): defe054a26
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da 'defe054a26'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/Payment/PaymentCallback.js

342 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. const BackgroundHead = {

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

  26.     width: '100%',

  27.     height: '100%',

  28.     backgroundSize: 'contain',

  29.     backgroundRepeat: 'no-repeat',

  30.     backgroundColor: '#0C489E',

  31.     backgroundPosition: 'right'

  32. }

  33. 

  34. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  35. 

  36. const Index = () => {

  37.     //const navigate = useNavigate()

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

  39. 

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

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

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

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

  44. 

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

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

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

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

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

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

  51.     const intl = useIntl();

  52.     const { locale } = intl;

  53. 

  54. 

  55.     React.useEffect(() => {

  56.         loadForm();

  57.     }, []);

  58. 

  59.     React.useEffect(() => {

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

  61.             console.log(responeData)

  62.             setTransactionData(responeData)

  63.         }

  64.     }, [responeData]);

  65. 

  66.     React.useEffect(() => {

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

  68.             console.log(transactionData)

  69.             console.log(itemList)

  70.             console.log(paymentData)

  71.             setOnReady(true);

  72.         }

  73.     }, [transactionData]);

  74. 

  75.     const loadForm = () => {

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

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

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

  79.         // setTransactionDate(trnDate)

  80.         // setTransactionTime(trnTime)

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

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

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

  84. 

  85.         HttpUtils.post({

  86.             url: UrlUtils.UPDATE_PAYMENT_API,

  87.             params: {

  88.                 "transactionid": transactionid,

  89.                 "receipttoken": receipt_token,

  90.             },

  91.             onSuccess: function () {

  92.                 //     {

  93.                 //         "amount": 999.99,

  94.                 //         "currencycode": "HKD",

  95.                 //         "paymentdetail": {

  96.                 //             "attemptno": 1,

  97.                 //             "channel": "MobileWallet",

  98.                 //             "paymentid": "C202310268000681",

  99.                 //             "paymentmethod": "04",

  100.                 //             "result": {

  101.                 //                 "canretry": "Y",

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

  103.                 //                 "paymentstatuscode": "CANC",

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

  105.                 //             },

  106.                 //             "subtype": "FPS",

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

  108.                 //         },

  109.                 //         "transactionid": "20231026170103921"

  110.                 //     }

  111.                 // )

  112. 

  113.                 HttpUtils.post({

  114.                     url: UrlUtils.PAYMENT_CALLBACK_STATUS_API,

  115.                     params: {

  116.                         "apprefid": transactionid,

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

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

  119.                         "transactionid":Number(transactionid)

  120.                     },

  121.                     onSuccess: function (responseData) {

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

  123.                             localStorage.removeItem("webtoken");

  124.                             localStorage.removeItem("transactionid");

  125.                         }

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

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

  128.                         setResponeDataData(responseData.transactionData)

  129.                         setItemList(responseData.paymentItemList)

  130.                         setPaymentData(responseData.data);

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

  132.                             

  133.                         // }

  134.                         // HttpUtils.post({

  135.                         //     url: UrlUtils.PAYMENT_SAVE,

  136.                         //     params: {

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

  138.                         //         transNo: responseData.transactionid,

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

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

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

  142.                         //         payload: responseData

  143.                         //     },

  144.                         //     onSuccess: function (responseData2) {

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

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

  147.                         //         setItemList(responseData2.paymentItemList)

  148.                         //         setPaymentData(responseData2.data);

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

  150.                         //         // setPaymentId(responseData2.id)

  151.                         //     }

  152.                         // });

  153.                     }

  154.                 });

  155.             }

  156.         });

  157.     }

  158. 

  159.     const doPrint = () => {

  160.         // window.print();

  161.         setOnDownload(true)

  162.         const local = locale

  163.         console.log(local)

  164.         HttpUtils.fileDownload({

  165.             // url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+localStorage.getItem("paymentId")+"/"+local,

  166.             url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentData.id+"/"+local,

  167.             onResponse:()=>{

  168.                 setOnDownload(false)

  169.             },

  170.             onError:()=>{

  171.                 setOnDownload(false)

  172.             }

  173.         });

  174.     };

  175. 

  176.     return (

  177.         !onReady ?

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

  179.                 <Grid item>

  180.                     <LoadingComponent />

  181.                 </Grid>

  182.             </Grid>

  183.             :

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

  185.                 (

  186.                     <div>

  187.                         <style>

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

  189.                         </style>

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

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

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

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

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

  195.                                             <FormattedMessage id="publicNoticePaymentSuccess"/>

  196.                                         </Typography>

  197.                                     </Stack>

  198.                                 </div>

  199.                             </Grid>

  200.                             {/*row 1*/}

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

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

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

  204.                                 </Typography>

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

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

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

  208.                                             <PaymentDetails

  209.                                                 formData={paymentData}

  210.                                                 doPrint={doPrint}

  211.                                                 onDownload={onDownload}

  212.                                                 style={{

  213.                                                     display: "flex",

  214.                                                     height: "100%",

  215.                                                     flex: 1

  216.                                                 }}

  217.                                             />

  218.                                         </Box>

  219.                                     </Grid>

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

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

  222.                                             <DataGrid

  223.                                                 recordList={itemList}

  224.                                             />

  225.                                         </Box>

  226.                                     </Grid>

  227.                                 </Grid>

  228.                             </Grid>

  229.                             {/*row 2*/}

  230.                         </Grid >

  231.                     </div>

  232.                 ) :

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

  234.                     <div>

  235.                         <style>

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

  237.                         </style>

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

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

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

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

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

  243.                                             <FormattedMessage id="publicNoticePaymentCancel"/>

  244.                                         </Typography>

  245.                                     </Stack>

  246.                                 </div>

  247.                             </Grid>

  248.                             {/*row 1*/}

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

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

  251.                                     <center>

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

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

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

  255.                                                 <br /><br />

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

  257.                                                 <br /><br />

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

  259.                                                 <br />

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

  261.                                                 <br /><br />

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

  263.                                                 <br />

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

  265.                                                 <br />

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

  267.                                                 <br /><br />

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

  269.                                             </Typography>

  270.                                         </Grid>

  271.                                     </center>

  272.                                 </Grid>

  273.                             </Grid>

  274.                             {/*row 2*/}

  275.                         </Grid >

  276.                     </div>

  277.                     :

  278.                     <div>

  279.                         <style>

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

  281.                         </style>

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

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

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

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

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

  287.                                             <FormattedMessage id="publicNoticePaymentFail"/>

  288.                                         </Typography>

  289.                                     </Stack>

  290.                                 </div>

  291.                             </Grid>

  292.                             {/*row 1*/}

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

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

  295.                                     <center>

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

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

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

  299.                                                 <br /><br />

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

  301.                                                 <br /><br />

  302.                                                 <ul>

  303.                                                     <li>

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

  305.                                                     </li>

  306.                                                     <li>

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

  308.                                                     </li>

  309.                                                     <li>

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

  311.                                                     </li>

  312.                                                 </ul>

  313.                                                 <br /><br />

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

  315.                                                 <br /><br />

  316.                                                 <ul>

  317.                                                     <li>

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

  319.                                                     </li>

  320.                                                     <li>

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

  322.                                                     </li>

  323.                                                     <li>

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

  325.                                                     </li>

  326.                                                 </ul>

  327.                                                 <br /><br />

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

  329.                                             </Typography> 

  330.                                         </Grid>

  331.                                     </center>

  332.                                 </Grid>

  333.                             </Grid>

  334.                             {/*row 2*/}

  335.                         </Grid >

  336.                     </div>

  337.                 )

  338.     );

  339. };

  340. 

  341. export default Index;