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

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

@@ -1,6 +1,6 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
 import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 
 const DEFAULT_MONEY_STEP = 1000;
 
@@ -14,8 +14,8 @@ export function renderWantedSumInput({
   ...rest
 }: RenderWantedSumParams) {
   const items = [
-    `От ${addSpacesBetweenNumbers(rest.min || 0)} ₽`,
-    `До ${addSpacesBetweenNumbers(rest.max || 0)} ₽`,
+    `От ${toLocalNumberFormat(2)(rest.min || 0)} ₽`,
+    `До ${toLocalNumberFormat(2)(rest.max || 0)} ₽`,
   ];
 
   return <InputRange items={isShowItems ? items : []} step={step} {...rest} />;

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -7,15 +7,19 @@ import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonC
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
 import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { getSanitizedValue } from '../../utils/getSanitizedValue';
+import { style } from '../../utils/style';
 import type { CardTransferContent } from './CardTransferContent';
 
-const AMOUNT_KEY = 'amount';
-const FORM_URL = 'https://www.rshb.ru/p2p/';
 const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const DEFAULT_PLACEHOLDER = '1500';
 
+const FORM_URL = 'https://www.rshb.ru/p2p/';
+const AMOUNT_KEY = 'amount';
+const INITIAL_FORM_STATE = {
+  [AMOUNT_KEY]: 1500,
+};
+
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
 
 export const CardTransfer = JSX<CardTransferProps>(
@@ -27,9 +31,10 @@ export const CardTransfer = JSX<CardTransferProps>(
     button,
     ...rest
   }) => {
-    const [value, setValue] = useState<string>('');
-    const handleChange = useCallback((_: string) => setValue(_), []);
-    const isDisabled = !Number(getSanitizedValue(value));
+    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+
+    const isDisabled = amount <= 0;
+
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
       : getRegularButtonClasses({ className: 'text-white', version: button?.version });
@@ -37,21 +42,20 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper className={`p-default flex flex-col items-center ${className}`} {...rest}>
+      <BlockWrapper className={style('p-default flex flex-col items-center', className)} {...rest}>
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
         <form className="w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput
             name={AMOUNT_KEY}
-            value={value}
-            onChange={handleChange}
-            valid={value === '' || !isDisabled}
+            valid={!isDisabled}
             placeholder={placeholder}
             label={label}
+            {...field(AMOUNT_KEY, { parse: Number, format: String })}
           />
           {button?.text ? (
             <button
               type="submit"
-              className={`w-full p-4 mt-6 ${buttonStyle} `}
+              className={style('w-full p-4 mt-6', buttonStyle)}
               disabled={isDisabled}
               {...link(button)}
             >

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -4,6 +4,7 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type {
   CardColumnsMode,
@@ -30,48 +31,46 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     image,
     title,
     ...rest
-  }) => {
-    const tileTitle = title ? (
-      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
-    ) : null;
-
-    const tileImage = image?.src ? (
-      <Img className="absolute bottom-0 right-0 m-0" image={image} />
-    ) : null;
-
-    return (
-      <BlockWrapper
-        className={[
-          'relative box-border text-left p-9 w-[697px]',
-          'border border-solid border-gray group-data-secondary:border-white/50',
-          className,
-        ].join(' ')}
-        {...rest}
+  }) => (
+    <BlockWrapper
+      className={style(
+        'box-border text-left p-9 w-[697px]',
+        'border border-solid border-gray group-data-secondary:border-white/50',
+        className,
+      )}
+      {...rest}
+    >
+      <BaseTile
+        title={
+          title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
+        }
+        backImage={image?.src ? <Img className="m-0" image={image} /> : null}
       >
-        <BaseTile title={tileTitle} image={tileImage}>
-          <div className="flex justify-between mb-4">
-            {description ? (
-              <div className="w-1/3">
-                <Text size="text-h6">{description}</Text>
-              </div>
-            ) : null}
-            {additionalDescription ? (
-              <Text size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
-                {additionalDescription}
-              </Text>
-            ) : null}
-          </div>
-          {cardsList.length ? (
-            <ul
-              className={`list-none m-0 p-0 flex gap-y-2 ${cardColumnsModeStyleMap[columnsMode]}`}
-            >
-              {renderCardList(cardsList, columnsMode)}
-            </ul>
+        <div className="flex justify-between mb-4">
+          {description ? (
+            <div className="w-1/3">
+              <Text size="text-h6">{description}</Text>
+            </div>
           ) : null}
-        </BaseTile>
-      </BlockWrapper>
-    );
-  },
+          {additionalDescription ? (
+            <Text size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
+              {additionalDescription}
+            </Text>
+          ) : null}
+        </div>
+        {cardsList.length ? (
+          <ul
+            className={style(
+              'list-none m-0 p-0 flex gap-y-2',
+              cardColumnsModeStyleMap[columnsMode],
+            )}
+          >
+            {renderCardList(cardsList, columnsMode)}
+          </ul>
+        ) : null}
+      </BaseTile>
+    </BlockWrapper>
+  ),
 );
 
 const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -99,8 +99,10 @@ const renderAdditionalDescription = (additionalDescription?: string) =>
 const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
   items?.length ? (
     <List
-      className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
-      itemClassName="text-left"
+      className={style(
+        'max-w-[308px] mt-2 text-s',
+        version === 'primary' ? '!text-secondary-text' : '',
+      )}
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
     />

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -17,7 +17,6 @@
   "jsonLd": "json",
   "date": "2022-04-08",
   "style": ["bg-main-divider"],
-  "likeControl": true,
   "slots": {
     "header": [
       {

package/mobile/src/components/DepositFiltration/DepositFiltration.example.json

@@ -0,0 +1,61 @@
+{
+  "content": {
+    "filtrationSchema": {
+      "currency": {
+        "title": "Валюта",
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["rub", "usd", "eur"],
+          "enumNames": ["Рубль", "Доллар", "Евро"]
+        }
+      },
+      "options": {
+        "title": "Опции",
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["add", "withdrawal", "pensioner", "online"],
+          "enumNames": ["Пополнение", "Снятие", "Я пенсионер", "Открытие онлайн"]
+        }
+      },
+      "percents": {
+        "title": "Выплата процентов",
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["inTheEnd", "eachMonth"],
+          "enumNames": ["В конце срока", "Ежемесячно"]
+        }
+      },
+      "sum": {
+        "title": "Сумма",
+        "type": "number"
+      },
+      "period": {
+        "title": "Срок",
+        "type": "object",
+        "properties": {
+          "min": {
+            "title": "Минимум",
+            "type": "number"
+          },
+          "max": {
+            "title": "Максимум",
+            "type": "number"
+          }
+        }
+      }
+    },
+    "sumInput": { "title": "Сумма" },
+    "periodInput": { "title": "Срок, месяцев", "min": 3, "max": 36 },
+    "resetButton": {
+      "text": "Очистить фильтры",
+      "version": "secondary"
+    },
+    "notFound": {
+      "title": "Нет подходящей ипотечной программы",
+      "description": "Попробуйте очистить фильтры"
+    }
+  }
+}

package/mobile/src/components/DepositFiltration/DepositFiltration.tsx

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useForm } from '../../hooks/useForm';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
+import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { style } from '../../utils/style';
+import type { DepositFiltrationContent } from './DepositFiltrationContent';
+
+interface DepositFiltrationProps extends DepositFiltrationContent, UniBlockProps {}
+
+const initialFiltrationState = {
+  sum: 500,
+  period: {
+    min: 3,
+    max: 36,
+  },
+};
+
+const DEFAULT_MIN_MONTHS = 3;
+const DEFAULT_MAX_MONTHS = 36;
+
+const DEFAULT_MIN_SUM = 500;
+const DEFAULT_MAX_SUM = 1000000000;
+
+export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFiltrationProps>(
+  ({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
+    const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
+
+    const maxValue = periodInput?.max || DEFAULT_MAX_MONTHS;
+
+    const Inputs = (
+      <div>
+        <CurrencyInput
+          label={sumInput?.title}
+          min={DEFAULT_MIN_SUM}
+          max={DEFAULT_MAX_SUM}
+          {...field('sum', { parse: Number, format: String })}
+        />
+        <InputRange
+          title={periodInput?.title}
+          items={['От 3 мес', 'До 3 лет']}
+          min={periodInput?.min || DEFAULT_MIN_MONTHS}
+          max={maxValue}
+          {...field('period', {
+            parse: (min) => ({ min, max: maxValue }),
+            format: ({ min }) => min,
+          })}
+        />
+      </div>
+    );
+
+    return (
+      <BlockWrapper className={style(className)} version="transparent" {...rest}>
+        {renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs })}
+        <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
+      </BlockWrapper>
+    );
+  },
+);
+
+DepositFiltration.childrenTypes = ['ProductTile'];
+DepositFiltration.childSchema = (content?: DepositFiltrationContent) =>
+  content?.filtrationSchema || {};

package/mobile/src/components/DepositFiltration/DepositFiltrationContent.ts

@@ -0,0 +1,39 @@
+import type {
+  BaseFiltrationInnerContent,
+  NumberRange,
+  NumberValue,
+  StringArray,
+} from '../../ui-kit/BaseFiltration/BaseFiltrationContent';
+
+export type DepositFiltrationSchema = {
+  /** @title Валюта */
+  currency?: StringArray;
+  /** @title Опции */
+  options?: StringArray;
+  /** @title Выплата процентов */
+  percents?: StringArray;
+  /** @hidden */
+  sum?: NumberValue;
+  /** @hidden */
+  period?: NumberRange;
+};
+
+/**
+ * @title Подборщик вкладов
+ */
+export interface DepositFiltrationContent extends BaseFiltrationInnerContent {
+  /** @title Параметры фильтрации */
+  filtrationSchema?: DepositFiltrationSchema;
+  /** @title Поле ввода суммы */
+  sumInput?: {
+    /** @title Лейбл */
+    title?: string;
+  };
+  /** @title Поле ввода срока */
+  periodInput?: {
+    /** @title Лейбл */
+    title?: string;
+    min?: number;
+    max?: number;
+  };
+}

package/mobile/src/components/Footer/Footer.tsx

@@ -5,13 +5,11 @@ import { projectSettings } from '../../ProjectSettings';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img/Img';
-import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { LinkList } from '../LinkList/LinkList';
-import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
+import { LinkList } from '../../ui-kit/LinkList/LinkList';
+import { style } from '../../utils/style';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
-import type { FooterContent, SubMenuItem } from './FooterContent';
+import type { FooterContent } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
@@ -27,36 +25,29 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
-    <BlockWrapper tag="footer" className={`px-4 py-[26px] ${className}`} {...rest}>
-      <Contacts className="overflow-hidden" items={contacts} hasButton />
-      <div className="m-0 p-0">
+    <BlockWrapper tag="footer" className={style('px-4 py-6', className)} {...rest}>
+      <div className="mb-4 pb-5 border-b border-main-divider">
         {sitemap.topItems?.map((item, i) => (
-          <RollupItem key={String(i)} label={item?.text}>
-            <LinkList documents={item.items} />
+          <RollupItem key={String(i)} label={item?.text} labelIcon={item?.icon}>
+            <LinkList items={item.items} className="my-3" />
           </RollupItem>
         ))}
       </div>
-      <div className="mt-4">{sitemap?.dispositions?.map(renderSubMenuItem)}</div>
-      <MobileAppTile
-        title="Мобильное приложение"
-        description="Загрузить для IOS и Android"
-        {...rest}
+      <Contacts className="overflow-hidden" items={contacts} />
+      <SocialMedia className="mb-4" media={socialMedia} />
+      <Button
+        className="w-full mb-4"
+        text="Google Play"
+        version="secondary"
+        href="/"
+        target="_blank"
       />
-      <SearchBar className="grow" />
-      <SocialMedia className="pt-6 pb-6" media={socialMedia} />
-      <HorizontalNavigation title={horizontalNavigationTitle} links={relatedEnterprises} />
-      <TextInformation links={documents} />
+      <HorizontalNavigation
+        className="pt-4 pb-7 border-y border-main-divider"
+        title={horizontalNavigationTitle}
+        links={relatedEnterprises}
+      />
+      <TextInformation />
     </BlockWrapper>
   );
 });
