feat: apply new order create api

locales/en.json

@@ -39,6 +39,8 @@
   "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.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.error.title": "Error",
   "dry-wash.order-view.fetch.error": "Failed to fetch the details of order #{{number}}",

locales/ru.json

@@ -78,6 +78,8 @@
   "dry-wash.order-create.car-body-select.options.sports-car": "Спорткар",
   "dry-wash.order-create.car-body-select.options.other": "Другой",
   "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.error.title": "Ошибка",
   "dry-wash.order-view.fetch.error": "Не удалось загрузить детали заказа №{{number}}",

src/components/order-form/form/helper.ts

@@ -1,9 +1,4 @@
 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 { OrderFormValues } from "./types";
@@ -32,49 +27,3 @@ export const useGetValidationRules = () => {
     },
   } 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> = {
-};

src/components/order-form/form/index.ts

@@ -1 +1,2 @@
+export type { OrderFormValues, OrderFormProps } from './types';
 export { OrderForm } from './order-form';

src/components/order-form/form/order-form.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 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 { CarNumberInput } from './car-number';
 import { FormInputField, FormControllerField } from './field';
-import { OrderFormValues } from './types';
+import { OrderFormProps, OrderFormValues } from './types';
 import { PhoneInput } from './phone';
 import { SubmitButton } from './submit';
-import { defaultValues, onSubmit, useGetValidationRules } from './helper';
+import { defaultValues, useGetValidationRules } from './helper';
 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 {
     handleSubmit,
     control,
@@ -123,7 +128,7 @@ export const OrderForm: FC = () => {
             }}
           />
         </YMapsProvider>
-        <SubmitButton isLoading={isSubmitting} mt={4} />
+        <SubmitButton isLoading={isSubmitting || loading} mt={4} />
       </VStack>
     </Box>
   );

src/components/order-form/form/types.ts

@@ -1,3 +1,5 @@
+import { SubmitHandler } from "react-hook-form";
+
 export type OrderFormValues = {
   phone: string;
   carNumber: string;
@@ -7,3 +9,8 @@ export type OrderFormValues = {
   availableDatetimeBegin: string;
   availableDatetimeEnd: string;
 };
+
+export type OrderFormProps = {
+  onSubmit: SubmitHandler<OrderFormValues>;
+  loading: boolean;
+};

src/pages/order-create/helper.ts

@@ -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(),
+    }
+  };
+};

src/pages/order-create/index.tsx

@@ -1,17 +1,44 @@
 import React, { FC } from 'react';
 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 { OrderForm } from '../../components/order-form';
+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 (
-    <LandingThemeProvider>
     <Container
       w='full'
       maxWidth='container.xl'
@@ -21,12 +48,16 @@ const Page: FC = () => {
       centerContent
     >
       <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
-          <Heading textAlign='center' mt={4}>{t('title')}</Heading>
-          <OrderForm />
+        <Heading textAlign='center' mt={4}>
+          {t('title')}
+        </Heading>
+        <OrderForm
+          onSubmit={onOrderFormSubmit}
+          loading={createOrderMutation.isLoading}
+        />
       </VStack>
     </Container>
-    </LandingThemeProvider>
   );
 };
 
-export default Page;
+export default withLandingThemeProvider(Page);