@redneckz/wildless-cms-uni-blocks 0.3.10 → 0.3.13

package/mobile/src/common.css

@@ -136,4 +136,16 @@
     box-shadow: none;
     border: 3px solid #42ab44;
   }
+
+  /* Hide arrows */
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Hide arrows */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
 }

package/mobile/src/components/Accordion/AccordionBlocks.tsx

@@ -1,6 +1,7 @@
 import { Headline } from '../Headline/Headline';
 import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { PictureText } from '../PictureText/PictureText';
+import { ProductBlock } from '../ProductBlock/ProductBlock';
 import { TextBlock } from '../TextBlock/TextBlock';
 import { Tile } from '../Tile/Tile';
 import { ProductTile } from '../ProductTile/ProductTile';
@@ -13,6 +14,7 @@ export const AccordionBlocks = {
   LinkDocs,
   TextBlock,
   PictureText,
+  ProductBlock,
   Tile,
   ProductTile,
   Gallery,

package/mobile/src/components/Accordion/AccordionContent.ts

@@ -3,6 +3,7 @@ import type { HeadlineContent } from '../Headline/HeadlineContent';
 import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 import type { MiniGalleryContent } from '../MiniGallery/MiniGalleryContent';
 import type { PictureTextContent } from '../PictureText/PictureTextContent';
+import type { ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import type { ProductTileContent } from '../ProductTile/ProductTileContent';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
 import type { TileContent } from '../Tile/TileContent';
@@ -18,6 +19,7 @@ export type AccordionBlockType =
   | 'PictureText'
   | 'Tile'
   | 'ProductTile'
+  | 'ProductBlock'
   | 'Gallery'
   | 'MiniGallery'
   | 'LinkList';
@@ -46,6 +48,11 @@ export type TextBlockAccordionBlockDef = TextBlockContent & AccordionBlockDef;
  */
 export type PictureTextAccordionBlockDef = PictureTextContent & AccordionBlockDef;
 
+/**
+ * @title Продуктовый блок
+ */
+export type ProductBlockAccordionBlockDef = ProductBlockContent & AccordionBlockDef;
+
 /**
  * @title Плитка
  */
@@ -85,12 +92,19 @@ export type AccordionBlockProps =
   | LinkDocsAccordionBlockDef
   | TextBlockAccordionBlockDef
   | PictureTextAccordionBlockDef
+  | ProductBlockAccordionBlockDef
   | TileAccordionBlockDef
   | ProductTileAccordionBlockDef
   | GalleryAccordionBlockDef
   | MiniGalleryAccordionBlockDef
   | LinkListAccordionBlockDef;
 
+/**
+ * @title Количество колонок
+ * @enumNames ["1 колонка", "2 колонки"]
+ */
+export type ColumnsCount = 1 | 2;
+
 /**
  * @title Элемент списка
  */
@@ -107,6 +121,8 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
+
+  columns?: ColumnsCount;
 }
 
 /**

package/mobile/src/components/Accordion/AccordionItem.tsx

@@ -26,13 +26,13 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered,
         onClick={handleToggle}
       >
         <span
-          className={`text-sm pr-2.5 font-medium ${
+          className={`text-m-title-xs pr-2.5 font-medium ${
             hasContent ? 'group-hover:text-primary-main' : ''
           }`}
         >
           {label}
         </span>
-        {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
+        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
       </button>
       {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
     </li>

package/mobile/src/components/Accordion/AccordionItemInner.tsx

@@ -21,7 +21,7 @@ const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps
 
   const AccordionBlock: JSXBlock = AccordionBlocks[type];
   return (
-    <div className="mb-5 last:mb-0" key={`block_${i}`}>
+    <div className="mb-5 last:mb-0 first:mt-2" key={`block_${i}`}>
       <AccordionBlock context={context} {...block} className="!p-0" />
     </div>
   );

package/mobile/src/components/BaseTile/BaseTile.tsx

@@ -12,7 +12,7 @@ export const BaseTile = JSX<BaseTileProps>(
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            <div>{buttons}</div>
+            {buttons?.length ? <div>{buttons}</div> : null}
           </div>
           {image}
         </div>

package/mobile/src/components/Blocks.ts

@@ -1,29 +1,33 @@
 import { Accordion } from './Accordion/Accordion';
+import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { LinkDocs } from './LinkDocs/LinkDocs';
+import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
-import { LinkList } from './LinkList/LinkList';
 
 export const Blocks = {
   Accordion,
+  ComparisonTable,
   ExchangeRateTile,
   Footer,
   Gallery,
   Header,
   Headline,
   LinkDocs,
+  LinkList,
   MobileAppTile,
   ProductBlock,
   ProductGallery,
   StepsBlock,
+  TariffsTable,
   TextBlock,
-  LinkList,
 };

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

@@ -0,0 +1,68 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
+import { ComparisonTableRows } from './ComparisonTableRows';
+import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { Column, RowHeader } from './ComparisonTableContent';
+
+interface ComparisonTableBodyProps {
+  context: ContentPageContext;
+  columns?: Column[];
+  rowHeaders?: RowHeader[];
+  isShowAllRow: boolean;
+  isColoredFirstColumn: boolean;
+  visibleRowLength: number;
+}
+
+export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
+  ({ context, columns, rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+
+    const colHeaders = columns?.map(({ header }) => header || {});
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData = rowHeaders
+      ?.map((header, i) => ({
+        header,
+        data: colData.map((col) => col?.[i] || [{}]),
+      }))
+      .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
+
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const tableArrowScrollProps = useTableArrowScrollControl({
+      columnsLength: colData.length,
+      colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
+      activeCardIndex,
+      setActiveCardIndex,
+    });
+    const { isScrollAvailable } = tableArrowScrollProps;
+
+    return (
+      <div>
+        <div role="table">
+          {colHeaders?.length ? (
+            <ComparisonTableColumnHeaders
+              colHeaders={colHeaders}
+              activeCardIndex={activeCardIndex}
+              router={router}
+              handlerDecorator={handlerDecorator}
+            />
+          ) : null}
+          {rowData?.length ? (
+            <ComparisonTableRows
+              rowData={rowData}
+              activeCardIndex={activeCardIndex}
+              isColoredFirstColumn={isColoredFirstColumn}
+              {...tableArrowScrollProps}
+            />
+          ) : null}
+        </div>
+        {isScrollAvailable ? (
+          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        ) : null}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TableRowContainer } from './TableRowContainer';
+import { COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
+import { TableCarouselContainer } from './TableCarouselContainer';
+import { HeaderCell } from './HeaderCell';
+import { useLink } from '../../hooks/useLink';
+import type { ColumnHeader } from './ComparisonTableContent';
+import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
+
+interface ComparisonTableColumnHeadersProps {
+  colHeaders: ColumnHeader[];
+  activeCardIndex: number;
+  router: Router;
+  handlerDecorator: HandlerDecorator | undefined;
+}
+
+export const ComparisonTableColumnHeaders = JSX<ComparisonTableColumnHeadersProps>(
+  ({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
+    return (
+      <TableRowContainer>
+        <div className={FIRST_CELL_CLASSES} role="columnheader" scope="col" />
+        <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
+          {colHeaders.map((header, i) => (
+            <HeaderCell
+              key={String(i)}
+              {...header}
+              link={header.link && useLink({ router, handlerDecorator }, header.link)}
+            />
+          ))}
+        </TableCarouselContainer>
+      </TableRowContainer>
+    );
+  },
+);

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

@@ -63,6 +63,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
-  /** @title Использовать свайпер- */
+  /** @title Использовать свайпер (моб.) */
   useSwiper?: boolean;
 }

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

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TableRow } from './TableRow';
+import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
+import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { CellData } from './ComparisonTableContent';
+
+type ComparisonTableRowsProps = TableArrowScrollControlProps & {
+  rowData: { header: HeadingContent; data: CellData[][] }[];
+  activeCardIndex: number;
+  isColoredFirstColumn: boolean;
+};
+
+export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
+  ({ rowData, activeCardIndex, isColoredFirstColumn, ...tableArrowScrollProps }) => {
+    return (
+      <div className="relative">
+        {rowData.map((row, i, { length }) => (
+          <TableRow
+            key={String(i)}
+            row={row}
+            isFirstRow={i === 0}
+            isLastRow={i + 1 === length}
+            activeCardIndex={activeCardIndex}
+            isColoredFirstColumn={isColoredFirstColumn}
+          />
+        ))}
+        <TableArrowScrollControl {...tableArrowScrollProps} />
+      </div>
+    );
+  },
+);

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

