locales/en.json

@@ -39,10 +39,9 @@
   "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.get-order-query.error.title": "Failed to fetch the details of order #{{number}}",
+  "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.details.title": "Order #{{number}}",
   "dry-wash.order-view.details.owner": "Owner",
   "dry-wash.order-view.details.car": "Car",

locales/ru.json

@@ -78,10 +78,9 @@
   "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.get-order-query.error.title": "Не удалось загрузить детали заказа №{{number}}",
+  "dry-wash.order-view.error.title": "Ошибка",
+  "dry-wash.order-view.fetch.error": "Не удалось загрузить детали заказа №{{number}}",
   "dry-wash.order-view.details.title": "Заказ №{{number}}",
   "dry-wash.order-view.details.owner": "Владелец",
   "dry-wash.order-view.details.car": "Автомобиль",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dry-wash",
-    "version": "0.5.0",
+    "version": "0.4.0",
     "description": "<a id=\"readme-top\"></a>",
     "main": "./src/index.tsx",
     "scripts": {
@@ -19,7 +19,7 @@
     "dependencies": {
         "@brojs/cli": "^1.6.3",
         "@chakra-ui/icons": "^2.2.4",
-        "@chakra-ui/react": "^2.10.5",
+        "@chakra-ui/react": "^2.4.2",
         "@emotion/react": "^11.4.1",
         "@emotion/styled": "^11.3.0",
         "@fontsource/open-sans": "^5.1.0",

src/api/arm.ts

@@ -1,5 +1,4 @@
 import { getConfigValue } from '@brojs/cli';
-import dayjs from 'dayjs';
 
 enum ArmEndpoints {
   ORDERS = '/arm/orders',
@@ -10,15 +9,12 @@ const armService = () => {
   const endpoint = getConfigValue('dry-wash.api');
 
   const fetchOrders = async ({ date }: { date: Date }) => {
-    const startDate = dayjs(date).startOf('day').toISOString();
-    const endDate = dayjs(date).endOf('day').toISOString();
-
     const response = await fetch(`${endpoint}${ArmEndpoints.ORDERS}`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ startDate, endDate }),
+      body: JSON.stringify({ date }),
     });
 
     if (!response.ok) {

src/api/index.ts

@@ -1 +0,0 @@
-export * from './landing';

src/api/landing.ts

@@ -0,0 +1,25 @@
+import { getConfigValue } from '@brojs/cli';
+
+import { Order } from '../models/landing';
+
+enum LandingEndpoints {
+  ORDER_VIEW = '/order'
+}
+
+const LandingService = () => {
+  const endpoint = getConfigValue('dry-wash.api');
+
+  const fetchOrder = async (orderId: Order.Id) => {
+    const response = await fetch(`${endpoint}${LandingEndpoints.ORDER_VIEW}/${orderId}`);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch order: ${response.status}`);
+    }
+
+    return await response.json();
+  };
+
+  return { fetchOrder };
+};
+
+export { LandingService, LandingEndpoints };

src/api/landing.tsx

@@ -1,107 +0,0 @@
-import { getConfigValue } from '@brojs/cli';
-import { useEffect, useState } from 'react';
-
-import { CreateOrder, GetOrder } from '../models/api';
-
-import { QueryState, Trigger } from './types';
-
-enum LandingEndpoints {
-  ORDER = '/order',
-  ORDER_CREATE = '/order/create',
-}
-
-const endpoint = getConfigValue('dry-wash.api');
-
-const useCreateOrderMutation = <D extends CreateOrder.Response>(): [
-  Trigger<CreateOrder.Params, QueryState<D>['data']>,
-  QueryState<D>,
-] => {
-  const [isLoading, setIsLoading] = useState<QueryState<D>['isLoading']>(false);
-  const [isSuccess, setIsSuccess] = useState<QueryState<D>['isSuccess']>();
-  const [data, setData] = useState<QueryState<D>['data']>();
-  const [isError, setIsError] = useState<QueryState<D>['isError']>();
-  const [error, setError] = useState<QueryState<D>['error']>();
-
-  const createOrder = async ({ body }: CreateOrder.Params) => {
-    setIsLoading(true);
-
-    try {
-      const response = await fetch(
-        `${endpoint}${LandingEndpoints.ORDER_CREATE}`,
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(body),
-        },
-      );
-
-      if (!response.ok) {
-        const errorResponseObject =
-          (await response.json()) as QueryState<D>['error'];
-        setIsError(true);
-        setError(errorResponseObject);
-        throw errorResponseObject;
-      }
-
-      const dataResponseObject =
-        (await response.json()) as QueryState<D>['data'];
-      setIsSuccess(true);
-      setData(dataResponseObject);
-
-      return dataResponseObject;
-    } catch (error) {
-      setIsError(true);
-      setError(error);
-      throw error;
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return [createOrder, { isLoading, isSuccess, data, isError, error }];
-};
-
-const useGetOrderQuery = <D extends GetOrder.Response>({
-  orderId,
-}: GetOrder.Params): QueryState<D> => {
-  const [isLoading, setIsLoading] = useState<QueryState<D>['isLoading']>(true);
-  const [isSuccess, setIsSuccess] = useState<QueryState<D>['isSuccess']>();
-  const [data, setData] = useState<QueryState<D>['data']>();
-  const [isError, setIsError] = useState<QueryState<D>['isError']>();
-  const [error, setError] = useState<QueryState<D>['error']>();
-  
-  useEffect(() => {
-    (async () => {
-      try {
-        const response = await fetch(
-          `${endpoint}${LandingEndpoints.ORDER}/${orderId}`,
-        );
-
-        if (!response.ok) {
-          const errorResponseObject =
-            (await response.json()) as QueryState<D>['error'];
-          setIsError(true);
-          setError(errorResponseObject);
-          throw errorResponseObject;
-        }
-
-        const dataResponseObject =
-          (await response.json()) as QueryState<D>['data'];
-        setIsSuccess(true);
-        setData(dataResponseObject);
-      } catch (error) {
-        setIsError(true);
-        setError(error);
-        throw error;
-      } finally {
-        setIsLoading(false);
-      }
-    })();
-  }, []);
-
-  return { isLoading, isSuccess, data, isError, error };
-};
-
-export { useCreateOrderMutation, useGetOrderQuery };

src/api/types.ts

@@ -1,22 +0,0 @@
-export type QueryData<D> = {
-  success: true;
-  body: D;
-};
-
-export type QueryErrorData = {
-  success: false;
-  error: string;
-};
-
-export type QueryState<D> = {
-  isLoading: boolean;
-  isSuccess: boolean;
-  data: QueryData<D>;
-  isError: boolean;
-  error: {
-    status: number;
-    data: QueryErrorData;
-  };
-};
-
-export type Trigger<P, D> = (params: P) => Promise<D>;

src/components/order-form/form/car-body/car-body-select.tsx

@@ -18,9 +18,7 @@ import { CarBodySelectOption } from './types';
 
 export const CarBodySelect = forwardRef<HTMLInputElement, InputProps>(
   function CarBodySelect(props, ref) {
-    const initialOption = carBodySelectOptions.find(({ value }) => value === Number(props.value));
+    const [selected, setSelected] = useState<Partial<CarBodySelectOption>>({});
-    const [selected, setSelected] = useState<Partial<CarBodySelectOption>>(initialOption);
-
     const handleOptionClick = (option: CarBodySelectOption) => {
       setSelected(option);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment

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

@@ -1,4 +1,7 @@
 import { useTranslation } from "react-i18next";
+import { InputProps, SelectProps } from "@chakra-ui/react";
+
+import { Order } from "../../../models/landing";
 
 import { FormFieldProps } from "./field";
 import { OrderFormValues } from "./types";
@@ -27,3 +30,38 @@ 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: availableDatetimeBegin,
+      end: availableDatetimeEnd,
+    }
+  };
+};
+
+export const onSubmit = (values: OrderFormValues) => {
+  return new Promise((resolve) => {
+    console.log(formatFormValues(values));
+    resolve(formatFormValues(values));
+  });
+};
+
+export const inputCommonStyles: Partial<InputProps & SelectProps> = {
+};

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

@@ -1,2 +1 @@
-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 from 'react';
+import React, { FC } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Box, Flex, FormControl, FormLabel, VStack } from '@chakra-ui/react';
@@ -7,19 +7,14 @@ import { CarBodySelect } from './car-body';
 import { CarColorInput } from './car-color';
 import { CarNumberInput } from './car-number';
 import { FormInputField, FormControllerField } from './field';
-import { OrderFormProps, OrderFormValues } from './types';
+import { OrderFormValues } from './types';
 import { PhoneInput } from './phone';
 import { SubmitButton } from './submit';
-import { defaultValues, useGetValidationRules } from './helper';
+import { defaultValues, onSubmit, useGetValidationRules } from './helper';
 import { DateTimeInput } from './date-time';
-import {
+import { LocationInput, MapComponent, StringLocation, YMapsProvider } from './location';
-  LocationInput,
-  MapComponent,
-  StringLocation,
-  YMapsProvider,
-} from './location';
 
-export const OrderForm = ({ onSubmit, loading }: OrderFormProps) => {
+export const OrderForm: FC = () => {
   const {
     handleSubmit,
     control,
@@ -128,7 +123,7 @@ export const OrderForm = ({ onSubmit, loading }: OrderFormProps) => {
             }}
           />
         </YMapsProvider>
-        <SubmitButton isLoading={isSubmitting || loading} mt={4} />
+        <SubmitButton isLoading={isSubmitting} mt={4} />
       </VStack>
     </Box>
   );

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

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

src/components/order-view/details/order-details.tsx

@@ -17,19 +17,7 @@ import { carBodySelectOptions } from '../../order-form/form/car-body/helper';
 
 import { OrderStatus } from './status';
 
-type OrderDetailsProps = Pick<
+type OrderDetailsProps = Order.View;
-  Order.View,
-  | 'id'
-  | 'status'
-  | 'phone'
-  | 'carNumber'
-  | 'carBody'
-  | 'carColor'
-  | 'location'
-  | 'startWashTime'
-  | 'endWashTime'
-  | 'created'
->;
 
 export const OrderDetails: FC<OrderDetailsProps> = ({
   id,
@@ -39,8 +27,8 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
   carBody,
   carColor,
   location,
-  startWashTime,
+  datetimeBegin,
-  endWashTime,
+  datetimeEnd,
 }) => {
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.order-view.details',
@@ -87,8 +75,8 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
           {
             label: t('datetime-range'),
             value: [
-              formatDatetime(startWashTime),
+              formatDatetime(datetimeBegin),
-              formatDatetime(endWashTime),
+              formatDatetime(datetimeEnd),
             ].join(' - '),
           },
         ].map(({ label, value }, i) => (

src/containers/LandingThemeProvider/LandingThemeProvider.tsx

@@ -1,31 +1,14 @@
-import React, { ComponentType, FC, PropsWithChildren } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { ChakraProvider } from '@chakra-ui/react';
 
 import { default as landingTheme } from './theme-config';
 import Fonts from './Fonts';
-import { toastOptions } from './toast-options';
 
 export const LandingThemeProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <ChakraProvider theme={landingTheme} toastOptions={toastOptions}>
+    <ChakraProvider theme={landingTheme}>
       <Fonts />
       {children}
     </ChakraProvider>
   );
 };
-
-export function withLandingThemeProvider<T extends JSX.IntrinsicAttributes>(WrappedComponent: ComponentType<T>) {
-  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
-
-  const ComponentWithLandingThemeProvider = (props: T) => {
-    return (
-      <LandingThemeProvider>
-        <WrappedComponent {...props} />
-      </LandingThemeProvider>
-    );
-  };
-
-  ComponentWithLandingThemeProvider.displayName = `withLandingThemeProvider(${displayName})`;
-
-  return ComponentWithLandingThemeProvider;
-}

src/containers/LandingThemeProvider/index.ts

@@ -1 +1 @@
-export { LandingThemeProvider, withLandingThemeProvider } from './LandingThemeProvider';
+export { LandingThemeProvider } from './LandingThemeProvider';

src/containers/LandingThemeProvider/toast-options.ts

@@ -1,8 +0,0 @@
-import { ToastProviderProps } from "@chakra-ui/react";
-
-export const toastOptions: ToastProviderProps = {
-  defaultOptions: {
-    position: 'top-right',
-    isClosable: true,
-  }
-};

src/models/api/index.ts

@@ -1 +1 @@
-export * from './order';
+export * from './order-view';

src/models/api/order-view.ts

@@ -0,0 +1,14 @@
+import { Order } from "../landing";
+
+export type FetchOrderQueryResponse = {
+  id: string;
+  orderDate: string;
+  carNumber: string;
+  carBody: number;
+  carColor?: string;
+  startWashTime: string;
+  endWashTime: string;
+  status: Order.Status;
+  phone: string;
+  location: string;
+};

src/models/api/order.ts

@@ -1,18 +0,0 @@
-/* eslint-disable @typescript-eslint/no-namespace */
-import { Order } from "../landing";
-
-export namespace CreateOrder {
-  export type Response = {
-    id: Order.Id
-  };
-  export type Params = {
-    body: Order.Create
-  };
-};
-
-export namespace GetOrder {
-  export type Response = Order.View;
-  export type Params = {
-    orderId: Order.Id
-  };
-};

src/models/common.ts

@@ -1 +0,0 @@
-export type IsoDate = string; // YYYY-MM-DDThh:mm:ss.mmmZ

src/models/landing/car.ts

@@ -1,4 +1,4 @@
-export type RegistrationNumber = string; // А012ВЕ16
+export type RegistrationNumber = string; // А012ВЕ
 
 export type Color = string; // #000000
 

src/models/landing/order.ts

@@ -1,5 +1,3 @@
-import { IsoDate } from "../common";
-
 import { Car, Customer, Washing } from ".";
 
 export type Id = string;
@@ -27,16 +25,14 @@ export type Create = {
 };
 
 export type View = {
+  id: Id;
+  orderDate: string,
+  status: Status,
   phone: Customer.PhoneNumber;
   carNumber: Car.RegistrationNumber;
   carBody: Car.BodyStyle;
   carColor?: Car.Color;
   location: Washing.Location;
-  startWashTime: Washing.AvailableBeginDateTime;
+  datetimeBegin: Washing.AvailableBeginDateTime;
-  endWashTime: Washing.AvailableEndDateTime;
+  datetimeEnd: Washing.AvailableEndDateTime;
-  status: Status,
-  notes: string;
-  created: IsoDate;
-  updated: IsoDate;
-  id: Id;
 };

src/models/landing/washing.ts

@@ -1,7 +1,5 @@
-import { IsoDate } from "../common";
+export type Location = string; // ?
 
-export type Location = string; // 55.754364, 48.743295 Университетская улица, 1, Иннополис, Верхнеуслонский район, Республика Татарстан (Татарстан), 420500
+export type AvailableBeginDateTime = string; // YYYY-MM-DDThh:mm
 
-export type AvailableBeginDateTime = IsoDate; 
+export type AvailableEndDateTime = string; // YYYY-MM-DDThh:mm
-
-export type AvailableEndDateTime = IsoDate;

src/pages/order-create/helper.ts

@@ -1,29 +0,0 @@
-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,44 +1,17 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Container, Heading, useToast, VStack } from '@chakra-ui/react';
+import { Container, Heading, VStack } from '@chakra-ui/react';
-import { useNavigate } from 'react-router-dom';
 
-import { withLandingThemeProvider } from '../../containers';
+import { LandingThemeProvider } from '../../containers';
-import { OrderForm, OrderFormProps } from '../../components/order-form';
+import { OrderForm } 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'
@@ -48,16 +21,12 @@ const Page: FC = () => {
         centerContent
       >
         <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>
-        <OrderForm
-          onSubmit={onOrderFormSubmit}
-          loading={createOrderMutation.isLoading}
-        />
         </VStack>
       </Container>
+    </LandingThemeProvider>
   );
 };
 
-export default withLandingThemeProvider(Page);
+export default Page;

src/pages/order-view/helper.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+import { LandingService } from '../../api/landing';
+import { Order } from '../../models/landing';
+import { FetchOrderQueryResponse } from '../../models/api';
+
+export const useFetchOrderDetails = ({
+  orderId,
+}: {
+  orderId: Order.View['id'];
+}) => {
+  const { fetchOrder } = LandingService();
+
+  const [data, setData] = useState<FetchOrderQueryResponse>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+
+      try {
+        const data = await fetchOrder(orderId);
+        setData(data.body);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return {
+    isLoading,
+    data,
+    error,
+  };
+};

src/pages/order-view/index.tsx

@@ -1,32 +1,36 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
-import { Alert, AlertDescription, AlertIcon, AlertTitle, HStack, Spinner } from '@chakra-ui/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 {
+import { LandingThemeProvider } from '../../containers';
-  LandingThemeProvider,
-  withLandingThemeProvider,
-} from '../../containers';
 import { OrderDetails } from '../../components/order-view';
-import { Order } from '../../models/landing';
+
-import { useGetOrderQuery } from '../../api';
+import { useFetchOrderDetails } from './helper';
 
 const Page: FC = () => {
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.order-view',
   });
 
-  const { orderId } = useParams<Order.Id>();
+  const { orderId } = useParams();
-  const {
+
-    isLoading,
+  const { isLoading, data, error } = useFetchOrderDetails({ orderId });
-    isSuccess,
+
-    data: { body: order } = {},
+  const toast = useToast();
-    isError,
+  useEffect(() => {
-    error,
+    if (error) {
-  } = useGetOrderQuery({
+      toast({
-    orderId,
+        title: t('error.title'),
+        description: t('fetch.error'),
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'bottom-right',
       });
+    }
+  }, [error]);
 
   return (
     <LandingThemeProvider>
@@ -47,37 +51,20 @@ const Page: FC = () => {
               <Spinner size='lg' />
             </HStack>
           ) : (
-            <>
+            data && (
-              <>
-                {isSuccess && (
               <OrderDetails
-                    id={order.id}
+                id={data.id}
-                    status={order.status}
+                orderDate={data.orderDate}
-                    phone={order.phone}
+                status={data.status}
-                    carNumber={order.carNumber}
+                phone={data.phone}
-                    carBody={order.carBody}
+                carNumber={data.carNumber}
-                    carColor={order.carColor}
+                carBody={data.carBody}
-                    location={order.location}
+                carColor={data.carColor}
-                    startWashTime={order.startWashTime}
+                location={data.location}
-                    endWashTime={order.endWashTime}
+                datetimeBegin={data.startWashTime}
-                    created={order.created}
+                datetimeEnd={data.endWashTime}
               />
-                )}
+            )
-              </>
-              <>
-                {isError && (
-                  <Alert status='error'>
-                    <AlertIcon />
-                    <AlertTitle>
-                      {t('get-order-query.error.title', {
-                        number: orderId,
-                      })}
-                    </AlertTitle>
-                    <AlertDescription>{error.data?.error}</AlertDescription>
-                  </Alert>
-                )}
-              </>
-            </>
           )}
         </VStack>
       </Container>
@@ -85,4 +72,4 @@ const Page: FC = () => {
   );
 };
 
-export default withLandingThemeProvider(Page);
+export default Page;

stubs/api/index.js

@@ -76,12 +76,6 @@ router.get('/order/:orderId', ({ params }, res) => {
     );
 });
 
-router.post('/order/create', (req, res) => {
-  res
-    .status(200)
-    .send({ success: true, body: { ok: true } });
-});
-
 router.use('/admin', require('./admin'));
 
 module.exports = router;

stubs/json/landing-order-view/1-success.json

@@ -1,17 +1,14 @@
 {
   "success": true,
   "body": {
-      "phone": "+79876543210",
+    "id": "order1",
-      "carNumber": "А123АА16",
+    "orderDate": "2024-11-24T08:41:46.366Z",
-      "carBody": 2,
-      "carColor": "#ffffff",
-      "startWashTime": "2025-01-19T14:03:00.000Z",
-      "endWashTime": "2025-01-19T14:03:00.000Z",
-      "location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо",
     "status": "progress",
-      "notes": "",
+    "carNumber": "A123BC",
-      "created": "2025-01-19T14:04:02.985Z",
+    "carBody": 1,
-      "updated": "2025-01-19T14:04:02.987Z",
+    "startWashTime": "2024-11-24T10:30:00.000Z",
-      "id": "678d06527d78ec30be2679d8"
+    "endWashTime": "2024-11-24T16:30:00.000Z",
+    "phone": "79001234563",
+    "location": "55.754364, 48.743295 Университетская улица, 1, Иннополис, Верхнеуслонский район, Республика Татарстан (Татарстан), 420500"
   }
 }