@redneckz/wildless-cms-uni-blocks 0.14.668 → 0.14.670

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

@@ -16,7 +16,6 @@ interface YandexMapProps {
   className?: string;
   zoom?: number;
   isLoad?: boolean;
-  selectedAddress?: string;
 }
 
 export const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
@@ -25,70 +24,59 @@ export const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
 //       Сейчас реализован поиск среди тестовых данных
 // TODO: Также выяснить что делать когда ничего не найдено
 // TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
-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, selectedAddress });
-      } 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;
-          }
-
-          map.current = new yandexMaps.Map('map', {
-            center: getCenterPoint(points),
-            zoom,
-            controls: [],
-            suppressMapOpenBlock: true,
-          });
+export const YandexMap = JSX<YandexMapProps>(({ points, className = '', zoom = 5, isLoad }) => {
+  const map = useRef<ymaps.Map | null>(null);
 
+  const parentDiv = useRef<HTMLElement>(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;
+        }
+
+        map.current = new yandexMaps.Map(parentDiv.current, {
+          center: getCenterPoint(points),
+          zoom,
+          controls: [],
+          suppressMapOpenBlock: true,
         });
-      }
-    }, [yandexMaps, points, zoom, isLoad, selectedAddress]);
-
-    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;
+        renderClusterer({ yandexMaps, map: map.current, points, isLoad });
+      });
     }
-
-    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))}
+  }, [yandexMaps, points, zoom, isLoad]);
+
+  if (!yandexMaps) {
+    return null;
+  }
+
+  const zIndex = 'z-10';
+
+  return (
+    <div ref={parentDiv} 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>
+  );
+});
 
 const getCenterPoint = (points?: BalloonPoints[]) => {
   const centerCoords = [

package/package.json

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

package/src/components/CreditCardForm/CreditCardForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { updateRefreshToken } from '../../api/RetailAPI/updateRefreshToken';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -25,15 +25,23 @@ const WIZARD_TITLES = [
 export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...rest }) => {
   const [step, setStep] = useState(0);
 
+  const formContainerRef = useRef<HTMLDivElement | null>(null);
+  const scrollToTop = useCallback(
+    () => formContainerRef?.current?.scrollIntoView({ behavior: 'smooth' }),
+    [formContainerRef],
+  );
+
   useEffect(updateRefreshToken, []);
 
   const handleNextStep = useCallback(() => {
     setStep((_) => Math.min(_ + 1, WIZARD_STEPS));
+    scrollToTop();
   }, []);
 
   const handlePrevStep = useCallback(() => {
     //TODO search hook - 1,
     setStep((_) => Math.max(_ - 1, 0));
+    scrollToTop();
   }, []);
 
   const sections = useMemo(() => stepsSectionsMap[step], [step]);
@@ -42,7 +50,7 @@ export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...re
 
   return (
     <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-0" {...rest}>
-      <div className="container grid grid-cols-12">
+      <div ref={formContainerRef} className="container grid grid-cols-12">
         {isFormFinished ? null : (
           <CreditCardFormProgress
             stepsTitles={WIZARD_TITLES}

package/src/components/CreditForm/CreditForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { updateRefreshToken } from '../../api/RetailAPI/updateRefreshToken';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -26,15 +26,23 @@ const WIZARD_TITLES = [
 export const CreditForm = JSX<CreditFormWizardProps>(({ className, ...rest }) => {
   const [step, setStep] = useState(0);
 
+  const formContainerRef = useRef<HTMLDivElement | null>(null);
+  const scrollToTop = useCallback(
+    () => formContainerRef?.current?.scrollIntoView({ behavior: 'smooth' }),
+    [formContainerRef],
+  );
+
   useEffect(updateRefreshToken, []);
 
   const handleNextStep = useCallback(() => {
     setStep((_) => Math.min(_ + 1, WIZARD_STEPS));
+    scrollToTop();
   }, []);
 
   const handlePrevStep = useCallback(() => {
     //TODO search hook - 1,
     setStep((_) => Math.max(_ - 1, 0));
+    scrollToTop();
   }, []);
 
   const sections = useMemo(() => stepsSectionsMap[step], [step]);
@@ -44,7 +52,7 @@ export const CreditForm = JSX<CreditFormWizardProps>(({ className, ...rest }) =>
 
   return (
     <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-0" {...rest}>
-      <div className="container grid grid-cols-12">
+      <div ref={formContainerRef} className="container grid grid-cols-12">
         {isStartStep || isFormFinished ? null : (
           <CreditFormProgress stepsTitles={WIZARD_TITLES} step={step} totalSteps={WIZARD_STEPS} />
         )}

package/src/ui-kit/FormField/Fields/AddressRetailField.tsx

@@ -16,6 +16,7 @@ export const AddressRetailField = JSX<CustomFieldProps>(({ field, input }) => {
   const { data } = useLeadFormData('REGION_RF');
 
   const regionValue = field('regionRetail')?.value || {};
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const fieldBranch = field('addressRetail');
 
   useEffect(() => {
@@ -56,12 +57,7 @@ export const AddressRetailField = JSX<CustomFieldProps>(({ field, input }) => {
       />
       <div className="h-[600px]">
         <ClientOnly>
-          <YandexMap
-            points={points}
-            isLoad={!data}
-            className="h-full"
-            selectedAddress={fieldBranch?.value?.text}
-          />
+          <YandexMap points={points} isLoad={!data} className="h-full" />
         </ClientOnly>
       </div>
     </div>

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

@@ -67,7 +67,7 @@ export const emailValidator = (errorMsg: string) =>
   validator((_: string) => emailValidate(_))(errorMsg);
 
 const addressDaDataValidate = (address: Address) =>
-  Boolean(address.qc === '0' && address.qcComplete === '0' && address.qcHouse === '2');
+  Boolean(address.region && address.city && address.house);
 
 export const addressDaDataValidator = () =>
   validator(addressDaDataValidate)('Укажите регион, город/населенный пункт, улицу, дом, квартиру');

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

@@ -16,7 +16,6 @@ interface YandexMapProps {
   className?: string;
   zoom?: number;
   isLoad?: boolean;
-  selectedAddress?: string;
 }
 
 export const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
@@ -25,70 +24,59 @@ export const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
 //       Сейчас реализован поиск среди тестовых данных
 // TODO: Также выяснить что делать когда ничего не найдено
 // TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
-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, selectedAddress });
-      } 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;
-          }
-
-          map.current = new yandexMaps.Map('map', {
-            center: getCenterPoint(points),
-            zoom,
-            controls: [],
-            suppressMapOpenBlock: true,
-          });
+export const YandexMap = JSX<YandexMapProps>(({ points, className = '', zoom = 5, isLoad }) => {
+  const map = useRef<ymaps.Map | null>(null);
 
+  const parentDiv = useRef<HTMLElement>(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;
+        }
+
+        map.current = new yandexMaps.Map(parentDiv.current, {
+          center: getCenterPoint(points),
+          zoom,
+          controls: [],
+          suppressMapOpenBlock: true,
         });
-      }
-    }, [yandexMaps, points, zoom, isLoad, selectedAddress]);
-
-    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;
+        renderClusterer({ yandexMaps, map: map.current, points, isLoad });
+      });
     }
-
-    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))}
+  }, [yandexMaps, points, zoom, isLoad]);
+
+  if (!yandexMaps) {
+    return null;
+  }
+
+  const zIndex = 'z-10';
+
+  return (
+    <div ref={parentDiv} 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>
+  );
+});
 
 const getCenterPoint = (points?: BalloonPoints[]) => {
   const centerCoords = [