add payment message with locale

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) => {
                                               </Button>
                                           </Grid>
                                           <Grid item>
-                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
-                                                  <img className={mastercardClass} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
+                                              <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("MasterCard")} disabled={props.creditCardStatus.active === "N"}>
+                                                  <img className={mastercardClass} src={MasterIcon} width="80" height="80" alt="MasterCard"></img>
                                               </Button>
                                           </Grid>
                                           <Grid item>
@@ -235,6 +247,25 @@ const MultiPaymentWindow = (props) => {
                                     </Typography>
                                 </Grid>
                             </Grid>
+                            {paymentMethod !=""?
+                              filteredPaymentMethod.map((availableMethod) => {
+                                return (
+                                  <Grid container key={availableMethod.subtype} className={"css-1tx0bae"} sx={{ mt: 1, p:2 }}>
+                                    {availableMethod.pointstonote.map((pointstonote) => {
+                                      return (
+                                        <Grid container key={pointstonote.order} sx={{ p:0.5 }} direction="row" justifyContent="flex-start" alignItems="center">
+                                          <Grid item>
+                                            <Typography sx={{fontSize: "16px", color: "#000000", textAlign: "left" }}>
+                                             {pointstonote.content}
+                                            </Typography> 
+                                          </Grid>
+                                        </Grid>
+                                      );
+                                    })}
+                                  </Grid>
+                                );
+                              }) 
+                            : null}
                         </Grid>
                     </center>
                   </Grid>

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": [
                 //     "<eserviceid>", "<eserviceid>"
@@ -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"
         //                 }

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:()=>{
+
                 }
             });
         }