@redneckz/wildless-cms-uni-blocks 0.14.129 → 0.14.131

package/src/components/ApplicationForm/DatePickerControl.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { DatePicker } from '../../ui-kit/DatePicker/DatePicker';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { renderErrorText } from './renderErrorText';
 
 export interface DatePickerControlProps {
-  className: string;
+  className?: string;
   label: string;
   value?: Date;
   error?: string;
@@ -13,7 +14,7 @@ export interface DatePickerControlProps {
 
 export const DatePickerControl = JSX<DatePickerControlProps>(
   ({ className, label, value = undefined, error, onChange }) => (
-    <div className={className}>
+    <div className={style('shrink-0 w-full', className)}>
       {label ? (
         <div className="mb-xs">
           <Text size="text-m" font="font-light">

package/src/components/ApplicationForm/EmbeddableForms.tsx

@@ -2,6 +2,7 @@ import { ApplicationFormAcquiring } from './ApplicationFormAcquiring';
 import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
 import { ApplicationFormCredit } from './ApplicationFormCredit';
 import { ApplicationFormDeposit } from './ApplicationFormDeposit';
+import { ApplicationFormFeedback } from './ApplicationFormFeedback';
 import { ApplicationFormGrantSupport } from './ApplicationFormGrantSupport';
 import { ApplicationFormIndividuals } from './ApplicationFormIndividuals';
 import { ApplicationFormWed } from './ApplicationFormWed';
@@ -14,4 +15,5 @@ export const EmbeddableForms = {
   ApplicationFormAcquiring,
   ApplicationFormGrantSupport,
   ApplicationFormIndividuals,
+  ApplicationFormFeedback,
 };

package/src/components/ApplicationForm/InputControl.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Input } from '../../ui-kit/Input/Input';
+import { style } from '../../utils/style';
 import { renderErrorText } from './renderErrorText';
 
 export interface InputControlProps {
-  className: string;
+  className?: string;
   label: string;
   value?: string;
   error?: string;
@@ -13,7 +14,7 @@ export interface InputControlProps {
 
 export const InputControl = JSX<InputControlProps>(
   ({ className, label, value = '', error, onChange, onBlur }) => (
-    <div className={className}>
+    <div className={style('shrink-0 w-full', className)}>
       <Input
         type="text"
         aria-label={label}

package/src/components/ApplicationForm/PhoneInputControl.tsx

@@ -1,11 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { PhoneInput } from '../../ui-kit/PhoneInput/PhoneInput';
+import { style } from '../../utils/style';
 import { type InputControlProps } from './InputControl';
 import { renderErrorText } from './renderErrorText';
 
 export const PhoneInputControl = JSX<InputControlProps>(
   ({ className, label, value, error, onChange, onBlur }) => (
-    <div className={className}>
+    <div className={style('shrink-0 w-full', className)}>
       <PhoneInput
         aria-label={label}
         label={label}

package/src/components/ApplicationForm/feedbackTypes.ts

@@ -0,0 +1,22 @@
+import { type Option } from '../../ui-kit/Select/Option';
+
+export const FEEDBACK_TYPES: Option[] = [
+  {
+    text: 'Задать вопрос по продуктам и услугам',
+    key: 'FEEDBACK',
+  },
+  {
+    text: 'Качество обслуживания',
+    key: 'FEEDBACK_QC',
+  },
+];
+
+export const FEEDBACK_METHOD: Option[] = [
+  { key: 'phone', text: 'Телефонный звонок' },
+  { key: 'mail', text: 'Электронное сообщение' },
+];
+
+export const SERVICE_DIRECTIONS: Option[] = [
+  { key: 'Физическое лицо' },
+  { key: 'Юридическое лицо / ИП' },
+];

package/src/components/ApplicationForm/formStyle.ts

@@ -0,0 +1 @@
+export const formStyle = 'container space-y-lg';

package/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

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

package/src/components/ApplicationForm/renderAcquiringRegion.tsx

@@ -1,8 +1,8 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { withValidator } from '../../validation/withValidator';
-import { type AcquiringFormState } from './AcquiringFormState';
 import { ACQUIRING_TYPES } from './acquiringTypes';
-import { ApplicationFieldsetLayout, childrenClassName } from './ApplicationFieldsetLayout';
+import { ApplicationFieldsetLayout, formChildrenStyle } from './ApplicationFieldsetLayout';
+import { type AcquiringFormState } from './ApplicationFormAcquiring';
 import { type Select } from './models';
 import { SelectControl } from './SelectControl';
 import { defaultValidator } from './validators';
@@ -10,12 +10,14 @@ import { defaultValidator } from './validators';
 interface AcquiringRegionProps {
   regions: Select[];
   field: FormFieldRegisterer<AcquiringFormState>;
+  title?: string;
 }
 
-export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps) => (
+export const renderAcquiringRegion = ({ regions, field, title }: AcquiringRegionProps) => (
   <ApplicationFieldsetLayout
+    title={title}
     firstChildren={
-      <div className={childrenClassName}>
+      <div className={formChildrenStyle}>
         <SelectControl
           label="Вид эквайринга"
           placeholder="Выберите эквайринг"
@@ -25,7 +27,7 @@ export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps)
       </div>
     }
     secondChildren={
-      <div className={childrenClassName}>
+      <div className={formChildrenStyle}>
         <SelectControl
           label="Адрес"
           placeholder="Выберите адрес"

package/src/components/ApplicationForm/renderAgreementWithSubmit.tsx

@@ -0,0 +1,26 @@
+import { type FieldProps } from '../../hooks/useForm';
+import { type LinkProps } from '../../model/LinkProps';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { withValidator } from '../../validation/withValidator';
+import { type SubmitButtonProps } from './ApplicationFormContent';
+import { Footnote } from './Footnote';
+import { renderErrorText } from './renderErrorText';
+import { renderSubmitButton } from './renderSubmitButton';
+import { consentDataProcessingValidator } from './validators';
+
+export const renderAgreementWithSubmit = (
+  consentDataProcessing: FieldProps<boolean>,
+  link?: LinkProps,
+  button?: SubmitButtonProps,
+) => (
+  <div className="flex w-full justify-between items-baseline">
+    <div>
+      <div className="flex gap-3">
+        <Checkbox {...consentDataProcessing} />
+        <Footnote text="Согласен с " link={link} />
+      </div>
+      {renderErrorText(withValidator(consentDataProcessing, consentDataProcessingValidator).error)}
+    </div>
+    {renderSubmitButton(button)}
+  </div>
+);

package/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -1,7 +1,7 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { withValidator } from '../../validation/withValidator';
-import { ApplicationFieldsetLayout, childrenClassName } from './ApplicationFieldsetLayout';
-import { type BusinessCardFormState } from './BusinessCardFormState';
+import { ApplicationFieldsetLayout, formChildrenStyle } from './ApplicationFieldsetLayout';
+import { type BusinessCardFormState } from './ApplicationFormBusinessCard';
 import { InputControl } from './InputControl';
 import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
@@ -11,28 +11,15 @@ export const renderBusinessCardDataOrganization = (
 ) => (
   <ApplicationFieldsetLayout
     firstChildren={
-      <div className={childrenClassName}>
-        <InputControl
-          className="shrink-0 w-full"
-          label="Контактное лицо"
-          {...withValidator(field('name'), nameValidator)}
-        />
-        <InputControl
-          className="shrink-0 w-full"
-          label="ИНН"
-          {...withValidator(field('inn'), innValidator)}
-        />
+      <div className={formChildrenStyle}>
+        <InputControl label="Контактное лицо" {...withValidator(field('name'), nameValidator)} />
+        <InputControl label="ИНН" {...withValidator(field('inn'), innValidator)} />
       </div>
     }
     secondChildren={
-      <div className={childrenClassName}>
-        <PhoneInputControl
-          className="shrink-0 w-full"
-          label="Телефон"
-          {...withValidator(field('phone'), phoneValidator)}
-        />
+      <div className={formChildrenStyle}>
+        <PhoneInputControl label="Телефон" {...withValidator(field('phone'), phoneValidator)} />
         <InputControl
-          className="shrink-0 w-full"
           label="Электронная почта"
           {...withValidator(field('mail'), defaultValidator)}
         />

package/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -1,45 +1,38 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { withValidator } from '../../validation/withValidator';
-import { ApplicationFieldsetLayout, childrenClassName } from './ApplicationFieldsetLayout';
+import { ApplicationFieldsetLayout, formChildrenStyle } from './ApplicationFieldsetLayout';
 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>) => (
+export const renderCreditDataOrganization = (
+  field: FormFieldRegisterer<CreditFormState>,
+  title?: string,
+) => (
   <ApplicationFieldsetLayout
+    title={title}
     firstChildren={
-      <div className={childrenClassName}>
+      <div className={formChildrenStyle}>
         <InputControl
-          className="shrink-0 w-full"
           label="Наименование организации"
           {...withValidator(field('fullName'), defaultValidator)}
         />
-        <InputControl
-          className="shrink-0 w-full"
-          label="ИНН"
-          {...withValidator(field('inn'), innValidator)}
-        />
-        <PhoneInputControl
-          className="shrink-0 w-full"
-          label="Телефон"
-          {...withValidator(field('phone'), phoneValidator)}
-        />
+        <InputControl label="ИНН" {...withValidator(field('inn'), innValidator)} />
+        <PhoneInputControl label="Телефон" {...withValidator(field('phone'), phoneValidator)} />
       </div>
     }
     secondChildren={
-      <div className={childrenClassName}>
+      <div className={formChildrenStyle}>
         <InputControl
-          className="shrink-0 w-full"
           label="Годовая выручка, ₽"
           {...withValidator(field('annualRevenue'), defaultValidator)}
         />
+        <InputControl label="Контактное лицо" {...withValidator(field('name'), nameValidator)} />
         <InputControl
-          className="shrink-0 w-full"
-          label="Контактное лицо"
-          {...withValidator(field('name'), nameValidator)}
+          label="Электронная почта"
+          {...withValidator(field('mail'), defaultValidator)}
         />
-        <InputControl className="shrink-0 w-full" label="Электронная почта" {...field('mail')} />
       </div>
     }
   />

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -1,6 +1,6 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { Text } from '../../ui-kit/Text/Text';
+import { ApplicationFieldsetLayout, formChildrenStyle } from './ApplicationFieldsetLayout';
 import { type CreditFormState } from './CreditFormState';
 import {
   ITEMS_CREDIT_AMOUNT,
@@ -11,33 +11,33 @@ import {
   MIN_CREDIT_TERM,
 } from './CreditParameters';
 
-export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormState>) => (
-  <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">
-          Сумма, ₽
-        </Text>
-      </label>
-      <InputRange
-        items={ITEMS_CREDIT_AMOUNT}
-        min={MIN_CREDIT_AMOUNT}
-        max={MAX_CREDIT_AMOUNT}
-        {...field('amount')}
-      />
-    </div>
-    <div className="@xl:w-1/2">
-      <label>
-        <Text size="text-m" font="font-light">
-          Срок, месяцев
-        </Text>
-      </label>
-      <InputRange
-        items={ITEMS_CREDIT_TERM}
-        min={MIN_CREDIT_TERM}
-        max={MAX_CREDIT_TERM}
-        {...field('term')}
-      />
-    </div>
-  </div>
+export const renderCreditParameters = (
+  field: FormFieldRegisterer<CreditFormState>,
+  title?: string,
+) => (
+  <ApplicationFieldsetLayout
+    title={title}
+    firstChildren={
+      <div className={formChildrenStyle}>
+        <InputRange
+          title="Сумма, ₽"
+          items={ITEMS_CREDIT_AMOUNT}
+          min={MIN_CREDIT_AMOUNT}
+          max={MAX_CREDIT_AMOUNT}
+          {...field('amount')}
+        />
+      </div>
+    }
+    secondChildren={
+      <div className={formChildrenStyle}>
+        <InputRange
+          title="Срок, месяцев"
+          items={ITEMS_CREDIT_TERM}
+          min={MIN_CREDIT_TERM}
+          max={MAX_CREDIT_TERM}
+          {...field('term')}
+        />
+      </div>
+    }
+  />
 );

package/src/components/ApplicationForm/renderIndividualsFields.tsx

@@ -1,6 +1,6 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { withValidator } from '../../validation/withValidator';
-import { ApplicationFieldsetLayout, childrenClassName } from './ApplicationFieldsetLayout';
+import { ApplicationFieldsetLayout, formChildrenStyle } from './ApplicationFieldsetLayout';
 import { type IndividualsFormState } from './ApplicationFormIndividuals';
 import { DatePickerControl } from './DatePickerControl';
 import { InputControl } from './InputControl';
@@ -10,38 +10,20 @@ import { defaultValidator, nameValidator, phoneValidator } from './validators';
 export const renderIndividualsFields = (field: FormFieldRegisterer<IndividualsFormState>) => (
   <ApplicationFieldsetLayout
     firstChildren={
-      <div className={childrenClassName}>
-        <InputControl
-          className="shrink-0 w-full"
-          label="Фамилия"
-          {...withValidator(field('surname'), nameValidator)}
-        />
-        <InputControl
-          className="shrink-0 w-full"
-          label="Отчество"
-          {...withValidator(field('middleName'), nameValidator)}
-        />
-        <PhoneInputControl
-          className="shrink-0 w-full"
-          label="Телефон"
-          {...withValidator(field('phone'), phoneValidator)}
-        />
+      <div className={formChildrenStyle}>
+        <InputControl label="Фамилия" {...withValidator(field('surname'), nameValidator)} />
+        <InputControl label="Отчество" {...withValidator(field('middleName'), nameValidator)} />
+        <PhoneInputControl label="Телефон" {...withValidator(field('phone'), phoneValidator)} />
       </div>
     }
     secondChildren={
-      <div className={childrenClassName}>
-        <InputControl
-          className="shrink-0 w-full"
-          label="Имя"
-          {...withValidator(field('name'), nameValidator)}
-        />
+      <div className={formChildrenStyle}>
+        <InputControl label="Имя" {...withValidator(field('name'), nameValidator)} />
         <DatePickerControl
-          className="shrink-0 w-full"
-          label="Дата рождения"
+          label="Дата рождения*"
           {...withValidator(field('date'), defaultValidator)}
         />
         <InputControl
-          className="shrink-0 w-full"
           label="Электронная почта"
           {...withValidator(field('mail'), defaultValidator)}
         />

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -1,42 +1,45 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { Radio } from '../../ui-kit/Radio/Radio';
+import { ApplicationFieldsetLayout } from './ApplicationFieldsetLayout';
 import { type WedFormState } from './ApplicationFormWed';
 
 export const renderQuestionsInterested = (field: FormFieldRegisterer<WedFormState>) => {
   const { value, onChange } = field('vedTypes');
 
   return (
-    <div className="space-y-lg">
-      <div className="space-y-xs @xl:flex @xl:items-center @xl:gap-xl">
-        <Radio
-          name="vedTypes"
-          text="Валютный контроль"
-          value="currencyControl"
-          checked={value === 'currencyControl'}
-          onChange={(_) => onChange && onChange(_)}
-        />
-        <Radio
-          name="vedTypes"
-          text="Документарные операции"
-          value="documentOperations"
-          checked={value === 'documentOperations'}
-          onChange={(_) => onChange && onChange(_)}
-        />
-        <Radio
-          name="vedTypes"
-          text="Конверсионные операции"
-          value="conversionTransactions"
-          checked={value === 'conversionTransactions'}
-          onChange={(_) => onChange && onChange(_)}
-        />
-        <Radio
-          name="vedTypes"
-          text="Иные вопросы ВЭД"
-          value="otherIssues"
-          checked={value === 'otherIssues'}
-          onChange={(_) => onChange && onChange(_)}
-        />
-      </div>
-    </div>
+    <ApplicationFieldsetLayout
+      firstChildren={
+        <div className="gap-xl grid @xl:flex @xl:items-center">
+          <Radio
+            name="vedTypes"
+            text="Валютный контроль"
+            value="currencyControl"
+            checked={value === 'currencyControl'}
+            onChange={(_) => onChange && onChange(_)}
+          />
+          <Radio
+            name="vedTypes"
+            text="Документарные операции"
+            value="documentOperations"
+            checked={value === 'documentOperations'}
+            onChange={(_) => onChange && onChange(_)}
+          />
+          <Radio
+            name="vedTypes"
+            text="Конверсионные операции"
+            value="conversionTransactions"
+            checked={value === 'conversionTransactions'}
+            onChange={(_) => onChange && onChange(_)}
+          />
+          <Radio
+            name="vedTypes"
+            text="Иные вопросы ВЭД"
+            value="otherIssues"
+            checked={value === 'otherIssues'}
+            onChange={(_) => onChange && onChange(_)}
+          />
+        </div>
+      }
+    />
   );
 };

package/src/components/ApplicationForm/renderRegion.tsx

@@ -1,6 +1,6 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { withValidator } from '../../validation/withValidator';
-import { type BusinessCardFormState } from './BusinessCardFormState';
+import { type BusinessCardFormState } from './ApplicationFormBusinessCard';
 import { type Select } from './models';
 import { SelectControl } from './SelectControl';
 import { defaultValidator } from './validators';

package/src/components/ApplicationForm/renderRegionDepartment.tsx

@@ -1,22 +1,29 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { withValidator } from '../../validation/withValidator';
 import { type Branch } from '../SafeDepositRental/useSafeBoxes';
-import { ApplicationFieldsetLayout, childrenClassName } from './ApplicationFieldsetLayout';
+import { ApplicationFieldsetLayout, formChildrenStyle } from './ApplicationFieldsetLayout';
 import { type CreditFormState } from './CreditFormState';
 import { type Select } from './models';
 import { SelectControl } from './SelectControl';
 import { defaultValidator } from './validators';
 
 interface RegionDepartmentProps {
+  title?: string;
   regions: Select[];
   branches: Branch[];
   field: FormFieldRegisterer<CreditFormState>;
 }
 
-export const renderRegionDepartment = ({ regions, branches, field }: RegionDepartmentProps) => (
+export const renderRegionDepartment = ({
+  title,
+  regions,
+  branches,
+  field,
+}: RegionDepartmentProps) => (
   <ApplicationFieldsetLayout
+    title={title}
     firstChildren={
-      <div className={childrenClassName}>
+      <div className={formChildrenStyle}>
         <SelectControl
           label="Филиал"
           placeholder="Выберите филиал"
@@ -27,7 +34,7 @@ export const renderRegionDepartment = ({ regions, branches, field }: RegionDepar
       </div>
     }
     secondChildren={
-      <div className={childrenClassName}>
+      <div className={formChildrenStyle}>
         <SelectControl
           label="Адрес"
           placeholder="Выберите адрес"

package/src/components/ApplicationForm/renderSlideCheckboxes.tsx

@@ -1,6 +1,6 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { SlideCheckbox } from '../../ui-kit/SlideCheckbox/SlideCheckbox';
-import { type AcquiringFormState } from './AcquiringFormState';
+import { type AcquiringFormState } from './ApplicationFormAcquiring';
 
 export const renderSlideCheckboxes = (field: FormFieldRegisterer<AcquiringFormState>) => (
   <div>

package/src/components/ApplicationForm/renderTextarea.tsx

@@ -0,0 +1,30 @@
+import { type FieldProps } from '../../hooks/useForm';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+
+const activeTextareaStyles =
+  'hover:border-primary-hover active:focus:border-primary-text focus:border-primary-text';
+export const renderTextarea = (textField: FieldProps<string>, text?: string, placeholder = '') => (
+  <label className="space-y-xs" htmlFor="textarea">
+    {text ? (
+      <div>
+        <Text size="text-m" font="font-light">
+          {text}
+        </Text>
+      </div>
+    ) : null}
+    <textarea
+      id="textarea"
+      placeholder={placeholder}
+      className={style(
+        'block w-full resize-y min-h-24 p-m outline-none border rounded-md border-gray',
+        activeTextareaStyles,
+      )}
+      value={textField.value}
+      onInput={
+        ((e: { target?: { value?: string } }) =>
+          textField.onChange && textField.onChange(e.target?.value || '')) as any
+      }
+    />
+  </label>
+);

package/src/components/ApplicationForm/renderUserData.tsx

@@ -0,0 +1,18 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { type FeedbackFormState } from './ApplicationFormFeedback';
+import { DatePickerControl } from './DatePickerControl';
+import { InputControl } from './InputControl';
+import { defaultValidator, nameValidator } from './validators';
+
+export const renderUserData = (field: FormFieldRegisterer<FeedbackFormState>) => (
+  <div>
+    <InputControl label="Фамилия*" {...withValidator(field('surname'), nameValidator)} />
+    <InputControl label="Имя*" {...withValidator(field('name'), nameValidator)} />
+    <InputControl
+      label="Отчество (Обязательно, при наличии)"
+      {...withValidator(field('middleName'), nameValidator)}
+    />
+    <DatePickerControl label="Дата рождения*" {...withValidator(field('date'), defaultValidator)} />
+  </div>
+);