From 0ad449272651403394a17becb6f8022fd0bff4e8 Mon Sep 17 00:00:00 2001
From: Alex Cheung <alex.cheung@2fi-solutions.com.hk>
Date: Fri, 8 Dec 2023 18:03:18 +0800
Subject: [PATCH] careOf and fps update

---
 src/pages/Payment/FPS/FPS.js                  | 70 ++++++++++---------
 .../ApplyForm/PublicNoticeApplyForm.js        | 13 +++-
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js
index 492ac8b..f57b225 100644
--- a/src/pages/Payment/FPS/FPS.js
+++ b/src/pages/Payment/FPS/FPS.js
@@ -43,16 +43,18 @@ const Index = () => {
     const [timeDownCount, setTimeDownCount] = React.useState(0);
     const [paymentId, setPaymentId] = React.useState("");
     const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
+    const [browserType, setBrowserType] = React.useState("");
+    const mobileBrowser = "Mobile";
+    const desktopBrowser = "Desktop";
+    
     // const pasgPath = '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 cancelPaymentUrl = "/api/payment/cancelpayment";
     const paymentStatusApi = "/api/payment/status/";
     // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
     // const receiverUrl = "/noti-api/payment/payment-notification";
-    const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing
-    // const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD
-
+    
     //timer
     const currentTimer = React.useRef();
     const [time, setTime] = React.useState(0);
@@ -64,10 +66,10 @@ const Index = () => {
             setLocationData(location.state)
             if (/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) {
                 console.log('Mobile web browser');
-                console.log(openPASGUrl)
-                // renderOpenFPSPaymentAppTemplate(openPASGUrl, $('#openFPSPaymentAppTemplate').html());
+                setBrowserType(mobileBrowser)
             } else {
                 console.log('Desktop web browser');
+                setBrowserType(desktopBrowser)
             }
         }
     }, []);
@@ -97,11 +99,11 @@ const Index = () => {
     React.useEffect(() => {
         // console.log(fpsTransctionData)
         if(Object.keys(fpsTransctionData).length > 0 ){
-            setOnReady(true);
             setPaymentId(fpsTransctionData.paymentid)
             currentTimer.current = setInterval(() => {
                 setTime((prevTime) => prevTime + 1);
             }, 1000);
+            setOnReady(true);
             return () => clearInterval(currentTimer.current);
         }
     }, [fpsTransctionData]);
@@ -258,32 +260,34 @@ const Index = () => {
                                         <br />
                                         {"$HK " + paymentData.amount}
                                     </Typography>
-
-                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                        請掃描以下二維碼
-                                        <br />
-                                        <img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/>
-                                        <br />
-                                        {paymentId}
-                                        <br/>
-                                        二維碼有效期限3分鐘
-                                        <br />
-                                        請在規定時間內完成付款流程
-                                        <br />
-                                        {"剩餘時間:"+timeDownCount}
-                                    </Typography>
-                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
-                                        <Button
-                                            component="span"
-                                            variant="contained"
-                                            size="large"
-                                            color="primary"
-                                            onClick={()=>{
-                                                mobliePayment();
-                                            }}
-                                            sx={{ m: 4 }}
-                                        >請選擇支付程式付款</Button>
-                                    </Typography>
+                                    {browserType==mobileBrowser?
+                                        <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                            <Button
+                                                component="span"
+                                                variant="contained"
+                                                size="large"
+                                                color="primary"
+                                                onClick={()=>{
+                                                    mobliePayment();
+                                                }}
+                                                sx={{ m: 4 }}
+                                            >請選擇支付程式付款</Button>
+                                        </Typography>
+                                        :
+                                        <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                            請掃描以下二維碼
+                                            <br />
+                                            <img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/>
+                                            <br />
+                                            {paymentId}
+                                            <br/>
+                                            二維碼有效期限3分鐘
+                                            <br />
+                                            請在規定時間內完成付款流程
+                                            <br />
+                                            {"剩餘時間:"+timeDownCount}
+                                        </Typography>
+                                    }
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                         <Button
                                             component="span"
diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
index 35540bd..999a4b8 100644
--- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
+++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
@@ -38,8 +38,9 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
         backgroundColor: '#0C489E',
         backgroundPosition: 'right'
     }
+    
     // React.useEffect(()=>{
-    //     setFormData(loadedData);
+    //     loadedData.careOf = loadedData.contactPerson
     // },[]);
 
     const formik = useFormik({
@@ -86,6 +87,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                         faxNumber: values.faxNumber
                     },
                     issueId: issueId,
+                    careOf: values.careOf ? values.careOf: "",
                     remarks: values.remarks ? values.remarks : "",
                 },
                 files: [attachment],
@@ -223,7 +225,14 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                     </Grid>
                                 </Grid>
                             </Grid>
-
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
+                                {FieldUtils.getTextField({
+                                    label: "代理人:",
+                                    valueName: "careOf",
+                                    form: formik,
+                                    // disabled: true
+                                })}
+                            </Grid>
                             <Grid item xs={12} md={12} lg={12}>
                                 {FieldUtils.getTextArea({
                                     label: "備註:",