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

package/mobile/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -122,7 +122,7 @@ const renderBusinessDepositParamsForm = (
 );
 
 const renderDepositResults = (finalSum?: number, income?: number) => (
-  <div className="flex flex-col gap-2xl sm:gap-0">
+  <div className="flex flex-col gap-2xl sm:gap-0 mb-lg">
     <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
     <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
   </div>

package/mobile/src/components/Calculator/CreditCalculatorForm.tsx

@@ -84,7 +84,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
               value={calculatorParams.monthlyPayment}
               postfix="₽"
             />
-            <div className="hidden sm:block">{paymentTypeElement}</div>
+            <div className="hidden sm:block mb-lg">{paymentTypeElement}</div>
             {renderButtonsSection(buttons, { isVertical: true })}
             {renderFootnote(footnote)}
           </div>

package/mobile/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -117,7 +117,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
                 postfix="₽"
               />
             ) : null}
-            <div className="hidden sm:block">{paymentTypeElement}</div>
+            <div className="hidden sm:block mb-lg">{paymentTypeElement}</div>
             {renderButtonsSection(buttons, { isVertical: true })}
             {renderFootnote(footnote)}
           </div>

package/mobile/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -5,4 +5,5 @@ export interface CheckboxProps {
   disabled?: boolean;
   isRadio?: boolean;
   onChange?: (value: boolean) => void;
+  error?: string;
 }

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

@@ -72,7 +72,7 @@ export const DatePicker = JSX<DatePickerProps>(
         </Text>
         {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
         {showCalendar ? (
-          <div className="absolute bg-white z-10 select-none">
+          <div className="absolute bg-white z-20 select-none">
             <div className="flex gap-s">
               <div className="my-auto" onClick={handlePrevMonth}>
                 <Icon {...ICON_PROPS} className="-rotate-90 cursor-pointer" />

package/package.json

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

package/src/components/ApplicationForm/ApplicationFieldsetLayout.tsx

@@ -1,18 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type VNode } from '../../model/VNode';
+import { Heading } from '../../ui-kit/Heading/Heading';
 
 export interface ApplicationFieldsetLayoutProp {
+  title?: string;
   firstChildren?: VNode;
   secondChildren?: VNode;
 }
 
 export const ApplicationFieldsetLayout = JSX<ApplicationFieldsetLayoutProp>(
-  ({ firstChildren, secondChildren }) => (
-    <fieldset className="grig @xl:flex @xl:justify-between gap-lg border-b border-b-main-divider @xl:border-none">
+  ({ title, firstChildren, secondChildren }) => (
+    <fieldset className="grid @xl:flex @xl:justify-between gap-lg border-b border-b-main-divider @xl:border-none">
+      {title ? (
+        <legend className="w-full">
+          <Heading title={title} headingType="h6" className="@xl:text-center" />
+        </legend>
+      ) : null}
       {firstChildren}
       {secondChildren}
     </fieldset>
   ),
 );
 
-export const childrenClassName = '@xl:w-1/2 space-y-s';
+export const formChildrenStyle = '@xl:w-1/2 space-y-s';

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

@@ -56,6 +56,10 @@ const ApplicationFormIndividuals: ApplicationFormContent = {
   },
 };
 
+const ApplicationFormFeedback: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormFeedback' },
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
@@ -99,4 +103,10 @@ export default {
       <PopupManager />
     </div>
   ),
+  feedback: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormFeedback} />
+      <PopupManager />
+    </div>
+  ),
 };

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

@@ -56,6 +56,10 @@ const ApplicationFormIndividuals: ApplicationFormContent = {
   },
 };
 
