From 03623a1865fcd5347e3a696e71caf71c52ab7c3f Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Tue, 26 Mar 2024 15:31:54 +0800
Subject: [PATCH] update payment UI

---
 src/pages/DemandNote/Details/DnDetailCard.js  | 37 +++++++++++---
 src/pages/DemandNote/Details/index.js         |  3 +-
 .../Payment/Details_Public/PaymentDetails.js  | 50 +++++++++----------
 3 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/pages/DemandNote/Details/DnDetailCard.js b/src/pages/DemandNote/Details/DnDetailCard.js
index 38d1c14..e60f200 100644
--- a/src/pages/DemandNote/Details/DnDetailCard.js
+++ b/src/pages/DemandNote/Details/DnDetailCard.js
@@ -40,6 +40,7 @@ const DnDetailCard = ({ data }) => {
     };
 
     const getDisplayField = (label, value) => {
+
         return <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
             <Grid container alignItems={"center"}>
                 <Grid item xs={12} md={3} lg={3}
@@ -71,7 +72,7 @@ const DnDetailCard = ({ data }) => {
 
                         {getDisplayField("DN No.", dnData.dnNo)}
 
-                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1}}>
+                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={12} md={3} lg={3}
                                     sx={{ display: 'flex', alignItems: 'center' }}>
