@redneckz/wildless-cms-uni-blocks 0.12.13 → 0.13.0

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

@@ -3,27 +3,25 @@ import { useEffect, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import type { LinkProps } from '../../model/LinkProps';
 import { useSearch, type SearchResult } from '../../services/search/useSearch';
 import type { TopMenuItemProps } from '../../services/sitemap/SitemapData';
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import { joinPath } from '../../utils/url';
 import { zip } from '../../utils/zip';
-import { Dialog } from '../Dialog/Dialog';
-import { useDialogProps } from '../Dialog/useDialogProps';
+import { Dialog } from '../DialogManager/Dialog';
 import { Sitemap } from '../Sitemap/Sitemap';
 import { SearchInput } from './SearchInput';
 
 export interface SearchDialogProps {
-  topItems?: TopMenuItemProps[];
+  initialQuery?: string;
 }
 
-export const SEARCH_DIALOG_ID = 'search';
-
-export const SearchDialog = JSX<SearchDialogProps>(({ topItems }) => {
-  const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
+export const SearchDialog = JSX<SearchDialogProps>(({ initialQuery }) => {
+  const { topItems } = useSitemap();
 
   const basePathList = useMemo(() => topItems?.map((_) => _.href || '/'), [topItems]);
   const [searchResult, searchInputProps] = useSearch({
     basePathList,
-    initialQuery: dialogProps.message,
-    wasOpened: dialogProps.wasOpened,
+    initialQuery,
+    wasOpened: false,
   });
 
   const searchItems = useMemo(
@@ -34,7 +32,7 @@ export const SearchDialog = JSX<SearchDialogProps>(({ topItems }) => {
   useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
 
   return (
-    <Dialog {...dialogProps} head={<SearchInput autoFocus={true} {...searchInputProps} />}>
+    <Dialog head={<SearchInput autoFocus={true} {...searchInputProps} />}>
       <Sitemap topItems={searchItems} />
     </Dialog>
   );

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

@@ -0,0 +1,12 @@
+import { DialogOptions, useDialogManager } from '../DialogManager/useDialogManager';
+import { SearchDialog, SearchDialogProps } from './SearchDialog';
+
+export const useSearchDialog = () => {
+  const { open, close } = useDialogManager();
+
+  return {
+    open: (props: SearchDialogProps = {}, options: DialogOptions = {}) =>
+      open(<SearchDialog {...props} />, options),
+    close,
+  };
+};

package/mobile/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -26,7 +26,7 @@ interface SwipeListContainerProps extends SwipeListContainerContent {
   onVisibleIndicesChange?: (indices: number[]) => void;
 }
 
-const childStyleMap = ['min-w-full', 'min-w-1/2', 'min-w-1/3', 'min-w-1/4'];
+const childStyleMap = ['min-w-full', '@lg:min-w-[50%]', '@lg:min-w-[33.3%]', '@lg:min-w-[25%]'];
 
 export const SwipeListContainer = JSX<SwipeListContainerProps>(
   ({

package/mobile/src/ui-kit/TabsControl/ScrollableTabsControl.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { ScrollLeftButton, ScrollRightButton } from '../Button/ArrowButton';
+import { SwipeListContainer } from '../SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../SwipeListControl/useSwipeListScroll';
+import { renderTab } from './renderTab';
+import type { TabsControlProps } from './TabsControlProps';
+
+const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-0';
+
+export const ScrollableTabsControl = JSX<TabsControlProps>(
+  ({ className, items = [], value, onChange, tabsType }) => {
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+      itemCount: items?.length || 0,
+    });
+
+    return (
+      <div className={style('relative overflow-x-auto no-scrollbar', className)} role="tablist">
+        <SwipeListContainer
+          containerRef={containerRef}
+          snapAlign="snap-start"
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+        >
+          {items.map(renderTab(value, onChange, tabsType))}
+        </SwipeListContainer>
+        {scroll.canScrollLeft ? (
+          <ScrollLeftButton
+            className={style('left-6', scrollButtonStyle)}
+            onClick={scroll.scrollLeft}
+          />
+        ) : null}
+        {scroll.canScrollRight ? (
+          <ScrollRightButton
+            className={style('right-6', scrollButtonStyle)}
+            onClick={scroll.scrollRight}
+          />
+        ) : null}
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/TabsControl/TabItem.tsx

@@ -0,0 +1,81 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
+import type { TabsControlProps } from './TabsControlProps';
+
+export type TabItemBase = LinkProps;
+
+export type TabType = 'default' | 'underlined' | 'rounded';
+
+export interface TabItemProps {
+  item?: TabItemBase;
+  isActive?: boolean;
+  onClick?: TabsControlProps['onChange'];
+  type?: TabType;
+}
+
+const tabPaddingStyleMap: Record<TabType, string> = {
+  default: 'px-xs',
+  underlined: 'px-m',
+  rounded: 'px-lg rounded-md',
+};
+
+const tabTextStyle = 'text-secondary-text hover:text-primary-main';
+
+const activeTabTextStyleMap: Record<TabType, string> = {
+  default: 'text-black sm:text-white',
+  underlined: 'text-primary-main border-b-2',
+  rounded: 'text-white',
+};
+
+const tabBgStyleMap: Record<TabType, string> = {
+  default: 'bg-white',
+  underlined: 'bg-white',
+  rounded: 'bg-transparent',
+};
+
+const activeTabBgStyleMap: Record<TabType, string> = {
+  default: 'sm:bg-primary-main',
+  underlined: 'bg-white',
+  rounded: 'bg-primary-main',
+};
+
+export const TabItem = JSX<TabItemProps>(({ item = {}, isActive, onClick, type = 'default' }) => {
+  const link = useLink();
+
+  const handleClick = () => {
+    onClick && onClick(item);
+  };
+
+  const { text, ...linkProps } = link({ ...item, onClick: handleClick });
+
+  const Tag = item.href ? 'a' : 'div';
+
+  return (
+    <Tag
+      className={style(
+        'h-12',
+        'block flex-1',
+        'cursor-pointer',
+        tabPaddingStyleMap[type],
+        isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type],
+      )}
+      role="tab"
+      aria-selected={isActive}
+      {...linkProps}
+    >
+      <div
+        className={style(
+          'h-full',
+          'flex justify-center items-center',
+          'text-center whitespace-nowrap',
+          isActive ? activeTabTextStyleMap[type] : tabTextStyle,
+        )}
+      >
+        <Text size="text-m">{text}</Text>
+      </div>
+    </Tag>
+  );
+});

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

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { renderTab } from './renderTab';
+import type { TabsControlProps } from './TabsControlProps';
+
+export const TabsControl = JSX<TabsControlProps>(
+  ({ className, tabsType = 'default', items = [], value, onChange }) => (
+    <div className={style('flex gap-x-2xs overflow-x-auto no-scrollbar', className)} role="tablist">
+      {items.map(renderTab(value, onChange, tabsType))}
+    </div>
+  ),
+);

package/mobile/src/ui-kit/TabsControl/TabsControlProps.ts

@@ -0,0 +1,7 @@
+import type { ListControlProps } from '../ListControlProps';
+import type { TabItemBase, TabType } from './TabItem';
+
+export interface TabsControlProps extends ListControlProps<TabItemBase> {
+  className?: string;
+  tabsType?: TabType;
+}

package/mobile/src/ui-kit/TabsControl/renderTab.tsx

@@ -0,0 +1,15 @@
+import { TabItem, TabItemBase, TabType } from './TabItem';
+import type { TabsControlProps } from './TabsControlProps';
+
+export const renderTab =
+  (activeTab?: TabItemBase, onClick?: TabsControlProps['onChange'], type?: TabType) =>
+  (tab: TabItemBase, i: number) =>
+    (
+      <TabItem
+        isActive={tab === activeTab}
+        onClick={onClick}
+        type={type}
+        key={String(i)}
+        item={tab}
+      />
+    );

package/mobile/src/utils/BoolComparator.ts

@@ -0,0 +1,47 @@
+import type { Comparator } from './Comparator';
+
+type BoolComparator<T> = (a: T, b: T) => boolean;
+
+export const toBoolComparator =
+  <T>(cmp: Comparator<T>): BoolComparator<T> =>
+  (a: T, b: T) =>
+    cmp(a, b) === 0;
+
+export const scalarCmp = <T>(a: T, b: T) => a === b;
+
+export const arrCmp =
+  <T>(cmp: BoolComparator<T> = scalarCmp) =>
+  (a: T[] | null | undefined, b: T[] | null | undefined) =>
+    a === b || Boolean(a && b && a.length === b.length && a.every((_, i) => cmp(_, b[i])));
+
+export const objCmp =
+  <T>(cmp: BoolComparator<T>) =>
+  (a: Record<string, T> | null | undefined, b: Record<string, T> | null | undefined) =>
+    a === b ||
+    Boolean(
+      a &&
+        b &&
+        Object.keys(a).length === Object.keys(b).length &&
+        Object.entries(a).every(([key, value]) => cmp(value, b[key])),
+    );
+
+export function combineBoolCmps<A>(comp: BoolComparator<A>): BoolComparator<A>;
+export function combineBoolCmps<A, B>(
+  comp1: BoolComparator<A>,
+  comp2: BoolComparator<B>,
+): BoolComparator<A | B>;
+export function combineBoolCmps<A, B, C>(
+  comp1: BoolComparator<A>,
+  comp2: BoolComparator<B>,
+  comp3: BoolComparator<C>,
+): BoolComparator<A | B | C>;
+export function combineBoolCmps<A, B, C, D>(
+  comp1: BoolComparator<A>,
+  comp2: BoolComparator<B>,
+  comp3: BoolComparator<C>,
+  comp4: BoolComparator<D>,
+): BoolComparator<A | B | C | D>;
+
+export function combineBoolCmps(...comparators: BoolComparator<any>[]) {
+  return (a: any, b: any) => comparators.some((cmp) => cmp(a, b));
+}

package/package.json

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

package/src/EventBus/defaultEventBus.ts

@@ -1,10 +1,12 @@
 import type { TabActivationEvent } from '../components/Tabs/TabActivationEvent';
-import type { DialogAction } from '../ui-kit/Dialog/DialogAction';
+import { RegionData } from '../hooks/useLocation';
+import type { DialogAction } from '../ui-kit/DialogManager/DialogAction';
 import { EventBus } from './EventBus';
 
 interface GlobalEventMap {
-  tab: TabActivationEvent;
+  location: RegionData;
   dialog: DialogAction;
+  tab: TabActivationEvent;
 }
 
 export const defaultEventBus = new EventBus<GlobalEventMap>();

package/src/EventBus/useLatestEvent.ts

@@ -0,0 +1,16 @@
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { EventBus } from './EventBus';
+
+export const useLatestEvent = <EM extends Record<string, any>, K extends keyof EM>(
+  eventBus: EventBus<EM>,
+  type: K,
+  initialEvent?: EM[K],
+): [EM[K] | null, (_: EM[K]) => void] => {
+  const [latestEvent, setLatestEvent] = useState<EM[K] | null>(initialEvent || null);
+
+  useEffect(() => eventBus.subscribe(type, (_) => setLatestEvent(_)), [eventBus, type]);
+
+  const fireEvent = useCallback((_: EM[K]) => eventBus.fire(type, _), [eventBus, type]);
+
+  return [latestEvent, fireEvent];
+};

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -2,12 +2,12 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonAdditionalProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
 /**
  * @title Кнопка
  */
-export interface SubmitButtonProps extends ButtonAdditionalProps {
+export interface SubmitButtonProps extends ButtonContent {
   /** @title Текст */
   text?: string;
   version?: ButtonVersion;

package/src/components/Blocks.mobile.ts

@@ -3,6 +3,7 @@ import { ApplicationForm } from './ApplicationForm/ApplicationForm';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
+import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
@@ -38,6 +39,7 @@ export const Blocks: BlocksRegistry = {
   ApplicationForm,
   ButtonsBlock,
   BonusBenefitsBlock,
+  Calculator,
   CardTransfer,
   Carousel,
   CarouselCard,

package/src/components/Bonus/BonusContent.ts

@@ -1,8 +1,8 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
 
 /**
  * @title Изображение
@@ -32,14 +32,10 @@ export type BonusItemContentDef = EmptyOption | BonusImageDef | BonusCountDef;
 /**
  * @title Плитка
  */
-export type BonusItem = HeadlineCommonProps & {
-  bonusItemContent?: BonusItemContentDef;
-  /**
-   * @title Кнопка
-   * @maxItems 1
-   */
-  buttons?: ButtonWithIconProps[];
-};
+export type BonusItem = HeadlineCommonProps &
+  ButtonsSectionContent & {
+    bonusItemContent?: BonusItemContentDef;
+  };
 
 /**
  * @title Блок Бонусы

package/src/components/BusinessBlock/BusinessBlock.fixture.tsx

@@ -1,14 +1,13 @@
 import '../../setup-fixture';
-
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { BusinessBlock } from './BusinessBlock';
 import type {
   BusinessBlockContent,
   BusinessCardItemProps,
   BusinessCardProps,
 } from './BusinessBlockContent';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
-const button: ButtonWithIconProps = {
+const button: ButtonContent = {
   href: '#',
   text: 'Подробнее',
   target: '_blank',

package/src/components/BusinessBlock/BusinessBlockContent.ts

@@ -1,8 +1,8 @@
-import type { ButtonCommonIconProps } from '../../model/Button';
 import type { TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
 export type BusinessCardItemProps = IconProps & {
   /** @title Текст */
@@ -10,10 +10,10 @@ export type BusinessCardItemProps = IconProps & {
 };
 
 export type BusinessCardProps = TitleProps &
-  ImageContent &
-  ButtonCommonIconProps & {
+  ImageContent & {
     /** @title Список */
     cardItems?: BusinessCardItemProps[];
+    button?: ButtonContent;
   };
 
 /**

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

@@ -1,8 +1,8 @@
 import '../../setup-fixture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ButtonsBlock } from './ButtonsBlock';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
-const buttons: ButtonWithIconProps[] = [
+const buttons: ButtonContent[] = [
   {
     href: '/credit-cards',
     text: 'Оформить',

package/src/components/ButtonsBlock/ButtonsBlock.fixture.tsx

@@ -1,8 +1,8 @@
 import '../../setup-fixture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ButtonsBlock } from './ButtonsBlock';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
-const buttons: ButtonWithIconProps[] = [
+const buttons: ButtonContent[] = [
   {
     href: '/credit-cards',
     text: 'Оформить',

package/src/components/ButtonsBlock/ButtonsBlockContent.ts

@@ -1,9 +1,9 @@
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
 /**
  * @title Блок кнопок
  */
 export interface ButtonsBlockContent {
   /** @title Кнопки */
-  buttons?: ButtonWithIconProps[];
+  buttons?: ButtonContent[];
 }

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -1,20 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import type { BusinessDepositCalculatorProps } from './CalculatorContent';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
-import { BUSINESS_DEFAULT_DAYS, BUSINESS_DEFAULT_SUM } from './constants';
-import { Rate } from './Rate';
-import { renderDaysInput } from './renderDaysInput';
 import { renderFootnote } from './renderFootnote';
-import { renderInterestPayment } from './renderInterestPayment';
-import { renderWantedSumInput } from './renderWantedSumInput';
-import { UnknownRate } from './UnknownRate';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { BUSINESS_DEFAULT_DAYS, BUSINESS_DEFAULT_SUM } from './constants';
 import {
   BusinessDepositCalculatorParams,
+  BusinessDepositCalculatorUserInputParams,
   useBusinessDepositCalculatorParams,
 } from './useBusinessDepositCalculatorParams';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderDaysInput } from './renderDaysInput';
+import { renderInterestPayment } from './renderInterestPayment';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { renderRate } from './renderRate';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 
 export interface BusinessDepositCalculatorProp extends BusinessDepositCalculatorProps {
   className?: string;
@@ -32,12 +32,12 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
     });
 
     const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
-    const { income, finalSum, rate, depositeName, isShowUnknownRate } = calculatorParams;
+    const { income, finalSum, rate, isShowUnknownRate, depositeName } = calculatorParams;
 
     return (
       <section className={className}>
-        <div className="flex justify-between">
-          <div className="w-2/5">
+        <div className="flex flex-col justify-between sm:flex-row">
+          <div className="flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg">
             {renderWantedSumInput({
               title: 'Сумма, ₽',
               min: calculatorParams.minSum,
@@ -52,40 +52,30 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
               ...field('daysValue'),
               value: calculatorParams.daysValue,
             })}
-            <div className="mt-2xl flex justify-between">
+            <div className="flex flex-col gap-xl justify-between sm:flex-row sm:gap-0">
               {renderBusinessDepositParamsForm(calculatorParams, field)}
               {renderInterestPayment({
                 title: 'Выплата процентов',
                 orientation: 'vertical',
                 ...field('isMonthlyInterestPayment'),
+                radioGroupClassName: 'sm:flex-col',
               })}
             </div>
           </div>
-          {isShowUnknownRate ? (
-            <UnknownRate />
-          ) : (
-            <Rate
-              rate={rate}
-              depositeName={depositeName}
-              isShowDepositeName={isShowDepositeName}
-              rateBlockClassName="tracking-[-25px]"
-              unit="%"
-            />
-          )}
-
-          <div className="w-96">
-            <CalculatorValueBlock
-              title="Доход в конце срока"
-              value={income}
-              postfix="₽"
-              prefix="+"
-            />
-            <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
-            {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
-            <div className="mt-2xl">{renderFootnote(footnote)}</div>
+          <div className="border-b border-main-divider my-xl sm:hidden"></div>
+          {renderRate({
+            rate,
+            depositeName,
+            isShowDepositeName,
+            isShowUnknownRate,
+          })}
+          <div className="flex flex-col gap-y-xl mt-3xl sm:gap-0 sm:w-96 sm:mt-0">
+            {renderDepositResults(finalSum, income)}
+            {renderButtonsSection(buttons, { isVertical: true })}
+            <div className="sm:mt-2xl">{renderFootnote(footnote)}</div>
           </div>
         </div>
-        <div className="mt-5">{renderFootnote(bottomFootnote)}</div>
+        <div className="mt-lg">{renderFootnote(bottomFootnote)}</div>
       </section>
     );
   },
@@ -93,9 +83,9 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
 
 const renderBusinessDepositParamsForm = (
   calculatorParams: BusinessDepositCalculatorParams,
-  field: FormFieldRegisterer<any>,
+  field: FormFieldRegisterer<BusinessDepositCalculatorUserInputParams>,
 ) => (
-  <div>
+  <div className="flex flex-col gap-y-xl sm:gap-y-s">
     <Checkbox
       text="Пополнение"
       disabled={calculatorParams.isDisabledOperatingDeposit}
@@ -103,17 +93,22 @@ const renderBusinessDepositParamsForm = (
       value={calculatorParams.isReplenished}
     />
     <Checkbox
-      className="mt-3"
       disabled={calculatorParams.isDisabledOperatingDeposit}
       text="Частичное снятие"
       {...field('isPartialWithdrawal')}
       value={calculatorParams.isPartialWithdrawal}
     />
     <Checkbox
-      className="mt-3"
-      text="Являюсь малым предприятием"
+      text="ИП / малое предприятие"
       {...field('isSmallBusiness')}
       value={calculatorParams.isSmallBusiness}
     />
   </div>
 );
+
+const renderDepositResults = (finalSum?: number, income?: number) => (
+  <div className="flex flex-col gap-2xl sm:gap-0">
+    <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
+    <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
+  </div>
+);