Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 12x | import { CURRENCY } from "@constants/constants";
import { Box, Grid, Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { formatInUTCMoment } from "@utils/date.helpers";
type TDate = string | number | null | undefined;
type Props = {
amount?: string;
invoiceDate?: TDate | Date;
dueDate: TDate;
invoiceKVNumber: string;
from: string;
to: string;
notes?: string;
};
const InvoiceCommonMetadata = ({
amount,
dueDate,
invoiceDate,
invoiceKVNumber,
from,
to,
notes,
}: Props) => {
return (
<>
<GiveText id="from" color="secondary">
Invoice from {from}
</GiveText>
<GiveText
id="amount"
color="primary"
sx={{
fontWeight: 400,
fontSize: "48px",
lineHeight: "52px",
letterSpacing: "-2%",
fontFamily: "Arial",
}}
>
{amount} {CURRENCY}
</GiveText>
{notes && (
<Box>
<GiveText fontSize="14px" color="secondary">
{notes}
</GiveText>
</Box>
)}
<Box id="dates">
{invoiceDate && (
<GiveText fontSize="14px" color="secondary">
Invoice Date: {formatInUTCMoment(invoiceDate, "Do MMMM YYYY", true)}
</GiveText>
)}
<GiveText fontSize="14px" color="secondary">
Due Date: {formatInUTCMoment(dueDate, "Do MMMM YYYY")}
</GiveText>
</Box>
<Stack id="from-to">
<Grid container sx={{ width: "fit-content" }}>
<Grid item xs={6} md={6}>
<GiveText color="secondary" fontSize={"16px"}>
To
</GiveText>
</Grid>
<Grid item xs={6} md={6}>
<GiveTruncateText lineClamp={2} fontSize="16px" color="secondary">
{to}
</GiveTruncateText>
</Grid>
<Grid item xs={6} md={6}>
<GiveText color="secondary" fontSize={"16px"}>
From
</GiveText>
</Grid>
<Grid item xs={6} md={6}>
<GiveTruncateText lineClamp={2} fontSize="16px" color="secondary">
{from}
</GiveTruncateText>
</Grid>
<Grid item xs={6} md={6}>
<GiveText color="secondary" fontSize={"16px"}>
Invoice
</GiveText>
</Grid>
<Grid item xs={6} md={6} fontSize={"16px"}>
<GiveText color="secondary">{invoiceKVNumber}</GiveText>
</Grid>
</Grid>
</Stack>
</>
);
};
export default InvoiceCommonMetadata;
|