@redneckz/wildless-cms-uni-blocks 0.14.623 → 0.14.624

package/mobile/src/components/CreditForm/creditFormStepsData.tsx

@@ -196,10 +196,10 @@ export const stepsSectionsMap: SectionsProps[][] = [
       inputs: [],
     },
     {
-      inputs: [{ fieldType: 'common', name: 'region', required: true }],
+      inputs: [{ fieldType: 'common', name: 'regionRetail', required: true }],
     },
     {
-      inputs: [{ fieldType: 'common', name: 'addressBranch', required: true }],
+      inputs: [{ fieldType: 'common', name: 'addressRetail', required: true }],
     },
     {
       title: 'Код представителя Банка',

package/mobile/src/components/CreditForm/getInitialFormState.tsx

@@ -55,8 +55,8 @@ export interface FormStateMap {
     creditInRshbCd?: string;
   };
   5: {
-    region?: string;
-    addressBranch?: string;
+    regionRetail?: string;
+    addressRetail?: string;
     bankEmployeeCode?: string;
   };
 }
@@ -116,8 +116,8 @@ const formStateMap: FormStateMap = {
     creditInRshbCd: '',
   },
   5: {
-    region: '',
-    addressBranch: '',
+    regionRetail: '',
+    addressRetail: '',
     bankEmployeeCode: '',
   },
 };

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import { type VNode } from '../../model/VNode';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
@@ -12,6 +12,7 @@ import { renderButtonsGroup } from './renderButtonsGroup';
 import { renderDescriptionBlock } from './renderDescriptionBlock';
 import { renderFiltrationForm, type RenderFiltrationFormOptions } from './renderFiltrationForm';
 import { renderHeading } from './renderHeading';
+import { useOfficesAtmsMapData } from './useOfficesAtmsMapData';
 import { type BalloonContent } from './YandexMapProps';
 
 const defaultEmptyFunction = () => void 0;
@@ -52,30 +53,13 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
     const onlyOffice = title?.includes('Офис');
     const [filtrationState, { field, reset }] = useForm(INITIAL_FILTRATION_STATE);
 
-    const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
-      const _filteredItems = filterItems(data, filtrationState);
-      const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
-
-      const _points = [
-        ..._filteredItems.map((_) => ({
-          type: 'offices',
-          coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-          content: getBalloon(_),
-        })),
-        ..._filteredRemoteWorkplaces.map((_: RemoteWorkplace) => ({
-          type: 'workplaces',
-          coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-          content: getBalloonRemoteWorkplaces({
-            address: _.address,
-            workScheduleDescription: _.workScheduleDescription,
-          }),
-        })),
-      ].filter((_) => _.coords && _.coords.length === 2);
-
-      const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
-
-      return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
-    }, [data, remoteWorkplaces, filtrationState]);
+    const { filteredItems, points, filteredRemoteWorkplaces, lengthItems } = useOfficesAtmsMapData({
+      data,
+      remoteWorkplaces,
+      filtrationState,
+      getBalloon,
+      getBalloonRemoteWorkplaces,
+    });
 
     const [activeButton, setActiveButton] = useState('all');
 

