@redneckz/wildless-cms-uni-blocks 0.13.23 → 0.14.0

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -24,7 +24,10 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />
         <div
-          className={style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-green-light')}
+          className={style(
+            layerBaseStyle,
+            'relative p-xl sm:p-5xl bg-white border-transparent sm:border-green-light',
+          )}
         >
           <Headline
             title={title}

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
@@ -17,37 +18,60 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 };
 
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
-  ({ className = '', title, description, image, price, button, colors, ...rest }) => (
+  ({
+    className = '',
+    title,
+    description,
+    image,
+    price,
+    button,
+    colors = [],
+    align = 'text-left',
+    padding,
+    ...rest
+  }) => (
     <BlockWrapper
       className={style('flex flex-col justify-left', className)}
       defaultPadding="p-2xl"
       {...rest}
     >
-      {image?.src ? <Img className="flex justify-center mb-xl" image={image} /> : null}
-      <Headline
-        title={title}
-        description={description}
-        headlineVersion="XS"
-        isEmbedded={true}
-        align="text-left"
-        className="mb-m"
-      />
-      {colors?.length ? (
-        <div className="flex text-secondary-text mb-m">
-          <div className="mr-xs">
-            <Text size="text-s" align="text-left" font="font-light">
-              Цвета:
-            </Text>
+      <BaseTile
+        className="h-full"
+        padding={padding}
+        title={
+          title ? (
+            <Headline
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+              align={align}
+            />
+          ) : null
+        }
+        rightImage={
+          image?.src ? (
+            <Img className="flex justify-center align-center mb-xl" image={image} />
+          ) : null
+        }
+        buttons={renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' })}
+      >
+        {colors?.length ? (
+          <div className="flex text-secondary-text mb-m">
+            <div className="mr-xs">
+              <Text size="text-s" align="text-left" font="font-light">
+                Цвета:
+              </Text>
+            </div>
+            {colors.map(renderColorOption)}
           </div>
-          {colors.map(renderColorOption)}
-        </div>
-      ) : null}
-      {price ? (
-        <Text size="text-h3" align="text-left">
-          {price}&nbsp;₽
-        </Text>
-      ) : null}
-      {renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' })}
+        ) : null}
+        {price ? (
+          <Text size="text-h3" align="text-left">
+            {price}&nbsp;₽
+          </Text>
+        ) : null}
+      </BaseTile>
     </BlockWrapper>
   ),
 );

package/mobile/src/components/CarouselLinks/CarouselLinkButton.tsx

@@ -3,12 +3,12 @@ import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
+import { Text } from '../../ui-kit/Text/Text';
 
-const LINK_CLASS_NAME = `absolute border border-primary-main px-xl py-lg
-  text-l font-light bg-white text-primary-text flex
-  justify-between items-center group-hover/link:text-primary-main z-10`;
+const LINK_CLASS_NAME = `absolute border
+  bg-white flex justify-between group-hover/link:text-primary-main`;
 
-const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-80 top-0';
+const LINK_BORDER_CLASS_NAME = 'hidden xl:block absolute w-full h-full border border-white';
 
 export type CarouselLinkButtonProps = LinkProps & {
   className?: string;
@@ -22,31 +22,33 @@ export const CarouselLinkButton = JSX<CarouselLinkButtonProps>(
     return text ? (
       <div
         className={style(
-          'flex max-w-sm relative group/link cursor-pointer w-64 h-16 sm:w-[47%] sm:h-20 sm:mr-m',
+          'flex relative group/link pl-s pb-s min-w-[16rem] xl:min-w-[20rem]',
           className,
         )}
       >
-        <a
-          className={style(
-            LINK_CLASS_NAME,
-            'rounded-md sm:rounded-none w-full h-12 sm:ml-s sm:w-full sm:h-auto',
-          )}
-          role="link"
-          {...adjustedProps}
-        >
-          <div className="p-0.5">{text}</div>
-          <div className="w-6 h-6 hidden sm:block">
+        <div className="relative min-h-16 w-full">
+          <a
+            className={style(
+              LINK_CLASS_NAME,
+              'sm:rounded-md rounded-none w-full px-xl py-lg whitespace-nowrap',
+            )}
+            role="link"
+            {...adjustedProps}
+          >
+            <Text size="text-l" font="font-light" color="text-primary-text">
+              {text}
+            </Text>
             <Img
-              className="w-4 h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100"
+              className="group-hover/link:brightness-100 hidden xl:block ml-2xs"
               image={{ icon: 'ArrowRightIcon', iconVersion: 'black' }}
-              imageClassName="group-hover/link:text-primary-main"
+              imageClassName="group-hover/link:text-primary-main hidden xl:block"
               width="24"
               height="24"
             />
-          </div>
-        </a>
-        <div className={LINK_BORDER_CLASS_NAME + ' hidden sm:block mx-1.5 mt-1.5'} />
-        <div className={LINK_BORDER_CLASS_NAME + ' hidden sm:block mt-3 mr-3'} />
+          </a>
+          <div className={style(LINK_BORDER_CLASS_NAME, '-bottom-1.5 -left-1.5')} />
+          <div className={style(LINK_BORDER_CLASS_NAME, '-bottom-3 -left-3')} />
+        </div>
       </div>
     ) : null;
   },

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -13,51 +13,53 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
   ({ className, additionalDescription, description, links, title, ...rest }) => (
-    <BlockWrapper
-      className={style('flex flex-col sm:flex-row w-full overflow-hidden', className)}
-      {...rest}
-    >
-      <div className="mr-xl flex-auto">
-        <Headline
-          isEmbedded={true}
-          title={title}
-          description={description}
-          as="h1"
-          align="text-left"
-        />
-        {additionalDescription ? (
+    <BlockWrapper className={style('overflow-hidden', className)} {...rest}>
+      <div className="flex flex-col @6xl:flex-row gap-m">
+        <div>
           <Headline
-            className="pt-m"
-            description={additionalDescription}
-            align="text-left"
             isEmbedded={true}
+            title={title}
+            description={description}
+            as="h1"
+            align="text-left"
           />
-        ) : null}
+          {additionalDescription ? (
+            <Headline
+              className="pt-m"
+              description={additionalDescription}
+              align="text-left"
+              isEmbedded={true}
+            />
+          ) : null}
+        </div>
+        {links?.length ? renderLinks(links, '@6xl:min-w-[672px] p-0 justify-self-end') : null}
       </div>
-      {links?.length ? renderLinks(links) : null}
     </BlockWrapper>
   ),
 );
 
-const renderLinks = (links: LinkProps[]) => {
+const renderLinks = (links: LinkProps[], className = '') => {
   const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
 
   return (
     <Carousel
-      className="@container-normal sm:w-2/3 w-full p-0 sm:p-xs"
+      className={className}
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
+      padding="p-0"
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className={style('flex flex-wrap self-start w-full sm:w-[672px]')}
+          className={style(
+            'flex flex-wrap gap-2xs self-start xl:justify-center @5xl:grid @5xl:grid-cols-2',
+          )}
         >
           {links
             .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
             .map((link, index) => (
-              <CarouselLinkButton key={String(index)} className="sm:m-2xs" {...link} />
+              <CarouselLinkButton key={String(index)} {...link} />
             ))}
         </div>
       ))}

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

@@ -13,14 +13,14 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
-import { alignTextStyle } from './alignTextStyle';
+import { AlignStyles } from '../../model/AlignStyles';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({
     additionalDescription,
-    align = alignTextStyle,
+    align = AlignStyles,
     button = {},
     className = '',
     description,

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

@@ -19,6 +19,7 @@
         "text": "Текст"
       }
     ],
-    "version": "primary"
+    "version": "primary",
+    "listItemSize": "S"
   }
 }

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,4 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
@@ -7,8 +9,6 @@ import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -2,10 +2,8 @@ import type { AlignProps, HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-
-export type RecommendationSocialMedia = LinkCommonProps & IconProps & ButtonContent;
+import type { SocialMediaLink } from '../Footer/FooterContent';
 
 /**
  * @title Карточка рекомендаций
@@ -17,5 +15,5 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   LinkCommonProps &
   AlignProps & {
     /** @title Соц сети */
-    socialMedia?: RecommendationSocialMedia[];
+    socialMedia?: SocialMediaLink[];
   };

