@redneckz/wildless-cms-uni-blocks 0.14.573 → 0.14.575

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

@@ -12,9 +12,15 @@ 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 {
+  type ApplicationLeadFormContent,
+  type FieldDef,
+  type GroupedConsentsProps,
+} from './ApplicationLeadFormContent';
+import { CONSENTS } from './consents';
 import { getFormatData } from './getFormatData';
 import { getInitialFormState, type FormState } from './getInitialFormState';
+import { GroupedConsents } from './GroupedConsents';
 import { renderSubmitButton } from './renderSubmitButton';
 
 interface ApplicationLeadFormProps extends ApplicationLeadFormContent, UniBlockProps {}
@@ -66,7 +72,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
               className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
             >
               {renderTitle(_.title)}
-              {(_?.inputs || [])?.map(getField(field, typeForm))}
+              {renderInputs({ field, typeForm, inputs: _?.inputs })}
             </div>
           ))}
           {renderSubmitButton(button)}
@@ -75,3 +81,21 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     );
   },
 );
+
+const renderInputs = ({ field, typeForm = '', inputs }: GroupedConsentsProps) => {
+  const { consentInputs, restInputs } = splitInputs(inputs || []);
+
+  return consentInputs.length > 2 ? (
+    <div>
+      {restInputs.map(getField(field, typeForm))}
+      <GroupedConsents inputs={consentInputs} field={field} />
+    </div>
+  ) : (
+    (inputs || [])?.map(getField(field, typeForm))
+  );
+};
+
+const splitInputs = (inputs?: FieldDef[]) => ({
+  consentInputs: inputs?.filter((_) => CONSENTS.includes(_.name)) || [],
+  restInputs: inputs?.filter((_) => !CONSENTS.includes(_.name)) || [],
+});

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

@@ -1,9 +1,11 @@
 /* eslint-disable max-len */
 
+import { type FormFieldRegisterer } from '../../hooks/useForm';
 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';
