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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.13.24",
+  "version": "0.14.0",
   "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

@@ -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/ApplicationFormCredit.tsx

@@ -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

@@ -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

@@ -6,76 +6,93 @@ import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
 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';
+import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 
 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,
         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;

package/src/components/ApplicationForm/WedFormState.ts

@@ -1,10 +1,12 @@
+import type { Option } from '../../ui-kit/Select/Option';
+
 export interface WedFormState {
   fullName: string;
   name: string;
   phone: string;
-  mail: string;
-  currencyControl: boolean;
-  documentaryOperations: boolean;
-  conversionOperations: boolean;
+  vedTypes: string;
   text: string;
+  region?: Option;
+  mail?: string;
+  inn?: string;
 }

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

@@ -0,0 +1,31 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { AcquiringFormState } from './AcquiringFormState';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
+
+export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<AcquiringFormState>) => (
+  <div className="space-y-s">
+    <InputControl
+      className="shrink-0 w-full"
+      label="Наименование организации"
+      {...withValidator(field('fullName'), defaultValidator)}
+    />
+    <InputControl
+      className="shrink-0 w-full"
+      label="ИНН"
+      {...withValidator(field('inn'), innValidator)}
+    />
+    <InputControl
+      className="shrink-0 w-full"
+      label="Контактное лицо"
+      {...withValidator(field('name'), nameValidator)}
+    />
+    <PhoneInputControl
+      className="shrink-0 w-full"
+      label="Телефон"
+      {...withValidator(field('phone'), phoneValidator)}
+    />
+  </div>
+);

package/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

@@ -6,8 +6,8 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<AcquiringFormState>) => (
-  <div className="sm:flex sm:justify-between sm:gap-lg">
-    <div className="sm:w-1/2 space-y-s">
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="Наименование организации"
@@ -19,7 +19,7 @@ export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<Acqui
         {...withValidator(field('name'), nameValidator)}
       />
     </div>
-    <div className="sm:w-1/2 space-y-s">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="ИНН"

package/src/components/ApplicationForm/renderAcquiringRegion.tsx

@@ -12,8 +12,8 @@ interface AcquiringRegionProps {
 }
 
 export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps) => (
-  <div className="border-b border-b-main-divider sm:border-none sm:flex sm:justify-between gap-lg ">
-    <div className="sm:w-1/2">
+  <div className="border-b border-b-main-divider @xl:border-none @xl:flex @xl:justify-between gap-lg ">
+    <div className="@xl:w-1/2">
       <SelectControl
         label="Вид эквайринга"
         placeholder="Выберите эквайринг"
@@ -21,7 +21,7 @@ export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps)
         {...withValidator(field('acquiringType'), defaultValidator)}
       />
     </div>
-    <div className="sm:w-1/2">
+    <div className="@xl:w-1/2">
       <SelectControl
         label="Адрес"
         placeholder="Выберите адрес"

