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

package/mobile/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/mobile/src/components/Calculator/Calculator.tsx

@@ -1,134 +1,85 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
-import type { CalculatorBlockDef, CalculatorContent, CalculatorNav } from './CalculatorContent';
-import { renderCalculatorBlock } from './renderCalculatorBlock';
+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 {}
 
-interface TabsProps {
-  activeIndex: number;
-  tabsNav: CalculatorNav[];
-  slideIndexShift: number;
-  onClick: (index: number) => void;
-}
+export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [] }) => (
+  <BlockWrapper className={className} defaultPadding="p-0">
+    {renderTabs(calculatorTabs)}
+  </BlockWrapper>
+));
 
-interface NavButtonProps {
-  tab: CalculatorNav;
-  i: number;
-  isActive: boolean;
-  onClick: () => void;
-}
+const renderCalculator = (tab: CalculatorTab) => {
+  const type = tab.calculatorBlock?.calcType;
 
-export const Calculator = JSX<CalculatorProps>(
-  ({ className = '', calculatorTabs = [], ...rest }) => {
-    const tabsNav = calculatorTabs.map((_) => _.nav || ({} as CalculatorNav));
-    const calculatorBlocks = calculatorTabs.map(
-      ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
-    );
-    const [slideIndexShift, setSlideIndexShift] = useState(0);
-    const handleSlideIndexShift = useCallback((_: number) => setSlideIndexShift(_), []);
-    const COLUMNS_FOR_SCROLL = 3;
+  if (!type || !(type in EmbeddableCalcBlocks)) {
+    return null;
+  }
 
-    const [activeIndex, controls] = useCarouselControls({
-      itemCount: calculatorTabs?.length,
-      visibleItemCount: COLUMNS_FOR_SCROLL,
-    });
+  const EmbeddedBlock = EmbeddableCalcBlocks[type];
 
-    return (
-      <BlockWrapper
-        className={style('box-border overflow-hidden relative', className)}
-        defaultPadding="p-0"
-        {...rest}
-      >
-        <div className="bg-white">
-          {tabsNav.length > 1
-            ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
-            : null}
-          {renderArrows({
-            ...controls,
-            btnClass: ['left-3', 'right-3'],
-            className: 'top-8',
-          })}
-        </div>
-        <div
-          className="flex"
-          style={{ transform: `translateX(-${slideIndexShift}00%)` }}
-          role="list"
-        >
-          {calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null}
-        </div>
-      </BlockWrapper>
-    );
-  },
-);
+  return <EmbeddedBlock {...tab.calculatorBlock} isMobile />;
+};
 
-function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
-  const btnClassName = isActive
-    ? '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`;
-  const iconClassName = isActive ? '' : `text-primary-main`;
-  const iconVersion = tab?.icon?.iconVersion;
-  const activeIconStyle = isActive ? 'white' : 'normal';
+const renderTabs = (tabs: CalculatorTab[]) => {
+  if (!tabs || !tabs.length) {
+    return null;
+  }
 
-  return (
-    <button
-      type="button"
-      key={String(i)}
-      onClick={onClick}
-      aria-label={tab?.title}
-      className={style(
-        'box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-20 space-x-m',
-        btnClassName,
-      )}
-    >
-      <Img
-        className={style('h-6 w-6 min-w-6 min-h-6', iconClassName)}
-        image={{
-          ...tab?.icon,
-          iconVersion: iconVersion ?? activeIconStyle,
-        }}
-        width="24"
-        height="24"
-      />
-      <div className="border-0">
-        <div className={btnTitleClassName}>{tab?.title}</div>
-        <div className={btnDescClassName}>{tab.description}</div>
-      </div>
-    </button>
-  );
-}
+  const isSingleTab = tabs.length === 1;
+
+  if (isSingleTab) {
+    return <BlockWrapper>{renderCalculator(tabs[0])}</BlockWrapper>;
+  }
 
-function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }: TabsProps) {
-  const CARD_SHIFT = 388;
+  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)}
+    />
+  ));
+};
 
-  return (
-    <div>
-      <div
-        style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
-        className="flex flex-col justify-end items-center h-32 pt-4xl box-border duration-1000"
+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-full flex flex-nowrap items-end gap-xs">
-          {tabsNav.map((tab, i) =>
-            renderNavButton({
-              tab,
-              i,
-              isActive: Boolean(i === slideIndexShift),
-              onClick: () => onClick(i),
-            }),
-          )}
+        <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>
-      </div>
-      <div className="w-full h-2 bg-primary-main" />
-    </div>
-  );
-}
+        <Icon
+          name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+          iconVersion="white"
+          width="24"
+          height="24"
+        />
+      </button>
+    );
+  };

package/mobile/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/mobile/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/mobile/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>

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

@@ -4,7 +4,10 @@ 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 type {
+  RefinancingCalculatorParamsViewSettings,
+  RefinancingCalculatorProps,
+} from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import {
   DEFAULT_REFINANCING_MONTHS,
@@ -15,7 +18,6 @@ import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
-import { RefinancingCalculatorProps } from './CalculatorContent';
 import {
   RefinancingCalculatorParams,
   useRefinancingCalculatorParams,
@@ -71,6 +73,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
             max: calculatorParams.maxMonths,
             ...field('monthsValue'),
             value: calculatorParams.monthsValue,
+            className: 'mt-2xl',
           })}
           <div className={style('mt-7', calculatorParams.isExtraMoney ? 'mb-3' : '')}>
             {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}

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

@@ -1,12 +1,14 @@
 import { ListOrientation } from '../../model/ListOrientation';
 import { RadioButtonGroup, RadioButtonItem } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 
 export interface BinaryRadioButtonGroupProps {
   items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
   title?: string;
   orientation?: ListOrientation;
   value?: boolean;
+  radioGroupClassName?: string;
   onChange?: (value: boolean) => void;
 }
 
@@ -15,6 +17,7 @@ export const renderBinaryRadioButtonGroup = ({
   title,
   orientation = 'horizontal',
   value,
+  radioGroupClassName,
   onChange,
 }: BinaryRadioButtonGroupProps) => (
   <div>
@@ -29,6 +32,7 @@ export const renderBinaryRadioButtonGroup = ({
       orientation={orientation}
       items={items}
       checkedItem={items[value ? 0 : 1].id}
+      className={style('flex-col sm:flex-row', radioGroupClassName)}
       onChange={(_) => onChange && onChange(_ === items[0].id)}
     />
   </div>

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

@@ -5,7 +5,6 @@ const STEP_DAYS = 1;
 
 export const renderDaysInput = (props: InputRangeProps) => (
   <InputRange
-    className="mt-7"
     items={[`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`]}
     step={STEP_DAYS}
     {...props}

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

@@ -14,7 +14,6 @@ export const renderMonthsInput = ({
   ...rest
 }: MonthsInputParams) => (
   <InputRange
-    className="mt-7"
     items={[`От ${monthText(min)}`, `До ${monthText(max)}`]}
     step={STEP_MONTHS}
     {...(availableMonths?.length ? { list: availableMonths } : { min, max })}

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

@@ -6,6 +6,7 @@ import {
 export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
   renderBinaryRadioButtonGroup({
     ...props,
+    radioGroupClassName: 'sm:flex-col',
     items: [
       { id: 'annuity', text: 'Аннуитетный' },
       { id: 'differential', text: 'Дифференцированный' },