@redneckz/wildless-cms-uni-blocks 0.14.567 → 0.14.569

package/mobile/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -0,0 +1,83 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { LeadServiceAPI } from '../../api/LeadServiceAPI';
+import { useForm } from '../../hooks/useForm';
+import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
+import { getConsentDataProcessing } from '../../ui-kit/FormField/getConsentDataProcessing';
+import { getField } from '../../ui-kit/FormField/getField';
+import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { useResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/useResponseTypeDialog';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { type ApplicationLeadFormContent, type FieldDef } from './ApplicationLeadFormContent';
+import { getFormatData } from './getFormatData';
+import { getInitialFormState, type FormState } from './getInitialFormState';
+import { renderAgreementSubmit } from './renderAgreementSubmit';
+
+interface ApplicationLeadFormProps extends ApplicationLeadFormContent, UniBlockProps {}
+
+const API = LeadServiceAPI();
+
+export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
+  // eslint-disable-next-line max-lines-per-function
+  ({ className, title, typeForm = '', sections = [], button, link, endpoint, ...rest }) => {
+    const inputs = (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[];
+    const initialFormState = getInitialFormState(inputs, typeForm);
+    const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
+    const handleSubmit = useCallback(async (formData: FormState) => {
+      const feedbackValidator = objectValidator(getObjectValidator(inputs));
+      if (!isValidationSuccess(feedbackValidator(formData))) {
+        return 'Fail';
+      }
+      const formatData = getFormatData(formData);
+      const status = (await API.send(formatData, endpoint === 'lead')) ? 'OK' : 'Fail';
+      setResponseType(status);
+
+      if (status) {
+        const responseTypeDialog = useResponseTypeDialog({ responseType: status, typeForm });
+        responseTypeDialog.open();
+      }
+
+      return status;
+    }, []);
+
+    const [, { field, onSubmit, reset }] = useForm(initialFormState, { onSubmit: handleSubmit });
+    const fieldName = getConsentDataProcessing(inputs)?.name;
+
+    useEffect(() => {
+      if (responseType === 'OK') {
+        setResponseType('');
+        reset();
+      }
+    }, [responseType]);
+
+    return (
+      <ApplicationFormLayout
+        className={style('container space-y-m', className)}
+        title={title}
+        {...rest}
+      >
+        <form onSubmit={onSubmit}>
+          {sections.map((_, i) => (
+            <div
+              key={`section-${i}`}
+              className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
+            >
+              {renderTitle(_.title)}
+              {(_?.inputs || [])?.map(getField(field, typeForm))}
+            </div>
+          ))}
+          {renderAgreementSubmit(
+            fieldName ? field('consentDataProcessing') : undefined,
+            link,
+            button,
+          )}
+        </form>
+      </ApplicationFormLayout>
+    );
+  },
+);

package/mobile/src/components/ApplicationLeadForm/ApplicationLeadForm.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -0,0 +1,161 @@
+/* eslint-disable max-len */
+
+import { type LabelProps, type TextProps, type TitleProps } from '../../model/HeadlineType';
+import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
+import { type Target } from '../../model/LinkProps';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+interface Required {
+  /** @title Обязательно для заполнения */
+  required?: boolean;
+}
+
+export type SubmitButtonProps = TextProps & {
+  version?: LinkButtonVersion;
+};
+/**
+ * @title Название поля ввода
+ * @required
+ * @enumNames ["Фамилия", "Имя", "Отчество", "Email", "Телефон", "ФИО", "ИНН", "Комментарий", "Регион", "Регион выездной сервис", "Адрес", "Тип формы", "День рождения", "Клиент банка", "Согласие на получение материалов", "Тип эквайринга", "Онлайн касса", "POS-терминал", "Направление обслуживания", "Ультра/Премиум", "Тип обратной связи", "Способ получения ответа", "Банковский служащий", "Дата и время обращени", "Дополнительный телефон", "ВЭД", "Срок (месяцев)", "Сумма ₽", "Годовой доход", "Количество объектов инкассации", "День встречи", "Продукт", "Комментарий партнёров", "Согласие на обработку"]
+ */
+export type NameFieldDef =
+  | 'surname'
+  | 'name'
+  | 'middleName'
+  | 'email'
+  | 'phone'
+  | 'fullName'
+  | 'inn'
+  | 'comment'
+  | 'region'
+  | 'addressBranch'
+  | 'typeForm'
+  | 'birthday'
+  | 'isClient'
+  | 'consentToReceiveMaterials'
+  | 'acquiringType'
+  | 'onlineCheckout'
+  | 'posTerminal'
+  | 'serviceDirection'
+  | 'serviceType'
+  | 'feedbackType'
+  | 'feedbackMethod'
+  | 'bankEmpolee'
+  | 'applicationDate'
+  | 'secondaryPhone'
+  | 'vedTypes'
+  | 'term'
+  | 'amount'
+  | 'annualRevenue'
+  | 'collectionCount'
+  | 'desiredMeetingDate'
+  | 'product'
+  | 'localities'
+  | 'partnerComments'
+  | 'consentDataProcessing';
+
+export type ConditionFieldProps = {
+  /** @title Условия отображения полей формы */
+  condition?: {
+    name: NameFieldDef;
+    /** @title Значения при которых отображаются поля */
+    values: string[];
+  };
+};
+
+export type FieldDefaultDef = Required &
+  LabelProps &
+  ConditionFieldProps & {
+    name: NameFieldDef;
+  };
+
+/**
+ * @title Поля ввода по умолчанию
+ * @default {"fieldType": "common"}
+ */
+export type FieldCommonDef = FieldDefaultDef & {
+  /** @default "common" */
+  fieldType: 'common';
+};
+
+/**
+ * @title Значение по умолчанию
+ * @enumNames ["Валютный контроль","Документарные операции","Конверсионные операции","Иные вопросы ВЭД"]
+ */
+type VedTypes = 'currencyControl' | 'documentOperations' | 'conversionTransactions' | 'otherIssues';
+
+/**
+ * @title Поле ввода ВЭД
+ * @default {"fieldType": "ved", "name": "vedTypes", "defaultValue": "currencyControl"}
+ */
+export type FieldVedDef = FieldDefaultDef & {
+  /** @default "ved" */
+  fieldType: 'ved';
+  defaultValue?: VedTypes;
+};
+
+/**
+ * @title Поле
+ * @default { "fieldType": "common" }
+ */
+export type FieldDef = FieldCommonDef | FieldVedDef;
+
+/** @hidden */
+type TypeFormFieldDef =
+  | 'ACQR'
+  | 'ANALITIC'
+  | 'ANTIFRAUD'
+  | 'BCRD'
+  | 'BROK'
+  | 'BROKACCOUNT'
+  | 'COLLECTION'
+  | 'CORRUPTION'
+  | 'CRED'
+  | 'DPST'
+  | 'PRODUCT'
+  | 'SELFCOLLECTION'
+  | 'KVED'
+  | 'ULTRASERVICE'
+  | 'PREMIUMSERVICE'
+  | 'FEEDBACK'
+  | 'OUTSERVICE';
+
+/**
+ * @title Количество колонок
+ * @enumNames ["Одна", "Две"]
+ */
+export type FormColumnsCount = 1 | 2;
+
+/** @hidden */
+export type EndpointType = 'lead' | 'sendcorporatelead';
+
+/**
+ * @title Секция полей ввода
+ */
+export type SectionsProps = TitleProps & {
+  columns?: FormColumnsCount;
+  inputs?: FieldDef[];
+};
+
+/**
+ * @title Форма заявки настраиваемая
+ */
+export type ApplicationLeadFormContent = UniBlockContent &
+  TitleProps & {
+    /** @title Кнопка */
+    button?: SubmitButtonProps;
+    /**
+     * @title Условия передачи данных
+     * @required ["text", "href"]
+     */
+    link?: TextProps & {
+      /** @title URL (href) */
+      href?: string;
+      /** @default "" */
+      target?: Target;
+    };
+    typeForm?: TypeFormFieldDef;
+    /** @hidden */
+    sections?: SectionsProps[];
+    endpoint?: EndpointType;
+  };

package/mobile/src/components/ApplicationLeadForm/Footnote.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type TextProps } from '../../model/HeadlineType';
+import { type LinkProps } from '../../model/LinkProps';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+
+type FootnoteProps = TextProps & {
+  link?: LinkProps;
+};
+
+export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
+  <Paragraph size="text-l" font="font-light" color="text-secondary-text">
+    {text ? <Text>{text}</Text> : null}
+    {link ? (
+      <LinkButton
+        href={link.href}
+        ariaLabel="условия передачи данных"
+        target={link.target || ''}
+        className="!text-left text-primary-main"
+      >
+        <Text>{link.text}</Text>
+      </LinkButton>
+    ) : null}
+  </Paragraph>
+));