package/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -8,8 +8,8 @@ import { defaultValidator, innValidator, nameValidator, phoneValidator } from '.
 export const renderBusinessCardDataOrganization = (
   field: FormFieldRegisterer<BusinessCardFormState>,
 ) => (
-  <div className="sm:flex sm:justify-between sm:gap-lg">
-    <div className="sm:w-1/2 space-y-s">
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="Контактное лицо"
@@ -21,7 +21,7 @@ export const renderBusinessCardDataOrganization = (
         {...withValidator(field('inn'), innValidator)}
       />
     </div>
-    <div className="sm:w-1/2 space-y-s">
+    <div className="@xl:w-1/2 space-y-s">
       <PhoneInputControl
         className="shrink-0 w-full"
         label="Телефон"

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

@@ -0,0 +1,39 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import type { CreditFormState } from './CreditFormState';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
+
+export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFormState>) => (
+  <div className="pb-2xs border-b border-b-main-divider">
+    <div className="space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Наименование организации"
+        {...withValidator(field('fullName'), defaultValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Годовая выручка, ₽"
+        {...withValidator(field('annualRevenue'), defaultValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Контактное лицо"
+        {...withValidator(field('name'), nameValidator)}
+      />
+      <PhoneInputControl
+        className="shrink-0 w-full"
+        label="Телефон"
+        {...withValidator(field('phone'), phoneValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="ИНН"
+        {...withValidator(field('inn'), innValidator)}
+      />
+      <InputControl className="shrink-0 w-full" label="Электронная почта" {...field('mail')} />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -6,8 +6,8 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="pb-2xs border-b border-b-main-divider sm:flex sm:justify-between sm:gap-lg sm:border-none sm:pb-0">
-    <div className="sm:w-1/2 space-y-s">
+  <div className="pb-2xs border-b border-b-main-divider @xl:flex @xl:justify-between @xl:gap-lg @xl:border-none @xl:pb-0">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="Наименование организации"
@@ -24,7 +24,7 @@ export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFo
         {...withValidator(field('phone'), phoneValidator)}
       />
     </div>
-    <div className="sm:w-1/2 space-y-s">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="Годовая выручка, ₽"

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -12,8 +12,8 @@ import {
 } from './CreditParameters';
 
 export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="border-b border-b-main-divider sm:flex sm:justify-between gap-lg sm:border-none">
-    <div className="sm:w-1/2">
+  <div className="border-b border-b-main-divider @xl:border-none @xl:flex @xl:justify-between gap-lg">
+    <div className="@xl:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
           Сумма, ₽
@@ -26,7 +26,7 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
         {...field('amount')}
       />
     </div>
-    <div className="sm:w-1/2">
+    <div className="@xl:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
           Срок, месяцев

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -1,26 +1,46 @@
 import { FormFieldRegisterer } from '../../hooks/useForm';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { Radio } from '../../ui-kit/Radio/Radio';
 import type { WedFormState } from './WedFormState';
 
 export const renderQuestionsInterested = (field: FormFieldRegisterer<WedFormState>) => {
-  const textField = field('text');
+  const { value, onChange } = field('vedTypes');
 
   return (
     <div className="space-y-m">
-      <div className="sm:flex sm:items-center sm:gap-xl">
-        <Checkbox text="Валютный контроль" {...field('currencyControl')} />
-        <Checkbox text="Документарные операции" {...field('documentaryOperations')} />
-        <Checkbox text="Конверсионные операции" {...field('conversionOperations')} />
+      <div className="@xl:flex @xl:items-center @xl:gap-xl">
+        <Radio
+          className="mb-xs"
+          name="vedTypes"
+          text="Валютный котроль"
+          value="currencyControl"
+          checked={value === 'currencyControl'}
+          onChange={(_) => onChange && onChange(_)}
+        />
+        <Radio
+          className="mb-xs"
+          name="vedTypes"
+          text="Документарные операции"
+          value="documentOperations"
+          checked={value === 'documentOperations'}
+          onChange={(_) => onChange && onChange(_)}
+        />
+        <Radio
+          className="mb-xs"
+          name="vedTypes"
+          text="Конверсионные операции"
+          value="conversionTransactions"
+          checked={value === 'conversionTransactions'}
+          onChange={(_) => onChange && onChange(_)}
+        />
+        <Radio
+          className="mb-xs"
+          name="vedTypes"
+          text="Иные вопросы ВЭД"
+          value="otherIssues"
+          checked={value === 'otherIssues'}
+          onChange={(_) => onChange && onChange(_)}
+        />
       </div>
-      <textarea
-        placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
-        className="block w-full resize-y min-h-24 p-m outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text"
-        value={textField.value}
-        onInput={
-          ((e: { target?: { value?: string } }) =>
-            textField.onChange && textField.onChange(e.target?.value || '')) as any
-        }
-      />
     </div>
   );
 };

package/src/components/ApplicationForm/renderRegion.tsx

@@ -15,7 +15,7 @@ export const renderRegion = ({ regions, field }: RegionProps) => (
     className="w-full"
     label="Регион"
     placeholder="Выберите регион"
-    isSearch
+    isSearch={true}
     options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
     {...withValidator(field('region'), defaultValidator)}
   />