@redneckz/wildless-cms-uni-blocks 0.10.9 → 0.11.0

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,14 +1,12 @@
+import type { InputProps } from '../Input/InputProps';
 import type { ListContent } from '../List/ListContent';
 
-export interface InputRangeProps extends ListContent {
-  className?: string;
+export interface InputRangeProps extends ListContent, InputProps<number> {
   items?: string[];
   min?: number;
   max?: number;
   list?: number[];
   step?: number;
-  value?: number;
   title?: string;
   disabled?: boolean;
-  onChange?: (value: number) => void;
 }

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

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { LinkListProps } from './LinkListProps';
+import { linkListStyles } from './linkListStyles';
+
+export const LinkList = JSX<LinkListProps>(({ className = '', items }) =>
+  items?.length ? (
+    <ul className={style('flex flex-col p-0', linkListStyles, className)}>
+      {items.map(renderLinkListItem)}
+    </ul>
+  ) : null,
+);
+
+const renderLinkListItem = (item: LinkProps, i: number) => {
+  const { text, ...linkProps } = item;
+
+  return (
+    <li key={`list_item_${String(i)}`} className="list-none mb-4 sm:mb-6 sm:last:mb-0">
+      <a className="hover:text-primary-main sm:font-light" role="link" {...linkProps}>
+        {text ? text : null}
+      </a>
+    </li>
+  );
+};

package/mobile/src/ui-kit/LinkList/LinkListProps.tsx

@@ -0,0 +1,6 @@
+import type { LinkProps } from '../../model/LinkProps';
+
+export interface LinkListProps {
+  items?: LinkProps[];
+  className?: string;
+}

package/mobile/src/ui-kit/LinkList/linkListStyles.ts

@@ -0,0 +1 @@
+export const linkListStyles = '';

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { ListItem } from './ListItem';
 import type { ListItemSize, ListProps } from './ListProps';
 
@@ -8,28 +9,26 @@ const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   L: 'text-h5',
 };
 
-const ITEM_INDENT_MAP = {
+const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
   S: 'ml-2',
   M: 'ml-3',
   L: 'ml-4',
 };
 
 export const List = JSX<ListProps>(
-  ({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) =>
+  ({ className, hasIndent, isDotted, items, listItemSize = 'M' }) =>
     items?.length ? (
       <section
-        className={`text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${
-          TEXT_SIZE_MAP[listItemSize]
-        } ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`}
+        className={style(
+          'flex flex-col gap-2 text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text',
+          TEXT_SIZE_MAP[listItemSize],
+          hasIndent ? ITEM_INDENT_MAP[listItemSize] : '',
+          className,
+        )}
         role="list"
       >
         {items.map((item, i) => (
-          <ListItem
-            key={String(i)}
-            className={itemClassName}
-            isDotted={isDotted}
-            size={listItemSize}
-          >
+          <ListItem key={String(i)} isDotted={isDotted} size={listItemSize}>
             {item}
           </ListItem>
         ))}

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import type { ListItemSize } from './ListProps';
 
 /**
@@ -12,18 +13,21 @@ export interface ListItemProps {
 }
 
 const DOT_SIZE_MAP = {
-  L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
-  M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
-  S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
+  L: 'w-1.5 h-1.5 mr-4',
+  M: 'w-1.5 h-1.5 mr-3',
+  S: 'w-1 h-1 mr-2',
 };
 
 export const ListItem = JSX<ListItemProps>(
-  ({ className = '', isDotted = true, children, size = 'M' }) => (
-    <div className={`font-sans flex items-baseline ${className}`} role="listitem">
+  ({ className, isDotted = true, children, size = 'M' }) => (
+    <div className={style('font-sans flex', className)} role="listitem">
       {isDotted ? (
-        <div>
+        <div className="shrink-0">
           <div
-            className={`rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}`}
+            className={style(
+              'align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white',
+              DOT_SIZE_MAP[size],
+            )}
           />
         </div>
       ) : null}

package/mobile/src/ui-kit/List/ListProps.ts

@@ -16,7 +16,5 @@ export type ListProps = ListContent &
     className?: string;
     /** @title Отступ */
     hasIndent?: boolean;
-    /** @hidden */
-    itemClassName?: string;
     listItemSize?: ListItemSize;
   };

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

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useNormalizedInput } from '../../hooks/useNormalizedInput';
+import { clamp } from '../../utils/clamp';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Input } from '../Input/Input';
+import type { InputProps } from '../Input/InputProps';
+
+export interface NumberInputProps extends InputProps<string> {
+  min?: number;
+  max?: number;
+  defaultValue?: string;
+  fractionDigits?: number;
+}
+
+export const NumberInput = JSX<NumberInputProps>((props) => {
+  const { onChange, min, max, defaultValue = '0', fractionDigits = 0, ...inputProps } = props;
+  const normalizedProps = useNormalizedInput(props, {
+    normalize: (_: string | undefined = defaultValue) =>
+      min && max ? String(clamp(Number(sanitizeNumberStr(_)), min, max)) : sanitizeNumberStr(_),
+    format: toLocalNumberFormat(fractionDigits),
+  });
+
+  const handleChange = useCallback(
+    (_: string) => onChange && onChange(sanitizeNumberStr(_)),
+    [onChange],
+  );
+
+  return <Input onChange={handleChange} {...inputProps} {...normalizedProps} />;
+});
+
+const sanitizeNumberStr = (_ = ''): string =>
+  _.replaceAll(',', '.')
+    .replace(/[^\d.]/g, '')
+    .replace(/([^.]*\.[^.]*)\./, '$1');

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