+const ApplicationFormFeedback: ApplicationFormContent = {
+  formBlock: { ...formBlockProps, formType: 'ApplicationFormFeedback', title: 'Обратная связь' },
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
@@ -99,4 +103,10 @@ export default {
       <PopupManager />
     </div>
   ),
+  feedback: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormFeedback} />
+      <PopupManager />
+    </div>
+  ),
 };

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -1,19 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import { Heading } from '../../ui-kit/Heading/Heading';
+import { type Option } from '../../ui-kit/Select/Option';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
-import { type AcquiringFormState } from './AcquiringFormState';
 import { type ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
+import { formStyle } from './formStyle';
 import { renderAcquiringDataOrganization } from './renderAcquiringDataOrganization';
 import { renderAcquiringRegion } from './renderAcquiringRegion';
 import { renderSlideCheckboxes } from './renderSlideCheckboxes';
 import { renderSubmitButton } from './renderSubmitButton';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
+export interface AcquiringFormState {
+  acquiringType?: Option;
+  region?: Option;
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  onlineCheckout: boolean;
+  posTerminal: boolean;
+}
+
 const initialFormState: AcquiringFormState = {
   acquiringType: { key: 'Торговый эквайринг' },
   fullName: '',
@@ -62,11 +73,9 @@ export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
   const regions = useGetRegions();
 
   return (
-    <form className="container space-y-lg" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Вид эквайринга и регион" className="@xl:text-center" />
-      {renderAcquiringRegion({ regions, field })}
-      <Heading headingType="h6" title="Данные организации" className="@xl:text-center" />
-      {renderAcquiringDataOrganization(field)}
+    <form className={formStyle} onSubmit={formProps.onSubmit}>
+      {renderAcquiringRegion({ regions, field, title: 'Вид эквайринга и регион' })}
+      {renderAcquiringDataOrganization(field, 'Данные организации')}
       {renderSlideCheckboxes(field)}
       {renderSubmitButton(button)}
       <Footnote link={link} />

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -1,17 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
+import { type Option } from '../../ui-kit/Select/Option';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import { type ApplicationFormsProps } from './ApplicationFormsProps';
-import { type BusinessCardFormState } from './BusinessCardFormState';
 import { Footnote } from './Footnote';
+import { formStyle } from './formStyle';
 import { renderBusinessCardDataOrganization } from './renderBusinessCardDataOrganization';
 import { renderRegion } from './renderRegion';
 import { renderSubmitButton } from './renderSubmitButton';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
+export interface BusinessCardFormState {
+  region?: Option;
+  name: string;
+  phone: string;
+  inn: string;
+  mail: string;
+}
+
 const initialFormState: BusinessCardFormState = {
   name: '',
   phone: '',
@@ -52,7 +61,7 @@ export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) =>
   const regions = useGetRegions();
 
   return (
-    <form className="container space-y-s" onSubmit={formProps.onSubmit}>
+    <form className={formStyle} onSubmit={formProps.onSubmit}>
       {renderRegion({ regions, field })}
       {renderBusinessCardDataOrganization(field)}
       {renderSubmitButton(button)}

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -85,6 +85,15 @@ export type IndividualsFormParamsDef = TitleProps & {
   product?: string;
 };
 
+/**
+ * @title Форма обратной связи
+ */
+export type FeedbackFormParamsDef = TitleProps &
+  CommonApplicationFormProps & {
+    /** @default ApplicationFormFeedback */
+    formType: 'ApplicationFormFeedback';
+  };
+
 /**
  * @title Настройки формы
  */
@@ -95,7 +104,8 @@ export type ApplicationFormBlockDef =
   | CreditFormParamsDef
   | AcquiringFormParamsDef
   | GrantSupportFormParamsDef
-  | IndividualsFormParamsDef;
+  | IndividualsFormParamsDef
+  | FeedbackFormParamsDef;
 
 /**
  * @title Форма заявки

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useBranches } from '../../hooks/useBranches';
 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';
@@ -10,6 +9,7 @@ import { type ApplicationFormsProps } from './ApplicationFormsProps';
 import { type CreditFormState } from './CreditFormState';
 import { MIN_CREDIT_AMOUNT } from './CreditParameters';
 import { Footnote } from './Footnote';
+import { formStyle } from './formStyle';
 import { renderCreditDataOrganization } from './renderCreditDataOrganization';
 import { renderCreditParameters } from './renderCreditParameters';
 import { renderRegionDepartment } from './renderRegionDepartment';
@@ -65,13 +65,10 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>(({ button, link,
   const branches = useBranches(formState.region?.key).filter((branch) => branch?.address);
 
   return (
-    <form className="container space-y-lg" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Параметры" className="@xl:text-center" />
-      {renderCreditParameters(field)}
-      <Heading headingType="h6" title="Данные организации" className="@xl:text-center" />
-      {renderCreditDataOrganization(field)}
-      <Heading headingType="h6" title="Офис банка" className="@xl:text-center" />
-      {renderRegionDepartment({ regions, branches, field })}
+    <form className={formStyle} onSubmit={formProps.onSubmit}>
+      {renderCreditParameters(field, 'Параметры')}
+      {renderCreditDataOrganization(field, 'Данные организации')}
+      {renderRegionDepartment({ regions, branches, field, title: 'Офис банка' })}
       {renderSubmitButton(button)}
       <Footnote link={link} />
     </form>

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -1,12 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
 import { withValidator } from '../../validation/withValidator';
+import { ApplicationFieldsetLayout } from './ApplicationFieldsetLayout';
 import { type ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
+import { formStyle } from './formStyle';
 import { InputControl } from './InputControl';
 import { PhoneInputControl } from './PhoneInputControl';
 import { renderSubmitButton } from './renderSubmitButton';
@@ -45,30 +46,18 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>(({ button, link
   const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
 
   return (
-    <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading
-        headingType="h6"
+    <form className={formStyle} onSubmit={formProps.onSubmit}>
+      <ApplicationFieldsetLayout
         title="Оставьте заявку и мы ответим на любые вопросы по депозитам"
-        className="@xl:text-center mb-m"
+        firstChildren={
+          <div className="w-full max-w-xl space-y-s m-auto">
+            <InputControl label="Имя" {...withValidator(field('name'), nameValidator)} />
+            <PhoneInputControl label="Телефон" {...withValidator(field('phone'), phoneValidator)} />
+            {renderSubmitButton(button)}
+            <Footnote link={link} />
+          </div>
+        }
       />
-      <div className="max-w-[560px] m-auto space-y-s">
-        <InputControl
-          className="shrink-0 w-full"
-          label="Имя"
-          {...withValidator(field('name'), nameValidator)}
-        />
-        <PhoneInputControl
-          className="shrink-0 w-full"
-          label="Телефон"
-          {...withValidator(field('phone'), phoneValidator)}
-        />
-      </div>
-      <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>
-        {renderSubmitButton(button)}
-      </div>
     </form>
   );
 });

package/src/components/ApplicationForm/ApplicationFormFeedback.tsx

@@ -0,0 +1,190 @@
+/* eslint-disable max-lines-per-function,max-lines */
+
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useBranches } from '../../hooks/useBranches';
+import { useForm } from '../../hooks/useForm';
+import { type Option } from '../../ui-kit/Select/Option';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { withValidator } from '../../validation/withValidator';
+import { useGetRegions } from '../SafeDepositRental/useGetRegions';
+import { ApplicationFieldsetLayout } from './ApplicationFieldsetLayout';
+import { type ApplicationFormsProps } from './ApplicationFormsProps';
+import { FEEDBACK_METHOD, FEEDBACK_TYPES, SERVICE_DIRECTIONS } from './feedbackTypes';
+import { formStyle } from './formStyle';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { renderAgreementWithSubmit } from './renderAgreementWithSubmit';
+import { renderTextarea } from './renderTextarea';
+import { renderUserData } from './renderUserData';
+import { SelectControl } from './SelectControl';
+import {
+  consentDataProcessingValidator,
+  defaultValidator,
+  innValidator,
+  nameValidator,
+  phoneValidator,
+} from './validators';
+
+export interface FeedbackFormState {
+  typeForm: Option;
+  region?: Option;
+  serviceDirection: Option;
+  department?: Option;
+  surname: string;
+  name: string;
+  middleName;
+  fullName?: string;
+  date: Date | undefined;
+  feedbackMethod: Option;
+  phone: string;
+  phoneAdditional?: string;
+  mail: string;
+  bankEmpolee?: string;
+  applicationDate?: string;
+  text: string;
+  comment: string;
+  consentDataProcessing: boolean;
+  inn?: string;
+}
+
+const initialFormState: FeedbackFormState = {
+  typeForm: { key: 'FEEDBACK', text: 'Задать вопрос по продуктам и услугам' },
+  serviceDirection: { key: 'Физическое лицо' },
+  surname: '',
+  name: '',
+  middleName: '',
+  date: undefined,
+  feedbackMethod: { key: 'Телефонный звонок' },
+  phone: '',
+  phoneAdditional: '',
+  mail: '',
+  text: '',
+  comment: '',
+  consentDataProcessing: false,
+};
+
+const feedbackValidator = objectValidator({
+  typeForm: defaultValidator,
+  region: defaultValidator,
+  department: defaultValidator,
+  name: nameValidator,
+  date: defaultValidator,
+  feedbackMethod: defaultValidator,
+  phone: phoneValidator,
+  mail: defaultValidator,
+  consentDataProcessing: consentDataProcessingValidator,
+  inn: innValidator,
+});
+
+export const ApplicationFormFeedback = JSX<ApplicationFormsProps>(({ button, link, onSubmit }) => {
+  const handleSubmit = useCallback(
+    (formState: FeedbackFormState) => {
+      const submitData = {
+        ...formState,
+        typeForm: formState.typeForm.key,
+        region: formState.region?.text || '',
+        department: formState.department?.text || '',
+        phone: formState.phone.replace(/[^+\d]/g, ''),
+      };
+
+      isValidationSuccess(feedbackValidator(formState)) && onSubmit(submitData);
+    },
+    [onSubmit],
+  );
+
+  const [formState, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+  const regions = useGetRegions();
+  const branches = useBranches(formState.region?.key).filter((branch) => branch?.address);
+  const isQualityService = field('typeForm').value?.key === 'FEEDBACK_QC';
+  const isLegalEntity =
+    isQualityService && field('serviceDirection').value?.key === 'Юридическое лицо / ИП';
+
+  return (
+    <form className={formStyle} onSubmit={formProps.onSubmit}>
+      <ApplicationFieldsetLayout
+        firstChildren={
+          <div className="w-full max-w-xl space-y-s m-auto">
+            <SelectControl
+              label="Тема*"
+              placeholder="Выберите тему"
+              options={FEEDBACK_TYPES}
+              {...withValidator(field('typeForm'), defaultValidator)}
+            />
+            {isQualityService ? (
+              <SelectControl
+                label="Направление обслуживания*"
+                placeholder="Выберите направление"
+                options={SERVICE_DIRECTIONS}
+                {...withValidator(field('serviceDirection'), defaultValidator)}
+              />
+            ) : null}
+            <SelectControl
+              label="Филиал обслуживания*"
+              placeholder="Выберите филиал"
+              isSearch={true}
+              options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
+              {...withValidator(field('region'), defaultValidator)}
+            />
+            <SelectControl
+              label="Адрес"
+              placeholder="Выберите адрес"
+              options={branches.map(({ branchCode = '', address = '' }) => ({
+                key: branchCode,
+                text: address,
+              }))}
+              {...withValidator(field('department'), defaultValidator)}
+            />
+            {renderUserData(field)}
+            {isLegalEntity ? (
+              <div>
+                <InputControl label="ИНН" {...withValidator(field('inn'), innValidator)} />
+                <InputControl
+                  label="Наименование организации"
+                  {...withValidator(field('fullName'), defaultValidator)}
+                />
+              </div>
+            ) : null}
+            <SelectControl
+              label="Способ получения ответа*"
+              options={FEEDBACK_METHOD.map(({ key: key = '' }) => ({ key, text: key }))}
+              {...withValidator(field('feedbackMethod'), defaultValidator)}
+            />
+            <PhoneInputControl
+              label="Телефон*"
+              {...withValidator(field('phone'), phoneValidator)}
+            />
+            {isQualityService ? (
+              <div>
+                <PhoneInputControl
+                  label="Дополнительный телефон"
+                  {...withValidator(field('phoneAdditional'), phoneValidator)}
+                />
+                <InputControl
+                  label="Электронная почта"
+                  {...withValidator(field('mail'), defaultValidator)}
+                />
+                <InputControl
+                  label="ФИО или должность обслуживавшего Вас сотрудника Банка"
+                  {...withValidator(field('bankEmpolee'), defaultValidator)}
+                />
+                <InputControl
+                  label="Дата и время обращения в Банк"
+                  {...withValidator(field('applicationDate'), defaultValidator)}
+                />
+              </div>
+            ) : (
+              <InputControl
+                label="Электронная почта"
+                {...withValidator(field('mail'), defaultValidator)}
+              />
+            )}
+            {renderTextarea(field('text'), 'Ваше сообщение*')}
+            {renderAgreementWithSubmit(field('consentDataProcessing'), link, button)}
+          </div>
+        }
+      />
+    </form>
+  );
+});

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 @xl:space-y-lg">
+    <div className="container space-y-s">
       {regions ? (
         <SelectControl
           label="Ваш регион"

package/src/components/ApplicationForm/ApplicationFormIndividuals.tsx

@@ -1,14 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
 import { withValidator } from '../../validation/withValidator';
+import { ApplicationFieldsetLayout, formChildrenStyle } from './ApplicationFieldsetLayout';
 import { type ApplicationFormsProps } from './ApplicationFormsProps';
-import { Footnote } from './Footnote';
-import { renderIndividualsFields } from './renderIndividualsFields';
-import { renderSubmitButton } from './renderSubmitButton';
+import { DatePickerControl } from './DatePickerControl';
+import { formStyle } from './formStyle';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { renderAgreementWithSubmit } from './renderAgreementWithSubmit';
 import { defaultValidator, nameValidator, phoneValidator } from './validators';
 
 export interface IndividualsFormState {
@@ -69,15 +71,30 @@ export const ApplicationFormIndividuals = JSX<ApplicationFormsProps>((props) =>
   const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
 
   return (
-    <form className="container space-y-s" onSubmit={formProps.onSubmit}>
-      {renderIndividualsFields(field)}
-      <div className="@xl:flex justify-between items-center">
-        <div className="@xl:mb-0 mb-2 flex items-center gap-3">
-          <Checkbox {...withValidator(field('consentDataProcessing'), defaultValidator)} />
-          <Footnote text="Согласен с " link={link} />
-        </div>
-        {renderSubmitButton(button)}
-      </div>
+    <form className={formStyle} onSubmit={formProps.onSubmit}>
+      <ApplicationFieldsetLayout
+        firstChildren={
+          <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={formChildrenStyle}>
+            <InputControl label="Имя" {...withValidator(field('name'), nameValidator)} />
+            <DatePickerControl
+              label="Дата рождения*"
+              {...withValidator(field('date'), defaultValidator)}
+            />
+            <InputControl
+              label="Электронная почта"
+              {...withValidator(field('mail'), defaultValidator)}
+            />
+          </div>
+        }
+      />
+      {renderAgreementWithSubmit(field('consentDataProcessing'), link, button)}
     </form>
   );
 });

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -11,8 +11,8 @@ import { Footnote } from './Footnote';
 import { renderContacts } from './renderContacts';
 import { renderQuestionsInterested } from './renderQuestionsInterested';
 import { renderSubmitButton } from './renderSubmitButton';
+import { renderTextarea } from './renderTextarea';
 import { renderWedDataOrganization } from './renderWedDataOrganization';
-import { renderWedTextarea } from './renderWedTextarea';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export interface WedFormState {
@@ -89,17 +89,20 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
 
   const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
   const regions = useGetRegions();
+  const textField = field('text');
 
   return (
     <form className="container space-y-lg" onSubmit={formProps.onSubmit}>
       {renderQuestionsInterested(field)}
       <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>
+      {renderWedDataOrganization({ field, regions })}
+      {renderTextarea(
+        textField,
+        'Обращение',
+        'Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка',
+      )}
+      {renderSubmitButton(button)}
+      <Footnote link={link} />
       <Heading
         headingType="h6"
         title="Или свяжитесь с нами удобным способом"

package/src/components/ApplicationForm/CreditParameters.ts

@@ -1,7 +1,6 @@
 export const MIN_CREDIT_AMOUNT = 1000;
 export const MAX_CREDIT_AMOUNT = 1000000000;
 export const ITEMS_CREDIT_AMOUNT = ['От 1 000 ₽', 'До 1 000 000 000 ₽'];
-
 export const MIN_CREDIT_TERM = 1;
 export const MAX_CREDIT_TERM = 180;
 export const ITEMS_CREDIT_TERM = ['От 1 мес', 'До 15 лет'];