diff --git a/src/assets/images/icons/fps.svg b/src/assets/images/icons/fps.svg index c54595e..8ed999d 100644 --- a/src/assets/images/icons/fps.svg +++ b/src/assets/images/icons/fps.svg @@ -1,7 +1,8 @@ - + + \ No newline at end of file diff --git a/src/assets/images/icons/jcb.svg b/src/assets/images/icons/jcb.svg new file mode 100644 index 0000000..9f87dd7 --- /dev/null +++ b/src/assets/images/icons/jcb.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/mastercard.svg b/src/assets/images/icons/mastercard.svg new file mode 100644 index 0000000..7d6b48c --- /dev/null +++ b/src/assets/images/icons/mastercard.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + diff --git a/src/assets/images/icons/ppshk.svg b/src/assets/images/icons/ppshk.svg new file mode 100644 index 0000000..b86637a --- /dev/null +++ b/src/assets/images/icons/ppshk.svg @@ -0,0 +1,115 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icons/unionpay.svg b/src/assets/images/icons/unionpay.svg new file mode 100644 index 0000000..877f2fa --- /dev/null +++ b/src/assets/images/icons/unionpay.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icons/visacard.svg b/src/assets/images/icons/visacard.svg new file mode 100644 index 0000000..995e9af --- /dev/null +++ b/src/assets/images/icons/visacard.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/src/pages/Payment/Card/index.js b/src/pages/Payment/Card/index.js index c75c9b0..c77c215 100644 --- a/src/pages/Payment/Card/index.js +++ b/src/pages/Payment/Card/index.js @@ -28,21 +28,20 @@ const BackgroundHead = { } -const Index = ({ isPopUp, url }) => { +const Index = () => { const navigate = useNavigate() const location = useLocation(); const [paymentData, setPaymentData] = React.useState({}); const [onReady, setOnReady] = React.useState(false); - const [paymentid, setPaymentid] = React.useState(""); const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState(""); const [redirecturl, setRedirectUrl] = 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/web/"; + const loadPaymentUrl = "/api/payment/web/"; const cancelPaymentUrl = "/api/payment/cancelpayment"; // const paymentStatusApi = "/api/payment/status/"; // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/"; @@ -53,7 +52,6 @@ const Index = ({ isPopUp, url }) => { const [time, setTime] = React.useState(0); React.useEffect(() => { - setFpsqrcodeimgbase64("") if (location.state != undefined) { setPaymentData(location.state) } @@ -74,43 +72,42 @@ const Index = ({ isPopUp, url }) => { const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]" const convertedDateString = timeoutdatetime.replace("[UTC]", ""); setFpsmerchanttimeoutdatetime(convertedDateString) - setPaymentid("C202310268000681") - // HttpUtils.post({ - // url: paymentPath+loadPaymentUrl+paymentData.type, - // params:{ - // "transactionid": paymentData.transactionid, - // "apprefid:": paymentData.transactionid, - // "webtoken": paymentData.webtoken, - // "paymentmethod":paymentData.paymentMethod, - // "order": { - // "totalamount":paymentData.amount, - // "currency":"HKD", - // "orderdetail": - // [ - // { - // "itemid": "1", - // "qty":"1", - // "unitprice":paymentData.amount, - // "amount":paymentData.amount - // }, - // ] - // }, - // // "locale":"", - // // "eserviceid":"", - // "returnurl": window.location.hostname+"/payment/success" - // }, - // onSuccess: function(responseData){ - // /* - // { - // "transactionid": "", - // "redirecturl": "" - // } - // */ - // setRedirectUrl(responseData.redirecturl); - // - // } - // }); + HttpUtils.post({ + url: paymentPath+loadPaymentUrl+paymentData.type, + params:{ + "transactionid": paymentData.transactionid, + "apprefid:": paymentData.transactionid, + "webtoken": paymentData.webtoken, + "paymentmethod":paymentData.paymentMethod, + "order": { + "totalamount":paymentData.amount, + "currency":"HKD", + "orderdetail": + [ + { + "itemid": "1", + "qty":"1", + "unitprice":paymentData.amount, + "amount":paymentData.amount + }, + ] + }, + // "locale":"", + // "eserviceid":"", + "returnurl": window.location.hostname+"/payment/success" + }, + onSuccess: function(responseData){ + /* + { + "transactionid": "", + "redirecturl": "" + } + */ + setRedirectUrl(responseData.redirecturl); + + } + }); } const getPaymentStatus = () => { diff --git a/src/pages/Payment/MultiPaymentWindow.js b/src/pages/Payment/MultiPaymentWindow.js index dca60f7..6e38894 100644 --- a/src/pages/Payment/MultiPaymentWindow.js +++ b/src/pages/Payment/MultiPaymentWindow.js @@ -19,6 +19,13 @@ import { import { useFormik, FormikProvider } from 'formik'; import * as yup from 'yup'; +import FpsIcon from "assets/images/icons/fps.svg"; +import VisaIcon from "assets/images/icons/visacard.svg"; +import MasterIcon from "assets/images/icons/mastercard.svg"; +import JcbIcon from "assets/images/icons/jcb.svg"; +import UnionPayIcon from "assets/images/icons/unionpay.svg"; +import PpsIcon from "assets/images/icons/ppshk.svg"; + const MultiPaymentWindow = (props) => { @@ -30,114 +37,119 @@ const MultiPaymentWindow = (props) => { console.log(paymentMethod) }, [paymentMethod]); - const selectedPaymentMethodHandle = (method) => () =>{ + const selectedPaymentMethodHandle = (method) => () => { setPaymentMethod(method) props.setSelectedPaymentMethod(method); }; - const confirmPaymentHandle = () => () =>{ + const confirmPaymentHandle = () => () => { props.setConfirmPayment(true); }; useEffect(() => { - if(props.selectedPaymentMethod === ""){ + if (props.selectedPaymentMethod === "") { setPaymentMethod("") } - setPaymentMethod - if(props.availableMethods.length > 0){ - setContent( - - - - - - 交易參考編號: - - - - - {props.transactionData.transicationId} - - + + //if(props.availableMethods.length > 0){ + setContent( + + + + + + 交易參考編號: + + + + + {props.transactionData.transicationId} + - - - - - 付款金額: - - - - - {"HK$ "+props.totalAmount} - - + + + + + + 付款金額: + + + + + {"HK$ " + props.totalAmount} + + + + + + + 付款方式: + + + + + + + + + + + + + + + + + + + + + + + {paymentMethod != "" ? - + - 付款方式: + 已選擇付款方式: - - - - - - - - - - - - - + + {paymentMethod} + - {paymentMethod !=""? - - - - - 已選擇付款方式: - - - - - {paymentMethod} - - - - : null} - - ) - }else{ - setContent( - - - 付款功能現在不可用。 - - - ) - } - }, [props.open,paymentMethod]); + + ) + // }else{ + // setContent( + // + // + // 付款功能現在不可用。 + // + // + // ) + // } + }, [props.open, paymentMethod]); const formik = useFormik({ initialValues: ({ @@ -159,7 +171,7 @@ const MultiPaymentWindow = (props) => { - {windowTitle} + {windowTitle} diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js index 1b55fba..355d32e 100644 --- a/src/pages/Payment/index.js +++ b/src/pages/Payment/index.js @@ -26,12 +26,12 @@ const BackgroundHead = { } const Index = () => { - // const getAvailablePaymentUrl = "/payment/api/payment/availability"; + const getAvailablePaymentUrl = "/payment/api/payment/availability"; const getTransactionIdUrl = "/payment/api/payment/transaction"; const navigate = useNavigate() // const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"}; - // const preferpaymentmethods = ['visa','mastercard','pps','creditcard','fps']; + const preferpaymentmethods = ['visa','mastercard','pps','creditcard','fps']; const [totalAmount,setTotalAmount] = useState(0); const id =1; diff --git a/src/themes/palette.js b/src/themes/palette.js index 0246acb..7812d99 100644 --- a/src/themes/palette.js +++ b/src/themes/palette.js @@ -53,6 +53,12 @@ const Palette = (mode) => { paper: paletteColor.grey[0], default: paletteColor.grey.A50 }, + white: { + main: '#fff', + light: '#fff', + dark: '#eee', + contrastText: '#222', + }, ochre: { main: '#E3D026', light: '#E9DB5D',