@redneckz/wildless-cms-uni-blocks 0.8.9 → 0.8.10

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
+import type { RichTextItem } from '../../model/RichTextItem';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
@@ -16,10 +18,20 @@ type StepCommonProps = IconProps & {
   items?: string[];
 };
 
+/**
+ * @title Стандартный
+ */
+export type DefaultStep = DescriptionProps & LabelProps & StepCommonProps & DefaultListItemType;
+
+/**
+ * @title Форматированный текст
+ */
+type RichTextStep = RichTextItem & IconProps;
+
 /**
  * @title Шаг
  */
-export type Step = DescriptionProps & LabelProps & StepCommonProps;
+export type Step = DefaultStep | RichTextStep;
 
 /**
  * @title Блок шаги

package/mobile/src/components/StepsBlock/checkCanRenderIcon.ts

@@ -0,0 +1,3 @@
+import type { Picture } from '../../model/Picture';
+
+export const checkCanRenderIcon = (icon?: Picture) => Boolean(icon?.icon || icon?.src);

package/mobile/src/components/StepsBlock/renderStep.tsx

@@ -0,0 +1,83 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { VNode } from '../../model/VNode';
+import { Button } from '../../ui-kit/Button/Button';
+import { List } from '../../ui-kit/List/List';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { Text } from '../../ui-kit/Text/Text';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import { style } from '../../utils/style';
+import type { DefaultStep, Step } from './StepsBlockContent';
+import type { StyleType } from './StepsBlockStyleMaps';
+
+interface RenderStepProps {
+  styleMap: StyleType;
+  isMainButton: boolean;
+  version?: BlockVersion;
+}
+
+// TODO: Create universal function for this case
+export const renderStep =
+  (props: RenderStepProps) =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (step: Step, i: number, arr: Step[]): VNode => {
+    const { type } = step;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return renderDefaultStep(props)(step, i, arr);
+      case 'rte':
+        return <RichText __html={step.__html} />;
+      default:
+        assertUnreachable(step);
+    }
+  };
+
+const renderDefaultStep =
+  ({ styleMap, isMainButton, version }: RenderStepProps) =>
+  (step: DefaultStep, i: number, arr: Step[]) => {
+    const { label, description, button, items, isDotted } = step;
+
+    return (
+      <div
+        key={String(i)}
+        className={style(
+          'relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden',
+          getContainerWidth(arr.length),
+        )}
+      >
+        <div className={style(button?.text ? 'mb-8' : '', 'text-center')}>
+          {label ? (
+            <div className="mb-2">
+              <Text size="text-h6">{label}</Text>
+            </div>
+          ) : null}
+          <div className="flex flex-col items-center">
+            {description ? <div className={styleMap.description}>{description}</div> : null}
+            <List
+              className={style(description ? `${styleMap.description} mt-0.5` : 'text-h6')}
+              items={items}
+              listItemSize="M"
+              isDotted={isDotted}
+            />
+          </div>
+        </div>
+        {button?.text && !isMainButton ? (
+          <Button
+            className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
+            version={version as ButtonVersion}
+            {...button}
+          >
+            {button?.text}
+          </Button>
+        ) : null}
+      </div>
+    );
+  };
+
+const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[210px]');

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

@@ -2,7 +2,7 @@
   "content": {
     "title": "Плитка",
     "headingType": "h3",
-    "description": "Описание",
+    "__html": "<p>Описание</p>",
     "image": {
       "format": "webp",
       "size": {

package/mobile/src/components/Tile/Tile.tsx

@@ -5,7 +5,7 @@ import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
@@ -18,7 +18,7 @@ export const Tile = JSX<TileProps>(
   ({
     title,
     headingType = 'h3',
-    description,
+    __html,
     items,
     buttons,
     image,
@@ -52,9 +52,9 @@ export const Tile = JSX<TileProps>(
         })}
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
-        {description ? (
+        {__html ? (
           <div className="max-w-[600px] mt-2.5">
-            <Paragraph size="text-xl-light">{description}</Paragraph>
+            <RichText __html={__html} />
           </div>
         ) : null}
         {children}

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

@@ -1 +1,7 @@
-{}
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}

package/mobile/src/components/Tile/TileContent.ts

@@ -1,17 +1,17 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { DescriptionProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { ListItemSize } from '../../ui-kit/List/ListProps';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
 
 /**
  * @title Плитка
  */
 export type TileContent = HeadingCommonProps &
-  DescriptionProps &
+  RichTextProps &
   ListContent &
   ButtonContent &
   TagsContent & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Calculator/Rate.tsx

@@ -25,7 +25,7 @@ export const Rate = JSX<RateProps>(
               rateBlockClassName,
             )}
           >
