Merge pull request 'feature/order-form-upgrade' (#82) from feature/order-form-upgrade into main

Reviewed-on: #82
Reviewed-by: Primakov Alexandr Alexandrovich <primakovpro@gmail.com>

locales/en.json

@@ -39,6 +39,7 @@
   "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.order-creation-title": "Creating order ...",
   "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",
@@ -86,6 +87,15 @@
   "dry-wash.arm.master.drawer.inputPhone.placeholder": "Enter Phone Number",
   "dry-wash.arm.master.drawer.button.save": "Save",
   "dry-wash.arm.master.drawer.button.cancel": "Cancel",
+  "dry-wash.arm.master.drawer.toast.create-master": "Master created",
+  "dry-wash.arm.master.drawer.toast.error.empty-fields": "Fields cannot be empty",
+  "dry-wash.arm.master.drawer.toast.error.base": "Error",
+  "dry-wash.arm.master.drawer.toast.error.create-master": "Error creating master",
+  "dry-wash.arm.master.drawer.toast.error.create-master-details": "Failed to add master. Please try again",
+  "dry-wash.arm.master.drawer.form.name.required": "Master name is required",
+  "dry-wash.arm.master.drawer.form.phone.required": "Phone number is required",
+  "dry-wash.arm.master.drawer.form.phone.pattern": "Invalid phone number",
+  "dry-wash.arm.master.drawer.form.name.minLength": "Name must contain at least 2 characters",
   "dry-wash.arm.master.sideBar.orders": "Orders",
   "dry-wash.arm.master.sideBar.master": "Masters",
   "dry-wash.arm.master.sideBar.title": "Dry Master",

locales/ru.json

@@ -36,6 +36,15 @@
   "dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона",
   "dry-wash.arm.master.drawer.button.save": "Сохранить",
   "dry-wash.arm.master.drawer.button.cancel": "Отменить",
+  "dry-wash.arm.master.drawer.toast.create-master": "Мастер создан",
+  "dry-wash.arm.master.drawer.toast.error.empty-fields": "Поля не могут быть пустыми",
+  "dry-wash.arm.master.drawer.toast.error.base": "Ошибка",
+  "dry-wash.arm.master.drawer.toast.error.create-master": "Ошибка при создании мастера",
+  "dry-wash.arm.master.drawer.toast.error.create-master-details": "Не удалось добавить мастера. Попробуйте еще раз",
+  "dry-wash.arm.master.drawer.form.name.required": "Имя мастера обязательно",
+  "dry-wash.arm.master.drawer.form.phone.required": "Телефон обязателен",
+  "dry-wash.arm.master.drawer.form.phone.pattern": "Некорректный номер телефона",
+  "dry-wash.arm.master.drawer.form.name.minLength": "Имя должно содержать минимум 2 символа",
   "dry-wash.arm.master.sideBar.orders": "Заказы",
   "dry-wash.arm.master.sideBar.master": "Мастера",
   "dry-wash.arm.master.sideBar.title": "Сухой мастер",
@@ -79,6 +88,7 @@
   "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.order-creation-title": "Создаем заказ ...",
   "dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан",
   "dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ",
   "dry-wash.order-view.title": "Ваш заказ",

src/__data__/service/landing.api.ts

@@ -1,14 +1,23 @@
-import { GetOrder } from "../../models/api";
+import { GetOrder, CreateOrder } from "../../models/api";
 
 import { api } from "./api";
 import { extractBodyFromResponse, extractErrorMessageFromResponse } from "./utils";
 
 export const landingApi = api.injectEndpoints({
-  endpoints: ({ query }) => ({
+  endpoints: ({ mutation, query }) => ({
     getOrder: query<GetOrder.Response, GetOrder.Params>({
       query: ({ orderId }) => `/order/${orderId}`,
       transformResponse: extractBodyFromResponse<GetOrder.Response>,
       transformErrorResponse: extractErrorMessageFromResponse,
-    })
+    }),
+    createOrder: mutation<CreateOrder.Response, CreateOrder.Params>({
+      query: ({ body }) => ({
+        url: `/order/create`,
+        params: { body },
+        method: 'POST'
+      }),
+      transformResponse: extractBodyFromResponse<CreateOrder.Response>,
+      transformErrorResponse: extractErrorMessageFromResponse,
+    }),
   })
 });

src/api/index.ts

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

src/api/landing.tsx

@@ -1,65 +0,0 @@
-import { getConfigValue } from '@brojs/cli';
-import { useState } from 'react';
-
-import { CreateOrder } from '../models/api';
-
-import { QueryState, Trigger } from './types';
-
-enum LandingEndpoints {
-  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 }];
-};
-
-export { useCreateOrderMutation };

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/assets/animation/index.ts

