| @@ -98,37 +98,37 @@ 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> | |||
| 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 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 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 item xs={12} md={12}> | |||
| </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" }}> | |||
| @@ -165,26 +165,26 @@ const MultiPaymentWindow = (props) => { | |||
| <img className={props.getMethodImgClass("PPS")} 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> | |||
| ) | |||
| {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> | |||
| ) | |||
| }, [availableMethodData]); | |||
| const formik = useFormik({ | |||
| @@ -219,46 +219,46 @@ const MultiPaymentWindow = (props) => { | |||
| <DialogContentText> | |||
| <Grid item xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%' }} width="100%"> | |||
| <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} > | |||
| <Grid container justifyContent="flex-start" alignItems="left" > | |||
| <center> | |||
| <Grid item xs={12} md={12} width="100%"> | |||
| <Grid container justifyContent="flex-start" alignItems="left" > | |||
| <center> | |||
| <Grid item xs={12} md={12} width="100%"> | |||
| <Typography variant="h5" sx={{ textAlign: "left" }}> | |||
| 交易參考號: {transactionData.transactionid} | |||
| </Typography> | |||
| <Typography variant="h5" sx={{ textAlign: "left" }}> | |||
| 支付金額: HK$ {FormatUtils.currencyFormat(props.totalAmount)} | |||
| </Typography> | |||
| {availableMethodData > 0 ? | |||
| !onReady ? | |||
| <LoadingComponent /> | |||
| :content | |||
| :<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" }}> | |||
| 交易參考號: {transactionData.transactionid} | |||
| 付款金額: | |||
| </Typography> | |||
| </Grid> | |||
| <Grid item> | |||
| <Typography variant="h5" sx={{ textAlign: "left" }}> | |||
| 支付金額: HK$ {FormatUtils.currencyFormat(props.totalAmount)} | |||
| {"HK$ " + FormatUtils.currencyFormat(props.totalAmount)} | |||
| </Typography> | |||
| {availableMethodData > 0 ? | |||
| !onReady ? | |||
| <LoadingComponent /> | |||
| :content | |||
| :<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" }}> | |||
| 付款金額: | |||
| </Typography> | |||
| </Grid> | |||
| <Grid item> | |||
| <Typography variant="h5" sx={{ textAlign: "left" }}> | |||
| {"HK$ " + FormatUtils.currencyFormat(props.totalAmount)} | |||
| </Typography> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </center> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Box> | |||
| </Grid> | |||
| </center> | |||
| </Grid> | |||
| </Box> | |||
| </Grid> | |||
| </DialogContentText> | |||
| </DialogContent> | |||
| </form> | |||