package/mobile/src/components/OfficesAtmsMap/useOfficesAtmsMapData.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { filterItems } from './OfficesAtmsMapLayout';
+import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { type BalloonContent } from './YandexMapProps';
+
+const defaultEmptyFunction = () => void 0;
+
+interface UseOfficesAtmsMapDataProps {
+  data: (Branch | RemoteWorkplace)[];
+  remoteWorkplaces?: (Branch | RemoteWorkplace)[];
+  filtrationState?: Record<string, boolean>;
+  getBalloon?: (item: Branch | Atm | RemoteWorkplace) => BalloonContent | undefined;
+  getBalloonRemoteWorkplaces?: (item: RemoteWorkplace) => BalloonContent | undefined;
+}
+
+export const useOfficesAtmsMapData = ({
+  data,
+  remoteWorkplaces = [],
+  filtrationState = {},
+  getBalloon = defaultEmptyFunction,
+  getBalloonRemoteWorkplaces = defaultEmptyFunction,
+}: UseOfficesAtmsMapDataProps) => {
+  const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
+    const _filteredItems = filterItems(data, filtrationState);
+    const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
+
+    const _points = [
+      ..._filteredItems.map((_) => ({
+        type: 'offices',
+        coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+        content: getBalloon(_),
+      })),
+      ..._filteredRemoteWorkplaces.map((_: RemoteWorkplace) => ({
+        type: 'workplaces',
+        coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+        content: getBalloonRemoteWorkplaces({
+          address: _.address,
+          workScheduleDescription: _.workScheduleDescription,
+        }),
+      })),
+    ].filter((_) => _.coords && _.coords.length === 2);
+
+    const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
+
+    return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
+  }, [data, remoteWorkplaces, filtrationState, getBalloon, getBalloonRemoteWorkplaces]);
+
+  return { filteredItems, points, filteredRemoteWorkplaces, lengthItems };
+};

package/mobile/src/hooks/useRegions.ts

