Compare commits
No commits in common. "52c35be0006320f3e0e2d89844c40be355ee15bb" and "fd95aa358e1b41a10950cac4b0d56bb3618bd6e2" have entirely different histories.
52c35be000
...
fd95aa358e
@ -21,7 +21,6 @@ module.exports = {
|
|||||||
features: {
|
features: {
|
||||||
'dry-wash-pl': {
|
'dry-wash-pl': {
|
||||||
// add your features here in the format [featureName]: { value: string }
|
// add your features here in the format [featureName]: { value: string }
|
||||||
'order-view-status-polling': { value: '3000' }
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
config: {
|
config: {
|
||||||
|
|||||||
@ -42,7 +42,7 @@
|
|||||||
"dry-wash.order-create.create-order-query.success.title": "The order is successfully created",
|
"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-create.create-order-query.error.title": "Failed to create an order",
|
||||||
"dry-wash.order-view.title": "Your order",
|
"dry-wash.order-view.title": "Your order",
|
||||||
"dry-wash.order-view.get-order-query.error.title": "Failed to fetch the details of order",
|
"dry-wash.order-view.get-order-query.error.title": "Failed to fetch the details of order #{{number}}",
|
||||||
"dry-wash.order-view.details.title": "Order #{{number}}",
|
"dry-wash.order-view.details.title": "Order #{{number}}",
|
||||||
"dry-wash.order-view.details.owner": "Owner",
|
"dry-wash.order-view.details.owner": "Owner",
|
||||||
"dry-wash.order-view.details.car": "Car",
|
"dry-wash.order-view.details.car": "Car",
|
||||||
|
|||||||
@ -82,7 +82,7 @@
|
|||||||
"dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан",
|
"dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан",
|
||||||
"dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ",
|
"dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ",
|
||||||
"dry-wash.order-view.title": "Ваш заказ",
|
"dry-wash.order-view.title": "Ваш заказ",
|
||||||
"dry-wash.order-view.get-order-query.error.title": "Не удалось загрузить детали заказа",
|
"dry-wash.order-view.get-order-query.error.title": "Не удалось загрузить детали заказа №{{number}}",
|
||||||
"dry-wash.order-view.details.title": "Заказ №{{number}}",
|
"dry-wash.order-view.details.title": "Заказ №{{number}}",
|
||||||
"dry-wash.order-view.details.owner": "Владелец",
|
"dry-wash.order-view.details.owner": "Владелец",
|
||||||
"dry-wash.order-view.details.car": "Автомобиль",
|
"dry-wash.order-view.details.car": "Автомобиль",
|
||||||
|
|||||||
@ -1,15 +0,0 @@
|
|||||||
import { getFeatures } from "@brojs/cli";
|
|
||||||
|
|
||||||
const features = getFeatures('dry-wash-pl');
|
|
||||||
|
|
||||||
export const FEATURE = {
|
|
||||||
orderViewStatusPolling: {
|
|
||||||
isOn: Boolean(features['order-view-status-polling']),
|
|
||||||
getValue: () => {
|
|
||||||
const interval = parseInt(features['order-view-status-polling'].value);
|
|
||||||
if (!Number.isNaN(interval)) {
|
|
||||||
return interval;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -3,7 +3,17 @@ import { getConfigValue } from '@brojs/cli';
|
|||||||
|
|
||||||
import { Master } from '../../models/api/master';
|
import { Master } from '../../models/api/master';
|
||||||
|
|
||||||
import { extractBodyFromResponse } from './utils';
|
type SuccessResponse<Body> = {
|
||||||
|
success: true;
|
||||||
|
body: Body;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ErrorResponse = {
|
||||||
|
success: false;
|
||||||
|
message: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type BaseResponse<Body> = SuccessResponse<Body> | ErrorResponse;
|
||||||
|
|
||||||
export const api = createApi({
|
export const api = createApi({
|
||||||
reducerPath: 'api',
|
reducerPath: 'api',
|
||||||
@ -12,7 +22,11 @@ export const api = createApi({
|
|||||||
endpoints: (builder) => ({
|
endpoints: (builder) => ({
|
||||||
getMasters: builder.query<Master[], void>({
|
getMasters: builder.query<Master[], void>({
|
||||||
query: () => ({ url: '/arm/masters' }),
|
query: () => ({ url: '/arm/masters' }),
|
||||||
transformResponse: extractBodyFromResponse<Master[]>,
|
transformResponse: (response: BaseResponse<Master[]>) => {
|
||||||
|
if (response.success) {
|
||||||
|
return response.body;
|
||||||
|
}
|
||||||
|
},
|
||||||
providesTags: ['Masters'],
|
providesTags: ['Masters'],
|
||||||
}),
|
}),
|
||||||
addMaster: builder.mutation<void, Pick<Master, 'name' | 'phone'>>({
|
addMaster: builder.mutation<void, Pick<Master, 'name' | 'phone'>>({
|
||||||
|
|||||||
@ -1,14 +0,0 @@
|
|||||||
import { GetOrder } from "../../models/api";
|
|
||||||
|
|
||||||
import { api } from "./api";
|
|
||||||
import { extractBodyFromResponse, extractErrorMessageFromResponse } from "./utils";
|
|
||||||
|
|
||||||
export const landingApi = api.injectEndpoints({
|
|
||||||
endpoints: ({ query }) => ({
|
|
||||||
getOrder: query<GetOrder.Response, GetOrder.Params>({
|
|
||||||
query: ({ orderId }) => `/order/${orderId}`,
|
|
||||||
transformResponse: extractBodyFromResponse<GetOrder.Response>,
|
|
||||||
transformErrorResponse: extractErrorMessageFromResponse,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
});
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
|
|
||||||
|
|
||||||
import { BaseResponse } from "../../models/api";
|
|
||||||
|
|
||||||
export const extractBodyFromResponse = <Body>(response: BaseResponse<Body>) => {
|
|
||||||
if (response.success) {
|
|
||||||
return response.body;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const extractErrorMessageFromResponse = ({ data }: FetchBaseQueryError) => {
|
|
||||||
if (typeof data === 'object' && 'message' in data && typeof data.message === 'string') {
|
|
||||||
return data.message;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,11 +1,12 @@
|
|||||||
import { getConfigValue } from '@brojs/cli';
|
import { getConfigValue } from '@brojs/cli';
|
||||||
import { useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
import { CreateOrder } from '../models/api';
|
import { CreateOrder, GetOrder } from '../models/api';
|
||||||
|
|
||||||
import { QueryState, Trigger } from './types';
|
import { QueryState, Trigger } from './types';
|
||||||
|
|
||||||
enum LandingEndpoints {
|
enum LandingEndpoints {
|
||||||
|
ORDER = '/order',
|
||||||
ORDER_CREATE = '/order/create',
|
ORDER_CREATE = '/order/create',
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,4 +63,45 @@ const useCreateOrderMutation = <D extends CreateOrder.Response>(): [
|
|||||||
return [createOrder, { isLoading, isSuccess, data, isError, error }];
|
return [createOrder, { isLoading, isSuccess, data, isError, error }];
|
||||||
};
|
};
|
||||||
|
|
||||||
export { useCreateOrderMutation };
|
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 };
|
||||||
|
|||||||
@ -19,7 +19,7 @@ import { OrderStatus } from './status';
|
|||||||
|
|
||||||
type OrderDetailsProps = Pick<
|
type OrderDetailsProps = Pick<
|
||||||
Order.View,
|
Order.View,
|
||||||
| 'orderNumber'
|
| 'id'
|
||||||
| 'status'
|
| 'status'
|
||||||
| 'phone'
|
| 'phone'
|
||||||
| 'carNumber'
|
| 'carNumber'
|
||||||
@ -32,7 +32,7 @@ type OrderDetailsProps = Pick<
|
|||||||
>;
|
>;
|
||||||
|
|
||||||
export const OrderDetails: FC<OrderDetailsProps> = ({
|
export const OrderDetails: FC<OrderDetailsProps> = ({
|
||||||
orderNumber,
|
id,
|
||||||
status,
|
status,
|
||||||
phone,
|
phone,
|
||||||
carNumber,
|
carNumber,
|
||||||
@ -58,7 +58,7 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
|
|||||||
gap={2}
|
gap={2}
|
||||||
>
|
>
|
||||||
<Heading as='h2' size='lg'>
|
<Heading as='h2' size='lg'>
|
||||||
{t('title', { number: orderNumber })}
|
{t('title', { number: id })}
|
||||||
</Heading>
|
</Heading>
|
||||||
<OrderStatus value={status} />
|
<OrderStatus value={status} />
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|||||||
@ -15,19 +15,19 @@ const getPropsByStatus = (
|
|||||||
colorScheme: 'red',
|
colorScheme: 'red',
|
||||||
children: t('canceled'),
|
children: t('canceled'),
|
||||||
};
|
};
|
||||||
|
case 'progress':
|
||||||
|
return {
|
||||||
|
colorScheme: 'yellow',
|
||||||
|
children: t('progress'),
|
||||||
|
};
|
||||||
case 'pending':
|
case 'pending':
|
||||||
return {
|
return {
|
||||||
colorScheme: 'yellow',
|
colorScheme: 'yellow',
|
||||||
children: t('pending'),
|
children: t('pending'),
|
||||||
};
|
};
|
||||||
case 'progress':
|
|
||||||
return {
|
|
||||||
colorScheme: 'orange',
|
|
||||||
children: t('progress'),
|
|
||||||
};
|
|
||||||
case 'working':
|
case 'working':
|
||||||
return {
|
return {
|
||||||
colorScheme: 'orange',
|
colorScheme: 'yellow',
|
||||||
children: t('working'),
|
children: t('working'),
|
||||||
};
|
};
|
||||||
case 'complete':
|
case 'complete':
|
||||||
|
|||||||
@ -1,13 +0,0 @@
|
|||||||
type SuccessResponse<Body> = {
|
|
||||||
success: true;
|
|
||||||
body: Body;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ErrorMessage = string;
|
|
||||||
|
|
||||||
type ErrorResponse = {
|
|
||||||
success: false;
|
|
||||||
message: ErrorMessage;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type BaseResponse<Body> = SuccessResponse<Body> | ErrorResponse;
|
|
||||||
@ -1,2 +1 @@
|
|||||||
export * from './common';
|
|
||||||
export * from './order';
|
export * from './order';
|
||||||
@ -1,16 +1,6 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-namespace */
|
/* eslint-disable @typescript-eslint/no-namespace */
|
||||||
import { Order } from "../landing";
|
import { Order } from "../landing";
|
||||||
|
|
||||||
import { ErrorMessage } from "./common";
|
|
||||||
|
|
||||||
export namespace GetOrder {
|
|
||||||
export type Response = Order.View;
|
|
||||||
export type Params = {
|
|
||||||
orderId: Order.Id
|
|
||||||
};
|
|
||||||
export type Error = ErrorMessage;
|
|
||||||
}
|
|
||||||
|
|
||||||
export namespace CreateOrder {
|
export namespace CreateOrder {
|
||||||
export type Response = {
|
export type Response = {
|
||||||
id: Order.Id
|
id: Order.Id
|
||||||
@ -19,3 +9,10 @@ export namespace CreateOrder {
|
|||||||
body: Order.Create
|
body: Order.Create
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export namespace GetOrder {
|
||||||
|
export type Response = Order.View;
|
||||||
|
export type Params = {
|
||||||
|
orderId: Order.Id
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -26,8 +26,6 @@ export type Create = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Number = string;
|
|
||||||
|
|
||||||
export type View = {
|
export type View = {
|
||||||
phone: Customer.PhoneNumber;
|
phone: Customer.PhoneNumber;
|
||||||
carNumber: Car.RegistrationNumber;
|
carNumber: Car.RegistrationNumber;
|
||||||
@ -36,7 +34,6 @@ export type View = {
|
|||||||
location: Washing.Location;
|
location: Washing.Location;
|
||||||
startWashTime: Washing.AvailableBeginDateTime;
|
startWashTime: Washing.AvailableBeginDateTime;
|
||||||
endWashTime: Washing.AvailableEndDateTime;
|
endWashTime: Washing.AvailableEndDateTime;
|
||||||
orderNumber: Number,
|
|
||||||
status: Status,
|
status: Status,
|
||||||
notes: string;
|
notes: string;
|
||||||
created: IsoDate;
|
created: IsoDate;
|
||||||
|
|||||||
@ -1,13 +1,5 @@
|
|||||||
import React, { FC } from 'react';
|
import React, { FC } from 'react';
|
||||||
import {
|
import { Alert, AlertDescription, AlertIcon, AlertTitle, HStack, Spinner } from '@chakra-ui/react';
|
||||||
Alert,
|
|
||||||
AlertDescription,
|
|
||||||
AlertIcon,
|
|
||||||
AlertTitle,
|
|
||||||
Box,
|
|
||||||
HStack,
|
|
||||||
Spinner,
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Container, Heading, VStack } from '@chakra-ui/react';
|
import { Container, Heading, VStack } from '@chakra-ui/react';
|
||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
@ -18,9 +10,7 @@ import {
|
|||||||
} from '../../containers';
|
} from '../../containers';
|
||||||
import { OrderDetails } from '../../components/order-view';
|
import { OrderDetails } from '../../components/order-view';
|
||||||
import { Order } from '../../models/landing';
|
import { Order } from '../../models/landing';
|
||||||
import { landingApi } from '../../__data__/service/landing.api';
|
import { useGetOrderQuery } from '../../api';
|
||||||
import { ErrorMessage } from '../../models/api';
|
|
||||||
import { FEATURE } from '../../__data__/features';
|
|
||||||
|
|
||||||
const Page: FC = () => {
|
const Page: FC = () => {
|
||||||
const { t } = useTranslation('~', {
|
const { t } = useTranslation('~', {
|
||||||
@ -31,21 +21,12 @@ const Page: FC = () => {
|
|||||||
const {
|
const {
|
||||||
isLoading,
|
isLoading,
|
||||||
isSuccess,
|
isSuccess,
|
||||||
data: order,
|
data: { body: order } = {},
|
||||||
isError,
|
isError,
|
||||||
error,
|
error,
|
||||||
} = landingApi.useGetOrderQuery(
|
} = useGetOrderQuery({
|
||||||
{
|
|
||||||
orderId,
|
orderId,
|
||||||
},
|
});
|
||||||
FEATURE.orderViewStatusPolling.isOn
|
|
||||||
? {
|
|
||||||
pollingInterval: FEATURE.orderViewStatusPolling.getValue(),
|
|
||||||
skipPollingIfUnfocused: true,
|
|
||||||
}
|
|
||||||
: undefined,
|
|
||||||
);
|
|
||||||
const errorMessage = error as ErrorMessage;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LandingThemeProvider>
|
<LandingThemeProvider>
|
||||||
@ -70,7 +51,7 @@ const Page: FC = () => {
|
|||||||
<>
|
<>
|
||||||
{isSuccess && (
|
{isSuccess && (
|
||||||
<OrderDetails
|
<OrderDetails
|
||||||
orderNumber={order.orderNumber}
|
id={order.id}
|
||||||
status={order.status}
|
status={order.status}
|
||||||
phone={order.phone}
|
phone={order.phone}
|
||||||
carNumber={order.carNumber}
|
carNumber={order.carNumber}
|
||||||
@ -85,14 +66,14 @@ const Page: FC = () => {
|
|||||||
</>
|
</>
|
||||||
<>
|
<>
|
||||||
{isError && (
|
{isError && (
|
||||||
<Alert status='error' alignItems='flex-start'>
|
<Alert status='error'>
|
||||||
<AlertIcon />
|
<AlertIcon />
|
||||||
<Box>
|
|
||||||
<AlertTitle>
|
<AlertTitle>
|
||||||
{t('get-order-query.error.title')}
|
{t('get-order-query.error.title', {
|
||||||
|
number: orderId,
|
||||||
|
})}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>{errorMessage}</AlertDescription>
|
<AlertDescription>{error.data?.error}</AlertDescription>
|
||||||
</Box>
|
|
||||||
</Alert>
|
</Alert>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -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', orderView: 'success-pending' };
|
const STUBS = { masters: 'success', orders: 'success', orderView: 'success' };
|
||||||
|
|
||||||
router.get('/set/:name/:value', (req, res) => {
|
router.get('/set/:name/:value', (req, res) => {
|
||||||
const { name, value } = req.params;
|
const { name, value } = req.params;
|
||||||
@ -28,8 +28,7 @@ router.get('/', (req, res) => {
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Лендинг - Детали заказа</legend>
|
<legend>Лендинг - Детали заказа</legend>
|
||||||
${generateRadioInput('orderView', 'success-pending')}
|
${generateRadioInput('orderView', 'success')}
|
||||||
${generateRadioInput('orderView', 'success-working')}
|
|
||||||
${generateRadioInput('orderView', 'error')}
|
${generateRadioInput('orderView', 'error')}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>`);
|
</div>`);
|
||||||
|
|||||||
@ -8,11 +8,10 @@
|
|||||||
"startWashTime": "2025-01-19T14:03:00.000Z",
|
"startWashTime": "2025-01-19T14:03:00.000Z",
|
||||||
"endWashTime": "2025-01-19T14:03:00.000Z",
|
"endWashTime": "2025-01-19T14:03:00.000Z",
|
||||||
"location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо",
|
"location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо",
|
||||||
"orderNumber": "1",
|
"status": "progress",
|
||||||
"status": "pending",
|
|
||||||
"notes": "",
|
"notes": "",
|
||||||
"created": "2025-01-19T14:04:02.985Z",
|
"created": "2025-01-19T14:04:02.985Z",
|
||||||
"updated": "2025-01-19T14:04:02.987Z",
|
"updated": "2025-01-19T14:04:02.987Z",
|
||||||
"id": "id1"
|
"id": "678d06527d78ec30be2679d8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"success": false,
|
|
||||||
"message": "Не удалось загрузить детали заказа"
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
{
|
|
||||||
"success": true,
|
|
||||||
"body": {
|
|
||||||
"phone": "+79876543210",
|
|
||||||
"carNumber": "А123АА16",
|
|
||||||
"carBody": 2,
|
|
||||||
"carColor": "#ffffff",
|
|
||||||
"startWashTime": "2025-01-19T14:03:00.000Z",
|
|
||||||
"endWashTime": "2025-01-19T14:03:00.000Z",
|
|
||||||
"location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо",
|
|
||||||
"orderNumber": "1",
|
|
||||||
"status": "working",
|
|
||||||
"notes": "",
|
|
||||||
"created": "2025-01-19T14:04:02.985Z",
|
|
||||||
"updated": "2025-01-19T14:04:02.987Z",
|
|
||||||
"id": "id1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user