@redneckz/wildless-cms-uni-blocks 0.3.57 → 0.3.59

package/mobile/src/components/Calculator/BonusCalculatorForm.tsx

@@ -0,0 +1,71 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { getDefaultSum } from './getDefaultSum';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderRate } from './renderRate';
+import { renderButtonSection } from './renderButtonSection';
+import { BonusCalculatorParams, CommonCalculatorProps } from './CalculatorContent';
+
+export interface BonusCalculatorProp
+  extends BonusCalculatorParams,
+    CommonCalculatorProps,
+    UniBlockProps {}
+
+export const BonusCalculatorForm = JSX<BonusCalculatorProp>(
+  ({
+    context,
+    className = '',
+    buttons,
+    bonus,
+    minSumTrip,
+    maxSumTrip,
+    minSumOther,
+    maxSumOther,
+  }) => {
+    const [bonusTripValue, setBonusTripValue] = context.useState<number | undefined>(undefined);
+    const [bonusOtherValue, setBonusOtherValue] = context.useState<number | undefined>(undefined);
+    const calculatorTripParams = { minSum: minSumTrip, maxSum: maxSumTrip };
+    const calculatorOtherParams = { minSum: minSumOther, maxSum: maxSumOther };
+
+    const incomeBonus = 948841;
+    const bonusOrDef = bonus || 2528;
+
+    return (
+      <section className={className}>
+        <div className="w-[468px]">
+          {renderWantedSumInput({
+            title: 'Сумма покупок в категории путешествия, ₽',
+            calculatorParams: calculatorTripParams,
+            moneyValue: bonusTripValue,
+            defaultSum: getDefaultSum(calculatorTripParams),
+            setMoneyValue: setBonusTripValue,
+            isShowItems: false,
+          })}
+          {renderWantedSumInput({
+            className: 'mt-6',
+            title: 'Сумма покупок в остальных категориях, ₽',
+            calculatorParams: calculatorOtherParams,
+            moneyValue: bonusOtherValue,
+            defaultSum: getDefaultSum(calculatorOtherParams),
+            setMoneyValue: setBonusOtherValue,
+            isShowItems: false,
+          })}
+        </div>
+        <div>
+          {bonusOrDef
+            ? renderRate({
+                rate: bonusOrDef,
+                title: 'Баллов за месяц',
+                className: 'tracking-[-14px]',
+              })
+            : null}
+        </div>
+        <div className="w-[240px]">
+          {incomeBonus ? <CalculatorValueBlock title="Баллов за год" value={incomeBonus} /> : null}
+          {renderButtonSection(context, buttons)}
+        </div>
+      </section>
+    );
+  },
+);

package/mobile/src/components/Calculator/Calculator.tsx

