@@ -44,11 +44,12 @@ const Index = () => { | |||
const [timeDownCount, setTimeDownCount] = React.useState(0); | |||
const [paymentId, setPaymentId] = React.useState(""); | |||
const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState(""); | |||
const [fpsqrcodeurlPrd, setFpsqrcodeurlPrd] = React.useState(""); | |||
const [browserType, setBrowserType] = React.useState(""); | |||
const mobileBrowser = "Mobile"; | |||
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 loadPaymentUrl = "/api/payment/wallet/fps"; | |||
const cancelPaymentUrl = "/api/payment/cancelpayment"; | |||
@@ -162,7 +163,10 @@ const Index = () => { | |||
// const fpsqrcodeurl = parsedUrl.pathname; | |||
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")); | |||
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) | |||
setFpsqrcodeurlPrd(openPASGUrlPrd) | |||
} | |||
}); | |||
@@ -236,6 +240,10 @@ const Index = () => { | |||
window.location.assign(fpsqrcodeurl); | |||
} | |||
const mobliePaymentPrd = ()=>{ | |||
window.location.assign(fpsqrcodeurlPrd); | |||
} | |||
return ( | |||
!onReady ? | |||
<LoadingComponent /> | |||
@@ -273,7 +281,17 @@ const Index = () => { | |||
mobliePayment(); | |||
}} | |||
sx={{ m: 4 }} | |||
>請選擇支付程式付款</Button> | |||
>請選擇支付程式付款-Testing</Button> | |||
<Button | |||
component="span" | |||
variant="contained" | |||
size="large" | |||
color="primary" | |||
onClick={()=>{ | |||
mobliePaymentPrd(); | |||
}} | |||
sx={{ m: 4 }} | |||
>請選擇支付程式付款-PRD</Button> | |||
</Typography> | |||
: | |||
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}> | |||
@@ -90,9 +90,12 @@ const MultiPaymentWindow = (props) => { | |||
}; | |||
const confirmPaymentHandle = () => () =>{ | |||
props.setConfirmPayment(true); | |||
props.setConfirmPayment(true); | |||
}; | |||
const getMethodImgClass = (method) => { | |||
return paymentMethod == method || paymentMethod == "" ? "" : "grayscale"; | |||
} | |||
useEffect(() => { | |||
if(props.selectedPaymentMethod === ""){ | |||
@@ -138,32 +141,32 @@ const MultiPaymentWindow = (props) => { | |||
</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> | |||
<img className={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> | |||
<img className={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> | |||
<img className={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> | |||
<img className={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> | |||
<img className={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> | |||
<img className={getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img> | |||
</Button> | |||
</Grid> | |||
</Grid> | |||
@@ -280,7 +280,7 @@ const ApplicationDetailCard = ({ | |||
</Grid> | |||
<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> | |||
: | |||
@@ -73,7 +73,7 @@ const Index = () => { | |||
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; | |||
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={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> | |||
: | |||
@@ -214,7 +214,7 @@ const FormPanel = ({ formData }) => { | |||
type="file" | |||
accept=".pdf" | |||
style={{ display: 'none' }} | |||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | |||
disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)} | |||
onChange={(event) => { | |||
readFile(event) | |||
}} | |||
@@ -224,7 +224,7 @@ const FormPanel = ({ formData }) => { | |||
component="span" | |||
variant="contained" | |||
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> | |||
</Button> | |||
@@ -85,7 +85,7 @@ const Index = () => { | |||
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; | |||
setRecord(responseData.data); | |||
} | |||