@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.1

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

@@ -3,20 +3,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import ymaps from 'yandex-maps';
+import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
-import { MockPoints, mockPoints } from './mockPoints';
+import { ZoomButton } from './ZoomButton';
 import { renderClusterer } from './renderClusterer';
 import { renderOpenMap } from './renderOpenMap';
-import { renderSearchField } from './renderSearchField';
 import { renderUserGeolocation } from './renderUserGeolocation';
 import { useYandexMaps } from './useYandexMaps';
-import { ZoomButton } from './ZoomButton';
 
 interface YandexMapProps {
-  points: number[][];
+  points?: number[][];
   className?: string;
   zoom?: number;
-  showSearchField?: boolean;
 }
 
 const FULLSCREEN_STYLES = {
@@ -30,91 +28,84 @@ const FULLSCREEN_STYLES = {
   other: 'select-none cursor-pointer',
 };
 
+const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
+
 // TODO: Поле для поиска: невыяснено среди каких данных делать поиск (искать в имени офиса, в адресе, метро и т.д.).
 //       Сейчас реализован поиск среди тестовых данных
 // TODO: Также выяснить что делать когда ничего не найдено
 // TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
-export const YandexMap = JSX<YandexMapProps>(
-  ({ points, className = '', zoom = 5, showSearchField = false }) => {
-    const map = useRef<ymaps.Map | null>(null);
-
-    const yandexMaps = useYandexMaps();
-
-    const [isFullScreen, setIsFullScreen] = useState();
-    const [pointsToRender, setPointsToRender] = useState<number[][]>(normalizePoints(mockPoints));
-
-    const pointsCenter = getCenterPoint(points);
-
-    useEffect(() => {
-      if (!map?.current) {
-        yandexMaps?.ready(() => {
-          map.current = new yandexMaps.Map('map', {
-            center: pointsCenter,
-            zoom,
-            controls: [],
-            suppressMapOpenBlock: true,
-          });
-          renderClusterer(yandexMaps, map.current, pointsToRender);
-        });
-      }
-    }, [yandexMaps, map, pointsToRender]);
+export const YandexMap = JSX<YandexMapProps>(({ points, className = '', zoom = 5 }) => {
+  const map = useRef<ymaps.Map | null>(null);
 
-    useEffect(() => {
-      if (map.current && pointsToRender && yandexMaps) {
-        const newPoints = pointsToRender.length < 1 ? normalizePoints(mockPoints) : pointsToRender;
-        renderClusterer(yandexMaps, map.current, newPoints);
-      }
-    }, [map, pointsToRender, yandexMaps]);
+  const yandexMaps = useYandexMaps();
+
+  const [isFullScreen, setIsFullScreen] = useState();
 
-    if (!yandexMaps) {
-      return null;
+  const pointsCenter = points ? getCenterPoint(points) : DEFAULT_CENTER_COORDS;
+
+  useEffect(() => {
+    if (!map?.current) {
+      yandexMaps?.ready(() => {
+        map.current = new yandexMaps.Map('map', {
+          center: pointsCenter,
+          zoom,
+          controls: [],
+          suppressMapOpenBlock: true,
+        });
+
+        renderClusterer(yandexMaps, map.current, points);
+      });
     }
 
-    const toggleFullscreen = () => {
-      const container = map.current.container;
-      if (!isFullScreen) {
-        container.enterFullscreen();
-      } else {
-        container.exitFullscreen();
+    if (map.current && yandexMaps) {
+      renderClusterer(yandexMaps, map.current, points);
+
+      if (!points?.length) {
+        map.current.setCenter(DEFAULT_CENTER_COORDS);
       }
-      setIsFullScreen(container.isFullscreen());
-    };
+    }
+  }, [yandexMaps, map, points]);
+
+  if (!yandexMaps) {
+    return null;
+  }
+
+  const toggleFullscreen = () => {
+    const container = map.current.container;
+    if (!isFullScreen) {
+      container.enterFullscreen();
+    } else {
+      container.exitFullscreen();
+    }
+    setIsFullScreen(container.isFullscreen());
+  };
 
-    const zIndex = isFullScreen ? 'z-[100000]' : 'z-10';
+  const zIndex = isFullScreen ? 'z-[100000]' : 'z-10';
 
-    const updatePointsToRender = (newPoints: MockPoints | null) => {
-      if (newPoints) {
-        const normalizedPoints = normalizePoints(newPoints);
-        setPointsToRender(normalizedPoints);
-      }
-    };
-
-    return (
-      <div id="map" className={`${isFullScreen ? '' : 'relative'} w-full ${className}`}>
-        <div className={`absolute flex left-2 top-4 w-1/2 ${zIndex}`}>
-          {showSearchField
-            ? renderSearchField(mockPoints, yandexMaps, updatePointsToRender)
-            : renderOpenMap(pointsCenter)}
-        </div>
-        <div
-          className={`${Object.values(FULLSCREEN_STYLES).join(
-            ' ',
-          )} ${zIndex} right-2 top-4 bg-white`}
-          onClick={toggleFullscreen}
-        >
-          <Icon name="FullScreenIcon" width="16" height="16" />
-        </div>
-        <div
-          className={`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.current, yandexMaps, `right-2 top-80 ${zIndex}`)}
+  return (
+    <div id="map" className={style(!isFullScreen && 'relative', 'w-full', className)}>
+      <div className={style('absolute flex left-2 top-4 w-1/2', zIndex)}>
+        {renderOpenMap(pointsCenter)}
+      </div>
+      <div
+        className={style(Object.values(FULLSCREEN_STYLES), zIndex, 'right-2 top-4 bg-white')}
+        onClick={toggleFullscreen}
+      >
+        <Icon name="FullScreenIcon" width="16" height="16" />
       </div>
-    );
-  },
-);
+      <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.current, yandexMaps, style('right-2 top-80', zIndex))}
+    </div>
+  );
+});
 
 const getCenterPoint = (points: number[][]) => [
   getArraySumAndAverage(mapByIndex(points, 0)),
@@ -123,6 +114,5 @@ const getCenterPoint = (points: number[][]) => [
 
 const mapByIndex = (arr: number[][], index: number) => arr.map((a) => a[index]);
 
-const getArraySumAndAverage = (arr: number[][]) => arr.reduce((a, b) => a + b) / arr.length;
-
-const normalizePoints = (points: number[][]) => (points ? points.map((_) => _.coords) : null);
+const getArraySumAndAverage = (arr: number[][]) =>
+  arr.length && arr.reduce((a, b) => a + b) / arr.length;

package/mobile/src/ui-kit/YandexMap/renderClusterer.ts

@@ -13,7 +13,7 @@ export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points
   const clusterer = new yandexMaps.Clusterer({
     clusterIcons: [
       {
-        href: 'icons/MapMarkerClusterIcon.svg',
+        href: '/icons/MapMarkerClusterIcon.svg',
         size: [78, 84],
         offset: [-35, -50],
       },
@@ -30,7 +30,7 @@ export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points
         {},
         {
           iconLayout: 'default#image',
-          iconImageHref: 'icons/MapMarkerSingleIcon.svg',
+          iconImageHref: '/icons/MapMarkerSingleIcon.svg',
           iconImageSize: [78, 84],
           iconImageOffset: [-35, -50],
         },

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

@@ -1,4 +1,5 @@
 import ymaps from 'yandex-maps';
+import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import type { MockPoints } from './mockPoints';
 
@@ -32,7 +33,7 @@ export const renderSearchField = (
   };
 
   return (
-    <div className={`${Object.values(styles).join(' ')} bg-white py-s pl-5xl pr-m w-full`}>
+    <div className={style(Object.values(styles), 'bg-white py-s pl-5xl pr-m w-full')}>
       <Icon
         name="LoupeIcon"
         iconVersion="black"

package/mobile/src/utils/fetchJSON.ts

@@ -20,5 +20,5 @@ export async function fetchJSONUnsafe<R = unknown>(url: string, options?: Reques
     },
   });
 
-  return await response.json();
+  return response.json();
 }

package/mobile/src/utils/fetchMultitudeJSON.ts

@@ -0,0 +1,9 @@
+import { fetchJSON } from './fetchJSON';
+
+export async function fetchMultitudeJSON<R = unknown>(
+  ...urls: string[]
+): Promise<Awaited<R | null>[]> {
+  const fetchPromises = urls.map((url) => fetchJSON<R>(url));
+
+  return await Promise.all(fetchPromises);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.13.24",
+  "version": "0.14.1",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -121,7 +121,9 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@redneckz/uni-jsx": "^2.3.4",
+    "@redneckz/json-ref": "^0.0.2",
+    "@redneckz/uni-jsx": "^2.6.0",
+    "@tailwindcss/container-queries": "^0.1.0",
     "@types/json-schema": "^7.0.11",
     "glob": "^8.0.3",
     "rehype-parse": "^8.0.4",
@@ -130,7 +132,6 @@
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
     "sharp": "^0.30.6",
-    "@tailwindcss/container-queries": "^0.1.0",
     "unified": "^10.1.2"
   },
   "devDependencies": {

package/src/EventBus/defaultEventBus.ts

@@ -1,11 +1,13 @@
 import type { TabActivationEvent } from '../components/Tabs/TabActivationEvent';
-import { RegionData } from '../hooks/useLocation';
+import type { RegionData } from '../hooks/useLocation';
 import type { DialogAction } from '../ui-kit/DialogManager/DialogAction';
+import type { PopupAction } from '../ui-kit/PopupManager/PopupAction';
 import { EventBus } from './EventBus';
 
 interface GlobalEventMap {
   location: RegionData;
   dialog: DialogAction;
+  popup: PopupAction;
   tab: TabActivationEvent;
 }
 

package/src/components/ApplicationForm/AcquiringFormState.ts

@@ -1,4 +1,4 @@
-import type { Option } from '../../ui-kit/Select/Select';
+import type { Option } from '../../ui-kit/Select/Option';
 
 export interface AcquiringFormState {
   acquiringType?: Option;

package/src/components/ApplicationForm/ApplicationForm.fixture.mobile.tsx

@@ -1,5 +1,6 @@
 import '../../setup-fixture';
 
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { ApplicationForm } from './ApplicationForm';
 import type { ApplicationFormBlockDef, ApplicationFormContent } from './ApplicationFormContent';
 
@@ -48,31 +49,37 @@ export default {
   credit: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormCredit} />
+      <PopupManager />
     </div>
   ),
   acquiring: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormAcquiring} />
+      <PopupManager />
     </div>
   ),
   'business-card': (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormBusinessCard} />
+      <PopupManager />
     </div>
   ),
   deposit: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormDeposit} />
+      <PopupManager />
     </div>
   ),
   wed: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormWed} />
+      <PopupManager />
     </div>
   ),
   'grant-support': (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormGrantSupport} />
+      <PopupManager />
     </div>
   ),
 };

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -1,5 +1,6 @@
 import '../../setup-fixture';
 
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { ApplicationForm } from './ApplicationForm';
 import type { ApplicationFormBlockDef, ApplicationFormContent } from './ApplicationFormContent';
 
@@ -48,31 +49,37 @@ export default {
   credit: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormCredit} />
+      <PopupManager />
     </div>
   ),
   acquiring: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormAcquiring} />
+      <PopupManager />
     </div>
   ),
   'business-card': (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormBusinessCard} />
+      <PopupManager />
     </div>
   ),
   deposit: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormDeposit} />
+      <PopupManager />
     </div>
   ),
   wed: (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormWed} />
+      <PopupManager />
     </div>
   ),
   'grant-support': (
     <div className="container grid grid-cols-12">
       <ApplicationForm className="col-span-12" {...ApplicationFormGrantSupport} />
+      <PopupManager />
     </div>
   ),
 };

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -15,15 +15,9 @@ const API = CorporateLeadAPI();
 export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   const { className, formBlock, ...rest } = props;
 
-  // const type = formBlock?.formType;
-  // if (!type || !(type in EmbeddableForms)) {
-  //   return null;
-  // }
-  // const EmbeddedForm = EmbeddableForms[type];
-
   const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
-  const handleSubmit = useCallback(async (data: Record<string, string>) => {
+  const handleSubmit = useCallback(async (data: Record<string, any>) => {
     const status = (await API.send(data)) ? 'OK' : 'Fail';
     setResponseType(status);
 
@@ -34,11 +28,9 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container max-w-[978px] space-y-lg">
         {formBlock?.title ? (
-          <Heading headingType="h3" title={formBlock.title} className="sm:text-center" />
+          <Heading headingType="h3" title={formBlock.title} className="@xl:text-center" />
         ) : null}
-        {/* <EmbeddedForm {...formBlock} onSubmit={handleSubmit} /> */}
         {formBlock ? renderEmbeddedForm(formBlock, handleSubmit) : null}
-        {/* {COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit })} */}
         {responseType ? <ResponseNotification responseType={responseType} /> : null}
       </div>
     </BlockWrapper>

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -51,7 +51,7 @@ export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
           fullName,
           inn,
           name,
-          phone,
+          phone: phone.replace(/[^+\d]/g, ''),
         });
     },
     [onSubmit],
@@ -63,9 +63,9 @@ export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
 
   return (
     <form className="container space-y-m" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Вид эквайринга и регион" className="sm:text-center" />
+      <Heading headingType="h6" title="Вид эквайринга и регион" className="@xl:text-center" />
       {renderAcquiringRegion({ regions, field })}
-      <Heading headingType="h6" title="Данные организации" className="sm:text-center" />
+      <Heading headingType="h6" title="Данные организации" className="@xl:text-center" />
       {renderAcquiringDataOrganization(field)}
       {renderSlideCheckboxes(field)}
       {renderSubmitButton(button)}

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -39,9 +39,9 @@ export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) =>
           typeForm: 'bcrd',
           region: region?.text || '',
           name,
-          phone,
           inn,
           mail,
+          phone: phone.replace(/[^+\d]/g, ''),
         });
     },
     [onSubmit],

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -49,7 +49,7 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>(({ button, link,
           fullName,
           inn,
           name,
-          phone,
+          phone: phone.replace(/[^+\d]/g, ''),
           mail,
           region: region?.text || '',
           department: department?.text || '',
@@ -66,11 +66,11 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>(({ button, link,
 
   return (
     <form className="container space-y-m" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Параметры" className="sm:text-center" />
+      <Heading headingType="h6" title="Параметры" className="@xl:text-center" />
       {renderCreditParameters(field)}
-      <Heading headingType="h6" title="Данные организации" className="sm:text-center" />
+      <Heading headingType="h6" title="Данные организации" className="@xl:text-center" />
       {renderCreditDataOrganization(field)}
-      <Heading headingType="h6" title="Офис банка" className="sm:text-center" />
+      <Heading headingType="h6" title="Офис банка" className="@xl:text-center" />
       {renderRegionDepartment({ regions, branches, field })}
       {renderSubmitButton(button)}
       <Footnote link={link} />

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -34,7 +34,7 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
         onSubmit({
           typeForm: 'dpst',
           name,
-          phone,
+          phone: phone.replace(/[^+\d]/g, ''),
         });
     },
     [onSubmit],
@@ -47,7 +47,7 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
       <Heading
         headingType="h6"
         title="Оставьте заявку и мы ответим на любые вопросы по депозитам"
-        className="sm:text-center mb-m"
+        className="@xl:text-center mb-m"
       />
       <div className="max-w-[560px] m-auto space-y-s">
         <InputControl
@@ -61,7 +61,7 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
           {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
-      <div className="flex justify-between flex-col-reverse sm:items-center sm:flex-row max-w-[560px] m-auto">
+      <div className="flex justify-between flex-col-reverse @xl:items-center @xl:flex-row max-w-[560px] m-auto">
         <div className="flex-1">
           <Footnote link={link} />
         </div>

package/src/components/ApplicationForm/ApplicationFormGrantSupport.tsx

@@ -25,7 +25,7 @@ export const ApplicationFormGrantSupport = JSX<ApplicationFormsProps>((props) =>
   const regionHref = regions?.find((_) => _.name === region.key)?.href;
 
   return (
-    <div className="container space-y-s sm:space-y-lg">
+    <div className="container space-y-s @xl:space-y-lg">
       {regions ? (
         <SelectControl
           label="Ваш регион"
@@ -40,7 +40,7 @@ export const ApplicationFormGrantSupport = JSX<ApplicationFormsProps>((props) =>
           <Button
             href={regionHref}
             target="_blank"
-            className={style('p-m w-full sm:w-auto', buttonStyle)}
+            className={style('p-m w-full @xl:w-auto', buttonStyle)}
           >
             {button?.text ? button.text : 'Перейти'}
           </Button>

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -4,78 +4,95 @@ import { useForm } from '../../hooks/useForm';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
+import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
+import type { WedFormState } from './WedFormState';
 import { renderContacts } from './renderContacts';
 import { renderQuestionsInterested } from './renderQuestionsInterested';
 import { renderSubmitButton } from './renderSubmitButton';
 import { renderWedDataOrganization } from './renderWedDataOrganization';
-import { defaultValidator, nameValidator, phoneValidator } from './validators';
-import type { WedFormState } from './WedFormState';
+import { renderWedTextarea } from './renderWedTextarea';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 const initialFormState: WedFormState = {
   fullName: '',
   name: '',
   phone: '',
-  mail: '',
-  currencyControl: false,
-  documentaryOperations: false,
-  conversionOperations: false,
+  inn: '',
+  vedTypes: 'currencyControl',
   text: '',
 };
 
-const webValidator = objectValidator({
+const defaultValidators = {
   fullName: defaultValidator,
   name: nameValidator,
   phone: phoneValidator,
+};
+
+const wedValidator = objectValidator({
+  ...defaultValidators,
   mail: defaultValidator,
 });
 
+const wedValidatorCurrencyControl = objectValidator({
+  ...defaultValidators,
+  inn: innValidator,
+  region: defaultValidator,
+});
+
+const isCurrencyControl = (vedTypes: string) => vedTypes === 'currencyControl';
+
+const getValidator = (vedTypes: string) =>
+  isCurrencyControl(vedTypes) ? wedValidatorCurrencyControl : wedValidator;
+
+const getVedTypes = (vedTypes: string) => ({
+  currencyControl: vedTypes === 'currencyControl',
+  documentOperations: vedTypes === 'documentOperations',
+  conversionTransactions: vedTypes === 'conversionTransactions',
+  otherIssues: vedTypes === 'otherIssues',
+});
+
 export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
   const { button, link, onSubmit } = props;
 
   const handleSubmit = useCallback(
     (formState: WedFormState) => {
-      const {
+      const { fullName, name, phone, mail, inn, region, vedTypes, text } = formState;
+
+      const data = {
+        typeForm: 'KVED',
         fullName,
         name,
-        phone,
-        mail,
-        currencyControl,
-        documentaryOperations,
-        conversionOperations,
+        phone: phone.replace(/[^+\d]/g, ''),
         text,
-      } = formState;
+        vedTypes: getVedTypes(vedTypes),
+        PartnerComments: text,
+        ...(!isCurrencyControl(vedTypes) ? { mail } : { inn, region: region?.text || '' }),
+      };
 
-      isValidationSuccess(webValidator(formState)) &&
-        onSubmit({
-          typeForm: 'kved',
-          fullName,
-          name,
-          phone,
-          mail,
-          partnerComments: `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`,
-        });
+      isValidationSuccess(getValidator(vedTypes)(formState)) && onSubmit(data);
     },
     [onSubmit],
   );
 
   const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+  const regions = useGetRegions();
 
   return (
     <form className="container space-y-m" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Данные организации" className="sm:text-center" />
-      {renderWedDataOrganization(field)}
-      <Heading headingType="h6" title="Интересующий вопрос" className="sm:text-center" />
       {renderQuestionsInterested(field)}
-      <div className="flex flex-col gap-m border-b border-main-divider pb-lg sm:items-center sm:flex-row sm:pb-4xl">
+      <Heading headingType="h6" title="Данные организации" className="@xl:text-center" />
+      {renderWedDataOrganization(field, regions)}
+      {renderWedTextarea(field)}
+      <div className="flex flex-col gap-m border-b border-main-divider pb-lg @xl:items-center @xl:flex-row @xl:pb-4xl">
         {renderSubmitButton(button)}
         <Footnote link={link} />
       </div>
       <Heading
         headingType="h6"
         title="Или свяжитесь с нами удобным способом"
-        className="sm:text-center"
+        className="@xl:text-center"
       />
       {renderContacts()}
     </form>

package/src/components/ApplicationForm/BusinessCardFormState.ts

@@ -1,4 +1,4 @@
-import type { Option } from '../../ui-kit/Select/Select';
+import type { Option } from '../../ui-kit/Select/Option';
 
 export interface BusinessCardFormState {
   region?: Option;

package/src/components/ApplicationForm/CreditFormState.ts

@@ -1,4 +1,4 @@
-import type { Option } from '../../ui-kit/Select/Select';
+import type { Option } from '../../ui-kit/Select/Option';
 
 export interface CreditFormState {
   amount: number;