@redneckz/wildless-cms-uni-blocks 0.14.293 → 0.14.294

package/mobile/src/components/CalculatorBonus/CalculatorBonus.tsx

@@ -0,0 +1,75 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { useForm } from '../../hooks/useForm';
+import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { type CalculatorBonusContent } from './CalculatorBonusContent';
+import { getBonusCalculatorParams, type BonusCalculatorData } from './getBonusCalculatorParams';
+
+const DEFAULT_TRAVEL_MIN_SUM = 6000;
+const DEFAULT_REST_MIN_SUM = 6000;
+
+export interface CalculatorBonusProps extends CalculatorBonusContent, UniBlockProps {
+  className?: string;
+  calcSource?: BonusCalculatorData & JSONRefObject;
+}
+export const CalculatorBonus = UniBlock<CalculatorBonusProps>(
+  ({ className = '', title, calcSource, buttons, footnote, ...rest }) => {
+    const [userInputParams, { field }] = useForm({
+      travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
+      restExpenseValue: DEFAULT_REST_MIN_SUM,
+    });
+
+    const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } =
+      getBonusCalculatorParams(userInputParams, calcSource);
+
+    return (
+      <CalculatorLayout className={className} title={title} {...rest}>
+        <section
+          className={style('flex flex-col justify-between @4xl:flex-row gap-y-4xl', className)}
+        >
+          <div className="flex flex-col @xl:max-w-md gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0">
+            {renderWantedSumInput({
+              title: 'Сумма покупок в категории путешествия, ₽',
+              min: minSumTravel,
+              max: maxSumTravel,
+              step: 500,
+              isShowItems: false,
+              ...field('travelExpenseValue'),
+            })}
+            {renderWantedSumInput({
+              title: 'Сумма покупок в остальных категориях, ₽',
+              min: minSumOther,
+              max: maxSumOther,
+              step: 500,
+              isShowItems: false,
+              ...field('restExpenseValue'),
+            })}
+          </div>
+          {monthBonus >= 0
+            ? renderRate({
+                title: 'Баллов за месяц',
+                rate: monthBonus,
+                fractionDigits: 0,
+                isUnknownRateShown: false,
+                unit: '',
+              })
+            : null}
+          <div className="flex flex-col gap-y-xl @xl:w-96">
+            {yearBonus >= 0 ? (
+              <CalculatorValueBlock title="Баллов за год" value={yearBonus} />
+            ) : null}
+            {renderButtonsSection(buttons, { isVertical: true })}
+            {renderFootnote(footnote)}
+          </div>
+        </section>
+      </CalculatorLayout>
+    );
+  },
+);

package/mobile/src/components/CalculatorBonus/CalculatorBonus.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/CalculatorBonus/CalculatorBonusContent.ts

@@ -0,0 +1,16 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { type Footnote } from '../../model/Footnote';
+import { type TitleProps } from '../../model/HeadlineType';
+import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/**
+ * @title Блок кнопок
+ */
+export type CalculatorBonusContent = UniBlockContent &
+  TitleProps &
+  Footnote &
+  ButtonsSectionContent & {
+    /** @title Данные калькулятора */
+    calcSource?: JSONRefObject;
+  };

package/mobile/src/components/{Calculator → CalculatorBonus}/getBonus.ts

@@ -1,6 +1,20 @@
-import { DEFAULT_BONUS_CALCULATOR_PARAMS, MONTHS_IN_YEAR } from './constants';
 import { type BonusCalculatorData } from './getBonusCalculatorParams';
 
