alex
/
PNSPS-frontend-MaterialUI
1
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

fix pop up payment window

master
Alex Cheung 1 год назад
Родитель
9c76b4b563
Сommit
e5154e380a
2 измененных файлов: 98 добавлений и 95 удалений
Разделённый вид
Опции Diff
Показать статистику Скачать Patch файл Скачать Diff файл
  1. +95
    -93
      src/pages/Payment/MultiPaymentWindow.js
  2. +3
    -2
      src/pages/Payment/index.js

+ 95
- 93
src/pages/Payment/MultiPaymentWindow.js Просмотреть файл

@@ -40,21 +40,21 @@ const MultiPaymentWindow = (props) => {
const [paymentMethod, setPaymentMethod] = useState("");
const [transactionData, setTransactionData] = useState({});
const [availableMethodData, setAvailableMethodData] = useState([]);
const [onReady, setOnReady] = useState(false);
// const [onReady, setOnReady] = useState(false);

useEffect(() => {
console.log(props.transactionData)
if(Object.keys(props.transactionData).length > 0){
setLoadtTransactionData(props.transactionData)
}
}, []);
}, [props.transactionData]);

// useEffect(() => {
// console.log(props.availableMethods)
// if(props.availableMethods.length > 0){
// setLoadAvailableMethodData(props.availableMethods)
// }
// }, [props.availableMethods]);
useEffect(() => {
console.log(props.availableMethods)
if(props.availableMethods.length > 0){
setLoadAvailableMethodData(props.availableMethods)
}
}, [props.availableMethods]);

useEffect(() => {
if(Object.keys(loadtTransactionData).length > 0){
@@ -74,11 +74,11 @@ const MultiPaymentWindow = (props) => {
}
}, [loadAvailableMethodData]);

useEffect(() => {
if(availableMethodData.length > 0 && Object.keys(transactionData).length > 0){
setOnReady(true)
}
}, [availableMethodData]);
// useEffect(() => {
// if(availableMethodData.length > 0 && Object.keys(transactionData).length > 0){
// setOnReady(true)
// }
// }, [availableMethodData]);

useEffect(() => {
console.log(paymentMethod)
@@ -98,93 +98,101 @@ const MultiPaymentWindow = (props) => {
if(props.selectedPaymentMethod === ""){
setPaymentMethod("")
}
setContent(
<Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
交易參考編號:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionData.transactionid}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
付款金額:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{"HK$ "+FormatUtils.currencyFormat(props.totalAmount)}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
請選擇付款方式:
</Typography>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
<img className={props.getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
<img className={props.getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
<img className={props.getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
<img className={props.getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}>
<img className={props.getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
<img className={props.getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
</Button>
if (availableMethodData.length>0){
setContent(
<Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
{/* <Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
交易參考編號:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{props.transactionData.transactionid}
</FormLabel>
</Grid>
</Grid>
</Grid>
</Grid>
{paymentMethod !=""?
<Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
已選擇付款方式:
付款金額:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{paymentMethod}
{"HK$ "+FormatUtils.currencyFormat(props.totalAmount)}
</FormLabel>
</Grid>
</Grid>
</Grid> */}
<Grid item xs={12} md={12}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
請選擇付款方式:
</Typography>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
<img className={props.getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
<img className={props.getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
<img className={props.getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
<img className={props.getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}>
<img className={props.getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
<img className={props.getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
</Button>
</Grid>
</Grid>
</Grid>
: null}
{paymentMethod !=""?
<Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
已選擇付款方式:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{paymentMethod}
</FormLabel>
</Grid>
</Grid>
</Grid>
: null}
</Grid>
)
}else{
<Grid container direction="row" justifyContent="center" alignItems="center">
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
付款功能現在不可用。
</FormLabel>
</Grid>
)
}
}, [availableMethodData]);

const formik = useFormik({
@@ -229,15 +237,9 @@ const MultiPaymentWindow = (props) => {
<Typography variant="h5" sx={{ textAlign: "left" }}>
支付金額: HK$ {FormatUtils.currencyFormat(props.totalAmount)}
</Typography>
{availableMethodData > 0 ?
!onReady ?
{!props.onReady ?
<LoadingComponent />
:content
:<Grid container direction="row" justifyContent="center" alignItems="center">
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
付款功能現在不可用。
</FormLabel>
</Grid>
}
</Grid>


+ 3
- 2
src/pages/Payment/index.js Просмотреть файл

@@ -64,7 +64,7 @@ const Index = () => {
const [afterConfirmPayment, setAfterConfirmPayment] = useState(false);

const [itemList, setItemList] = useState([]);
// const [onReady, setOnReady] = useState(false);
const [onReady, setOnReady] = useState(false);

const [expiryDateErrText, setExpiryDateErrText] = React.useState("");
const [expiryDateErr, setExpiryDateErr] = React.useState(false);
@@ -337,7 +337,7 @@ const Index = () => {
setPPSStatus(method)
}
});
// setOnReady(true)
setOnReady(true)
}
}, [availableMethods]);

@@ -465,6 +465,7 @@ const Index = () => {
selectedPaymentMethod={selectedPaymentMethod}
setConfirmPayment={setConfirmPayment}
getMethodImgClass = {getMethodImgClass}
onReady = {onReady}
/>
</Grid >
);


Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить