feat: apply new order create api
This commit is contained in:
parent
b719006c79
commit
0307f36e57
@ -39,6 +39,8 @@
|
|||||||
"dry-wash.order-create.car-body-select.options.sports-car" : "Sports-car",
|
"dry-wash.order-create.car-body-select.options.sports-car" : "Sports-car",
|
||||||
"dry-wash.order-create.car-body-select.options.other": "Other",
|
"dry-wash.order-create.car-body-select.options.other": "Other",
|
||||||
"dry-wash.order-create.form.submit-button.label": "Submit",
|
"dry-wash.order-create.form.submit-button.label": "Submit",
|
||||||
|
"dry-wash.order-create.create-order-query.success.title": "The order is successfully created",
|
||||||
|
"dry-wash.order-create.create-order-query.error.title": "Failed to create an order",
|
||||||
"dry-wash.order-view.title": "Your order",
|
"dry-wash.order-view.title": "Your order",
|
||||||
"dry-wash.order-view.error.title": "Error",
|
"dry-wash.order-view.error.title": "Error",
|
||||||
"dry-wash.order-view.fetch.error": "Failed to fetch the details of order #{{number}}",
|
"dry-wash.order-view.fetch.error": "Failed to fetch the details of order #{{number}}",
|
||||||
|
@ -78,6 +78,8 @@
|
|||||||
"dry-wash.order-create.car-body-select.options.sports-car": "Спорткар",
|
"dry-wash.order-create.car-body-select.options.sports-car": "Спорткар",
|
||||||
"dry-wash.order-create.car-body-select.options.other": "Другой",
|
"dry-wash.order-create.car-body-select.options.other": "Другой",
|
||||||
"dry-wash.order-create.form.submit-button.label": "Отправить",
|
"dry-wash.order-create.form.submit-button.label": "Отправить",
|
||||||
|
"dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан",
|
||||||
|
"dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ",
|
||||||
"dry-wash.order-view.title": "Ваш заказ",
|
"dry-wash.order-view.title": "Ваш заказ",
|
||||||
"dry-wash.order-view.error.title": "Ошибка",
|
"dry-wash.order-view.error.title": "Ошибка",
|
||||||
"dry-wash.order-view.fetch.error": "Не удалось загрузить детали заказа №{{number}}",
|
"dry-wash.order-view.fetch.error": "Не удалось загрузить детали заказа №{{number}}",
|
||||||
|
@ -1,9 +1,4 @@
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { getConfigValue } from '@brojs/cli';
|
|
||||||
import { InputProps, SelectProps } from "@chakra-ui/react";
|
|
||||||
import dayjs from "dayjs";
|
|
||||||
|
|
||||||
import { Order } from "../../../models/landing";
|
|
||||||
|
|
||||||
import { FormFieldProps } from "./field";
|
import { FormFieldProps } from "./field";
|
||||||
import { OrderFormValues } from "./types";
|
import { OrderFormValues } from "./types";
|
||||||
@ -32,49 +27,3 @@ export const useGetValidationRules = () => {
|
|||||||
},
|
},
|
||||||
} satisfies Record<string, FormFieldProps['rules']>;
|
} satisfies Record<string, FormFieldProps['rules']>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const removeAllSpaces = (str: string) => str.replace(/\s+/g, '');
|
|
||||||
|
|
||||||
const getValidCarBodyStyle = (fieldValue: string) => {
|
|
||||||
const carBodyAsNumber = Number(fieldValue);
|
|
||||||
return Number.isNaN(carBodyAsNumber) ? undefined : carBodyAsNumber;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const formatFormValues = ({ phone, carNumber, carBody, carColor, carLocation, availableDatetimeBegin, availableDatetimeEnd }: OrderFormValues): Order.Create => {
|
|
||||||
return {
|
|
||||||
customer: {
|
|
||||||
phone
|
|
||||||
},
|
|
||||||
car: {
|
|
||||||
number: removeAllSpaces(carNumber),
|
|
||||||
body: getValidCarBodyStyle(carBody),
|
|
||||||
color: carColor
|
|
||||||
},
|
|
||||||
washing: {
|
|
||||||
location: carLocation,
|
|
||||||
begin: dayjs(availableDatetimeBegin).toISOString(),
|
|
||||||
end: dayjs(availableDatetimeEnd).toISOString(),
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const endpoint = getConfigValue('dry-wash.api');
|
|
||||||
|
|
||||||
export const onSubmit = async (values: OrderFormValues) => {
|
|
||||||
const response = await fetch(`${endpoint}/order/create`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(formatFormValues(values)),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Failed to create order: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return await response.json();
|
|
||||||
};
|
|
||||||
|
|
||||||
export const inputCommonStyles: Partial<InputProps & SelectProps> = {
|
|
||||||
};
|
|
@ -1 +1,2 @@
|
|||||||
|
export type { OrderFormValues, OrderFormProps } from './types';
|
||||||
export { OrderForm } from './order-form';
|
export { OrderForm } from './order-form';
|
@ -1,4 +1,4 @@
|
|||||||
import React, { FC } from 'react';
|
import React from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Box, Flex, FormControl, FormLabel, VStack } from '@chakra-ui/react';
|
import { Box, Flex, FormControl, FormLabel, VStack } from '@chakra-ui/react';
|
||||||
@ -7,14 +7,19 @@ import { CarBodySelect } from './car-body';
|
|||||||
import { CarColorInput } from './car-color';
|
import { CarColorInput } from './car-color';
|
||||||
import { CarNumberInput } from './car-number';
|
import { CarNumberInput } from './car-number';
|
||||||
import { FormInputField, FormControllerField } from './field';
|
import { FormInputField, FormControllerField } from './field';
|
||||||
import { OrderFormValues } from './types';
|
import { OrderFormProps, OrderFormValues } from './types';
|
||||||
import { PhoneInput } from './phone';
|
import { PhoneInput } from './phone';
|
||||||
import { SubmitButton } from './submit';
|
import { SubmitButton } from './submit';
|
||||||
import { defaultValues, onSubmit, useGetValidationRules } from './helper';
|
import { defaultValues, useGetValidationRules } from './helper';
|
||||||
import { DateTimeInput } from './date-time';
|
import { DateTimeInput } from './date-time';
|
||||||
import { LocationInput, MapComponent, StringLocation, YMapsProvider } from './location';
|
import {
|
||||||
|
LocationInput,
|
||||||
|
MapComponent,
|
||||||
|
StringLocation,
|
||||||
|
YMapsProvider,
|
||||||
|
} from './location';
|
||||||
|
|
||||||
export const OrderForm: FC = () => {
|
export const OrderForm = ({ onSubmit, loading }: OrderFormProps) => {
|
||||||
const {
|
const {
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
control,
|
control,
|
||||||
@ -123,7 +128,7 @@ export const OrderForm: FC = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</YMapsProvider>
|
</YMapsProvider>
|
||||||
<SubmitButton isLoading={isSubmitting} mt={4} />
|
<SubmitButton isLoading={isSubmitting || loading} mt={4} />
|
||||||
</VStack>
|
</VStack>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import { SubmitHandler } from "react-hook-form";
|
||||||
|
|
||||||
export type OrderFormValues = {
|
export type OrderFormValues = {
|
||||||
phone: string;
|
phone: string;
|
||||||
carNumber: string;
|
carNumber: string;
|
||||||
@ -7,3 +9,8 @@ export type OrderFormValues = {
|
|||||||
availableDatetimeBegin: string;
|
availableDatetimeBegin: string;
|
||||||
availableDatetimeEnd: string;
|
availableDatetimeEnd: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type OrderFormProps = {
|
||||||
|
onSubmit: SubmitHandler<OrderFormValues>;
|
||||||
|
loading: boolean;
|
||||||
|
};
|
29
src/pages/order-create/helper.ts
Normal file
29
src/pages/order-create/helper.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
import { Order } from "../../models/landing";
|
||||||
|
import { OrderFormValues } from "../../components/order-form";
|
||||||
|
|
||||||
|
const removeAllSpaces = (str: string) => str.replace(/\s+/g, '');
|
||||||
|
|
||||||
|
const getValidCarBodyStyle = (fieldValue: string) => {
|
||||||
|
const carBodyAsNumber = Number(fieldValue);
|
||||||
|
return Number.isNaN(carBodyAsNumber) ? undefined : carBodyAsNumber;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const formatFormValues = ({ phone, carNumber, carBody, carColor, carLocation, availableDatetimeBegin, availableDatetimeEnd }: OrderFormValues): Order.Create => {
|
||||||
|
return {
|
||||||
|
customer: {
|
||||||
|
phone
|
||||||
|
},
|
||||||
|
car: {
|
||||||
|
number: removeAllSpaces(carNumber),
|
||||||
|
body: getValidCarBodyStyle(carBody),
|
||||||
|
color: carColor
|
||||||
|
},
|
||||||
|
washing: {
|
||||||
|
location: carLocation,
|
||||||
|
begin: dayjs(availableDatetimeBegin).toISOString(),
|
||||||
|
end: dayjs(availableDatetimeEnd).toISOString(),
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
@ -1,32 +1,63 @@
|
|||||||
import React, { FC } from 'react';
|
import React, { FC } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Container, Heading, VStack } from '@chakra-ui/react';
|
import { Container, Heading, useToast, VStack } from '@chakra-ui/react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
import { LandingThemeProvider } from '../../containers';
|
import { withLandingThemeProvider } from '../../containers';
|
||||||
import { OrderForm } from '../../components/order-form';
|
import { OrderForm, OrderFormProps } from '../../components/order-form';
|
||||||
|
import { useCreateOrderMutation } from '../../api';
|
||||||
|
import { URLs } from '../../__data__/urls';
|
||||||
|
|
||||||
|
import { formatFormValues } from './helper';
|
||||||
|
|
||||||
const Page: FC = () => {
|
const Page: FC = () => {
|
||||||
const { t } = useTranslation('~', {
|
const { t } = useTranslation('~', {
|
||||||
keyPrefix: 'dry-wash.order-create',
|
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 (
|
return (
|
||||||
<LandingThemeProvider>
|
<Container
|
||||||
<Container
|
w='full'
|
||||||
w='full'
|
maxWidth='container.xl'
|
||||||
maxWidth='container.xl'
|
minH='100vh'
|
||||||
minH='100vh'
|
padding={0}
|
||||||
padding={0}
|
bg='white'
|
||||||
bg='white'
|
centerContent
|
||||||
centerContent
|
>
|
||||||
>
|
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
|
||||||
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
|
<Heading textAlign='center' mt={4}>
|
||||||
<Heading textAlign='center' mt={4}>{t('title')}</Heading>
|
{t('title')}
|
||||||
<OrderForm />
|
</Heading>
|
||||||
</VStack>
|
<OrderForm
|
||||||
</Container>
|
onSubmit={onOrderFormSubmit}
|
||||||
</LandingThemeProvider>
|
loading={createOrderMutation.isLoading}
|
||||||
|
/>
|
||||||
|
</VStack>
|
||||||
|
</Container>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Page;
|
export default withLandingThemeProvider(Page);
|
||||||
|
Loading…
Reference in New Issue
Block a user