+const DEFAULT_BONUS_CALCULATOR_PARAMS: Required<BonusCalculatorData> = {
+  minSumTravel: 6000,
+  maxSumTravel: 200000,
+  minSumOther: 6000,
+  maxSumOther: 200000,
+  maxBonus: 5000,
+  prefMonthsNum: 2,
+  prefTravelBonusRate: 0.015,
+  prefRestBonusRate: 0.01,
+  travelBonusRate: 0.015,
+  restBonusRate: 0.01,
+};
+
+const MONTHS_IN_YEAR = 12;
+
 export const getBonus = (
   params: BonusCalculatorData,
   bonusTravelValue: number,

package/mobile/src/components/{Calculator → CalculatorBonus}/getBonusCalculatorParams.ts

@@ -1,4 +1,3 @@
-import { DEFAULT_BONUS_CALCULATOR_PARAMS } from './constants';
 import { getBonus } from './getBonus';
 
 export interface BonusCalculatorUserInputParams {
@@ -6,6 +5,19 @@ export interface BonusCalculatorUserInputParams {
   restExpenseValue: number;
 }
 
+const DEFAULT_BONUS_CALCULATOR_PARAMS: Required<BonusCalculatorData> = {
+  minSumTravel: 6000,
+  maxSumTravel: 200000,
+  minSumOther: 6000,
+  maxSumOther: 200000,
+  maxBonus: 5000,
+  prefMonthsNum: 2,
+  prefTravelBonusRate: 0.015,
+  prefRestBonusRate: 0.01,
+  travelBonusRate: 0.015,
+  restBonusRate: 0.01,
+};
+
 export interface BonusCalculatorData {
   minSumTravel?: number;
   maxSumTravel?: number;

package/mobile/src/ui-kit/Calculator/CalculatorLayout.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type TitleProps } from '../../model/HeadlineType';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { BlockWrapper } from '../BlockWrapper';
+import { Heading } from '../Heading/Heading';
+
+export interface CalculatorLayoutProps extends UniBlockProps, TitleProps {}
+
+export const CalculatorLayout = JSX<CalculatorLayoutProps>(
+  ({ className, title, children, ...rest }) => (
+    <BlockWrapper className={style('space-y-xl', className)} defaultPadding="p-4xl" {...rest}>
+      {title ? <Heading className="text-center" title={title} /> : null}
+      {children}
+    </BlockWrapper>
+  ),
+);

package/mobile/src/{components → ui-kit}/Calculator/CalculatorValueBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../Text/Text';
 
 const calculatorValueBlockStyle = 'flex justify-between @xl:flex-col';
 

package/mobile/src/{components → ui-kit}/Calculator/Rate.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Text } from '../../ui-kit/Text/Text';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../Text/Text';
 
 export interface RateProps {
   rate: number | undefined;

package/mobile/src/{components → ui-kit}/Calculator/renderFootnote.tsx

@@ -1,4 +1,4 @@
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Paragraph } from '../Paragraph/Paragraph';
 
 export const renderFootnote = (text?: string) =>
   text ? (

package/mobile/src/{components → ui-kit}/Calculator/renderRate.tsx

@@ -1,6 +1,6 @@
+import { UnknownRate, type UnknownRateProps } from '../../components/Calculator/UnknownRate';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { Rate, type RateProps } from './Rate';
-import { UnknownRate, type UnknownRateProps } from './UnknownRate';
 
 interface RenderRateProps extends RateProps, UnknownRateProps {
   isUnknownRateShown?: boolean;

package/mobile/src/{components → ui-kit}/Calculator/renderWantedSumInput.tsx

@@ -1,6 +1,6 @@
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { type InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { InputRange } from '../InputRange/InputRange';
+import { type InputRangeProps } from '../InputRange/InputRangeProps';
 
 const DEFAULT_MONEY_STEP = 1000;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.293",
+  "version": "0.14.294",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Blocks.mobile.ts

@@ -7,6 +7,7 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { Calculator } from './Calculator/Calculator';
+import { CalculatorBonus } from './CalculatorBonus/CalculatorBonus';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
@@ -52,6 +53,7 @@ export const Blocks: BlocksRegistry = {
   BonusBenefitsBlock,
   ButtonsBlock,
   Calculator,
+  CalculatorBonus,
   CardTransfer,
   Carousel,
   CarouselBankHistoryCard,

package/src/components/Blocks.ts

@@ -8,6 +8,7 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { Calculator } from './Calculator/Calculator';
+import { CalculatorBonus } from './CalculatorBonus/CalculatorBonus';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
@@ -61,6 +62,7 @@ export const Blocks: BlocksRegistry = {
   BonusBenefitsBlock,
   ButtonsBlock,
   Calculator,
+  CalculatorBonus,
   CardTransfer,
   Carousel,
   CarouselBankHistoryCard,

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -1,18 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
 import { type BusinessDepositCalculatorProps } from './CalculatorContent';
 import { CalculatorFormLayout } from './CalculatorFormLayout';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { BUSINESS_DEFAULT_DAYS, BUSINESS_DEFAULT_SUM } from './constants';
 import { getMoneyDefaultValue, getMonthsDefaultValue } from './getDefaultValues';
 import { renderDaysInput } from './renderDaysInput';
-import { renderFootnote } from './renderFootnote';
 import { renderInterestPayment } from './renderInterestPayment';
-import { renderRate } from './renderRate';
-import { renderWantedSumInput } from './renderWantedSumInput';
 import {
   useBusinessDepositCalculatorParams,
   type BusinessDepositCalculatorParams,

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

@@ -74,17 +74,6 @@ export default {
               'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
           },
         },
-        {
-          nav: {
-            title: 'Обменивайте баллы на путешествия',
-            icon: { icon: 'PercentageRoundIcon' },
-          },
-          calculatorBlock: {
-            title: 'Обменивайте баллы на путешествия',
-            calcType: 'BonusCalculatorForm',
-            buttons: [sendRequestButton, detailsButton],
-          },
-        },
         {
           nav: {
             title: 'Рефинансирование',
@@ -137,17 +126,4 @@ export default {
       ]}
     />
   ),
-  bonus: (
-    <Calculator
-      calculatorTabs={[
-        {
-          calculatorBlock: {
-            title: 'Обменивайте баллы на путешествия',
-            calcType: 'BonusCalculatorForm',
-            buttons: [sendRequestButton, detailsButton],
-          },
-        },
-      ]}
-    />
-  ),
 };

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

@@ -3,7 +3,6 @@ import '../../setup-fixture';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { Calculator } from './Calculator';
 import {
-  type BonusCalculatorParamsDef,
   type BusinessDepositCalculatorParamsDef,
   type CreditCalculatorParamsDef,
   type DepositCalculatorParamsDef,
@@ -97,15 +96,6 @@ const REFINANCING_CALCULATOR_BLOCK: RefinancingCalculatorParamsDef = {
   },
 };
 
-const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
-  title: 'Обменивайте баллы на путешествия',
-  calcType: 'BonusCalculatorForm',
-  buttons: buttons,
-  calcSource: {
-    $ref: '/wcms-resources/bonus-calculator-data.json',
-  },
-};
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -128,13 +118,6 @@ export default {
             },
             calculatorBlock: DEPOSIT_CALCULATOR_BLOCK,
           },
-          {
-            nav: {
-              title: 'Обменивайте баллы на путешествия',
-              icon: { icon: 'PercentageRoundIcon' },
-            },
-            calculatorBlock: BONUS_CALCULATOR_BLOCK,
-          },
           {
             nav: {
               title: 'Рефинансирование',
@@ -194,20 +177,4 @@ export default {
       />
     </div>
   ),
-  bonus: (
-    <div className="container grid grid-cols-12">
-      <Calculator
-        className="col-span-12"
-        calculatorTabs={[
-          {
-            nav: {
-              title: 'Обменивайте баллы на путешествия',
-              icon: { icon: 'PercentageRoundIcon' },
-            },
-            calculatorBlock: BONUS_CALCULATOR_BLOCK,
-          },
-        ]}
-      />
-    </div>
-  ),
 };

package/src/components/Calculator/CalculatorContent.ts

@@ -178,15 +178,6 @@ export type BusinessDepositCalculatorParamsDef = TitleProps &
     calcType: 'BusinessDepositCalculatorForm';
   };
 
-/**
- * @title Калькулятор бонусов
- * @default {"calcType": "BonusCalculatorForm"}
- */
-export type BonusCalculatorParamsDef = TitleProps &
-  CommonCalculatorProps & {
-    calcType: 'BonusCalculatorForm';
-  };
-
 /**
  * @title Калькулятор рефинансирования
  * @default {"calcType": "RefinancingCalculatorForm"}
@@ -211,8 +202,7 @@ export type CalculatorBlockDef =
   | CreditCalculatorParamsDef
   | RefinancingCalculatorParamsDef
   | DepositCalculatorParamsDef
-  | BusinessDepositCalculatorParamsDef
-  | BonusCalculatorParamsDef;
+  | BusinessDepositCalculatorParamsDef;
 
 /**
  * @title Кнопка навигации

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -3,6 +3,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { clamp } from '../../utils/clamp';
@@ -11,7 +15,6 @@ import {
   type CreditCalculatorProps,
 } from './CalculatorContent';
 import { CalculatorFormLayout } from './CalculatorFormLayout';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { CREDIT_DEFAULT_SUM, DEFAULT_MONTHS } from './constants';
 import {
   getCreditCalculatorParams,
@@ -19,11 +22,8 @@ import {
   type CreditCalculatorParams,
 } from './getCreditCalculatorParams';
 import { getMoneyDefaultValue, getMonthsDefaultValue } from './getDefaultValues';
-import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentType } from './renderPaymentType';
-import { renderRate } from './renderRate';
-import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface CreditCalculatorProp extends CreditCalculatorProps {
   className?: string;

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -2,6 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { clamp } from '../../utils/clamp';
 import {
@@ -9,7 +13,6 @@ import {
   type DepositCalculatorProps,
 } from './CalculatorContent';
 import { CalculatorFormLayout } from './CalculatorFormLayout';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEPOSIT_DEFAULT_SUM } from './constants';
 import { getMoneyDefaultValue, getMonthsDefaultValue } from './getDefaultValues';
 import {
@@ -17,12 +20,9 @@ import {
   type DepositCalculatorData,
   type DepositCalculatorParams,
 } from './getDepositCalculatorParams';
-import { renderFootnote } from './renderFootnote';
 import { renderInterestPayment } from './renderInterestPayment';
 import { renderMonthsInput } from './renderMonthsInput';
-import { renderRate } from './renderRate';
 import { renderRegistrationType } from './renderRegistrationType';
-import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface DepositCalculatorProp extends DepositCalculatorProps {
   className?: string;

package/src/components/Calculator/EmbeddableCalcBlocks.tsx

@@ -1,4 +1,3 @@
-import { BonusCalculatorForm, type BonusCalculatorProps } from './BonusCalculatorForm';
 import {
   BusinessDepositCalculatorForm,
   type BusinessDepositCalculatorProp,
@@ -14,13 +13,11 @@ export type EmbeddableCalcProps =
   | CreditCalculatorProp
   | DepositCalculatorProp
   | BusinessDepositCalculatorProp
-  | BonusCalculatorProps
   | RefinancingCalculatorProp;
 
 export const EmbeddableCalcBlocks = {
   CreditCalculatorForm,
   DepositCalculatorForm,
   BusinessDepositCalculatorForm,
-  BonusCalculatorForm,
   RefinancingCalculatorForm,
 };

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -2,6 +2,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import {
@@ -9,7 +13,6 @@ import {
   type RefinancingCalculatorProps,
 } from './CalculatorContent';
 import { CalculatorFormLayout } from './CalculatorFormLayout';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
 import {
   DEFAULT_REFINANCING_MONTHS,
   REFINANCING_DEFAULT_SUM,
@@ -20,11 +23,8 @@ import {
   type RefinancingCalculatorData,
   type RefinancingCalculatorParams,
 } from './getRefinancingCalculatorParams';
-import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentType } from './renderPaymentType';
-import { renderRate } from './renderRate';
-import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface RefinancingCalculatorProp extends RefinancingCalculatorProps {
   className?: string;

package/src/components/Calculator/constants.ts

@@ -1,4 +1,3 @@
-import { type BonusCalculatorData } from './getBonusCalculatorParams';
 import { type CreditCalculatorSourceBookRateParams } from './getCreditCalculatorParams';
 import { type DepositCalculatorSourceBookParams } from './getDepositCalculatorParams';
 import { type RefinancingCalculatorSourceBookRateParams } from './getRefinancingCalculatorParams';
@@ -58,22 +57,6 @@ export const DEFAULT_REFINANCING_CALCULATOR_PARAMS: RefinancingCalculatorSourceB
   isInsurance: true,
 };
 
-export const DEFAULT_TRAVEL_MIN_SUM = 6000;
-export const DEFAULT_REST_MIN_SUM = 6000;
-
-export const DEFAULT_BONUS_CALCULATOR_PARAMS: Required<BonusCalculatorData> = {
-  minSumTravel: 6000,
-  maxSumTravel: 200000,
-  minSumOther: 6000,
-  maxSumOther: 200000,
-  maxBonus: 5000,
-  prefMonthsNum: 2,
-  prefTravelBonusRate: 0.015,
-  prefRestBonusRate: 0.01,
-  travelBonusRate: 0.015,
-  restBonusRate: 0.01,
-};
-
 export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParams = {
   minSum: 50000,
   maxSum: 100000001,
@@ -98,7 +81,6 @@ export const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS: BusinessDepositCalculat
   };
 
 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/CalculatorBonus/CalculatorBonus.example.json

@@ -0,0 +1 @@
+{}

package/src/components/CalculatorBonus/CalculatorBonus.fixture.tsx

@@ -0,0 +1,34 @@
+import '../../setup-fixture';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+
+import { CalculatorBonus } from './CalculatorBonus';
+
+const buttons: LinkButtonContent[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Отправить заявку',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробные условия',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CalculatorBonus
+        className="col-span-12"
+        title={'Обменивайте баллы на путешествия'}
+        buttons={buttons}
+        calcSource={{
+          $ref: '/wcms-resources/bonus-calculator-data.json',
+        }}
+      />
+    </div>
+  ),
+};

package/src/components/CalculatorBonus/CalculatorBonus.tsx

@@ -0,0 +1,75 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { useForm } from '../../hooks/useForm';
+import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { type CalculatorBonusContent } from './CalculatorBonusContent';
+import { getBonusCalculatorParams, type BonusCalculatorData } from './getBonusCalculatorParams';
+
+const DEFAULT_TRAVEL_MIN_SUM = 6000;
+const DEFAULT_REST_MIN_SUM = 6000;
+
+export interface CalculatorBonusProps extends CalculatorBonusContent, UniBlockProps {
+  className?: string;
+  calcSource?: BonusCalculatorData & JSONRefObject;
+}
+export const CalculatorBonus = UniBlock<CalculatorBonusProps>(
+  ({ className = '', title, calcSource, buttons, footnote, ...rest }) => {
+    const [userInputParams, { field }] = useForm({
+      travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
+      restExpenseValue: DEFAULT_REST_MIN_SUM,
+    });
+
+    const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } =
+      getBonusCalculatorParams(userInputParams, calcSource);
+
+    return (
+      <CalculatorLayout className={className} title={title} {...rest}>
+        <section
+          className={style('flex flex-col justify-between @4xl:flex-row gap-y-4xl', className)}
+        >
+          <div className="flex flex-col @xl:max-w-md gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0">
+            {renderWantedSumInput({
+              title: 'Сумма покупок в категории путешествия, ₽',
+              min: minSumTravel,
+              max: maxSumTravel,
+              step: 500,
+              isShowItems: false,
+              ...field('travelExpenseValue'),
+            })}
+            {renderWantedSumInput({
+              title: 'Сумма покупок в остальных категориях, ₽',
+              min: minSumOther,
+              max: maxSumOther,
+              step: 500,
+              isShowItems: false,
+              ...field('restExpenseValue'),
+            })}
+          </div>
+          {monthBonus >= 0
+            ? renderRate({
+                title: 'Баллов за месяц',
+                rate: monthBonus,
+                fractionDigits: 0,
+                isUnknownRateShown: false,
+                unit: '',
+              })
+            : null}
+          <div className="flex flex-col gap-y-xl @xl:w-96">
+            {yearBonus >= 0 ? (
+              <CalculatorValueBlock title="Баллов за год" value={yearBonus} />
+            ) : null}
+            {renderButtonsSection(buttons, { isVertical: true })}
+            {renderFootnote(footnote)}
+          </div>
+        </section>
+      </CalculatorLayout>
+    );
+  },
+);