feat: use RTK Query to get order deails (#73)

src/pages/order-view/index.tsx

@@ -1,5 +1,13 @@
 import React, { FC } from 'react';
-import { Alert, AlertDescription, AlertIcon, AlertTitle, HStack, Spinner } from '@chakra-ui/react';
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Box,
+  HStack,
+  Spinner,
+} from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { Container, Heading, VStack } from '@chakra-ui/react';
 import { useParams } from 'react-router-dom';
@@ -10,7 +18,8 @@ import {
 } from '../../containers';
 import { OrderDetails } from '../../components/order-view';
 import { Order } from '../../models/landing';
-import { useGetOrderQuery } from '../../api';
+import { landingApi } from '../../__data__/service/landing.api';
+import { ErrorMessage } from '../../models/api';
 
 const Page: FC = () => {
   const { t } = useTranslation('~', {
@@ -21,12 +30,15 @@ const Page: FC = () => {
   const {
     isLoading,
     isSuccess,
-    data: { body: order } = {},
+    data: order,
     isError,
     error,
-  } = useGetOrderQuery({
-    orderId,
-  });
+  } = landingApi.useGetOrderQuery(
+    {
+      orderId,
+    },
+  );
+  const errorMessage = error as ErrorMessage;
 
   return (
     <LandingThemeProvider>
@@ -51,7 +63,7 @@ const Page: FC = () => {
               <>
                 {isSuccess && (
                   <OrderDetails
-                    id={order.id}
+                    orderNumber={order.orderNumber}
                     status={order.status}
                     phone={order.phone}
                     carNumber={order.carNumber}
@@ -66,14 +78,14 @@ const Page: FC = () => {
               </>
               <>
                 {isError && (
-                  <Alert status='error'>
+                  <Alert status='error' alignItems='flex-start'>
                     <AlertIcon />
-                    <AlertTitle>
-                      {t('get-order-query.error.title', {
-                        number: orderId,
-                      })}
-                    </AlertTitle>
-                    <AlertDescription>{error.data?.error}</AlertDescription>
+                    <Box>
+                      <AlertTitle>
+                        {t('get-order-query.error.title')}
+                      </AlertTitle>
+                      <AlertDescription>{errorMessage}</AlertDescription>
+                    </Box>
                   </Alert>
                 )}
               </>