add cancel and reject

src/pages/Payment/PaymentSuccess.js

@@ -103,8 +103,8 @@ const Index = () => {
                 //         }
                 //     }
                 //}
+                setResponeDataData(responseData)
                 if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {
-                    setResponeDataData(responseData)
                     localStorage.removeItem("webtoken");
                     localStorage.removeItem("transactionid");
                 }
@@ -128,7 +128,8 @@ const Index = () => {
         !onReady ?
             <LoadingComponent />
             :
-            transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ? (
+            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%">
@@ -240,7 +241,45 @@ const Index = () => {
                     {/*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 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 />
+                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
+                                </Typography>
+                            </Grid>
+                        </center>
+                    </Grid>
+                </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%">
@@ -256,7 +295,7 @@ const Index = () => {
                                     <Grid item xs={12} md={8} >
 
                                         <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                            支付失敗訊息：
+                                            付款失敗訊息：
                                             <br /><br />
                                             親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
                                             <br /><br />