diff --git a/src/pages/Payment/MultiPaymentWindow.js b/src/pages/Payment/MultiPaymentWindow.js index a2bd5cd..85e2cda 100644 --- a/src/pages/Payment/MultiPaymentWindow.js +++ b/src/pages/Payment/MultiPaymentWindow.js @@ -40,6 +40,8 @@ const MultiPaymentWindow = (props) => { const [loadtTransactionData, setLoadtTransactionData] = useState({}); const [loadAvailableMethodData, setLoadAvailableMethodData] = useState([]); const [paymentMethod, setPaymentMethod] = useState(""); + const [isLimit, setIsLimit] = useState(false); + const [isPPSLimit, setIsPPSLimit] = useState(false); const [transactionData, setTransactionData] = useState({}); const [availableMethodData, setAvailableMethodData] = useState([]); const [fpsClass, setFpsClass] = useState(""); @@ -49,7 +51,7 @@ const MultiPaymentWindow = (props) => { const [unionPayClass, setUnionPayClass] = useState(""); const [pPSClass, setPPSlass] = useState(""); const [filteredPaymentMethod, setFilteredPaymentMethod] = useState([]); - // const [onReady, setOnReady] = useState(false); + const [onReady, setOnReady] = useState(false); useEffect(() => { // console.log(props.transactionData) @@ -83,50 +85,123 @@ const MultiPaymentWindow = (props) => { } }, [loadAvailableMethodData]); - // useEffect(() => { - // if(availableMethodData.length > 0 && Object.keys(transactionData).length > 0){ - // setOnReady(true) - // } - // }, [availableMethodData]); + useEffect(() => { + if(filteredPaymentMethod!= undefined && filteredPaymentMethod.length>0){ + setOnReady(true) + } else if(filteredPaymentMethod!= undefined && Object.keys(filteredPaymentMethod).length > 0){ + setOnReady(true) + } + + }, [filteredPaymentMethod]); 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"; + const availableMethod = availableMethodData; + + if(props.availableMethods.length > 0){ + const filteringPaymentMethod = availableMethod.filter(obj => { + if (obj.supportedcard && obj.supportedcard.includes(paymentMethod)) { + return obj.subtype === "CreditCard"; + } + return obj.subtype === paymentMethod; + }); + + if (isLimit && filteringPaymentMethod!= undefined && filteringPaymentMethod.length>0){ + if (paymentMethod == "FPS" || paymentMethod == "PPS"){ + filteringPaymentMethod[0].pointstonote = paymentMethod + intl.formatMessage({id: 'paymentLimitPrice1'}) + setFilteredPaymentMethod(filteringPaymentMethod[0]); + } else if (isLimit) { + filteringPaymentMethod[0].pointstonote = paymentMethod + intl.formatMessage({id: 'paymentLimitPrice2'}) + setFilteredPaymentMethod(filteringPaymentMethod[0]); + } + } + + if (!isLimit && filteringPaymentMethod!= undefined && filteringPaymentMethod.length>0){ + setFilteredPaymentMethod(filteringPaymentMethod); + } + + if(isPPSLimit && filteringPaymentMethod!= undefined && filteringPaymentMethod.length>0 && paymentMethod =="PPS"){ + filteringPaymentMethod[0].pointstonote = paymentMethod + intl.formatMessage({id: 'paymentLimitPPS'}) + setFilteredPaymentMethod(filteringPaymentMethod[0]); } - return obj.subtype === paymentMethod; - }); - // console.log(filteredPaymentMethod) - setFilteredPaymentMethod(filteredPaymentMethod); + + setFpsClass(paymentMethod == "FPS" || paymentMethod == "" ? "" : "grayscale") + setVisaClass(paymentMethod == "Visa" || paymentMethod == "" ? "" : "grayscale") + setMastercardClass(paymentMethod == "MasterCard" || paymentMethod == "" ? "" : "grayscale") + setJCBClass(paymentMethod == "JCB" || paymentMethod == "" ? "" : "grayscale") + setUnionPayClass(paymentMethod == "UnionPay" || paymentMethod == "" ? "" : "grayscale") + setPPSlass(paymentMethod == "PPS" || paymentMethod == "" ? "" : "grayscale") - setFpsClass(paymentMethod == "FPS" || paymentMethod == "" ? "" : "grayscale") - setVisaClass(paymentMethod == "Visa" || paymentMethod == "" ? "" : "grayscale") - setMastercardClass(paymentMethod == "MasterCard" || paymentMethod == "" ? "" : "grayscale") - setJCBClass(paymentMethod == "JCB" || paymentMethod == "" ? "" : "grayscale") - setUnionPayClass(paymentMethod == "UnionPay" || paymentMethod == "" ? "" : "grayscale") - setPPSlass(paymentMethod == "PPS" || paymentMethod == "" ? "" : "grayscale") - // getMethodImgClass(paymentMethod) - }, [paymentMethod]); + } + }, [paymentMethod]); + const selectedPaymentMethodHandle = (method) => () =>{ - console.log(getBowserType()) - if (getBowserType() === "PC_Browser"){ - setPaymentMethod(method) - props.setSelectedPaymentMethod(method); - } - if (getBowserType() !== "PC_Browser" && method !== "PPS"){ - setPaymentMethod(method) - props.setSelectedPaymentMethod(method); + if (method != paymentMethod){ + resetForm() + let totalAmount = props.totalAmount; + // totalAmount = 99999999.99 + // totalAmount = 0.01 + const paymentLimitList = props.paymentLimit + let limitRecordList; + + switch (method) { + case "Visa": + case "JCB": + case "MasterCard": + limitRecordList = paymentLimitList.creditCardLimitRecord; + break; + case "FPS": + limitRecordList = paymentLimitList.fpsLimitRecord; + break; + case "PPS": + limitRecordList = paymentLimitList.ppsbLimitRecord; + break; + case "UnionPay": + limitRecordList = paymentLimitList.unionPlayLimitRecord; + break; + default: + break; + } + + if (totalAmount >= limitRecordList.minLimit && totalAmount <= limitRecordList.maxLimit) { + setIsLimit(false) + } else { + setIsLimit(true) + } + if (getBowserType() === "PC_Browser"){ + setPaymentMethod(method) + props.setSelectedPaymentMethod(method); + setIsPPSLimit(false) + } else if (getBowserType() !== "PC_Browser" && method !== "PPS"){ + setPaymentMethod(method) + props.setSelectedPaymentMethod(method); + } else { + setPaymentMethod(method) + setIsPPSLimit(true) + } + } + }; const confirmPaymentHandle = () => () =>{ props.setConfirmPayment(true); }; + const closeHandle = () => () =>{ + resetForm() + props.setOpen(false) + }; + + const resetForm = () =>{ + setOnReady(false) + setPaymentMethod("") + setFilteredPaymentMethod([]) + setIsLimit(false) + setIsPPSLimit(false) + }; + + useEffect(() => { if(props.selectedPaymentMethod === ""){ setPaymentMethod("") @@ -147,6 +222,7 @@ const MultiPaymentWindow = (props) => { onClose={() => props.setOpen(false)} fullWidth={true} maxWidth={'xl'} + fullScreen={props.isFullScreen} > @@ -186,6 +262,7 @@ const MultiPaymentWindow = (props) => { : + - diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js index fc14f42..9f301a3 100644 --- a/src/pages/Payment/index.js +++ b/src/pages/Payment/index.js @@ -7,9 +7,9 @@ const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid'))) // const FPS = Loadable(React.lazy(() => import('./FPS'))); import { useEffect, useState } from "react"; import { useNavigate, useLocation } from "react-router-dom"; -import { paymentPath } from "auth/utils"; // import * as FormatUtils from "utils/FormatUtils"; // const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); +import {getBowserType} from "auth/utils"; import { Button, @@ -25,7 +25,7 @@ import {ThemeProvider} from "@emotion/react"; import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst"; import { FormattedMessage, - // useIntl + useIntl } from "react-intl"; const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, @@ -38,12 +38,10 @@ const BackgroundHead = { } const Index = () => { - // const getAvailablePaymentUrl = "/api/payment/availability"; - const getTransactionIdUrl = "/api/payment/transaction"; const navigate = useNavigate() const location = useLocation(); - // const intl = useIntl(); - // const { locale } = intl; + const intl = useIntl(); + const { locale } = intl; // const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"}; // const preferpaymentmethods = ['visa', 'mastercard', 'pps', 'creditcard', 'fps']; @@ -54,6 +52,7 @@ const Index = () => { //statusWindow const [open, setOpen] = useState(false); const [availableMethods, setAvailableMethods] = useState([]); + const [paymentLimit, setPaymentLimit] = useState([]); const [transactionData, setTransactionData] = useState({}); const [fpsStatus, setFPSStatus] = useState({}); const [creditCardStatus, setCreditCardStatus] = useState({}); @@ -65,6 +64,7 @@ const Index = () => { const [itemList, setItemList] = useState([]); const [onReady, setOnReady] = useState(false); + const [isFullScreen, setIsFullScreen] = useState(false); const [expiryDateErrText, setExpiryDateErrText] = React.useState(""); const [expiryDateErr, setExpiryDateErr] = React.useState(false); @@ -75,6 +75,11 @@ const Index = () => { localStorage.removeItem("webtoken"); localStorage.removeItem("transactionid"); localStorage.removeItem("paymentId"); + if (getBowserType() === "PC_Browser"){ + setIsFullScreen(false) + } else { + setIsFullScreen(true) + } }, []); useEffect(() => { @@ -155,7 +160,7 @@ const Index = () => { const getAvailablePayment = () =>{ // HttpUtils.post({ - // url: paymentPath + getAvailablePaymentUrl, + // url: UrlUtils.PAYMENT_AVAILABLE_PAYMENT, // params: { // "locale": locale === 'en' ?local.en:locale === 'zh-HK' ?local.zh:local.cn, // "amount": totalAmount, @@ -174,6 +179,19 @@ const Index = () => { // } // }); + HttpUtils.get({ + url: UrlUtils.PAYMENT_LIMIT_SETTING_LIST, + params: {}, + onSuccess: (responseData) => { + // console.log(responseData) + setPaymentLimit(responseData) + + }, + onError: () =>{ + setOnReady(true) + } + }); + const responseData = { "availablepaymentmethods": [ { @@ -308,7 +326,19 @@ const Index = () => { if (availableMethods.length > 0) { availableMethods.forEach((method) => { if (method.subtype === "FPS") { - setFPSStatus(method) + if (totalAmount<1){ + // method["minLimit"] = true + setFPSStatus(method) + } + else if (totalAmount>9999999.99){ + // method["maxLimit"] = true + setFPSStatus(method) + } else { + // method["minLimit"] = true + // method["maxLimit"] = true + // console.log(method) + setFPSStatus(method) + } } else if (method.subtype === "CreditCard") { method.supportedcard.forEach((supportedcard) => { if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa") { @@ -329,7 +359,7 @@ const Index = () => { const getTransactionId = () => { HttpUtils.get({ - url: paymentPath + getTransactionIdUrl, + url: UrlUtils.PAYMENT_TRANSACTION_ID, onSuccess: (responseData) => { // const transactionData = responseData; setTransactionData(responseData) @@ -411,7 +441,7 @@ const Index = () => { - +