60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import CardHeader from '@mui/material/CardHeader';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import { Iconify } from 'src/components/iconify';
|
|
import type { IOrderCustomer } from 'src/types/party-order';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = {
|
|
customer?: IOrderCustomer;
|
|
};
|
|
|
|
export function OrderDetailsCustomer({ customer }: Props) {
|
|
return (
|
|
<>
|
|
<CardHeader
|
|
title="Customer info"
|
|
action={
|
|
<IconButton>
|
|
<Iconify icon="solar:pen-bold" />
|
|
</IconButton>
|
|
}
|
|
/>
|
|
<Box sx={{ p: 3, display: 'flex' }}>
|
|
<Avatar
|
|
alt={customer?.name}
|
|
src={customer?.avatarUrl}
|
|
sx={{ width: 48, height: 48, mr: 2 }}
|
|
/>
|
|
|
|
<Stack spacing={0.5} sx={{ typography: 'body2', alignItems: 'flex-start' }}>
|
|
<Typography variant="subtitle2">{customer?.name}</Typography>
|
|
|
|
<Box sx={{ color: 'text.secondary' }}>{customer?.email}</Box>
|
|
|
|
<div>
|
|
IP address:
|
|
<Box component="span" sx={{ color: 'text.secondary', ml: 0.25 }}>
|
|
{customer?.ipAddress}
|
|
</Box>
|
|
</div>
|
|
|
|
<Button
|
|
size="small"
|
|
color="error"
|
|
startIcon={<Iconify icon="mingcute:add-line" />}
|
|
sx={{ mt: 1 }}
|
|
>
|
|
Add to Blacklist
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|