@redneckz/wildless-cms-uni-blocks 0.3.9 → 0.3.12

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

@@ -1,15 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
-import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { ComparisonTableContent } from './ComparisonTableContent';
-import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
-import { HeaderCell } from './HeaderCell';
-import { TableCarouselContainer } from './TableCarouselContainer';
-import { TableRow } from './TableRow';
-import { TableRowContainer } from './TableRowContainer';
+import { TableColumn } from './TableColumn';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -22,112 +16,106 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
+    useSwiper = false,
   }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
-    const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
-
-    const colHeaders = columns?.map(({ header }) => header || {});
-    const colData = columns?.map(({ data }) => data) || [];
-    const rowData = rowHeaders
-      ?.map((header, i) => ({
+    const tableData =
+      columns?.map(({ data, header }) => ({
         header,
-        data: colData.map((col) => col?.[i] || [{}]),
-      }))
-      .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
+        column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
+      })) || [];
 
-    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
-      useComparisonTableScroll({
-        colData,
-        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
-        activeCardIndex,
-        setActiveCardIndex,
-      });
+    const [columnsViewState, setColumnsViewState] = context.useState<boolean[]>(
+      new Array(columns?.length).fill(!visibleRowLength),
+    );
 
-    const showToggle = () => setIsShowAllRow(!isShowAllRow);
+    const handleToggleColumn = (i: number) => {
+      columnsViewState[i] = !columnsViewState[i];
+      setColumnsViewState([...columnsViewState]);
+    };
 
     return (
       <section
-        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
+        className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
           className || ''
         }`}
       >
-        <Heading
-          headingType="h2"
-          className="max-w-[47rem] text-center mb-9 mx-auto"
-          title={title}
-        />
-        <div role="table">
-          {colHeaders?.length ? (
-            <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>
-          ) : null}
-
-          {rowData?.length ? (
-            <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}
-                />
-              ))}
-              {isScrollAvailable ? (
-                <div>
-                  <div className="absolute top-7 right-7 z-10">
-                    <ArrowButton
-                      onClick={nextClick}
-                      disabled={!showNextButton}
-                      ariaLabel="Пролистать вправо"
-                    />
-                    <ArrowButton
-                      className="mt-4 rotate-180"
-                      onClick={prevClick}
-                      disabled={!showPrevButton}
-                      ariaLabel="Пролистать влево"
-                    />
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          ) : null}
-        </div>
-
-        {isScrollAvailable ? (
-          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-        ) : null}
+        {title && (
+          <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+        )}
 
-        {visibleRowLength ? (
-          <div className="pr-[50px]">
-            <div className="flex w-full">
-              <div className={FIRST_CELL_CLASSES} />
-              <button
-                onClick={showToggle}
-                className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
-              >
-                <div className="font-sans font-medium text-xs py-[11px]">
-                  {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
-                </div>
-              </button>
-            </div>
-          </div>
-        ) : null}
+        {renderColumns({
+          tableData,
+          context,
+          visibleRowLength,
+          isColoredFirstColumn,
+          columnsViewState,
+          handleToggleColumn,
+          useSwiper,
+          setColumnsViewState,
+        })}
       </section>
     );
   },
 );
+
+const renderColumns = ({
+  context,
+  tableData,
+  visibleRowLength,
+  isColoredFirstColumn,
+  columnsViewState,
+  handleToggleColumn,
+  useSwiper,
+  setColumnsViewState,
+}) => (
+  <div role="table">
+    {tableData?.length ? (
+      useSwiper ? (
+        <SwipeListControl
+          context={context}
+          onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
+        >
+          {tableData.map(
+            renderColumn({
+              context,
+              visibleRowLength,
+              isColoredFirstColumn,
+              columnsViewState,
+              handleToggleColumn,
+            }),
+          )}
+        </SwipeListControl>
+      ) : (
+        tableData.map(
+          renderColumn({
+            context,
+            visibleRowLength,
+            isColoredFirstColumn,
+            columnsViewState,
+            handleToggleColumn,
+          }),
+        )
+      )
+    ) : null}
+  </div>
+);
+
+const renderColumn =
+  ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
+  (columnData, i) =>
+    (
+      <TableColumn
+        key={String(i)}
+        context={context}
+        visibleRowLength={visibleRowLength}
+        showRow={columnsViewState[i]}
+        header={columnData.header}
+        columnData={columnData.column}
+        isFillGradient={i === 0 && isColoredFirstColumn}
+        onToggleColumn={() => handleToggleColumn(i)}
+      />
+    );
+
+const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
+  setColumnsViewState(new Array(columnsViewState.length).fill(false));
+};

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

@@ -26,6 +26,8 @@ export interface CellData {
 export interface ColumnHeader {
   /** @title Заголовок */
   title?: string;
+  /** @title Подзаголовок */
+  subtitle?: string;
   icon?: IconName;
   image?: Picture;
   link?: LinkProps;
@@ -61,4 +63,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
+  /** @title Использовать свайпер- */
+  useSwiper?: boolean;
 }

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

@@ -1,46 +1,50 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
-import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
   icon?: IconName;
   image?: Picture;
   title?: string;
+  subtitle?: string;
+  isFillGradient?: boolean;
   link?: LinkProps;
 }
 
-export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
-  <div
-    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`}
-    role="columnheader"
-    scope="col"
-  >
-    {icon && !image?.src && (
-      <Icon
-        className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-        name={icon}
-        width="63"
-        height="63"
-      />
-    )}
-    {image?.src && <Img className="mb-[18px]" image={image} />}
-    {title && <Heading headingType="h4" className="text-center text-white" title={title} />}
-    {link?.text && (
-      <div className="mt-auto w-full">
-        <Button
-          href={link.href}
-          target={link.target}
-          className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
+export const HeaderCell = JSX<HeaderCellProps>(
+  ({ icon, image, title, subtitle, isFillGradient }) => (
+    <div role="columnheader" scope="col">
+      {icon && (
+        <Icon
+          className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
+          name={icon}
+          width="63"
+          height="63"
+        />
+      )}
+      {image?.src && (
+        <div className="mb-3.5">
+          <Img image={image} />
+        </div>
+      )}
+      {title && (
+        <Heading
+          headingType="h4"
+          className={`${isFillGradient ? 'text-white' : ''}`}
+          title={title}
+        />
+      )}
+      {subtitle && (
+        <div
+          className={`text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`}
         >
-          <div className="font-medium text-xs py-[11px]">{link.text}</div>
-        </Button>
-      </div>
-    )}
-  </div>
-));
+          {subtitle}
+        </div>
+      )}
+    </div>
+  ),
+);

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

