@redneckz/wildless-cms-uni-blocks 0.12.14 → 0.13.1

package/package.json

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

package/src/components/Blocks.mobile.ts

@@ -3,15 +3,16 @@ import { ApplicationForm } from './ApplicationForm/ApplicationForm';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
+import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
-import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
-import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
-import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
+import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
+import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -25,6 +26,7 @@ import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
+import { ProductTile } from './ProductTile/ProductTile';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -32,20 +34,26 @@ import { StepsBlock } from './StepsBlock/StepsBlock';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
+import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
   ApplicationForm,
-  ButtonsBlock,
+  BenefitsBlock,
   BonusBenefitsBlock,
+  ButtonsBlock,
+  Calculator,
   CardTransfer,
   Carousel,
+  CarouselBankHistoryCard,
   CarouselCard,
   CarouselCatalogCard,
   CarouselProductCard,
-  CarouselBankHistoryCard,
+  CarouselProgramsCard,
+  CarouselRecommendationCard,
   CarouselTariffsCard,
   ComparisonTable,
+  ExchangeRateTile,
   Footer,
   Header,
   Headline,
@@ -56,17 +64,15 @@ export const Blocks: BlocksRegistry = {
   PictureText,
   Placeholder,
   ProductBlock,
+  ProductGallery,
+  ProductTile,
+  RichTextBlock,
+  RollupItem,
+  SafeDepositRental,
   StepsBlock,
   Tabs,
   TariffsTable,
   TextBlock,
-  RichTextBlock,
-  RollupItem,
-  SafeDepositRental,
+  Tile,
   VerticalLayout,
-  CarouselRecommendationCard,
-  ExchangeRateTile,
-  CarouselProgramsCard,
-  ProductGallery,
-  BenefitsBlock,
 };

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -1,20 +1,20 @@
 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 type { BusinessDepositCalculatorProps } from './CalculatorContent';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
-import { Rate } from './Rate';
-import { UnknownRate } from './UnknownRate';
-import { BUSINESS_DEFAULT_DAYS, BUSINESS_DEFAULT_SUM } from './constants';
-import { renderDaysInput } from './renderDaysInput';
 import { renderFootnote } from './renderFootnote';
-import { renderInterestPayment } from './renderInterestPayment';
-import { renderWantedSumInput } from './renderWantedSumInput';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { BUSINESS_DEFAULT_DAYS, BUSINESS_DEFAULT_SUM } from './constants';
 import {
   BusinessDepositCalculatorParams,
+  BusinessDepositCalculatorUserInputParams,
   useBusinessDepositCalculatorParams,
 } from './useBusinessDepositCalculatorParams';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderDaysInput } from './renderDaysInput';
+import { renderInterestPayment } from './renderInterestPayment';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { renderRate } from './renderRate';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 
 export interface BusinessDepositCalculatorProp extends BusinessDepositCalculatorProps {
   className?: string;
@@ -32,12 +32,12 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
     });
 
     const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
-    const { income, finalSum, rate, depositeName, isShowUnknownRate } = calculatorParams;
+    const { income, finalSum, rate, isShowUnknownRate, depositeName } = calculatorParams;
 
     return (
       <section className={className}>
-        <div className="flex justify-between">
-          <div className="w-2/5">
+        <div className="flex flex-col justify-between sm:flex-row">
+          <div className="flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg">
             {renderWantedSumInput({
               title: 'Сумма, ₽',
               min: calculatorParams.minSum,
@@ -52,40 +52,30 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
               ...field('daysValue'),
               value: calculatorParams.daysValue,
             })}
-            <div className="mt-2xl flex justify-between">
+            <div className="flex flex-col gap-xl justify-between sm:flex-row sm:gap-0">
               {renderBusinessDepositParamsForm(calculatorParams, field)}
               {renderInterestPayment({
                 title: 'Выплата процентов',
                 orientation: 'vertical',
                 ...field('isMonthlyInterestPayment'),
+                radioGroupClassName: 'sm:flex-col',
               })}
             </div>
           </div>
-          {isShowUnknownRate ? (
-            <UnknownRate />
-          ) : (
-            <Rate
-              rate={rate}
-              depositeName={depositeName}
-              isShowDepositeName={isShowDepositeName}
-              rateBlockClassName="tracking-[-25px]"
-              unit="%"
-            />
-          )}
-
-          <div className="w-96">
-            <CalculatorValueBlock
-              title="Доход в конце срока"
-              value={income}
-              postfix="₽"
-              prefix="+"
-            />
-            <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
-            {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
-            <div className="mt-2xl">{renderFootnote(footnote)}</div>
+          <div className="border-b border-main-divider my-xl sm:hidden"></div>
+          {renderRate({
+            rate,
+            depositeName,
+            isShowDepositeName,
+            isShowUnknownRate,
+          })}
+          <div className="flex flex-col gap-y-xl mt-3xl sm:gap-0 sm:w-96 sm:mt-0">
+            {renderDepositResults(finalSum, income)}
+            {renderButtonsSection(buttons, { isVertical: true })}
+            <div className="sm:mt-2xl">{renderFootnote(footnote)}</div>
           </div>
         </div>
-        <div className="mt-5">{renderFootnote(bottomFootnote)}</div>
+        <div className="mt-lg">{renderFootnote(bottomFootnote)}</div>
       </section>
     );
   },