@@ -6,13 +6,12 @@ import { normalizePhone } from './normalizePhone';
 
 export const PhoneInput = JSX<InputProps>(({ children, onChange, ...inputProps }) => {
   const handleChange = useCallback(
-    ({ target: { value } }: { target: { value?: string } }) =>
-      onChange && onChange(normalizePhone(value || '')),
+    (value: string) => onChange && onChange(normalizePhone(value)),
     [onChange],
   );
 
   return (
-    <Input onInput={handleChange} onFocus={handleChange} {...inputProps}>
+    <Input onChange={handleChange} onFocus={handleChange} {...inputProps}>
       {children}
     </Input>
   );

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

@@ -1,6 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { SearchBarInner, SearchBarInnerProps } from './SearchBarInner';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { CloseButton } from '../Dialog/CloseButton';
+import { useDialog } from '../Dialog/useDialog';
+import { useDialogHandlers } from '../Dialog/useDialogHandlers';
+import { SEARCH_DIALOG_ID } from '../SearchDialog/SearchDialog';
+import { SearchInput } from '../SearchDialog/SearchInput';
 
-export const SearchBar = JSX<SearchBarInnerProps>((props) => (
-  <SearchBarInner {...props} isMobile={true} />
-));
+interface SearchBarProps {
+  className?: string;
+}
+
+const MIN_QUERY_LEN = 3;
+
+export const SearchBar = JSX<SearchBarProps>(({ className }) => {
+  const [value, setValue] = useState('');
+
+  const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
+  useDialogHandlers({ onClose: resetQueryOnDialogClose });
+
+  const { open } = useDialog(SEARCH_DIALOG_ID);
+
+  const handleInitialInputChange = useCallback((_: string) => {
+    setValue(_);
+    if (isQueryLongEnough(_)) {
+      open(_);
+    }
+  }, []);
+
+  return (
+    <div className={className}>
+      <SearchInput value={value} onChange={handleInitialInputChange} />
+      <CloseButton className="absolute top-2 right-3 sm:hidden" onClick={resetQueryOnDialogClose} />
+    </div>
+  );
+});
+
+const isQueryLongEnough = (_: string) => _ && _.length >= MIN_QUERY_LEN;

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

@@ -19,7 +19,7 @@ export const SEARCH_DIALOG_ID = 'search';
 export const SearchDialog = JSX<SearchDialogProps>(({ topItems }) => {
   const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
 
-  const basePathList = topItems?.map((_) => _.href || '/');
+  const basePathList = useMemo(() => topItems?.map((_) => _.href || '/'), [topItems]);
   const [searchResult, searchInputProps] = useSearch({
     basePathList,
     initialQuery: dialogProps.message,

package/mobile/src/ui-kit/SearchDialog/SearchInput.tsx

@@ -5,7 +5,6 @@ import { Img } from '../Img/Img';
 
 export interface SearchInputProps {
   className?: string;
-  isMobile?: boolean;
   value?: string;
   autoFocus?: boolean;
   onChange?: (value: string) => void;
@@ -13,7 +12,7 @@ export interface SearchInputProps {
 }
 
 export const SearchInput = JSX<SearchInputProps>(
-  ({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+  ({ className, value, autoFocus, onChange, onFocus }) => {
     const handleChange = useCallback(
       (ev: { target?: { value?: string } }) => {
         onChange && onChange(ev.target?.value || '');
@@ -30,7 +29,6 @@ export const SearchInput = JSX<SearchInputProps>(
           className={style(
             'h-12 pl-12 w-full text-l text-black outline-none box-border',
             'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text',
-            isMobile ? '' : 'h-full',
           )}
           value={value}
           type="text"

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

@@ -20,14 +20,18 @@ interface MultipleSlideCheckboxGroupProps extends ControlProps<string[]> {
 export const SlideCheckboxGroup = JSX<SlideCheckboxGroupProps | MultipleSlideCheckboxGroupProps>(
   ({ value, onChange, items = [], multiple }) => {
     const handleChange = (newValue: string) => {
+      if (!onChange) {
+        return;
+      }
+
       if (multiple) {
         const hasAlready = value?.includes(newValue);
-        onChange &&
-          onChange(
-            hasAlready ? value?.filter((v) => v !== newValue) : [...(value || []), newValue],
-          );
+
+        onChange(
+          hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue],
+        );
       } else {
-        onChange && onChange(value === newValue ? undefined : newValue);
+        onChange(value === newValue ? '' : newValue);
       }
     };
 

package/mobile/src/utils/identity.ts

@@ -0,0 +1 @@
+export const identity = <T>(_: T) => _;

package/mobile/src/utils/isEmpty.ts

@@ -0,0 +1,6 @@
+export const isEmpty = <T>(v: T): v is NonNullable<T> =>
+  v === null ||
+  v === undefined ||
+  v === '' ||
+  (Array.isArray(v) && v.length === 0) ||
+  (typeof v === 'object' && Object.keys(v).length === 0);

package/mobile/src/utils/joinList.ts

@@ -1,7 +1,7 @@
-export function joinList<E>(sep: E): (list: E[]) => E[] {
-  return (list) =>
+export const joinList =
+  <E>(sep: E) =>
+  (list: E[]): E[] =>
     list.reduce(
-      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]),
+      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]),
       [] as E[],
     );
-}

package/mobile/src/utils/toLocalNumberFormat.ts

@@ -0,0 +1,7 @@
+export const toLocalNumberFormat =
+  (fractionDigits = 0) =>
+  (_: string | number | undefined = 0): string =>
+    new Intl.NumberFormat('ru-RU', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: fractionDigits,
+    }).format(Number(_) || 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.10.9",
+  "version": "0.11.0",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -180,8 +180,8 @@
     "ts-json-schema-generator": "^1.1.2",
     "ts-loader": "^9.3.0",
     "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.2"
+    "webpack": "^5.76.0",
+    "webpack-cli": "^5.0.1"
   },
   "size-limit": [
     {

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

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { ApplicationForm } from './ApplicationForm';
 import type { ApplicationFormContent } from './ApplicationFormContent';
 

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -51,12 +51,12 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
       />
       <div className="max-w-[560px] m-auto">
         <InputControl
-          className="shrink-0 text-l w-full mb-3"
+          className="shrink-0 w-full mb-3"
           label="Имя"
           {...withValidator(field('name'), nameValidator)}
         />
         <PhoneInputControl
-          className="shrink-0 text-l w-full mb-3"
+          className="shrink-0 w-full mb-3"
           label="Телефон"
           {...withValidator(field('phone'), phoneValidator)}
         />

package/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

@@ -9,24 +9,24 @@ export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<Acqui
   <div className="flex justify-between gap-5 mb-5">
     <div className="w-1/2">
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Наименование организации"
         {...withValidator(field('fullName'), defaultValidator)}
       />
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Контактное лицо"
         {...withValidator(field('name'), nameValidator)}
       />
     </div>
     <div className="w-1/2">
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="ИНН"
         {...withValidator(field('inn'), innValidator)}
       />
       <PhoneInputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Телефон"
         {...withValidator(field('phone'), phoneValidator)}
       />

package/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -11,24 +11,24 @@ export const renderBusinessCardDataOrganization = (
   <div className="flex justify-between gap-5">
     <div className="w-1/2">
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Контактное лицо"
         {...withValidator(field('name'), nameValidator)}
       />
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="ИНН"
         {...withValidator(field('inn'), innValidator)}
       />
     </div>
     <div className="w-1/2">
       <PhoneInputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Телефон"
         {...withValidator(field('phone'), phoneValidator)}
       />
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Электронная почта"
         {...withValidator(field('mail'), defaultValidator)}
       />

package/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -9,37 +9,33 @@ export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFo
   <div className="flex justify-between gap-5 mb-7">
     <div className="w-1/2">
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Наименование организации"
         {...field('fullName')}
       />
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="ИНН"
         {...withValidator(field('inn'), innValidator)}
       />
       <PhoneInputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Телефон"
         {...withValidator(field('phone'), phoneValidator)}
       />
     </div>
     <div className="w-1/2">
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Годовая выручка, ₽"
         {...withValidator(field('annualRevenue'), defaultValidator)}
       />
       <InputControl
-        className="shrink-0 text-l w-full mb-3"
+        className="shrink-0 w-full mb-3"
         label="Контактное лицо"
         {...withValidator(field('name'), nameValidator)}
       />
-      <InputControl
-        className="shrink-0 text-l w-full mb-3"
-        label="Электронная почта"
-        {...field('mail')}
-      />
+      <InputControl className="shrink-0 w-full mb-3" label="Электронная почта" {...field('mail')} />
     </div>
   </div>
 );

package/src/components/ApplicationForm/renderWedDataOrganization.tsx

@@ -10,14 +10,14 @@ export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormStat
     <div className="flex justify-between gap-5">
       <div className="w-1/2">
         <InputControl
-          className="shrink-0 text-l w-full mb-3"
+          className="shrink-0 w-full mb-3"
           label="Наименование организации"
           {...withValidator(field('fullName'), defaultValidator)}
         />
       </div>
       <div className="w-1/2">
         <InputControl
-          className="shrink-0 text-l w-full mb-3"
+          className="shrink-0 w-full mb-3"
           label="ФИО"
           {...withValidator(field('name'), nameValidator)}
         />
@@ -26,14 +26,14 @@ export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormStat
     <div className="flex justify-between gap-5 mb-7">
       <div className="w-1/2">
         <PhoneInputControl
-          className="shrink-0 text-l w-full mb-3"
+          className="shrink-0 w-full mb-3"
           label="Телефон"
           {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
       <div className="w-1/2">
         <InputControl
-          className="shrink-0 text-l w-full mb-3"
+          className="shrink-0 w-full mb-3"
           label="Электронная почта"
           {...withValidator(field('mail'), defaultValidator)}
         />

package/src/components/BaseTile/BaseTile.tsx

@@ -1,16 +1,39 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BaseTileCommonProps } from './BaseTileProps';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
+import { style } from '../../utils/style';
 
-export const BaseTile = JSX<BaseTileCommonProps>(
-  ({ className = '', title = '', buttons, image, children }) => (
-    <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
+interface BaseTileProps extends UniBlockProps {
+  title?: VNode;
+  insetTitle?: VNode;
+  leftImage?: VNode;
+  rightImage?: VNode;
+  backImage?: VNode;
+  buttons?: VNode;
+}
+
+export const BaseTile = JSX<BaseTileProps>(
+  ({
+    className,
+    title = '',
+    insetTitle = '',
+    buttons,
+    leftImage,
+    rightImage,
+    backImage,
+    children,
+  }) => (
+    <div className={style('relative flex flex-col font-sans', className)}>
+      {backImage ? <div className="absolute bottom-0 right-0 z-0">{backImage}</div> : null}
       {title}
-      <div className="flex grow w-full justify-between">
-        <div className="flex flex-col justify-between w-full">
-          <div className="h-full">{children}</div>
-          {buttons ? <div className="mt-auto pt-8">{buttons}</div> : null}
+      <div className="grow relative flex flex-wrap justify-between items-stretch gap-8">
+        {leftImage}
+        <div className={style('flex flex-col gap-8', leftImage ? '' : 'grow')}>
+          {insetTitle}
+          <div className="grow">{children}</div>
+          {buttons}
         </div>
-        {image}
+        {rightImage ? <div className="sm:-order-1 md:-order-1">{rightImage}</div> : null}
       </div>
     </div>
   ),

package/src/components/Blocks.mobile.ts

@@ -8,7 +8,6 @@ import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
-import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -28,7 +27,6 @@ export const Blocks: BlocksRegistry = {
   Headline,
   ImgBlock,
   LinkDocs,
-  LinkList,
   MobileAppTile,
   Placeholder,
   ProductBlock,

package/src/components/Blocks.ts

@@ -21,10 +21,10 @@ import { CarouselRichTextCard } from './CarouselRichTextCard/CarouselRichTextCar
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
+import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateOffice } from './ExchangeRateOffice/ExchangeRateOffice';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
-import { Filtration } from './Filtration/Filtration';
 import { Footer } from './Footer/Footer';
 import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
@@ -35,6 +35,7 @@ import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBloc
 import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { MortgageFiltration } from './MortgageFiltration/MortgageFiltration';
 import { OfficeMap } from './OfficeMap/OfficeMap';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
@@ -44,6 +45,7 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
+import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo/RepresentativeOfficeInfo';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -55,7 +57,6 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
-import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo/RepresentativeOfficeInfo';
 
 export const Blocks: BlocksRegistry = {
   ApplicationForm,
@@ -80,9 +81,9 @@ export const Blocks: BlocksRegistry = {
   CarouselTariffsCard,
   ComparisonTable,
   ContactsBlock,
+  DepositFiltration,
   ErrorBlock,
   ExchangeRateTile,
-  Filtration,
   Footer,
   GracePeriod,
   Header,
@@ -93,6 +94,7 @@ export const Blocks: BlocksRegistry = {
   InvestmentInfo,
   LinkDocs,
   MobileAppTile,
+  MortgageFiltration,
   OfficeMap,
   OfficeServicesBlock,
   ParagraphBlock,
@@ -102,6 +104,7 @@ export const Blocks: BlocksRegistry = {
   ProductGallery,
   ProductTile,
   PromoTile,
+  RepresentativeOfficeInfo,
   RichTextBlock,
   RollupItem,
   SafeDepositRental,
@@ -114,5 +117,4 @@ export const Blocks: BlocksRegistry = {
   VerticalLayout,
   Video,
   ExchangeRateOffice,
-  RepresentativeOfficeInfo,
 };