@redneckz/wildless-cms-uni-blocks 0.10.6 → 0.10.8

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
 import type { CommonCalculatorProps } from './CalculatorContent';
@@ -16,47 +16,43 @@ export interface BonusCalculatorProps extends CommonCalculatorProps {
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
   ({ className = '', sourceBookDir = '', buttons, footnote }) => {
-    const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
-    const handleTravelExpenseValue = useCallback((_: number) => setTravelExpenseValue(_), []);
-    const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
-    const handleRestExpenseValue = useCallback((_: number) => setRestExpenseValue(_), []);
-    const userInputParams = {
-      travelExpenseValue,
-      restExpenseValue,
-    };
+    const [userInputParams, { field }] = useForm({
+      travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
+      restExpenseValue: DEFAULT_REST_MIN_SUM,
+    });
+
     const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } =
       useBonusCalculatorParams(userInputParams, sourceBookDir);
 
     return (
       <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
-          {renderWantedSumInput(
-            'Сумма покупок в категории путешествия, ₽',
-            {
-              minSum: minSumTravel,
-              maxSum: maxSumTravel,
-              moneyValue: travelExpenseValue,
-              step: 500,
-              isShowItems: false,
-            },
-            handleTravelExpenseValue,
-          )}
-          {renderWantedSumInput(
-            'Сумма покупок в остальных категориях, ₽',
-            {
-              className: 'mt-7',
-              minSum: minSumOther,
-              maxSum: maxSumOther,
-              moneyValue: restExpenseValue,
-              step: 500,
-              isShowItems: false,
-            },
-            handleRestExpenseValue,
-          )}
+          {renderWantedSumInput({
+            title: 'Сумма покупок в категории путешествия, ₽',
+            min: minSumTravel,
+            max: maxSumTravel,
+            step: 500,
+            isShowItems: false,
+            ...field('travelExpenseValue'),
+          })}
+          {renderWantedSumInput({
+            title: 'Сумма покупок в остальных категориях, ₽',
+            className: 'mt-7',
+            min: minSumOther,
+            max: maxSumOther,
+            step: 500,
+            isShowItems: false,
+            ...field('restExpenseValue'),
+          })}
         </div>
         <div>
           {monthBonus >= 0 ? (
-            <Rate title="Баллов за месяц" rate={monthBonus} rateBlockClassName="tracking-[-14px]" />
+            <Rate
+              title="Баллов за месяц"
+              rate={monthBonus}
+              rateBlockClassName="tracking-[-14px]"
+              fractionDigits={0}
+            />
           ) : null}
         </div>
         <div className="w-full max-w-[350px]">

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import type { BusinessDepositCalculatorProps } from './CalculatorContent';
@@ -22,29 +22,14 @@ export interface BusinessDepositCalculatorProp extends BusinessDepositCalculator
 
 export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
   ({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
-    const [moneyValue, setMoneyValue] = useState(BUSINESS_DEFAULT_SUM);
-    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
-    const [daysValue, setDaysValue] = useState(BUSINESS_DEFAULT_DAYS);
-    const handleDaysValue = useCallback((_: number) => setDaysValue(_), []);
-    const [isReplenished, toggleIsReplenished] = useState(false);
-    const handleIsReplenished = useCallback((_: boolean) => toggleIsReplenished(_), []);
-    const [isPartialWithdrawal, toggleIsPartialWithdrawal] = useState(false);
-    const handleIsPartialWithdrawal = useCallback((_: boolean) => toggleIsPartialWithdrawal(_), []);
-    const [isSmallBusiness, toggleIsSmallBusiness] = useState(false);
-    const handleIsSmallBusiness = useCallback((_: boolean) => toggleIsSmallBusiness(_), []);
-    const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
-    const handleIsMonthlyInterestPayment = useCallback(
-      (_: boolean) => toggleIsMonthlyInterestPayment(_),
-      [],
-    );
-    const userInputParams = {
-      moneyValue,
-      daysValue,
-      isReplenished,
-      isPartialWithdrawal,
-      isSmallBusiness,
-      isMonthlyInterestPayment,
-    };
+    const [userInputParams, { field }] = useForm({
+      moneyValue: BUSINESS_DEFAULT_SUM,
+      daysValue: BUSINESS_DEFAULT_DAYS,
+      isReplenished: false,
+      isPartialWithdrawal: false,
+      isSmallBusiness: false,
+      isMonthlyInterestPayment: false,
+    });
 
     const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
     const { income, finalSum, rate, depositeName, isShowUnknownRate } = calculatorParams;
@@ -53,20 +38,26 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
       <section className={className}>
         <div className="flex justify-between">
           <div className="w-[486px]">
-            {renderWantedSumInput('Сумма вклада, ₽', calculatorParams, handleMoneyValue)}
-            {renderDaysInput('Срок вклада, дни', calculatorParams, handleDaysValue)}
+            {renderWantedSumInput({
+              title: 'Сумма вклада, ₽',
+              min: calculatorParams.minSum,
+              max: calculatorParams.maxSum,
+              ...field('moneyValue'),
+              value: calculatorParams.moneyValue,
+            })}
+            {renderDaysInput({
+              title: 'Срок вклада, дни',
+              min: calculatorParams.minDays,
+              max: calculatorParams.maxDays,
+              ...field('daysValue'),
+              value: calculatorParams.daysValue,
+            })}
             <div className="mt-7 flex justify-between">
-              {renderBusinessDepositParamsForm({
-                ...calculatorParams,
-                handleIsReplenished,
-                handleIsPartialWithdrawal,
-                handleIsSmallBusiness,
-              })}
+              {renderBusinessDepositParamsForm(calculatorParams, field)}
               {renderInterestPayment({
-                isMonthlyInterestPayment,
-                callback: handleIsMonthlyInterestPayment,
                 title: 'Выплата процентов',
                 orientation: 'vertical',
+                ...field('isMonthlyInterestPayment'),
               })}
             </div>
           </div>
@@ -95,40 +86,29 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
   },
 );
 
-interface BusinessDepositParamsFormProps extends BusinessDepositCalculatorParams {
-  handleIsReplenished?: (value: boolean) => void;
-  handleIsPartialWithdrawal?: (value: boolean) => void;
-  handleIsSmallBusiness?: (value: boolean) => void;
-}
-
-const renderBusinessDepositParamsForm = ({
-  isDisabledOperatingDeposit,
-  isReplenished,
-  isPartialWithdrawal,
-  isSmallBusiness,
-  handleIsReplenished,
-  handleIsPartialWithdrawal,
-  handleIsSmallBusiness,
-}: BusinessDepositParamsFormProps) => (
+const renderBusinessDepositParamsForm = (
+  calculatorParams: BusinessDepositCalculatorParams,
+  field: FormFieldRegisterer<any>,
+) => (
   <div>
     <Checkbox
       text="Пополнение"
-      disabled={isDisabledOperatingDeposit}
-      value={isReplenished}
-      onChange={handleIsReplenished}
+      disabled={calculatorParams.isDisabledOperatingDeposit}
+      {...field('isReplenished')}
+      value={calculatorParams.isReplenished}
     />
     <Checkbox
       className="mt-3"
-      disabled={isDisabledOperatingDeposit}
+      disabled={calculatorParams.isDisabledOperatingDeposit}
       text="Частичное снятие"
-      value={isPartialWithdrawal}
-      onChange={handleIsPartialWithdrawal}
+      {...field('isPartialWithdrawal')}
+      value={calculatorParams.isPartialWithdrawal}
     />
     <Checkbox
       className="mt-3"
       text="Являюсь малым предприятием"
-      value={isSmallBusiness}
-      onChange={handleIsSmallBusiness}
+      {...field('isSmallBusiness')}
+      value={calculatorParams.isSmallBusiness}
     />
   </div>
 );

package/src/components/Calculator/Calculator.tsx

@@ -5,6 +5,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
 import type { CalculatorBlockDef, CalculatorContent, CalculatorNav } from './CalculatorContent';
 import { renderCalculatorBlock } from './renderCalculatorBlock';
 
@@ -40,7 +41,10 @@ export const Calculator = JSX<CalculatorProps>(
     });
 
     return (
-      <BlockWrapper className={`box-border overflow-hidden relative w-100 ${className}`} {...rest}>
+      <BlockWrapper
+        className={style('box-border overflow-hidden relative w-100', className)}
+        {...rest}
+      >
         <div className="bg-white">
           {tabsNav.length > 1
             ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
@@ -81,8 +85,10 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
       key={String(i)}
       onClick={onClick}
       aria-label={tab?.title}
-      className={`box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]
-      ${btnClassName}`}
+      className={style(
+        'box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]',
+        btnClassName,
+      )}
     >
       <Img
         className={`h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`}
@@ -94,8 +100,8 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
         height="24"
       />
       <div className="border-0">
-        <div className={`${btnTitleClassName}`}>{tab?.title}</div>
-        <div className={`${btnDescClassName}`}>{tab.description}</div>
+        <div className={btnTitleClassName}>{tab?.title}</div>
+        <div className={btnDescClassName}>{tab.description}</div>
       </div>
     </button>
   );

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,8 +1,8 @@
+/* eslint-disable max-lines, max-lines-per-function */
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { clamp } from '../../utils/clamp';
 import { style } from '../../utils/style';
 import type {
   CreditCalculatorParamsViewSettings,
@@ -22,72 +22,58 @@ export interface CreditCalculatorProp extends CreditCalculatorProps {
 }
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
-    const [isAnnuity, toggleIsAnnuity] = useState(false);
-    const [isSalaryClient, toggleIsSalaryClient] = useState(false);
-    const handleIsSalaryClient = useCallback((_: boolean) => toggleIsSalaryClient(_), []);
-    const [isStateEmployee, toggleIsStateEmployee] = useState(false);
-    const handleIsStateEmployee = useCallback((_: boolean) => toggleIsStateEmployee(_), []);
-    const [isPensionClient, toggleIsPensionClient] = useState(false);
-    const handleIsPensionClient = useCallback((_: boolean) => toggleIsPensionClient(_), []);
-    const [isInsurance, toggleIsInsurance] = useState(true);
-    const handleIsInsurance = useCallback((_: boolean) => toggleIsInsurance(_), []);
-    const [moneyValue, setMoneyValue] = useState(CREDIT_DEFAULT_SUM);
-    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
-    const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
-    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
-    const userInputParams = {
-      isAnnuity,
-      isInsurance,
-      isSalaryClient,
-      isPensionClient,
-      isStateEmployee,
-      moneyValue,
-      monthsValue,
-    };
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+    const [userInputParams, { field }] = useForm({
+      isAnnuity: false,
+      isInsurance: true,
+      isSalaryClient: false,
+      isPensionClient: false,
+      isStateEmployee: false,
+      moneyValue: CREDIT_DEFAULT_SUM,
+      monthsValue: DEFAULT_MONTHS,
+    });
+
     const calculatorParams = useCreditCalculatorParams(
       userInputParams,
       sourceBookDir,
       paramsViewSettings,
     );
 
-    useEffect(() => {
-      setMoneyValue(clamp(moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
-      setMonthsValue(clamp(monthsValue, calculatorParams.minMonths, calculatorParams.maxMonths));
-    }, [calculatorParams]);
-
     return (
       <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
-          {renderWantedSumInput(
-            'Сумма кредита, ₽',
-            { ...calculatorParams, step: 500 },
-            handleMoneyValue,
-          )}
-          {renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue)}
+          {renderWantedSumInput({
+            title: 'Сумма кредита, ₽',
+            step: 500,
+            min: calculatorParams.minSum,
+            max: calculatorParams.maxSum,
+            ...field('moneyValue'),
+            value: calculatorParams.moneyValue,
+          })}
+          {renderMonthsInput({
+            title: 'Срок кредита, месяцев',
+            min: calculatorParams.minMonths,
+            max: calculatorParams.maxMonths,
+            ...field('monthsValue'),
+            value: calculatorParams.monthsValue,
+          })}
           <div className="mt-7">
-            {renderCreditParamsForm({
-              ...calculatorParams,
-              ...paramsViewSettings,
-              handleIsSalaryClient,
-              handleIsStateEmployee,
-              handleIsPensionClient,
-              handleIsInsurance,
-            })}
+            {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           </div>
         </div>
-        {renderRate(calculatorParams.rate)}
+        <Rate
+          title="Ставка"
+          rate={calculatorParams.rate}
+          rateBlockClassName="tracking-[-25px]"
+          unit="%"
+        />
         <div className="w-full max-w-[350px]">
           <CalculatorValueBlock
             title={'Ежемесячный платеж'}
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
-          {renderPaymentType({
-            isAnnuity,
-            orientation: 'vertical',
-            callback: toggleIsAnnuity,
-          })}
+          {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
           {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
@@ -96,61 +82,40 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
   },
 );
 
-const renderRate = (rate: number) => (
-  <Rate title="Ставка" rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
-);
-
-interface CreditParamsFormProps extends CreditCalculatorParams, CreditCalculatorParamsViewSettings {
-  handleIsSalaryClient?: (value: boolean) => void;
-  handleIsStateEmployee?: (value: boolean) => void;
-  handleIsPensionClient?: (value: boolean) => void;
-  handleIsInsurance?: (value: boolean) => void;
-}
-
-const renderCreditParamsForm = ({
-  isSalaryClient,
-  isStateEmployee,
-  isPensionClient,
-  isInsurance,
-  isShowSalaryClient,
-  isShowStateEmployee,
-  isShowPensionClient,
-  isShowInsurance,
-  handleIsSalaryClient,
-  handleIsStateEmployee,
-  handleIsPensionClient,
-  handleIsInsurance,
-}: CreditParamsFormProps) => (
+const renderCreditParamsForm = (
+  params: CreditCalculatorParams & CreditCalculatorParamsViewSettings,
+  field: FormFieldRegisterer<any>,
+) => (
   <div>
-    {isShowSalaryClient ? (
+    {params.isShowSalaryClient ? (
       <Checkbox
         text="Получаю зарплату на счёт в Россельхозбанке"
-        value={isSalaryClient}
-        onChange={handleIsSalaryClient}
+        {...field('isSalaryClient')}
+        value={params.isSalaryClient}
       />
     ) : null}
-    {isShowStateEmployee ? (
+    {params.isShowStateEmployee ? (
       <Checkbox
         className="mt-3"
         text="Работаю в бюджетной организации"
-        value={isStateEmployee}
-        onChange={handleIsStateEmployee}
+        {...field('isStateEmployee')}
+        value={params.isStateEmployee}
       />
     ) : null}
-    {isShowPensionClient ? (
+    {params.isShowPensionClient ? (
       <Checkbox
         className="mt-3"
         text="Получаю пенсию на карту Россельхозбанка"
-        value={isPensionClient}
-        onChange={handleIsPensionClient}
+        {...field('isPensionClient')}
+        value={params.isPensionClient}
       />
     ) : null}
-    {isShowInsurance ? (
+    {params.isShowInsurance ? (
       <Checkbox
         className="mt-3"
         text="Комплексная страховая защита"
-        value={isInsurance}
-        onChange={handleIsInsurance}
+        {...field('isInsurance')}
+        value={params.isInsurance}
       />
     ) : null}
   </div>

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,7 +1,6 @@
-// TEMP
-
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
 import { DepositCalculatorParamsViewSettings, DepositCalculatorProps } from './CalculatorContent';
@@ -20,27 +19,13 @@ export interface DepositCalculatorProp extends DepositCalculatorProps {
 }
 
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
-  ({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
-    const [moneyValue, setMoneyValue] = useState(DEPOSIT_DEFAULT_SUM);
-    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
-    const [monthsValue, setMonthsValue] = useState(0);
-    const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
-    const handleIsMonthlyInterestPayment = useCallback(
-      (_: boolean) => toggleIsMonthlyInterestPayment(_),
-      [],
-    );
-    const [isRemoteRegistration, toggleIsRemoteRegistration] = useState(false);
-    const handleIsRemoteRegistration = useCallback(
-      (_: boolean) => toggleIsRemoteRegistration(_),
-      [],
-    );
-    const userInputParams = {
-      moneyValue,
-      monthsValue,
-      isMonthlyInterestPayment,
-      isRemoteRegistration,
-    };
-    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+    const [userInputParams, { field }] = useForm({
+      moneyValue: DEPOSIT_DEFAULT_SUM,
+      monthsValue: 0,
+      isMonthlyInterestPayment: false,
+      isRemoteRegistration: false,
+    });
 
     const calculatorParams = useDepositCalculatorParams(
       userInputParams,
@@ -48,34 +33,32 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       paramsViewSettings,
     );
     const { defaultMonth, income, finalSum, rate } = calculatorParams;
+
+    const { onChange: setMonthsValue } = field('monthsValue');
     useEffect(() => {
-      setMonthsValue(defaultMonth);
+      setMonthsValue && setMonthsValue(defaultMonth);
     }, [defaultMonth]);
 
     return (
       <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
-          {renderWantedSumInput(
-            'Сумма вклада, ₽',
-            {
-              ...calculatorParams,
-            },
-            handleMoneyValue,
-          )}
-          {renderMonthsInput(
-            'Срок вклада, месяцев',
-            {
-              ...calculatorParams,
-            },
-            handleMonthsValue,
-          )}
+          {renderWantedSumInput({
+            title: 'Сумма вклада, ₽',
+            min: calculatorParams.minSum,
+            max: calculatorParams.maxSum,
+            ...field('moneyValue'),
+            value: calculatorParams.moneyValue,
+          })}
+          {renderMonthsInput({
+            title: 'Срок вклада, месяцев',
+            min: calculatorParams.minMonths,
+            max: calculatorParams.maxMonths,
+            availableMonths: calculatorParams.availableMonths,
+            ...field('monthsValue'),
+            value: calculatorParams.monthsValue,
+          })}
           <div className="mt-7">
-            {renderDepositParamsForm({
-              ...calculatorParams,
-              ...paramsViewSettings,
-              handleIsMonthlyInterestPayment,
-              handleIsRemoteRegistration,
-            })}
+            {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           </div>
         </div>
         <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
@@ -90,34 +73,23 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
   },
 );
 
-interface DepositParamsFormProps
-  extends DepositCalculatorParams,
-    DepositCalculatorParamsViewSettings {
-  handleIsMonthlyInterestPayment?: (value: boolean) => void;
-  handleIsRemoteRegistration?: (value: boolean) => void;
-}
-
-const renderDepositParamsForm = ({
-  isMonthlyInterestPayment,
-  isRemoteRegistration,
-  isShowMonthlyInterestPayment,
-  isShowRemoteRegistration,
-  handleIsMonthlyInterestPayment,
-  handleIsRemoteRegistration,
-}: DepositParamsFormProps) => (
+const renderDepositParamsForm = (
+  params: DepositCalculatorParams & DepositCalculatorParamsViewSettings,
+  field: FormFieldRegisterer<any>,
+) => (
   <div className="flex flex-col gap-y-7">
-    {isShowMonthlyInterestPayment
+    {params.isShowMonthlyInterestPayment
       ? renderInterestPayment({
-          isMonthlyInterestPayment,
-          callback: handleIsMonthlyInterestPayment,
           title: 'Выплата процентов',
+          ...field('isMonthlyInterestPayment'),
+          value: params.isMonthlyInterestPayment,
         })
       : null}
-    {isShowRemoteRegistration
+    {params.isShowRemoteRegistration
       ? renderRegistrationType({
-          isRemoteRegistration,
-          callback: handleIsRemoteRegistration,
           title: 'Оформление',
+          ...field('isRemoteRegistration'),
+          value: params.isRemoteRegistration,
         })
       : null}
   </div>

package/src/components/Calculator/Rate.tsx

@@ -9,29 +9,29 @@ export interface RateProps {
   depositeName?: string;
   isShowDepositeName?: boolean;
   rateBlockClassName?: string;
+  fractionDigits?: number;
 }
 
 export const Rate = JSX<RateProps>(
-  ({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName }) => (
+  ({
+    rate,
+    title = 'Ставка',
+    unit,
+    depositeName,
+    isShowDepositeName,
+    rateBlockClassName,
+    fractionDigits = 2,
+  }) => (
     <div>
       <Text size="text-l-light" color="text-secondary-text">
         {title}
       </Text>
       <div className="relative">
-        <div className="flex justify-start">
-          <span
-            className={style(
-              'block gradient-color-text font-mohave text-title-huge pr-6 -mt-4',
-              rateBlockClassName,
-            )}
-          >
-            {String(rate.toFixed(2)).replace('.', ',')}
+        <div className="flex justify-start gradient-color-text">
+          <span className={style('font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName)}>
+            {String(rate.toFixed(fractionDigits)).replace('.', ',')}
           </span>
-          {unit ? (
-            <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span>
-          ) : (
-            ''
-          )}
+          {unit ? <span className="text-7xl">{unit}</span> : null}
         </div>
         {depositeName && isShowDepositeName ? (
           <div className="absolute bottom-7 w-full text-center whitespace-nowrap">