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

locales/ru.json

@@ -58,7 +58,6 @@
   "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": "Седан",

package-lock.json

@@ -16,7 +16,6 @@
                 "@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",
@@ -3595,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",
@@ -3790,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",

package.json

@@ -24,7 +24,6 @@
         "@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",

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