@redneckz/wildless-cms-uni-blocks 0.3.84 → 0.3.86

package/src/components/Blocks.spec.tsx

@@ -0,0 +1,74 @@
+import { setup } from '@redneckz/uni-jsx';
+import { render } from '@testing-library/react';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Blocks } from './Blocks';
+import type { ContentPageContext } from './ContentPage/ContentPageContext';
+
+setup(jsx, jsxs);
+
+jest.mock('../ui-kit/BlockWrapper', () => ({
+  __esModule: true,
+  BlockWrapper: ({ children }) => <section>{children}</section>,
+}));
+
+const emptyFn = () => {
+  /* For sure */
+};
+
+const context: ContentPageContext = {
+  useState,
+  useRouter: () => ({
+    pathname: '/credits',
+    query: {},
+    push: emptyFn,
+    replace: emptyFn,
+  }),
+  useAsyncData: () => ({}),
+  useGeolocation: (defaultLocation) => [defaultLocation, emptyFn],
+  useLikeService: () => ({
+    likeCount: 0,
+    like: emptyFn,
+    dislike: emptyFn,
+  }),
+  handlerDecorator: (): any => emptyFn,
+  useSearch: () => ({
+    term: '',
+    setTerm: emptyFn,
+  }),
+  IntersectionObserverTag: ({ children }) => children,
+};
+
+describe('Blocks', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  for (const [key, BlockComponent] of Object.entries(Blocks)) {
+    describe(key, () => {
+      it(`should render block "${key}" without content`, () => {
+        expect.assertions(2);
+
+        const { container } = render(<BlockComponent context={context} />);
+        expect(container.firstChild).toBeTruthy();
+        expect(container.firstChild).toMatchSnapshot();
+      });
+
+      it(`should render block "${key}" with demo content`, async () => {
+        expect.assertions(1);
+
+        let data = {};
+
+        try {
+          const { default: example } = await import(`./${key}/${key}.example.json`);
+          data = example;
+        } catch (ex) {
+          // Do nothing
+        }
+
+        const { container } = render(<BlockComponent context={context} {...data} />);
+        expect(container.firstChild).toBeTruthy();
+      });
+    });
+  }
+});

package/src/components/Bonus/BonusContent.ts

@@ -1,5 +1,4 @@
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /** @title Плитка */
 interface BonusItems {
@@ -16,8 +15,7 @@ interface BonusItems {
 /**
  * @title Блок Бонусы
  */
-export type BonusContent = HeadingContent &
-  DescriptionContent & {
-    /** @title Список плиток */
-    bonusItems?: BonusItems[];
-  };
+export type BonusContent = HeadlineCommonProps & {
+  /** @title Список плиток */
+  bonusItems?: BonusItems[];
+};

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 type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { FuncReturnVoid, UniBlockProps } from '../../types';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CalculatorBlockDef, CalculatorContent, CalculatorNav } from './CalculatorContent';
@@ -12,20 +12,20 @@ type TabsProps = {
   tabsShift: number;
   tabsNav: CalculatorNav[];
   activeSlideIndex: number;
-  setActiveSlideIndex: FuncReturnVoid<number>;
+  setActiveSlideIndex: (index: number) => void;
 };
 
 type NavButtonProps = {
   tab: CalculatorNav;
   i: number;
   activeSlideIndex: number;
-  onClick: FuncReturnVoid<MouseEvent>;
+  onClick: () => void;
 };
 
 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,