@redneckz/wildless-cms-uni-blocks 0.14.671 → 0.14.673

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

@@ -1,15 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getCardTypes, type CardTypeData } from '../../../api/RetailAPI/getCardTypes';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { SelectField } from '../SelectField';
 
 export const CardCategoryField = JSX<CustomFieldProps>(({ field, input }) => {
-  const { data: cardCategory } = useLeadFormData('CARD_TYPE');
+  const [cardTypes, setCardTypes] = useState<CardTypeData[]>([]);
+  const selectedPaymentSystem = field('paymentSystem').value;
+
+  useEffect(() => {
+    (async () => {
+      const fetchedCardTypes = await getCardTypes(selectedPaymentSystem as string);
+      setCardTypes(fetchedCardTypes);
+    })();
+  }, [selectedPaymentSystem]);
 
   return (
     <SelectField
       field={field}
-      source={cardCategory}
+      source={cardTypes}
       label="Категория карты"
       fieldName="cardCategory"
       input={input}

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

@@ -1,23 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getPaymentSystems } from '../../../api/RetailAPI/getPaymentSystems';
 import { type RadioButtonItem } from '../../RadioButtonGroup/RadioButtonGroup';
 import { RadioButtonGroupControl } from '../../RadioButtonGroup/RadioButtonGroupControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const PAYMENT_SYSTEM_TYPES: RadioButtonItem[] = [
-  { id: 'mir', text: 'Карта МИР' },
-  { id: 'union_pay', text: 'UnionPay' },
-];
-
 export const PaymentSystemField = JSX<CustomFieldProps>(({ field, input }) => {
   const { value, onChange } = field('paymentSystem');
 
+  const [paymentSystemOptions, setPaymentSystemOptions] = useState<RadioButtonItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const fetchedPaymentSystems = await getPaymentSystems();
+      setPaymentSystemOptions(fetchedPaymentSystems || []);
+    })();
+  }, []);
+
   return (
     <RadioButtonGroupControl
       label="Платежная система"
       orientation="horizontal"
-      items={PAYMENT_SYSTEM_TYPES}
+      items={paymentSystemOptions}
       value={value}
       onChange={(_) => onChange?.(_)}
       {...getValidation(field('paymentSystem'), validatorObj.paymentSystem, input?.required)}

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

@@ -16,6 +16,7 @@ interface YandexMapProps {
   className?: string;
   zoom?: number;
   isLoad?: boolean;
+  selectedAddress?: string;
 }
 
 export const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
@@ -24,59 +25,71 @@ export 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);
+export const YandexMap = JSX<YandexMapProps>(
+  ({ points, className = '', zoom = 5, isLoad, selectedAddress }) => {
+    const map = useRef<ymaps.Map | null>(null);
 
-  const parentDiv = useRef<HTMLElement>(null);
+    const parentDiv = useRef<HTMLElement>(null);
 
-  const yandexMaps = useYandexMaps();
+    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;
-        }
+    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,
+          });
 
-        map.current = new yandexMaps.Map(parentDiv.current, {
-          center: getCenterPoint(points),
-          zoom,
-          controls: [],
-          suppressMapOpenBlock: true,
+          renderClusterer({ yandexMaps, map: map.current, points, isLoad });
         });
+      }
+
+      // zoom к выбранному отделению банка в рамках задачи по retail
+      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);
+        });
+      }
+    }, [yandexMaps, points, zoom, isLoad, selectedAddress]);
 
-        renderClusterer({ yandexMaps, map: map.current, points, isLoad });
-      });
+    if (!yandexMaps) {
+      return null;
     }
