update payment ui with user info

src/pages/Payment/Details_Public/DataGrid.js

@@ -45,7 +45,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             renderCell: (params) => {
                 let appNo = params.row.appNo;
                 // console.log(params)
-                return <div style={{ margin: 4 }}>憲報第6號副刊公告<br/>
+                return <div style={{ margin: 4, textAlign:"left"}}>憲報第6號副刊公告<br/>
                     {isORGLoggedIn()?<>Care Of: {params.row.careOf}<br /></>:null}
                     申請編號: {appNo}<br/>
                     憲報日期: {DateUtils.dateStr_Cht(params.row.issueDate)}<br/>

src/pages/Payment/FPS/FPS.js

@@ -11,6 +11,7 @@ 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 {currencyFormat} from "utils/FormatUtils";
 // import {poll} from "utils/Utils";
 
 import Loadable from 'components/Loadable';
@@ -257,9 +258,9 @@ const Index = () => {
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                         <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                         <br />
-                                        支付金額
+                                        付款總額
                                         <br />
-                                        {"$HK " + paymentData.amount}
+                                        {"HK$ " + currencyFormat(paymentData.amount)}
                                     </Typography>
                                     {browserType==mobileBrowser?
                                         <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
@@ -280,13 +281,13 @@ const Index = () => {
                                             <br />
                                             <img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/>
                                             <br />
-                                            {paymentId}
+                                            {"["+paymentId+"]"}
                                             <br/>
                                             二維碼有效期限3分鐘
                                             <br />
                                             請在規定時間內完成付款流程
                                             <br />
-                                            {"剩餘時間:"+timeDownCount}
+                                            {"剩餘時間: "+timeDownCount}
                                         </Typography>
                                     }
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

src/pages/Payment/MultiPaymentWindow.js

@@ -173,7 +173,7 @@ const MultiPaymentWindow = (props) => {
               <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                 <Grid item>
                   <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
-                    已選擇付款方式:
+                    已選擇付款方法:
                   </FormLabel>
                 </Grid>
                 <Grid item>
@@ -231,12 +231,12 @@ const MultiPaymentWindow = (props) => {
                     <center>
                         <Grid item xs={12} md={12} width="100%">
                               <Typography variant="h5" sx={{ textAlign: "left" }}>
-                                  交易參考號: {transactionData.transactionid}
+                                  交易參考編號: {transactionData.transactionid}
                               </Typography>
 
-                              <Typography variant="h5" sx={{ textAlign: "left" }}>
+                              {/* <Typography variant="h5" sx={{ textAlign: "left" }}>
                                   支付金額: HK$ {FormatUtils.currencyFormat(props.totalAmount)}
-                              </Typography>
+                              </Typography> */}
                               {!props.onReady ?
                                   <LoadingComponent />
                                   :content
@@ -247,12 +247,12 @@ const MultiPaymentWindow = (props) => {
                             <Grid container >
                                 <Grid item>
                                     <Typography variant="h5" sx={{ textAlign: "left" }}>
-                                        付款金額:
+                                        付款總額(HK$):
                                     </Typography>
                                 </Grid>
                                 <Grid item>
                                     <Typography variant="h5" sx={{ textAlign: "left" }}>
-                                        {"HK$ " + FormatUtils.currencyFormat(props.totalAmount)}
+                                        {" HK$ " + FormatUtils.currencyFormat(props.totalAmount)}
                                     </Typography>
                                 </Grid>
                             </Grid>

src/pages/Payment/index.js

@@ -433,6 +433,15 @@ const Index = () => {
                             sx={{ mt: 4 }}
                         >付款
                     </Button>
+                    <Button
+                            component="span"
+                            variant="contained"
+                            size="large"
+                            // color="error"
+                            onClick={() => { navigate("/publicNotice") }}
+                            sx={{ mt: 4 }}
+                        >取消
+                    </Button>
                 </Stack>
             </Grid>
             {/*row 2*/}

src/pages/Proof/Payment/Pay.js

@@ -134,11 +134,11 @@ const Index = () => {
                             <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
-                                    <Typography variant="h4">總計金額: {FormatUtils.currencyFormat(fee)}</Typography>
+                                    <Typography variant="h4">總額(HK$): {FormatUtils.currencyFormat(fee)}</Typography>
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
-                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button>
+                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">關閉</Typography></Button>
                                 <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
                             </DialogActions>
                         </Dialog>

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -437,7 +437,7 @@ const ApplicationDetailCard = (
                                             <Grid container alignItems={"center"}>
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <FormLabel><Typography variant="h5">價錢:</Typography></FormLabel>
+                                                    <FormLabel><Typography variant="h5">金額(HK$):</Typography></FormLabel>
                                                 </Grid>
 
                                                 <Grid item xs={12} md={9} lg={9}>
@@ -571,11 +571,11 @@ const ApplicationDetailCard = (
                             <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
-                                    <Typography variant="h4">總計金額: {FormatUtils.currencyFormat(fee)}</Typography>
+                                    <Typography variant="h4">總額(HK$): {FormatUtils.currencyFormat(fee)}</Typography>
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
-                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button>
+                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">關閉</Typography></Button>
                                 <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
                             </DialogActions>
                         </Dialog>

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -211,7 +211,7 @@ export default function SubmittedTab({ rows }) {
             totalAmount += datas[i].fee;
         }
         content.push(<Typography variant="h5">
-            總計金額: HK$ {FormatUtils.currencyFormat(totalAmount)} <br /><br />
+            總額(HK$): {FormatUtils.currencyFormat(totalAmount)} <br /><br />
         </Typography>);
         //setAmount(totalAmount);
         return content;
@@ -312,7 +312,7 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button>
+                        <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">關閉</Typography></Button>
                         <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
                     </DialogActions>
                 </Dialog>