Sfoglia il codice sorgente

update payment UI

master
Anna Ho 1 anno fa
parent
commit
03623a1865
3 ha cambiato i file con 56 aggiunte e 34 eliminazioni
  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 Vedi File

@@ -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>



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

@@ -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"]);


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

@@ -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"/>
:


Caricamento…
Annulla
Salva