@@ -93,9 +83,9 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
 
 const renderBusinessDepositParamsForm = (
   calculatorParams: BusinessDepositCalculatorParams,
-  field: FormFieldRegisterer<any>,
+  field: FormFieldRegisterer<BusinessDepositCalculatorUserInputParams>,
 ) => (
-  <div>
+  <div className="flex flex-col gap-y-xl sm:gap-y-s">
     <Checkbox
       text="Пополнение"
       disabled={calculatorParams.isDisabledOperatingDeposit}
@@ -103,17 +93,22 @@ const renderBusinessDepositParamsForm = (
       value={calculatorParams.isReplenished}
     />
     <Checkbox
-      className="mt-3"
       disabled={calculatorParams.isDisabledOperatingDeposit}
       text="Частичное снятие"
       {...field('isPartialWithdrawal')}
       value={calculatorParams.isPartialWithdrawal}
     />
     <Checkbox
-      className="mt-3"
       text="ИП / малое предприятие"
       {...field('isSmallBusiness')}
       value={calculatorParams.isSmallBusiness}
     />
   </div>
 );
+
+const renderDepositResults = (finalSum?: number, income?: number) => (
+  <div className="flex flex-col gap-2xl sm:gap-0">
+    <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
+    <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
+  </div>
+);

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

@@ -0,0 +1,114 @@
+import '../../setup-fixture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { Calculator } from './Calculator';
+
+const sendRequestButton: ButtonProps = {
+  href: 'https://rshb.ru',
+  text: 'Отправить заявку',
+  target: '_blank',
+  version: 'primary',
+};
+
+const detailsButton: ButtonProps = {
+  href: 'https://rshb.ru',
+  text: 'Подробные условия',
+  target: '_blank',
+  version: 'secondary',
+};
+
+export default {
+  default: (
+    <Calculator
+      calculatorTabs={[
+        {
+          nav: {
+            title: 'Кредит на любые цели',
+            description: 'Ставка от 5.5% до 5 лет',
+            icon: 'MoneyIcon',
+          },
+          calculatorBlock: {
+            calcType: 'CreditCalculatorForm',
+            paramsViewSettings: {
+              isShowSalaryClient: true,
+              isShowStateEmployee: true,
+              isShowInsurance: true,
+            },
+            buttons: [sendRequestButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
+        {
+          nav: {
+            title: 'Под залог недвижимости',
+            description: 'Ставка от 13.95% до 10 лет',
+            icon: 'BuildingIcon',
+          },
+          calculatorBlock: {
+            calcType: 'CreditCalculatorForm',
+            paramsViewSettings: {
+              isShowSalaryClient: true,
+              isShowStateEmployee: true,
+              isShowInsurance: true,
+            },
+            buttons: [sendRequestButton, detailsButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
+        {
+          nav: {
+            title: 'Пенсионный',
+            description: 'Ставка от 12.5% до 10 лет',
+            icon: 'UserSquareIcon',
+          },
+          calculatorBlock: {
+            calcType: 'CreditCalculatorForm',
+            paramsViewSettings: {
+              isShowSalaryClient: true,
+              isShowStateEmployee: true,
+              isShowInsurance: true,
+            },
+            buttons: [sendRequestButton, detailsButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
+      ]}
+    />
+  ),
+  deposit: (
+    <Calculator
+      calculatorTabs={[
+        {
+          calculatorBlock: {
+            calcType: 'DepositCalculatorForm',
+            paramsViewSettings: {
+              isShowMonthlyInterestPayment: true,
+              isShowRemoteRegistration: true,
+            },
+            buttons: [sendRequestButton, detailsButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
+      ]}
+    />
+  ),
+  business: (
+    <Calculator
+      calculatorTabs={[
+        {
+          calculatorBlock: {
+            calcType: 'BusinessDepositCalculatorForm',
+            buttons: [sendRequestButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+            bottomFootnote:
+              'При сумме свыше 500 000 000 ₽ вы можете обратится в офис за индивидуальными условиями по вкладу',
+          },
+        },
+      ]}
+    />
+  ),
+};

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

@@ -0,0 +1,85 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Text } from '../../ui-kit/Text/Text';
+import type { CalculatorContent, CalculatorTab } from './CalculatorContent';
+import { EmbeddableCalcBlocks } from './EmbeddableCalcBlocks';
+
+export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
+
+export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [] }) => (
+  <BlockWrapper className={className} defaultPadding="p-0">
+    {renderTabs(calculatorTabs)}
+  </BlockWrapper>
+));
+
+const renderCalculator = (tab: CalculatorTab) => {
+  const type = tab.calculatorBlock?.calcType;
+
+  if (!type || !(type in EmbeddableCalcBlocks)) {
+    return null;
+  }
+
+  const EmbeddedBlock = EmbeddableCalcBlocks[type];
+
+  return <EmbeddedBlock {...tab.calculatorBlock} isMobile />;
+};
+
+const renderTabs = (tabs: CalculatorTab[]) => {
+  if (!tabs || !tabs.length) {
+    return null;
+  }
+
+  const isSingleTab = tabs.length === 1;
+
+  if (isSingleTab) {
+    return <BlockWrapper>{renderCalculator(tabs[0])}</BlockWrapper>;
+  }
+
+  return tabs.map((tab, index) => (
+    <Foldable
+      key={index.toString()}
+      isFoldButtonOnTop
+      unfoldedByDefault={index === 0}
+      renderFoldableSection={({ isUnfolded }) => (
+        <FoldableSection isUnfolded={isUnfolded}>
+          <BlockWrapper>{renderCalculator(tab)}</BlockWrapper>
+        </FoldableSection>
+      )}
+      renderFoldButton={renderFoldButton(tab)}
+    />
+  ));
+};
+
+const renderFoldButton =
+  (tab: CalculatorTab) =>
+  ({ isUnfolded, onToggle }: FoldablePartProps) => {
+    return (
+      <button
+        onClick={onToggle}
+        className="w-full p-xl bg-green flex items-center border-b border-white"
+      >
+        <div className="w-11 h-11 bg-white rounded-md flex justify-center items-center">
+          <Icon name={tab.nav?.icon?.icon} iconVersion="color" width="24" height="24" />
+        </div>
+        <div className="flex-1 flex flex-col pl-s">
+          <Text align="text-left" color="text-white">
+            {tab.nav?.title}
+          </Text>
+          <Text align="text-left" size="text-s" color="text-white" font="font-light">
+            {tab.nav?.description}
+          </Text>
+        </div>
+        <Icon
+          name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+          iconVersion="white"
+          width="24"
+          height="24"
+        />
+      </button>
+    );
+  };

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -3,6 +3,8 @@ import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 
+const calculatorValueBlockStyle = 'flex justify-between md:mb-7 md:flex-col';
+
 export interface CalculatorValueBlockProps {
   title?: string;
   value?: number;
@@ -13,7 +15,7 @@ export interface CalculatorValueBlockProps {
 
 export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => (
-    <div className={style('mb-7', className)}>
+    <div className={style(calculatorValueBlockStyle, className)}>
       {title ? (
         <Text size="text-l" font="font-light" color="text-secondary-text">
           {title}

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,28 +1,29 @@
 /* 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 {
   CreditCalculatorParamsViewSettings,
   CreditCalculatorProps,
 } from './CalculatorContent';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
-import { CREDIT_DEFAULT_SUM, DEFAULT_MONTHS } from './constants';
-import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
-import { renderMonthsInput } from './renderMonthsInput';
-import { renderPaymentType } from './renderPaymentType';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderMonthsInput } from './renderMonthsInput';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { CREDIT_DEFAULT_SUM, DEFAULT_MONTHS } from './constants';
 import { CreditCalculatorParams, useCreditCalculatorParams } from './useCreditCalculatorParams';
+import { renderPaymentType } from './renderPaymentType';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { renderRate } from './renderRate';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 
 export interface CreditCalculatorProp extends CreditCalculatorProps {
   className?: string;
+  isMobile?: boolean;
 }
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings, isMobile }) => {
     const [userInputParams, { field }] = useForm({
       isAnnuity: true,
       isInsurance: true,
@@ -39,9 +40,15 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
       paramsViewSettings,
     );
 
+    const paymentTypeElement = renderPaymentType({
+      title: isMobile ? 'Тип платежа' : '',
+      orientation: 'vertical',
+      ...field('isAnnuity'),
+    });
+
     return (
-      <section className={style('flex justify-between', className)}>
-        <div className="w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row', className)}>
+        <div className="flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg">
           {renderWantedSumInput({
             title: 'Сумма кредита, ₽',
             step: 500,
@@ -57,23 +64,20 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
           })}
-          <div className="mt-2xl">
-            {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
-          </div>
+          {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
+          <div className="mt-s sm:hidden">{paymentTypeElement}</div>
         </div>
-        <Rate
-          title="Ставка"
-          rate={calculatorParams.rate}
-          rateBlockClassName="tracking-[-25px]"
-          unit="%"
-        />
-        <div className="w-96">
+        <div className="border-b border-main-divider mt-xl mb-3xl sm:hidden"></div>
+        {renderRate({
+          rate: calculatorParams.rate,
+        })}
+        <div className="mt-6xl flex flex-col gap-lg sm:w-96 sm:mt-0 sm:gap-0">
           <CalculatorValueBlock
-            title={'Ежемесячный платеж'}
+            title="Ежемесячный платеж"
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
-          {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
+          <div className="hidden sm:block">{paymentTypeElement}</div>
           {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
@@ -86,17 +90,17 @@ const renderCreditParamsForm = (
   params: CreditCalculatorParams & CreditCalculatorParamsViewSettings,
   field: FormFieldRegisterer<any>,
 ) => (
-  <div>
+  <div className="gap-xl flex flex-col sm:gap-s">
     {params.isShowSalaryClient ? (
       <Checkbox
-        text="Получаю зарплату на счёт в Россельхозбанке"
+        text={`Получаю зарплату на счёт\nв Россельхозбанке`}
         {...field('isSalaryClient')}
         value={params.isSalaryClient}
+        className="whitespace-pre-line sm:whitespace-normal"
       />
     ) : null}
     {params.isShowStateEmployee ? (
       <Checkbox
-        className="mt-3"
         text="Работаю в бюджетной организации"
         {...field('isStateEmployee')}
         value={params.isStateEmployee}
@@ -104,7 +108,6 @@ const renderCreditParamsForm = (
     ) : null}
     {params.isShowPensionClient ? (
       <Checkbox
-        className="mt-3"
         text="Получаю пенсию на карту Россельхозбанка"
         {...field('isPensionClient')}
         value={params.isPensionClient}
@@ -112,7 +115,6 @@ const renderCreditParamsForm = (
     ) : null}
     {params.isShowInsurance ? (
       <Checkbox
-        className="mt-3"
         text="Комплексная страховая защита"
         {...field('isInsurance')}
         value={params.isInsurance}

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,18 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-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';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
-import { DEPOSIT_DEFAULT_SUM } from './constants';
-import { Rate } from './Rate';
+import type {
+  DepositCalculatorParamsViewSettings,
+  DepositCalculatorProps,
+} from './CalculatorContent';
 import { renderFootnote } from './renderFootnote';
-import { renderInterestPayment } from './renderInterestPayment';
-import { renderMonthsInput } from './renderMonthsInput';
-import { renderRegistrationType } from './renderRegistrationType';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderMonthsInput } from './renderMonthsInput';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { DEPOSIT_DEFAULT_SUM } from './constants';
 import { DepositCalculatorParams, useDepositCalculatorParams } from './useDepositCalculatorParams';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { renderInterestPayment } from './renderInterestPayment';
+import { renderRegistrationType } from './renderRegistrationType';
+import { renderRate } from './renderRate';
 
 export interface DepositCalculatorProp extends DepositCalculatorProps {
   className?: string;
@@ -32,16 +35,17 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       sourceBookDir,
       paramsViewSettings,
     );
-    const { defaultMonth, income, finalSum, rate } = calculatorParams;
+    const { defaultMonth, rate, income, finalSum } = calculatorParams;
 
     const { onChange: setMonthsValue } = field('monthsValue');
+
     useEffect(() => {
       setMonthsValue && setMonthsValue(defaultMonth);
     }, [defaultMonth]);
 
     return (
-      <section className={style('flex justify-between', className)}>
-        <div className="w-2/5">
+      <section className={style('flex flex-col justify-between sm:flex-row', className)}>
+        <div className="flex flex-col gap-lg sm:w-2/5">
           {renderWantedSumInput({
             title: 'Сумма, ₽',
             min: calculatorParams.minSum,
@@ -57,15 +61,18 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
           })}
-          <div className="mt-2xl">
+          <div className="flex flex-col gap-y-2xl">
             {renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
           </div>
         </div>
-        <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
-        <div className="w-96">
+        <div className="border-b border-main-divider mt-lg mb-2xl md:hidden"></div>
+        {renderRate({
+          rate,
+        })}
+        <div className="mt-2xl flex flex-col gap-y-2xl sm:w-96 sm:gap-y-0 sm:mt-0">
           <CalculatorValueBlock title="Доход в конце срока" value={income} postfix="₽" prefix="+" />
           <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
-          {renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true })}
+          {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>