@@ -0,0 +1,141 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { CalculatorContent, CalculatorBlockDef } from './CalculatorContent';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Img } from '../../ui-kit/Img/Img';
+import { renderCalculatorList } from './renderCalculatorList';
+import { CalculatorNav } from './CalculatorContent';
+
+export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
+
+type TabsProps = {
+  tabsShift: number;
+  tabsNav: CalculatorNav[];
+  activeSlideIndex: number;
+  setActiveSlideIndex: (i: number) => void;
+};
+
+type NavButtonProps = {
+  tab: CalculatorNav;
+  i: number;
+  activeSlideIndex: number;
+  onClick: (ev: MouseEvent) => void;
+};
+
+const arrowBtnStyle =
+  'absolute w-[56px] h-[56px] min-h-[56px] max-h-[56px] top-1 z-10 mt-[25px] bg-white rounded-full';
+
+export const Calculator = JSX<CalculatorProps>(
+  ({ className = '', context, calcTabs = [], anchor = null }) => {
+    const tabsNav = calcTabs.map((_) => _.nav || ({} as CalculatorNav));
+    const blockCalcTabs = calcTabs.map(
+      ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
+    );
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+    const [tabsShift, setTabsShift] = context.useState(0);
+
+    const handleNextClick = () => setTabsShift(tabsShift + 1);
+    const handlePrevClick = () => setTabsShift(tabsShift - 1);
+
+    const isGalleryScrollAvailable = calcTabs?.length > 3;
+    const showNextButton = isGalleryScrollAvailable && calcTabs?.length > tabsShift + 3;
+    const showPrevButton = tabsShift > 0;
+
+    return (
+      <section
+        id={anchor}
+        className={`box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`}
+      >
+        <div>
+          {tabsNav.length > 1
+            ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
+            : null}
+          {showPrevButton ? (
+            <ArrowButton
+              className={`${arrowBtnStyle} left-3 top-3`}
+              onClick={handlePrevClick}
+              ariaLabel="Пролистать влево"
+              data-block-control="scroll-left"
+            />
+          ) : null}
+          {showNextButton ? (
+            <ArrowButton
+              className={`${arrowBtnStyle} right-3 top-3 rotate-180`}
+              onClick={handleNextClick}
+              ariaLabel="Пролистать вправо"
+              data-block-control="scroll-right"
+            />
+          ) : null}
+        </div>
+        <div
+          className="flex"
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {renderCalculatorList({
+            context,
+            className,
+            blockCalcTabs,
+          })}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
+    : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
+  const btnTitleClassName = isActiveBtn ? 'text-md-new mb-1.5' : `text-base mb-[3px]`;
+  const btnDescClassName = isActiveBtn ? 'text-base text-white' : `text-m-md`;
+  const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      aria-label={tab?.title}
+      className={`box-border font-sans relative border-[1px] border-main-stroke cursor-pointer text-left border-b-0 flex
+      ${btnClassName}`}
+    >
+      <Img
+        className={`h-[24px] w-[24px] min-w-[24px] min-h-[24px] mr-4 ${iconClassName}`}
+        image={{ ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }}
+        width="24"
+        height="24"
+        asSVG
+      />
+      <div className="border-0">
+        <div className={`font-medium ${btnTitleClassName}`}>{tab?.title}</div>
+        <div className={`text-secondary-text ${btnDescClassName}`}>{tab.description}</div>
+      </div>
+    </button>
+  );
+}
+
+function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }: TabsProps) {
+  return (
+    <div>
+      <div
+        style={{ transform: `translateX(-${tabsShift * 388}px)` }}
+        className="flex flex-col justify-end items-center h-[126px] pt-[38px] box-border duration-1000"
+      >
+        <div className="w-full flex flex-nowrap items-end gap-2">
+          {tabsNav.map((tab, i) =>
+            renderNavButton({
+              tab,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+            }),
+          )}
+        </div>
+      </div>
+      <div className="w-full h-2 bg-primary-main" />
+    </div>
+  );
+}

package/mobile/src/components/Calculator/CalculatorContent.ts

@@ -0,0 +1,134 @@
+import { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+export interface CommonCalculatorProps {
+  buttons?: ButtonWithIconProps[];
+}
+
+export interface CreditCalculatorParams {
+  isSalary?: boolean;
+  isInsurance?: boolean;
+  isAnnuity?: boolean;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+export interface MortgageCalculatorParams {
+  isAnnuity?: boolean;
+  minInitialContribution?: number;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+export interface DepositCalculatorParams {
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rate?: number;
+}
+
+export interface BonusCalculatorParams {
+  bonus?: number;
+  minSumTrip?: number;
+  maxSumTrip?: number;
+  minSumOther?: number;
+  maxSumOther?: number;
+}
+
+export interface CalculatorParams {
+  isAnnuity?: boolean;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "CreditCalculatorForm"}
+ */
+export type CreditCalculatorParamsDef = CreditCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'CreditCalculatorForm';
+  };
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "MortgageCalculatorForm"}
+ */
+export type MortgageCalculatorParamsDef = MortgageCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'MortgageCalculatorForm';
+  };
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "DepositCalculatorForm"}
+ */
+export type DepositCalculatorParamsDef = DepositCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'DepositCalculatorForm';
+  };
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "BonusCalculatorForm"}
+ */
+export type BonusCalculatorParamsDef = BonusCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'BonusCalculatorForm';
+  };
+
+/**
+ * @title Выберите калькулятор
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Калькулятор
+ */
+export type CalculatorBlockDef =
+  | EmptyOption
+  | CreditCalculatorParamsDef
+  | MortgageCalculatorParamsDef
+  | DepositCalculatorParamsDef
+  | BonusCalculatorParamsDef;
+
+/**
+ * @title Кнопка навигации
+ */
+export interface CalculatorNav {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  icon?: Picture;
+}
+
+/**
+ * @title Вкладка
+ */
+export interface CalculatorTab {
+  nav?: CalculatorNav;
+  /** @title Настройки калькулятора */
+  calculatorBlock?: CalculatorBlockDef;
+}
+
+/**
+ * @title Калькулятор
+ */
+export interface CalculatorContent {
+  /** @title Вкладки */
+  calcTabs?: CalculatorTab[];
+}

