@redneckz/wildless-cms-uni-blocks 0.3.83 → 0.3.85

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,68 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
-import { getDefaultSum } from './getDefaultSum';
-import { renderWantedSumInput } from './renderWantedSumInput';
-import { renderRate } from './renderRate';
+import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
+import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
-import { BonusCalculatorParams, CommonCalculatorProps } from './CalculatorContent';
-
-export interface BonusCalculatorProp
-  extends BonusCalculatorParams,
-    CommonCalculatorProps,
-    UniBlockProps {}
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { getBonusCalculatorParams } from './useBonusCalculatorParams';
 
-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 };
+export interface BonusCalculatorProps extends CommonCalculatorProps, UniBlockProps {}
 
-    const incomeBonus = 948841;
-    const bonusOrDef = bonus || 2528;
+export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
+  ({ context, className = '', sourceBookDir, buttons }) => {
+    const [travelExpenseValue, setTravelExpenseValue] = context.useState(DEFAULT_TRAVEL_MIN_SUM);
+    const [restExpenseValue, setRestExpenseValue] = context.useState(DEFAULT_REST_MIN_SUM);
+    const userInputParams = {
+      travelExpenseValue,
+      restExpenseValue,
+    };
+    const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } =
+      getBonusCalculatorParams(context, userInputParams, sourceBookDir);
 
     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,
-          })}
+          {renderWantedSumInput(
+            'Сумма покупок в категории путешествия, ₽',
+            {
+              minSum: minSumTravel,
+              maxSum: maxSumTravel,
+              moneyValue: travelExpenseValue,
+              step: 500,
+              isShowItems: false,
+            },
+            setTravelExpenseValue,
+          )}
+          {renderWantedSumInput(
+            'Сумма покупок в остальных категориях, ₽',
+            {
+              className: 'mt-6',
+              minSum: minSumOther,
+              maxSum: maxSumOther,
+              moneyValue: restExpenseValue,
+              step: 500,
+              isShowItems: false,
+            },
+            setRestExpenseValue,
+          )}
         </div>
         <div>
-          {bonusOrDef
-            ? renderRate({
-                rate: bonusOrDef,
-                title: 'Баллов за месяц',
-                className: 'tracking-[-14px]',
-              })
-            : null}
+          {monthBonus >= 0 ? (
+            <Rate title="Баллов за месяц" rate={monthBonus} rateBlockClassName="tracking-[-14px]" />
+          ) : null}
         </div>
         <div className="w-[240px]">
-          {incomeBonus ? <CalculatorValueBlock title="Баллов за год" value={incomeBonus} /> : null}
+          {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
           {renderButtonSection(context, buttons)}
         </div>
       </section>

package/src/components/Calculator/Calculator.fixture.tsx

@@ -26,13 +26,6 @@ const buttons: ButtonWithIconProps[] = [
 
 const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
   calcType: 'CreditCalculatorForm',
-  isAnnuity: true,
-  minSum: 30000,
-  maxSum: 5000000,
-  minMonths: 1,
-  maxMonths: 84,
-  rateWithInsurance: 10.2,
-  rateWithoutInsurance: 10.7,
   buttons: buttons,
 };
 
@@ -60,11 +53,6 @@ const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
 
 const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
   calcType: 'BonusCalculatorForm',
-  bonus: 2528,
-  minSumTrip: 1,
-  maxSumTrip: 200000,
-  minSumOther: 1,
-  maxSumOther: 500000,
   buttons: buttons,
 };
 
