Compare commits
No commits in common. "main" and "feature/change-days" have entirely different histories.
main
...
feature/ch
@ -24,7 +24,6 @@
|
||||
"dry-wash.order-create.form.car-body-field.label": "Car body type",
|
||||
"dry-wash.order-create.form.washing-datetime-field.label": "What time is the car available?",
|
||||
"dry-wash.order-create.form.washing-location-field.label": "Where is the car located?",
|
||||
"dry-wash.order-create.form.washing-location-field.placeholder": "Enter the address or select on the map",
|
||||
"dry-wash.order-create.form.washing-location-field.help": "For example, 55.754364, 48.743295 Universitetskaya Street, 1, Innopolis, Verkhneuslonsky district, Republic of Tatarstan (Tatarstan), 420500",
|
||||
"dry-wash.order-create.car-body-select.placeholder": "Not specified",
|
||||
"dry-wash.order-create.car-body-select.options.sedan": "Sedan",
|
||||
@ -39,15 +38,6 @@
|
||||
"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-view.title": "Your order",
|
||||
"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",
|
||||
"dry-wash.order-view.details.location": "Where",
|
||||
"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.arm.master.add": "Add",
|
||||
"dry-wash.arm.order.title": "Orders",
|
||||
"dry-wash.arm.order.table.empty": "Table empty",
|
||||
|
||||
@ -58,30 +58,20 @@
|
||||
"dry-wash.order-create.form.car-body-field.label": "Тип кузова автомобиля",
|
||||
"dry-wash.order-create.form.washing-datetime-field.label": "В какое время автомобиль доступен?",
|
||||
"dry-wash.order-create.form.washing-location-field.label": "Где находится автомобиль?",
|
||||
"dry-wash.order-create.form.washing-location-field.placeholder": "Введите адрес или выберите на карте",
|
||||
"dry-wash.order-create.form.washing-location-field.help": "Например, 55.754364, 48.743295 Университетская улица, 1, Иннополис, Верхнеуслонский район, Республика Татарстан (Татарстан), 420500",
|
||||
"dry-wash.order-create.car-body-select.placeholder": "Не указан",
|
||||
"dry-wash.order-create.car-body-select.options.sedan": "Седан",
|
||||
"dry-wash.order-create.car-body-select.options.hatchback": "Хэтчбек",
|
||||
"dry-wash.order-create.car-body-select.options.crossover": "Кроссовер",
|
||||
"dry-wash.order-create.car-body-select.options.suv": "Внедорожник",
|
||||
"dry-wash.order-create.car-body-select.options.station-wagon": "Универсал",
|
||||
"dry-wash.order-create.car-body-select.options.coupe": "Купе",
|
||||
"dry-wash.order-create.car-body-select.options.minivan": "Минивэн",
|
||||
"dry-wash.order-create.car-body-select.options.pickup": "Пикап",
|
||||
"dry-wash.order-create.car-body-select.options.liftback": "Лифтбек",
|
||||
"dry-wash.order-create.car-body-select.options.sports-car": "Спорткар",
|
||||
"dry-wash.order-create.car-body-select.options.hatchback" : "Хэтчбек",
|
||||
"dry-wash.order-create.car-body-select.options.crossover" : "Кроссовер",
|
||||
"dry-wash.order-create.car-body-select.options.suv" : "Внедорожник",
|
||||
"dry-wash.order-create.car-body-select.options.station-wagon" : "Универсал",
|
||||
"dry-wash.order-create.car-body-select.options.coupe" : "Купе",
|
||||
"dry-wash.order-create.car-body-select.options.minivan" : "Минивэн",
|
||||
"dry-wash.order-create.car-body-select.options.pickup" : "Пикап",
|
||||
"dry-wash.order-create.car-body-select.options.liftback" : "Лифтбек",
|
||||
"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-view.title": "Ваш заказ",
|
||||
"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": "Автомобиль",
|
||||
"dry-wash.order-view.details.location": "Где",
|
||||
"dry-wash.order-view.details.datetime-range": "Когда",
|
||||
"dry-wash.order-view.details.alert": "С вами свяжется оператор насчет оплаты по указанному номеру телефона",
|
||||
"dry-wash.notFound.title": "Страница не найдена",
|
||||
"dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
|
||||
"dry-wash.notFound.button.back": "Вернуться на главную",
|
||||
|
||||
69
package-lock.json
generated
69
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "dry-wash",
|
||||
"version": "0.3.0",
|
||||
"version": "0.2.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "dry-wash",
|
||||
"version": "0.3.0",
|
||||
"version": "0.2.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@brojs/cli": "^1.6.3",
|
||||
@ -16,13 +16,11 @@
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@fontsource/open-sans": "^5.1.0",
|
||||
"@lottiefiles/react-lottie-player": "^3.5.4",
|
||||
"@pbe/react-yandex-maps": "^1.2.5",
|
||||
"@types/react": "^18.3.12",
|
||||
"dayjs": "^1.11.13",
|
||||
"express": "^4.21.1",
|
||||
"framer-motion": "^6.2.8",
|
||||
"i18next": "^23.16.4",
|
||||
"keycloak-js": "^23.0.7",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.53.2",
|
||||
@ -3596,21 +3594,6 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@pbe/react-yandex-maps": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@pbe/react-yandex-maps/-/react-yandex-maps-1.2.5.tgz",
|
||||
"integrity": "sha512-cBojin5e1fPx9XVCAqHQJsCnHGMeBNsP0TrNfpWCrPFfxb30ye+JgcGr2mn767Gbr1d+RufBLRiUcX2kaiAwjQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/yandex-maps": "2.1.29"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.x || ^17.x || ^18.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@pkgjs/parseargs": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
|
||||
@ -3791,12 +3774,6 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/yandex-maps": {
|
||||
"version": "2.1.29",
|
||||
"resolved": "https://registry.npmjs.org/@types/yandex-maps/-/yandex-maps-2.1.29.tgz",
|
||||
"integrity": "sha512-nuibRWj3RU/9KXlCzTrRtDE+n6V9l7NbT9JakicqZ5OXIdwyb6blvV2Uwn6lB58WYm3DSUDP2I2AWlnWMc8z2w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.12.2",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.12.2.tgz",
|
||||
@ -4730,25 +4707,6 @@
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
||||
},
|
||||
"node_modules/base64-js": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||
@ -8178,11 +8136,6 @@
|
||||
"node": ">= 10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/js-sha256": {
|
||||
"version": "0.10.1",
|
||||
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.10.1.tgz",
|
||||
"integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw=="
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@ -8276,24 +8229,6 @@
|
||||
"node": ">=4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jwt-decode": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
|
||||
"integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/keycloak-js": {
|
||||
"version": "23.0.7",
|
||||
"resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-23.0.7.tgz",
|
||||
"integrity": "sha512-OmszsKzBhhm5yP4W1q/tMd+nNnKpOAdeVYcoGhphlv8Fj1bNk4wRTYzp7pn5BkvueLz7fhvKHz7uOc33524YrA==",
|
||||
"dependencies": {
|
||||
"base64-js": "^1.5.1",
|
||||
"js-sha256": "^0.10.1",
|
||||
"jwt-decode": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/keygrip": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dry-wash",
|
||||
"version": "0.3.0",
|
||||
"version": "0.2.0",
|
||||
"description": "<a id=\"readme-top\"></a>",
|
||||
"main": "./src/index.tsx",
|
||||
"scripts": {
|
||||
@ -24,13 +24,11 @@
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@fontsource/open-sans": "^5.1.0",
|
||||
"@lottiefiles/react-lottie-player": "^3.5.4",
|
||||
"@pbe/react-yandex-maps": "^1.2.5",
|
||||
"@types/react": "^18.3.12",
|
||||
"dayjs": "^1.11.13",
|
||||
"express": "^4.21.1",
|
||||
"framer-motion": "^6.2.8",
|
||||
"i18next": "^23.16.4",
|
||||
"keycloak-js": "^23.0.7",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.53.2",
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
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 };
|
||||
@ -1,15 +0,0 @@
|
||||
import { Location, StringCoordinates, StringLocation } from "./types";
|
||||
|
||||
export const splitLocation = (stringifiedLocation: StringLocation) => {
|
||||
return stringifiedLocation.replace(' ', '~').split('~');
|
||||
};
|
||||
|
||||
export const stringifyLocation = (location: Location): StringLocation => {
|
||||
const { coordinates, address } = location;
|
||||
const [latitude, longitude] = coordinates;
|
||||
const coordinatesString = `${latitude},${longitude}` satisfies StringCoordinates;
|
||||
return `${coordinatesString} ${address}`;
|
||||
};
|
||||
|
||||
const locationRe = new RegExp(/^[-0-9]+.[0-9]+,[-0-9]+.[0-9]+ .*/);
|
||||
export const isValidLocation = (value: string): value is StringLocation => locationRe.test(value);
|
||||
@ -1,4 +0,0 @@
|
||||
export type { StringLocation } from './types';
|
||||
export * from './location-input';
|
||||
export * from './map';
|
||||
export * from './ymaps';
|
||||
@ -1,40 +0,0 @@
|
||||
import { YMapsApi } from "@pbe/react-yandex-maps/typings/util/typing";
|
||||
|
||||
import { Address, Location, StringLocation } from "../types";
|
||||
import { splitLocation, stringifyLocation } from "../helper";
|
||||
|
||||
export const formatLocation = (location: Location | undefined): StringLocation | '' => {
|
||||
if (!location) {
|
||||
return '';
|
||||
}
|
||||
return stringifyLocation(location);
|
||||
};
|
||||
|
||||
const coordinatesRe = new RegExp(/^[-0-9]+.[0-9]+,[-0-9]+.[0-9]+/);
|
||||
export const extractAddress = (value: string) => value.replace(coordinatesRe, '').trim();
|
||||
|
||||
export const getLocationByAddress = async (ymaps: YMapsApi, address: Address): Promise<Location> => {
|
||||
try {
|
||||
const result = await ymaps.geocode(address);
|
||||
const firstGeoObject = result.geoObjects.get(
|
||||
0,
|
||||
) as unknown as ymaps.IGeoObject<ymaps.IBasePointGeometry>;
|
||||
const [latitude, longitude] = firstGeoObject.geometry.getCoordinates();
|
||||
return { coordinates: [latitude, longitude], address };
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const isRealLocation = async (ymaps: YMapsApi, stringifiedLocation: StringLocation) => {
|
||||
const [coordinates, address] = splitLocation(stringifiedLocation);
|
||||
try {
|
||||
const result = await ymaps.geocode(coordinates);
|
||||
const firstGeoObject = result.geoObjects.get(0) as ymaps.GeocodeResult;
|
||||
const addressByCoordinates = firstGeoObject.getAddressLine();
|
||||
|
||||
return address === addressByCoordinates;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
export { LocationInput } from './location-input';
|
||||
@ -1,144 +0,0 @@
|
||||
import React, { forwardRef, memo, useEffect, useState } from 'react';
|
||||
import {
|
||||
Input,
|
||||
Box,
|
||||
InputProps,
|
||||
PopoverAnchor,
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverBody,
|
||||
List,
|
||||
ListItem,
|
||||
} from '@chakra-ui/react';
|
||||
import { withYMaps } from '@pbe/react-yandex-maps';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Suggestion } from '../types';
|
||||
import { isValidLocation } from '../helper';
|
||||
|
||||
import {
|
||||
formatLocation,
|
||||
getLocationByAddress,
|
||||
isRealLocation,
|
||||
extractAddress,
|
||||
} from './helper';
|
||||
import { LocationInputProps } from './types';
|
||||
|
||||
export const LocationInput = memo(
|
||||
withYMaps(
|
||||
forwardRef<HTMLInputElement, LocationInputProps>(function LocationInput(
|
||||
{ ymaps, value, onChange, ...props },
|
||||
ref,
|
||||
) {
|
||||
const [inputValue, setInputValue] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
setInputValue(value);
|
||||
}, [value]);
|
||||
|
||||
const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
|
||||
const [isSuggestionsPanelOpen, setIsSuggestionsPanelOpen] =
|
||||
useState<boolean>(false);
|
||||
|
||||
const onInputChange: InputProps['onChange'] = async (e) => {
|
||||
const newInputValue = e.target.value;
|
||||
setInputValue(newInputValue);
|
||||
|
||||
if (newInputValue.trim().length > 3) {
|
||||
try {
|
||||
const address = extractAddress(newInputValue);
|
||||
const results = await ymaps.suggest(address);
|
||||
setSuggestions(results);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
} else {
|
||||
setSuggestions([]);
|
||||
}
|
||||
|
||||
setIsSuggestionsPanelOpen(suggestions.length > 1);
|
||||
};
|
||||
|
||||
const onFocus: InputProps['onFocus'] = () => {
|
||||
setIsSuggestionsPanelOpen(suggestions.length > 1);
|
||||
};
|
||||
|
||||
const onBlur: InputProps['onBlur'] = async (e) => {
|
||||
const inputValue = e.target.value;
|
||||
if (
|
||||
isValidLocation(inputValue) &&
|
||||
(await isRealLocation(ymaps, inputValue))
|
||||
) {
|
||||
onChange(inputValue);
|
||||
} else {
|
||||
setInputValue(value);
|
||||
}
|
||||
setIsSuggestionsPanelOpen(false);
|
||||
};
|
||||
|
||||
const handleSuggestionClick = async ({ value: address }: Suggestion) => {
|
||||
try {
|
||||
const location = await getLocationByAddress(ymaps, address);
|
||||
const newValue = formatLocation(location);
|
||||
setInputValue(newValue);
|
||||
onChange(newValue);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const { t } = useTranslation('~', {
|
||||
keyPrefix: 'dry-wash.order-create.form.washing-location-field',
|
||||
});
|
||||
|
||||
return (
|
||||
<Box width='100%'>
|
||||
<Popover
|
||||
isOpen={isSuggestionsPanelOpen}
|
||||
autoFocus={false}
|
||||
placement='bottom-start'
|
||||
>
|
||||
<PopoverAnchor>
|
||||
<Input
|
||||
{...props}
|
||||
ref={ref}
|
||||
onBlur={onBlur}
|
||||
value={inputValue}
|
||||
onChange={onInputChange}
|
||||
onFocus={onFocus}
|
||||
placeholder={t('placeholder')}
|
||||
/>
|
||||
</PopoverAnchor>
|
||||
<PopoverContent width='100%' maxWidth='100%'>
|
||||
<PopoverBody border='1px' borderColor='gray.300' p={0}>
|
||||
<List>
|
||||
{suggestions.map((suggestion, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
p={2}
|
||||
cursor='pointer'
|
||||
_hover={{
|
||||
bgColor: 'primary.50',
|
||||
}}
|
||||
_active={{
|
||||
bgColor: 'primary.100',
|
||||
}}
|
||||
onClick={() => handleSuggestionClick(suggestion)}
|
||||
>
|
||||
{suggestion.displayName}
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</PopoverBody>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</Box>
|
||||
);
|
||||
}),
|
||||
true,
|
||||
['suggest', 'geocode'],
|
||||
),
|
||||
);
|
||||
|
||||
// todo: i18n
|
||||
// todo: replace console.error with toast
|
||||
@ -1,8 +0,0 @@
|
||||
import { YMapsApi } from "@pbe/react-yandex-maps/typings/util/typing";
|
||||
import { InputProps } from "@chakra-ui/react";
|
||||
|
||||
export type LocationInputProps = InputProps & {
|
||||
ymaps?: YMapsApi;
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
import { splitLocation } from "../helper";
|
||||
import { Coordinate, Location, StringLocation } from "../types";
|
||||
|
||||
export const KAZAN_CITY_CENTER: Coordinate[] = [55.797557, 49.107295];
|
||||
|
||||
export const parseLocation = (stringifiedLocation: StringLocation): Location => {
|
||||
const [coordinatesStr, address] = splitLocation(stringifiedLocation);
|
||||
const [latitude, longitude] = coordinatesStr.split(',').map(Number);
|
||||
return { coordinates: [latitude, longitude], address };
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
export { MapComponent } from './map';
|
||||
@ -1,70 +0,0 @@
|
||||
import React, { FC, memo, useEffect, useState } from 'react';
|
||||
import {
|
||||
Map,
|
||||
Placemark,
|
||||
GeolocationControl,
|
||||
ZoomControl,
|
||||
withYMaps,
|
||||
} from '@pbe/react-yandex-maps';
|
||||
import { YMapsApi } from '@pbe/react-yandex-maps/typings/util/typing';
|
||||
|
||||
import { Coordinate, StringLocation } from '../types';
|
||||
import { isValidLocation, stringifyLocation } from '../helper';
|
||||
|
||||
import { KAZAN_CITY_CENTER, parseLocation } from './helper';
|
||||
|
||||
export const MapComponent: FC<{
|
||||
ymaps?: YMapsApi;
|
||||
selectedLocation: StringLocation | null;
|
||||
onMapClick: (props: StringLocation) => void;
|
||||
}> = memo(
|
||||
withYMaps(
|
||||
({ ymaps, selectedLocation, onMapClick }) => {
|
||||
const [mapCenter, setMapCenter] =
|
||||
useState<Coordinate[]>(KAZAN_CITY_CENTER);
|
||||
|
||||
useEffect(() => {
|
||||
if (isValidLocation(selectedLocation)) {
|
||||
const location = parseLocation(selectedLocation);
|
||||
const { coordinates } = location;
|
||||
setMapCenter(coordinates);
|
||||
}
|
||||
}, [selectedLocation]);
|
||||
|
||||
return (
|
||||
<Map
|
||||
state={{
|
||||
center: mapCenter,
|
||||
zoom:
|
||||
isValidLocation(selectedLocation) &&
|
||||
parseLocation(selectedLocation)?.coordinates
|
||||
? 17
|
||||
: 10,
|
||||
}}
|
||||
width='100%'
|
||||
onClick={async (e: ymaps.MapEvent) => {
|
||||
try {
|
||||
const coordinates = e.get('coords');
|
||||
const address = await ymaps.geocode(coordinates).then((res) => {
|
||||
const firstGeoObject = res.geoObjects.get(
|
||||
0,
|
||||
) as ymaps.GeocodeResult;
|
||||
return firstGeoObject.getAddressLine();
|
||||
});
|
||||
onMapClick(stringifyLocation({ coordinates, address }));
|
||||
setMapCenter(coordinates);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<GeolocationControl options={{ float: 'left' }} />
|
||||
<ZoomControl />
|
||||
{selectedLocation && <Placemark geometry={mapCenter} />}
|
||||
</Map>
|
||||
);
|
||||
},
|
||||
true,
|
||||
['geocode'],
|
||||
),
|
||||
);
|
||||
@ -1,17 +0,0 @@
|
||||
export type Address = string;
|
||||
|
||||
export type Suggestion = {
|
||||
value: Address;
|
||||
displayName: string;
|
||||
};
|
||||
|
||||
export type Coordinate = number;
|
||||
|
||||
export type Location = {
|
||||
address: Address;
|
||||
coordinates: [Coordinate, Coordinate];
|
||||
};
|
||||
|
||||
export type StringCoordinates = `${Coordinate},${Coordinate}`;
|
||||
|
||||
export type StringLocation = `${StringCoordinates} ${Address}`;
|
||||
@ -1 +0,0 @@
|
||||
export { YMapsProvider } from './ymaps-provider';
|
||||
@ -1,16 +0,0 @@
|
||||
import { YMaps } from '@pbe/react-yandex-maps';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
export const YMapsProvider = ({ children }: PropsWithChildren) => {
|
||||
return (
|
||||
<YMaps
|
||||
query={{
|
||||
lang: 'ru_RU',
|
||||
apikey: '19cbc387-db9a-4807-a620-5205215db40f',
|
||||
suggest_apikey: '3576e65e-5e75-4ea2-b21c-7f9db112682e',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</YMaps>
|
||||
);
|
||||
};
|
||||
@ -1,7 +1,14 @@
|
||||
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';
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
VStack,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import { CarBodySelect } from './car-body';
|
||||
import { CarColorInput } from './car-color';
|
||||
@ -12,7 +19,6 @@ import { PhoneInput } from './phone';
|
||||
import { SubmitButton } from './submit';
|
||||
import { defaultValues, onSubmit, useGetValidationRules } from './helper';
|
||||
import { DateTimeInput } from './date-time';
|
||||
import { LocationInput, MapComponent, StringLocation, YMapsProvider } from './location';
|
||||
|
||||
export const OrderForm: FC = () => {
|
||||
const {
|
||||
@ -20,7 +26,6 @@ export const OrderForm: FC = () => {
|
||||
control,
|
||||
formState: { errors, isSubmitting },
|
||||
watch,
|
||||
setValue,
|
||||
} = useForm<OrderFormValues>({ defaultValues, shouldFocusError: true });
|
||||
|
||||
const { t } = useTranslation('~', {
|
||||
@ -29,10 +34,9 @@ export const OrderForm: FC = () => {
|
||||
|
||||
const RULES = useGetValidationRules();
|
||||
|
||||
const [availableDatetimeBegin, availableDatetimeEnd, carLocation] = watch([
|
||||
const [availableDatetimeBegin, availableDatetimeEnd] = watch([
|
||||
'availableDatetimeBegin',
|
||||
'availableDatetimeEnd',
|
||||
'carLocation',
|
||||
]);
|
||||
|
||||
return (
|
||||
@ -77,6 +81,15 @@ export const OrderForm: FC = () => {
|
||||
errors={errors}
|
||||
Input={CarBodySelect}
|
||||
/>
|
||||
<FormInputField
|
||||
control={control}
|
||||
name='carLocation'
|
||||
label={t('washing-location-field.label')}
|
||||
isRequired
|
||||
errors={errors}
|
||||
Input={Input}
|
||||
help={t('washing-location-field.help')}
|
||||
/>
|
||||
<FormControl isRequired>
|
||||
<FormLabel>{t('washing-datetime-field.label')}</FormLabel>
|
||||
<Flex flexWrap='wrap' gap={4}>
|
||||
@ -106,23 +119,6 @@ export const OrderForm: FC = () => {
|
||||
</Box>
|
||||
</Flex>
|
||||
</FormControl>
|
||||
<YMapsProvider>
|
||||
<FormInputField
|
||||
control={control}
|
||||
name='carLocation'
|
||||
label={t('washing-location-field.label')}
|
||||
help={t('washing-location-field.help')}
|
||||
isRequired
|
||||
errors={errors}
|
||||
Input={LocationInput}
|
||||
/>
|
||||
<MapComponent
|
||||
selectedLocation={carLocation as StringLocation}
|
||||
onMapClick={(location) => {
|
||||
setValue('carLocation', location);
|
||||
}}
|
||||
/>
|
||||
</YMapsProvider>
|
||||
<SubmitButton isLoading={isSubmitting} mt={4} />
|
||||
</VStack>
|
||||
</Box>
|
||||
@ -130,4 +126,5 @@ export const OrderForm: FC = () => {
|
||||
};
|
||||
|
||||
// todo: remove layout shift, when a validation message is displayed
|
||||
// todo: fix time range available values
|
||||
// todo: select location using an interactive map
|
||||
// todo: fix time range available values
|
||||
@ -1 +0,0 @@
|
||||
export { OrderDetails } from './order-details';
|
||||
@ -1,99 +0,0 @@
|
||||
import React, { FC } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
AlertIcon,
|
||||
Heading,
|
||||
HStack,
|
||||
UnorderedList,
|
||||
VStack,
|
||||
ListItem,
|
||||
Text,
|
||||
} from '@chakra-ui/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Order } from '../../../models/landing';
|
||||
import { formatDatetime } from '../../../lib';
|
||||
import { carBodySelectOptions } from '../../order-form/form/car-body/helper';
|
||||
|
||||
import { OrderStatus } from './status';
|
||||
|
||||
type OrderDetailsProps = Order.View;
|
||||
|
||||
export const OrderDetails: FC<OrderDetailsProps> = ({
|
||||
id,
|
||||
status,
|
||||
phone,
|
||||
carNumber,
|
||||
carBody,
|
||||
carColor,
|
||||
location,
|
||||
datetimeBegin,
|
||||
datetimeEnd,
|
||||
}) => {
|
||||
const { t } = useTranslation('~', {
|
||||
keyPrefix: 'dry-wash.order-view.details',
|
||||
});
|
||||
const { t: tCarBody } = useTranslation('~', {
|
||||
keyPrefix: 'dry-wash.order-create.car-body-select.options',
|
||||
});
|
||||
|
||||
return (
|
||||
<VStack p={4} alignItems='flex-start' gap={4}>
|
||||
<HStack
|
||||
width='full'
|
||||
flexWrap='wrap'
|
||||
justifyContent='space-between'
|
||||
gap={2}
|
||||
>
|
||||
<Heading as='h2' size='lg'>
|
||||
{t('title', { number: id })}
|
||||
</Heading>
|
||||
<OrderStatus value={status} />
|
||||
</HStack>
|
||||
<UnorderedList styleType='none'>
|
||||
{[
|
||||
{
|
||||
label: t('owner'),
|
||||
value: phone,
|
||||
},
|
||||
{
|
||||
label: t('car'),
|
||||
value: [
|
||||
carNumber,
|
||||
tCarBody(
|
||||
`${carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey}`,
|
||||
),
|
||||
carColor,
|
||||
]
|
||||
.filter((v) => v)
|
||||
.join(', '),
|
||||
},
|
||||
{
|
||||
label: t('location'),
|
||||
value: location,
|
||||
},
|
||||
{
|
||||
label: t('datetime-range'),
|
||||
value: [
|
||||
formatDatetime(datetimeBegin),
|
||||
formatDatetime(datetimeEnd),
|
||||
].join(' - '),
|
||||
},
|
||||
].map(({ label, value }, i) => (
|
||||
<ListItem key={i}>
|
||||
{label}:{' '}
|
||||
<Text as='span' color='primary.500' fontWeight='bold'>
|
||||
{value}
|
||||
</Text>
|
||||
</ListItem>
|
||||
))}
|
||||
</UnorderedList>
|
||||
<Alert status='info' alignItems='flex-start'>
|
||||
<AlertIcon />
|
||||
{t('alert')}
|
||||
</Alert>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
// todo: add i18n for date & time
|
||||
@ -1 +0,0 @@
|
||||
export { OrderStatus } from './order-status';
|
||||
@ -1,49 +0,0 @@
|
||||
import { Tag, TagProps } from '@chakra-ui/react';
|
||||
import React, { FC } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TFunction } from 'i18next';
|
||||
|
||||
import { Order } from '../../../../models/landing';
|
||||
|
||||
const getPropsByStatus = (
|
||||
status: Order.Status,
|
||||
t: TFunction<'~', 'dry-wash.arm.order.status'>,
|
||||
): TagProps => {
|
||||
switch (status) {
|
||||
case 'canceled':
|
||||
return {
|
||||
colorScheme: 'red',
|
||||
children: t('canceled'),
|
||||
};
|
||||
case 'progress':
|
||||
return {
|
||||
colorScheme: 'yellow',
|
||||
children: t('progress'),
|
||||
};
|
||||
case 'pending':
|
||||
return {
|
||||
colorScheme: 'yellow',
|
||||
children: t('pending'),
|
||||
};
|
||||
case 'working':
|
||||
return {
|
||||
colorScheme: 'yellow',
|
||||
children: t('working'),
|
||||
};
|
||||
case 'complete':
|
||||
return {
|
||||
colorScheme: 'green',
|
||||
children: t('complete'),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const OrderStatus: FC<{ value: Order.Status }> = ({ value }) => {
|
||||
const { t } = useTranslation('~', {
|
||||
keyPrefix: 'dry-wash.arm.order.status',
|
||||
});
|
||||
|
||||
const props = getPropsByStatus(value, t);
|
||||
|
||||
return <Tag variant='solid' {...props} />;
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
export * from './details';
|
||||
@ -1,34 +0,0 @@
|
||||
import Keycloak from 'keycloak-js';
|
||||
|
||||
const keycloak = new Keycloak({
|
||||
url: 'https://kc.bro-js.ru',
|
||||
realm: 'open',
|
||||
clientId: 'dry-wash',
|
||||
});
|
||||
|
||||
const authLogin = async ({ redirect }) => {
|
||||
let user = null;
|
||||
|
||||
try {
|
||||
const authenticated = await keycloak.init({ onLoad: 'login-required' });
|
||||
if (authenticated) {
|
||||
user = { ...(await keycloak.loadUserInfo()), ...keycloak.tokenParsed };
|
||||
|
||||
const isOperator =
|
||||
user?.resource_access?.['dry-wash']?.roles.includes('operator');
|
||||
|
||||
if (!isOperator) {
|
||||
redirect();
|
||||
}
|
||||
|
||||
return user;
|
||||
} else {
|
||||
console.log('User is not authenticated');
|
||||
}
|
||||
} catch (error) {
|
||||
keycloak.login();
|
||||
console.error('Failed to initialize adapter:', error);
|
||||
}
|
||||
};
|
||||
|
||||
export default authLogin;
|
||||
@ -10,7 +10,3 @@ export const getTimeSlot = (start: string, end: string) => {
|
||||
end: endDay,
|
||||
});
|
||||
};
|
||||
|
||||
export const formatDatetime = (datetime: string) => {
|
||||
return dayjs(datetime).format('HH:mm DD.MM.YYYY');
|
||||
};
|
||||
@ -1,2 +1 @@
|
||||
export * from './date-helpers';
|
||||
export * from './types';
|
||||
@ -1 +1,2 @@
|
||||
export * as mockOrder from './order';
|
||||
export * as mockReview from './review';
|
||||
7
src/mocks/landing/order.ts
Normal file
7
src/mocks/landing/order.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { Order } from "../../models";
|
||||
|
||||
export const orders: Order.View[] = [
|
||||
{ id: 'id1' },
|
||||
{ id: 'id2' },
|
||||
{ id: 'id3' },
|
||||
];
|
||||
@ -1 +0,0 @@
|
||||
export * from './order-view';
|
||||
@ -1,14 +0,0 @@
|
||||
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;
|
||||
};
|
||||
@ -2,12 +2,6 @@ import { Car, Customer, Washing } from ".";
|
||||
|
||||
export type Id = string;
|
||||
|
||||
export type Status = 'pending' |
|
||||
'progress' |
|
||||
'working' |
|
||||
'canceled' |
|
||||
'complete';
|
||||
|
||||
export type Create = {
|
||||
customer: {
|
||||
phone: Customer.PhoneNumber,
|
||||
@ -26,13 +20,4 @@ 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;
|
||||
datetimeBegin: Washing.AvailableBeginDateTime;
|
||||
datetimeEnd: Washing.AvailableEndDateTime;
|
||||
};
|
||||
@ -1,30 +1,8 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { AbsoluteCenter, Spinner } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
import LayoutArm from '../../components/LayoutArm';
|
||||
import authLogin from '../../keycloak';
|
||||
import { URLs } from '../../__data__/urls';
|
||||
|
||||
|
||||
const Page = () => {
|
||||
const [user, setUser] = useState(null);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
authLogin({ redirect: () => navigate(URLs.landing.url) }).then((user) =>
|
||||
setUser(user),
|
||||
);
|
||||
}, []);
|
||||
|
||||
if (!user)
|
||||
return (
|
||||
<AbsoluteCenter>
|
||||
<Spinner />
|
||||
</AbsoluteCenter>
|
||||
);
|
||||
|
||||
return <LayoutArm />;
|
||||
};
|
||||
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
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,
|
||||
};
|
||||
};
|
||||
@ -1,75 +1,7 @@
|
||||
import React, { FC, useEffect } from '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 React from "react";
|
||||
|
||||
import { LandingThemeProvider } from '../../containers';
|
||||
import { OrderDetails } from '../../components/order-view';
|
||||
|
||||
import { useFetchOrderDetails } from './helper';
|
||||
|
||||
const Page: FC = () => {
|
||||
const { t } = useTranslation('~', {
|
||||
keyPrefix: 'dry-wash.order-view',
|
||||
});
|
||||
|
||||
const { orderId } = useParams();
|
||||
|
||||
const { isLoading, data, error } = useFetchOrderDetails({ orderId });
|
||||
|
||||
const toast = useToast();
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
toast({
|
||||
title: t('error.title'),
|
||||
description: t('fetch.error'),
|
||||
status: 'error',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
position: 'bottom-right',
|
||||
});
|
||||
}
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<LandingThemeProvider>
|
||||
<Container
|
||||
w='full'
|
||||
maxWidth='container.xl'
|
||||
minH='100vh'
|
||||
padding={0}
|
||||
bg='white'
|
||||
centerContent
|
||||
>
|
||||
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
|
||||
<Heading textAlign='center' mt={4}>
|
||||
{t('title')}
|
||||
</Heading>
|
||||
{isLoading ? (
|
||||
<HStack width='full' justifyContent='center'>
|
||||
<Spinner size='lg' />
|
||||
</HStack>
|
||||
) : (
|
||||
data && (
|
||||
<OrderDetails
|
||||
id={data.id}
|
||||
orderDate={data.orderDate}
|
||||
status={data.status}
|
||||
phone={data.phone}
|
||||
carNumber={data.carNumber}
|
||||
carBody={data.carBody}
|
||||
carColor={data.carColor}
|
||||
location={data.location}
|
||||
datetimeBegin={data.startWashTime}
|
||||
datetimeEnd={data.endWashTime}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</VStack>
|
||||
</Container>
|
||||
</LandingThemeProvider>
|
||||
);
|
||||
const Page = () => {
|
||||
return <h1>Order view</h1>;
|
||||
};
|
||||
|
||||
export default Page;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
/* eslint-disable @typescript-eslint/no-require-imports */
|
||||
const router = require('express').Router();
|
||||
|
||||
const STUBS = { masters: 'success', orders: 'success', orderView: 'success' };
|
||||
const STUBS = { masters: 'success', orders: 'success' };
|
||||
|
||||
router.get('/set/:name/:value', (req, res) => {
|
||||
const { name, value } = req.params;
|
||||
@ -24,11 +24,6 @@ router.get('/', (req, res) => {
|
||||
${generateRadioInput('orders', 'success')}
|
||||
${generateRadioInput('orders', 'error')}
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Лендинг - Детали заказа</legend>
|
||||
${generateRadioInput('orderView', 'success')}
|
||||
${generateRadioInput('orderView', 'error')}
|
||||
</fieldset>
|
||||
</div>`);
|
||||
});
|
||||
|
||||
|
||||
@ -33,19 +33,6 @@ router.post('/arm/orders', (req, res) => {
|
||||
);
|
||||
});
|
||||
|
||||
router.get('/order/:orderId', ({ params }, res) => {
|
||||
const { orderId } = params;
|
||||
const stubName = `${orderId}-${STUBS.orderView}`;
|
||||
|
||||
res
|
||||
.status(/error/.test(stubName) ? 500 : 200)
|
||||
.send(
|
||||
/^error$/.test(stubName)
|
||||
? commonError
|
||||
: require(`../json/landing-order-view/${stubName}.json`),
|
||||
);
|
||||
});
|
||||
|
||||
router.use('/admin', require('./admin'));
|
||||
|
||||
module.exports = router;
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
{
|
||||
"success": true,
|
||||
"body": {
|
||||
"id": "order1",
|
||||
"orderDate": "2024-11-24T08:41:46.366Z",
|
||||
"status": "progress",
|
||||
"carNumber": "A123BC",
|
||||
"carBody": 1,
|
||||
"startWashTime": "2024-11-24T10:30:00.000Z",
|
||||
"endWashTime": "2024-11-24T16:30:00.000Z",
|
||||
"phone": "79001234563",
|
||||
"location": "55.754364, 48.743295 Университетская улица, 1, Иннополис, Верхнеуслонский район, Республика Татарстан (Татарстан), 420500"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user