package/mobile/src/components/Calculator/CalculatorValueBlock.tsx

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+
+export interface CalculatorValueBlockProps {
+  title?: string;
+  value?: number;
+  postfix?: string;
+  prefix?: string;
+  className?: string;
+}
+
+export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
+  ({ title, value, postfix = '', prefix, className = '' }) => {
+    return (
+      <div className={`mb-5 ${className}`}>
+        {title ? <div className="text-base font-light">{title}</div> : null}
+        {value ? (
+          <div className="text-title font-normal">
+            {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,99 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
+import type { UniBlockProps } from '../../types';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS } from './constants';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { getCreditRate } from './getCreditRate';
+import { getCalculatorParams } from './getCalculatorParams';
+import { getDefaultSum } from './getDefaultSum';
+import { getDefaultMonths } from './getDefaultMonths';
+import { getMonthlyPayment } from './getMonthlyPayment';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderButtonSection } from './renderButtonSection';
+import { renderRate } from './renderRate';
+import { CommonCalculatorProps, CreditCalculatorParams } from './CalculatorContent';
+
+const DEFAULT_PAYMENT_TYPE = 'annuity';
+
+export interface CreditCalculatorProp
+  extends CreditCalculatorParams,
+    CommonCalculatorProps,
+    UniBlockProps {}
+
+export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
+  ({ context, className = '', buttons }) => {
+    const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
+    const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
+    const [isAnnuity, toggleIsAnnuity] = context.useState(false);
+    const [isBudgetary, toggleIsBudgetary] = context.useState(false);
+    const [isInsurance, toggleIsInsurance] = context.useState(false);
+    const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
+    const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuity });
+
+    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: isInsurance });
+
+    const monthlyPayment = getMonthlyPayment({
+      calculatorParams,
+      paymentType: DEFAULT_PAYMENT_TYPE,
+      rate,
+      sum: moneyValue || defaultSum,
+      months: monthsValue || defaultMonths,
+    });
+
+    const title = 'Сумма кредита, ₽';
+
+    return (
+      <section className={className}>
+        <div className="w-[468px]">
+          {renderWantedSumInput({ title, calculatorParams, moneyValue, defaultSum, setMoneyValue })}
+          {renderMonthsInput({
+            title: 'Сумма кредита, ₽',
+            minMonths,
+            maxMonths,
+            monthsValue,
+            defaultMonths,
+            setMonthsValue,
+          })}
+          <div className="pt-7">
+            <Checkbox
+              text="Получаю зарплату на счёт в Россельхозбанке"
+              checked={isAnnuity}
+              onChange={toggleIsAnnuity}
+            />
+            <Checkbox
+              className="mt-3"
+              text="Работаю в бюджетной организации"
+              checked={isBudgetary}
+              onChange={toggleIsBudgetary}
+            />
+            <Checkbox
+              className="mt-3"
+              text="Комплексная страховая защита"
+              checked={isInsurance}
+              onChange={toggleIsInsurance}
+            />
+          </div>
+        </div>
+        <div>
+          {rate
+            ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
+            : null}
+        </div>
+        <div className="w-[351px]">
+          {monthlyPayment ? (
+            <CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />
+          ) : null}
+          {renderButtonSection(context, buttons)}
+        </div>
+      </section>
+    );
+  },
+);

package/mobile/src/components/Calculator/DepositCalculatorForm.tsx

@@ -0,0 +1,69 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
+import type { UniBlockProps } from '../../types';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS } from './constants';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { getCalculatorParams } from './getCalculatorParams';
+import { getDefaultSum } from './getDefaultSum';
+import { getDefaultMonths } from './getDefaultMonths';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderButtonSection } from './renderButtonSection';
+import { renderRate } from './renderRate';
+import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
+
+export interface DepositCalculatorProp
+  extends DepositCalculatorParams,
+    CommonCalculatorProps,
+    UniBlockProps {}
+
+export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
+  ({ context, className = '', buttons, rate, minSum, maxSum, minMonths, maxMonths }) => {
+    const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
+    const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
+    const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
+    const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: false });
+
+    const defaultSum = getDefaultSum(calculatorParams);
+    const defaultMonths = getDefaultMonths(calculatorParams);
+
+    const income = 948841;
+    const finallySum = 1218841;
+
+    return (
+      <section className={className}>
+        <div className="w-[468px]">
+          {renderWantedSumInput({
+            title: 'Сумма вклада, ₽',
+            calculatorParams: { minSum, maxSum },
+            moneyValue,
+            defaultSum,
+            setMoneyValue,
+          })}
+          {renderMonthsInput({
+            title: 'Срок вклада, месяцев',
+            minMonths: minMonths || DEFAULT_MIN_MONTHS,
+            maxMonths: maxMonths || DEFAULT_MAX_MONTHS,
+            monthsValue,
+            defaultMonths,
+            setMonthsValue,
+          })}
+        </div>
+        <div>
+          {rate
+            ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
+            : null}
+        </div>
+        <div className="w-[351px]">
+          {income ? (
+            <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
+          ) : null}
+          {finallySum ? (
+            <CalculatorValueBlock title="Сумма в конце срока" value={finallySum} postfix="₽" />
+          ) : null}
+          {renderButtonSection(context, buttons)}
+        </div>
+      </section>
+    );
+  },
+);

