@@ -44,11 +44,12 @@ const Index = () => { | |||||
const [timeDownCount, setTimeDownCount] = React.useState(0); | const [timeDownCount, setTimeDownCount] = React.useState(0); | ||||
const [paymentId, setPaymentId] = React.useState(""); | const [paymentId, setPaymentId] = React.useState(""); | ||||
const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState(""); | const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState(""); | ||||
const [fpsqrcodeurlPrd, setFpsqrcodeurlPrd] = React.useState(""); | |||||
const [browserType, setBrowserType] = React.useState(""); | const [browserType, setBrowserType] = React.useState(""); | ||||
const mobileBrowser = "Mobile"; | const mobileBrowser = "Mobile"; | ||||
const desktopBrowser = "Desktop"; | const desktopBrowser = "Desktop"; | ||||
// const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD | |||||
const pasgPathPrd = 'https://fps.payapps.hkicl.com.hk'; //PRD | |||||
const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing | const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing | ||||
const loadPaymentUrl = "/api/payment/wallet/fps"; | const loadPaymentUrl = "/api/payment/wallet/fps"; | ||||
const cancelPaymentUrl = "/api/payment/cancelpayment"; | const cancelPaymentUrl = "/api/payment/cancelpayment"; | ||||
@@ -162,7 +163,10 @@ const Index = () => { | |||||
// const fpsqrcodeurl = parsedUrl.pathname; | // const fpsqrcodeurl = parsedUrl.pathname; | ||||
const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback=' | const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback=' | ||||
+ encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+paymentData.transactionid+"&WEB_TOKEN="+paymentData.webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId")); | + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+paymentData.transactionid+"&WEB_TOKEN="+paymentData.webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId")); | ||||
const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback=' | |||||
+ encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+paymentData.transactionid+"&WEB_TOKEN="+paymentData.webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId")); | |||||
setFpsqrcodeurl(openPASGUrl) | setFpsqrcodeurl(openPASGUrl) | ||||
setFpsqrcodeurlPrd(openPASGUrlPrd) | |||||
} | } | ||||
}); | }); | ||||
@@ -236,6 +240,10 @@ const Index = () => { | |||||
window.location.assign(fpsqrcodeurl); | window.location.assign(fpsqrcodeurl); | ||||
} | } | ||||
const mobliePaymentPrd = ()=>{ | |||||
window.location.assign(fpsqrcodeurlPrd); | |||||
} | |||||
return ( | return ( | ||||
!onReady ? | !onReady ? | ||||
<LoadingComponent /> | <LoadingComponent /> | ||||
@@ -273,7 +281,17 @@ const Index = () => { | |||||
mobliePayment(); | mobliePayment(); | ||||
}} | }} | ||||
sx={{ m: 4 }} | sx={{ m: 4 }} | ||||
>請選擇支付程式付款</Button> | |||||
>請選擇支付程式付款-Testing</Button> | |||||
<Button | |||||
component="span" | |||||
variant="contained" | |||||
size="large" | |||||
color="primary" | |||||
onClick={()=>{ | |||||
mobliePaymentPrd(); | |||||
}} | |||||
sx={{ m: 4 }} | |||||
>請選擇支付程式付款-PRD</Button> | |||||
</Typography> | </Typography> | ||||
: | : | ||||
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}> | <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}> | ||||
@@ -90,9 +90,12 @@ const MultiPaymentWindow = (props) => { | |||||
}; | }; | ||||
const confirmPaymentHandle = () => () =>{ | const confirmPaymentHandle = () => () =>{ | ||||
props.setConfirmPayment(true); | |||||
props.setConfirmPayment(true); | |||||
}; | }; | ||||
const getMethodImgClass = (method) => { | |||||
return paymentMethod == method || paymentMethod == "" ? "" : "grayscale"; | |||||
} | |||||
useEffect(() => { | useEffect(() => { | ||||
if(props.selectedPaymentMethod === ""){ | if(props.selectedPaymentMethod === ""){ | ||||
@@ -138,32 +141,32 @@ const MultiPaymentWindow = (props) => { | |||||
</Grid> | </Grid> | ||||
<Grid item> | <Grid item> | ||||
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}> | <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> | |||||
<img className={getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
<Grid item> | <Grid item> | ||||
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}> | <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> | |||||
<img className={getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
<Grid item> | <Grid item> | ||||
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}> | <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> | |||||
<img className={getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
<Grid item> | <Grid item> | ||||
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}> | <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> | |||||
<img className={getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
<Grid item> | <Grid item> | ||||
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}> | <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> | |||||
<img className={getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
<Grid item> | <Grid item> | ||||
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}> | <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> | |||||
<img className={getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -280,7 +280,7 @@ const ApplicationDetailCard = ({ | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | ||||
{ | { | ||||
formik.values.groupType == "A" | |||||
formik.values.groupType == "Private Bill" | |||||
? | ? | ||||
<Typography variant="h5">( {data.noOfPages} page x $6,552 )</Typography> | <Typography variant="h5">( {data.noOfPages} page x $6,552 )</Typography> | ||||
: | : | ||||
@@ -73,7 +73,7 @@ const Index = () => { | |||||
responseData.data["issueDateStr"] = DateUtils.dateFormat(responseData.data.issueDate, "D MMM YYYY (ddd)"); | responseData.data["issueDateStr"] = DateUtils.dateFormat(responseData.data.issueDate, "D MMM YYYY (ddd)"); | ||||
responseData.data["groupType"] = responseData.data.groupNo.charAt(0); | |||||
responseData.data["groupType"] = responseData.data.groupTitle; | |||||
responseData.data["action"] = responseData.data.replyDate ? responseData.data.action : true; | responseData.data["action"] = responseData.data.replyDate ? responseData.data.action : true; | ||||
let returnBeforeDate = DateUtils.convertToDate(responseData.data.returnBeforeDate); | let returnBeforeDate = DateUtils.convertToDate(responseData.data.returnBeforeDate); | ||||
@@ -219,7 +219,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<Grid item xs={0} md={3} lg={3} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}></Grid> | <Grid item xs={0} md={3} lg={3} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}></Grid> | ||||
<Grid item xs={12} md={9} lg={9} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={9} lg={9} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | ||||
{ | { | ||||
formik.values.groupType == "A" | |||||
formik.values.groupType == "Private Bill" | |||||
? | ? | ||||
<Typography variant="h5">( {data.noOfPages} 頁 x $6,552 )</Typography> | <Typography variant="h5">( {data.noOfPages} 頁 x $6,552 )</Typography> | ||||
: | : | ||||
@@ -214,7 +214,7 @@ const FormPanel = ({ formData }) => { | |||||
type="file" | type="file" | ||||
accept=".pdf" | accept=".pdf" | ||||
style={{ display: 'none' }} | style={{ display: 'none' }} | ||||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | |||||
disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)} | |||||
onChange={(event) => { | onChange={(event) => { | ||||
readFile(event) | readFile(event) | ||||
}} | }} | ||||
@@ -224,7 +224,7 @@ const FormPanel = ({ formData }) => { | |||||
component="span" | component="span" | ||||
variant="contained" | variant="contained" | ||||
size="large" | size="large" | ||||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | |||||
disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)} | |||||
> | > | ||||
<Typography variant="h5">上載</Typography> | <Typography variant="h5">上載</Typography> | ||||
</Button> | </Button> | ||||
@@ -85,7 +85,7 @@ const Index = () => { | |||||
responseData.data["issueDateStr"] = DateUtils.dateFormat(responseData.data.issueDate, "D MMM YYYY (ddd)"); | responseData.data["issueDateStr"] = DateUtils.dateFormat(responseData.data.issueDate, "D MMM YYYY (ddd)"); | ||||
responseData.data["groupType"] = responseData.data.groupNo.charAt(0); | |||||
responseData.data["groupType"] = responseData.data.groupTitle; | |||||
responseData.data["action"] = responseData.data.replyDate ? responseData.data.action : true; | responseData.data["action"] = responseData.data.replyDate ? responseData.data.action : true; | ||||
setRecord(responseData.data); | setRecord(responseData.data); | ||||
} | } | ||||