From 15820bd328dd92b62a7ec7bf1fe0e9ece6ffdc0d Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Wed, 1 Nov 2023 12:10:53 +0800
Subject: [PATCH] update payment callback page

---
 src/pages/Payment/Card/index.js     |  2 +-
 src/pages/Payment/PaymentSuccess.js | 82 +++++++++++++++++++++++------
 src/routes/PublicUserRoutes.js      |  2 +-
 3 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/src/pages/Payment/Card/index.js b/src/pages/Payment/Card/index.js
index 8dbdc8c..c9ceebd 100644
--- a/src/pages/Payment/Card/index.js
+++ b/src/pages/Payment/Card/index.js
@@ -94,7 +94,7 @@ const Index = () => {
                 },
                 // "locale":"<locale>",
                 // "eserviceid":"<eserviceid>",
-                 "returnurl": "http://"+window.location.hostname+"/paymentPage/success"
+                 "returnurl": "http://"+window.location.hostname+"/paymentPage/callback"
             },
             ///{state:{transactionid:paymentData.transactionid,webtoken:paymentData.webtoken} }
             onSuccess: function(responseData){
diff --git a/src/pages/Payment/PaymentSuccess.js b/src/pages/Payment/PaymentSuccess.js
index d0ceb94..c351603 100644
--- a/src/pages/Payment/PaymentSuccess.js
+++ b/src/pages/Payment/PaymentSuccess.js
@@ -36,11 +36,11 @@ const Index = () => {
     const [transactionTime, setTransactionTime] = React.useState("");
     const [onReady, setOnReady] = React.useState(false);
     const updatePaymentApi = "/api/payment/updatepayment";
-    const paymentStatusApi = "/api/payment/status/";
+    //const paymentStatusApi = "/api/payment/status/";
 
 
     React.useEffect(() => {
-        console.log("webtoken: "+localStorage.getItem("webtoken"));
+        console.log("webtoken: " + localStorage.getItem("webtoken"));
         if (localStorage.getItem("webtoken") != null && localStorage.getItem("webtoken") != "") {
             loadForm();
         }
@@ -79,7 +79,7 @@ const Index = () => {
                 "transactionid": transactionid,
                 "receipttoken": receipt_token,
             },
-            onSuccess: function () {
+            onSuccess: function (responseData) {
                 // {
                 //     "transactionid": "<transactionid>",
                 //     "currencycode":"<currencycode>",
@@ -103,28 +103,32 @@ const Index = () => {
                 //         }
                 //     }
                 //}
-                HttpUtils.post({
-                    url: paymentPath + paymentStatusApi + transactionid,
-                    params: {
-                        "apprefid": transactionid,
-                        "webtoken": localStorage.getItem("webtoken"),
-                    },
-                    onSuccess: function (responseData) {
-                        setResponeDataData(responseData)
-                        localStorage.removeItem("webtoken");
-                    }
-                });
+                if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {
+                    setResponeDataData(responseData)
+                    localStorage.removeItem("webtoken");
+                    localStorage.removeItem("transactionid");
+                }
+                // HttpUtils.post({
+                //     url: paymentPath + paymentStatusApi + transactionid,
+                //     params: {
+                //         "apprefid": transactionid,
+                //         "webtoken": localStorage.getItem("webtoken"),
+                //     },
+                //     onSuccess: function (responseData) {
+
+                //     }
+                // });
             }
         });
 
-        
+
     }
 
     return (
         !onReady ?
             <LoadingComponent />
             :
-            (
+            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={BackgroundHead} width="100%">
@@ -235,7 +239,51 @@ const Index = () => {
                     </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 style={BackgroundHead} width="100%">
+                                <Stack direction="row" height='70px'>
+                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：付款失敗</Typography>
+                                </Stack>
+                            </div>
+                        </Grid>
+                        {/*row 1*/}
+                        <Grid item xs={12} md={12} >
+                            <Grid container justifyContent="flex-start" alignItems="center" >
+                                <center>
+                                    <Grid item xs={12} md={8} >
+
+                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                            支付失敗訊息：
+                                            <br /><br />
+                                            親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
+                                            <br /><br />
+                                            您的支付帳戶餘額是否足夠。
+                                            <br />
+                                            您提供的付款資訊是否準確無誤。
+                                            <br />
+                                            請檢查您的網路連線是否正常。
+                                            <br /><br />
+                                            如果您已確認以上問題無誤，但付款成功，請您嘗試以下解決方法：
+                                            <br /><br />
+                                            嘗試使用其他付款方式進行付款。
+                                            <br />
+                                            檢查您的支付帳戶是否有異常或限制。
+                                            <br />
+                                            聯絡我們的客服人員尋求協助。
+                                            <br /><br />
+                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
+                                        </Typography>
+
+                                    </Grid>
+                                </center>
+                            </Grid>
+                        </Grid>
+                        {/*row 2*/}
+                    </Grid >
+                )
 
     );
 };
diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js
index 16158c9..9f3fc31 100644
--- a/src/routes/PublicUserRoutes.js
+++ b/src/routes/PublicUserRoutes.js
@@ -79,7 +79,7 @@ const PublicDashboard = {
           element: <Payment_Card/>
         },
         {
-          path: 'paymentPage/success',
+          path: 'paymentPage/result',
           element: <Payment_Success/>
         },
         {