-            {String(rate).replace('.', ',')}
+            {String(rate.toFixed(2)).replace('.', ',')}
           </span>
           {unit ? (
             <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span>

package/src/components/Calculator/constants.ts

@@ -54,7 +54,7 @@ export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParam
   maxSum: 5000000,
   minMonths: 2,
   maxMonths: 120,
-  rate: 5.9,
+  rate: 7,
   isMonthlyInterestPayment: true,
 };
 
@@ -64,7 +64,7 @@ export const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS: BusinessDepositCalculat
     maxSum: 500000,
     minDays: BUSINESS_MIN_DAYS,
     maxDays: BUSINESS_MAX_DAYS,
-    rate: 5.9,
+    rate: 6.6,
     isMonthlyInterestPayment: true,
     isReplenished: false,
     isPartialWithdrawal: false,

package/src/components/Calculator/rangeHelpers.ts

@@ -0,0 +1,24 @@
+import { maxBy } from '../../utils/maxBy';
+import { minBy } from '../../utils/minBy';
+
+export const getRangeByKeys = <
+  MinKey extends string,
+  MaxKey extends string,
+  T extends Record<MinKey | MaxKey, number>,
+>(
+  [minKey, maxKey]: [MinKey, MaxKey],
+  rows: T[] = [],
+) => ({
+  [minKey]: rows.length ? minBy()(rows.map((row) => row[minKey])) : 0,
+  [maxKey]: rows.length ? maxBy()(rows.map((row) => row[maxKey])) : 0,
+});
+
+export const checkRangeByKeys = <
+  MinKey extends string,
+  MaxKey extends string,
+  T extends Record<MinKey | MaxKey, number>,
+>(
+  value: number,
+  [minKey, maxKey]: [MinKey, MaxKey],
+  sourceBookRow: T,
+): boolean => value >= sourceBookRow[minKey] && value < sourceBookRow[maxKey];

package/src/components/Calculator/useBusinessDepositCalculatorParams.ts

@@ -5,6 +5,7 @@ import {
   BUSINESS_RATE_MIN_DAYS,
   DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
 } from './constants';
+import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
 import { useCalculatorParams } from './useCalculatorParams';
 import type { CommonDepositParams } from './useDepositCalculatorParams';
 
@@ -72,9 +73,9 @@ export const useBusinessDepositCalculatorParams = (
       return (
         isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
         isSmallBusiness === _.isSmallBusiness &&
-        (isOperatingDeposit
-          ? _.isReplenished && _.isPartialWithdrawal
-          : !_.isReplenished && !_.isPartialWithdrawal)
+        checkIsOperatingDeposit(isOperatingDeposit, _) &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
+        checkRangeByKeys(daysValue, ['minDays', 'maxDays'], _)
       );
     }) || DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS;
 