@@ -74,7 +62,7 @@ export default {
       <Calculator
         className="col-span-12"
         context={context}
-        calcTabs={[
+        calculatorTabs={[
           {
             nav: {
               title: 'Кредит на любые цели',
@@ -115,7 +103,7 @@ export default {
       <Calculator
         className="col-span-12"
         context={context}
-        calcTabs={[
+        calculatorTabs={[
           {
             nav: {
               title: 'Кредит на любые цели',

package/src/components/Calculator/Calculator.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CalculatorBlockDef, CalculatorContent, CalculatorNav } from './CalculatorContent';
@@ -23,9 +23,9 @@ type NavButtonProps = {
 };
 
 export const Calculator = JSX<CalculatorProps>(
-  ({ className = '', context, calcTabs = [], ...rest }) => {
-    const tabsNav = calcTabs.map((_) => _.nav || ({} as CalculatorNav));
-    const blockCalcTabs = calcTabs.map(
+  ({ className = '', context, calculatorTabs = [], ...rest }) => {
+    const tabsNav = calculatorTabs.map((_) => _.nav || ({} as CalculatorNav));
+    const calculatorBlocks = calculatorTabs.map(
       ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
     );
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
@@ -34,8 +34,8 @@ export const Calculator = JSX<CalculatorProps>(
     const handleNextClick = () => setTabsShift(tabsShift + 1);
     const handlePrevClick = () => setTabsShift(tabsShift - 1);
 
-    const isGalleryScrollAvailable = calcTabs?.length > 3;
-    const showNextButton = isGalleryScrollAvailable && calcTabs?.length > tabsShift + 3;
+    const isGalleryScrollAvailable = calculatorTabs?.length > 3;
+    const showNextButton = isGalleryScrollAvailable && calculatorTabs?.length > tabsShift + 3;
     const showPrevButton = tabsShift > 0;
 
     return (
@@ -60,8 +60,8 @@ export const Calculator = JSX<CalculatorProps>(
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {blockCalcTabs?.length
-            ? blockCalcTabs.map(renderCalculatorBlock({ context, className }))
+          {calculatorBlocks?.length
+            ? calculatorBlocks.map(renderCalculatorBlock({ context, className }))
             : null}
         </div>
       </BlockWrapper>

package/src/components/Calculator/CalculatorContent.ts

@@ -5,6 +5,8 @@ import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 export interface CommonCalculatorProps {
   /** @title Кнопки */
   buttons?: ButtonWithIconProps[];
+  /** @title Адрес справочника */
+  sourceBookDir?: string;
 }
 
 /**
@@ -12,7 +14,9 @@ export interface CommonCalculatorProps {
  **/
 export interface CreditCalculatorParams {
   /** @hidden */
-  isSalary?: boolean;
+  isSalaryClient?: boolean;
+  /** @hidden */
+  isStateEmployee?: boolean;
   /** @hidden */
   isInsurance?: boolean;
   /** @hidden */
@@ -77,13 +81,19 @@ export interface BonusCalculatorParams {
   /** @hidden */
   bonus?: number;
   /** @hidden */
-  minSumTrip?: number;
+  minSumTravel?: number;
   /** @hidden */
-  maxSumTrip?: number;
+  maxSumTravel?: number;
   /** @hidden */
   minSumOther?: number;
   /** @hidden */
   maxSumOther?: number;
+  maxBonus?: number;
+  prefMonthsNum?: number;
+  prefTravelBonusRate?: number;
+  prefRestBonusRate?: number;
+  travelBonusRate?: number;
+  restBonusRate?: number;
 }
 
 /**
@@ -171,5 +181,5 @@ export interface CalculatorTab {
  */
 export interface CalculatorContent {
   /** @title Вкладки */
-  calcTabs?: CalculatorTab[];
+  calculatorTabs?: CalculatorTab[];
 }

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,78 +1,70 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
 import type { UniBlockProps } from '../../types';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { CommonCalculatorProps } from './CalculatorContent';
 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 { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
+import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
-import { renderRate } from './renderRate';
-import { CommonCalculatorProps, CreditCalculatorParams } from './CalculatorContent';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { getCreditCalculatorParams } from './useCreditCalculatorParams';
 
-const DEFAULT_PAYMENT_TYPE = 'annuity';
+export const ANNUITY = 'annuity';
+export const DIFFERENTIAL = 'differential';
 
-export interface CreditCalculatorProp
-  extends CreditCalculatorParams,
-    CommonCalculatorProps,
-    UniBlockProps {}
+const paymentTypeItems = [
+  {
+    id: ANNUITY,
+    text: 'Аннуитетный',
+  },
+  {
+    id: DIFFERENTIAL,
+    text: 'Дифференцированный',
+  },
+];
+
+export interface CreditCalculatorProp extends 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);
+  ({ context, className = '', sourceBookDir, buttons }) => {
     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 = 'Сумма кредита, ₽';
+    const [isInsurance, toggleIsInsurance] = context.useState(true);
+    const [isSalaryClient, toggleIsSalaryClient] = context.useState(false);
+    const [isStateEmployee, toggleIsStateEmployee] = context.useState(false);
+    const [moneyValue, setMoneyValue] = context.useState(DEFAULT_SUM);
+    const [monthsValue, setMonthsValue] = context.useState(DEFAULT_MONTHS);
+    const userInputParams = {
+      isAnnuity,
+      isInsurance,
+      isSalaryClient,
+      isStateEmployee,
+      moneyValue,
+      monthsValue,
+    };
+    const calculatorParams = getCreditCalculatorParams(context, userInputParams, sourceBookDir);
 
     return (
       <section className={className}>
         <div className="w-[468px]">
-          {renderWantedSumInput({ title, calculatorParams, moneyValue, defaultSum, setMoneyValue })}
-          {renderMonthsInput({
-            title: 'Сумма кредита, ₽',
-            minMonths,
-            maxMonths,
-            monthsValue,
-            defaultMonths,
-            setMonthsValue,
-          })}
+          {renderWantedSumInput(
+            'Сумма кредита, ₽',
+            { ...calculatorParams, step: 500 },
+            setMoneyValue,
+          )}
+          {renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue)}
           <div className="pt-7">
             <Checkbox
               text="Получаю зарплату на счёт в Россельхозбанке"
-              checked={isAnnuity}
-              onChange={toggleIsAnnuity}
+              checked={isSalaryClient}
+              onChange={toggleIsSalaryClient}
             />
             <Checkbox
               className="mt-3"
               text="Работаю в бюджетной организации"
-              checked={isBudgetary}
-              onChange={toggleIsBudgetary}
+              checked={isStateEmployee}
+              onChange={toggleIsStateEmployee}
             />
             <Checkbox
               className="mt-3"
@@ -82,15 +74,23 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             />
           </div>
         </div>
-        <div>
-          {rate
-            ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
-            : null}
-        </div>
+        <Rate
+          title="Ставка"
+          rate={calculatorParams.finalRate}
+          rateBlockClassName="tracking-[-25px]"
+          unit="%"
+        />
         <div className="w-[351px]">
-          {monthlyPayment ? (
-            <CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />
-          ) : null}
+          <CalculatorValueBlock
+            title={isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц'}
+            value={calculatorParams.monthlyPayment}
+            postfix="₽"
+          />
+          {renderPaymentTypeSelector(context, {
+            items: paymentTypeItems,
+            checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL,
+            onChange: (text: string) => toggleIsAnnuity(text === ANNUITY),
+          })}
           {renderButtonSection(context, buttons)}
         </div>
       </section>

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,16 +1,21 @@
+// TEMP
+
 import { JSX } from '@redneckz/uni-jsx';
-import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
 import type { UniBlockProps } from '../../types';
+import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 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 {
+  DEFAULT_MAX_MONTHS,
+  DEFAULT_MAX_SUM,
+  DEFAULT_MIN_MONTHS,
+  DEFAULT_MIN_SUM,
+  DEFAULT_MONTHS,
+  DEFAULT_SUM,
+} from './constants';
+import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
-import { renderRate } from './renderRate';
-import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface DepositCalculatorProp
   extends DepositCalculatorParams,
@@ -18,14 +23,9 @@ export interface DepositCalculatorProp
     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);
+  ({ context, className = '', buttons, rate }) => {
+    const [moneyValue, setMoneyValue] = context.useState<number>(DEFAULT_SUM);
+    const [monthsValue, setMonthsValue] = context.useState<number>(DEFAULT_MONTHS);
 
     const income = 948841;
     const finallySum = 1218841;
@@ -33,27 +33,26 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
     return (
       <section className={className}>
         <div className="w-[468px]">
-          {renderWantedSumInput({
-            title: 'Сумма вклада, ₽',
-            calculatorParams: { minSum, maxSum },
-            moneyValue,
-            defaultSum,
+          {renderWantedSumInput(
+            'Сумма вклада, ₽',
+            {
+              moneyValue,
+              minSum: DEFAULT_MIN_SUM,
+              maxSum: DEFAULT_MAX_SUM,
+            },
             setMoneyValue,
-          })}
-          {renderMonthsInput({
-            title: 'Срок вклада, месяцев',
-            minMonths: minMonths || DEFAULT_MIN_MONTHS,
-            maxMonths: maxMonths || DEFAULT_MAX_MONTHS,
-            monthsValue,
-            defaultMonths,
+          )}
+          {renderMonthsInput(
+            'Срок вклада, месяцев',
+            {
+              minMonths: DEFAULT_MIN_MONTHS,
+              maxMonths: DEFAULT_MAX_MONTHS,
+              monthsValue,
+            },
             setMonthsValue,
-          })}
-        </div>
-        <div>
-          {rate
-            ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
-            : null}
+          )}
         </div>
+        <Rate rate={rate || 1} rateBlockClassName="tracking-[-25px]" unit="%" />
         <div className="w-[351px]">
           {income ? (
             <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />

package/src/components/Calculator/EmbeddableCalcBlocks.tsx

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

package/src/components/Calculator/MortgageCalculatorForm.tsx

@@ -1,20 +1,17 @@
+// TEMP
 import { JSX } from '@redneckz/uni-jsx';
-import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
 import type { UniBlockProps } from '../../types';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { CommonCalculatorProps, MortgageCalculatorParams } from './CalculatorContent';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
 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 { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
+import { renderInitialFeeInput } from './renderInitialFeeInput';
+import { renderMonthsInput } from './renderMonthsInput';
 import { renderProposalMortgage } from './renderProposalMortgage';
-import { renderRate } from './renderRate';
-import { CommonCalculatorProps, MortgageCalculatorParams } from './CalculatorContent';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { renderRealEstateValue } from './renderRealEstateValue';
 
 export interface MortgageCalculatorProp
   extends MortgageCalculatorParams,
@@ -23,19 +20,15 @@ export interface MortgageCalculatorProp
 
 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 [moneyValue, setMoneyValue] = context.useState<number>(1000000);
+    const [monthsValue, setMonthsValue] = context.useState<number>(12);
     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 calculatorParams = {}; // getCalculatorParams(context, { 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 minMonths = /*calculatorParams?.minMonths ||*/ DEFAULT_MIN_MONTHS;
+    const maxMonths = /* calculatorParams?.maxMonths || */ DEFAULT_MAX_MONTHS;
 
     const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
 
@@ -45,21 +38,23 @@ export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
     return (
       <section className={className}>
         <div className="w-[468px]">
-          {renderRealEstateValue({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
-          {renderInitialFeeInput({
-            calculatorParams,
-            moneyValue,
-            defaultSum,
+          {renderRealEstateValue('Стоимость недвижимости, ₽', { moneyValue }, setMoneyValue)}
+          {renderInitialFeeInput(
+            'Первоначальный взнос, ₽',
+            {
+              moneyValue,
+            },
             setMoneyValue,
-          })}
-          {renderMonthsInput({
-            title: 'Срок ипотеки, месяцев',
-            minMonths,
-            maxMonths,
-            monthsValue,
-            defaultMonths,
+          )}
+          {renderMonthsInput(
+            'Срок ипотеки, месяцев',
+            {
+              minMonths,
+              maxMonths,
+              monthsValue,
+            },
             setMonthsValue,
-          })}
+          )}
           <div className="mt-7">
             <Checkbox text="Страхование жизни" checked={isInsurance} onChange={toggleIsInsurance} />
             <Checkbox
@@ -71,11 +66,8 @@ export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
           </div>
         </div>
         <div>
-          <div>
-            {rate
-              ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
-              : null}
-          </div>
+          <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
+
           <CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />
         </div>
         <div>

package/src/components/Calculator/Rate.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface RateProps {
+  rate: number;
+  title?: string;
+  unit?: string;
+  rateBlockClassName?: string;
+}
+
+export const Rate = JSX<RateProps>(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (
+  <div>
+    <div className="text-sm font-light ml-3">{title}</div>
+    <div className="flex justify-start">
+      <span
+        className={`block calc-rate-text font-mohave text-highlighted pr-6 -mt-4 ${rateBlockClassName}`}
+      >
+        {String(rate).replace('.', ',')}
+      </span>
+      {unit ? <span className="calc-rate-text text-[65px] leading-[75px]">{unit}</span> : ''}
+    </div>
+  </div>
+));