From 7cd6142c609218268cfa66e42636d9be93187b2c Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Mon, 30 Oct 2023 16:18:57 +0800 Subject: [PATCH 1/6] add after payment success page --- src/pages/Payment/FPS/AckPage.js | 223 +++++++++++++++++++ src/pages/Payment/FPS/FPS.js | 205 +++++++++--------- src/pages/Payment/index.js | 358 +++++++++++++++---------------- src/routes/PublicUserRoutes.js | 5 + 4 files changed, 503 insertions(+), 288 deletions(-) create mode 100644 src/pages/Payment/FPS/AckPage.js diff --git a/src/pages/Payment/FPS/AckPage.js b/src/pages/Payment/FPS/AckPage.js new file mode 100644 index 0000000..a85961b --- /dev/null +++ b/src/pages/Payment/FPS/AckPage.js @@ -0,0 +1,223 @@ +// material-ui +import { + Grid, + Typography, + Stack, + // Button, + FormLabel, +} from '@mui/material'; +import * as React from "react"; +import * as HttpUtils from "utils/HttpUtils"; +// 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 {poll} from "utils/Utils"; + +import Loadable from 'components/Loadable'; +const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); + +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const AckPage = () => { + // const navigate = useNavigate() + const location = useLocation(); + + const [paymentData, setPaymentData] = React.useState({}); + const [transactionData, setTransactionData] = React.useState({}); + const [transactionDate, setTransactionDate] = React.useState(""); + const [transactionTime, setTransactionTime] = React.useState(""); + const [onReady, setOnReady] = React.useState(false); + const paymentStatusApi = "/api/payment/status/"; + const [paymentid, setPaymentid] = React.useState(""); + + React.useEffect(() => { + + if(location.state != undefined){ + console.log(location.state) + setPaymentData(location.state) + } + }, []); + + React.useEffect(() => { + if(Object.keys(transactionData).length > 0 ){ + setOnReady(true); + } + }, [transactionData]); + + React.useEffect(() => { + if (Object.keys(paymentData).length > 0){ + const dateTime = paymentData.transactionDateTime; + const date = new Date(dateTime); + const trnDate = date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear(); + const trnTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); + setTransactionDate(trnDate) + setTransactionTime(trnTime) + setPaymentid(paymentData.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]" + // }, + // "transactionid": "20231026170103921" + // } + // ) + HttpUtils.post({ + url: paymentPath+paymentStatusApi+paymentid, + params:{ + "apprefid": paymentData.transactionid, + "webtoken": paymentData.webtoken, + }, + onSuccess: function(responseData){ + setTransactionData(responseData) + } + }); + }, [paymentData]); + + return ( + !onReady ? + + : + ( + + +
+ + 公共啟事：FPS付款 + +
+ + {/*row 1*/} + + +
+ + + + Your application and payment have been received + + + + + + + + Transaction Reference No: + + + + + + + + + + + + + + Transaction Date: + + + + + {transactionDate+" (DD/MM/YYYY)"} + + + + + + + + + Transaction Time: + + + + + {transactionTime+" (HH:MI:SS)"} + + + + + + + + + EGIS Reference No: + + + + + {transactionData.transactionid} + + + + + + + + + Payment Amount + + + + + {"HK$ "+transactionData.amount} + + + + + + + + + Payment Method: + + + + + {transactionData.paymentdetail.subtype} + + + + + + +
+ + + {/*row 2*/} + + ) + + + ); +}; + +export default AckPage; diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js index 31d1d6c..5522c3d 100644 --- a/src/pages/Payment/FPS/FPS.js +++ b/src/pages/Payment/FPS/FPS.js @@ -38,13 +38,13 @@ const Index = () => { const [paymentid, setPaymentid] = React.useState(""); const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState(""); const [fpsqrcodeimgbase64, setFpsqrcodeimgbase64] = React.useState(""); - // const [paymentstatuscode, setPaymentstatuscode] = React.useState(""); + const [paymentstatuscode, setPaymentstatuscode] = React.useState(""); // const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState(""); // const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD // const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing - // const loadPaymentUrl = "/api/payment/wallet/fps"; + const loadPaymentUrl = "/api/payment/wallet/fps"; const cancelPaymentUrl = "/api/payment/cancelpayment"; - // const paymentStatusApi = "/api/payment/status/"; + const paymentStatusApi = "/api/payment/status/"; // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/"; // const receiverUrl = "/noti-api/payment/payment-notification"; @@ -56,13 +56,8 @@ const Index = () => { setFpsqrcodeimgbase64("") if(location.state != undefined){ setPaymentData(location.state) + loadForm(); } - loadForm(); - currentTimer.current = setInterval(() => { - getPaymentStatus(); - setTime((prevTime) => prevTime + 1); - }, 500); - return () => clearInterval(currentTimer.current); }, []); React.useEffect(() => { @@ -71,86 +66,107 @@ const Index = () => { const loadForm = () => { - const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]" - const convertedDateString = timeoutdatetime.replace("[UTC]", ""); - setFpsmerchanttimeoutdatetime(convertedDateString) - setPaymentid("C202310268000681") - - // HttpUtils.post({ - // url: paymentPath+loadPaymentUrl, - // params:{ - // "transactionid": paymentData.transactionid, - // "webtoken": paymentData.webtoken, - // "paymentmethod":"04,BCFP,FPS", - // "order": { - // "totalamount":paymentData.amount, - // "currency":"HKD", - // "orderdetail": - // [ - // { - // "itemid": "1", - // "qty":"1", - // "unitprice":paymentData.amount, - // "amount":paymentData.amount - // }, - // ] - // }, - // // "locale":"", - // // "eserviceid":"" - // }, - // onSuccess: function(responseData){ - // /* - // { - // "paymentid": "", - // "paymentstatus": "", - // "fpsmerchanttimeoutdatetime": , - // "fpsqrcodeimgbase64": "", - // "fpsqrcodeurl": "" - // } - // */ - // setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64); - // setPaymentid(responseData.paymentid); - // setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime); - // setPaymentstatuscode(responseData.paymentstatuscode); - // // const parsedUrl = new URL(responseData.fpsqrcodeurl); - // // const fpsqrcodeurl = parsedUrl.pathname; - // // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback=' - // // + encodeURIComponent(paymentPath + payment.config.fpscallbackPage); - // // setFpsqrcodeurl(openPASGUrl) - // } - // }); + // const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]" + // const convertedDateString = timeoutdatetime.replace("[UTC]", ""); + // setFpsmerchanttimeoutdatetime(convertedDateString) + // setPaymentid("C202310268000681") + // setPaymentstatuscode("APPR") + HttpUtils.post({ + url: paymentPath+loadPaymentUrl, + params:{ + "transactionid": paymentData.transactionid, + "webtoken": paymentData.webtoken, + "paymentmethod":"04,BCFP,FPS", + "order": { + "totalamount":paymentData.amount, + "currency":"HKD", + "orderdetail": + [ + { + "itemid": "1", + "qty":"1", + "unitprice":paymentData.amount, + "amount":paymentData.amount + }, + ] + }, + // "locale":"", + // "eserviceid":"" + }, + onSuccess: function(responseData){ + /* + { + "paymentid": "", + "paymentstatus": "", + "fpsmerchanttimeoutdatetime": , + "fpsqrcodeimgbase64": "", + "fpsqrcodeurl": "" + } + */ + setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64); + setPaymentid(responseData.paymentid); + + const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime + const convertedDateString = timeoutdatetime.replace("[UTC]", ""); + setFpsmerchanttimeoutdatetime(convertedDateString) + + setPaymentstatuscode(responseData.paymentstatuscode); + // const parsedUrl = new URL(responseData.fpsqrcodeurl); + // const fpsqrcodeurl = parsedUrl.pathname; + // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback=' + // + encodeURIComponent(paymentPath + payment.config.fpscallbackPage); + // setFpsqrcodeurl(openPASGUrl) + } + }); + currentTimer.current = setInterval(() => { + setTime((prevTime) => prevTime + 1); + }, 1000); + return () => clearInterval(currentTimer.current); } const getPaymentStatus = () => { - - // HttpUtils.post({ - // url: paymentPath+paymentStatusApi+paymentid, - // params:{ - // "apprefid": paymentData.transactionid, - // "webtoken": paymentData.webtoken, - // }, - // onSuccess: function(responseData){ - // const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode; - // if (paymentstatuscode === 'APPR') { - // const timestamp = '?t=' + Date.now(); - // window.top.location.href = paymentPath + payment.config.ackPagePath + timestamp; - // } else if (paymentstatuscode === 'CANC') { - // window.top.location.href = paymentPath + payment.config.indexPagePath; - // } else { - // window.top.location.href = paymentPath + payment.config.errPagePath; - // } - // }, - // onError: function(){ - // cancelPayment() - // clearInterval(currentTimer.current); + console.log(paymentstatuscode) + // if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){ + // if (paymentstatuscode === 'APPR') { + // const timestamp = Date.now(); + // navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} }); + // } else if (paymentstatuscode === 'CANC') { + // navigate('/payment'); + // } else { + // alert("error") // } - // }); + // } + + HttpUtils.post({ + url: paymentPath+paymentStatusApi+paymentid, + params:{ + "apprefid": paymentData.transactionid, + "webtoken": paymentData.webtoken, + }, + onSuccess: function(responseData){ + const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode; + if (paymentstatuscode === 'APPR') { + const timestamp = Date.now(); + navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} }); + } else if (paymentstatuscode === 'CANC') { + window.top.location.href = paymentPath + payment.config.indexPagePath; + } else { + window.top.location.href = paymentPath + payment.config.errPagePath; + } + }, + onError: function(){ + cancelPayment() + clearInterval(currentTimer.current); + } + }); }; React.useEffect(() => { const timeOutDate = new Date(fpsmerchanttimeoutdatetime); const currentTime = new Date; - if (timeOutDate.getTime()currentTime.getTime()){ console.log("stop"); clearInterval(currentTimer.current); } @@ -170,35 +186,6 @@ const Index = () => { }); } - // const getPayload = ()=>{ - // HttpUtils.get({ - // url: payloadUrl+"", - // onSuccess: function(responseData){ - // /* - // { - // "payload": "" - // } - - // */ - // } - // }); - // } - - // const getReceiver = ()=>{ - // HttpUtils.get({ - // url: receiverUrl+"", - // onSuccess: function(responseData){ - // /* - // { - // "payload": "" - // } - - // */ - // } - // }); - // } - - return ( !onReady ? diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js index 13395fa..7a7fb52 100644 --- a/src/pages/Payment/index.js +++ b/src/pages/Payment/index.js @@ -82,187 +82,187 @@ const Index = () => { }, [confirmPayment]); const getAvailablePayment = () => { - const responseData = { - "availablepaymentmethods": [ - { - "active": "Y", - "code": "04,BCFP,FPS", - "pointstonote": [ - { - "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.", - "order": 10, - "type": "INFO" - }, - { - "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.", - "order": 11, - "type": "INFO" - } - ], - "subtype": "FPS" - }, - { - "active": "Y", - "code": "02,BCMP,CreditCard", - "pointstonote": [ - { - "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.", - "order": 10, - "type": "INFO" - }, - { - "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.", - "order": 11, - "type": "INFO" - }, - { - "content": "Merchant Name is applicable to credit card payment method only.", - "order": 40, - "type": "INFO" - }, - { - "content": "Under exceptional conditions, a refund may need to be arranged. If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.", - "order": 41, - "type": "INFO" - }, - { - "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.", - "order": 42, - "type": "INFO" - }, - { - "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ", - "order": 43, - "type": "INFO" - } - ], - "subtype": "CreditCard", - "supportedcard": [ - "JCB", - "MasterCard", - "Visa" - ] - }, - { - "active": "Y", - "code": "03,BCMP,CreditCard", - "pointstonote": [ - { - "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.", - "order": 10, - "type": "INFO" - }, - { - "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.", - "order": 11, - "type": "INFO" - }, - { - "content": "Merchant Name is applicable to credit card payment method only.", - "order": 40, - "type": "INFO" - }, - { - "content": "Under exceptional conditions, a refund may need to be arranged. If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.", - "order": 41, - "type": "INFO" - }, - { - "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.", - "order": 42, - "type": "INFO" - }, - { - "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ", - "order": 43, - "type": "INFO" - } - ], - "subtype": "CreditCard", - "supportedcard": [ - "UnionPay" - ] - }, - { - "active": "Y", - "code": "01,PPSB,PPS", - "pointstonote": [ - { - "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.", - "order": 10, - "type": "INFO" - }, - { - "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.", - "order": 11, - "type": "INFO" - }, - { - "content": "PPS Shop&Buy (PPS) does not support payment via browsers of mobile devices (including mobile phones and tablets) at the moment. If you wish to pay by PPS, please change to use desktop computer. ", - "order": 21, - "type": "INFO" - } - ], - "subtype": "PPS" - } - ] - }; - let availableMethods = responseData.availablepaymentmethods; - setAvailableMethods(availableMethods); - if (availableMethods.length>0){ - availableMethods.forEach((method)=>{ - if(method.subtype === "FPS" ){ - setFPSStatus(method) - }else if (method.subtype === "CreditCard"){ - method.supportedcard.forEach((supportedcard)=>{ - if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){ - setCreditCardStatus(method) - } else { - if (supportedcard === "UnionPay"){ - setUnionPayStatus(method) - } - } - }) - }else if (method.subtype === "PPS" ){ - setPPSStatus(method) - } - }); - } - - // HttpUtils.post({ - // url: paymentPath+getAvailablePaymentUrl, - // params: { - // // "locale": local.zh,; - // "amount": totalAmount, - // // "eserviceids": [ - // // "", "" - // // ], - // "preferpaymentmethods": preferpaymentmethods - // }, - // onSuccess: (responseData)=>{ - // let availableMethods = responseData.availablepaymentmethods; - // setAvailableMethods(availableMethods); - // if (availableMethods.length>0){ - // availableMethods.forEach((method)=>{ - // if(method.subtype === "FPS" ){ - // setFPSStatus(method) - // }else if (method.subtype === "CreditCard"){ - // method.supportedcard.forEach((supportedcard)=>{ - // if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){ - // setCreditCardStatus(method) - // } else { - // if (supportedcard === "UnionPay"){ - // setUnionPayStatus(method) - // } - // } - // }) - // }else if (method.subtype === "PPS" ){ - // setPPSStatus(method) + // const responseData = { + // "availablepaymentmethods": [ + // { + // "active": "Y", + // "code": "04,BCFP,FPS", + // "pointstonote": [ + // { + // "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.", + // "order": 10, + // "type": "INFO" + // }, + // { + // "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.", + // "order": 11, + // "type": "INFO" + // } + // ], + // "subtype": "FPS" + // }, + // { + // "active": "Y", + // "code": "02,BCMP,CreditCard", + // "pointstonote": [ + // { + // "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.", + // "order": 10, + // "type": "INFO" + // }, + // { + // "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.", + // "order": 11, + // "type": "INFO" + // }, + // { + // "content": "Merchant Name is applicable to credit card payment method only.", + // "order": 40, + // "type": "INFO" + // }, + // { + // "content": "Under exceptional conditions, a refund may need to be arranged. If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.", + // "order": 41, + // "type": "INFO" + // }, + // { + // "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.", + // "order": 42, + // "type": "INFO" + // }, + // { + // "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ", + // "order": 43, + // "type": "INFO" // } - // }); + // ], + // "subtype": "CreditCard", + // "supportedcard": [ + // "JCB", + // "MasterCard", + // "Visa" + // ] + // }, + // { + // "active": "Y", + // "code": "03,BCMP,CreditCard", + // "pointstonote": [ + // { + // "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.", + // "order": 10, + // "type": "INFO" + // }, + // { + // "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.", + // "order": 11, + // "type": "INFO" + // }, + // { + // "content": "Merchant Name is applicable to credit card payment method only.", + // "order": 40, + // "type": "INFO" + // }, + // { + // "content": "Under exceptional conditions, a refund may need to be arranged. If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.", + // "order": 41, + // "type": "INFO" + // }, + // { + // "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.", + // "order": 42, + // "type": "INFO" + // }, + // { + // "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ", + // "order": 43, + // "type": "INFO" + // } + // ], + // "subtype": "CreditCard", + // "supportedcard": [ + // "UnionPay" + // ] + // }, + // { + // "active": "Y", + // "code": "01,PPSB,PPS", + // "pointstonote": [ + // { + // "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.", + // "order": 10, + // "type": "INFO" + // }, + // { + // "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.", + // "order": 11, + // "type": "INFO" + // }, + // { + // "content": "PPS Shop&Buy (PPS) does not support payment via browsers of mobile devices (including mobile phones and tablets) at the moment. If you wish to pay by PPS, please change to use desktop computer. ", + // "order": 21, + // "type": "INFO" + // } + // ], + // "subtype": "PPS" // } - // } - // }); + // ] + // }; + // let availableMethods = responseData.availablepaymentmethods; + // setAvailableMethods(availableMethods); + // if (availableMethods.length>0){ + // availableMethods.forEach((method)=>{ + // if(method.subtype === "FPS" ){ + // setFPSStatus(method) + // }else if (method.subtype === "CreditCard"){ + // method.supportedcard.forEach((supportedcard)=>{ + // if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){ + // setCreditCardStatus(method) + // } else { + // if (supportedcard === "UnionPay"){ + // setUnionPayStatus(method) + // } + // } + // }) + // }else if (method.subtype === "PPS" ){ + // setPPSStatus(method) + // } + // }); + // } + + HttpUtils.post({ + url: paymentPath+getAvailablePaymentUrl, + params: { + // "locale": local.zh,; + "amount": totalAmount, + // "eserviceids": [ + // "", "" + // ], + "preferpaymentmethods": preferpaymentmethods + }, + onSuccess: (responseData)=>{ + let availableMethods = responseData.availablepaymentmethods; + setAvailableMethods(availableMethods); + if (availableMethods.length>0){ + availableMethods.forEach((method)=>{ + if(method.subtype === "FPS" ){ + setFPSStatus(method) + }else if (method.subtype === "CreditCard"){ + method.supportedcard.forEach((supportedcard)=>{ + if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){ + setCreditCardStatus(method) + } else { + if (supportedcard === "UnionPay"){ + setUnionPayStatus(method) + } + } + }) + }else if (method.subtype === "PPS" ){ + setPPSStatus(method) + } + }); + } + } + }); } const getTransactionId = () => { diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js index 1522ccf..dad37d4 100644 --- a/src/routes/PublicUserRoutes.js +++ b/src/routes/PublicUserRoutes.js @@ -17,6 +17,7 @@ const ProofPayment = Loadable(lazy(() => import('pages/Proof/Payment'))); const Payment_Multi = Loadable(lazy(() => import('pages/Payment'))); const Payment_FPS = Loadable(lazy(() => import('pages/Payment/FPS'))); const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback'))); +const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPage'))); // ==============================|| MAIN ROUTING ||============================== // @@ -75,6 +76,10 @@ const PublicDashboard = { path: 'payment/fps/fpscallback', element: }, + { + path: 'payment/fps/ackpage', + element: + }, ] }, ] From beb3ffd25ddd72051a9fd6370ffb8416d73ec668 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Mon, 30 Oct 2023 16:22:37 +0800 Subject: [PATCH 2/6] fix timeout --- src/pages/Payment/FPS/FPS.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js index 5522c3d..48f7382 100644 --- a/src/pages/Payment/FPS/FPS.js +++ b/src/pages/Payment/FPS/FPS.js @@ -166,7 +166,7 @@ const Index = () => { const currentTime = new Date; console.log(time) getPaymentStatus(); - if (timeOutDate.getTime()>currentTime.getTime()){ + if (timeOutDate.getTime() Date: Mon, 30 Oct 2023 17:55:28 +0800 Subject: [PATCH 3/6] Update UI --- src/components/cards/AuthFooter.js | 5 +- .../OrganizationCard.js | 136 +++++++++--------- src/pages/OrganizationDetailPage/index.js | 74 ++++++---- src/pages/OrganizationSearchPage/index.js | 65 +++++---- .../Proof/Reply_GLD/ApplicationDetails.js | 10 +- src/pages/Proof/Reply_GLD/index.js | 37 ++++- src/pages/PublicNotice/Details_GLD/index.js | 14 +- src/pages/User/DetailPage/UserAuthTable.js | 20 ++- .../User/DetailPage/UserAuthorityCard.js | 13 +- src/pages/User/DetailPage/UserGroupCard.js | 3 +- src/pages/User/DetailPage/UserGroupTable.js | 20 +++ .../User/DetailPage/UserInformationCard.js | 7 +- src/pages/User/DetailPage/index.js | 126 +++++++++------- .../UserInformationCard_Individual.js | 12 +- .../User/DetailsPage_Individual/index.js | 114 ++++++++++----- .../UserInformationCard_Organization.js | 44 +++--- .../User/DetailsPage_Organization/index.js | 131 +++++++++++------ src/pages/User/SearchPage/UserSearchForm.js | 47 +++--- src/pages/User/SearchPage/index.js | 36 +++-- src/pages/User/SearchPage_Individual/index.js | 24 +++- .../User/SearchPage_Organization/index.js | 65 +++++---- .../pnspsUserGroupDetailPage/GroupAuthCard.js | 3 +- .../GroupAuthTable.js | 22 ++- .../pnspsUserGroupDetailPage/UserAddCard.js | 55 +++---- .../pnspsUserGroupDetailPage/UserAddTable.js | 19 +++ .../UserGroupInfoCard.js | 28 ++-- src/pages/pnspsUserGroupDetailPage/index.js | 107 ++++++++------ .../UserGroupSearchForm.js | 6 +- src/pages/pnspsUserGroupSearchPage/index.js | 42 +++--- 29 files changed, 812 insertions(+), 473 deletions(-) diff --git a/src/components/cards/AuthFooter.js b/src/components/cards/AuthFooter.js index 304e729..cdd64c2 100644 --- a/src/components/cards/AuthFooter.js +++ b/src/components/cards/AuthFooter.js @@ -50,8 +50,9 @@ const AuthFooter = () => { W3C WAI Web Content Accessibility Guidelines 2.0"/> - logo + title="Brand Hong Kong"> + logo diff --git a/src/pages/OrganizationDetailPage/OrganizationCard.js b/src/pages/OrganizationDetailPage/OrganizationCard.js index 453801a..6523de4 100644 --- a/src/pages/OrganizationDetailPage/OrganizationCard.js +++ b/src/pages/OrganizationDetailPage/OrganizationCard.js @@ -1,6 +1,6 @@ // material-ui import { - Grid, Button, Checkbox,FormControlLabel + Grid, Button, Checkbox, FormControlLabel, Typography } from '@mui/material'; // import { FormControlLabel } from '@material-ui/core'; import MainCard from "../../components/MainCard"; @@ -129,7 +129,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => { <> {createMode ? <> - + {/*col 1*/} - + + + +
- {/*col 2*/} diff --git a/src/pages/OrganizationSearchPage/index.js b/src/pages/OrganizationSearchPage/index.js index dc4a221..a68e5be 100644 --- a/src/pages/OrganizationSearchPage/index.js +++ b/src/pages/OrganizationSearchPage/index.js @@ -1,10 +1,10 @@ // material-ui import { - Grid, Typography + Grid, Typography, Stack } from '@mui/material'; import MainCard from "../../components/MainCard"; -import {useEffect, useState} from "react"; +import { useEffect, useState } from "react"; import * as UrlUtils from "../../utils/ApiPathConst"; import * as React from "react"; import * as HttpUtils from "../../utils/HttpUtils"; @@ -17,12 +17,22 @@ import { lazy } from 'react'; const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const SearchForm = Loadable(lazy(() => import('./OrganizationSearchForm'))); const EventTable = Loadable(lazy(() => import('./OrganizationTable'))); +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize:'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} // ==============================|| DASHBOARD - DEFAULT ||============================== // const OrganizationSearchPage = () => { - const [record,setRecord] = useState([]); + const [record, setRecord] = useState([]); const [searchCriteria, setSearchCriteria] = useState({}); const [onReady, setOnReady] = useState(false); @@ -38,11 +48,11 @@ const OrganizationSearchPage = () => { getUserList(); }, [searchCriteria]); - function getUserList(){ + function getUserList() { HttpUtils.get({ url: UrlUtils.GET_ORG_PATH, params: searchCriteria, - onSuccess: function(responseData){ + onSuccess: function (responseData) { setRecord(responseData); } }); @@ -54,29 +64,32 @@ const OrganizationSearchPage = () => { return ( !onReady ? - + : - - - View Organization + + +
+ + View Organization + +
+ + {/*row 1*/} + + + + {/*row 2*/} + + + + + - - {/*row 1*/} - - - - {/*row 2*/} - - - - - - ); }; diff --git a/src/pages/Proof/Reply_GLD/ApplicationDetails.js b/src/pages/Proof/Reply_GLD/ApplicationDetails.js index 73c5830..6e1c1c2 100644 --- a/src/pages/Proof/Reply_GLD/ApplicationDetails.js +++ b/src/pages/Proof/Reply_GLD/ApplicationDetails.js @@ -16,7 +16,7 @@ const MainCard = Loadable(React.lazy(() => import('components/MainCard'))); import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; import FileList from "components/FileList" // ==============================|| DASHBOARD - DEFAULT ||============================== // -const ApplicationDetailCard = ({ formData, }) => { +const ApplicationDetailCard = ({ formData, setBackButtonPos }) => { const params = useParams(); @@ -63,10 +63,14 @@ const ApplicationDetailCard = ({ formData, }) => { minimumFractionDigits: 2 }); } - + + React.useEffect(()=>{ + if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 2}px`) + },[document.getElementById("applicationDetailsMainCard")]) return ( - diff --git a/src/pages/Proof/Reply_GLD/index.js b/src/pages/Proof/Reply_GLD/index.js index 7c08a54..5106a94 100644 --- a/src/pages/Proof/Reply_GLD/index.js +++ b/src/pages/Proof/Reply_GLD/index.js @@ -3,7 +3,8 @@ import { Grid, Typography, Stack, - Box + Box, + Button } from '@mui/material'; import * as UrlUtils from "utils/ApiPathConst"; import * as React from "react"; @@ -11,6 +12,7 @@ import * as HttpUtils from "utils/HttpUtils"; import * as DateUtils from "utils/DateUtils"; import { useParams } from "react-router-dom"; import { useNavigate } from "react-router-dom"; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; import Loadable from 'components/Loadable'; const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); @@ -36,11 +38,11 @@ const Index = () => { const [record, setRecord] = React.useState(); const [onReady, setOnReady] = React.useState(false); - React.useEffect(() => { + React.useLayoutEffect(() => { loadForm(); }, []); - React.useEffect(() => { + React.useLayoutEffect(() => { setOnReady(true); }, [record]); @@ -80,6 +82,26 @@ const Index = () => { return Array(+(zero > 0 && zero)).join("0") + num; } + // calculate back button position + + // const applicationDetailsRef = React.useCallback(node => { + // if (node === null) { + // return + // } else { + // setBackButtonLeftPos(`${node.getBoundingClientRect()?.left}px`) + // } + // }) + + const [backButtonPos, setBackButtonPos] = React.useState() + const backButtonRef = React.useRef() + React.useLayoutEffect(()=>{ + // console.log(applicationDetailsRef.current?.getBoundingClientRect()) + if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}` + },[backButtonPos]) + + // React.useEffect(()=>{ + // if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonLeftPos}` + // }, [backButtonLeftPos]) return ( !onReady ? @@ -94,13 +116,20 @@ const Index = () => { + + + {/*row 1*/}
- + import('./StatusChangeDialog'))); import * as DateUtils from "utils/DateUtils"; import { notifyActionSuccess, notifySaveSuccess } from "utils/CommonFunction"; - +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import { useNavigate } from "react-router-dom"; // ==============================|| Body - DEFAULT ||============================== // const PublicNoticeDetail_GLD = () => { const params = useParams(); - // const navigate = useNavigate() + const navigate = useNavigate() const [applicationDetailData, setApplicationDetailData] = useState({}); const [proofList, setProofList] = useState([]); // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); @@ -319,6 +321,12 @@ const PublicNoticeDetail_GLD = () => { + + + {title} diff --git a/src/pages/User/DetailPage/UserAuthTable.js b/src/pages/User/DetailPage/UserAuthTable.js index ed5c6ce..2f53a39 100644 --- a/src/pages/User/DetailPage/UserAuthTable.js +++ b/src/pages/User/DetailPage/UserAuthTable.js @@ -19,7 +19,24 @@ export default function UserAuthTable({setSelectedRow, userAuth,isNewRecord}) { const [authData, setAuthData] = useState([]); const [onReady, setOnReady] = useState(false); const [currentSelectedRow, setCurrentSelectedRow] = useState(userAuth); - + const _sx = { + ml: 3, + mb: 3, + mr: 3, + padding: "4 2 4 2", + boxShadow: 1, + border: 1, + borderColor: '#DDD', + '& .MuiDataGrid-cell': { + borderTop: 1, + borderBottom: 1, + borderColor: "#EEE" + }, + '& .MuiDataGrid-footerContainer': { + border: 1, + borderColor: "#EEE" + } + } useEffect(() => { axios.get(`${apiPath}${GET_AUTH_LIST}`) .then((response) => { @@ -78,6 +95,7 @@ export default function UserAuthTable({setSelectedRow, userAuth,isNewRecord}) { setCurrentSelectedRow(ids); }} autoHeight + sx={_sx} /> ); diff --git a/src/pages/User/DetailPage/UserAuthorityCard.js b/src/pages/User/DetailPage/UserAuthorityCard.js index 360d720..deef5ed 100644 --- a/src/pages/User/DetailPage/UserAuthorityCard.js +++ b/src/pages/User/DetailPage/UserAuthorityCard.js @@ -4,7 +4,7 @@ import { } from '@mui/material'; import MainCard from "../../../components/MainCard"; import * as React from "react"; -import {useEffect, useState} from "react"; +import { useEffect, useState } from "react"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; @@ -16,7 +16,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo // ==============================|| DASHBOARD - DEFAULT ||============================== // -const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewRecord}) => { +const UserAuthorityCard = ({ isCollectData, updateUserAuthList, userData, isNewRecord }) => { const [currentAuthData, setCurrentAuthData] = React.useState({}); const [onReady, setOnReady] = useState(false); const [selectedRow, setSelectedRow] = useState([]); @@ -44,13 +44,13 @@ const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewReco return ( !onReady ? - + : - + User Authority @@ -59,6 +59,7 @@ const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewReco setSelectedRow={setSelectedRow} isNewRecord={isNewRecord} /> +
); }; diff --git a/src/pages/User/DetailPage/UserGroupCard.js b/src/pages/User/DetailPage/UserGroupCard.js index bab3c8f..d926c95 100644 --- a/src/pages/User/DetailPage/UserGroupCard.js +++ b/src/pages/User/DetailPage/UserGroupCard.js @@ -49,7 +49,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord} border={false} content={false} > - + Group(s) +
); }; diff --git a/src/pages/User/DetailPage/UserGroupTable.js b/src/pages/User/DetailPage/UserGroupTable.js index b4b6fab..060499c 100644 --- a/src/pages/User/DetailPage/UserGroupTable.js +++ b/src/pages/User/DetailPage/UserGroupTable.js @@ -17,6 +17,25 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord}) const [groupData, setGroupData] = useState([]); const [onReady, setOnReady] = useState(false); const [currentSelectedRow, setCurrentSelectedRow] = useState(userGroup); + + const _sx = { + ml: 3, + mb: 3, + mr: 3, + padding: "4 2 4 2", + boxShadow: 1, + border: 1, + borderColor: '#DDD', + '& .MuiDataGrid-cell': { + borderTop: 1, + borderBottom: 1, + borderColor: "#EEE" + }, + '& .MuiDataGrid-footerContainer': { + border: 1, + borderColor: "#EEE" + } + } useEffect(() => { axios.get(`${apiPath}${GET_GROUP_COMBO_PATH}`) @@ -71,6 +90,7 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord}) setCurrentSelectedRow(ids); }} autoHeight + sx={_sx} /> ); diff --git a/src/pages/User/DetailPage/UserInformationCard.js b/src/pages/User/DetailPage/UserInformationCard.js index 5346bab..265d9dc 100644 --- a/src/pages/User/DetailPage/UserInformationCard.js +++ b/src/pages/User/DetailPage/UserInformationCard.js @@ -68,17 +68,16 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco border={false} content={false} > - + Information -
- + + sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> Username: diff --git a/src/pages/User/DetailPage/index.js b/src/pages/User/DetailPage/index.js index 543f91e..e8d8f76 100644 --- a/src/pages/User/DetailPage/index.js +++ b/src/pages/User/DetailPage/index.js @@ -1,15 +1,16 @@ // material-ui import { Button, - Grid, + Grid, Typography, - Stack + Stack, + Box, } from '@mui/material'; -import {useEffect, useState} from "react"; +import { useEffect, useState } from "react"; import * as React from "react"; import axios from "axios"; -import {useNavigate,useParams} from "react-router-dom"; -import {GLD_USER_PATH,DELETE_USER,POST_ADMIN_USER_REGISTER} from "../../../utils/ApiPathConst"; +import { useNavigate, useParams } from "react-router-dom"; +import { GLD_USER_PATH, DELETE_USER, POST_ADMIN_USER_REGISTER } from "../../../utils/ApiPathConst"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; @@ -23,7 +24,18 @@ import { notifyDeleteSuccess, notifySaveSuccess, } from "../../../utils/CommonFunction"; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} // ==============================|| DASHBOARD - DEFAULT ||============================== // @@ -34,8 +46,8 @@ const UserMaintainPage = () => { const [onReady, setOnReady] = useState(false); const [isCollectData, setIsCollectData] = useState(false); const [editedCustomerData, setEditedCustomerData] = useState({}); - const [userGroupData,setUserGroupData] = useState([]); - const [userAuthData,setUserAuthData] = useState([]); + const [userGroupData, setUserGroupData] = useState([]); + const [userAuthData, setUserAuthData] = useState([]); const [userConfirm, setUserConfirm] = useState(false); const [isNewRecord, setIsNewRecord] = useState(false); const [refUserData, setRefUserData] = React.useState({}); @@ -45,11 +57,11 @@ const UserMaintainPage = () => { setEditedCustomerData(userData); } - function updateUserGroupList(userGroupData){ + function updateUserGroupList(userGroupData) { setUserGroupData(userGroupData); } - function updateUserAuthList(userAuthData){ + function updateUserAuthList(userAuthData) { setUserAuthData(userAuthData); } @@ -68,7 +80,7 @@ const UserMaintainPage = () => { setIsWindowOpen(true); }; - function deleteData(){ + function deleteData() { axios.delete(`${DELETE_USER}/${params.id}`, ) .then((response) => { @@ -83,10 +95,10 @@ const UserMaintainPage = () => { return false; }); } -// ==============================|| DELETE WINDOW RELATED ||============================== // + // ==============================|| DELETE WINDOW RELATED ||============================== // useEffect(() => { - if(params.id > 0 ){ + if (params.id > 0) { axios.get(`${GLD_USER_PATH}/${params.id}`) .then((response) => { if (response.status === 200) { @@ -99,7 +111,7 @@ const UserMaintainPage = () => { return false; }); } - else{ + else { setUserData( { "authIds": [], @@ -123,18 +135,18 @@ const UserMaintainPage = () => { if (Object.keys(userData).length > 0 && userData !== undefined) { setOnReady(true); } - else if(isNewRecord){ + else if (isNewRecord) { setOnReady(true); } }, [userData]); useEffect(() => { - if(userConfirm && onReady){ - const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds,userAuthData); - const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds,userGroupData); + if (userConfirm && onReady) { + const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds, userAuthData); + const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds, userGroupData); // console.log(userGroupData) // console.log(userAuthData) - if( parseInt(params.id) >= -1){ + if (parseInt(params.id) >= -1) { axios.post(`${GLD_USER_PATH}/${params.id}`, { "enName": editedCustomerData.enName, @@ -157,8 +169,8 @@ const UserMaintainPage = () => { .catch(error => { console.log(error); return false; - }); - }else{ + }); + } else { axios.post(POST_ADMIN_USER_REGISTER, { "username": editedCustomerData.username, @@ -182,58 +194,72 @@ const UserMaintainPage = () => { .catch(error => { console.log(error); return false; - }); + }); } } setUserConfirm(false); - }, [editedCustomerData,userGroupData,userAuthData]); + }, [editedCustomerData, userGroupData, userAuthData]); return ( !onReady ? - + : - - - - Maintain User - + + +
+ + {isNewRecord ? "Create GLD User" : "Maintain GLD User"} + +
+ + + {/*col 1*/} - + + + - - + + + + {/*col 2*/} - + + + {/*bottom button*/} - + - + {/*col 1*/} - + + + - - - Files - - - - + + + + Files + + + + +
+ {/*col 2*/} diff --git a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js index 4296384..7141b28 100644 --- a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js +++ b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js @@ -165,22 +165,20 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => setIsConfirmPopUp(true); }; - return ( - {!onReady? - - : + {!onReady ? + + : {/*top button*/} - + - {editMode ? <> @@ -236,6 +234,9 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => {/*end top button*/}
+ + Organization User Details + {FieldUtils.getTextField({ @@ -312,8 +313,8 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => ); return displayOptions; }, - getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? -
BR No.: {item["brNo"]}
Org. Name(Eng): {item["enCompanyName"] === null ? "N/A" : item["enCompanyName"]}
Org. Name(CH): {item["chCompanyName"] === null ? "N/A" : item["chCompanyName"]}
: "") + getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? +
BR No.: {item["brNo"]}
Org. Name(Eng): {item["enCompanyName"] === null ? "N/A" : item["enCompanyName"]}
Org. Name(CH): {item["chCompanyName"] === null ? "N/A" : item["chCompanyName"]}
: "") : "", isOptionEqualToValue: (option, newValue, setValue, setInputValue) => { if (option.id == newValue || option.id == newValue.id) { @@ -324,7 +325,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => return option == newValue || option.id == newValue.id; }, onInputChange: (event, newValue, setInputValue) => { - if (newValue !== "[object Object]" ) { + if (newValue !== "[object Object]") { setInputValue(newValue); } }, @@ -449,28 +450,18 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => } - } - - - -
+
- - + - - - Organization - - - {currentUserData.orgId==null? + {currentUserData.orgId == null ? - :null + : null } - + + + Organization + + {FieldUtils.getTextField({ label: "Org.Name (English):", @@ -587,7 +582,6 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
- ); }; diff --git a/src/pages/User/DetailsPage_Organization/index.js b/src/pages/User/DetailsPage_Organization/index.js index 4702a12..8197803 100644 --- a/src/pages/User/DetailsPage_Organization/index.js +++ b/src/pages/User/DetailsPage_Organization/index.js @@ -1,10 +1,10 @@ // material-ui -import {Grid, Typography} from '@mui/material'; -import {useEffect, useState} from "react"; +import { Grid, Typography, Stack, Box, Button } from '@mui/material'; +import { useEffect, useState } from "react"; import * as React from "react"; //import axios from "axios"; import * as HttpUtils from "../../../utils/HttpUtils"; -import {useParams} from "react-router-dom"; +import { useParams } from "react-router-dom"; import FileList from "../../../components/FileList" import MainCard from "../../../components/MainCard"; import * as UrlUtils from "../../../utils/ApiPathConst"; @@ -14,74 +14,105 @@ import Loadable from 'components/Loadable'; import { lazy } from 'react'; const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Organization'))); - +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' +import { useNavigate } from 'react-router-dom'; + +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} // ==============================|| DASHBOARD - DEFAULT ||============================== // const UserMaintainPage_Organization = () => { const params = useParams(); - const [userData, setUserData] = useState({}) - const [orgData, setOrgData] = useState({}) + const navigate = useNavigate(); + const [userData, setUserData] = useState({}) + const [orgData, setOrgData] = useState({}) const [isLoading, setLoding] = useState(true); + const _sx = { + ml: 3, + mb: 3, + mr: 3, + padding: "4 2 4 2", + boxShadow: 1, + border: 1, + borderColor: '#DDD', + '& .MuiDataGrid-cell': { + borderTop: 1, + borderBottom: 1, + borderColor: "#EEE" + }, + '& .MuiDataGrid-footerContainer': { + border: 1, + borderColor: "#EEE" + } + } - useEffect(()=>{ + useEffect(() => { // console.log(userData); loadData(); - },[]); + }, []); // const reloadPage=()=>{ // window.location.reload(false); // } - const loadData = ()=>{ + const loadData = () => { setLoding(true); HttpUtils.get({ url: `${UrlUtils.GET_ORG_USER_PATH}/${params.id}`, - onSuccess: function(response){ + onSuccess: function (response) { console.log(response) - if(response.data.orgId !=null){ + if (response.data.orgId != null) { response.data["addressBus"] = response.orgDetail.data["addressTemp"]; response.data["contactTel"] = response.orgDetail.data["contactTel"]; response.data["faxNo"] = response.orgDetail.data["faxNo"]; - response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate?DateUtils.dateStr(response.orgDetail.data.brExpiryDate):""; + response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate ? DateUtils.dateStr(response.orgDetail.data.brExpiryDate) : ""; response.data["brNo"] = response.orgDetail.data.brNo; response.data["enCompanyName"] = response.orgDetail.data.enCompanyName; response.data["chCompanyName"] = response.orgDetail.data.chCompanyName; response.data["chCompanyName"] = response.orgDetail.data.chCompanyName; - }else{ + } else { response.data["addressBus"] = JSON.parse(response.data["addressBus"]); response.data["contactTel"] = JSON.parse(response.data["contactTel"]); response.data["faxNo"] = JSON.parse(response.data["faxNo"]); - response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):""; + response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : ""; } let createDate = DateUtils.datetimeStr(response.data.created); - let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy; + let modifiedBy = DateUtils.datetimeStr(response.data.modified) + ", " + response.data.modifiedBy; response.data["createDate"] = createDate; response.data["modifieDate"] = modifiedBy; - response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verified"; - - response.data["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLoginDate):""; - + response.data["verifiedStatus"] = response.data.verifiedBy ? DateUtils.datetimeStr(response.data.verifiedDate) + ", " + response.data.verifiedByName : "Not verified"; + + response.data["lastLoginDate"] = response.data.lastLogin ? DateUtils.datetimeStr(response.data.lastLoginDate) : ""; + response.data["country"] = response.data.addressBus?.country; response.data["district"] = response.data.addressBus?.district; response.data["addressLine1"] = response.data.addressBus?.addressLine1; response.data["addressLine2"] = response.data.addressBus?.addressLine2; response.data["addressLine3"] = response.data.addressBus?.addressLine3; - + response.data["phoneNumber"] = response.data.contactTel?.phoneNumber; response.data["tel_countryCode"] = response.data.contactTel?.countryCode; - + response.data["faxNumber"] = response.data.faxNo?.faxNumber; response.data["fax_countryCode"] = response.data.faxNo?.countryCode; - + //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):""; - + setUserData(response.data); setOrgData(response.orgList); } @@ -90,37 +121,53 @@ const UserMaintainPage_Organization = () => { useEffect(() => { - setLoding(false); + setLoding(false); }, [userData]); return ( isLoading ? - + : - - - Organization User Details + + +
+ + Maintain Organization User + +
+ + + {/*col 1*/} - + + +
+ - - - Files - - - + + + + Files + + + + +
diff --git a/src/pages/User/SearchPage/UserSearchForm.js b/src/pages/User/SearchPage/UserSearchForm.js index aef1307..7adf346 100644 --- a/src/pages/User/SearchPage/UserSearchForm.js +++ b/src/pages/User/SearchPage/UserSearchForm.js @@ -6,21 +6,22 @@ import { Typography } from '@mui/material'; import MainCard from "../../../components/MainCard"; -import {useForm} from "react-hook-form"; +import { useForm } from "react-hook-form"; import { // useEffect, - useState} from "react"; + useState +} from "react"; import Checkbox from "@mui/material/Checkbox"; import * as React from "react"; import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; -import {useNavigate} from "react-router"; +import { useNavigate } from "react-router"; // ==============================|| DASHBOARD - DEFAULT ||============================== // -const UserSearchForm = ({applySearch}) => { +const UserSearchForm = ({ applySearch }) => { const navigate = useNavigate(); const [type, setType] = useState([]); @@ -32,7 +33,7 @@ const UserSearchForm = ({applySearch}) => { let typeArray = []; - for(let i =0; i < type.length; i++){ + for (let i = 0; i < type.length; i++) { typeArray.push(type[i].label); } @@ -48,21 +49,22 @@ const UserSearchForm = ({applySearch}) => { }; - function resetForm(){ + function resetForm() { setType([]); setLocked(false); reset(); } - const handleNewUserClick = (id) => { + const handleNewUserClick = () => { // console.log(id) - navigate('/user/'+ id); + navigate('/user/-1'); + // navigate('/user/' + id); }; return ( + border={false} + content={false}> {/*row 1*/} @@ -74,7 +76,7 @@ const UserSearchForm = ({applySearch}) => { {/*row 2*/} - + { /> - + { /> - + { /> - + { /> - + { /> - + { - - + - - - + + + - + - + + {/*col 1*/} From 3e99e5cc1b5227bc092fd1a21a1f58030739819b Mon Sep 17 00:00:00 2001 From: "cyril.tsui" Date: Mon, 30 Oct 2023 18:22:19 +0800 Subject: [PATCH 5/6] Update UI --- .../Create_FromApp/ApplicationDetails.js | 9 +- .../Proof/Create_FromApp/GazetteDetails.js | 5 +- src/pages/Proof/Create_FromApp/ProofForm.js | 4 +- src/pages/Proof/Create_FromApp/index.js | 83 +++++++++++-------- 4 files changed, 62 insertions(+), 39 deletions(-) diff --git a/src/pages/Proof/Create_FromApp/ApplicationDetails.js b/src/pages/Proof/Create_FromApp/ApplicationDetails.js index f91d8f4..cbedec8 100644 --- a/src/pages/Proof/Create_FromApp/ApplicationDetails.js +++ b/src/pages/Proof/Create_FromApp/ApplicationDetails.js @@ -5,6 +5,7 @@ import { Stack, TextField, FormLabel, + Typography } from '@mui/material'; import MainCard from "components/MainCard"; import * as React from "react"; @@ -12,12 +13,12 @@ import { useFormik } from 'formik'; // ==============================|| DASHBOARD - DEFAULT ||============================== // -const SearchPublicNoticeForm = ({formData}) => { +const SearchPublicNoticeForm = ({ formData }) => { const [data, setData] = React.useState({}); React.useEffect(() => { - if(formData) + if (formData) setData(formData); }, [formData]); @@ -58,7 +59,9 @@ const SearchPublicNoticeForm = ({formData}) => { {/*row 1*/} - Application Details + + Application Details + diff --git a/src/pages/Proof/Create_FromApp/GazetteDetails.js b/src/pages/Proof/Create_FromApp/GazetteDetails.js index 118b626..dafbbf7 100644 --- a/src/pages/Proof/Create_FromApp/GazetteDetails.js +++ b/src/pages/Proof/Create_FromApp/GazetteDetails.js @@ -4,6 +4,7 @@ import { CardContent, FormLabel, TextField, + Typography } from '@mui/material'; import MainCard from "components/MainCard"; import * as React from "react"; @@ -60,7 +61,9 @@ const GazetteDetails = ({ formData }) => { {/*row 1*/} - Gazette Details + + Gazette Details + diff --git a/src/pages/Proof/Create_FromApp/ProofForm.js b/src/pages/Proof/Create_FromApp/ProofForm.js index 437481f..fe51f41 100644 --- a/src/pages/Proof/Create_FromApp/ProofForm.js +++ b/src/pages/Proof/Create_FromApp/ProofForm.js @@ -162,7 +162,9 @@ const FormPanel = ({ formData }) => { {/*row 1*/} - Proof + + Proof + diff --git a/src/pages/Proof/Create_FromApp/index.js b/src/pages/Proof/Create_FromApp/index.js index 94deb29..91169cc 100644 --- a/src/pages/Proof/Create_FromApp/index.js +++ b/src/pages/Proof/Create_FromApp/index.js @@ -1,6 +1,6 @@ // material-ui import { - Grid, + Grid, Box } from '@mui/material'; import MainCard from "components/MainCard"; import * as UrlUtils from "utils/ApiPathConst"; @@ -44,7 +44,7 @@ const Index = () => { responseData.data["faxNumber"] = JSON.parse(responseData.data.contactFaxNo).faxNumber; responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode; - responseData.data["issueNoStr"] = responseData.data.issueVolume+"/"+responseData.data.issueYear+" No. "+responseData.data.issueNo + responseData.data["issueNoStr"] = responseData.data.issueVolume + "/" + responseData.data.issueYear + " No. " + responseData.data.issueNo responseData.data["issueDate"] = DateUtils.dateStr(responseData.data.issueDate); responseData.data["groupType"] = responseData.data.groupNo.charAt(0); @@ -58,44 +58,59 @@ const Index = () => { !onReady ? : + - {/*row 1*/} - - - - + + {/*row 1*/} + + + + + + + + + + + + - - + {/*row 2*/} + + + + + - + +
+ - - {/*row 2*/} - - - - - + + ); }; From bad2ae4fcb557a4e2444c5ff033bdf7c9d4cc03a Mon Sep 17 00:00:00 2001 From: "cyril.tsui" Date: Mon, 30 Oct 2023 18:23:36 +0800 Subject: [PATCH 6/6] Update UI --- src/pages/Proof/Create_FromApp/index.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/pages/Proof/Create_FromApp/index.js b/src/pages/Proof/Create_FromApp/index.js index 91169cc..c04f89f 100644 --- a/src/pages/Proof/Create_FromApp/index.js +++ b/src/pages/Proof/Create_FromApp/index.js @@ -1,6 +1,6 @@ // material-ui import { - Grid, Box + Grid, Box, Stack, Typography } from '@mui/material'; import MainCard from "components/MainCard"; import * as UrlUtils from "utils/ApiPathConst"; @@ -14,7 +14,17 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails'))); const GazetteDetails = Loadable(React.lazy(() => import('./GazetteDetails'))); const ProofForm = Loadable(React.lazy(() => import('./ProofForm'))); - +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' + +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize:'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} // ==============================|| DASHBOARD - DEFAULT ||============================== // const Index = () => { @@ -64,6 +74,13 @@ const Index = () => { elevation={0} border={false} content={false}> + +
+ + Create Proof + +
+ {/*row 1*/}