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

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 || {};
+};

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

@@ -0,0 +1,18 @@
+import type { CalculatorParams } from './CalculatorContent';
+
+const DEFAULT_RATE = 10.2;
+
+interface GetCreditRateParams {
+  calculatorParams?: CalculatorParams;
+  isInsurance: boolean;
+}
+
+export const getCreditRate = (params: GetCreditRateParams) => {
+  const { calculatorParams, isInsurance } = params;
+
+  if (!calculatorParams) return DEFAULT_RATE;
+
+  return isInsurance
+    ? calculatorParams?.rateWithInsurance || DEFAULT_RATE
+    : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE;
+};

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { clamp } from '../../utils/clamp';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM, MONTHS_IN_YEAR } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+type PaymentType = 'annuity' | 'differentiated';
+
+interface GetMonthlyPaymentParams {
+  calculatorParams?: CalculatorParams;
+  paymentType: PaymentType;
+  rate: number;
+  sum: number;
+  months: number;
+}
+
+export const getMonthlyPayment = (params: GetMonthlyPaymentParams) => {
+  const { calculatorParams, paymentType, rate, sum, months } = params;
+
+  if (!calculatorParams) return 0;
+
+  const finalSum = clamp(
+    sum,
+    calculatorParams.minSum || DEFAULT_MIN_SUM,
+    calculatorParams.maxSum || DEFAULT_MAX_SUM,
+  );
+
+  if (paymentType === 'annuity') {
+    const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
+    return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
+  } else {
+    return finalSum / months + finalSum * (Number(rate) / 12);
+  }
+};

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

@@ -0,0 +1,7 @@
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+
+export function renderButtonSection(context, buttons) {
+  return buttons?.length ? (
+    <ButtonSection context={context} buttons={buttons} className="flex flex-col mt-7 gap-2" />
+  ) : null;
+}

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

@@ -0,0 +1,43 @@
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { CalculatorBlockDef } from './CalculatorContent';
+import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
+
+type EmbeddableCalcBlocks = {
+  blockCalcTabs?: CalculatorBlockDef[];
+  context: ContentPageContext;
+  className?: string;
+};
+
+export const renderCalculatorList = ({
+  blockCalcTabs,
+  context,
+  className,
+}: EmbeddableCalcBlocks) => {
+  return blockCalcTabs?.length ? blockCalcTabs.map(renderBlock({ context, className })) : null;
+};
+
+const renderBlock =
+  ({ context, className }: any) =>
+  (blockCalcTabs: CalculatorBlockDef, i: number) => {
+    const type = blockCalcTabs?.calcType;
+    if (!type || !(type in EmbeddableCalcBlocks)) {
+      return null;
+    }
+    const EmbeddedBlock: JSXBlock<EmbeddableCalcProps> = EmbeddableCalcBlocks[type];
+    return (
+      <section
+        key={`${String(i)}`}
+        className={`box-border relative flex grow-0 shrink-0 basis-full ${className}`}
+        role="listitem"
+      >
+        <div className={`box-border p-9 w-full`}>
+          <EmbeddedBlock
+            context={context}
+            {...blockCalcTabs}
+            className="!p-0 flex justify-between"
+          />
+        </div>
+      </section>
+    );
+  };

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

@@ -0,0 +1,37 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+const STEP_MONEY = 1000;
+
+interface RenderWantedSumInputProps {
+  calculatorParams: CalculatorParams;
+  moneyValue: number | undefined;
+  defaultSum: number;
+  setMoneyValue: InputRangeProps['onChange'];
+}
+
+export function renderInitialFeeInput(props: RenderWantedSumInputProps) {
+  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
+
+  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+
+  return (
+    <InputRange
+      className="mt-6"
+      title="Первоначальный взнос, ₽ "
+      items={[
+        `От ${addSpacesBetweenNumbers(minSum)} рублей`,
+        `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
+      ]}
+      min={minSum}
+      max={maxSum}
+      step={STEP_MONEY}
+      value={moneyValue || defaultSum}
+      onChange={setMoneyValue}
+    />
+  );
+}

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

@@ -0,0 +1,34 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+
+const STEP_MONTHS = 1;
+
+interface RenderMonthsInputProps {
+  title: string;
+  minMonths: number;
+  maxMonths: number;
+  monthsValue: number | undefined;
+  defaultMonths: number;
+  setMonthsValue: InputRangeProps['onChange'];
+}
+
+export function renderMonthsInput(props: RenderMonthsInputProps) {
+  const { title, minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
+  const monthText = (month) => {
+    const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
+    return `${month} ${text}`;
+  };
+
+  return (
+    <InputRange
+      className="mt-6"
+      title={title}
+      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
+      min={minMonths}
+      max={maxMonths}
+      step={STEP_MONTHS}
+      value={monthsValue || defaultMonths}
+      onChange={setMonthsValue}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { Button } from '../../ui-kit/Button/Button';
+
+export function renderProposal(monthlyPayment: number) {
+  return (
+    <div className="box-border ">
+      <div className="text-base font-light">Ежемесячный платёж</div>
+      <div className="text-title mb-3 font-normal">
+        {addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽
+      </div>
+      <Button className="mt-[50px] w-full" text="Отправить заявку" version="primary" href="#" />
+    </div>
+  );
+}