-  }, [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" />
+
+    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>
-      {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.671",
+  "version": "0.14.673",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/api/RetailAPI/doRequest.ts

@@ -21,7 +21,7 @@ export async function doRequest(
   method: 'POST' | 'GET' | 'PUT',
   body?: any,
 ): Promise<Response> {
-  return await fetch(`${API_BASE_URI}${url}`, {
+  return globalThis?.fetch?.(`${API_BASE_URI}${url}`, {
     method,
     headers: {
       'Content-Type': 'application/json',

package/src/api/RetailAPI/getCardTypes.ts

@@ -0,0 +1,20 @@
+import { doRequest } from './doRequest';
+
+export type CardTypeData = {
+  type: string;
+  key: string;
+  value: string;
+  displayOrder: number;
+  description: string;
+};
+
+export const getCardTypes = async (paymentSystemType: string) => {
+  const response: Response = await doRequest('/dictionaryFiltered', 'POST', {
+    type: 'CARD_TYPE',
+    presets: { paymentSystemType, creditProgramId: 13 },
+  });
+
+  const data: CardTypeData[] = await response?.json();
+
+  return data;
+};

package/src/api/RetailAPI/getPaymentSystems.ts

@@ -0,0 +1,21 @@
+import { doRequest } from './doRequest';
+
+type PaymentSystemResponse = {
+  paymentSystems?: {
+    name: string;
+    type: string;
+  }[];
+};
+
+export const getPaymentSystems = async () => {
+  const response: Response = await doRequest('/public-data/creditProgramConditions', 'POST', {
+    creditProgramId: 13,
+  });
+
+  const data: PaymentSystemResponse = await response?.json();
+
+  return data?.paymentSystems?.map((paymentSystem) => ({
+    id: paymentSystem.type,
+    text: paymentSystem.name,
+  }));
+};

package/src/components/CreditCardForm/formStateMap.tsx

@@ -1,9 +1,8 @@
-import { PAYMENT_SYSTEM_TYPES } from '../../ui-kit/FormField/Fields/PaymentSystemField';
 import { type FormState } from '../ApplicationLeadForm/getInitialFormState';
 
 export const formStateMap: Partial<FormState>[] = [
   {
-    paymentSystem: PAYMENT_SYSTEM_TYPES[0].id,
+    paymentSystem: '',
     currency: 'rub',
     codeWord: '',
   },

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

@@ -56,7 +56,12 @@ export const AddressRetailField = JSX<CustomFieldProps>(({ field, input }) => {
       />
       <div className="h-[600px]">
         <ClientOnly>
-          <YandexMap points={points} isLoad={!data} className="h-full" />
+          <YandexMap
+            points={points}
+            isLoad={!data}
+            className="h-full"
+            selectedAddress={fieldBranch?.value?.text}
+          />
         </ClientOnly>
       </div>
     </div>

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

@@ -1,15 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getCardTypes, type CardTypeData } from '../../../api/RetailAPI/getCardTypes';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { SelectField } from '../SelectField';
 
 export const CardCategoryField = JSX<CustomFieldProps>(({ field, input }) => {
-  const { data: cardCategory } = useLeadFormData('CARD_TYPE');
+  const [cardTypes, setCardTypes] = useState<CardTypeData[]>([]);
+  const selectedPaymentSystem = field('paymentSystem').value;
+
+  useEffect(() => {
+    (async () => {
+      const fetchedCardTypes = await getCardTypes(selectedPaymentSystem as string);
+      setCardTypes(fetchedCardTypes);
+    })();
+  }, [selectedPaymentSystem]);
 
   return (
     <SelectField
       field={field}
-      source={cardCategory}
+      source={cardTypes}
       label="Категория карты"
       fieldName="cardCategory"
       input={input}

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

@@ -1,23 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getPaymentSystems } from '../../../api/RetailAPI/getPaymentSystems';
 import { type RadioButtonItem } from '../../RadioButtonGroup/RadioButtonGroup';
 import { RadioButtonGroupControl } from '../../RadioButtonGroup/RadioButtonGroupControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const PAYMENT_SYSTEM_TYPES: RadioButtonItem[] = [
-  { id: 'mir', text: 'Карта МИР' },
-  { id: 'union_pay', text: 'UnionPay' },
-];
-
 export const PaymentSystemField = JSX<CustomFieldProps>(({ field, input }) => {
   const { value, onChange } = field('paymentSystem');
 
+  const [paymentSystemOptions, setPaymentSystemOptions] = useState<RadioButtonItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const fetchedPaymentSystems = await getPaymentSystems();
+      setPaymentSystemOptions(fetchedPaymentSystems || []);
+    })();
+  }, []);
+
   return (
     <RadioButtonGroupControl
       label="Платежная система"
       orientation="horizontal"
-      items={PAYMENT_SYSTEM_TYPES}
+      items={paymentSystemOptions}
       value={value}
       onChange={(_) => onChange?.(_)}
       {...getValidation(field('paymentSystem'), validatorObj.paymentSystem, input?.required)}

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

@@ -16,6 +16,7 @@ interface YandexMapProps {
   className?: string;
   zoom?: number;
   isLoad?: boolean;
+  selectedAddress?: string;
 }
 
 export const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
@@ -24,59 +25,71 @@ export 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);
+export const YandexMap = JSX<YandexMapProps>(
+  ({ points, className = '', zoom = 5, isLoad, selectedAddress }) => {
+    const map = useRef<ymaps.Map | null>(null);
 
-  const parentDiv = useRef<HTMLElement>(null);
+    const parentDiv = useRef<HTMLElement>(null);
 
-  const yandexMaps = useYandexMaps();
+    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;
-        }
+    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,
+          });
 
-        map.current = new yandexMaps.Map(parentDiv.current, {
-          center: getCenterPoint(points),
-          zoom,
-          controls: [],
-          suppressMapOpenBlock: true,
+          renderClusterer({ yandexMaps, map: map.current, points, isLoad });
         });
+      }
+
+      // zoom к выбранному отделению банка в рамках задачи по retail
+      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);
+        });
+      }
+    }, [yandexMaps, points, zoom, isLoad, selectedAddress]);
 
-        renderClusterer({ yandexMaps, map: map.current, points, isLoad });
-      });
+    if (!yandexMaps) {
+      return null;
     }
-  }, [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" />
+
+    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>
-      {renderUserGeolocation(map, yandexMaps, style('right-2 top-80', zIndex))}
-    </div>
-  );
-});
+    );
+  },
+);
 
 const getCenterPoint = (points?: BalloonPoints[]) => {
   const centerCoords = [