@@ -0,0 +1 @@
+export { default as OrderCreationAnimation } from './order-creation.json';

src/components/MasterDrawer/MasterDrawer.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
 import {
   Button,
   FormControl,
@@ -14,107 +15,136 @@ import {
   useToast,
   InputGroup,
   InputLeftElement,
+  FormErrorMessage,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { PhoneIcon } from '@chakra-ui/icons';
 
 import { api } from '../../__data__/service/api';
+import showToast from '../../helpers/showToast';
+import { DrawerInputs } from '../../models/arm/form';
 
-const MasterDrawer = ({ isOpen, onClose }) => {
-  const [addMaster, { error, isSuccess }] = api.useAddMasterMutation();
-  const toast = useToast();
+interface MasterDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
 
-  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
+const MasterDrawer = ({ isOpen, onClose }: MasterDrawerProps) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<DrawerInputs>();
 
-  const handleSave = async () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master.drawer',
+  });
+
+  const onSubmit: SubmitHandler<DrawerInputs> = async (data) => {
     const trimMaster = {
-      phone: newMaster.phone.trim(),
-      name: newMaster.name.trim(),
+      name: data.name.trim(),
+      phone: data.phone.trim(),
     };
 
-    if (trimMaster.name === '' || trimMaster.phone === '') {
+    const isEmptyFields = trimMaster.name === '' || trimMaster.phone === '';
+
+    if (isEmptyFields) {
+      showToast({
+        toast,
+        title: t('toast.error.base'),
+        description: t('toast.error.empty-fields'),
+        status: 'error',
+      });
       return;
     }
 
-    addMaster(trimMaster);
+    await addMaster(trimMaster);
   };
 
+  const [addMaster, { error, isSuccess }] = api.useAddMasterMutation();
+  const toast = useToast();
+
   useEffect(() => {
     if (isSuccess) {
-      toast({
-        title: 'Мастер создан.',
-        description: `Мастер "${newMaster.name}" успешно добавлен.`,
+      showToast({
+        toast,
+        title: t('toast.create-master'),
         status: 'success',
-        duration: 5000,
-        isClosable: true,
-        position: 'top-right',
       });
+      reset();
       onClose();
     }
   }, [isSuccess]);
 
   useEffect(() => {
     if (error) {
-      toast({
-        title: 'Ошибка при создании мастера.',
-        description: 'Не удалось добавить мастера. Попробуйте еще раз.',
+      showToast({
+        toast,
+        title: t('toast.error.create-master'),
+        description: t('toast.error.create-master-details'),
         status: 'error',
-        duration: 5000,
-        isClosable: true,
-        position: 'top-right',
       });
       console.error(error);
     }
   }, [error]);
 
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.arm.master.drawer',
-  });
-
   return (
     <Drawer isOpen={isOpen} onClose={onClose} size='md'>
       <DrawerOverlay />
       <DrawerContent>
-        <DrawerCloseButton />
-        <DrawerHeader>{t('title')}</DrawerHeader>
-        <DrawerBody>
-          <FormControl mb='4'>
-            <FormLabel>{t('inputName.label')}</FormLabel>
-            <Input
-              // isInvalid
-              value={newMaster.name}
-              onChange={(e) =>
-                setNewMaster({ ...newMaster, name: e.target.value })
-              }
-              placeholder={t('inputName.placeholder')}
-            />
-          </FormControl>
-          <FormControl>
-            <FormLabel>{t('inputPhone.label')}</FormLabel>
-
-            <InputGroup>
-              <InputLeftElement pointerEvents='none'>
-                <PhoneIcon color='gray.300' />
-              </InputLeftElement>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <DrawerCloseButton />
+          <DrawerHeader>{t('title')}</DrawerHeader>
+          <DrawerBody>
+            <FormControl mb='4' isInvalid={!!errors.name}>
+              <FormLabel>{t('inputName.label')}</FormLabel>
               <Input
-                // isInvalid
-                value={newMaster.phone}
-                onChange={(e) =>
-                  setNewMaster({ ...newMaster, phone: e.target.value })
-                }
-                placeholder={t('inputPhone.placeholder')}
+                {...register('name', {
+                  required: t('form.name.required'),
+                  minLength: {
+                    value: 2,
+                    message: t('form.name.minLength'),
+                  },
+                })}
+                placeholder={t('inputName.placeholder')}
               />
-            </InputGroup>
-          </FormControl>
-        </DrawerBody>
-        <DrawerFooter>
-          <Button colorScheme='teal' mr={3} onClick={handleSave}>
-            {t('button.save')}
-          </Button>
-          <Button variant='ghost' onClick={onClose}>
-            {t('button.cancel')}
-          </Button>
-        </DrawerFooter>
+              <FormErrorMessage>
+                {errors.name && errors.name.message}
+              </FormErrorMessage>
+            </FormControl>
+            <FormControl isInvalid={!!errors.phone}>
+              <FormLabel>{t('inputPhone.label')}</FormLabel>
+              <InputGroup>
+                <InputLeftElement pointerEvents='none'>
+                  <PhoneIcon color='gray.300' />
+                </InputLeftElement>
+                <Input
+                  {...register('phone', {
+                    required: t('form.phone.required'),
+                    pattern: {
+                      value: /^(\+7|8)\d{10}$/,
+                      message: t('form.phone.pattern'),
+                    },
+                    setValueAs: (value) => value.replace(/[^\d+]/g, ''),
+                  })}
+                  placeholder={t('inputPhone.placeholder')}
+                />
+              </InputGroup>
+              <FormErrorMessage>
+                {errors.phone && errors.phone.message}
+              </FormErrorMessage>
+            </FormControl>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button colorScheme='teal' mr={3} type='submit'>
+              {t('button.save')}
+            </Button>
+            <Button variant='ghost' onClick={onClose}>
+              {t('button.cancel')}
+            </Button>
+          </DrawerFooter>
+        </form>
       </DrawerContent>
     </Drawer>
   );

src/helpers/showToast.ts

@@ -0,0 +1,21 @@
+import { UseToastOptions } from '@chakra-ui/react';
+
+interface ShowToast {
+  toast: (options: UseToastOptions) => void;
+  title: string;
+  description?: string;
+  status: 'info' | 'warning' | 'success' | 'error';
+}
+
+const showToast = ({ toast, title, description, status }: ShowToast) => {
+  toast({
+    title,
+    description,
+    status,
+    duration: 5000,
+    isClosable: true,
+    position: 'top-right',
+  });
+};
+
+export default showToast;

src/models/api/common.ts

@@ -5,6 +5,8 @@ type SuccessResponse<Body> = {
 
 export type ErrorMessage = string;
 
+export const isErrorMessage = (error: unknown): error is ErrorMessage => typeof error === 'string';
+
 type ErrorResponse = {
   success: false;
   message: ErrorMessage;

src/models/arm/form.ts

@@ -0,0 +1,4 @@
+export type DrawerInputs = {
+  phone: string;
+  name: string;
+};

src/pages/order-create/helper.ts

@@ -1,7 +1,13 @@
 import dayjs from "dayjs";
+import { useToast } from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
 import { Order } from "../../models/landing";
 import { OrderFormValues } from "../../components/order-form";
+import { isErrorMessage } from "../../models/api";
+import { URLs } from '../../__data__/urls';
 
 const removeAllSpaces = (str: string) => str.replace(/\s+/g, '');
 
@@ -26,4 +32,40 @@ export const formatFormValues = ({ phone, carNumber, carBody, carColor, carLocat
       end: dayjs(availableDatetimeEnd).toISOString(),
     }
   };
-};
+};
+
+export const useHandleCreateOrderMutationResponse = (query: {
+  isSuccess: boolean;
+  data?: {
+    id: Parameters<typeof URLs.orderView.getUrl>[0];
+  };
+  isError: boolean;
+  error?: unknown;
+}) => {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.order-create.create-order-query',
+  });
+
+  useEffect(() => {
+    if (query.isError) {
+      toast({
+        status: 'error',
+        title: t('error.title'),
+        description: isErrorMessage(query.error) ? query.error : undefined,
+      });
+    }
+  }, [query.isError]);
+
+  useEffect(() => {
+    if (query.isSuccess) {
+      const orderId = query.data.id;
+      navigate({ pathname: URLs.orderView.getUrl(orderId) });
+      toast({
+        status: 'success',
+        title: t('success.title'),
+      });
+    }
+  }, [query.isSuccess]);
+};

src/pages/order-create/index.tsx

@@ -1,41 +1,29 @@
 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 { Container, Heading, VStack } from '@chakra-ui/react';
+import { Player as LottiePlayer } from '@lottiefiles/react-lottie-player';
 
 import { withLandingThemeProvider } from '../../containers';
 import { OrderForm, OrderFormProps } from '../../components/order-form';
-import { useCreateOrderMutation } from '../../api';
-import { URLs } from '../../__data__/urls';
+import { landingApi } from '../../__data__/service/landing.api';
+import { OrderCreationAnimation } from '../../assets/animation';
 
-import { formatFormValues } from './helper';
+import {
+  formatFormValues,
+  useHandleCreateOrderMutationResponse,
+} from './helper';
 
 const Page: FC = () => {
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.order-create',
   });
 
-  const [createOrder, createOrderMutation] = useCreateOrderMutation();
-
-  const toast = useToast();
-  const navigate = useNavigate();
+  const [createOrder, createOrderMutation] =
+    landingApi.useCreateOrderMutation();
+  useHandleCreateOrderMutationResponse(createOrderMutation);
 
   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,
-        });
-      });
+    createOrder({ body: formatFormValues(values) });
   };
 
   return (
@@ -48,13 +36,24 @@ const Page: FC = () => {
       centerContent
     >
       <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
-        <Heading textAlign='center' mt={4}>
-          {t('title')}
-        </Heading>
-        <OrderForm
-          onSubmit={onOrderFormSubmit}
-          loading={createOrderMutation.isLoading}
-        />
+        {createOrderMutation.isUninitialized ? (
+          <>
+            <Heading textAlign='center' mt={4}>
+              {t('title')}
+            </Heading>
+            <OrderForm
+              onSubmit={onOrderFormSubmit}
+              loading={createOrderMutation.isLoading}
+            />
+          </>
+        ) : (
+          <>
+            <LottiePlayer autoplay loop src={OrderCreationAnimation} />
+            <Heading textAlign='center' mt={4}>
+              {t('order-creation-title')}
+            </Heading>
+          </>
+        )}
       </VStack>
     </Container>
   );

src/pages/order-view/index.tsx

@@ -19,7 +19,7 @@ import {
 import { OrderDetails } from '../../components/order-view';
 import { Order } from '../../models/landing';
 import { landingApi } from '../../__data__/service/landing.api';
-import { ErrorMessage } from '../../models/api';
+import { isErrorMessage } from '../../models/api';
 import { FEATURE } from '../../__data__/features';
 
 const Page: FC = () => {
@@ -45,7 +45,7 @@ const Page: FC = () => {
       }
       : undefined,
   );
-  const errorMessage = error as ErrorMessage;
+  const errorMessage = isErrorMessage(error) ? error : undefined;
 
   return (
     <LandingThemeProvider>
@@ -91,7 +91,9 @@ const Page: FC = () => {
                       <AlertTitle>
                         {t('get-order-query.error.title')}
                       </AlertTitle>
-                      <AlertDescription>{errorMessage}</AlertDescription>
+                      {errorMessage && (
+                        <AlertDescription>{errorMessage}</AlertDescription>
+                      )}
                     </Box>
                   </Alert>
                 )}

stubs/api/admin.js

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 const router = require('express').Router();
 
-const STUBS = { masters: 'success', orders: 'success', orderView: 'success-pending' };
+const STUBS = { masters: 'success', orders: 'success', orderCreate: 'success', orderView: 'success-pending' };
 
 router.get('/set/:name/:value', (req, res) => {
   const { name, value } = req.params;
@@ -14,19 +14,24 @@ router.get('/set/:name/:value', (req, res) => {
 
 router.get('/', (req, res) => {
   res.send(`<div>
-    <fieldset> 
+    <fieldset>
     <legend>Мастера</legend>
       ${generateRadioInput('masters', 'success')}
       ${generateRadioInput('masters', 'error')}
       ${generateRadioInput('masters', 'empty')}
     </fieldset>
-    <fieldset> 
+    <fieldset>
     <legend>Заказы</legend>
       ${generateRadioInput('orders', 'success')}
       ${generateRadioInput('orders', 'error')}  
       ${generateRadioInput('orders', 'empty')}
     </fieldset>
-    <fieldset> 
+    <fieldset>
+    <legend>Лендинг - Сделать заказ</legend>
+      ${generateRadioInput('orderCreate', 'success')}
+      ${generateRadioInput('orderCreate', 'error')}
+    </fieldset>
+    <fieldset>
     <legend>Лендинг - Детали заказа</legend>
       ${generateRadioInput('orderView', 'success-pending')}
       ${generateRadioInput('orderView', 'success-working')}

stubs/api/index.js

@@ -87,7 +87,15 @@ router.get('/order/:orderId', ({ params }, res) => {
 });
 
 router.post('/order/create', (req, res) => {
-  res.status(200).send({ success: true, body: { ok: true } });
+  const stubName = STUBS.orderCreate;
+
+  res
+    .status(/error/.test(stubName) ? 500 : 200)
+    .send(
+      /^error$/.test(stubName)
+        ? commonError
+        : require(`../json/landing-order-create/${stubName}.json`),
+    );
 });
 
 router.use('/admin', require('./admin'));

stubs/json/landing-order-create/error.json

@@ -0,0 +1,4 @@
+{
+  "success": false,
+  "message": "Не удалось создать заказ"
+}

stubs/json/landing-order-create/success.json

@@ -0,0 +1,6 @@
+{
+  "success": true,
+  "body": {
+      "id": "id1"
+  }
+}