@@ -10,6 +10,8 @@ export interface Region {
   name?: string;
   slug?: string;
   localities?: string[];
+  region?: string;
+  branches?: string[];
 }
 
 export function useRegions(url: string = REGIONS_URL): Region[] {

package/mobile/src/ui-kit/FormField/Fields/RetailAddressField.tsx

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { getOfficePoint } from '../../../components/OfficesAtmsMap/renderOfficeCard';
+import { useOfficesAtmsMapData } from '../../../components/OfficesAtmsMap/useOfficesAtmsMapData';
+import { type Branch } from '../../../hooks/useBranches';
+import { useBranchesByRegions } from '../../../hooks/useBranchesByRegions';
+import { ClientOnly } from '../../ClientOnly';
+import { SelectControl } from '../../Select/SelectControl';
+import { YandexMap } from '../../YandexMap/YandexMap';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+type RegionFieldProps = CustomFieldProps;
+
+export const RetailAddressField = JSX<RegionFieldProps>(({ field, input }) => {
+  const fieldRegion = field('regionRetail');
+  const fieldBranch = field('addressRetail');
+  const regions = useBranchesByRegions();
+  const regionKey = fieldRegion?.value?.key as string;
+  const selectedRegion = regions.find(({ region }) => region === regionKey);
+
+  const isLoad = !regions;
+
+  const regionText = fieldRegion?.value?.text as string;
+  const addressBranchRetail = useBranchesByRegions()?.find(
+    (_) => _?.region === regionText,
+  )?.branches;
+
+  useEffect(() => {
+    if (fieldRegion?.value?.key !== '') {
+      field?.('addressRetail')?.onChange?.('');
+    }
+  }, [fieldRegion?.value]);
+
+  const { points } = useOfficesAtmsMapData({
+    data: (selectedRegion?.branches as Branch[]) || [],
+    filtrationState: {},
+    getBalloon: getOfficePoint,
+  });
+
+  return (
+    <div>
+      <SelectControl
+        label="Адрес отделения"
+        placeholder="Выберите отделение"
+        options={(addressBranchRetail || []).map(({ address = '' }) => ({
+          key: address,
+          text: address,
+        }))}
+        {...getValidation(field('addressRetail'), validatorObj.addressRetail, input?.required)}
+        isSearch={true}
+      />
+      <div className="h-[600px]">
+        <ClientOnly>
+          <YandexMap
+            points={points}
+            isLoad={isLoad}
+            className="h-full"
+            selectedAddress={fieldBranch?.value?.text}
+          />
+        </ClientOnly>
+      </div>
+    </div>
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/RetailRegionField.tsx

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBranchesByRegions } from '../../../hooks/useBranchesByRegions';
+import { SelectControl } from '../../Select/SelectControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+export const RetailRegionField = JSX<CustomFieldProps>(({ field, input }) => {
+  const regions = useBranchesByRegions();
+
+  return (
+    <SelectControl
+      label="Филиал банка"
+      placeholder="Выберите филиал банка"
+      isSearch={true}
+      options={useMemo(
+        () => regions?.map(({ region = '' }) => ({ key: region, text: region })),
+        [regions],
+      )}
+      {...getValidation(field('regionRetail'), validatorObj.regionRetail, input?.required)}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/NameFieldDef.ts

@@ -82,4 +82,6 @@ export type NameFieldDef =
   | 'shareholderFlg'
   | 'legalEntityName'
   | 'bankEmployeeCode'
-  | 'partInBusiness';
+  | 'partInBusiness'
+  | 'regionRetail'
+  | 'addressRetail';

package/mobile/src/ui-kit/FormField/getField.tsx

@@ -68,6 +68,8 @@ import { PosTerminalField } from './Fields/PosTerminalField';
 import { ProductField } from './Fields/ProductField';
 import { RegionField } from './Fields/RegionField';
 import { RegionPremiumField } from './Fields/RegionPremiumField';
+import { RetailAddressField } from './Fields/RetailAddressField';
+import { RetailRegionField } from './Fields/RetailRegionField';
 import { RetirementIncomeField } from './Fields/RetirementIncomeField';
 import { SecondaryPhoneField } from './Fields/SecondaryPhoneField';
 import { ServiceDirectionField } from './Fields/ServiceDirectionField';
@@ -163,7 +165,6 @@ export const getField =
       armyIdFlg: <ArmyIdFlgField field={field} input={input} />,
       dulSerie: <DulSerieField field={field} input={input} />,
       dulNumber: <DulNumberField field={field} input={input} />,
-      // eslint-disable-next-line max-lines
       dulIssueDateField: <DulIssueDateField field={field} input={input} />,
       dulSubdivisionCode: <DulSubdivisionCodeField field={field} input={input} />,
       dulIssuedBy: <DulIssuedByField field={field} input={input} />,
@@ -180,6 +181,8 @@ export const getField =
       creditInRshbCd: <CreditInRshbCdField field={field} input={input} />,
       bankEmployeeCode: <BankEmpoleeCodeField field={field} input={input} />,
       partInBusiness: <PartInBusinessField field={field} input={input} />,
+      regionRetail: <RetailRegionField field={field} input={input} />,
+      addressRetail: <RetailAddressField field={field} input={input} />,
     };
 
     return isRenderField({ input, field }) ? (

package/mobile/src/ui-kit/FormField/getObjectValidator.tsx

@@ -21,8 +21,8 @@ export const validatorObj: Record<string, Validator> = {
   surname: nameValidator('Укажите свою фамилию'),
   name: nameValidator('Укажите своё имя'),
   middleName: nameValidator('Укажите своё отчество'),
-  region: defaultSelectValidator,
-  addressBranch: defaultSelectValidator,
+  region: defaultSelectValidator(),
+  addressBranch: defaultSelectValidator(),
   phone: phoneValidator('Укажите номер телефона'),
   secondaryPhone: phoneValidator('Укажите номер телефона'),
   birthday: defaultValidator('Укажите дату рождения'),
@@ -54,10 +54,10 @@ export const validatorObj: Record<string, Validator> = {
   partnerComments: defaultValidator(),
   collectionCount: defaultValidator(),
   comment: defaultValidator(),
-  acquiringType: defaultSelectValidator,
-  feedbackMethod: defaultSelectValidator,
-  serviceType: defaultSelectValidator,
-  serviceDirection: defaultSelectValidator,
+  acquiringType: defaultSelectValidator(),
+  feedbackMethod: defaultSelectValidator(),
+  serviceType: defaultSelectValidator(),
+  serviceDirection: defaultSelectValidator(),
   meetingDay: defaultValidator(),
   product: defaultValidator(),
   localities: defaultValidator(),
@@ -91,6 +91,8 @@ export const validatorObj: Record<string, Validator> = {
   legalEntityName: defaultValidator(),
   bankEmployeeCode: defaultValidator(),
   partInBusiness: defaultValidator(),
+  regionRetail: defaultSelectValidator('Выберите филиал банка'),
+  addressRetail: defaultSelectValidator('Выберите адрес банка'),
 };
 
 export const getObjectValidator = (inputs: FieldDef[]): Record<string, Validator> => {

package/mobile/src/ui-kit/FormField/validators.ts

@@ -4,22 +4,22 @@ import { validator } from '../../validation/validator';
 
 const ERROR_MESSAGE = 'Некорректно заполненное поле';
 
-export const defaultValidator = (errorMsg?: string) =>
-  required(errorMsg ? errorMsg : ERROR_MESSAGE);
+export const defaultValidator = (errorMsg?: string) => required(errorMsg ?? ERROR_MESSAGE);
 
-export const defaultSelectValidator = validator((_) => _?.key && _?.key !== '')(ERROR_MESSAGE);
+export const defaultSelectValidator = (errorMsg?: string) =>
+  validator((_) => _?.key && _?.key !== '')(errorMsg ?? ERROR_MESSAGE);
 
 export const jobNumberValidator = (errorMsg?: string) =>
   validator((_) => typeof _ === 'string' && _.length > 0 && _.length <= 2)(
-    errorMsg ? errorMsg : ERROR_MESSAGE,
+    errorMsg ?? ERROR_MESSAGE,
   );
 
 export const nameValidator = (errorMsg?: string) =>
-  validator((_) => typeof _ === 'string' && _.length > 1)(errorMsg ? errorMsg : ERROR_MESSAGE);
+  validator((_) => typeof _ === 'string' && _.length > 1)(errorMsg ?? ERROR_MESSAGE);
 
 export const lengthStringValidator = (maxLength: number, errorMsg?: string) =>
   validator((_) => typeof _ === 'string' && _.length >= 1 && _.length <= maxLength)(
-    errorMsg ? errorMsg : ERROR_MESSAGE,
+    errorMsg ?? ERROR_MESSAGE,
   );
 
 export const serieValidator = (errorMsg: string) =>

package/mobile/src/ui-kit/YandexMap/YandexMap.tsx

@@ -16,6 +16,7 @@ interface YandexMapProps {
   className?: string;
   zoom?: number;
   isLoad?: boolean;
+  selectedAddress?: string;
 }
 
 const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
@@ -24,57 +25,70 @@ const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
 //       Сейчас реализован поиск среди тестовых данных
 // TODO: Также выяснить что делать когда ничего не найдено
 // TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
-export const YandexMap = JSX<YandexMapProps>(({ points, className = '', zoom = 5, isLoad }) => {
-  const map = useRef<ymaps.Map | null>(null);
-
-  const yandexMaps = useYandexMaps();
-
-  useEffect(() => {
-    if (map.current) {
-      renderClusterer({ yandexMaps, map: map.current, points, isLoad });
-    } else {
-      yandexMaps?.ready(() => {
-        // Ready function may be called few times, but must be called once
-        if (map.current) {
-          renderClusterer({ yandexMaps, map: map.current, points, isLoad });
+export const YandexMap = JSX<YandexMapProps>(
+  ({ points, className = '', zoom = 5, isLoad, selectedAddress }) => {
+    const map = useRef<ymaps.Map | null>(null);
+
+    const yandexMaps = useYandexMaps();
+
+    useEffect(() => {
+      if (map.current) {
+        renderClusterer({ yandexMaps, map: map.current, points, isLoad });
+      } else {
+        yandexMaps?.ready(() => {
+          // Ready function may be called few times, but must be called once
+          if (map.current) {
+            renderClusterer({ yandexMaps, map: map.current, points, isLoad });
+
+            return;
+          }
 
-          return;
-        }
+          map.current = new yandexMaps.Map('map', {
+            center: getCenterPoint(points),
+            zoom,
+            controls: [],
+            suppressMapOpenBlock: true,
+          });
 
-        map.current = new yandexMaps.Map('map', {
-          center: getCenterPoint(points),
-          zoom,
-          controls: [],
-          suppressMapOpenBlock: true,
+          renderClusterer({ yandexMaps, map: map.current, points, isLoad });
         });
+      }
+    }, [yandexMaps, points, zoom, isLoad, selectedAddress]);
 
-        renderClusterer({ yandexMaps, map: map.current, points, isLoad });
-      });
+    useEffect(() => {
+      if (map.current && selectedAddress) {
+        yandexMaps?.geocode(selectedAddress).then((res) => {
+          const firstGeoObject = res.geoObjects.get(0);
+          const coords = firstGeoObject.geometry.getCoordinates() as number[];
+          map.current.setCenter(coords);
+          map.current.setZoom(18);
+        });
+      }
+    }, [selectedAddress]);
+
+    if (!yandexMaps) {
+      return null;
     }
-  }, [yandexMaps, points, zoom, isLoad]);
-
-  if (!yandexMaps) {
-    return null;
-  }
-
-  const zIndex = 'z-10';
-
-  return (
-    <div id="map" className={style('relative', 'w-full', className)}>
-      {isLoad ? <Loader /> : null}
-      <div
-        className={style(
-          'absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md',
-          zIndex,
-        )}
-      >
-        <ZoomButton yandexMaps={map} />
-        <ZoomButton yandexMaps={map} direction="out" />
+
+    const zIndex = 'z-10';
+
+    return (
+      <div id="map" className={style('relative', 'w-full', className)}>
+        {isLoad ? <Loader /> : null}
+        <div
+          className={style(
+            'absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md',
+            zIndex,
+          )}
+        >
+          <ZoomButton yandexMaps={map} />
+          <ZoomButton yandexMaps={map} direction="out" />
+        </div>
+        {renderUserGeolocation(map, yandexMaps, style('right-2 top-80', zIndex))}
       </div>
-      {renderUserGeolocation(map, yandexMaps, style('right-2 top-80', zIndex))}
-    </div>
-  );
-});
+    );
+  },
+);
 
 const getCenterPoint = (points?: BalloonPoints[]) => {
   const centerCoords = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.623",
+  "version": "0.14.624",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/CreditForm/creditFormStepsData.tsx

@@ -196,10 +196,10 @@ export const stepsSectionsMap: SectionsProps[][] = [
       inputs: [],
     },
     {
-      inputs: [{ fieldType: 'common', name: 'region', required: true }],
+      inputs: [{ fieldType: 'common', name: 'regionRetail', required: true }],
     },
     {
-      inputs: [{ fieldType: 'common', name: 'addressBranch', required: true }],
+      inputs: [{ fieldType: 'common', name: 'addressRetail', required: true }],
     },
     {
       title: 'Код представителя Банка',

package/src/components/CreditForm/getInitialFormState.tsx

@@ -55,8 +55,8 @@ export interface FormStateMap {
     creditInRshbCd?: string;
   };
   5: {
-    region?: string;
-    addressBranch?: string;
+    regionRetail?: string;
+    addressRetail?: string;
     bankEmployeeCode?: string;
   };
 }
@@ -116,8 +116,8 @@ const formStateMap: FormStateMap = {
     creditInRshbCd: '',
   },
   5: {
-    region: '',
-    addressBranch: '',
+    regionRetail: '',
+    addressRetail: '',
     bankEmployeeCode: '',
   },
 };

package/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import { type VNode } from '../../model/VNode';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
@@ -12,6 +12,7 @@ import { renderButtonsGroup } from './renderButtonsGroup';
 import { renderDescriptionBlock } from './renderDescriptionBlock';
 import { renderFiltrationForm, type RenderFiltrationFormOptions } from './renderFiltrationForm';
 import { renderHeading } from './renderHeading';
+import { useOfficesAtmsMapData } from './useOfficesAtmsMapData';
 import { type BalloonContent } from './YandexMapProps';
 
 const defaultEmptyFunction = () => void 0;
@@ -52,30 +53,13 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
     const onlyOffice = title?.includes('Офис');
     const [filtrationState, { field, reset }] = useForm(INITIAL_FILTRATION_STATE);
 
-    const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
-      const _filteredItems = filterItems(data, filtrationState);
-      const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
-
-      const _points = [
-        ..._filteredItems.map((_) => ({
-          type: 'offices',
-          coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-          content: getBalloon(_),
-        })),
-        ..._filteredRemoteWorkplaces.map((_: RemoteWorkplace) => ({
-          type: 'workplaces',
-          coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-          content: getBalloonRemoteWorkplaces({
-            address: _.address,
-            workScheduleDescription: _.workScheduleDescription,
-          }),
-        })),
-      ].filter((_) => _.coords && _.coords.length === 2);
-
-      const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
-
-      return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
-    }, [data, remoteWorkplaces, filtrationState]);
+    const { filteredItems, points, filteredRemoteWorkplaces, lengthItems } = useOfficesAtmsMapData({
+      data,
+      remoteWorkplaces,
+      filtrationState,
+      getBalloon,
+      getBalloonRemoteWorkplaces,
+    });
 
     const [activeButton, setActiveButton] = useState('all');
 

package/src/components/OfficesAtmsMap/useOfficesAtmsMapData.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { filterItems } from './OfficesAtmsMapLayout';
+import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { type BalloonContent } from './YandexMapProps';
+
+const defaultEmptyFunction = () => void 0;
+
+interface UseOfficesAtmsMapDataProps {
+  data: (Branch | RemoteWorkplace)[];
+  remoteWorkplaces?: (Branch | RemoteWorkplace)[];
+  filtrationState?: Record<string, boolean>;
+  getBalloon?: (item: Branch | Atm | RemoteWorkplace) => BalloonContent | undefined;
+  getBalloonRemoteWorkplaces?: (item: RemoteWorkplace) => BalloonContent | undefined;
+}
+
+export const useOfficesAtmsMapData = ({
+  data,
+  remoteWorkplaces = [],
+  filtrationState = {},
+  getBalloon = defaultEmptyFunction,
+  getBalloonRemoteWorkplaces = defaultEmptyFunction,
+}: UseOfficesAtmsMapDataProps) => {
+  const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
+    const _filteredItems = filterItems(data, filtrationState);
+    const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
+
+    const _points = [
+      ..._filteredItems.map((_) => ({
+        type: 'offices',
+        coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+        content: getBalloon(_),
+      })),
+      ..._filteredRemoteWorkplaces.map((_: RemoteWorkplace) => ({
+        type: 'workplaces',
+        coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+        content: getBalloonRemoteWorkplaces({
+          address: _.address,
+          workScheduleDescription: _.workScheduleDescription,
+        }),
+      })),
+    ].filter((_) => _.coords && _.coords.length === 2);
+
+    const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
+
+    return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
+  }, [data, remoteWorkplaces, filtrationState, getBalloon, getBalloonRemoteWorkplaces]);
+
+  return { filteredItems, points, filteredRemoteWorkplaces, lengthItems };
+};

package/src/hooks/useRegions.ts

@@ -10,6 +10,8 @@ export interface Region {
   name?: string;
   slug?: string;
   localities?: string[];
+  region?: string;
+  branches?: string[];
 }
 
 export function useRegions(url: string = REGIONS_URL): Region[] {