@@ -21,7 +21,10 @@ export const TableColumn = JSX<TableColumnProps>(
     const gradientClassName = isFillGradient ? GRADIENT : '';
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
     return (
-      <div className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}>
+      <div
+        className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}
+        role="row"
+      >
         <HeaderCell {...header} isFillGradient={isFillGradient} />
         {columnDataView?.length
           ? columnDataView.map(({ rowHeader, cell }, i) => (
@@ -53,8 +56,9 @@ const renderButton = ({ header, buttonVersion }) => (
 );
 
 const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
-  <div className="mt-5">
+  <div className="mt-5" role="cell">
     <a
+      role="link"
       onClick={onToggleColumn}
       className={`font-medium text-m-sm cursor-pointer ${
         isFillGradient ? 'text-white/80' : 'text-primary-main'

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

@@ -21,7 +21,7 @@ export interface Search {
 
 export type AsyncDataHook = <Data, Error = any>(
   key: string,
-  fetcher: () => Promise<Data>,
+  fetcher: (key: string) => Promise<Data>,
 ) => { data?: Data; error?: Error };
 
 export type GeolocationHook = (defaultLocation: string) => [string, () => void];

package/mobile/src/components/CreditCalculator/CreditCalculator.tsx

@@ -1,154 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
 import { UniBlockProps } from '../../types';
-import { Button } from '../../ui-kit/Button/Button';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { clamp } from '../../utils/clamp';
-import {
-  DEFAULT_MAX_MONTHS,
-  DEFAULT_MAX_SUM,
-  DEFAULT_MIN_MONTHS,
-  DEFAULT_MIN_SUM,
-  DEFAULT_MONTHS,
-  DEFAULT_SUM,
-  MONTHS_IN_YEAR,
-} from './constants';
-import { CreditCalculatorContent } from './CreditCalculatorContent';
-import { getCalculatorParams } from './getCalculatorParams';
-import { getCreditRate } from './getCreditRate';
-import { getCreditTermYears } from './getCreditTermYears';
-import { getMonthlyPayment } from './getMonthlyPayment';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Tabs } from '../../ui-kit/Tabs/Tabs';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import type { CreditCalculatorContent } from './CreditCalculatorContent';
+import { CreditCalculatorForm } from './CreditCalculatorForm';
+import { DEFAULT_TABS } from './defaultTabs';
 
 export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
 
-const STEP_MONEY = 1000;
-const STEP_MONTHS = 1;
-const DEFAULT_PAYMENT_TYPE = 'annuity';
-
-const borderStyle = 'border-solid border-[3px] border-primary-main rounded-md';
-
 export const CreditCalculator = JSX<CreditCalculatorProps>(
-  ({ context, className, directoryName }) => {
-    const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
-    const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
-    const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
-    const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
-
-    const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
-
-    const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
-
-    const defaultSum =
-      calculatorParams.maxSum && calculatorParams.minSum
-        ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
-        : DEFAULT_SUM;
-
-    const defaultMonths =
-      calculatorParams.maxMonths && calculatorParams.minMonths
-        ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
-        : DEFAULT_MONTHS;
-
-    const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-    const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
-    const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
-    const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
-
-    const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
-
-    const montlyPayment = getMonthlyPayment({
-      calculatorParams,
-      paymentType: DEFAULT_PAYMENT_TYPE,
-      rate,
-      sum: moneyValue || defaultSum,
-      months: monthsValue || defaultMonths,
-    });
-
-    const creditTermYears = getCreditTermYears(minMonths, maxMonths);
-
-    function handleButtonClick(value: number) {
-      setMonthsValue(clamp(value * MONTHS_IN_YEAR, minMonths, maxMonths));
-    }
+  ({ className = '', context, tabs = DEFAULT_TABS }) => {
+    const [currentTabIndex, setCurrentTabIndex] = context.useState(0);
 
     return (
-      <section className={`font-sans text-primary-text p-10 bg-white ${className || ''}`}>
-        <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${borderStyle}`}>
-          <div className="flex justify-between ">
-            <div className="mr-[42px]">
-              <InputRange
-                title="Желаемая сумма кредита, ₽"
-                items={[
-                  `От ${addSpacesBetweenNumbers(minSum)} рублей`,
-                  `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
-                ]}
-                min={minSum}
-                max={maxSum}
-                step={STEP_MONEY}
-                value={moneyValue || defaultSum}
-                onChange={setMoneyValue}
-              />
-              <InputRange
-                className="mt-[23px]"
-                title="Срок кредита, месяцев"
-                items={['Или выберите из предложенных вариантов ниже']}
-                min={minMonths}
-                max={maxMonths}
-                step={STEP_MONTHS}
-                value={monthsValue || defaultMonths}
-                onChange={setMonthsValue}
-              />
-              <div className="flex mb-7">
-                {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
-              </div>
-              <Checkbox
-                text="Получаю пенсию на карту Россельхозбанка"
-                checked={isAnnuityChecked}
-                onChange={setIsAnnuityChecked}
-              />
-              <Checkbox
-                className="mt-3 mb-7"
-                text="Комплексная страховая защита"
-                checked={isInsuranceChecked}
-                onChange={setIsInsuranceChecked}
-              />
-            </div>
-            <div className="box-border h-fit p-9 bg-primary-main rounded-md text-white">
-              <div className="text-base mb-[18px]">Наше предложение</div>
-              <div className="text-sm opacity-60">Ежемесячный платёж</div>
-              <div className="text-lg mb-3">
-                {addSpacesBetweenNumbers(Math.round(montlyPayment))} ₽
-              </div>
-              <div className="text-sm opacity-60">Ставка</div>
-              <div className="text-lg">{rate} %</div>
-            </div>
-          </div>
-          <div className="flex items-center">
-            <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
-            <div
-              className="w-80 text-2xs leading-4 text-secondary-text"
-              aria-label="Соглашение на обработку персональных данных"
-            >
-              Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
-              требованиям ФЗ «О персональных данных»
-            </div>
-          </div>
-        </div>
+      <section className={`font-sans text-primary-text py-10 bg-white ${className}`}>
+        <Heading
+          className="w-full text-center mb-8"
+          headingType={getTileHeadingType(className)}
+          title="Калькулятор"
+        />
+        <Tabs tabs={tabs} currentTabIndex={currentTabIndex} onTabClick={setCurrentTabIndex} />
+        <CreditCalculatorForm
+          context={context}
+          directoryName={tabs[currentTabIndex]?.directoryName}
+        />
       </section>
     );
   },
 );
-
-function renderButton(number: number, i: number, handleClick: (number: number) => void) {
-  return (
-    <button
-      key={String(i)}
-      className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none"
-      onClick={() => handleClick(number)}
-    >
-      <span className="font-semibold text-sm">
-        {number} {number === 1 ? 'год' : number > 4 ? 'лет' : 'года'}
-      </span>
-    </button>
-  );
-}

package/mobile/src/components/CreditCalculator/CreditCalculatorContent.ts

@@ -1,3 +1,5 @@
+import type { Tab } from '../../ui-kit/Tabs/TabsProps';
+
 export interface CalculatorParams {
   isAnnuity?: boolean;
   minSum?: number;
@@ -13,9 +15,17 @@ export interface CreditCalculatorData {
 }
 
 /**
- * @title Кредитный калькулятор
+ * @title Вкладка
  */
-export interface CreditCalculatorContent {
+export interface CreditCalculatorTab extends Tab {
   /** @title Справочник */
   directoryName?: string;
 }
+
+/**
+ * @title Кредитный калькулятор
+ */
+export interface CreditCalculatorContent {
+  /** @title Вкладки */
+  tabs?: CreditCalculatorTab[];
+}

package/mobile/src/components/CreditCalculator/CreditCalculatorForm.tsx

@@ -0,0 +1,92 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
+import type { UniBlockProps } from '../../types';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { clamp } from '../../utils/clamp';
+import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS, MONTHS_IN_YEAR } from './constants';
+import { getCalculatorParams } from './getCalculatorParams';
+import { getCreditRate } from './getCreditRate';
+import { getCreditTermYears } from './getCreditTermYears';
+import { getDefaultMonths } from './getDefaultMonths';
+import { getDefaultSum } from './getDefaultSum';
+import { getMonthlyPayment } from './getMonthlyPayment';
+import { renderButton } from './renderButton';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderProposal } from './renderProposal';
+import { renderTermsButton } from './renderTermsButton';
+import { renderWantedSumInput } from './renderWantedSumInput';
+
+const DEFAULT_PAYMENT_TYPE = 'annuity';
+
+const BORDER_STYLE = 'border-solid border-[3px] border-primary-main rounded-md';
+
+export interface CreditCalculatorFormProps extends UniBlockProps {
+  directoryName?: string;
+}
+
+export const CreditCalculatorForm = JSX<CreditCalculatorFormProps>(({ context, directoryName }) => {
+  const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
+  const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
+  const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+  const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+
+  const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
+  const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
+
+  const defaultSum = getDefaultSum(calculatorParams);
+  const defaultMonths = getDefaultMonths(calculatorParams);
+
+  const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
+  const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
+
+  const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
+
+  const monthlyPayment = getMonthlyPayment({
+    calculatorParams,
+    paymentType: DEFAULT_PAYMENT_TYPE,
+    rate,
+    sum: moneyValue || defaultSum,
+    months: monthsValue || defaultMonths,
+  });
+
+  const creditTermYears = getCreditTermYears(minMonths, maxMonths);
+
+  function handleButtonClick(value: number) {
+    setMonthsValue(clamp(value * MONTHS_IN_YEAR, minMonths, maxMonths));
+  }
+
+  return (
+    <section className="mt-7">
+      <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${BORDER_STYLE}`}>
+        <div className="flex justify-between">
+          <div className="mr-[42px]">
+            {renderWantedSumInput({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
+            {renderMonthsInput({
+              minMonths,
+              maxMonths,
+              monthsValue,
+              defaultMonths,
+              setMonthsValue,
+            })}
+            <div className="flex mb-7">
+              {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
+            </div>
+            <Checkbox
+              text="Получаю пенсию на карту Россельхозбанка"
+              checked={isAnnuityChecked}
+              onChange={setIsAnnuityChecked}
+            />
+            <Checkbox
+              className="mt-3 mb-7"
+              text="Комплексная страховая защита"
+              checked={isInsuranceChecked}
+              onChange={setIsInsuranceChecked}
+            />
+          </div>
+          {renderProposal(monthlyPayment, rate)}
+        </div>
+        {renderTermsButton()}
+      </div>
+    </section>
+  );
+});

package/mobile/src/components/CreditCalculator/defaultTabs.ts

@@ -0,0 +1,22 @@
+import type { CreditCalculatorTab } from './CreditCalculatorContent';
+
+export const DEFAULT_TABS: CreditCalculatorTab[] = [
+  {
+    title: 'Кредит',
+    description: 'Ставка от 6% до 7 лет',
+    directoryName: 'credit-calculator-data',
+    icon: 'CardIcon',
+  },
+  {
+    title: 'Кредит',
+    description: 'Ставка от 4% до 7 лет',
+    directoryName: 'credit-calculator-data1',
+    icon: 'ChartSquareIcon',
+  },
+  {
+    title: 'Кредит',
+    description: 'Ставка от 3% до 6 лет',
+    directoryName: 'credit-calculator-data2',
+    icon: 'DiscountShapeIcon',
+  },
+];

package/mobile/src/components/CreditCalculator/getCalculatorParams.ts

@@ -1,4 +1,4 @@
-import { CalculatorParams } from './CreditCalculatorContent';
+import type { CalculatorParams } from './CreditCalculatorContent';
 
 interface GetCalculatorParamsParams {
   tableRows?: CalculatorParams[];