+import { type FormState } from './getInitialFormState';
 
 interface Required {
   /** @title Обязательно для заполнения */
@@ -53,7 +55,13 @@ export type NameFieldDef =
   | 'localities'
   | 'partnerComments'
   | 'consentDataProcessing'
-  | 'consentToAllDocs';
+  | 'consentInformFlg'
+  | 'consentCollectionFlg'
+  | 'consentAssignmentClaimsFlg'
+  | 'consentPhotoFlg'
+  | 'consentPfrFlg'
+  | 'consentProviderFlg'
+  | 'processPersonalDataLeadFlg';
 
 export type ConditionFieldProps = {
   /** @title Условия отображения полей формы */
@@ -160,3 +168,10 @@ export type ApplicationLeadFormContent = UniBlockContent &
     sections?: SectionsProps[];
     endpoint?: EndpointType;
   };
+
+/** @hidden */
+export interface GroupedConsentsProps {
+  inputs?: FieldDef[];
+  typeForm?: TypeFormFieldDef | string;
+  field: FormFieldRegisterer<FormState>;
+}

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

@@ -0,0 +1,79 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { type VNode } from '../../model/VNode';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { getField } from '../../ui-kit/FormField/getField';
+import { validatorObj } from '../../ui-kit/FormField/getObjectValidator';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
+import { withValidator } from '../../validation/withValidator';
+import { type GroupedConsentsProps } from './ApplicationLeadFormContent';
+import { type FormState } from './getInitialFormState';
+
+const CONSENT_ALL_DOCS_TEXT = 'Согласие на все документы';
+const CONSENT_REQUIRED = 'Отметьте все обязательные соглашения';
+
+export const GroupedConsents = JSX<GroupedConsentsProps>(
+  ({ inputs = [], typeForm = '', field, key }) => {
+    const isChecked = inputs.every((_) => Boolean(field(_.name).value));
+
+    const handleGeneralToggle = (value: boolean) => {
+      for (const item of inputs) {
+        const itemField = field(item.name as keyof FormState);
+        itemField?.onChange && itemField.onChange(value);
+      }
+    };
+
+    const hasValidationErrors = useMemo(
+      () =>
+        inputs
+          ?.filter((_) => _.required)
+          ?.some((_) => Boolean(withValidator(field(_?.name), validatorObj[_?.name]).error)),
+      [inputs],
+    );
+
+    return (
+      <div className="w-fit">
+        <Foldable
+          isFoldButtonOnTop
+          renderFoldableSection={({ isUnfolded }) => (
+            <FoldableSection isUnfolded={isUnfolded} className="flex flex-col pl-2xl">
+              {inputs.map(getField(field, typeForm))}
+            </FoldableSection>
+          )}
+          renderFoldButton={renderGeneralCheckbox(
+            <div>
+              <Checkbox
+                value={isChecked}
+                onChange={handleGeneralToggle}
+                text={CONSENT_ALL_DOCS_TEXT}
+                key={key}
+              />
+              {renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')}
+            </div>,
+          )}
+        />
+      </div>
+    );
+  },
+);
+
+const renderGeneralCheckbox =
+  (generalCheckBox: VNode) =>
+  (foldableData: FoldablePartProps): VNode =>
+    (
+      <div className="flex items-start">
+        {generalCheckBox}
+        <button onClick={foldableData.onToggle} className="px-m py-2xs">
+          <Icon
+            className="text-primary-text"
+            name={foldableData.isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+            width="16"
+            height="16"
+          />
+        </button>
+      </div>
+    );

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

@@ -0,0 +1,10 @@
+export const CONSENTS = [
+  'processPersonalDataLeadFlg',
+  'consentProviderFlg',
+  'consentPfrFlg',
+  'consentPhotoFlg',
+  'consentAssignmentClaimsFlg',
+  'consentCollectionFlg',
+  'consentInformFlg',
+  'consentToReceiveMaterials',
+];

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

@@ -14,6 +14,7 @@ export interface FormState {
   surname?: string;
   name?: string;
   middleName?: string;
+  fullName?: string;
   birthday?: Date;
   phone?: string;
   secondaryPhone?: string;
@@ -28,7 +29,28 @@ export interface FormState {
   term?: number;
   amount?: number;
   annualRevenue?: string;
+  serviceDirection?: string;
+  desiredMeetingDate?: string;
+  inn?: number;
+  addressBranch?: string;
+  bankEmpolee?: string;
+  applicationDate?: string;
+  comment?: string;
+  isClient?: boolean;
+  feedbackMethod?: string;
+  collectionCount?: number;
+  product?: string;
+  localities?: string[];
+  partnerComments?: string;
   consentDataProcessing?: boolean;
+  processPersonalDataLeadFlg?: boolean;
+  consentProviderFlg?: boolean;
+  consentPfrFlg?: boolean;
+  consentPhotoFlg?: boolean;
+  consentAssignmentClaimsFlg?: boolean;
+  consentCollectionFlg?: boolean;
+  consentInformFlg?: boolean;
+  consentToReceiveMaterials?: boolean;
 }
 
 const initialFormState = {
@@ -57,6 +79,12 @@ const initialFormState = {
   posTerminal: false,
   consentToReceiveMaterials: false,
   consentDataProcessing: false,
+  processPersonalDataLeadFlg: false,
+  consentProviderFlg: false,
+  consentPhotoFlg: false,
+  consentAssignmentClaimsFlg: false,
+  consentCollectionFlg: false,
+  consentInformFlg: false,
 };
 
 export const getInitialFormState = (inputs: FieldDef[], typeForm = ''): FormState => {

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -2,21 +2,19 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import { type VNode } from '../../model/VNode';
-import { Button } from '../../ui-kit/Button/Button';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Text } from '../../ui-kit/Text/Text';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
-import { getVersion } from '../../utils/getVersion';
 import { style } from '../../utils/style';
+import { FILTRATION_LABELS, FILTRATION_PREDICATES, INITIAL_FILTRATION_STATE } from './filters';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { renderButtonsGroup } from './renderButtonsGroup';
 import { renderDescriptionBlock } from './renderDescriptionBlock';
-import { renderFiltrationForm } from './renderFiltrationForm';
+import { renderFiltrationForm, type RenderFiltrationFormOptions } from './renderFiltrationForm';
+import { renderHeading } from './renderHeading';
 import { type BalloonContent } from './YandexMapProps';
 
 const defaultEmptyFunction = () => void 0;
-const defaultFilterItems = () => [];
 
 export type InitFilterState = Record<string, boolean>;
 
@@ -46,15 +44,13 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
     remoteWorkplaces = [],
     renderCard = defaultEmptyFunction,
     renderRemoteWorkplaceCard = defaultEmptyFunction,
-    filterItems = defaultFilterItems,
     getBalloon = defaultEmptyFunction,
     getBalloonRemoteWorkplaces = defaultEmptyFunction,
-    initFilterState = {},
     descriptionData,
     title,
   }) => {
     const onlyOffice = title?.includes('Офис');
-    const [filtrationState, { field, reset }] = useForm(initFilterState);
+    const [filtrationState, { field, reset }] = useForm(INITIAL_FILTRATION_STATE);
 
     const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
       const _filteredItems = filterItems(data, filtrationState);
@@ -83,6 +79,13 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
 
     const [activeButton, setActiveButton] = useState('all');
 
+    const filterOptions: RenderFiltrationFormOptions = {
+      filters: getFiltersWithNonEmptyData([...data, ...remoteWorkplaces]),
+      field: { field, reset },
+      onlyOffice,
+      labels: FILTRATION_LABELS,
+    };
+
     return (
       <div className={style('space-y-1', className)}>
         <div className="bg-white">
@@ -91,7 +94,7 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
             {descriptionData ? renderDescriptionBlock(descriptionData) : null}
             {onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton)}
             <div className={style('pb-3xl', filtersVisibleStyles(activeButton))}>
-              {renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice)}
+              {renderFiltrationForm(filterOptions)}
             </div>
           </div>
           <div className="h-[600px]">
@@ -109,55 +112,16 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
   },
 );
 
-const renderHeading = (title?: string, lengthItems?: number) => (
-  <div className="flex flex-col sm:flex-row gap-xs mb-2xl">
-    <Heading headingType="h3">
-      <span suppressHydrationWarning={true}>{title}</span>
-      {lengthItems ? (
-        <Text size="text-h2" color="text-secondary-text">
-          <span suppressHydrationWarning={true}>{` (${lengthItems})`}</span>
-        </Text>
-      ) : null}
-    </Heading>
-  </div>
-);
-
-const renderButtonsGroup = (
-  data: Branch[],
-  activeButton: string,
-  onButtonClick: (item: string) => void,
+export const filterItems = (
+  data: (Branch | RemoteWorkplace)[],
+  filtrationState: Record<string, boolean>,
 ) => {
-  const allButtonVersion = getVersion(activeButton === 'all');
-
-  const businessButtonVersion = getVersion(activeButton === 'business');
+  const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
 
-  const handleClick = (e: any, key: string, branches: Branch[]) => {
-    if (e.currentTarget === e.target && key === 'business') {
-      branches.filter(
-        (branch) =>
-          branch.workSchedule &&
-          branch.workSchedule.businessScheduleVisibleTag &&
-          !branch.workSchedule.businessScheduleDescription,
-      );
-    }
-
-    onButtonClick(key);
-
-    return branches;
-  };
+  return data.filter((item) => truthyFilters.every((_) => FILTRATION_PREDICATES[_](item)));
+};
 
-  return (
-    <div className="flex gap-lg flex-col sm:flex-row pb-lg">
-      <Button data-id="all" onClick={(e) => handleClick(e, 'all', data)} version={allButtonVersion}>
-        Для физических лиц
-      </Button>
-      <Button
-        data-id="business"
-        onClick={(e) => handleClick(e, 'business', data)}
-        version={businessButtonVersion}
-      >
-        Для юридических лиц
-      </Button>
-    </div>
+export const getFiltersWithNonEmptyData = (data: (Branch | Atm | RemoteWorkplace)[]) =>
+  Object.keys(INITIAL_FILTRATION_STATE).filter(
+    (_) => data.filter((item) => FILTRATION_PREDICATES[_](item)).length,
   );
-};

package/mobile/src/components/OfficesAtmsMap/OfficesMap.tsx

@@ -1,46 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLocation } from '../../hooks/useLocation';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
-import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 import { getOfficePoint, renderOfficeCard } from './renderOfficeCard';
 import { getRemoteWorkplacePoint, renderRemoteWorkplaceCard } from './renderRemoteWorkplaceCard';
 import { useOffices } from './useOffices';
 
-const INITIAL_FILTRATION_STATE = {
-  workingSaturday: false,
-  premiumService: false,
-  privateBanking: false,
-  remoteWorkplace: false,
-  serviceDisabledPeople: false,
-  sellingCoins: false,
-  buyingCoins: false,
-  bullionOperations: false,
-  preciousMetalsOperations: false,
-  transferringDataToBiometricSystem: false,
-};
-
-const FILTRATION_PREDICATES = {
-  workingSaturday: (item: Branch | RemoteWorkplace) =>
-    Boolean('workSchedule' in item && item.workSchedule?.workingSaturday),
-  premiumService: (item: Branch | RemoteWorkplace) =>
-    Boolean('premiumService' in item && item.premiumService),
-  privateBanking: (item: Branch | RemoteWorkplace) =>
-    Boolean('privateBanking' in item && item.privateBanking),
-  remoteWorkplace: (item: Branch | RemoteWorkplace) => Boolean('workScheduleDescription' in item),
-  serviceDisabledPeople: (item: Branch | RemoteWorkplace) =>
-    Boolean('serviceDisabledPeople' in item && item.serviceDisabledPeople),
-  sellingCoins: (item: Branch | RemoteWorkplace) =>
-    Boolean('sellingCoins' in item && item.sellingCoins),
-  buyingCoins: (item: Branch | RemoteWorkplace) =>
-    Boolean('buyingCoins' in item && item.buyingCoins),
-  bullionOperations: (item: Branch | RemoteWorkplace) =>
-    Boolean('bullionOperations' in item && item.bullionOperations),
-  preciousMetalsOperations: (item: Branch | RemoteWorkplace) =>
-    Boolean('preciousMetalsOperations' in item && item.preciousMetalsOperations),
-  transferringDataToBiometricSystem: (item: Branch | RemoteWorkplace) =>
-    Boolean('transferringDataToBiometricSystem' in item && item.transferringDataToBiometricSystem),
-};
-
 export interface OfficesMapProps {
   className?: string;
 }
@@ -53,11 +17,9 @@ export const OfficesMap = JSX<OfficesMapProps>(({ className }) => {
   return (
     <OfficesAtmsMapLayout
       className={className}
-      filterItems={filterItems}
       data={data?.branches}
       isLoad={isLoad}
       remoteWorkplaces={data?.remoteWorkplaces}
-      initFilterState={INITIAL_FILTRATION_STATE}
       renderCard={renderOfficeCard}
       renderRemoteWorkplaceCard={renderRemoteWorkplaceCard}
       getBalloon={getOfficePoint}
@@ -66,12 +28,3 @@ export const OfficesMap = JSX<OfficesMapProps>(({ className }) => {
     />
   );
 });
-
-const filterItems = (
-  data: (Branch | RemoteWorkplace)[],
-  filtrationState: Record<string, boolean>,
-) => {
-  const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
-
-  return data.filter((item) => truthyFilters.every((_) => FILTRATION_PREDICATES[_](item)));
-};

package/mobile/src/components/OfficesAtmsMap/filters.ts

@@ -0,0 +1,56 @@
+import type { Branch, RemoteWorkplace } from './OfficesAtmsMapProps';
+
+export const INITIAL_FILTRATION_STATE = {
+  workingSaturday: false,
+  premiumService: false,
+  privateBanking: false,
+  remoteWorkplace: false,
+  serviceDisabledPeople: false,
+  sellingCoins: false,
+  buyingCoins: false,
+  bullionOperations: false,
+  preciousMetalsOperations: false,
+  transferringDataToBiometricSystem: false,
+};
+
+export const FILTRATION_LABELS = {
+  safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
+  workingSaturday: 'Открыты по субботам',
+  terminalTypeAtms: 'Банкоматы',
+  terminalTypeTerm: 'Терминалы',
+  workAllTime: 'Круглосуточно',
+  billAcceptorEnable: 'Прием наличных',
+  premiumService: 'Премиальное обслуживание',
+  privateBanking: 'Услуга Private banking',
+  sellingCoins: 'Продажа монет из драгоценных металлов',
+  buyingCoins: 'Покупка монет из драгоценных металлов',
+  bullionOperations: 'Операции со слитками',
+  preciousMetalsOperations: 'Операции с драгоценными металлами',
+  transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
+  locationDisabledPeople: 'Для маломобильных',
+  designDisabledPeople: 'Для слабовидящих',
+  remoteWorkplace: 'Удаленное рабочее место',
+  serviceDisabledPeople: 'Для маломобильных граждан',
+};
+
+export const FILTRATION_PREDICATES = {
+  workingSaturday: (item: Branch | RemoteWorkplace) =>
+    Boolean('workSchedule' in item && item.workSchedule?.workingSaturday),
+  premiumService: (item: Branch | RemoteWorkplace) =>
+    Boolean('premiumService' in item && item.premiumService),
+  privateBanking: (item: Branch | RemoteWorkplace) =>
+    Boolean('privateBanking' in item && item.privateBanking),
+  remoteWorkplace: (item: Branch | RemoteWorkplace) => Boolean('workScheduleDescription' in item),
+  serviceDisabledPeople: (item: Branch | RemoteWorkplace) =>
+    Boolean('serviceDisabledPeople' in item && item.serviceDisabledPeople),
+  sellingCoins: (item: Branch | RemoteWorkplace) =>
+    Boolean('sellingCoins' in item && item.sellingCoins),
+  buyingCoins: (item: Branch | RemoteWorkplace) =>
+    Boolean('buyingCoins' in item && item.buyingCoins),
+  bullionOperations: (item: Branch | RemoteWorkplace) =>
+    Boolean('bullionOperations' in item && item.bullionOperations),
+  preciousMetalsOperations: (item: Branch | RemoteWorkplace) =>
+    Boolean('preciousMetalsOperations' in item && item.preciousMetalsOperations),
+  transferringDataToBiometricSystem: (item: Branch | RemoteWorkplace) =>
+    Boolean('transferringDataToBiometricSystem' in item && item.transferringDataToBiometricSystem),
+};

package/mobile/src/components/OfficesAtmsMap/renderButtonsGroup.tsx

@@ -0,0 +1,43 @@
+import { Button } from '../../ui-kit/Button/Button';
+import { getVersion } from '../../utils/getVersion';
+import type { Branch } from './OfficesAtmsMapProps';
+
+export const renderButtonsGroup = (
+  data: Branch[],
+  activeButton: string,
+  onButtonClick: (item: string) => void,
+) => {
+  const allButtonVersion = getVersion(activeButton === 'all');
+
+  const businessButtonVersion = getVersion(activeButton === 'business');
+
+  const handleClick = (e: any, key: string, branches: Branch[]) => {
+    if (e.currentTarget === e.target && key === 'business') {
+      branches.filter(
+        (branch) =>
+          branch.workSchedule &&
+          branch.workSchedule.businessScheduleVisibleTag &&
+          !branch.workSchedule.businessScheduleDescription,
+      );
+    }
+
+    onButtonClick(key);
+
+    return branches;
+  };
+
+  return (
+    <div className="flex gap-lg flex-col sm:flex-row pb-lg">
+      <Button data-id="all" onClick={(e) => handleClick(e, 'all', data)} version={allButtonVersion}>
+        Для физических лиц
+      </Button>
+      <Button
+        data-id="business"
+        onClick={(e) => handleClick(e, 'business', data)}
+        version={businessButtonVersion}
+      >
+        Для юридических лиц
+      </Button>
+    </div>
+  );
+};

package/mobile/src/components/OfficesAtmsMap/renderFiltrationForm.tsx

@@ -8,37 +8,25 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import { type IconName } from '../../ui-kit/Icon/IconProps';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 
-const FILTRATION_LABELS = {
-  safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
-  workingSaturday: 'Открыты по субботам',
-  terminalTypeAtms: 'Банкоматы',
-  terminalTypeTerm: 'Терминалы',
-  workAllTime: 'Круглосуточно',
-  billAcceptorEnable: 'Прием наличных',
-  premiumService: 'Премиальное обслуживание',
-  privateBanking: 'Услуга Private banking',
-  sellingCoins: 'Продажа монет из драгоценных металлов',
-  buyingCoins: 'Покупка монет из драгоценных металлов',
-  bullionOperations: 'Операции со слитками',
-  preciousMetalsOperations: 'Операции с драгоценными металлами',
-  transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
-  locationDisabledPeople: 'Для маломобильных',
-  designDisabledPeople: 'Для слабовидящих',
-  remoteWorkplace: 'Удаленное рабочее место',
-  serviceDisabledPeople: 'Для маломобильных граждан',
-};
-
 const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
 
-export const renderFiltrationForm = (
-  filters: string[],
-  { field, reset }: { field: FormFieldRegisterer<any>; reset: () => void },
-  onlyOffice?: boolean,
-) => {
+export interface RenderFiltrationFormOptions {
+  filters: string[];
+  field: { field: FormFieldRegisterer<any>; reset: () => void };
+  onlyOffice?: boolean;
+  labels: Record<string, string>;
+}
+
+export const renderFiltrationForm = ({
+  filters,
+  field: { field, reset },
+  onlyOffice,
+  labels,
+}: RenderFiltrationFormOptions) => {
   const visibleFiltersNum = onlyOffice ? 5 : 6;
 
   const filtersCheckbox = (filters || []).map((key) => (
-    <Checkbox key={key} text={FILTRATION_LABELS[key]} {...field(key)} />
+    <Checkbox key={key} text={labels[key]} {...field(key)} />
   ));
 
   const [visibleFilters, hiddenFilters] =

package/mobile/src/components/OfficesAtmsMap/renderHeading.tsx

@@ -0,0 +1,15 @@
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Text } from '../../ui-kit/Text/Text';
+
+export const renderHeading = (title?: string, lengthItems?: number) => (
+  <div className="flex flex-col sm:flex-row gap-xs mb-2xl">
+    <Heading headingType="h3">
+      <span suppressHydrationWarning={true}>{title}</span>
+      {lengthItems ? (
+        <Text size="text-h2" color="text-secondary-text">
+          <span suppressHydrationWarning={true}>{` (${lengthItems})`}</span>
+        </Text>
+      ) : null}
+    </Heading>
+  </div>
+);

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

@@ -7,9 +7,3 @@ export interface CheckboxProps {
   onChange?: (value: boolean) => void;
   error?: string;
 }
-
-export interface CheckboxGroupProps {
-  className?: string;
-  items?: CheckboxProps[];
-  text?: string;
-}

package/mobile/src/ui-kit/Checkbox/CheckboxWithError.tsx

@@ -6,7 +6,7 @@ import { type CheckboxProps } from './CheckboxProps';
 
 export const CheckboxWithError = JSX<CheckboxProps>(
   ({ className, text, value, key, disabled, error, onChange }) => (
-    <div className={style('shrink-0 w-full', className)}>
+    <div className={style('shrink-0', className)}>
       <Checkbox key={key} text={text} value={value} disabled={disabled} onChange={onChange} />
       {renderErrorText(error)}
     </div>

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

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { withValidator } from '../../../validation/withValidator';
+import { CheckboxWithError } from '../../Checkbox/CheckboxWithError';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+
+export const ConsentAssignmentField = JSX<CustomFieldProps>(({ field }) => (
+  <CheckboxWithError
+    text="Прочие согласия (согласие на уступку прав требований)"
+    {...withValidator(field('consentAssignmentClaimsFlg'), validatorObj.consentAssignmentClaimsFlg)}
+  />
+));

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

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { withValidator } from '../../../validation/withValidator';
+import { CheckboxWithError } from '../../Checkbox/CheckboxWithError';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+
+export const ConsentCollectionField = JSX<CustomFieldProps>(({ field }) => (
+  <CheckboxWithError
+    text="Прочие согласия (согласие на взыскание по исполнительной надписи нотариуса)"
+    {...withValidator(field('consentCollectionFlg'), validatorObj.consentCollectionFlg)}
+  />
+));

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

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { withValidator } from '../../../validation/withValidator';
+import { CheckboxWithError } from '../../Checkbox/CheckboxWithError';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+
+export const ConsentInformField = JSX<CustomFieldProps>(({ field }) => (
+  <CheckboxWithError
+    text="Согласие на информирование о продуктах и услугах Банка"
+    {...withValidator(field('consentInformFlg'), validatorObj.consentInformFlg)}
+  />
+));