@@ -82,9 +83,12 @@ export const useBusinessDepositCalculatorParams = (
 
   const income = getDepositIncome(rate, userInputParams);
   const finalSum = moneyValue + income;
+  const sourceBookRows = data?.rows || [DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS];
 
   return {
     ...businessDepositCalculatorSourceBookParams,
+    ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+    ...getRangeByKeys(['minDays', 'maxDays'], sourceBookRows),
     ...userInputParams,
     isDisabledOperatingDeposit,
     income,
@@ -92,6 +96,14 @@ export const useBusinessDepositCalculatorParams = (
   };
 };
 
+const checkIsOperatingDeposit = (
+  isOperatingDeposit: boolean,
+  sourceBookRow: BusinessDepositCalculatorSourceBookParams,
+) =>
+  isOperatingDeposit
+    ? sourceBookRow.isReplenished && sourceBookRow.isPartialWithdrawal
+    : !sourceBookRow.isReplenished && !sourceBookRow.isPartialWithdrawal;
+
 const getDepositIncome = (
   rate: number,
   userInputParams: BusinessDepositCalculatorUserInputParams,

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -1,5 +1,6 @@
 import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
 import { getMonthlyPayment } from './getMonthlyPayment';
+import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
 import { useCalculatorParams } from './useCalculatorParams';
 
 export interface CommonCreditParams {
@@ -38,7 +39,7 @@ export const useCreditCalculatorParams = (
   userInputParams: CreditCalculatorUserInputParams,
   sourceBookDir?: string,
 ): CreditCalculatorParams => {
-  const { isInsurance, isSalaryClient, isStateEmployee, moneyValue } = userInputParams;
+  const { isInsurance, isSalaryClient, isStateEmployee, moneyValue, monthsValue } = userInputParams;
 
   const data = useCalculatorParams<CreditCalculatorData>(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
   const creditCalculatorSourceBookParams =
@@ -46,16 +47,21 @@ export const useCreditCalculatorParams = (
       return (
         isInsurance === _.isInsurance &&
         isSalaryClient === _.isSalaryClient &&
-        isStateEmployee === _.isStateEmployee
+        isStateEmployee === _.isStateEmployee &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _)
       );
     }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
 
   const { rateBottomRange, rateTopRange, sumBorder } = creditCalculatorSourceBookParams;
   const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
   const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
+  const sourceBookRows = data?.rows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
 
   return {
     ...creditCalculatorSourceBookParams,
+    ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+    ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
     ...userInputParams,
     finalRate,
     monthlyPayment,

package/src/components/Calculator/useDepositCalculatorParams.ts

@@ -1,9 +1,11 @@
 import { DEFAULT_DEPOSIT_CALCULATOR_PARAMS, DEPOSIT_CALC_DEFAULT_DIR } from './constants';
+import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
 import { useCalculatorParams } from './useCalculatorParams';
 
 export interface CommonDepositParams {
   isMonthlyInterestPayment: boolean;
 }
+
 export interface DepositCalculatorSourceBookParams extends CommonDepositParams {
   minSum: number;
   maxSum: number;
@@ -32,22 +34,34 @@ export const useDepositCalculatorParams = (
   userInputParams: DepositCalculatorUserInputParams,
   sourceBookDir?: string,
 ): DepositCalculatorParams => {
-  const { isMonthlyInterestPayment, moneyValue } = userInputParams;
+  const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
 
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
   );
 
   const depositCalculatorSourceBookParams =
-    data?.rows?.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
-    DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+    data?.rows?.find(
+      (_) =>
+        isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _),
+    ) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
 
   const { rate } = depositCalculatorSourceBookParams;
 
   const income = getDepositIncome(rate, userInputParams);
   const finalSum = moneyValue + income;
+  const sourceBookRows = data?.rows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];
 
-  return { ...depositCalculatorSourceBookParams, ...userInputParams, income, finalSum };
+  return {
+    ...depositCalculatorSourceBookParams,
+    ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+    ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
+    ...userInputParams,
+    income,
+    finalSum,
+  };
 };
 
 const getDepositIncome = (rate: number, userInputParams: DepositCalculatorUserInputParams) => {

package/src/components/Carousel/Carousel.tsx

@@ -52,10 +52,12 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={ITEMS_GAP}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {renderChildren({
-              ...rest,
-              block: { ...rest.block, blocks: buildBlocks(childBlocks, activeIndex) },
-            })}
+            {isBankHistoryCarousel
+              ? renderChildren({
+                  ...rest,
+                  block: { ...rest.block, blocks: buildBlocks(childBlocks, activeIndex) },
+                })
+              : renderChildren(rest)}
           </SwipeListContainer>
           <CarouselScrollButtons
             scroll={scroll}

package/src/components/PictureText/renderBenefit.tsx

@@ -4,6 +4,7 @@ import type { ComplexBenefitProps } from '../../ui-kit/BenefitItem/BenefitItemPr
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 
+// TODO: Create universal function for this case
 export const renderBenefit =
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return

package/src/components/ProductTile/renderBenefit.tsx

@@ -3,6 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import type { Benefit } from './ProductTileContent';
 
+// TODO: Create universal function for this case
 export const renderBenefit =
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return

package/src/components/StepsBlock/StepsBlock.fixture.mobile.tsx

@@ -1,16 +1,20 @@
 import '../../setup-fixture';
 import { StepsBlock } from './StepsBlock';
+import type { Step } from './StepsBlockContent';
 
-const steps = [
+const steps: Step[] = [
   {
+    type: 'default',
     label: 'Заявка на кредит',
     description: 'Оставьте онлайн-заявку на потребительский кредит',
   },
   {
+    type: 'default',
     label: 'В случае одобрения',
     description: 'Менеджер свяжется с вами и согласует встречу',
   },
   {
+    type: 'default',
     label: 'Получение наличных',
     description: 'Получите наличные в отделении банка',
   },
@@ -49,19 +53,23 @@ export default {
           size="small"
           steps={[
             {
+              type: 'default',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
               icon: { icon: 'ClockIcon' },
             },
             {
+              type: 'default',
               label: 'В случае одобрения',
               icon: { icon: 'SignDocsIcon' },
             },
             {
+              type: 'default',
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
               icon: { icon: 'ComfortableCompIcon' },
             },
             {
+              type: 'default',
               label: 'Получение наличных',
               icon: { icon: 'ClockIcon' },
             },
@@ -78,14 +86,17 @@ export default {
           size="small"
           steps={[
             {
+              type: 'default',
               label: 'Заявка на кредит',
               icon: { icon: 'EmptyWalletIcon' },
             },
             {
+              type: 'default',
               label: 'В случае одобрения',
               icon: { icon: 'PercentageSquareIcon' },
             },
             {
+              type: 'default',
               label: 'Получение наличных',
               icon: { icon: 'CalendarIcon' },
             },
@@ -128,19 +139,23 @@ export default {
           size="small"
           steps={[
             {
+              type: 'default',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
               icon: { icon: 'ClockIcon', iconVersion: 'normal' },
             },
             {
+              type: 'default',
               label: 'В случае одобрения',
               icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
             },
             {
+              type: 'default',
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
               icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
             },
             {
+              type: 'default',
               label: 'Получение наличных',
               icon: { icon: 'ClockIcon', iconVersion: 'normal' },
             },
@@ -158,14 +173,17 @@ export default {
           size="small"
           steps={[
             {
+              type: 'default',
               label: 'Заявка на кредит',
               icon: { icon: 'EmptyWalletIcon' },
             },
             {
+              type: 'default',
               label: 'В случае одобрения',
               icon: { icon: 'PercentageSquareIcon' },
             },
             {
+              type: 'default',
               label: 'Получение наличных',
               icon: { icon: 'CalendarIcon' },
             },

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -1,12 +1,12 @@
 import '../../setup-fixture';
 import type { StepsBlockProps } from './StepsBlock';
 import { StepsBlock } from './StepsBlock';
-import type { Step } from './StepsBlockContent';
+import type { DefaultStep, Step } from './StepsBlockContent';
 
 const TITLE =
   'Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит';
 
-const ITEMS: Step['items'] = ['item1', 'item2', 'item3', 'item4', 'item5'];
+const ITEMS: DefaultStep['items'] = ['item1', 'item2', 'item3', 'item4', 'item5'];
 const COMMON_PROPS: StepsBlockProps = {
   className: 'col-span-12',
   title: TITLE,
@@ -14,18 +14,22 @@ const COMMON_PROPS: StepsBlockProps = {
 
 const STEPS: Step[] = [
   {
+    type: 'default',
     label: 'Заявка на кредит',
     description: 'Оставьте онлайн-заявку на потребительский кредит',
   },
   {
+    type: 'default',
     label: 'В случае одобрения',
     description: 'Менеджер свяжется с вами и согласует встречу',
   },
   {
+    type: 'default',
     label: 'Получение наличных',
     description: 'Получите наличные в отделении банка',
   },
   {
+    type: 'default',
     label: 'Последний шаг!',
     description: 'Получите наличные в отделении банка',
   },
@@ -33,23 +37,26 @@ const STEPS: Step[] = [
 
 const STEPS_WITH_ICONS: Step[] = [
   {
+    type: 'default',
     label: 'В мобильном приложении или интернет-банке',
     description: 'Для всех клиентов Россельхозбанка',
     icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
   },
   {
+    type: 'default',
     label: 'Через Госуслуги',
     description: 'При наличии данных в Единой биометрической системе',
     icon: { icon: 'ClockIcon', iconVersion: 'normal' },
   },
   {
+    type: 'default',
     label: 'В офисах Россельхозбанка',
     description: 'Откройте вклад',
     icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
   },
 ];
 
-const BUTTONS: Step['button'][] = [
+const BUTTONS: DefaultStep['button'][] = [
   { text: 'Войти в интернет-банк' },
   { text: 'Оформить' },
   { text: 'Офисы на карте' },

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -5,9 +5,11 @@ import type { SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { assertUnreachable } from '../../utils/assertUnreachable';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
+import { checkCanRenderIcon } from './checkCanRenderIcon';
+import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
@@ -50,7 +52,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
             <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map(renderStepTitle(size, version, showLines))}
+              {steps.map(renderStep(size, version, showLines))}
             </div>
           </div>
         ) : null}
@@ -59,9 +61,31 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-const renderStepTitle =
+// TODO: Create universal function for this case
+const renderStep =
   (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
   (step: Step, i: number, steps: Step[]) => {
+    const { type } = step;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return renderDefaultStep(size, version, showLines)(step, i, steps);
+      case 'rte':
+        return <RichText __html={step.__html} />;
+      default:
+        assertUnreachable(step);
+    }
+  };
+
+const renderDefaultStep =
+  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (step: DefaultStep, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
     const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
@@ -106,7 +130,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
       <span className={`font-medium flex self-center ${iconTextSize}`}>
-        {checkIsIconRenderable(step?.icon) ? (
+        {checkCanRenderIcon(step?.icon) ? (
           <Img
             image={getIconWithVersion({ ...step.icon }, version)}
             width={iconSize}