-
-const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
-  const { icon, href, text } = menu;
-
-  return (
-    <Button version="link" key={`footer-${i}`} href={href} className="flex text-s mb-4 w-6">
-      {icon ? <Img className="pr-1" image={icon} width="24" height="24" /> : null}
-      <span className="pl-2.5 font-medium text-primary-text">{text}</span>
-    </Button>
-  );
-};

package/mobile/src/components/Footer/HorizontalNavigation.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TitleProps } from '../../model/HeadlineType';
+import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
@@ -8,11 +9,11 @@ export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '' }) => (
     <div className={className}>
-      <span className="text-primary-text text-s font-medium">{title}</span>
+      <Text size="text-h6">{title}</Text>
       {links?.length ? (
-        <div className="flex flex-col gap-2 pt-3">
+        <div className="flex flex-col gap-6 mt-7">
           {links.map((_, i) => (
-            <HorizontalNavigationLink key={String(i)} index={i} className="text-s" {..._} />
+            <HorizontalNavigationLink key={String(i)} index={i} {..._} />
           ))}
         </div>
       ) : null}

package/mobile/src/components/Footer/HorizontalNavigationLink.tsx

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { horizontalNavigationLinkStyles } from './horizontalNavigationLinkStyles';
 
 interface HorizontalNavigationLinkProps extends LinkProps {
   className: string;
@@ -15,7 +17,7 @@ export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProp
 
     return (
       <a
-        className={`text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+        className={style(horizontalNavigationLinkStyles, className)}
         href={href}
         target={target}
         onClick={onClick}

package/mobile/src/components/Footer/MediaButton.tsx

@@ -4,6 +4,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
+import { buttonStylesWithText } from './buttonStylesWithText';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -48,16 +49,6 @@ interface MediaButtonProps extends ButtonProps, IconProps {
   buttonSize?: ButtonSize;
 }
 
-const buttonSizeStyles = {
-  default: 'w-14 h-14',
-  small: 'w-12 h-12',
-};
-
-const buttonStylesWithText = (text: string, buttonSize: string) =>
-  text
-    ? ''
-    : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
-
 export const MediaButton = JSX<MediaButtonProps>(
   ({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
     const { href, version, text = '' } = rest;

package/mobile/src/components/Footer/TextInformation.tsx

@@ -1,22 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
+import { textInformationTextSize } from './textInformationTextSize';
 
-export const TextInformation = JSX<FooterLink>(({ className = '', links }) => {
-  return (
-    <div className={className}>
-      <div className="py-6">
-        <span className="text-xs-light text-secondary-text">
-          {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
-        </span>
-      </div>
-      {links?.length ? (
-        <div className={`flex flex-col justify-start items-start gap-2`}>
-          {links.map((_, i) => (
-            <TextInformationLink key={String(i)} index={i} {..._} />
-          ))}
-        </div>
-      ) : null}
+export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
+  <div className={className}>
+    <div className="pt-5 sm:py-4">
+      <Text size={textInformationTextSize} color="text-secondary-text">
+        {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
+      </Text>
     </div>
-  );
-});
+    {links?.length ? (
+      <div className="flex justify-start items-start gap-5 pt-2.5">
+        {links.map((_, i) => (
+          <TextInformationLink key={String(i)} index={i} {..._} />
+        ))}
+      </div>
+    ) : null}
+  </div>
+));

package/mobile/src/components/Footer/buttonStylesWithText.ts

@@ -0,0 +1,15 @@
+import { style } from '../../utils/style';
+import { ButtonSize } from './MediaButton';
+
+const buttonSizeStyles = {
+  default: 'w-24 h-14',
+  small: 'w-12 h-12',
+};
+
+export const buttonStylesWithText = (text: string, buttonSize: ButtonSize) =>
+  text
+    ? ''
+    : style(
+        'group/media flex items-center justify-center box-border',
+        buttonSizeStyles[buttonSize],
+      );

package/mobile/src/components/Footer/horizontalNavigationLinkStyles.ts

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

package/mobile/src/components/Footer/textInformationTextSize.ts

@@ -0,0 +1 @@
+export const textInformationTextSize = 'text-s';

package/mobile/src/components/Header/Header.tsx

@@ -12,7 +12,7 @@ import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { LinkList } from '../LinkList/LinkList';
+import { LinkList } from '../../ui-kit/LinkList/LinkList';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
@@ -67,7 +67,7 @@ export const Header = JSX<HeaderProps>(
             <div className="list-none m-0 p-0">
               {topItems?.map((item, i) => (
                 <RollupItem key={String(i)} label={item.text}>
-                  <LinkList documents={item.items} />
+                  <LinkList className="mt-2.5" items={item.items} />
                 </RollupItem>
               ))}
             </div>

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -5,7 +5,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import type { CardItem, InsuranceAmountBlockTab } from './InsuranceAmountBlockContent';
 
 export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab {
@@ -122,7 +122,7 @@ function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
 function renderValueBlock(title: string, sum: number) {
   return (
     <div className="flex flex-col text-left whitespace-pre">
-      <span className="text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
+      <span className="text-h6">{toLocalNumberFormat(2)(sum)} ₽</span>
       <span className="text-secondary-text text-l mt-1">{title}</span>
     </div>
   );

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -60,12 +60,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
         ) : null}
 
         {items?.length ? (
-          <List
-            className="mt-9 text-l-light max-w-[657px]"
-            items={items}
-            itemClassName="mb-[7px]"
-            isDotted={isDotted}
-          />
+          <List className="mt-9 max-w-[657px]" items={items} isDotted={isDotted} listItemSize="M" />
         ) : null}
       </div>
     </BlockWrapper>

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

@@ -1 +1,9 @@
-{}
+{
+  "content": {
+    "documents": {
+      "items": {
+        "ui:field": "document"
+      }
+    }
+  }
+}