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

package/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/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/src/ui-kit/FormField/NameFieldDef.ts

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

package/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/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/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/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 = [