@redneckz/wildless-cms-uni-blocks 0.12.10 → 0.12.12

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
 import { renderBonusBenefits } from './renderBonusBenefits';
@@ -18,9 +17,9 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     title,
     ...rest
   }) => (
-    <BlockWrapper className={style('p-default', className)} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <Headline
-        className="mb-4 sm:mb-8"
+        className="mb-4 sm:mb-3xl"
         isPadding={false}
         title={title}
         description={subtitle}

package/src/components/BonusBenefitsBlock/renderBonusBenefits.mobile.tsx

@@ -1,4 +1,5 @@
-import { AlignType } from '../../model/AlignType';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { AlignType } from '../../model/AlignType';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import { BonusBenefit, ColumnsCount } from './BonusBenefitsBlockContent';
 import { renderBonusBenefit } from './renderBonusBenefit';

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -8,8 +8,8 @@ import { BusinessCard } from './BusinessCard';
 export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps {}
 
 export const BusinessBlock = JSX<BusinessBlockProps>(({ className, title, cards, ...rest }) => (
-  <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
-    <Heading headingType="h3" title={title} className="text-center mb-8" />
+  <BlockWrapper className={className} defaultPadding="p-6xl space-y-3xl" {...rest}>
+    <Heading headingType="h3" title={title} className="text-center" />
     <div className="flex gap-5">
       {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}
     </div>

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -9,16 +9,18 @@ export const BusinessCard = JSX<BusinessCardProps>((props) => {
   const { title, image, cardItems, button } = props;
 
   return (
-    <div className="border-gray border p-9 w-1/2">
+    <div className="border-gray border p-4xl w-1/2 space-y-lg">
       {image ? (
         <div className="flex justify-center">
-          {image?.src ? <Img className="mb-5" image={image} /> : null}
+          {image?.src ? <Img image={image} /> : null}
           {image?.icon ? <Img image={image} /> : null}
         </div>
       ) : null}
-      {title ? <Heading headingType="h4" title={title} className="mb-6" /> : null}
-      {cardItems?.length ? <ul>{cardItems.map((_, i) => renderItem(_, String(i)))}</ul> : null}
-      {renderButtonsSection([button], { buttonClassName: 'mt-6' })}
+      {title ? <Heading headingType="h4" title={title} /> : null}
+      {cardItems?.length ? (
+        <ul className="space-y-s">{cardItems.map((_, i) => renderItem(_, String(i)))}</ul>
+      ) : null}
+      {renderButtonsSection([button])}
     </div>
   );
 });
@@ -27,9 +29,9 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   const { icon, text } = item;
 
   return (
-    <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
+    <li key={key} className="flex items-center gap-s last:mb-0">
       {icon?.icon ? (
-        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-s rounded-icon bg-main-divider" />
       ) : null}
       {icon?.src ? <Img image={icon} /> : null}
       <Text size="text-xl" font="font-light">

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -26,7 +26,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
 
     return (
       <section className={style('flex justify-between', className)}>
-        <div className="w-[468px]">
+        <div className="w-2/5">
           {renderWantedSumInput({
             title: 'Сумма покупок в категории путешествия, ₽',
             min: minSumTravel,
@@ -55,7 +55,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
             />
           ) : null}
         </div>
-        <div className="w-full max-w-[350px]">
+        <div className="w-96">
           {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
           {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -37,7 +37,7 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
     return (
       <section className={className}>
         <div className="flex justify-between">
-          <div className="w-[486px]">
+          <div className="w-2/5">
             {renderWantedSumInput({
               title: 'Сумма вклада, ₽',
               min: calculatorParams.minSum,
@@ -73,7 +73,7 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
             />
           )}
 
-          <div className="w-full max-w-[350px]">
+          <div className="w-96">
             <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
             <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
             {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}

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

@@ -7,6 +7,7 @@ import type {
   BusinessDepositCalculatorParamsDef,
   CreditCalculatorParamsDef,
   DepositCalculatorParamsDef,
+  RefinancingCalculatorParamsDef,
 } from './CalculatorContent';
 
 const buttons: ButtonWithIconProps[] = [
@@ -60,6 +61,24 @@ const BUSINESS_DEPOSIT_CALCULATOR_BLOCK: BusinessDepositCalculatorParamsDef = {
   bottomFootnote,
 };
 
+const REFINANCING_CALCULATOR_BLOCK: RefinancingCalculatorParamsDef = {
+  calcType: 'RefinancingCalculatorForm',
+  paramsViewSettings: {
+    isShowSalaryClient: true,
+    isShowExtraMoney: true,
+    isShowInsurance: true,
+  },
+  buttons: [
+    {
+      href: 'https://rshb.ru',
+      text: 'Отправить заявку',
+      target: '_blank',
+      version: 'primary',
+    },
+  ],
+  footnote,
+};
+
 const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
   title: 'Обменивайте баллы на путешествия',
   calcType: 'BonusCalculatorForm',
@@ -95,6 +114,12 @@ export default {
             },
             calculatorBlock: BONUS_CALCULATOR_BLOCK,
           },
+          {
+            nav: {
+              title: 'Рефинансирование',
+            },
+            calculatorBlock: REFINANCING_CALCULATOR_BLOCK,
+          },
         ]}
       />
     </div>
@@ -133,4 +158,19 @@ export default {
       />
     </div>
   ),
+  refinancing: (
+    <div className="container grid grid-cols-12">
+      <Calculator
+        className="col-span-12"
+        calculatorTabs={[
+          {
+            nav: {
+              title: 'Рефинансирование',
+            },
+            calculatorBlock: REFINANCING_CALCULATOR_BLOCK,
+          },
+        ]}
+      />
+    </div>
+  ),
 };

package/src/components/Calculator/Calculator.tsx

@@ -70,9 +70,9 @@ export const Calculator = JSX<CalculatorProps>(
 
 function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
-    ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
-    : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
-  const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
+    ? 'h-20 w-96 p-xl border-none bg-primary-main text-white'
+    : `h-20 w-96 px-lg ease-in duration-300 bg-white text-primary-text`;
+  const btnTitleClassName = isActive ? 'text-xl mb-xs' : `text-l mb-2xs`;
   const btnDescClassName = isActive
     ? 'text-l font-light text-white'
     : `text-m font-light text-secondary-text`;
@@ -87,12 +87,12 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
       onClick={onClick}
       aria-label={tab?.title}
       className={style(
-        'box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]',
+        'box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-20 space-x-m',
         btnClassName,
       )}
     >
       <Img
-        className={`h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`}
+        className={style('h-6 w-6 min-w-6 min-h-6', iconClassName)}
         image={{
           ...tab?.icon,
           iconVersion: iconVersion ?? activeIconStyle,
@@ -115,9 +115,9 @@ function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }: TabsProp
     <div>
       <div
         style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
-        className="flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000"
+        className="flex flex-col justify-end items-center h-32 pt-4xl box-border duration-1000"
       >
-        <div className="w-full flex flex-nowrap items-end gap-2">
+        <div className="w-full flex flex-nowrap items-end gap-xs">
           {tabsNav.map((tab, i) =>
             renderNavButton({
               tab,

package/src/components/Calculator/CalculatorContent.ts

@@ -21,6 +21,15 @@ export interface CreditCalculatorParamsViewSettings {
   isShowInsurance?: boolean;
 }
 
+export interface RefinancingCalculatorParamsViewSettings {
+  /** @title Получаю зарплату на счёт в Россельхозбанке */
+  isShowSalaryClient?: boolean;
+  /** @title Комплексная страховая защита */
+  isShowInsurance?: boolean;
+  /** @title Получить дополнительную сумму */
+  isShowExtraMoney?: boolean;
+}
+
 export interface DepositCalculatorParamsViewSettings {
   /**
    * @title Выплата процентов
@@ -51,6 +60,11 @@ export interface BusinessDepositCalculatorProps extends CommonCalculatorProps {
   isShowDepositeName?: boolean;
 }
 
+export interface RefinancingCalculatorProps extends CommonCalculatorProps {
+  /** @title Настройка отображения чекбоксов */
+  paramsViewSettings?: RefinancingCalculatorParamsViewSettings;
+}
+
 /**
  * ? Общий интерфейс для всех типов калькуляторов?
  * ? Используется во вложенных функциях. Может быть как то разбить это и вынести отсюда?
@@ -102,6 +116,15 @@ export type BonusCalculatorParamsDef = TitleProps &
     calcType: 'BonusCalculatorForm';
   };
 
+/**
+ * @title Калькулятор рефинансирования
+ * @default {"calcType": "BonusCalculatorForm"}
+ */
+export type RefinancingCalculatorParamsDef = TitleProps &
+  RefinancingCalculatorProps & {
+    calcType: 'RefinancingCalculatorForm';
+  };
+
 /**
  * @title Настройки калькулятора
  */
@@ -110,7 +133,8 @@ export type CalculatorBlockDef =
   | CreditCalculatorParamsDef
   | DepositCalculatorParamsDef
   | BusinessDepositCalculatorParamsDef
-  | BonusCalculatorParamsDef;
+  | BonusCalculatorParamsDef
+  | RefinancingCalculatorParamsDef;
 
 /**
  * @title Кнопка навигации

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -41,7 +41,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
 
     return (
       <section className={style('flex justify-between', className)}>
-        <div className="w-[468px]">
+        <div className="w-2/5">
           {renderWantedSumInput({
             title: 'Сумма кредита, ₽',
             step: 500,
@@ -57,7 +57,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
           })}
-          <div className="mt-7">
+          <div className="mt-2xl">
             {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           </div>
         </div>
@@ -67,14 +67,14 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
           rateBlockClassName="tracking-[-25px]"
           unit="%"
         />
-        <div className="w-full max-w-[350px]">
+        <div className="w-96">
           <CalculatorValueBlock
             title={'Ежемесячный платеж'}
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
           {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
-          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+          {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -41,7 +41,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
 
     return (
       <section className={style('flex justify-between', className)}>
-        <div className="w-[468px]">
+        <div className="w-2/5">
           {renderWantedSumInput({
             title: 'Сумма вклада, ₽',
             min: calculatorParams.minSum,
@@ -57,15 +57,15 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
           })}
-          <div className="mt-7">
+          <div className="mt-2xl">
             {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           </div>
         </div>
         <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
-        <div className="w-full max-w-[350px]">
+        <div className="w-96">
           <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
           <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
-          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+          {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>
@@ -77,7 +77,7 @@ const renderDepositParamsForm = (
   params: DepositCalculatorParams & DepositCalculatorParamsViewSettings,
   field: FormFieldRegisterer<any>,
 ) => (
-  <div className="flex flex-col gap-y-7">
+  <div className="flex flex-col gap-y-2xl">
     {params.isShowMonthlyInterestPayment
       ? renderInterestPayment({
           title: 'Выплата процентов',

package/src/components/Calculator/EmbeddableCalcBlocks.tsx

@@ -5,16 +5,19 @@ import {
 } from './BusinessDepositCalculatorForm';
 import { CreditCalculatorForm, CreditCalculatorProp } from './CreditCalculatorForm';
 import { DepositCalculatorForm, DepositCalculatorProp } from './DepositCalculatorForm';
+import { RefinancingCalculatorForm, RefinancingCalculatorProp } from './RefinancingCalculatorForm';
 
 export type EmbeddableCalcProps =
   | CreditCalculatorProp
   | DepositCalculatorProp
   | BusinessDepositCalculatorProp
-  | BonusCalculatorProps;
+  | BonusCalculatorProps
+  | RefinancingCalculatorProp;
 
 export const EmbeddableCalcBlocks = {
   CreditCalculatorForm,
   DepositCalculatorForm,
   BusinessDepositCalculatorForm,
   BonusCalculatorForm,
+  RefinancingCalculatorForm,
 };

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable max-lines, max-lines-per-function */
+import { JSX } from '@redneckz/uni-jsx';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { style } from '../../utils/style';
+import type { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import {
+  DEFAULT_REFINANCING_MONTHS,
+  REFINANCING_DEFAULT_SUM,
+  REFINANCING_OLD_DEFAULT_SUM,
+} from './constants';
+import { Rate } from './Rate';
+import { renderFootnote } from './renderFootnote';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { RefinancingCalculatorProps } from './CalculatorContent';
+import {
+  RefinancingCalculatorParams,
+  useRefinancingCalculatorParams,
+} from './useRefinancingCalculatorParams';
+import { renderPaymentType } from './renderPaymentType';
+
+export interface RefinancingCalculatorProp extends RefinancingCalculatorProps {
+  className?: string;
+}
+
+export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+    const [userInputParams, { field }] = useForm({
+      isAnnuity: true,
+      isInsurance: true,
+      isSalaryClient: false,
+      isExtraMoney: false,
+      moneyValue: REFINANCING_DEFAULT_SUM,
+      oldMonthlyPayment: REFINANCING_OLD_DEFAULT_SUM,
+      monthsValue: DEFAULT_REFINANCING_MONTHS,
+      moneyExtra: REFINANCING_OLD_DEFAULT_SUM,
+    });
+
+    const calculatorParams = useRefinancingCalculatorParams(
+      userInputParams,
+      sourceBookDir,
+      paramsViewSettings,
+    );
+
+    return (
+      <section className={style('flex justify-between', className)}>
+        <div className="w-2/5">
+          {renderWantedSumInput({
+            title: 'Остаток долга в других банках, ₽ ',
+            step: 500,
+            min: calculatorParams.minSum,
+            max: calculatorParams.maxSum,
+            ...field('moneyValue'),
+            value: calculatorParams.moneyValue,
+          })}
+          {renderWantedSumInput({
+            title: 'Ежемесячный платеж в других банках, ₽',
+            isShowItems: false,
+            step: 500,
+            min: calculatorParams.minSumOld,
+            max: calculatorParams.maxSumOld,
+            ...field('oldMonthlyPayment'),
+            value: calculatorParams.oldMonthlyPayment,
+          })}
+          {renderMonthsInput({
+            title: 'Новый срок кредита, месяцев',
+            min: calculatorParams.minMonths,
+            max: calculatorParams.maxMonths,
+            ...field('monthsValue'),
+            value: calculatorParams.monthsValue,
+          })}
+          <div className={style('mt-7', calculatorParams.isExtraMoney ? 'mb-3' : '')}>
+            {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
+          </div>
+          {calculatorParams.isExtraMoney
+            ? renderWantedSumInput({
+                title: 'Дополнительная сумма, ₽ ',
+                step: 500,
+                min: calculatorParams.minSumExtra,
+                max: calculatorParams.maxSumExtra,
+                ...field('moneyExtra'),
+                value: calculatorParams.moneyExtra,
+              })
+            : null}
+        </div>
+        <Rate
+          title="Ставка"
+          rate={calculatorParams.rate}
+          fractionDigits={1}
+          rateBlockClassName="tracking-[-25px]"
+          unit="%"
+        />
+        <div className="w-96">
+          <CalculatorValueBlock
+            title={'Ежемесячный платеж'}
+            value={calculatorParams.monthlyPayment}
+            postfix="₽"
+          />
+          {calculatorParams.benefit > 0 ? (
+            <CalculatorValueBlock
+              title={'Выгода в месяц'}
+              value={calculatorParams.benefit}
+              postfix="₽"
+            />
+          ) : null}
+          {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
+          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+          {renderFootnote(footnote)}
+        </div>
+      </section>
+    );
+  },
+);
+
+const renderCreditParamsForm = (
+  params: RefinancingCalculatorParams & RefinancingCalculatorParamsViewSettings,
+  field: FormFieldRegisterer<any>,
+) => (
+  <div>
+    {params.isShowSalaryClient ? (
+      <Checkbox
+        text="Получаю зарплату на счёт в Россельхозбанке"
+        {...field('isSalaryClient')}
+        value={params.isSalaryClient}
+      />
+    ) : null}
+    {params.isShowInsurance ? (
+      <Checkbox
+        className="mt-3"
+        text="Комплексная страховая защита"
+        {...field('isInsurance')}
+        value={params.isInsurance}
+      />
+    ) : null}
+    {params.isShowExtraMoney ? (
+      <Checkbox
+        className="mt-3"
+        text="Получить дополнительную сумму"
+        {...field('isExtraMoney')}
+        value={params.isExtraMoney}
+      />
+    ) : null}
+  </div>
+);

package/src/components/Calculator/UnknownRate.tsx

@@ -12,10 +12,10 @@ export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) =>
     <Text size="text-l" font="font-light" color="text-secondary-text">
       {title}
     </Text>
-    <div className="mt-1 pt-1 pl-5 pb-1.5">
+    <div className="mt-2xs pt-2xs pl-lg pb-xs">
       <Icon name="PercentIcon" width="90" height="85" />
     </div>
-    <div className="w-[250px] mt-3.5">
+    <div className="w-64 mt-m">
       <Paragraph size="text-xl" font="font-light" color="text-primary-text">
         Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
       </Paragraph>

package/src/components/Calculator/checkRefinancingSourceBookRowCommonParams.ts

@@ -0,0 +1,45 @@
+import { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import {
+  CommonRefinancingParams,
+  RefinancingCalculatorUserInputParams,
+} from './useRefinancingCalculatorParams';
+
+interface CheckSourceBookRowProps {
+  row: CommonRefinancingParams;
+  userInputParams: RefinancingCalculatorUserInputParams;
+  paramsViewSettings?: RefinancingCalculatorParamsViewSettings;
+}
+
+interface CheckSourceBookRowFieldProps extends CheckSourceBookRowProps {
+  fieldKey: string;
+  viewSettingFieldKey: string;
+}
+
+export const checkRefinancingSourceBookRowCommonParams = (props: CheckSourceBookRowProps) =>
+  checkRowParam({
+    ...props,
+    fieldKey: 'isSalaryClient',
+    viewSettingFieldKey: 'isShowSalaryClient',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isInsurance',
+    viewSettingFieldKey: 'isShowInsurance',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isExtraMoney',
+    viewSettingFieldKey: 'isShowExtraMoney',
+  });
+
+const checkRowParam = ({
+  row,
+  userInputParams,
+  paramsViewSettings,
+  fieldKey,
+  viewSettingFieldKey,
+}: CheckSourceBookRowFieldProps) => {
+  const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
+
+  return isExclude || userInputParams[fieldKey] === row[fieldKey];
+};

package/src/components/Calculator/constants.ts

@@ -2,12 +2,22 @@ import { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
 import { BusinessDepositCalculatorSourceBookParams } from './useBusinessDepositCalculatorParams';
 import { CreditCalculatorSourceBookRateParams } from './useCreditCalculatorParams';
 import { DepositCalculatorSourceBookParams } from './useDepositCalculatorParams';
+import { RefinancingCalculatorSourceBookRateParams } from './useRefinancingCalculatorParams';
 
 export const DEFAULT_MIN_SUM = 10000;
 export const DEFAULT_MAX_SUM = 5000000;
 export const CREDIT_DEFAULT_SUM = 200000;
+export const REFINANCING_DEFAULT_SUM = 700000;
+export const REFINANCING_DEFAULT_MAX_SUM = 3000000;
+export const REFINANCING_OLD_MIN_SUM = 0;
+export const REFINANCING_OLD_DEFAULT_SUM = 0;
+export const REFINANCING_OLD_MAX_SUM = 2500000;
+export const REFINANCING_EXTRA_MIN_SUM = 0;
+export const REFINANCING_EXTRA_MAX_SUM = 500000;
 export const DEPOSIT_DEFAULT_SUM = 20000;
 export const DEFAULT_MIN_MONTHS = 13;
+export const DEFAULT_REFINANCING_MIN_MONTHS = 13;
+export const DEFAULT_REFINANCING_MONTHS = 48;
 export const DEFAULT_MAX_MONTHS = 60;
 export const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
 export const BUSINESS_DEFAULT_SUM = 100000;
@@ -33,6 +43,21 @@ export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookRatePar
   isInsurance: true,
 };
 
+export const DEFAULT_REFINANCING_CALCULATOR_PARAMS: RefinancingCalculatorSourceBookRateParams = {
+  minSum: DEFAULT_MIN_SUM,
+  maxSum: REFINANCING_DEFAULT_MAX_SUM,
+  minSumOld: REFINANCING_OLD_MIN_SUM,
+  maxSumOld: REFINANCING_OLD_MAX_SUM,
+  minSumExtra: REFINANCING_EXTRA_MIN_SUM,
+  maxSumExtra: REFINANCING_EXTRA_MAX_SUM,
+  minMonths: DEFAULT_REFINANCING_MIN_MONTHS,
+  maxMonths: DEFAULT_MAX_MONTHS,
+  rate: 7.5,
+  isExtraMoney: false,
+  isSalaryClient: false,
+  isInsurance: true,
+};
+
 export const DEFAULT_TRAVEL_MIN_SUM = 6000;
 export const DEFAULT_REST_MIN_SUM = 6000;
 
@@ -77,3 +102,4 @@ export const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
 export const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
 export const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
 export const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
+export const REFINANCING_CALC_DEFAULT_DIR = 'refinancing-calculator-data';

package/src/components/Calculator/getMonthlyPayment.ts

@@ -4,17 +4,27 @@
  */
 
 import { MONTHLY_INTEREST_RATE, MONTHS_IN_YEAR } from './constants';
-import type { CreditCalculatorUserInputParams } from './useCreditCalculatorParams';
 
-export const getMonthlyPayment = (rate: number, params: CreditCalculatorUserInputParams) => {
-  const { isAnnuity, moneyValue, monthsValue } = params;
+interface GetMonthlyPaymentParams {
+  isAnnuity: boolean;
+  moneyValue: number;
+  monthsValue: number;
+  moneyExtra?: number;
+}
+
+export const getMonthlyPayment = (rate: number, params: GetMonthlyPaymentParams) => {
+  const { isAnnuity, moneyValue, monthsValue, moneyExtra } = params;
 
   if (rate === 0) {
     return 0;
   } else if (isAnnuity) {
     const i = rate / MONTHLY_INTEREST_RATE; // Используется значение ставки в процентах
 
-    return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+    if (moneyExtra) {
+      return (moneyValue + moneyExtra) * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+    } else {
+      return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+    }
   } else {
     return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
   }