package/mobile/src/components/ApplicationLeadForm/getFormatData.tsx

@@ -0,0 +1,17 @@
+import { type Option } from '../../ui-kit/Select/Option';
+import { type FormState } from './getInitialFormState';
+
+export const getFormatData = (data: FormState): Record<string, any> => {
+  const { region, ...usedData } = data;
+  const formatData = {
+    ...usedData,
+    ...getRegion(region),
+  };
+
+  return Object.fromEntries(
+    Object.entries(formatData as FormState)?.map(([k, v]) => [k, v?.key || v]),
+  );
+};
+
+const getRegion = (region?: Option): Record<string, string> =>
+  region?.key || region?.text ? { region: region?.text || region?.key } : {};

package/mobile/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -0,0 +1,71 @@
+import {
+  FEEDBACK_METHOD,
+  FEEDBACK_TYPES,
+  SERVICE_DIRECTIONS,
+  SERVICE_TYPES,
+} from '../../ui-kit/FormField/constants';
+import { ACQUIRING_TYPES } from '../../ui-kit/FormField/Fields/AcquiringField';
+import { VED_TYPES } from '../../ui-kit/FormField/Fields/VedField';
+import { type Option } from '../../ui-kit/Select/Option';
+import { type FieldDef } from './ApplicationLeadFormContent';
+
+export interface FormState {
+  typeForm?: Option | string;
+  surname?: string;
+  name?: string;
+  middleName?: string;
+  birthday?: Date;
+  phone?: string;
+  secondaryPhone?: string;
+  email?: string;
+  acquiringType?: Option;
+  serviceType?: Option;
+  feedbackType?: Option;
+  vedTypes?: string;
+  region?: Option;
+  onlineCheckout?: boolean;
+  posTerminal?: boolean;
+  term?: number;
+  amount?: number;
+  annualRevenue?: string;
+  consentDataProcessing?: boolean;
+}
+
+const initialFormState = {
+  typeForm: '',
+  region: { key: '', text: '' },
+  addressBranch: { key: '', text: '' },
+  surname: '',
+  name: '',
+  phone: '',
+  secondaryPhone: '',
+  comment: '',
+  product: '',
+  partnerComments: '',
+  annualRevenue: '',
+  term: 12,
+  amount: 100000,
+  acquiringType: ACQUIRING_TYPES[0],
+  serviceType: SERVICE_TYPES[0],
+  feedbackType: FEEDBACK_TYPES[0],
+  feedbackMethod: FEEDBACK_METHOD[0],
+  serviceDirection: SERVICE_DIRECTIONS[0],
+  vedTypes: VED_TYPES[0],
+  birthday: undefined,
+  isClient: false,
+  onlineCheckout: false,
+  posTerminal: false,
+  consentToReceiveMaterials: false,
+  consentDataProcessing: false,
+};
+
+export const getInitialFormState = (inputs: FieldDef[], typeForm = ''): FormState => {
+  const formState = Object.fromEntries(
+    inputs.map((_) => [
+      _.name,
+      (_.fieldType === 'ved' && _?.defaultValue) || initialFormState[_.name],
+    ]),
+  );
+
+  return { ...formState, typeForm: { key: '' || typeForm, text: '' } };
+};

