react-garden
Version:
React + TypeScript + ThreeJS app using Material UI on NextJS, Apollo Client, GraphQL + WordPress REST APIs, for ThreeD web development.. a part of the threed.ai code family.
342 lines (324 loc) • 14.1 kB
JavaScript
// ** React Imports
import { useEffect, useState } from 'react'
// ** Next Imports
import Link from 'next/link'
// ** MUI Imports
import Grid from '@mui/material/Grid'
import Alert from '@mui/material/Alert'
import Table from '@mui/material/Table'
import Divider from '@mui/material/Divider'
import TableRow from '@mui/material/TableRow'
import TableHead from '@mui/material/TableHead'
import TableBody from '@mui/material/TableBody'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import { styled, useTheme } from '@mui/material/styles'
import TableCell from '@mui/material/TableCell'
// ** Third Party Components
import axios from 'axios'
// ** Configs
import themeConfig from '~/configs/themeConfig'
const CalcWrapper = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
'&:not(:last-of-type)': {
marginBottom: theme.spacing(2)
}
}))
const MUITableCell = styled(TableCell)(({ theme }) => ({
borderBottom: 0,
paddingLeft: '0 !important',
paddingRight: '0 !important',
paddingTop: `${theme.spacing(1)} !important`,
paddingBottom: `${theme.spacing(1)} !important`
}))
const InvoicePrint = ({ id }) => {
// ** State
const [error, setError] = useState(false)
const [data, setData] = useState(null)
// ** Hooks
const theme = useTheme()
useEffect(() => {
setTimeout(() => {
window.print()
}, 100)
}, [])
useEffect(() => {
axios
.get('/apps/invoice/single-invoice', { params: { id } })
.then(res => {
setData(res.data)
setError(false)
})
.catch(() => {
setData(null)
setError(true)
})
}, [id])
if (data) {
const { invoice, paymentDetails } = data
return (
<Box sx={{ p: 12, pb: 6 }}>
<Grid container>
<Grid item xs={8} sx={{ mb: { sm: 0, xs: 4 } }}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Box sx={{ mb: 6, display: 'flex', alignItems: 'center' }}>
<svg
width={30}
height={25}
version='1.1'
viewBox='0 0 30 23'
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
>
<g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
<g id='Artboard' transform='translate(-95.000000, -51.000000)'>
<g id='logo' transform='translate(95.000000, 50.000000)'>
<path
id='Combined-Shape'
fill={theme.palette.primary.main}
d='M30,21.3918362 C30,21.7535219 29.9019196,22.1084381 29.7162004,22.4188007 C29.1490236,23.366632 27.9208668,23.6752135 26.9730355,23.1080366 L26.9730355,23.1080366 L23.714971,21.1584295 C23.1114106,20.7972624 22.7419355,20.1455972 22.7419355,19.4422291 L22.7419355,19.4422291 L22.741,12.7425689 L15,17.1774194 L7.258,12.7425689 L7.25806452,19.4422291 C7.25806452,20.1455972 6.88858935,20.7972624 6.28502902,21.1584295 L3.0269645,23.1080366 C2.07913318,23.6752135 0.850976404,23.366632 0.283799571,22.4188007 C0.0980803893,22.1084381 2.0190442e-15,21.7535219 0,21.3918362 L0,3.58469444 L0.00548573643,3.43543209 L0.00548573643,3.43543209 L0,3.5715689 C3.0881846e-16,2.4669994 0.8954305,1.5715689 2,1.5715689 C2.36889529,1.5715689 2.73060353,1.67359571 3.04512412,1.86636639 L15,9.19354839 L26.9548759,1.86636639 C27.2693965,1.67359571 27.6311047,1.5715689 28,1.5715689 C29.1045695,1.5715689 30,2.4669994 30,3.5715689 L30,3.5715689 Z'
/>
<polygon
id='Rectangle'
opacity='0.077704'
fill={theme.palette.common.black}
points='0 8.58870968 7.25806452 12.7505183 7.25806452 16.8305646'
/>
<polygon
id='Rectangle'
opacity='0.077704'
fill={theme.palette.common.black}
points='0 8.58870968 7.25806452 12.6445567 7.25806452 15.1370162'
/>
<polygon
id='Rectangle'
opacity='0.077704'
fill={theme.palette.common.black}
points='22.7419355 8.58870968 30 12.7417372 30 16.9537453'
transform='translate(26.370968, 12.771227) scale(-1, 1) translate(-26.370968, -12.771227) '
/>
<polygon
id='Rectangle'
opacity='0.077704'
fill={theme.palette.common.black}
points='22.7419355 8.58870968 30 12.6409734 30 15.2601969'
transform='translate(26.370968, 11.924453) scale(-1, 1) translate(-26.370968, -11.924453) '
/>
<path
id='Rectangle'
fillOpacity='0.15'
fill={theme.palette.common.white}
d='M3.04512412,1.86636639 L15,9.19354839 L15,9.19354839 L15,17.1774194 L0,8.58649679 L0,3.5715689 C3.0881846e-16,2.4669994 0.8954305,1.5715689 2,1.5715689 C2.36889529,1.5715689 2.73060353,1.67359571 3.04512412,1.86636639 Z'
/>
<path
id='Rectangle'
fillOpacity='0.35'
fill={theme.palette.common.white}
transform='translate(22.500000, 8.588710) scale(-1, 1) translate(-22.500000, -8.588710) '
d='M18.0451241,1.86636639 L30,9.19354839 L30,9.19354839 L30,17.1774194 L15,8.58649679 L15,3.5715689 C15,2.4669994 15.8954305,1.5715689 17,1.5715689 C17.3688953,1.5715689 17.7306035,1.67359571 18.0451241,1.86636639 Z'
/>
</g>
</g>
</g>
</svg>
<Typography
variant='h6'
sx={{ ml: 2.5, fontWeight: 600, lineHeight: 'normal', textTransform: 'uppercase' }}
>
{themeConfig.templateName}
</Typography>
</Box>
<Box>
<Typography variant='body2' sx={{ mb: 1 }}>
Office 149, 450 South Brand Brooklyn
</Typography>
<Typography variant='body2' sx={{ mb: 1 }}>
San Diego County, CA 91905, USA
</Typography>
<Typography variant='body2'>+1 (123) 456 7891, +44 (876) 543 2198</Typography>
</Box>
</Box>
</Grid>
<Grid item xs={4}>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: { sm: 'flex-end', xs: 'flex-start' } }}>
<Typography variant='h6' sx={{ mb: 2 }}>
{`Invoice #${invoice.id}`}
</Typography>
<Box sx={{ mb: 2, display: 'flex' }}>
<Typography variant='body2' sx={{ mr: 3 }}>
Date Issued:
</Typography>
<Typography variant='body2' sx={{ fontWeight: 600 }}>
{invoice.issuedDate}
</Typography>
</Box>
<Box sx={{ display: 'flex' }}>
<Typography variant='body2' sx={{ mr: 3 }}>
Date Due:
</Typography>
<Typography variant='body2' sx={{ fontWeight: 600 }}>
{invoice.dueDate}
</Typography>
</Box>
</Box>
</Grid>
</Grid>
<Divider sx={{ my: 6 }} />
<Grid container>
<Grid item xs={7} md={8} sx={{ mb: { lg: 0, xs: 4 } }}>
<Typography variant='body2' sx={{ mb: 3.5, fontWeight: 600 }}>
Invoice To:
</Typography>
<Typography variant='body2' sx={{ mb: 2 }}>
{invoice.name}
</Typography>
<Typography variant='body2' sx={{ mb: 2 }}>
{invoice.company}
</Typography>
<Typography variant='body2' sx={{ mb: 2 }}>
{invoice.address}
</Typography>
<Typography variant='body2' sx={{ mb: 2 }}>
{invoice.contact}
</Typography>
<Typography variant='body2' sx={{ mb: 2 }}>
{invoice.companyEmail}
</Typography>
</Grid>
<Grid item xs={5} md={4}>
<Typography variant='body2' sx={{ mb: 3.5, fontWeight: 600 }}>
Bill To:
</Typography>
<Table>
<TableBody>
<TableRow>
<MUITableCell>Total Due:</MUITableCell>
<MUITableCell>{paymentDetails.totalDue}</MUITableCell>
</TableRow>
<TableRow>
<MUITableCell>Bank name:</MUITableCell>
<MUITableCell>{paymentDetails.bankName}</MUITableCell>
</TableRow>
<TableRow>
<MUITableCell>Country:</MUITableCell>
<MUITableCell>{paymentDetails.country}</MUITableCell>
</TableRow>
<TableRow>
<MUITableCell>IBAN:</MUITableCell>
<MUITableCell>{paymentDetails.iban}</MUITableCell>
</TableRow>
<TableRow>
<MUITableCell>SWIFT code:</MUITableCell>
<MUITableCell>{paymentDetails.swiftCode}</MUITableCell>
</TableRow>
</TableBody>
</Table>
</Grid>
</Grid>
<Divider sx={{ mt: 6, mb: 0 }} />
<Table sx={{ mb: 6 }}>
<TableHead>
<TableRow>
<TableCell>Item</TableCell>
<TableCell>Description</TableCell>
<TableCell>hours</TableCell>
<TableCell>qty</TableCell>
<TableCell>Total</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Premium Branding Package</TableCell>
<TableCell>Branding & Promotion</TableCell>
<TableCell>48</TableCell>
<TableCell>1</TableCell>
<TableCell>$32</TableCell>
</TableRow>
<TableRow>
<TableCell>Social Media</TableCell>
<TableCell>Social media templates</TableCell>
<TableCell>42</TableCell>
<TableCell>1</TableCell>
<TableCell>$28</TableCell>
</TableRow>
<TableRow>
<TableCell>Web Design</TableCell>
<TableCell>Web designing package</TableCell>
<TableCell>46</TableCell>
<TableCell>1</TableCell>
<TableCell>$24</TableCell>
</TableRow>
<TableRow>
<TableCell>SEO</TableCell>
<TableCell>Search engine optimization</TableCell>
<TableCell>40</TableCell>
<TableCell>1</TableCell>
<TableCell>$22</TableCell>
</TableRow>
</TableBody>
</Table>
<Grid container>
<Grid item xs={8} sm={7} lg={9}>
<Box sx={{ mb: 2, display: 'flex', alignItems: 'center' }}>
<Typography variant='body2' sx={{ mr: 2, fontWeight: 600 }}>
Salesperson:
</Typography>
<Typography variant='body2'>Tommy Shelby</Typography>
</Box>
<Typography variant='body2'>Thanks for your business</Typography>
</Grid>
<Grid item xs={4} sm={5} lg={3}>
<CalcWrapper>
<Typography variant='body2'>Subtotal:</Typography>
<Typography variant='body2' sx={{ fontWeight: 600 }}>
$1800
</Typography>
</CalcWrapper>
<CalcWrapper>
<Typography variant='body2'>Discount:</Typography>
<Typography variant='body2' sx={{ fontWeight: 600 }}>
$28
</Typography>
</CalcWrapper>
<CalcWrapper>
<Typography variant='body2'>Tax:</Typography>
<Typography variant='body2' sx={{ fontWeight: 600 }}>
21%
</Typography>
</CalcWrapper>
<Divider />
<CalcWrapper>
<Typography variant='body2'>Total:</Typography>
<Typography variant='body2' sx={{ fontWeight: 600 }}>
$1690
</Typography>
</CalcWrapper>
</Grid>
</Grid>
<Divider sx={{ my: 6 }} />
<Typography variant='body2'>
<strong>Note:</strong> It was a pleasure working with you and your team. We hope you will keep us in mind for
future freelance projects. Thank You!
</Typography>
</Box>
)
} else if (error) {
return (
<Box sx={{ p: 5 }}>
<Grid container spacing={6}>
<Grid item xs={12}>
<Alert severity='error'>
Invoice with the id: {id} does not exist. Please check the list of invoices:{' '}
<Link href='/apps/invoice/list'>Invoice List</Link>
</Alert>
</Grid>
</Grid>
</Box>
)
} else {
return null
}
}
export default InvoicePrint