64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import React, { FC } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Container, Heading, useToast, VStack } from '@chakra-ui/react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { withLandingThemeProvider } from '../../containers';
|
|
import { OrderForm, OrderFormProps } from '../../components/order-form';
|
|
import { useCreateOrderMutation } from '../../api';
|
|
import { URLs } from '../../__data__/urls';
|
|
|
|
import { formatFormValues } from './helper';
|
|
|
|
const Page: FC = () => {
|
|
const { t } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash.order-create',
|
|
});
|
|
|
|
const [createOrder, createOrderMutation] = useCreateOrderMutation();
|
|
|
|
const toast = useToast();
|
|
const navigate = useNavigate();
|
|
|
|
const onOrderFormSubmit: OrderFormProps['onSubmit'] = (values) => {
|
|
createOrder({ body: formatFormValues(values) })
|
|
.then(({ body: { id: orderId } }) => {
|
|
navigate({ pathname: URLs.orderView.getUrl(orderId) });
|
|
toast({
|
|
status: 'success',
|
|
title: t('create-order-query.success.title'),
|
|
});
|
|
})
|
|
.catch(({ error: errorMessage }) => {
|
|
toast({
|
|
status: 'error',
|
|
title: t('create-order-query.error.title'),
|
|
description: errorMessage,
|
|
});
|
|
});
|
|
};
|
|
|
|
return (
|
|
<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>
|
|
<OrderForm
|
|
onSubmit={onOrderFormSubmit}
|
|
loading={createOrderMutation.isLoading}
|
|
/>
|
|
</VStack>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default withLandingThemeProvider(Page);
|