alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update payment UI

master
Anna Ho 1 year ago
parent
09f47c87f9
commit
03623a1865
3 changed files with 56 additions and 34 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +29
    -8
      src/pages/DemandNote/Details/DnDetailCard.js
  2. +2
    -1
      src/pages/DemandNote/Details/index.js
  3. +25
    -25
      src/pages/Payment/Details_Public/PaymentDetails.js

+ 29
- 8
src/pages/DemandNote/Details/DnDetailCard.js View File

@@ -40,6 +40,7 @@ const DnDetailCard = ({ data }) => {
}; };


const getDisplayField = (label, value) => { const getDisplayField = (label, value) => {

return <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> return <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
@@ -71,7 +72,7 @@ const DnDetailCard = ({ data }) => {


{getDisplayField("DN No.", dnData.dnNo)} {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 container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} <Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}> 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) : "--")} {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>
<Grid container direction="row" justifyContent="space-between" alignItems="center"> <Grid container direction="row" justifyContent="space-between" alignItems="center">
<Grid item xs={12} md={6} lg={6} mt={1}> <Grid item xs={12} md={6} lg={6} mt={1}>
@@ -123,28 +129,43 @@ const DnDetailCard = ({ data }) => {
</Grid> </Grid>


<Grid container direction="row" justifyContent="space-between" alignItems="center"> <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>
<Grid container direction="row" justifyContent="space-between" alignItems="center"> <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) : "--")} {getDisplayField("Reminder 1", dnData?.reminder1 ? DateUtils.datetimeStr(dnData.reminder1) : "--")}
</Grid> </Grid>


<Grid container direction="row" justifyContent="space-between" alignItems="center"> <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) : "--")} {getDisplayField("Reminder 2", dnData?.reminder2 ? DateUtils.datetimeStr(dnData.reminder2) : "--")}
</Grid> </Grid>
<Grid container direction="row" justifyContent="space-between" alignItems="center"> <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) : "--")} {getDisplayField("Reminder 3", dnData?.reminder3 ? DateUtils.datetimeStr(dnData.reminder3) : "--")}
</Grid> </Grid>
<Grid container direction="row" justifyContent="space-between" alignItems="center"> <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) : "--")} {getDisplayField("Reminder 4", dnData?.reminder4 ? DateUtils.datetimeStr(dnData.reminder4) : "--")}
</Grid> </Grid>
<Grid container direction="row" justifyContent="space-between" alignItems="center"> <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) : "--")} {getDisplayField("Reminder Final", dnData?.reminderFinal ? DateUtils.datetimeStr(dnData.reminderFinal) : "--")}
</Grid> </Grid>




+ 2
- 1
src/pages/DemandNote/Details/index.js View File

@@ -49,8 +49,9 @@ const DemandNote_index = () => {
url: `${DEMAND_NOTE_LOAD}/${params.id}`, url: `${DEMAND_NOTE_LOAD}/${params.id}`,
onSuccess: (response) => { onSuccess: (response) => {
response["issueDate"] = DateUtils.dateValue(response["issueDate"]);
response["issueDate"] = DateUtils.dateStr(response["issueDate"]);
response["sentDate"] = response["sentDate"]?DateUtils.datetimeStr(response["sentDate"]):""; response["sentDate"] = response["sentDate"]?DateUtils.datetimeStr(response["sentDate"]):"";
response["dueDate"] = DateUtils.dateStr(response["dueDate"]);
response["gazetteIssueDate"] = DateUtils.datetimeStr(response["gazetteIssueDate"]); response["gazetteIssueDate"] = DateUtils.datetimeStr(response["gazetteIssueDate"]);
response["contactFaxNo"] =JSON.parse(response["contactFaxNo"]); response["contactFaxNo"] =JSON.parse(response["contactFaxNo"]);
response["contactTelNo"] =JSON.parse(response["contactTelNo"]); response["contactTelNo"] =JSON.parse(response["contactTelNo"]);


+ 25
- 25
src/pages/Payment/Details_Public/PaymentDetails.js View File

@@ -58,13 +58,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
<Grid item> <Grid item>
<Grid container > <Grid container >
<Grid item xs={12} md={12} > <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"/>: <FormattedMessage id="status"/>:
</FormLabel> </FormLabel>
</Grid> </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" }}> <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
{ {
locale === 'en' ? locale === 'en' ?
@@ -77,13 +77,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={12}> <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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
<FormattedMessage id="transactionNo" />: <FormattedMessage id="transactionNo" />:
</FormLabel> </FormLabel>
</Grid> </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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{data.payload?.transactionid} {data.payload?.transactionid}
</FormLabel> </FormLabel>
@@ -91,13 +91,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={12}> <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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
<FormattedMessage id="transactionDate" />: <FormattedMessage id="transactionDate" />:
</FormLabel> </FormLabel>
</Grid> </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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{data.transDateStr + " (DD/MM/YYYY)"} {data.transDateStr + " (DD/MM/YYYY)"}
</FormLabel> </FormLabel>
@@ -105,13 +105,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={12}> <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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
<FormattedMessage id="transactionTime" />: <FormattedMessage id="transactionTime" />:
</FormLabel> </FormLabel>
</Grid> </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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{data.transTimeStr + " (HH:MI:SS)"} {data.transTimeStr + " (HH:MI:SS)"}
</FormLabel> </FormLabel>
@@ -119,13 +119,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={12}> <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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
<FormattedMessage id="paymentRefCode" />: <FormattedMessage id="paymentRefCode" />:
</FormLabel> </FormLabel>
</Grid> </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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{data.egisRefNo} {data.egisRefNo}
</FormLabel> </FormLabel>
@@ -133,13 +133,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={12}> <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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
<FormattedMessage id="payTotalDeatail"/>: <FormattedMessage id="payTotalDeatail"/>:
</FormLabel> </FormLabel>
</Grid> </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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)} {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
</FormLabel> </FormLabel>
@@ -147,13 +147,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={12}> <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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
<FormattedMessage id="payMethod"/>: <FormattedMessage id="payMethod"/>:
</FormLabel> </FormLabel>
</Grid> </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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{getPaymentMethod()} {getPaymentMethod()}
</FormLabel> </FormLabel>
@@ -161,13 +161,13 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} md={12}> <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" }}> <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
<FormattedMessage id="payReceipt"/>: <FormattedMessage id="payReceipt"/>:
</FormLabel> </FormLabel>
</Grid> </Grid>
<Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
<Grid item xs={6} md={5} sx={{textAlign: "left" }}>
{onDownload? {onDownload?
<LoadingComponent disableText={true} alignItems="flex-start"/> <LoadingComponent disableText={true} alignItems="flex-start"/>
: :


Write Preview
Loading…
Cancel
Save