locales/en.json

@@ -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",

locales/ru.json

@@ -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.hatchback" : "Хэтчбек",
-  "dry-wash.order-create.car-body-select.options.crossover": "Кроссовер",
+  "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.suv" : "Внедорожник",
-  "dry-wash.order-create.car-body-select.options.station-wagon": "Универсал",
+  "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.coupe" : "Купе",
-  "dry-wash.order-create.car-body-select.options.minivan": "Минивэн",
+  "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.pickup" : "Пикап",
-  "dry-wash.order-create.car-body-select.options.liftback": "Лифтбек",
+  "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.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": "Вернуться на главную",

package-lock.json

@@ -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",

package.json

@@ -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",

src/api/landing.ts

@@ -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 };

src/components/order-form/form/location/helper.ts

@@ -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);

src/components/order-form/form/location/index.ts

@@ -1,4 +0,0 @@
-export type { StringLocation } from './types';
-export * from './location-input';
-export * from './map';
-export * from './ymaps';

src/components/order-form/form/location/location-input/helper.ts

@@ -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);
-  }
-};

src/components/order-form/form/location/location-input/index.ts

@@ -1 +0,0 @@
-export { LocationInput } from './location-input';

src/components/order-form/form/location/location-input/location-input.tsx

@@ -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

src/components/order-form/form/location/location-input/types.ts

@@ -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;
-};

src/components/order-form/form/location/map/helper.ts

@@ -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 };
-};

src/components/order-form/form/location/map/index.ts

@@ -1 +0,0 @@
-export { MapComponent } from './map';

src/components/order-form/form/location/map/map.tsx

@@ -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'],
-  ),
-);

src/components/order-form/form/location/types.ts

@@ -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}`;

src/components/order-form/form/location/ymaps/index.ts

@@ -1 +0,0 @@
-export { YMapsProvider } from './ymaps-provider';

src/components/order-form/form/location/ymaps/ymaps-provider.tsx

@@ -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>
-  );
-};

src/components/order-form/form/order-form.tsx

@@ -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

src/components/order-view/details/index.ts

@@ -1 +0,0 @@
-export { OrderDetails } from './order-details';

src/components/order-view/details/order-details.tsx

@@ -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

src/components/order-view/details/status/index.ts

@@ -1 +0,0 @@
-export { OrderStatus } from './order-status';

src/components/order-view/details/status/order-status.tsx

@@ -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} />;
-};

src/components/order-view/index.ts

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

src/keycloak.ts

@@ -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;

src/lib/date-helpers.ts

@@ -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');
-};

src/lib/index.ts

@@ -1,2 +1 @@
-export * from './date-helpers';
 export * from './types';

src/mocks/landing/index.ts

@@ -1 +1,2 @@
+export * as mockOrder from './order';
 export * as mockReview from './review';

src/mocks/landing/order.ts

@@ -0,0 +1,7 @@
+import { Order } from "../../models";
+
+export const orders: Order.View[] = [
+  { id: 'id1' },
+  { id: 'id2' },
+  { id: 'id3' },
+];

src/models/api/index.ts

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

src/models/api/order-view.ts

@@ -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;
-};

src/models/landing/order.ts

@@ -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;
 };

src/pages/arm/index.tsx

@@ -1,30 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { AbsoluteCenter, Spinner } from '@chakra-ui/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 />;
 };
 

src/pages/order-view/helper.tsx

@@ -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,
-  };
-};

src/pages/order-view/index.tsx

@@ -1,75 +1,7 @@
-import React, { FC, useEffect } from 'react';
+import React 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 { LandingThemeProvider } from '../../containers';
+const Page = () => {
-import { OrderDetails } from '../../components/order-view';
+  return <h1>Order view</h1>;
-
-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>
-  );
 };
 
 export default Page;

stubs/api/admin.js

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 const router = require('express').Router();
 
-const STUBS = { masters: 'success', orders: 'success', orderView: 'success' };
+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>`);
 });
 

stubs/api/index.js

@@ -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;

stubs/json/landing-order-view/1-success.json

@@ -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"
-  }
-}