115 lines
2.6 KiB
TypeScript
115 lines
2.6 KiB
TypeScript
import React, { FC } from 'react';
|
|
import {
|
|
Alert,
|
|
AlertIcon,
|
|
Heading,
|
|
HStack,
|
|
UnorderedList,
|
|
ListItem,
|
|
Text,
|
|
} from '@chakra-ui/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import dayjs from 'dayjs';
|
|
import localizedFormat from "dayjs/plugin/localizedFormat";
|
|
dayjs.extend(localizedFormat);
|
|
|
|
import { Order } from '../../../models/landing';
|
|
import { formatDatetime } from '../../../lib';
|
|
import { carBodySelectOptions } from '../../order-form/form/car-body/helper';
|
|
|
|
import { OrderStatus } from './status';
|
|
|
|
type OrderDetailsProps = Pick<
|
|
Order.View,
|
|
| 'orderNumber'
|
|
| 'status'
|
|
| 'phone'
|
|
| 'carNumber'
|
|
| 'carBody'
|
|
| 'carColor'
|
|
| 'location'
|
|
| 'startWashTime'
|
|
| 'endWashTime'
|
|
| 'created'
|
|
>;
|
|
|
|
export const OrderDetails: FC<OrderDetailsProps> = ({
|
|
orderNumber,
|
|
status,
|
|
phone,
|
|
carNumber,
|
|
carBody,
|
|
carColor,
|
|
location,
|
|
startWashTime,
|
|
endWashTime,
|
|
created
|
|
}) => {
|
|
const { t } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash.order-view.details',
|
|
});
|
|
const { t: tCarBody } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash.order-create.car-body-select.options',
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<HStack
|
|
width='full'
|
|
flexWrap='wrap'
|
|
justifyContent='space-between'
|
|
gap={2}
|
|
>
|
|
<Heading as='h2' size='lg'>
|
|
{t('title', { number: orderNumber })} ({dayjs(created).format('LLLL')})
|
|
</Heading>
|
|
<OrderStatus value={status} />
|
|
</HStack>
|
|
<UnorderedList styleType='none'>
|
|
{[
|
|
{
|
|
label: t('owner'),
|
|
value: phone,
|
|
},
|
|
{
|
|
label: t('car'),
|
|
value: [
|
|
carNumber,
|
|
tCarBody(
|
|
`${carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey}`,
|
|
),
|
|
carColor,
|
|
]
|
|
.filter((v) => v)
|
|
.join(', '),
|
|
},
|
|
{
|
|
label: t('location'),
|
|
value: location,
|
|
},
|
|
{
|
|
label: t('datetime-range'),
|
|
value: [
|
|
formatDatetime(startWashTime),
|
|
formatDatetime(endWashTime),
|
|
].join(' - '),
|
|
},
|
|
].map(({ label, value }, i) => (
|
|
<ListItem key={i}>
|
|
{label}:{' '}
|
|
<Text as='span' color='primary.500' fontWeight='bold'>
|
|
{value}
|
|
</Text>
|
|
</ListItem>
|
|
))}
|
|
</UnorderedList>
|
|
<Alert status='info' alignItems='flex-start'>
|
|
<AlertIcon />
|
|
{t('alert')}
|
|
</Alert>
|
|
</>
|
|
);
|
|
};
|
|
|
|
// todo: add i18n for date & time
|