fix fpscallback page

src/auth/utils.js

@@ -97,3 +97,7 @@ export const getHomeRouteForLoggedInUser = (userRole) => {
   if (userRole === 'client') return { name: 'access-control' };
   return { name: 'auth-login' };
 };
+
+// open payment record
+export const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"};
+export const preferpaymentmethods = ['visa', 'mastercard', 'pps', 'creditcard', 'fps'];

src/pages/Payment/FPS/fpscallback.js

@@ -13,7 +13,7 @@ import * as UrlUtils from "utils/ApiPathConst";
 // import { useNavigate } from "react-router-dom";
 // import FpsIcon from "assets/images/icons/fps.svg";
 // import { useLocation } from 'react-router-dom';
-import {paymentPath} from "auth/utils";
+// import {paymentPath} from "auth/utils";
 // import {poll} from "utils/Utils";
 import * as DateUtils from "utils/DateUtils"
 
@@ -50,7 +50,8 @@ const Fpscallback = () => {
     // const [transactionDate, setTransactionDate] = React.useState("");
     // const [transactionTime, setTransactionTime] = React.useState("");
     const [onReady, setOnReady] = React.useState(false);
-    const paymentStatusApi = "/api/payment/status/";
+    // const paymentStatusApi = "/api/payment/status/";
+    const [onDownload, setOnDownload] = React.useState(false);
 
 
     React.useEffect(() => {
@@ -83,7 +84,7 @@ const Fpscallback = () => {
         console.log(paymentId)
 
         HttpUtils.post({
-            url: paymentPath+paymentStatusApi+transactionid,
+            url:  UrlUtils.PAYMENT_STATUS_API+transactionid,
             params:{
                 "apprefid": transactionid,
                 "webtoken": webtoken,   
@@ -109,34 +110,68 @@ const Fpscallback = () => {
                         responseData2.data["transTimeStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "HH:mm:ss");
                         setItemList(responseData2.paymentItemList)
                         setPaymentData(responseData2.data);
-                        localStorage.removeItem("paymentId");
+                        // localStorage.removeItem("paymentId");
                     }
                 });
             }
         });
         
-        // setTransactionData(
-        //     {
-        //         "amount": 999.99,
-        //         "currencycode": "HKD",
-        //         "paymentdetail": {
-        //             "attemptno": 1,
-        //             "channel": "MobileWallet",
-        //             "paymentid": "C202310268000681",
-        //             "paymentmethod": "04",
-        //             "result": {
-        //                 "canretry": "Y",
-        //                 "description": "CANC - Cancelled by user or Payment Server.",
-        //                 "paymentstatuscode": "CANC",
-        //                 "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]"
-        //             },
-        //             "subtype": "FPS",
-        //             "time": "2023-10-26T09:02:17Z[UTC]"
+        // const responseData = {
+        //     "amount": 999.99,
+        //     "currencycode": "HKD",
+        //     "paymentdetail": {
+        //         "attemptno": 1,
+        //         "channel": "MobileWallet",
+        //         "paymentid": "C202310268000681",
+        //         "paymentmethod": "04",
+        //         "result": {
+        //             "canretry": "Y",
+        //             "description": "APPR - Cancelled by user or Payment Server.",
+        //             "paymentstatuscode": "APPR",
+        //             "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]"
         //         },
-        //         "transactionid": "20231026170103921"
+        //         "subtype": "FPS",
+        //         "time": "2023-10-26T09:02:17Z"
+        //     },
+        //     "transactionid": "test0001"
+        // }
+        // setResponeDataData(responseData)
+
+        // HttpUtils.post({
+        //     url: UrlUtils.PAYMENT_SAVE,
+        //     params: {
+        //         id: paymentId,
+        //         transNo: responseData.transactionid,
+        //         transDateTime: new Date(responseData.paymentdetail.time).toISOString(),
+        //         egisRefNo: responseData.paymentdetail.paymentid,
+        //         status: responseData.paymentdetail.result.paymentstatuscode,
+        //         payload: responseData
+        //     },
+        //     onSuccess: function (responseData2) {
+        //         responseData2.data["transDateStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "DD/MM/YYYY");
+        //         responseData2.data["transTimeStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "HH:mm:ss");
+        //         setItemList(responseData2.paymentItemList)
+        //         setPaymentData(responseData2.data);
+        //         localStorage.removeItem("paymentId");
         //     }
-        // )
+        // });
     }
+
+    const doPrint = () => {
+        const params = new URLSearchParams(window.location.search);
+        // window.print();
+        setOnDownload(true)
+        HttpUtils.fileDownload({
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.get("PAYMENT_ID"),
+            onResponse:()=>{
+                setOnDownload(false)
+            },
+            onError:()=>{
+                setOnDownload(false)
+            }
+        });
+    };
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -146,9 +181,13 @@ const Fpscallback = () => {
             </Grid>
             :
             transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ?
-                (
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
+            (
+                <div>
+                    <style>
+                        {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                    </style>
+                    <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center">
+                        <Grid className="printHidden" item xs={12} width="100%">
                             <div style={BackgroundHead} width="100%">
                                 <Stack direction="row" height='70px'>
                                     <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
@@ -158,51 +197,45 @@ const Fpscallback = () => {
                             </div>
                         </Grid>
                         {/*row 1*/}
-                        <Grid item xs={12} md={12} >
-                            <Grid container justifyContent="flex-start" alignItems="center" >
-                                <center>
-                                    <Grid item xs={12} md={12} >
-
-                                        <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                            您的申請和付款已收到
-                                        </Typography>
-
-                                        <Grid container>
-                                            <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
-                                                <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                                                    <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <DataGrid
-                                                                recordList={itemList}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                    <Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
-                                                        <Box xs={12} md={12} sx={{ border: '3px solid #eee', borderRadius: '10px' }} >
-                                                            <PaymentDetails
-                                                                formData={paymentData}
-                                                                style={{
-                                                                    display: "flex",
-                                                                    height: "100%",
-                                                                    flex: 1
-                                                                }}
-                                                            />
-                                                        </Box>
-                                                    </Grid>
-                                                </Grid>
-                                            </Grid>
-                                         
-                                        </Grid>
-                                    </Grid>
-                                </center>
+                        <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>
+                            <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                您的申請和付款已收到
+                            </Typography>
+                            <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
+                                <Grid item className="printOrder" xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>
+                                    <Box xs={12} md={12} sx={{ border: '3px solid #eee', borderRadius: '10px' }} >
+                                        <PaymentDetails
+                                            formData={paymentData}
+                                            doPrint={doPrint}
+                                            onDownload={onDownload}
+                                            style={{
+                                                display: "flex",
+                                                height: "100%",
+                                                flex: 1
+                                            }}
+                                        />
+                                    </Box>
+                                </Grid>
+                                <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 2 }}>
+                                    <Box xs={12} md={12} sx={{ border: '3px solid #eee', borderRadius: '10px' }} >
+                                        <DataGrid
+                                            recordList={itemList}
+                                        />
+                                    </Box>
+                                </Grid>
                             </Grid>
                         </Grid>
                         {/*row 2*/}
                     </Grid >
-                ) :
-                (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
+                </div>
+            ) :
+            (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?
+                <div>
+                    <style>
+                        {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                    </style>
+                    <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                        <Grid className="printHidden" item xs={12} width="100%">
                             <div style={BackgroundHead} width="100%">
                                 <Stack direction="row" height='70px'>
                                     <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
@@ -239,9 +272,14 @@ const Fpscallback = () => {
                         </Grid>
                         {/*row 2*/}
                     </Grid >
-                    :
-                    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
-                        <Grid item xs={12} width="100%">
+                </div>
+                :
+                <div>
+                    <style>
+                        {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
+                    </style>
+                    <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }}direction="column" justifyContent="flex-start" alignItems="center" >
+                        <Grid className="printHidden" item xs={12} width="100%">
                             <div style={BackgroundHead} width="100%">
                                 <Stack direction="row" height='70px'>
                                     <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
@@ -284,7 +322,8 @@ const Fpscallback = () => {
                         </Grid>
                         {/*row 2*/}
                     </Grid >
-                )
+                </div>
+            )
     );
 };
 

src/pages/Payment/index.js

@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 // import * as FormatUtils from "utils/FormatUtils";
 // const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
-import {getBowserType} from "auth/utils";
+import * as Utils from "auth/utils";
 
 import {
     Button,
@@ -43,8 +43,8 @@ const Index = () => {
     const intl = useIntl();
     const { locale } = intl;
 
-    const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"};
-    const preferpaymentmethods = ['visa', 'mastercard', 'pps', 'creditcard', 'fps'];
+    // const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"};
+    // const preferpaymentmethods = ['visa', 'mastercard', 'pps', 'creditcard', 'fps'];
     const [totalAmount, setTotalAmount] = useState(0);
     const [appIds, setAppIds] = useState([]);
 
@@ -75,7 +75,7 @@ const Index = () => {
         localStorage.removeItem("webtoken");
         localStorage.removeItem("transactionid");
         localStorage.removeItem("paymentId");
-        if (getBowserType() === "PC_Browser"){
+        if (Utils.getBowserType() === "PC_Browser"){
             setIsFullScreen(false)
         } else {
             setIsFullScreen(true)
@@ -139,6 +139,7 @@ const Index = () => {
                 stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "PPS", paymentMethod: "01,PPSB,PPS" } }
                 paymentMethod = "01,PPSB,PPS";
             }
+            
             if (paymentMethod != "") { 
                 HttpUtils.post({
                     url: UrlUtils.PAYMENT_CREATE,
@@ -155,6 +156,24 @@ const Index = () => {
                     }
                 });
             }
+
+            // //For testing
+            // if (paymentMethod != "") { 
+            //     HttpUtils.post({
+            //         url: UrlUtils.PAYMENT_CREATE,
+            //         params: {
+            //             transNo: "test0001",
+            //             payMethod: paymentMethod,
+            //             payAmount: totalAmount,
+            //             appIdList: location.state?.appIdList ?? []
+            //         },
+            //         onSuccess: function (responData) {
+            //             localStorage.removeItem("paymentId");
+            //             localStorage.setItem("paymentId", responData.id)
+            //             navigate(page, stateParams);
+            //         }
+            //     });
+            // }
         }
     }, [afterConfirmPayment]);
 
@@ -162,12 +181,12 @@ const Index = () => {
         HttpUtils.post({
             url: UrlUtils.PAYMENT_AVAILABLE_PAYMENT,
             params: {
-                "locale": locale === 'en' ?local.en:locale === 'zh-HK' ?local.zh:local.cn,
+                "locale": locale === 'en' ?Utils.local.en:locale === 'zh-HK' ?Utils.local.zh:Utils.local.cn,
                 "amount": totalAmount,
                 // "eserviceids": [
                 //     "<eserviceid>", "<eserviceid>"
                 // ],
-                "preferpaymentmethods": preferpaymentmethods
+                "preferpaymentmethods": Utils.preferpaymentmethods
             },
             onSuccess: (responseData) => {
                 let availableMethods = responseData.availablepaymentmethods;
@@ -190,7 +209,18 @@ const Index = () => {
             }
         });
         
-        
+        // HttpUtils.get({
+        //     url: UrlUtils.PAYMENT_LIMIT_SETTING_LIST,
+        //     params: {},
+        //     onSuccess: (responseData) => {
+        //         // console.log(responseData)
+        //         setPaymentLimit(responseData)
+
+        //     },
+        //     onError: () =>{
+        //         // setOnReady(true)
+        //     }
+        // });
 
         // const responseData = {
         //     "availablepaymentmethods": [

src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js

@@ -55,7 +55,7 @@ const GazetteDetailCard = (
         if (Object.keys(applicationDetailData).length > 0) {
             setCurrentStatus(applicationDetailData.data.status);
             setVerified(applicationDetailData.userData.verifiedBy ? true : false);
-            setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.year
+            setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.issueYear
             +" No. "+applicationDetailData.gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
             setGazetteCode(applicationDetailData.data.groupNo)

src/pages/PublicNotice/Details_GLD/index.js

@@ -112,7 +112,7 @@ const PublicNoticeDetail_GLD = () => {
             setApplicationDetailData(response.data);
             const gazetteIssueDetail = response.data.gazetteIssueDetail;
             setAapNo(response.data.data.appNo);
-            setGazetteIssue(gazetteIssueDetail.year + " Vol " + gazetteIssueDetail.volume);
+            setGazetteIssue(gazetteIssueDetail.issueYear + " Vol " + gazetteIssueDetail.volume);
             setIssueNum(" No. " + gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
             setGroupNo(response.data.data.groupNo);

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -73,7 +73,7 @@ const ApplicationDetailCard = (
             setCurrentApplicationDetailData(applicationDetailData.data);
             setCompanyName(applicationDetailData.companyName);
             setfileDetail(applicationDetailData.fileDetail);
-            setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.year
+            setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.issueYear
                 + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
 

src/pages/PublicNotice/Details_Public/index.js

@@ -90,7 +90,7 @@ const DashboardDefault = () => {
             setApplicationDetailData(response.data);
             const gazetteIssueDetail = response.data.gazetteIssueDetail;
             setAapNo(response.data.data.appNo);
-            setGazetteIssue(gazetteIssueDetail.year + " Vol " + gazetteIssueDetail.volume);
+            setGazetteIssue(gazetteIssueDetail.issueYear + " Vol " + gazetteIssueDetail.volume);
             setIssueNum(" No. " + gazetteIssueDetail.issueNo);
             setProofList(response.data.proofList);
             setPaymentList(response.data.paymentList);

src/utils/ApiPathConst.js

@@ -143,6 +143,7 @@ export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST
 export const PAYMENT_LIMIT_SETTING_LIST = apiPath+'/settings/payment';//GET
 export const PAYMENT_AVAILABLE_PAYMENT = paymentPath+'/api/payment/availability';//POST
 export const PAYMENT_TRANSACTION_ID = paymentPath+'/api/payment/transaction';//GET
+export const PAYMENT_STATUS_API = paymentPath+'/api/payment/status/';//GET
 
 export const DEMAND_NOTE_PREVIEW = apiPath+'/demandNote/preview';//GET
 export const DEMAND_NOTE_CREATE = apiPath+'/demandNote/create';//POST