package/mobile/src/components/Calculator/EmbeddableCalcBlocks.tsx

@@ -0,0 +1,17 @@
+import { CreditCalculatorForm, CreditCalculatorProp } from './CreditCalculatorForm';
+import { MortgageCalculatorForm, MortgageCalculatorProp } from './MortgageCalculatorForm';
+import { DepositCalculatorForm, DepositCalculatorProp } from './DepositCalculatorForm';
+import { BonusCalculatorForm, BonusCalculatorProp } from './BonusCalculatorForm';
+
+export type EmbeddableCalcProps =
+  | CreditCalculatorProp
+  | MortgageCalculatorProp
+  | DepositCalculatorProp
+  | BonusCalculatorProp;
+
+export const EmbeddableCalcBlocks = {
+  CreditCalculatorForm,
+  MortgageCalculatorForm,
+  DepositCalculatorForm,
+  BonusCalculatorForm,
+};

package/mobile/src/components/Calculator/MortgageCalculatorForm.tsx

@@ -0,0 +1,88 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
+import type { UniBlockProps } from '../../types';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS } from './constants';
+import { renderRealEstateValue } from './renderRealEstateValue';
+import { renderInitialFeeInput } from './renderInitialFeeInput';
+import { getCreditRate } from './getCreditRate';
+import { getCalculatorParams } from './getCalculatorParams';
+import { getDefaultSum } from './getDefaultSum';
+import { getDefaultMonths } from './getDefaultMonths';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderButtonSection } from './renderButtonSection';
+import { renderProposalMortgage } from './renderProposalMortgage';
+import { renderRate } from './renderRate';
+import { CommonCalculatorProps, MortgageCalculatorParams } from './CalculatorContent';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+
+export interface MortgageCalculatorProp
+  extends MortgageCalculatorParams,
+    CommonCalculatorProps,
+    UniBlockProps {}
+
+export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
+  ({ context, className = '', buttons }) => {
+    const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
+    const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
+    const [isInsurance, toggleIsInsurance] = context.useState(false);
+    const [isFullInsurance, toggleIsFullInsurance] = context.useState(false);
+
+    const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
+    const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isInsurance });
+
+    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: isInsurance });
+
+    const monthlyPayment = 777777; // TODO: hardcode
+    const proposalMortgageValue = { credit: 3892000, period: 15, taxRefund: 650000 }; // TODO: hardcode
+
+    return (
+      <section className={className}>
+        <div className="w-[468px]">
+          {renderRealEstateValue({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
+          {renderInitialFeeInput({
+            calculatorParams,
+            moneyValue,
+            defaultSum,
+            setMoneyValue,
+          })}
+          {renderMonthsInput({
+            title: 'Срок ипотеки, месяцев',
+            minMonths,
+            maxMonths,
+            monthsValue,
+            defaultMonths,
+            setMonthsValue,
+          })}
+          <div className="mt-7">
+            <Checkbox text="Страхование жизни" checked={isInsurance} onChange={toggleIsInsurance} />
+            <Checkbox
+              className="mt-4"
+              text="Страхование жизни, злоровья и временной утраты трудоспособности"
+              checked={isFullInsurance}
+              onChange={toggleIsFullInsurance}
+            />
+          </div>
+        </div>
+        <div>
+          <div>
+            {rate
+              ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
+              : null}
+          </div>
+          <CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />
+        </div>
+        <div>
+          <div className="w-[351px]">{renderProposalMortgage(proposalMortgageValue)}</div>
+          {renderButtonSection(context, buttons)}
+        </div>
+      </section>
+    );
+  },
+);

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

@@ -0,0 +1,8 @@
+export const DEFAULT_MIN_SUM = 30000;
+export const DEFAULT_MAX_SUM = 3000000;
+export const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
+export const DEFAULT_MIN_MONTHS = 1;
+export const DEFAULT_MAX_MONTHS = 84;
+export const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
+
+export const MONTHS_IN_YEAR = 12;

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

@@ -0,0 +1,16 @@
+import type { CalculatorParams } from './CalculatorContent';
+
+interface GetCalculatorParamsParams {
+  tableRows?: CalculatorParams[];
+  isAnnuity?: boolean;
+}
+
+export const getCalculatorParams = (params: GetCalculatorParamsParams) => {
+  const { tableRows, isAnnuity = false } = params;
+
+  if (!tableRows) return {};
+
+  const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
+
+  return calculatorParams || {};
+};