alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

fix payment window method selected

master
Alex Cheung 1 year ago
parent
9866a439ce
commit
45da4e9645
2 changed files with 72 additions and 126 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +67
    -106
      src/pages/Payment/MultiPaymentWindow.js
  2. +5
    -20
      src/pages/Payment/index.js

+ 67
- 106
src/pages/Payment/MultiPaymentWindow.js View File

@@ -34,7 +34,7 @@ import FpsIcon from "assets/images/icons/fps.svg";
const MultiPaymentWindow = (props) => {

const windowTitle = "請選擇付款方式";
const [content, setContent] = useState();
// const [content, setContent] = useState();
const [loadtTransactionData, setLoadtTransactionData] = useState({});
const [loadAvailableMethodData, setLoadAvailableMethodData] = useState([]);
const [paymentMethod, setPaymentMethod] = useState("");
@@ -106,110 +106,10 @@ const MultiPaymentWindow = (props) => {
props.setConfirmPayment(true);
};

// const getMethodImgClass = (method) => () =>{
// setPaymentMethodClass()
// return paymentMethod == method || paymentMethod == "" ? "" : "grayscale";
// }

useEffect(() => {
if(props.selectedPaymentMethod === ""){
setPaymentMethod("")
}
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 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={fpsClass} 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={visaClass} 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={mastercardClass} 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={unionPayClass} 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={jCBClass} 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={pPSClass} src={PpsIcon} width="80" height="80" alt="PPS"></img>
</Button>
</Grid>
</Grid>
</Grid>
{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({
@@ -256,19 +156,80 @@ const MultiPaymentWindow = (props) => {
</Typography> */}
{!props.onReady ?
<LoadingComponent />
:content
:availableMethodData.length>0?
<Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
<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={fpsClass} 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={visaClass} 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={mastercardClass} 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={unionPayClass} 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={jCBClass} 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={pPSClass} src={PpsIcon} width="80" height="80" alt="PPS"></img>
</Button>
</Grid>
</Grid>
</Grid>
{paymentMethod !=""?
<Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
已選擇付款方法:&nbsp;
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
{paymentMethod}
</FormLabel>
</Grid>
</Grid>
</Grid>
: null}
</Grid>:
<Grid container direction="row" justifyContent="center" alignItems="center">
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center"}}>
付款功能現在不可用。
</FormLabel>
</Grid>
}
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
付款總額(HK$):
<Typography sx={{fontSize: "20px", color: "#000000", textAlign: "left" }}>
付款總額(HK$):&nbsp;
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
<Typography sx={{fontSize: "20px", color: "#000000", textAlign: "left" }}>
{" HK$ " + FormatUtils.currencyFormat(props.totalAmount)}
</Typography>
</Grid>


+ 5
- 20
src/pages/Payment/index.js View File

@@ -47,7 +47,7 @@ const Index = () => {
const navigate = useNavigate()
const location = useLocation();

// 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([]);
@@ -169,8 +169,12 @@ const Index = () => {
let availableMethods = responseData.availablepaymentmethods;
setAvailableMethods(availableMethods);

},
onError: () =>{
setOnReady(true)
}
});
// const responseData = {
// "availablepaymentmethods": [
// {
@@ -298,25 +302,6 @@ const Index = () => {
// };
// let availableMethods = responseData.availablepaymentmethods;
// setAvailableMethods(availableMethods);
// if (availableMethods.length>0){
// availableMethods.forEach((method)=>{
// if(method.subtype === "FPS" ){
// setFPSStatus(method)
// }else if (method.subtype === "CreditCard"){
// method.supportedcard.forEach((supportedcard)=>{
// if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
// setCreditCardStatus(method)
// } else {
// if (supportedcard === "UnionPay"){
// setUnionPayStatus(method)
// }
// }
// })
// }else if (method.subtype === "PPS" ){
// setPPSStatus(method)
// }
// });
// }
}

useEffect(() => {


Write Preview
Loading…
Cancel
Save