@@ -92,6 +93,11 @@ const DnDetailCard = ({ data }) => {
 
                         {getDisplayField("DN Sent", dnData?.sentDate ? dnData.sentDate + " - " + (dnData.sentBy == null ? "System" : dnData.sentBy) : "--")}
 
+                    </Grid>
+                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
+
+                        {getDisplayField("Due Date", dnData.dueDate)}
+
                     </Grid>
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
                         <Grid item xs={12} md={6} lg={6} mt={1}>
@@ -123,28 +129,43 @@ const DnDetailCard = ({ data }) => {
                     </Grid>
 
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder Schedule", "")}
-                        {getDisplayField("Sent on", "")}
+                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={12} md={12} lg={12}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">Reminder Schedule:</Typography></FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={12} md={12} lg={12}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">Sent on:</Typography></FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                       
                     </Grid>
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder 1", dnData?.expectReminder1 ? DateUtils.dateValue(dnData.expectReminder1):"--")}
+                        {getDisplayField("Reminder 1", dnData?.expectReminder1 ? DateUtils.dateStr(dnData.expectReminder1) : "--")}
                         {getDisplayField("Reminder 1", dnData?.reminder1 ? DateUtils.datetimeStr(dnData.reminder1) : "--")}
                     </Grid>
 
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder 2", dnData?.expectReminder2 ? DateUtils.dateValue(dnData.expectReminder2):"--")}
+                        {getDisplayField("Reminder 2", dnData?.expectReminder2 ? DateUtils.dateStr(dnData.expectReminder2) : "--")}
                         {getDisplayField("Reminder 2", dnData?.reminder2 ? DateUtils.datetimeStr(dnData.reminder2) : "--")}
                     </Grid>
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder 3", dnData?.expectReminder3 ? DateUtils.dateValue(dnData.expectReminder3):"--")}
+                        {getDisplayField("Reminder 3", dnData?.expectReminder3 ? DateUtils.dateStr(dnData.expectReminder3) : "--")}
                         {getDisplayField("Reminder 3", dnData?.reminder3 ? DateUtils.datetimeStr(dnData.reminder3) : "--")}
                     </Grid>
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder 4", dnData?.expectReminder4 ? DateUtils.dateValue(dnData.expectReminder4):"--")}
+                        {getDisplayField("Reminder 4", dnData?.expectReminder4 ? DateUtils.dateStr(dnData.expectReminder4) : "--")}
                         {getDisplayField("Reminder 4", dnData?.reminder4 ? DateUtils.datetimeStr(dnData.reminder4) : "--")}
                     </Grid>
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder Final", dnData?.expectReminderFinal ? DateUtils.dateValue(dnData.expectReminderFinal):"--")}
+                        {getDisplayField("Reminder Final", dnData?.expectReminderFinal ? DateUtils.dateStr(dnData.expectReminderFinal) : "--")}
                         {getDisplayField("Reminder Final", dnData?.reminderFinal ? DateUtils.datetimeStr(dnData.reminderFinal) : "--")}
                     </Grid>
 
diff --git a/src/pages/DemandNote/Details/index.js b/src/pages/DemandNote/Details/index.js
index 9dc5cac..416b406 100644
--- a/src/pages/DemandNote/Details/index.js
+++ b/src/pages/DemandNote/Details/index.js
@@ -49,8 +49,9 @@ const DemandNote_index = () => {
         url: `${DEMAND_NOTE_LOAD}/${params.id}`,
         onSuccess: (response) => {
          
-            response["issueDate"] = DateUtils.dateValue(response["issueDate"]);
+            response["issueDate"] = DateUtils.dateStr(response["issueDate"]);
             response["sentDate"] = response["sentDate"]?DateUtils.datetimeStr(response["sentDate"]):"";
+            response["dueDate"] = DateUtils.dateStr(response["dueDate"]);
             response["gazetteIssueDate"] = DateUtils.datetimeStr(response["gazetteIssueDate"]);
             response["contactFaxNo"] =JSON.parse(response["contactFaxNo"]);
             response["contactTelNo"] =JSON.parse(response["contactTelNo"]);
diff --git a/src/pages/Payment/Details_Public/PaymentDetails.js b/src/pages/Payment/Details_Public/PaymentDetails.js
index 64f02cd..2dea0fc 100644
--- a/src/pages/Payment/Details_Public/PaymentDetails.js
+++ b/src/pages/Payment/Details_Public/PaymentDetails.js
@@ -58,13 +58,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                         <Grid item>
                             <Grid container >
                                 <Grid item xs={12} md={12} >
-                                    <Grid container alignItems="center">
-                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right", alignItems: 'center', color: "#000000" }}>
-                                            <FormLabel sx={{ color: "#000000" }}>
+                                    <Grid container spacing={5} alignItems="center">
+                                        <Grid item xs={6} md={6} sx={{ textAlign: "right", alignItems: 'center', color: "#000000" }}>
+                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 <FormattedMessage id="status"/>:
                                             </FormLabel>
                                         </Grid>
-                                        <Grid item xs={6} md={5} sx={{ ml:5,textAlign: "left" }}>
+                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                             <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
                                                 {
                                                     locale === 'en' ?
@@ -77,13 +77,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     </Grid>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
-                                    <Grid container >
-                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                    <Grid container spacing={5} >
+                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 <FormattedMessage id="transactionNo" />:
                                             </FormLabel>
                                         </Grid>
-                                        <Grid item  xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
+                                        <Grid item xs={6} md={6} sx={{ textAlign: "left" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 {data.payload?.transactionid}
                                             </FormLabel>
@@ -91,13 +91,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     </Grid>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
-                                    <Grid container >
-                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                    <Grid container spacing={5}>
+                                        <Grid item xs={6} md={6} sx={{textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 <FormattedMessage id="transactionDate" />:
                                             </FormLabel>
                                         </Grid>
-                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 {data.transDateStr + " (DD/MM/YYYY)"}
                                             </FormLabel>
@@ -105,13 +105,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     </Grid>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
-                                    <Grid container >
-                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                    <Grid container spacing={5}>
+                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 <FormattedMessage id="transactionTime" />:
                                             </FormLabel>
                                         </Grid>
-                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 {data.transTimeStr + " (HH:MI:SS)"}
                                             </FormLabel>
@@ -119,13 +119,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     </Grid>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
-                                    <Grid container >
-                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                    <Grid container spacing={5}>
+                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 <FormattedMessage id="paymentRefCode" />:
                                             </FormLabel>
                                         </Grid>
-                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 {data.egisRefNo}
                                             </FormLabel>
@@ -133,13 +133,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     </Grid>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
-                                    <Grid container >
-                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                    <Grid container spacing={5} >
+                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 <FormattedMessage id="payTotalDeatail"/>:
                                             </FormLabel>
                                         </Grid>
-                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
                                             </FormLabel>
@@ -147,13 +147,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     </Grid>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
-                                    <Grid container >
-                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                    <Grid container spacing={5} >
+                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 <FormattedMessage id="payMethod"/>:
                                             </FormLabel>
                                         </Grid>
-                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 {getPaymentMethod()}
                                             </FormLabel>
@@ -161,13 +161,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                     </Grid>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
-                                    <Grid container alignItems="center">
-                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
+                                    <Grid container spacing={5} alignItems="center">
+                                        <Grid item xs={6} md={6} sx={{textAlign: "right" }}>
                                             <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                 <FormattedMessage id="payReceipt"/>:
                                             </FormLabel>
                                         </Grid>
-                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                        <Grid item xs={6} md={5} sx={{textAlign: "left" }}>
                                             {onDownload?
                                                 <LoadingComponent disableText={true} alignItems="flex-start"/>
                                             :