From a81c18d88c0ddb785a569ae71e8921c0679e06f2 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Tue, 16 Jan 2024 12:46:33 +0800 Subject: [PATCH] add payment message with locale --- src/pages/Payment/MultiPaymentWindow.js | 41 ++++++++++++++++++++++--- src/pages/Payment/index.js | 16 +++++----- src/pages/Proof/Payment/Pay.js | 11 ++++--- 3 files changed, 52 insertions(+), 16 deletions(-) diff --git a/src/pages/Payment/MultiPaymentWindow.js b/src/pages/Payment/MultiPaymentWindow.js index 0c82d31..a962987 100644 --- a/src/pages/Payment/MultiPaymentWindow.js +++ b/src/pages/Payment/MultiPaymentWindow.js @@ -47,17 +47,18 @@ const MultiPaymentWindow = (props) => { const [jCBClass, setJCBClass] = useState(""); const [unionPayClass, setUnionPayClass] = useState(""); const [pPSClass, setPPSlass] = useState(""); + const [filteredPaymentMethod, setFilteredPaymentMethod] = useState([]); // const [onReady, setOnReady] = useState(false); useEffect(() => { - console.log(props.transactionData) + // console.log(props.transactionData) if(Object.keys(props.transactionData).length > 0){ setLoadtTransactionData(props.transactionData) } }, [props.transactionData]); useEffect(() => { - console.log(props.availableMethods) + // console.log(props.availableMethods) if(props.availableMethods.length > 0){ setLoadAvailableMethodData(props.availableMethods) } @@ -89,9 +90,20 @@ const MultiPaymentWindow = (props) => { useEffect(() => { console.log(paymentMethod) + // const subtype = (paymentMethod === "Visa" || paymentMethod === "MasterCard" || paymentMethod === "JCB" || paymentMethod === "UnionPay") ? "CreditCard" : paymentMethod; + // const filteredPaymentMethod = availableMethodData.filter(obj => obj.subtype === subtype); + const filteredPaymentMethod = availableMethodData.filter(obj => { + if (obj.supportedcard && obj.supportedcard.includes(paymentMethod)) { + return obj.subtype === "CreditCard"; + } + return obj.subtype === paymentMethod; + }); + console.log(filteredPaymentMethod) + setFilteredPaymentMethod(filteredPaymentMethod); + setFpsClass(paymentMethod == "FPS" || paymentMethod == "" ? "" : "grayscale") setVisaClass(paymentMethod == "Visa" || paymentMethod == "" ? "" : "grayscale") - setMastercardClass(paymentMethod == "Mastercard" || paymentMethod == "" ? "" : "grayscale") + setMastercardClass(paymentMethod == "MasterCard" || paymentMethod == "" ? "" : "grayscale") setJCBClass(paymentMethod == "JCB" || paymentMethod == "" ? "" : "grayscale") setUnionPayClass(paymentMethod == "UnionPay" || paymentMethod == "" ? "" : "grayscale") setPPSlass(paymentMethod == "PPS" || paymentMethod == "" ? "" : "grayscale") @@ -177,8 +189,8 @@ const MultiPaymentWindow = (props) => { - @@ -235,6 +247,25 @@ const MultiPaymentWindow = (props) => { + {paymentMethod !=""? + filteredPaymentMethod.map((availableMethod) => { + return ( + + {availableMethod.pointstonote.map((pointstonote) => { + return ( + + + + {pointstonote.content} + + + + ); + })} + + ); + }) + : null} diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js index 0a85dec..a026260 100644 --- a/src/pages/Payment/index.js +++ b/src/pages/Payment/index.js @@ -31,7 +31,7 @@ import { import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' import {ThemeProvider} from "@emotion/react"; import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst"; -import {FormattedMessage} from "react-intl"; +import {FormattedMessage,useIntl} from "react-intl"; const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, width: '100%', @@ -47,8 +47,10 @@ const Index = () => { const getTransactionIdUrl = "/api/payment/transaction"; const navigate = useNavigate() const location = useLocation(); + const intl = useIntl(); + const { locale } = intl; - // const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"}; + const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"}; const preferpaymentmethods = ['visa', 'mastercard', 'pps', 'creditcard', 'fps']; const [totalAmount, setTotalAmount] = useState(0); const [appIds, setAppIds] = useState([]); @@ -119,9 +121,9 @@ const Index = () => { page = '/paymentPage/card'; stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "Visa", paymentMethod: "02,BCMP,CreditCard" } } paymentMethod = "02,BCMP,CreditCard"; - } else if (selectedPaymentMethod === "Mastercard") { + } else if (selectedPaymentMethod === "MasterCard") { page = '/paymentPage/card'; - stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "Mastercard", paymentMethod: "02,BCMP,CreditCard" } } + stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "MasterCard", paymentMethod: "02,BCMP,CreditCard" } } paymentMethod = "02,BCMP,CreditCard"; } else if (selectedPaymentMethod === "JCB") { page = '/paymentPage/card'; @@ -159,7 +161,7 @@ const Index = () => { HttpUtils.post({ url: paymentPath + getAvailablePaymentUrl, params: { - // "locale": local.zh, + "locale": locale === 'en' ?local.en:locale === 'zh-HK' ?local.zh:local.cn, "amount": totalAmount, // "eserviceids": [ // "", "" @@ -225,7 +227,7 @@ const Index = () => { // "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. ", + // "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" // } @@ -267,7 +269,7 @@ const Index = () => { // "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. ", + // "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" // } diff --git a/src/pages/Proof/Payment/Pay.js b/src/pages/Proof/Payment/Pay.js index 7f1d7fe..6c1de24 100644 --- a/src/pages/Proof/Payment/Pay.js +++ b/src/pages/Proof/Payment/Pay.js @@ -42,7 +42,7 @@ const Index = () => { const navigate = useNavigate() const [fee, setFee] = useState(0); - const [record, setRecord] = React.useState(); + const [record, setRecord] = React.useState({}); const [onReady, setOnReady] = React.useState(false); const [isPopUp, setIsPopUp] = useState(false); @@ -60,11 +60,14 @@ const Index = () => { HttpUtils.get({ url: UrlUtils.GET_PROOF_PAY + "/" + params.id, onSuccess: (responseData) => { - if (!responseData.data?.id) { - navigate("/proof/search"); - } + // if (!responseData.data?.id) { + // navigate("/proof/search"); + // } setRecord(responseData.data); setFee(responseData.data.fee); + }, + onError:()=>{ + } }); }