76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import React, { FC, useEffect } from 'react';
|
|
import { HStack, Spinner, useToast } from '@chakra-ui/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Container, Heading, VStack } from '@chakra-ui/react';
|
|
import { useParams } from 'react-router-dom';
|
|
|
|
import { LandingThemeProvider } from '../../containers';
|
|
import { OrderDetails } from '../../components/order-view';
|
|
|
|
import { useFetchOrderDetails } from './helper';
|
|
|
|
const Page: FC = () => {
|
|
const { t } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash.order-view',
|
|
});
|
|
|
|
const { orderId } = useParams();
|
|
|
|
const { isLoading, data, error } = useFetchOrderDetails({ orderId });
|
|
|
|
const toast = useToast();
|
|
useEffect(() => {
|
|
if (error) {
|
|
toast({
|
|
title: t('error.title'),
|
|
description: t('fetch.error'),
|
|
status: 'error',
|
|
duration: 5000,
|
|
isClosable: true,
|
|
position: 'bottom-right',
|
|
});
|
|
}
|
|
}, [error]);
|
|
|
|
return (
|
|
<LandingThemeProvider>
|
|
<Container
|
|
w='full'
|
|
maxWidth='container.xl'
|
|
minH='100vh'
|
|
padding={0}
|
|
bg='white'
|
|
centerContent
|
|
>
|
|
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
|
|
<Heading textAlign='center' mt={4}>
|
|
{t('title')}
|
|
</Heading>
|
|
{isLoading ? (
|
|
<HStack width='full' justifyContent='center'>
|
|
<Spinner size='lg' />
|
|
</HStack>
|
|
) : (
|
|
data && (
|
|
<OrderDetails
|
|
id={data.id}
|
|
orderDate={data.orderDate}
|
|
status={data.status}
|
|
phone={data.phone}
|
|
carNumber={data.carNumber}
|
|
carBody={data.carBody}
|
|
carColor={data.carColor}
|
|
location={data.location}
|
|
datetimeBegin={data.startWashTime}
|
|
datetimeEnd={data.endWashTime}
|
|
/>
|
|
)
|
|
)}
|
|
</VStack>
|
|
</Container>
|
|
</LandingThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default Page;
|