package/mobile/src/components/ApplicationLeadForm/renderAgreementSubmit.tsx

@@ -0,0 +1,28 @@
+import { type FieldProps } from '../../hooks/useForm';
+import { type LinkProps } from '../../model/LinkProps';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { agreementValidator } from '../../ui-kit/FormField/validators';
+import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
+import { withValidator } from '../../validation/withValidator';
+import { type SubmitButtonProps } from './ApplicationLeadFormContent';
+import { Footnote } from './Footnote';
+import { renderSubmitButton } from './renderSubmitButton';
+
+export const renderAgreementSubmit = (
+  consentDataProcessing?: FieldProps<boolean>,
+  link?: LinkProps,
+  button?: SubmitButtonProps,
+) => (
+  <div className="flex col-span-2 gap-xs flex-col w-full items-baseline">
+    <div>
+      <div className="flex gap-3 items-center">
+        <Checkbox {...consentDataProcessing} />
+        <Footnote link={link} />
+      </div>
+      {consentDataProcessing
+        ? renderErrorText(withValidator(consentDataProcessing, agreementValidator).error)
+        : null}
+    </div>
+    {renderSubmitButton(button)}
+  </div>
+);

package/mobile/src/components/ApplicationLeadForm/renderSubmitButton.tsx

@@ -0,0 +1,9 @@
+import { Button } from '../../ui-kit/Button/Button';
+import { style } from '../../utils/style';
+import { type SubmitButtonProps } from './ApplicationLeadFormContent';
+
+export const renderSubmitButton = (button?: SubmitButtonProps, className?: string) => (
+  <Button className={style('w-full @xl:w-auto', className)} type="submit">
+    {button?.text ? button.text : 'Отправить заявку'}
+  </Button>
+);