@@ -1,43 +1,46 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { CellData } from './ComparisonTableContent';
-import { BORDER_CLASSES, DIVIDER_CLASSES, GRADIENT } from './constants';
+import { DIVIDER_CLASSES } from './constants';
 
 export interface TableCellProps {
   cell: CellData[];
-  isLastRow: boolean;
-  isFirstRow: boolean;
-  isFillGradient: boolean;
+  rowHeader?: string;
+  isLastRow?: boolean;
+  isFirstRow?: boolean;
+  isFillGradient?: boolean;
 }
 
-export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
-  const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${
-    !isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'
-  } ${isFillGradient ? GRADIENT : ''}`;
+export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => {
+  const cellWrapperClasses = `box-border flex flex-col`;
 
-  const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${
-    isFillGradient && isFirstRow ? 'border-t' : ''
-  } ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
+  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
 
   return (
     <div className={cellWrapperClasses} role="cell">
-      <div className={cellClasses}>
-        {cell.map((item, i) => renderCellInner(item, i, isFillGradient))}
-      </div>
+      <div className={cellClasses}>{cell.map(renderCellInner(isFillGradient, rowHeader))}</div>
     </div>
   );
 });
 
-const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
-  <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
-    {label && (
-      <h5 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h5>
-    )}
-    {description && (
-      <div
-        className={`text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`}
-      >
-        {description}
+const renderCellInner =
+  (isFillGradient: boolean, rowHeader?: string) =>
+  ({ label, description }: CellData, i: number) =>
+    (
+      <div key={String(i)} className="flex justify-between text-m-sm py-3.5">
+        <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
+          {rowHeader}
+        </div>
+        <div className="basis-1/2">
+          {label && (
+            <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
+          )}
+          {description && (
+            <div
+              className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
+            >
+              {description}
+            </div>
+          )}
+        </div>
       </div>
-    )}
-  </div>
-);
+    );

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

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { GRADIENT } from './constants';
+import { HeaderCell } from './HeaderCell';
+import { TableCell } from './TableCell';
+
+export interface TableColumnProps extends UniBlockProps {
+  header: any;
+  columnData: any;
+  visibleRowLength: number;
+  isFillGradient: boolean;
+  showRow: boolean;
+  onToggleColumn: () => void;
+}
+
+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 buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
+    return (
+      <div className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}>
+        <HeaderCell {...header} isFillGradient={isFillGradient} />
+        {columnDataView?.length
+          ? columnDataView.map(({ rowHeader, cell }, i) => (
+              <TableCell
+                key={String(i)}
+                cell={cell}
+                rowHeader={rowHeader}
+                isFillGradient={isFillGradient}
+              />
+            ))
+          : null}
+
+        {showRow && renderButton({ header, buttonVersion })}
+        {renderToggleButton({ onToggleColumn, isFillGradient, showRow })}
+      </div>
+    );
+  },
+);
+
+const renderButton = ({ header, buttonVersion }) => (
+  <Button
+    href={header.link.href}
+    target={header.link.target}
+    version={buttonVersion}
+    className="font-medium text-m-sm mt-4 py-[11px]"
+  >
+    {header.link.text}
+  </Button>
+);
+
+const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
+  <div className="mt-5">
+    <a
+      onClick={onToggleColumn}
+      className={`font-medium text-m-sm cursor-pointer ${
+        isFillGradient ? 'text-white/80' : 'text-primary-main'
+      }`}
+    >
+      {!showRow ? 'Показать описание' : 'Скрыть'}
+    </a>
+  </div>
+);

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,63 +1,47 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
-import { UniBlockProps } from '../../types';
-import { Button } from '../../ui-kit/Button/Button';
+import type { UniBlockProps } from '../../types';
 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 { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS, MONTHS_IN_YEAR } from './constants';
+import type { CreditCalculatorContent } from './CreditCalculatorContent';
 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';
 
 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 }) => {
+  ({ 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 defaultSum = getDefaultSum(calculatorParams);
+    const defaultMonths = getDefaultMonths(calculatorParams);
 
-    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({
+    const monthlyPayment = getMonthlyPayment({
       calculatorParams,
       paymentType: DEFAULT_PAYMENT_TYPE,
       rate,
@@ -72,32 +56,18 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
     }
 
     return (
-      <section className={`font-sans text-primary-text p-10 bg-white ${className || ''}`}>
+      <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="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}
-              />
+              {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>
@@ -113,42 +83,11 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
                 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>
+            {renderProposal(monthlyPayment, rate)}
           </div>
+          {renderTermsButton()}
         </div>
       </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/getCalculatorParams.ts

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

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

@@ -1,4 +1,4 @@
-import { CalculatorParams } from './CreditCalculatorContent';
+import type { CalculatorParams } from './CreditCalculatorContent';
 
 const DEFAULT_RATE = 5;
 

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

@@ -0,0 +1,7 @@
+import { DEFAULT_MONTHS } from './constants';
+import type { CalculatorParams } from './CreditCalculatorContent';
+
+export const getDefaultMonths = (calculatorParams: CalculatorParams) =>
+  calculatorParams.maxMonths && calculatorParams.minMonths
+    ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
+    : DEFAULT_MONTHS;

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

@@ -0,0 +1,7 @@
+import { DEFAULT_SUM } from './constants';
+import type { CalculatorParams } from './CreditCalculatorContent';
+
+export const getDefaultSum = (calculatorParams: CalculatorParams) =>
+  calculatorParams.maxSum && calculatorParams.minSum
+    ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
+    : DEFAULT_SUM;