Compare commits
9 Commits
fix/arm-or
...
a2ffd6f38f
| Author | SHA1 | Date | |
|---|---|---|---|
| a2ffd6f38f | |||
|
|
7b3889aa02 | ||
|
|
cee124fca5 | ||
|
|
b77eccc8e8 | ||
|
|
ebfaa7ea8f | ||
|
|
0027cc09b1 | ||
|
|
dd612d662c | ||
|
|
69251745fa | ||
|
|
253e3b3856 |
@@ -21,16 +21,7 @@ module.exports = {
|
|||||||
features: {
|
features: {
|
||||||
'dry-wash': {
|
'dry-wash': {
|
||||||
// add your features here in the format [featureName]: { value: string }
|
// add your features here in the format [featureName]: { value: string }
|
||||||
"order-view-status-polling": {
|
'order-view-status-polling': { value: '3000' }
|
||||||
"on": true,
|
|
||||||
"value": "3000",
|
|
||||||
"key": "order-view-status-polling"
|
|
||||||
},
|
|
||||||
"car-img-upload": {
|
|
||||||
"on": true,
|
|
||||||
"value": "true",
|
|
||||||
"key": "car-img-upload"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
config: {
|
config: {
|
||||||
|
|||||||
@@ -50,12 +50,6 @@
|
|||||||
"dry-wash.order-view.details.location": "Where",
|
"dry-wash.order-view.details.location": "Where",
|
||||||
"dry-wash.order-view.details.datetime-range": "When",
|
"dry-wash.order-view.details.datetime-range": "When",
|
||||||
"dry-wash.order-view.details.alert": "The operator will contact you about the payment at the specified phone number",
|
"dry-wash.order-view.details.alert": "The operator will contact you about the payment at the specified phone number",
|
||||||
"dry-wash.order-view.upload-car-image.field.label": "Upload a photo of your car, and our service will quickly calculate the pre-order price!",
|
|
||||||
"dry-wash.order-view.upload-car-image.field.help": "Allowed formats: .jpg, .png. Maximum size: 5MB",
|
|
||||||
"dry-wash.order-view.upload-car-image.file-input.placeholder": "Upload a file",
|
|
||||||
"dry-wash.order-view.upload-car-image.file-input.button": "Upload",
|
|
||||||
"dry-wash.order-view.upload-car-image-query.success.title": "The car image is successfully uploaded",
|
|
||||||
"dry-wash.order-view.upload-car-image-query.error.title": "Failed to upload the car image",
|
|
||||||
"dry-wash.arm.master.add": "Add",
|
"dry-wash.arm.master.add": "Add",
|
||||||
"dry-wash.arm.order.title": "Orders",
|
"dry-wash.arm.order.title": "Orders",
|
||||||
"dry-wash.arm.order.table.empty": "Table empty",
|
"dry-wash.arm.order.table.empty": "Table empty",
|
||||||
@@ -64,7 +58,7 @@
|
|||||||
"dry-wash.arm.order.status.complete": "Completed",
|
"dry-wash.arm.order.status.complete": "Completed",
|
||||||
"dry-wash.arm.order.status.pending": "Pending",
|
"dry-wash.arm.order.status.pending": "Pending",
|
||||||
"dry-wash.arm.order.status.working": "Working",
|
"dry-wash.arm.order.status.working": "Working",
|
||||||
"dry-wash.arm.order.status.cancelled": "Canceled",
|
"dry-wash.arm.order.status.canceled": "Canceled",
|
||||||
"dry-wash.arm.order.status.placeholder": "Select status",
|
"dry-wash.arm.order.status.placeholder": "Select status",
|
||||||
"dry-wash.arm.order.master.placeholder": "Select master",
|
"dry-wash.arm.order.master.placeholder": "Select master",
|
||||||
"dry-wash.arm.order.table.header.carNumber": "Car Number",
|
"dry-wash.arm.order.table.header.carNumber": "Car Number",
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
"dry-wash.arm.order.status.complete": "Завершено",
|
"dry-wash.arm.order.status.complete": "Завершено",
|
||||||
"dry-wash.arm.order.status.pending": "В ожидании",
|
"dry-wash.arm.order.status.pending": "В ожидании",
|
||||||
"dry-wash.arm.order.status.working": "В работе",
|
"dry-wash.arm.order.status.working": "В работе",
|
||||||
"dry-wash.arm.order.status.cancelled": "Отменено",
|
"dry-wash.arm.order.status.canceled": "Отменено",
|
||||||
"dry-wash.arm.order.status.placeholder": "Выберите статус",
|
"dry-wash.arm.order.status.placeholder": "Выберите статус",
|
||||||
"dry-wash.arm.order.master.placeholder": "Выберите мастера",
|
"dry-wash.arm.order.master.placeholder": "Выберите мастера",
|
||||||
"dry-wash.arm.order.table.header.carNumber": "Номер машины",
|
"dry-wash.arm.order.table.header.carNumber": "Номер машины",
|
||||||
@@ -105,12 +105,6 @@
|
|||||||
"dry-wash.order-view.details.location": "Где",
|
"dry-wash.order-view.details.location": "Где",
|
||||||
"dry-wash.order-view.details.datetime-range": "Когда",
|
"dry-wash.order-view.details.datetime-range": "Когда",
|
||||||
"dry-wash.order-view.details.alert": "С вами свяжется оператор насчет оплаты по указанному номеру телефона",
|
"dry-wash.order-view.details.alert": "С вами свяжется оператор насчет оплаты по указанному номеру телефона",
|
||||||
"dry-wash.order-view.upload-car-image.field.label": "Загрузите фото вашего автомобиля, и наш сервис быстро рассчитает предварительную стоимость заказа!",
|
|
||||||
"dry-wash.order-view.upload-car-image.field.help": "Допустимые форматы: .jpg, .png. Максимальный размер: 5МБ",
|
|
||||||
"dry-wash.order-view.upload-car-image.file-input.placeholder": "Загрузите файл",
|
|
||||||
"dry-wash.order-view.upload-car-image.file-input.button": "Загрузить",
|
|
||||||
"dry-wash.order-view.upload-car-image-query.success.title": "Изображение автомобиля успешно загружено",
|
|
||||||
"dry-wash.order-view.upload-car-image-query.error.title": "Не удалось загрузить изображение автомобиля",
|
|
||||||
"dry-wash.notFound.title": "Страница не найдена",
|
"dry-wash.notFound.title": "Страница не найдена",
|
||||||
"dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
|
"dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
|
||||||
"dry-wash.notFound.button.back": "Вернуться на главную",
|
"dry-wash.notFound.button.back": "Вернуться на главную",
|
||||||
|
|||||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "dry-wash",
|
"name": "dry-wash",
|
||||||
"version": "0.9.1",
|
"version": "0.8.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "dry-wash",
|
"name": "dry-wash",
|
||||||
"version": "0.9.1",
|
"version": "0.8.0",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/core": "^7.26.7",
|
"@babel/core": "^7.26.7",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "dry-wash",
|
"name": "dry-wash",
|
||||||
"version": "0.9.1",
|
"version": "0.8.0",
|
||||||
"description": "<a id=\"readme-top\"></a>",
|
"description": "<a id=\"readme-top\"></a>",
|
||||||
"main": "./src/index.tsx",
|
"main": "./src/index.tsx",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -11,8 +11,5 @@ export const FEATURE = {
|
|||||||
return interval;
|
return interval;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
carImageUpload: {
|
|
||||||
isOn: Boolean(features?.['car-img-upload'])
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { GetOrder, CreateOrder, UploadCarImage } from "../../models/api";
|
import { GetOrder, CreateOrder } from "../../models/api";
|
||||||
|
|
||||||
import { api } from "./api";
|
import { api } from "./api";
|
||||||
import { extractBodyFromResponse, extractErrorMessageFromResponse } from "./utils";
|
import { extractBodyFromResponse, extractErrorMessageFromResponse } from "./utils";
|
||||||
@@ -19,13 +19,5 @@ export const landingApi = api.injectEndpoints({
|
|||||||
transformResponse: extractBodyFromResponse<CreateOrder.Response>,
|
transformResponse: extractBodyFromResponse<CreateOrder.Response>,
|
||||||
transformErrorResponse: extractErrorMessageFromResponse,
|
transformErrorResponse: extractErrorMessageFromResponse,
|
||||||
}),
|
}),
|
||||||
uploadCarImage: mutation<UploadCarImage.Response, UploadCarImage.Params>({
|
|
||||||
query: ({ orderId, body }) => ({
|
|
||||||
url: `/order/${orderId}/upload-car-img`,
|
|
||||||
body,
|
|
||||||
method: 'POST'
|
|
||||||
}),
|
|
||||||
transformErrorResponse: extractErrorMessageFromResponse,
|
|
||||||
}),
|
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -13,10 +13,9 @@ export const extractErrorMessageFromResponse = ({
|
|||||||
}: FetchBaseQueryError) => {
|
}: FetchBaseQueryError) => {
|
||||||
if (
|
if (
|
||||||
typeof data === 'object' &&
|
typeof data === 'object' &&
|
||||||
data !== null &&
|
'message' in data &&
|
||||||
'error' in data &&
|
typeof data.message === 'string'
|
||||||
typeof data.error === 'string'
|
|
||||||
) {
|
) {
|
||||||
return data.error;
|
return data.message;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,51 +0,0 @@
|
|||||||
import { Box, Button, Heading, HStack, Divider, Flex } from '@chakra-ui/react';
|
|
||||||
import React from 'react';
|
|
||||||
import { useLocation, Link } from 'react-router-dom';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { URLs } from '../../__data__/urls';
|
|
||||||
|
|
||||||
const Header = () => {
|
|
||||||
const location = useLocation();
|
|
||||||
const isActive = (keyword: string) => location.pathname.includes(keyword);
|
|
||||||
|
|
||||||
const { t } = useTranslation('~', {
|
|
||||||
keyPrefix: 'dry-wash.arm.master.sideBar',
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box as='header' bg='gray.50' boxShadow='md' px={6} py={4} w='100%'>
|
|
||||||
<Flex gap={50} align='center'>
|
|
||||||
<Heading color='green' size='lg'>
|
|
||||||
{t('title')}
|
|
||||||
</Heading>
|
|
||||||
<HStack spacing={4}>
|
|
||||||
{URLs.armOrder.isOn && (
|
|
||||||
<Button
|
|
||||||
as={Link}
|
|
||||||
to={URLs.armOrder.url}
|
|
||||||
colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
|
|
||||||
variant={isActive(URLs.armOrder.url) ? 'outline' : 'ghost'}
|
|
||||||
>
|
|
||||||
{t('orders')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Divider orientation='vertical' height='30px' />
|
|
||||||
{URLs.armMaster.isOn && (
|
|
||||||
<Button
|
|
||||||
as={Link}
|
|
||||||
to={URLs.armMaster.url}
|
|
||||||
colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
|
|
||||||
variant={isActive(URLs.armMaster.url) ? 'outline' : 'ghost'}
|
|
||||||
data-testid='master-button'
|
|
||||||
>
|
|
||||||
{t('master')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</HStack>
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from './Header';
|
|
||||||
@@ -2,10 +2,10 @@ import { Box, Flex } from '@chakra-ui/react';
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||||
|
|
||||||
|
import Sidebar from '../Sidebar';
|
||||||
import Orders from '../Orders';
|
import Orders from '../Orders';
|
||||||
import Masters from '../Masters';
|
import Masters from '../Masters';
|
||||||
import { URLs } from '../../__data__/urls';
|
import { URLs } from '../../__data__/urls';
|
||||||
import Header from '../Header';
|
|
||||||
|
|
||||||
const LayoutArm = () => {
|
const LayoutArm = () => {
|
||||||
let defaultRedirect = null;
|
let defaultRedirect = null;
|
||||||
@@ -17,8 +17,8 @@ const LayoutArm = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex flexDirection='column' h='100vh'>
|
<Flex h='100vh'>
|
||||||
<Header />
|
<Sidebar />
|
||||||
<Box flex='1' bg='gray.50'>
|
<Box flex='1' bg='gray.50'>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route index element={<Navigate to={defaultRedirect} replace />} />
|
<Route index element={<Navigate to={defaultRedirect} replace />} />
|
||||||
|
|||||||
@@ -2,17 +2,16 @@ import React, { ChangeEvent, useState } from 'react';
|
|||||||
import { Td, Tr, Link, Select } from '@chakra-ui/react';
|
import { Td, Tr, Link, Select } from '@chakra-ui/react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { ViewIcon } from '@chakra-ui/icons';
|
|
||||||
|
|
||||||
import { getTimeSlot } from '../../lib';
|
import { getTimeSlot } from '../../lib';
|
||||||
import { useUpdateOrdersMutation } from '../../__data__/service/api';
|
import { useUpdateOrdersMutation } from '../../__data__/service/api';
|
||||||
import { OrderArm, Status, statuses } from '../../models/api';
|
import { OrderArm, Status, statuses } from '../../models/api';
|
||||||
import PopoverTemplate from '../PopoverTemplate';
|
|
||||||
|
|
||||||
const statusColors: Record<Status, string> = {
|
const statusColors: Record<Status, string> = {
|
||||||
pending: 'yellow.100',
|
pending: 'yellow.100',
|
||||||
progress: 'blue.100',
|
progress: 'blue.100',
|
||||||
cancelled: 'red.100',
|
working: 'orange.100',
|
||||||
|
canceled: 'red.100',
|
||||||
complete: 'green.100',
|
complete: 'green.100',
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -35,7 +34,7 @@ const OrderItem = ({
|
|||||||
|
|
||||||
const [statusSelect, setStatus] = useState(status);
|
const [statusSelect, setStatus] = useState(status);
|
||||||
const bgColor = statusColors[statusSelect];
|
const bgColor = statusColors[statusSelect];
|
||||||
const [masterSelectId, setMasterSelectId] = useState(master);
|
const [masterSelect, setMaster] = useState(master?.name);
|
||||||
|
|
||||||
const handelChangeMasters = (e: ChangeEvent<HTMLSelectElement>) => {
|
const handelChangeMasters = (e: ChangeEvent<HTMLSelectElement>) => {
|
||||||
const masterName = e.target.value;
|
const masterName = e.target.value;
|
||||||
@@ -44,7 +43,7 @@ const OrderItem = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (selectedMaster) {
|
if (selectedMaster) {
|
||||||
setMasterSelectId(selectedMaster.id);
|
setMaster(masterName);
|
||||||
updateOrders({ id, master: selectedMaster.id });
|
updateOrders({ id, master: selectedMaster.id });
|
||||||
} else {
|
} else {
|
||||||
console.error('Master not found');
|
console.error('Master not found');
|
||||||
@@ -57,10 +56,6 @@ const OrderItem = ({
|
|||||||
setStatus(status);
|
setStatus(status);
|
||||||
};
|
};
|
||||||
|
|
||||||
const masterSelectChange = allMasters.find(
|
|
||||||
(master) => master.id === masterSelectId,
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tr>
|
<Tr>
|
||||||
<Td>{carNumber}</Td>
|
<Td>{carNumber}</Td>
|
||||||
@@ -84,7 +79,7 @@ const OrderItem = ({
|
|||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
<Select
|
<Select
|
||||||
value={masterSelectChange?.name}
|
value={masterSelect}
|
||||||
onChange={handelChangeMasters}
|
onChange={handelChangeMasters}
|
||||||
placeholder={t(`master.placeholder`)}
|
placeholder={t(`master.placeholder`)}
|
||||||
>
|
>
|
||||||
@@ -98,9 +93,7 @@ const OrderItem = ({
|
|||||||
<Td>
|
<Td>
|
||||||
<Link href='tel:'>{phone}</Link>
|
<Link href='tel:'>{phone}</Link>
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>{location}</Td>
|
||||||
<PopoverTemplate trigger={<ViewIcon />} description={location} />
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
</Tr>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,35 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Popover,
|
|
||||||
PopoverArrow,
|
|
||||||
PopoverBody,
|
|
||||||
PopoverCloseButton,
|
|
||||||
PopoverContent,
|
|
||||||
PopoverHeader,
|
|
||||||
PopoverTrigger,
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
title?: string;
|
|
||||||
description: string;
|
|
||||||
trigger?: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PopoverTemplate = ({ title, description, trigger }: Props) => {
|
|
||||||
return (
|
|
||||||
<Popover>
|
|
||||||
<PopoverTrigger>
|
|
||||||
<Button>{trigger}</Button>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent>
|
|
||||||
<PopoverArrow />
|
|
||||||
<PopoverCloseButton />
|
|
||||||
{title && <PopoverHeader>{title}!</PopoverHeader>}
|
|
||||||
<PopoverBody mr={5}>{description}</PopoverBody>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PopoverTemplate;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from './PopoverTemplate';
|
|
||||||
61
src/components/Sidebar/Sidebar.tsx
Normal file
61
src/components/Sidebar/Sidebar.tsx
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
|
||||||
|
import React from 'react';
|
||||||
|
import { useLocation, Link } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { URLs } from '../../__data__/urls';
|
||||||
|
|
||||||
|
const Sidebar = () => {
|
||||||
|
const location = useLocation();
|
||||||
|
const isActive = (keyword: string) => location.pathname.includes(keyword);
|
||||||
|
|
||||||
|
const { t } = useTranslation('~', {
|
||||||
|
keyPrefix: 'dry-wash.arm.master.sideBar',
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
borderRight='1px solid black'
|
||||||
|
bg='gray.50'
|
||||||
|
color='white'
|
||||||
|
w='250px'
|
||||||
|
p='5'
|
||||||
|
pt='8'
|
||||||
|
>
|
||||||
|
<Heading color='green' size='lg' mb='5'>
|
||||||
|
{t('title')}
|
||||||
|
</Heading>
|
||||||
|
|
||||||
|
<VStack align='start' spacing='4'>
|
||||||
|
<Divider />
|
||||||
|
{URLs.armOrder.isOn && (
|
||||||
|
<Button
|
||||||
|
as={Link}
|
||||||
|
to={URLs.armOrder.url}
|
||||||
|
w='100%'
|
||||||
|
colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
|
||||||
|
variant={isActive(URLs.armOrder.url) ? 'solid' : 'ghost'}
|
||||||
|
>
|
||||||
|
{t('orders')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Divider />
|
||||||
|
{URLs.armMaster.isOn && (
|
||||||
|
<Button
|
||||||
|
as={Link}
|
||||||
|
to={URLs.armMaster.url}
|
||||||
|
w='100%'
|
||||||
|
colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
|
||||||
|
variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
|
||||||
|
data-testid='master-button'
|
||||||
|
>
|
||||||
|
{t('master')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Divider />
|
||||||
|
</VStack>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
1
src/components/Sidebar/index.ts
Normal file
1
src/components/Sidebar/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from './Sidebar';
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
import React, { FC, memo, useRef } from 'react';
|
|
||||||
import { Controller, useForm } from 'react-hook-form';
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
FormControl,
|
|
||||||
FormErrorMessage,
|
|
||||||
FormHelperText,
|
|
||||||
FormLabel,
|
|
||||||
HStack,
|
|
||||||
Input,
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { landingApi } from '../../../__data__/service/landing.api';
|
|
||||||
import { UploadCarImage } from '../../../models/api';
|
|
||||||
|
|
||||||
import { useHandleUploadCarImageResponse } from './helper';
|
|
||||||
|
|
||||||
type FormValues = {
|
|
||||||
carImg: File & {
|
|
||||||
fileName: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
type CarImageFormProps = {
|
|
||||||
orderId: UploadCarImage.Params['orderId'];
|
|
||||||
};
|
|
||||||
|
|
||||||
export const CarImageForm: FC<CarImageFormProps> = memo(function CarImageForm({
|
|
||||||
orderId,
|
|
||||||
}) {
|
|
||||||
const {
|
|
||||||
handleSubmit,
|
|
||||||
control,
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
} = useForm<FormValues>({ shouldFocusError: true });
|
|
||||||
|
|
||||||
const [uploadCarImage, uploadCarImageMutation] =
|
|
||||||
landingApi.useUploadCarImageMutation();
|
|
||||||
useHandleUploadCarImageResponse(uploadCarImageMutation);
|
|
||||||
|
|
||||||
const onSubmit = (formData: FormValues) => {
|
|
||||||
const body = new FormData();
|
|
||||||
body.append('file', formData.carImg);
|
|
||||||
uploadCarImage({ orderId, body });
|
|
||||||
};
|
|
||||||
|
|
||||||
const fileInputRef = useRef(null);
|
|
||||||
|
|
||||||
const { t } = useTranslation('~', {
|
|
||||||
keyPrefix: 'dry-wash.order-view.upload-car-image',
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form>
|
|
||||||
<FormControl>
|
|
||||||
<FormLabel htmlFor='carImg'>{t('field.label')}</FormLabel>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name='carImg'
|
|
||||||
render={({ field: { value, onChange, ...field } }) => {
|
|
||||||
return (
|
|
||||||
<HStack gap={0}>
|
|
||||||
<Input
|
|
||||||
{...field}
|
|
||||||
ref={fileInputRef}
|
|
||||||
accept='image/png,image/jpeg'
|
|
||||||
value={value?.fileName}
|
|
||||||
onChange={(event) => {
|
|
||||||
onChange(event.target.files[0]);
|
|
||||||
handleSubmit(onSubmit)();
|
|
||||||
}}
|
|
||||||
type='file'
|
|
||||||
hidden
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
placeholder={t('file-input.placeholder')}
|
|
||||||
value={value?.name || ''}
|
|
||||||
readOnly
|
|
||||||
borderRightRadius={0}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
fileInputRef.current.click();
|
|
||||||
}}
|
|
||||||
isLoading={isSubmitting || uploadCarImageMutation.isLoading}
|
|
||||||
colorScheme='primary'
|
|
||||||
paddingInline={8}
|
|
||||||
borderLeftRadius={0}
|
|
||||||
>
|
|
||||||
{t('file-input.button')}
|
|
||||||
</Button>
|
|
||||||
</HStack>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<FormErrorMessage>{errors.carImg?.message}</FormErrorMessage>
|
|
||||||
<FormHelperText>{t('field.help')}</FormHelperText>
|
|
||||||
</FormControl>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import { useEffect } from "react";
|
|
||||||
import { useToast } from "@chakra-ui/react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
import { isErrorMessage } from "../../../models/api";
|
|
||||||
|
|
||||||
export const useHandleUploadCarImageResponse = (query: {
|
|
||||||
isSuccess: boolean;
|
|
||||||
isError: boolean;
|
|
||||||
error?: unknown;
|
|
||||||
}) => {
|
|
||||||
const toast = useToast();
|
|
||||||
const { t } = useTranslation('~', {
|
|
||||||
keyPrefix: 'dry-wash.order-view.upload-car-image-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) {
|
|
||||||
toast({
|
|
||||||
status: 'success',
|
|
||||||
title: t('success.title'),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [query.isSuccess]);
|
|
||||||
};
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { CarImageForm } from './car-img-form';
|
|
||||||
@@ -5,13 +5,11 @@ import {
|
|||||||
Heading,
|
Heading,
|
||||||
HStack,
|
HStack,
|
||||||
UnorderedList,
|
UnorderedList,
|
||||||
|
VStack,
|
||||||
ListItem,
|
ListItem,
|
||||||
Text,
|
Text,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import dayjs from 'dayjs';
|
|
||||||
import localizedFormat from "dayjs/plugin/localizedFormat";
|
|
||||||
dayjs.extend(localizedFormat);
|
|
||||||
|
|
||||||
import { Order } from '../../../models/landing';
|
import { Order } from '../../../models/landing';
|
||||||
import { formatDatetime } from '../../../lib';
|
import { formatDatetime } from '../../../lib';
|
||||||
@@ -43,7 +41,7 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
|
|||||||
location,
|
location,
|
||||||
startWashTime,
|
startWashTime,
|
||||||
endWashTime,
|
endWashTime,
|
||||||
created
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation('~', {
|
const { t } = useTranslation('~', {
|
||||||
keyPrefix: 'dry-wash.order-view.details',
|
keyPrefix: 'dry-wash.order-view.details',
|
||||||
@@ -53,7 +51,7 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<VStack p={4} alignItems='flex-start' gap={4} {...props}>
|
||||||
<HStack
|
<HStack
|
||||||
width='full'
|
width='full'
|
||||||
flexWrap='wrap'
|
flexWrap='wrap'
|
||||||
@@ -61,7 +59,7 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
|
|||||||
gap={2}
|
gap={2}
|
||||||
>
|
>
|
||||||
<Heading as='h2' size='lg'>
|
<Heading as='h2' size='lg'>
|
||||||
{t('title', { number: orderNumber })} ({dayjs(created).format('LLLL')})
|
{t('title', { number: orderNumber })}
|
||||||
</Heading>
|
</Heading>
|
||||||
<OrderStatus value={status} />
|
<OrderStatus value={status} />
|
||||||
</HStack>
|
</HStack>
|
||||||
@@ -107,7 +105,7 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
|
|||||||
<AlertIcon />
|
<AlertIcon />
|
||||||
{t('alert')}
|
{t('alert')}
|
||||||
</Alert>
|
</Alert>
|
||||||
</>
|
</VStack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ export const isErrorMessage = (error: unknown): error is ErrorMessage => typeof
|
|||||||
|
|
||||||
type ErrorResponse = {
|
type ErrorResponse = {
|
||||||
success: false;
|
success: false;
|
||||||
error: ErrorMessage;
|
message: ErrorMessage;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type BaseResponse<Body> = SuccessResponse<Body> | ErrorResponse;
|
export type BaseResponse<Body> = SuccessResponse<Body> | ErrorResponse;
|
||||||
|
|||||||
@@ -21,24 +21,14 @@ export namespace CreateOrder {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export namespace UploadCarImage {
|
|
||||||
export type Response = void;
|
|
||||||
export type Params = {
|
|
||||||
orderId: Order.Id;
|
|
||||||
/**
|
|
||||||
* @example { file: File }
|
|
||||||
*/
|
|
||||||
body: FormData;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
type GetArrItemType<ArrType> =
|
type GetArrItemType<ArrType> =
|
||||||
ArrType extends Array<infer ItemType> ? ItemType : never;
|
ArrType extends Array<infer ItemType> ? ItemType : never;
|
||||||
|
|
||||||
export const statuses = [
|
export const statuses = [
|
||||||
'pending' as const,
|
'pending' as const,
|
||||||
'progress' as const,
|
'progress' as const,
|
||||||
'cancelled' as const,
|
'working' as const,
|
||||||
|
'canceled' as const,
|
||||||
'complete' as const,
|
'complete' as const,
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -52,7 +42,7 @@ export type OrderArm = {
|
|||||||
status?: GetArrItemType<typeof statuses>;
|
status?: GetArrItemType<typeof statuses>;
|
||||||
phone?: string;
|
phone?: string;
|
||||||
location?: string;
|
location?: string;
|
||||||
master: string | [];
|
master: Master;
|
||||||
notes: '';
|
notes: '';
|
||||||
allMasters: Master[];
|
allMasters: Master[];
|
||||||
id: string;
|
id: string;
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ exports[`Страница просмотра заказа отображает
|
|||||||
</h2>
|
</h2>
|
||||||
<div
|
<div
|
||||||
class="chakra-stack css-1n38vgh"
|
class="chakra-stack css-1n38vgh"
|
||||||
|
created="2025-01-19T14:04:02.985Z"
|
||||||
data-testid="order-details"
|
data-testid="order-details"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@@ -25,9 +26,6 @@ exports[`Страница просмотра заказа отображает
|
|||||||
class="chakra-heading css-1jb3vzl"
|
class="chakra-heading css-1jb3vzl"
|
||||||
>
|
>
|
||||||
Заказ №{{number}}
|
Заказ №{{number}}
|
||||||
(
|
|
||||||
Sunday, January 19, 2025 5:04 PM
|
|
||||||
)
|
|
||||||
</h2>
|
</h2>
|
||||||
<span
|
<span
|
||||||
class="css-6jfsiv"
|
class="css-6jfsiv"
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ exports[`Страница заказов должна корректно ото
|
|||||||
<p
|
<p
|
||||||
class="chakra-text css-52ukzg"
|
class="chakra-text css-52ukzg"
|
||||||
>
|
>
|
||||||
23.02.2025
|
20.02.2025
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
class="chakra-button css-ez23ye"
|
class="chakra-button css-ez23ye"
|
||||||
|
|||||||
@@ -21,7 +21,6 @@ import { Order } from '../../models/landing';
|
|||||||
import { landingApi } from '../../__data__/service/landing.api';
|
import { landingApi } from '../../__data__/service/landing.api';
|
||||||
import { isErrorMessage } from '../../models/api';
|
import { isErrorMessage } from '../../models/api';
|
||||||
import { FEATURE } from '../../__data__/features';
|
import { FEATURE } from '../../__data__/features';
|
||||||
import { CarImageForm } from '../../components/order-view/car-img';
|
|
||||||
|
|
||||||
const Page: FC = () => {
|
const Page: FC = () => {
|
||||||
const { t } = useTranslation('~', {
|
const { t } = useTranslation('~', {
|
||||||
@@ -70,30 +69,24 @@ const Page: FC = () => {
|
|||||||
<>
|
<>
|
||||||
<>
|
<>
|
||||||
{isSuccess && (
|
{isSuccess && (
|
||||||
<VStack p={4} alignItems='flex-start' gap={4} data-testid='order-details'>
|
<OrderDetails
|
||||||
<OrderDetails
|
orderNumber={order.orderNumber}
|
||||||
orderNumber={order.orderNumber}
|
status={order.status}
|
||||||
status={order.status}
|
phone={order.phone}
|
||||||
phone={order.phone}
|
carNumber={order.carNumber}
|
||||||
carNumber={order.carNumber}
|
carBody={order.carBody}
|
||||||
carBody={order.carBody}
|
carColor={order.carColor}
|
||||||
carColor={order.carColor}
|
location={order.location}
|
||||||
location={order.location}
|
startWashTime={order.startWashTime}
|
||||||
startWashTime={order.startWashTime}
|
endWashTime={order.endWashTime}
|
||||||
endWashTime={order.endWashTime}
|
created={order.created}
|
||||||
created={order.created}
|
data-testid='order-details'
|
||||||
/>
|
/>
|
||||||
{FEATURE.carImageUpload.isOn && <CarImageForm orderId={orderId} />}
|
|
||||||
</VStack>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
<>
|
<>
|
||||||
{isError && (
|
{isError && (
|
||||||
<Alert
|
<Alert status='error' alignItems='flex-start' data-testid='error'>
|
||||||
status='error'
|
|
||||||
alignItems='flex-start'
|
|
||||||
data-testid='error'
|
|
||||||
>
|
|
||||||
<AlertIcon />
|
<AlertIcon />
|
||||||
<Box>
|
<Box>
|
||||||
<AlertTitle>
|
<AlertTitle>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-require-imports */
|
/* eslint-disable @typescript-eslint/no-require-imports */
|
||||||
const router = require('express').Router();
|
const router = require('express').Router();
|
||||||
|
|
||||||
const STUBS = { masters: 'success', orders: 'success', orderCreate: 'success', orderView: 'success-pending', orderCarImg: 'success' };
|
const STUBS = { masters: 'success', orders: 'success', orderCreate: 'success', orderView: 'success-pending' };
|
||||||
|
|
||||||
router.get('/set/:name/:value', (req, res) => {
|
router.get('/set/:name/:value', (req, res) => {
|
||||||
const { name, value } = req.params;
|
const { name, value } = req.params;
|
||||||
@@ -15,34 +15,28 @@ router.get('/set/:name/:value', (req, res) => {
|
|||||||
router.get('/', (req, res) => {
|
router.get('/', (req, res) => {
|
||||||
res.send(`<div>
|
res.send(`<div>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Мастера</legend>
|
<legend>Мастера</legend>
|
||||||
${generateRadioInput('masters', 'success')}
|
${generateRadioInput('masters', 'success')}
|
||||||
${generateRadioInput('masters', 'error')}
|
${generateRadioInput('masters', 'error')}
|
||||||
${generateRadioInput('masters', 'empty')}
|
${generateRadioInput('masters', 'empty')}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Заказы</legend>
|
<legend>Заказы</legend>
|
||||||
${generateRadioInput('orders', 'success')}
|
${generateRadioInput('orders', 'success')}
|
||||||
${generateRadioInput('orders', 'error')}
|
${generateRadioInput('orders', 'error')}
|
||||||
${generateRadioInput('orders', 'empty')}
|
${generateRadioInput('orders', 'empty')}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Лендинг - Сделать заказ</legend>
|
<legend>Лендинг - Сделать заказ</legend>
|
||||||
${generateRadioInput('orderCreate', 'success')}
|
${generateRadioInput('orderCreate', 'success')}
|
||||||
${generateRadioInput('orderCreate', 'error')}
|
${generateRadioInput('orderCreate', 'error')}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Лендинг - Детали заказа</legend>
|
<legend>Лендинг - Детали заказа</legend>
|
||||||
${generateRadioInput('orderView', 'success-pending')}
|
${generateRadioInput('orderView', 'success-pending')}
|
||||||
${generateRadioInput('orderView', 'success-working')}
|
${generateRadioInput('orderView', 'success-working')}
|
||||||
${generateRadioInput('orderView', 'error')}
|
${generateRadioInput('orderView', 'error')}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset>
|
|
||||||
<legend>Лендинг - Детали заказа, фото машины</legend>
|
|
||||||
${generateRadioInput('orderCarImg', 'success')}
|
|
||||||
${generateRadioInput('orderCarImg', 'error-file-type')}
|
|
||||||
${generateRadioInput('orderCarImg', 'error-file-size')}
|
|
||||||
</fieldset>
|
|
||||||
</div>`);
|
</div>`);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -98,22 +98,6 @@ router.post('/order/create', (req, res) => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
router.post('/order/:orderId/upload-car-img', (req, res) => {
|
|
||||||
const { orderId } = req.params;
|
|
||||||
const stubName = `${orderId}-${STUBS.orderCarImg}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
res
|
|
||||||
.status(/error/.test(stubName) ? 500 : 200)
|
|
||||||
.send(require(`../json/landing-order-car-image-upload/${stubName}.json`));
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
res
|
|
||||||
.status(500)
|
|
||||||
.send(commonError);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
router.use('/admin', require('./admin'));
|
router.use('/admin', require('./admin'));
|
||||||
|
|
||||||
module.exports = router;
|
module.exports = router;
|
||||||
|
|||||||
@@ -9,8 +9,12 @@
|
|||||||
"orderDate": "2024-11-24T08:41:46.366Z",
|
"orderDate": "2024-11-24T08:41:46.366Z",
|
||||||
"status": "pending",
|
"status": "pending",
|
||||||
"phone": "79001234563",
|
"phone": "79001234563",
|
||||||
"location": "55.779905316526424,49.12446113769528 Республика Татарстан (Татарстан),н Казань, ул. Баумана, 1",
|
"location": "Казань, ул. Баумана, 1",
|
||||||
"master": "4545423234",
|
"master": {
|
||||||
|
"name": "Олег Макаров",
|
||||||
|
"phone": "79001234567",
|
||||||
|
"id": "23423442"
|
||||||
|
},
|
||||||
"notes": ""
|
"notes": ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -21,7 +25,7 @@
|
|||||||
"orderDate": "2024-11-24T07:40:46.366Z",
|
"orderDate": "2024-11-24T07:40:46.366Z",
|
||||||
"status": "progress",
|
"status": "progress",
|
||||||
"phone": "79001234567",
|
"phone": "79001234567",
|
||||||
"location": "55.779905316526424,49.12446113769528 Республика Татарстан (Татарстан), Казань, озеро Нижний Кабан",
|
"location": "Казань, ул. Баумана, 43",
|
||||||
"master": [],
|
"master": [],
|
||||||
"notes": ""
|
"notes": ""
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"success": false,
|
|
||||||
"error": "Invalid car image file size. Limit is 5MB"
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"success": false,
|
|
||||||
"error": "Invalid car image file type. Allowed types: jpg, png"
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"success": true
|
|
||||||
}
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
"success": false,
|
"success": false,
|
||||||
"error": "Не удалось создать заказ"
|
"message": "Не удалось создать заказ"
|
||||||
}
|
}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
"success": false,
|
"success": false,
|
||||||
"error": "Не удалось загрузить детали заказа"
|
"message": "Не удалось загрузить детали заказа"
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user