package/mobile/src/components/ComparisonTable/ComparisonTableColumnHeaders.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ColumnHeader } from './ComparisonTableContent';
-import { COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
+import { COLUMN_WIDTH, firstCellStyle } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableRowContainer } from './TableRowContainer';
@@ -13,7 +13,7 @@ interface ComparisonTableColumnHeadersProps {
 export const ComparisonTableColumnHeaders = JSX<ComparisonTableColumnHeadersProps>(
   ({ colHeaders, activeIndex }) => (
     <TableRowContainer>
-      <div className={FIRST_CELL_CLASSES} role="columnheader" />
+      <div className={firstCellStyle} role="columnheader" />
       <TableCarouselContainer activeIndex={activeIndex} columnWidth={COLUMN_WIDTH}>
         {colHeaders.map((header, i) => (
           <HeaderCell key={String(i)} {...header} />

package/mobile/src/components/ComparisonTable/TableCarouselContainer.tsx

@@ -9,7 +9,7 @@ export interface TableCarouselContainerProps {
 
 const carouselContainerClassesMap: Record<TableVersion, string> = {
   comparison: 'flex gap-m duration-1000',
-  tariff: 'flex flex-grow duration-1000',
+  tariff: 'flex gap-5xl flex-grow duration-1000',
 };
 
 export const TableCarouselContainer = JSX<TableCarouselContainerProps>(

package/mobile/src/components/ComparisonTable/TableCell.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { CellData } from './ComparisonTableContent';
-import { DIVIDER_CLASSES } from './constants';
+import { dividerStyle } from './constants';
+import { style } from '../../utils/style';
 
 export interface TableCellProps {
   cell: CellData[];
@@ -10,17 +11,15 @@ export interface TableCellProps {
   isFillGradient?: boolean;
 }
 
-export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => {
-  const cellWrapperClasses = `box-border flex flex-col`;
+const cellWrapperStyle = `box-border flex flex-col`;
 
-  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
-
-  return (
-    <div className={cellWrapperClasses} role="cell">
-      <div className={cellClasses}>{cell.map(renderCellInner(isFillGradient, rowHeader))}</div>
+export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => (
+  <div className={cellWrapperStyle} role="cell">
+    <div className={style('h-full', dividerStyle)}>
+      {cell.map(renderCellInner(isFillGradient, rowHeader))}
     </div>
-  );
-});
+  </div>
+));
 
 const renderCellInner =
   (isFillGradient: boolean, rowHeader?: string) =>
@@ -32,11 +31,14 @@ const renderCellInner =
         </div>
         <div className="basis-1/2">
           {label ? (
-            <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
+            <div className={style('text-right', isFillGradient ? 'text-white' : '')}>{label}</div>
           ) : null}
           {description ? (
             <div
-              className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
+              className={style(
+                'text-right',
+                isFillGradient ? 'text-white/80' : 'text-secondary-text',
+              )}
             >
               {description}
             </div>

package/mobile/src/components/ComparisonTable/TableColumn.tsx

@@ -3,9 +3,10 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
 import type { CellData, ColumnHeader } from './ComparisonTableContent';
-import { GRADIENT } from './constants';
+import { gradientStyle } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
+import { style } from '../../utils/style';
 
 export interface TableColumnData {
   rowHeader?: string;
@@ -24,11 +25,14 @@ export interface TableColumnProps extends UniBlockProps {
 export const TableColumn = JSX<TableColumnProps>(
   ({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
     const columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
-    const gradientClassName = isFillGradient ? GRADIENT : '';
+    const gradientColumnStyle = isFillGradient ? gradientStyle : '';
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
 
     return (
-      <div className={`border border-gray rounded-md p-m mb-m ${gradientClassName}`} role="row">
+      <div
+        className={style('border border-gray rounded-md p-m mb-m', gradientColumnStyle)}
+        role="row"
+      >
         <HeaderCell {...header} isFillGradient={isFillGradient} />
         {columnDataView?.length
           ? columnDataView.map(({ rowHeader, cell }, i) => (

package/mobile/src/components/ComparisonTable/TableRow.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TitleProps } from '../../model/HeadlineType';
 import type { CellData } from './ComparisonTableContent';
-import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { COLUMN_WIDTH, dividerStyle, firstCellStyle } from './constants';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableCell } from './TableCell';
 import { TableRowContainer } from './TableRowContainer';
+import { style } from '../../utils/style';
 
 export interface Row {
   header: TitleProps;
@@ -20,9 +21,7 @@ export interface TableRowProps {
 }
 
 const titleStyle = (isLastRow = false) =>
-  `text-s py-2xl ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
-    isLastRow ? 'border-b-0' : 'border-solid'
-  }`;
+  style('text-s py-2xl', dividerStyle, firstCellStyle, isLastRow ? 'border-b-0' : 'border-solid');
 
 export const TableRow = JSX<TableRowProps>(
   ({ row: { header, data }, activeIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (

package/mobile/src/components/ComparisonTable/constants.ts

@@ -1,6 +1,6 @@
-export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-export const BORDER_CLASSES = 'border-gray border-solid border';
-export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-export const FIRST_CELL_CLASSES = 'w-52';
+export const gradientStyle = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+export const borderStyle = 'border-gray border-solid border';
+export const dividerStyle = 'border-main-divider border-b';
+export const firstCellStyle = 'w-52';
 export const COLS_LENGTH_FOR_SCROLL = 3;
 export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

package/mobile/src/components/ContentPage/ContentPage.tsx

@@ -9,6 +9,7 @@ import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
 import { CookiePopup } from '../../ui-kit/CookiePopup/CookiePopup';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { StickyBottomMenu } from '../StickyBottomMenu/StickyBottomMenu';
@@ -49,6 +50,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
         </section>
         <StickyBottomMenu />
         <DialogManager />
+        <PopupManager />
         <CookiePopup
           termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
           personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}

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

@@ -57,8 +57,12 @@
         }
       }
     },
-    "sumInput": { "title": "Сумма" },
-    "periodInput": { "title": "Срок, месяцев", "min": 3, "max": 36 },
+    "sumInput": {
+      "title": "Сумма"
+    },
+    "periodInput": {
+      "title": "Срок, месяцев"
+    },
     "resetButton": {
       "text": "Очистить фильтры",
       "version": "secondary"

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

@@ -1,19 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { JSONSchema7Definition } from 'json-schema';
 import { useForm } from '../../hooks/useForm';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
+import { getBlocksToRender } from '../../ui-kit/BaseFiltration/getBlocksToRender';
 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';
+import { getPeriod } from './getPeriod';
+import { useDepositsPeriods } from './useDepositsPeriods';
 
 interface DepositFiltrationProps extends DepositFiltrationContent, UniBlockProps {}
 
-const DEFAULT_MIN_MONTHS = 3;
-const DEFAULT_MAX_MONTHS = 60;
-
 const DEFAULT_MIN_SUM = 500;
 const DEFAULT_MAX_SUM = 1000000000;
 
@@ -22,17 +23,18 @@ const initialFiltrationState = {
     min: 10000,
     max: DEFAULT_MAX_SUM,
   },
-  period: {
-    min: 3,
-    max: 36,
-  },
+  period: 3,
 };
 
 export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFiltrationProps>(
   ({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
+    const { source, months } = useDepositsPeriods(rest.block?.blocks);
     const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
-    const maxPeriodValue = periodInput?.max || DEFAULT_MAX_MONTHS;
+    const blocksToRender = getBlocksToRender(
+      rest.block?.blocks,
+      filtrationState,
+    )((content) => ({ ...content, period: getPeriod(source, content || {}) || [] }));
 
     const Inputs = (
       <div>
@@ -48,12 +50,8 @@ export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFi
         <InputRange
           title={periodInput?.title}
           items={['От 3 мес', 'До 5 лет']}
-          min={periodInput?.min || DEFAULT_MIN_MONTHS}
-          max={maxPeriodValue}
-          {...field('period', {
-            parse: (min) => ({ min, max: maxPeriodValue }),
-            format: ({ min }) => min,
-          })}
+          list={months}
+          {...field('period')}
         />
       </div>
     );
@@ -66,12 +64,19 @@ export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFi
         {...rest}
       >
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs })}
-        <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
+        <BaseFiltrationInner blocksToRender={blocksToRender} {...rest} />
       </BlockWrapper>
     );
   },
 );
 
+const sourceBookSchema: JSONSchema7Definition = {
+  type: 'string',
+  title: 'Адрес справочника',
+};
+
 DepositFiltration.childrenTypes = ['ProductTile'];
-DepositFiltration.childSchema = (content?: DepositFiltrationContent) =>
-  content?.filtrationSchema || {};
+DepositFiltration.childSchema = (content?: DepositFiltrationContent) => ({
+  ...(content?.filtrationSchema || {}),
+  sourceBook: sourceBookSchema,
+});

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

@@ -0,0 +1,7 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export const getChildSourceBook = (blocks: BlockDef[] | undefined) =>
+  blocks?.filter(hasSourceBook).map(({ content: { sourceBook } }) => sourceBook);
+
+const hasSourceBook = (block: BlockDef): block is BlockDef & { content: { sourceBook: string } } =>
+  Boolean(block && block.content && typeof block.content.sourceBook === 'string');

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

@@ -0,0 +1,10 @@
+export interface SourceItem {
+  rateRows: Array<{ minMonths?: number; maxMonths?: number }>;
+}
+
+type Source = Record<string, SourceItem>;
+
+export const getPeriod = (source: Source, content: Record<string, any>): number[] =>
+  source[content?.sourceBook]?.rateRows
+    .map((el) => el.minMonths)
+    .filter((minMonths): minMonths is number => minMonths !== undefined);

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

@@ -0,0 +1,34 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { fetchMultitudeJSON } from '../../utils/fetchMultitudeJSON';
+import { unique } from '../../utils/unique';
+import { zip } from '../../utils/zip';
+import { getChildSourceBook } from './getChildSourceBook';
+import type { SourceItem } from './getPeriod';
+
+export function useDepositsPeriods(blocks: BlockDef[] | undefined) {
+  const { dirs = [], source = [] } = useMemo(() => {
+    const sourceBooks = getChildSourceBook(blocks);
+
+    return { dirs: sourceBooks?.map((url) => `/wcms-resources/${url}.json`), source: sourceBooks };
+  }, [blocks]);
+
+  const { data = [] } = useAsyncData<(SourceItem | null)[], any, string[]>(
+    dirs,
+    fetchMultitudeJSON,
+  );
+
+  return {
+    source: Object.fromEntries(
+      zip(source, data as SourceItem[]).filter(([, sourceData]) => Boolean(sourceData)),
+    ),
+    months:
+      unique(
+        data
+          .flatMap((item) => item?.rateRows || [])
+          .filter((row) => typeof row.minMonths === 'number' && row.minMonths === row.maxMonths)
+          .map((row) => row.minMonths as number),
+      ).sort((a, b) => a - b) || [],
+  };
+}