package/mobile/src/components/Blocks.ts

@@ -2,6 +2,7 @@ import { type BlocksRegistry } from '../model/BlocksRegistry';
 
 import { AdTile } from './AdTile/AdTile';
 import { ApplicationForm } from './ApplicationForm/ApplicationForm';
+import { ApplicationLeadForm } from './ApplicationLeadForm/ApplicationLeadForm';
 import { BankAccountFiltration } from './BankAccountFiltration/BankAccountFiltration';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -50,6 +51,7 @@ import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 export const Blocks: BlocksRegistry = {
   AdTile,
   ApplicationForm,
+  ApplicationLeadForm,
   BankAccountFiltration,
   BenefitsBlock,
   BonusBenefitsBlock,

package/mobile/src/ui-kit/FormField/CustomFieldProps.ts

@@ -0,0 +1,8 @@
+import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
+import { type FormFieldRegisterer } from '../../hooks/useForm';
+
+export interface CustomFieldProps {
+  field: FormFieldRegisterer<any>;
+  input?: FieldDef;
+  url?: string;
+}

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

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type Option } from '../../Select/Option';
+import { SelectControl } from '../../Select/SelectControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+export const ACQUIRING_TYPES: Option[] = [
+  {
+    text: 'Торговый эквайринг',
+    key: 'trade',
+  },
+  {
+    text: 'СБП-эквайринг',
+    key: 'sbp',
+  },
+  {
+    text: 'Интернет-эквайринг',
+    key: 'internet',
+  },
+  {
+    text: 'Все виды эквайринга',
+    key: 'all',
+  },
+];
+
+export const AcquiringField = JSX<CustomFieldProps>(({ field, input }) => (
+  <SelectControl
+    label="Вид эквайринга"
+    placeholder="Выберите эквайринг"
+    options={ACQUIRING_TYPES}
+    {...getValidation(field('acquiringType'), validatorObj.acquiringType, input?.required)}
+  />
+));
+
+export const isAcquiringTrade = (key = ''): boolean => Boolean(key === 'trade' || key === 'all');

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

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBranches } from '../../../hooks/useBranches';
+import { useBranchesByRegions } from '../../../hooks/useBranchesByRegions';
+import { SelectControl } from '../../Select/SelectControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+interface RegionFieldProps extends CustomFieldProps {
+  isPremium?: boolean;
+}
+
+export const AddressBranchField = JSX<RegionFieldProps>(({ field, input, isPremium = false }) => {
+  const fieldRegion = field('region');
+  const regionKey = fieldRegion?.value?.key as string;
+  const regionText = fieldRegion?.value?.text as string;
+  const addressBranch = isPremium
+    ? useBranchesByRegions()?.find((_) => _?.region === regionText)?.branches
+    : useBranches(regionKey)?.filter((branch) => branch?.address);
+  useEffect(() => {
+    if (fieldRegion?.value?.key !== '') {
+      field?.('addressBranch')?.onChange?.('');
+    }
+  }, [fieldRegion?.value]);
+
+  return (
+    <SelectControl
+      label="Отделение"
+      placeholder="Выберите отделение"
+      options={(addressBranch || []).map(({ address = '' }) => ({
+        key: address,
+        text: address,
+      }))}
+      {...getValidation(field('addressBranch'), validatorObj.addressBranch, input?.required)}
+      isSearch={true}
+    />
+  );
+});

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

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputRange } from '../../InputRange/InputRange';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+const MIN_CREDIT_AMOUNT = 1000;
+const MAX_CREDIT_AMOUNT = 1000000000;
+const ITEMS_CREDIT_AMOUNT = ['От 1 000 ₽', 'До 1 000 000 000 ₽'];
+
+export const AmountField = JSX<CustomFieldProps>(({ field }) => (
+  <InputRange
+    title="Сумма, ₽"
+    items={ITEMS_CREDIT_AMOUNT}
+    min={MIN_CREDIT_AMOUNT}
+    max={MAX_CREDIT_AMOUNT}
+    {...field('amount')}
+  />
+));

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

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+export const CommentField = JSX<CustomFieldProps>(({ field, input }) => (
+  <InputControl
+    className="col-span-2"
+    {...getValidation(field('comment'), validatorObj.comment, input?.required)}
+    placeholder="Ваше сообщение"
+    isTextarea={true}
+  />
+));

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

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { withValidator } from '../../../validation/withValidator';
+import { SelectControl } from '../../Select/SelectControl';
+import { FEEDBACK_METHOD } from '../constants';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+
+export const FeedbackMethodField = JSX<CustomFieldProps>(({ field }) => (
+  <SelectControl
+    label="Способ получения ответа"
+    options={FEEDBACK_METHOD}
+    {...withValidator(field('feedbackMethod'), validatorObj.feedbackMethod)}
+  />
+));

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

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { withValidator } from '../../../validation/withValidator';
+import { SelectControl } from '../../Select/SelectControl';
+import { FEEDBACK_TYPES, SERVICE_DIRECTIONS } from '../constants';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+
+export const FeedbackTypeField = JSX<CustomFieldProps>(({ field }) => {
+  const feedbackType = field('feedbackType');
+  useEffect(() => {
+    if (feedbackType?.value?.key === 'FEEDBACK') {
+      field('serviceDirection')?.onChange?.(SERVICE_DIRECTIONS[0]);
+    }
+  }, [feedbackType?.value]);
+
+  return (
+    <SelectControl
+      label="Тема"
+      placeholder="Выберите тему"
+      options={FEEDBACK_TYPES}
+      {...withValidator(feedbackType, validatorObj.feedbackType)}
+    />
+  );
+});

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

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { CheckboxWithError } from '../../Checkbox/CheckboxWithError';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const IsClientField = JSX<CustomFieldProps>(({ field }) => (
+  <CheckboxWithError {...field('isClient')} text='Являюсь клиентом банка АО "Россельхозбанк"' />
+));

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

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useRegions } from '../../../hooks/useRegions';
+import { SelectControl } from '../../Select/SelectControl';
+import { OUT_SERVICE_URL } from '../constants';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+type RegionFieldProps = CustomFieldProps;
+
+export const LocalitiesField = JSX<RegionFieldProps>(({ field, input }) => {
+  const fieldRegion = field('region');
+  const regionKey = fieldRegion?.value?.key;
+  const localities = useRegions(OUT_SERVICE_URL)
+    ?.find((_) => _.code === regionKey)
+    ?.localities?.map((_) => ({ key: _, text: _ }));
+
+  useEffect(() => {
+    if (regionKey !== '') {
+      field?.('localities')?.onChange?.('');
+    }
+  }, [regionKey]);
+
+  return (
+    <SelectControl
+      label="Населенный пункт"
+      placeholder="Выберите город, где доступен сервис"
+      options={localities}
+      {...getValidation(field('localities'), validatorObj.localities, input?.required)}
+      isSearch={true}
+    />
+  );
+});

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

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const MiddleNameField = JSX<CustomFieldProps>(({ field }) => (
+  <InputControl label="Отчество (Обязательно, при наличии)" {...field('middleName')} />
+));

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

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type FieldDef } from '../../../components/ApplicationForm/ApplicationFormContent';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+export const NameField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { required, ...rest } = input as FieldDef;
+
+  return (
+    <InputControl
+      label="Имя"
+      {...getValidation(field('name'), validatorObj.name, required)}
+      {...rest}
+    />
+  );
+});

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

@@ -0,0 +1,10 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SlideCheckbox } from '../../SlideCheckbox/SlideCheckbox';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { isAcquiringTrade } from './AcquiringField';
+
+export const OnlineCheckoutField = JSX<CustomFieldProps>(({ field }) =>
+  isAcquiringTrade(field('acquiringType')?.value?.key as string) ? (
+    <SlideCheckbox type="radio" text="Хочу онлайн-кассу" {...field('onlineCheckout')} />
+  ) : null,
+);