@redneckz/wildless-cms-uni-blocks 0.14.539 → 0.14.541

package/mobile/src/components/CalculatorDeposit/renderDepositResult.tsx

@@ -1,5 +1,5 @@
 import { CalculatorStyle } from '../../ui-kit/Calculator/CalculatorStyle';
-import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { CalculatorValue } from '../../ui-kit/Calculator/CalculatorValue';
 import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
@@ -25,13 +25,13 @@ export const renderDepositResult = ({
   isCapitalization = false,
 }: DepositResultProps) => (
   <div className={CalculatorStyle.result}>
-    <CalculatorValueBlock
+    <CalculatorValue
       title={`Доход в конце срока${isCapitalization ? CAPITALIZATION : ''}`}
       value={income}
       postfix={postfix}
       prefix="+"
     />
-    <CalculatorValueBlock
+    <CalculatorValue
       title={`Сумма в конце срока${isCapitalization ? CAPITALIZATION : ''}`}
       value={finalSum}
       postfix={postfix}

package/mobile/src/components/CalculatorRefinancing/CalculatorRefinancing.tsx

@@ -2,7 +2,7 @@ import { type JSONRefObject } from '../../data/JSONRefObject';
 import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
 import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
 import { CalculatorStyle } from '../../ui-kit/Calculator/CalculatorStyle';
-import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { CalculatorValue } from '../../ui-kit/Calculator/CalculatorValue';
 import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
 import { renderMonthsInput } from '../../ui-kit/Calculator/renderMonthsInput';
 import { renderPaymentType } from '../../ui-kit/Calculator/renderPaymentType';
@@ -42,7 +42,7 @@ export const CalculatorRefinancing = UniBlock<RefinancingCalculatorProp>(
       moneyExtra: REFINANCING_OLD_DEFAULT_SUM,
     });
 
-    const calculatorParams = getRefinancingCalculatorParams(
+    const calcParams = getRefinancingCalculatorParams(
       userInputParams,
       calcSource,
       paramsViewSettings,
@@ -57,40 +57,40 @@ export const CalculatorRefinancing = UniBlock<RefinancingCalculatorProp>(
 
     return (
       <CalculatorLayout className={className} title={title} {...rest}>
-        <section className={style(CalculatorStyle.wrapper, CalculatorStyle.gapL, className)}>
+        <section className={style(CalculatorStyle.wrapper, className)}>
           <div className={CalculatorStyle.input}>
             {renderWantedSumInput({
               title: 'Остаток долга в других банках, ₽ ',
               step: 500,
-              min: calculatorParams.minSum,
-              max: calculatorParams.maxSum - calculatorParams.maxSumExtra,
+              min: calcParams.minSum,
+              max: calcParams.maxSum - calcParams.maxSumExtra,
               ...field('moneyValue'),
-              value: calculatorParams.moneyValue,
+              value: calcParams.moneyValue,
             })}
             {renderWantedSumInput({
               title: 'Ежемесячный платёж в других банках, ₽',
               step: 500,
-              min: calculatorParams.minSumOld,
-              max: calculatorParams.maxSumOld,
+              min: calcParams.minSumOld,
+              max: calcParams.maxSumOld,
               ...field('oldMonthlyPayment'),
-              value: calculatorParams.oldMonthlyPayment,
+              value: calcParams.oldMonthlyPayment,
             })}
             {renderMonthsInput({
               title: 'Новый срок кредита, месяцев',
-              min: calculatorParams.minMonths,
-              max: calculatorParams.maxMonths,
+              min: calcParams.minMonths,
+              max: calcParams.maxMonths,
               ...field('monthsValue'),
-              value: calculatorParams.monthsValue,
+              value: calcParams.monthsValue,
             })}
-            {renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)}
-            {calculatorParams.isExtraMoney
+            {renderCreditParamsForm({ ...calcParams, ...paramsViewSettings }, field)}
+            {calcParams.isExtraMoney
               ? renderWantedSumInput({
                   title: 'Дополнительная сумма, ₽ ',
                   step: 500,
-                  min: calculatorParams.minSumExtra,
-                  max: calculatorParams.maxSumExtra,
+                  min: calcParams.minSumExtra,
+                  max: calcParams.maxSumExtra,
                   ...field('moneyExtra'),
-                  value: calculatorParams.moneyExtra,
+                  value: calcParams.moneyExtra,
                 })
               : null}
             <div className="sm:hidden pt-1 pb-4 border-b border-main-divider">
@@ -98,17 +98,20 @@ export const CalculatorRefinancing = UniBlock<RefinancingCalculatorProp>(
             </div>
           </div>
           <div className={style(CalculatorStyle.result, '@4xl:w-1/2')}>
-            <CalculatorValueBlock
+            <CalculatorValue title="Полная стоимость кредита" value={calcSource?.totalLoanCost} />
+            <CalculatorValue
+              title="Ставка"
+              value={calcParams?.rate}
+              fractionDigits={2}
+              postfix="%"
+            />
+            <CalculatorValue
               title="Ежемесячный платёж"
-              value={calculatorParams.monthlyPayment}
+              value={calcParams.monthlyPayment}
               postfix="₽"
             />
-            {calculatorParams.benefit > 0 ? (
-              <CalculatorValueBlock
-                title={'Выгода в месяц'}
-                value={calculatorParams.benefit}
-                postfix="₽"
-              />
+            {calcParams.benefit > 0 ? (
+              <CalculatorValue title={'Выгода в месяц'} value={calcParams.benefit} postfix="₽" />
             ) : null}
             <div className="hidden sm:block mb-lg">{paymentTypeElement}</div>
             {renderButtonsSection(buttons, { isVertical: true })}

package/mobile/src/components/CalculatorRefinancing/getRefinancingCalculatorParams.ts

@@ -53,6 +53,7 @@ export interface RefinancingCalculatorParams
 export type RefinancingCalculatorData = {
   rateRows?: RefinancingCalculatorSourceBookRateParams[];
   limitRows?: RefinancingCalculatorSourceBookLimitParams[];
+  totalLoanCost?: string;
 };
 
 export const getRefinancingCalculatorParams = (

package/mobile/src/components/ExchangeRateTile/renderInput.tsx

@@ -32,6 +32,7 @@ export function renderInput(props: InputProps) {
       />
       {ratesOptions.length ? (
         <Select
+          className="absolute right-0"
           isBorder={false}
           onChange={(_) => setSelected(_.key as Currency)}
           options={ratesOptions}

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { LinkButtonVersion } from '../../model/LinkButtonVersion';
-import type { LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
 import { isIcon } from '../../utils/isIcon';
@@ -28,6 +28,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
       const { iconMapped } = findIconByHref(href);
       const iconCustom = isIcon(icon) ? icon : iconMapped;
       const buttonText = showButtonText ? { text } : { text: '' };
+      const iconVersion = _?.icon?.iconVersion || 'color';
 
       if (!hasText && text) {
         setHasText(true);
@@ -36,7 +37,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
       return {
         ..._,
         ...buttonText,
-        icon: { ...iconCustom, iconVersion: 'color' },
+        icon: { ...iconCustom, iconVersion: iconVersion },
         version: _?.version ?? version,
       };
     });

package/mobile/src/components/OfficesAtmsMap/getScheduleDescription.tsx

@@ -1,5 +1,5 @@
 import { CardCell } from './CardCell';
-import type { WorkScheduleWeek } from './OfficesAtmsMapProps';
+import { type WorkScheduleWeek } from './OfficesAtmsMapProps';
 
 export const getScheduleDescription = (workScheduleWeek: WorkScheduleWeek[]) => {
   const rows = getDateDescription(workScheduleWeek);

package/mobile/src/components/OfficesAtmsMap/getWorkScheduleWeek.tsx

@@ -1,4 +1,4 @@
-import type { WorkSchedule, WorkScheduleWeek } from './OfficesAtmsMapProps';
+import { type WorkSchedule, type WorkScheduleWeek } from './OfficesAtmsMapProps';
 
 export const WEEKDAY_MAP = [
   ['workingMonday', 'Пн', 'Понедельник'],

package/mobile/src/components/OfficesAtmsMap/renderBusinessSchedule.tsx

@@ -3,7 +3,7 @@ import { style } from '../../utils/style';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
 import { WEEKDAY_MAP } from './getWorkScheduleWeek';
-import type { WorkScheduleWeek } from './OfficesAtmsMapProps';
+import { type WorkScheduleWeek } from './OfficesAtmsMapProps';
 
 export const renderBusinessSchedule = (scheduleDescription?: string) => {
   if (!scheduleDescription) {

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -4,7 +4,7 @@ import { type DescriptionProps, type LabelProps, type TitleProps } from '../../m
 import { type IconProps } from '../../model/Picture';
 import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
-import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
 /**

package/mobile/src/content-page-repository/transformAttachmentLink.ts

@@ -1,10 +1,10 @@
 import fs from 'fs';
 import path from 'path';
 import util from 'util';
-import type { LinkProps } from '../model/LinkProps';
+import { type LinkProps } from '../model/LinkProps';
 import { isUUID } from '../utils/isUUID';
 import { clearAttachmentHref } from './clearAttachmentHref';
-import type { TransformationOptions } from './TransformationOptions';
+import { type TransformationOptions } from './TransformationOptions';
 
 const mkdir = util.promisify(fs.mkdir);
 const copyFile = util.promisify(fs.copyFile);

package/mobile/src/content-page-repository/transformContentPage.ts

@@ -1,17 +1,17 @@
 import { type JSONRecord } from '@redneckz/json-op';
 import fs from 'fs';
 import util from 'util';
-import type { Attachment } from '../model/Attachment';
-import type { ContentPageDef } from '../model/ContentPageDef';
-import type { LinkProps } from '../model/LinkProps';
-import type { Picture } from '../model/Picture';
+import { type Attachment } from '../model/Attachment';
+import { type ContentPageDef } from '../model/ContentPageDef';
+import { type LinkProps } from '../model/LinkProps';
+import { type Picture } from '../model/Picture';
 import { isUUID } from '../utils/isUUID';
 import { tableFunc } from '../utils/tableFunc';
 import { ATTACHMENT_PREFIX } from './clearAttachmentHref';
 import { DOCUMENT_EXT_LIST, IMAGE_EXT_LIST, OUTPUT_SUFFIX } from './extensions';
 import { mapJSON } from './mapJSON';
 import { mergePages } from './mergePages';
-import type { TransformationOptions } from './TransformationOptions';
+import { type TransformationOptions } from './TransformationOptions';
 import { transformAttachmentLink } from './transformAttachmentLink';
 import { transformDocument } from './transformDocument';
 import { transformHTML } from './transformHTML';

package/mobile/src/data/CommonData.ts

@@ -1,5 +1,5 @@
-import type { AspectsProps } from '../model/AspectsProps';
-import type { LogoType } from '../model/LogoType';
+import { type AspectsProps } from '../model/AspectsProps';
+import { type LogoType } from '../model/LogoType';
 
 export type SearchHeaderProps = AspectsProps & { placeholder: string; ariaLabel: string };
 

package/mobile/src/data/NavigationData.ts

@@ -1,5 +1,5 @@
-import type { AspectsDef } from '../model/AspectsProps';
-import type { LinkProps } from '../model/LinkProps';
+import { type AspectsDef } from '../model/AspectsProps';
+import { type LinkProps } from '../model/LinkProps';
 import { type IconProps } from '../model/Picture';
 
 export interface NavigationLinkProps extends LinkProps {

package/mobile/src/ui-kit/Button/Button.tsx

@@ -3,7 +3,7 @@ import { type ButtonVersion } from '../../model/ButtonVersion';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
 import { type ControlStateProps } from '../ControlStateProps';
-import type { PreventableEvent } from '../PreventableEvent';
+import { type PreventableEvent } from '../PreventableEvent';
 import { useButton } from './useButton';
 
 const buttonStyleMap: Record<ButtonVersion, string> = {

package/mobile/src/ui-kit/Calculator/CalculatorProps.ts

@@ -2,6 +2,7 @@ import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type Footnote } from '../../model/Footnote';
 import { type TitleProps } from '../../model/HeadlineType';
 import { type ButtonsSectionContent } from '../LinkButton/ButtonsSectionContent';
+import { type TextColor } from '../Text/TextProps';
 
 export type CalcValueProps = {
   moneyValue: number;
@@ -21,7 +22,18 @@ export type RateProps = {
   rate: number;
 };
 
-export type CalculatorProps = {
+export interface CalcCurrencyProps {
+  className?: string;
+  title?: string;
+  value?: number | string;
+  fractionDigits?: number;
+  fixed?: boolean;
+  prefix?: string;
+  postfix?: string;
+  color?: TextColor;
+}
+
+export type CalcSourceProps = {
   /** @title Данные калькулятора */
   calcSource?: JSONRefObject;
 };
@@ -33,4 +45,4 @@ export interface CommonDefaultParams {
   period?: number;
 }
 
-export type CommonCalculatorProps = TitleProps & Footnote & ButtonsSectionContent & CalculatorProps;
+export type CommonCalculatorProps = TitleProps & Footnote & ButtonsSectionContent & CalcSourceProps;

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

@@ -1,8 +1,5 @@
 export const CalculatorStyle = {
-  wrapper: 'flex flex-col justify-between @4xl:flex-row',
-  gapM: 'gap-x-s gap-y-7 @xl:gap-y-4xl',
-  gapL: 'gap-7 @xl:gap-y-4xl',
-  input:
-    'flex flex-col lg:max-w-80 gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0',
-  result: 'flex flex-col gap-y-xl',
+  wrapper: 'flex flex-col justify-between @4xl:flex-row gap-x-4xl gap-y-7 @xl:gap-y-4xl',
+  input: 'flex flex-col lg:max-w-80 lg:w-1/2 gap-2xl',
+  result: 'flex flex-col gap-y-xl min-w-60',
 };

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

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
+import { type CalcCurrencyProps } from './CalculatorProps';
+import { FormatValue } from './FormatedValue';
+
+const CalculatorValueStyle = 'flex justify-between @xl:flex-col';
+
+export const CalculatorValue = JSX<CalcCurrencyProps>(
+  ({ className, title, value, color = 'text-secondary-text', ...rest }) => (
+    <div className={style(CalculatorValueStyle, className)}>
+      {title ? (
+        <Text size="text-l" font="font-light" color={color}>
+          {title}
+        </Text>
+      ) : null}
+      {value ? <FormatValue value={value} {...rest} /> : <Text size="text-h3">-</Text>}
+    </div>
+  ),
+);

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

@@ -0,0 +1,16 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../Text/Text';
+import { type CalcCurrencyProps } from './CalculatorProps';
+
+export const FormatValue = JSX<CalcCurrencyProps>(
+  ({ value, fractionDigits, fixed, prefix, postfix }) => (
+    <Text size="text-h3">
+      {typeof value === 'number'
+        ? [prefix, toLocalNumberFormat(fractionDigits, { fixed })(value), postfix]
+            .filter(Boolean)
+            .join(' ')
+        : value}
+    </Text>
+  ),
+);

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

@@ -1,5 +1,5 @@
 import { type VNode } from '../../model/VNode';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { CalculatorValue } from './CalculatorValue';
 import { Rate, type RateProps } from './Rate';
 import { UnknownRate, type UnknownRateProps } from './UnknownRate';
 
@@ -32,7 +32,7 @@ export const renderRate = ({
           {...rest}
         />
       </div>
-      <CalculatorValueBlock
+      <CalculatorValue
         className="@xl:hidden"
         title={title}
         value={rate}

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -3,7 +3,7 @@ import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { LinkButton } from '../LinkButton/LinkButton';
 import { Text } from '../Text/Text';
-import type { TextColor } from '../Text/TextProps';
+import { type TextColor } from '../Text/TextProps';
 import { linkButtonVersion } from './linkButtonVersion';
 
 export interface InnerTableHeaderProps {

package/mobile/src/ui-kit/Select/Select.tsx

@@ -65,7 +65,7 @@ export const Select = JSX<SelectProps>(
         <div className={style('relative', hasOpen ? 'z-20' : 'z-10')} ref={inputRef}>
           <div
             className={style(
-              'h-14 [&>*]:p-m pr-8 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden',
+              'h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden',
               getStyle(isBorder, valid, isDisabled),
             )}
             onClick={hasOpen ? handleClose : open}
@@ -86,7 +86,7 @@ export const Select = JSX<SelectProps>(
 
 const renderIcon = (isOpen: boolean, iconVersion?: IconVersion) => (
   <Icon
-    className={style('absolute right-3 flex self-center', { 'rotate-180': !isOpen })}
+    className={style('absolute right-0 flex self-center', { 'rotate-180': !isOpen })}
     iconVersion={iconVersion}
     name="ArrowUpIcon"
     width="16"

package/mobile/src/ui-kit/SwipeListControl/NavButtonProp.ts

@@ -1,5 +1,5 @@
 import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
-import type { SwipeListControlType } from './SwipeListControlContent';
+import { type SwipeListControlType } from './SwipeListControlContent';
 
 export interface DotProp {
   activeIndex?: number;

package/mobile/src/ui-kit/SwipeListControl/renderDotButton.tsx

@@ -1,6 +1,6 @@
 import { style } from '../../utils/style';
-import type { DotProp } from './NavButtonProp';
-import type { SwipeListControlType } from './SwipeListControlContent';
+import { type DotProp } from './NavButtonProp';
+import { type SwipeListControlType } from './SwipeListControlContent';
 
 const activeDotStyles: Record<SwipeListControlType, string> = {
   'horizontal-list': 'w-6',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.539",
+  "version": "0.14.541",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -210,7 +210,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "67 kB",
+      "limit": "68 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/ApplicationForm/AddressBranchField.tsx

@@ -3,7 +3,7 @@ import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useBranches } from '../../hooks/useBranches';
 import { useBranchesByRegions } from '../../hooks/useBranchesByRegions';
 import { SelectControl } from '../../ui-kit/Select/SelectControl';
-import type { CustomFieldProps } from './CustomFieldProps';
+import { type CustomFieldProps } from './CustomFieldProps';
 import { validatorObj } from './getObjectValidator';
 import { getValidation } from './getValidation';
 

package/src/components/CalculatorBonus/CalculatorBonus.tsx

@@ -2,7 +2,7 @@ import { type JSONRefObject } from '../../data/JSONRefObject';
 import { useForm } from '../../hooks/useForm';
 import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
 import { CalculatorStyle } from '../../ui-kit/Calculator/CalculatorStyle';
-import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { CalculatorValue } from '../../ui-kit/Calculator/CalculatorValue';
 import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
 import { renderRate } from '../../ui-kit/Calculator/renderRate';
 import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
@@ -32,7 +32,7 @@ export const CalculatorBonus = UniBlock<CalculatorBonusProps>(
 
     return (
       <CalculatorLayout className={className} title={title} {...rest}>
-        <section className={style(CalculatorStyle.wrapper, CalculatorStyle.gapM, className)}>
+        <section className={style(CalculatorStyle.wrapper, className)}>
           <div className={CalculatorStyle.input}>
             {renderWantedSumInput({
               title: 'Сумма покупок в категории путешествия, ₽',
@@ -65,11 +65,7 @@ export const CalculatorBonus = UniBlock<CalculatorBonusProps>(
           </div>
           <div className={CalculatorStyle.result}>
             {yearBonus >= 0 ? (
-              <CalculatorValueBlock
-                title="Баллов за год"
-                value={yearBonus}
-                color="text-primary-text"
-              />
+              <CalculatorValue title="Баллов за год" value={yearBonus} color="text-primary-text" />
             ) : null}
             {renderButtonsSection(buttons, { isVertical: true })}
             {renderFootnote(footnote)}

package/src/components/CalculatorBusinessDeposit/CalculatorBusinessDeposit.tsx

@@ -57,7 +57,7 @@ export const CalculatorBusinessDeposit = UniBlock<CalculatorBusinessDepositProp>
 
     return (
       <CalculatorLayout className={className} title={title} {...rest}>
-        <section className={style(CalculatorStyle.wrapper, CalculatorStyle.gapM, className)}>
+        <section className={style(CalculatorStyle.wrapper, className)}>
           <div className={CalculatorStyle.input}>
             {renderWantedSumInput({
               title: 'Сумма, ₽',

package/src/components/CalculatorBusinessDeposit/CalculatorBusinessDepositContent.ts

@@ -1,7 +1,7 @@
 import { type Footnote } from '../../model/Footnote';
 import { type TitleProps } from '../../model/HeadlineType';
 import {
-  type CalculatorProps,
+  type CalcSourceProps,
   type CommonDefaultParams,
 } from '../../ui-kit/Calculator/CalculatorProps';
 import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
@@ -35,7 +35,7 @@ export type EmptyRateParams = {
  */
 export type RateParamsDef = EmptyRateParams | ULRateDef | IPRateDef;
 
-export type CommonCalculatorProps = Footnote & ButtonsSectionContent & CalculatorProps;
+export type CommonCalculatorProps = Footnote & ButtonsSectionContent & CalcSourceProps;
 
 export interface BusinessDepositDefaultParams extends CommonDefaultParams {
   /** @title Пополнение */

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

@@ -0,0 +1,62 @@
+import '../../setup-fixture';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { CalculatorCredit } from './CalculatorCredit';
+
+const buttons: LinkButtonContent[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Отправить заявку',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробные условия',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+const calculator = {
+  className: 'col-span-12',
+  title: 'Калькулятор кредита',
+  description: '17,525 - 28,400%',
+  buttons: buttons,
+  footnote:
+    'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+  calcSource: {
+    $ref: '/wcms-resources/credit-calculator-data.json',
+  },
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CalculatorCredit
+        {...calculator}
+        paramsViewSettings={{
+          isShowSalaryClient: true,
+          isShowStateEmployee: true,
+          isShowPensionClient: true,
+          isShowInsurance: true,
+        }}
+        defaultParams={{
+          sum: 100000,
+          period: 16,
+          isEnableInsurance: true,
+        }}
+      />
+    </div>
+  ),
+  minRate: (
+    <div className="container grid grid-cols-12">
+      <CalculatorCredit
+        {...calculator}
+        paramsViewSettings={{
+          isShowSalaryClient: true,
+          isShowInsurance: true,
+        }}
+      />
+    </div>
+  ),
+};

package/src/components/CalculatorCredit/CalculatorCredit.tsx

@@ -5,7 +5,7 @@ import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
 import { DEFAULT_MONTHS } from '../../ui-kit/Calculator/calculatorConstants';
 import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
 import { CalculatorStyle } from '../../ui-kit/Calculator/CalculatorStyle';
-import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { CalculatorValue } from '../../ui-kit/Calculator/CalculatorValue';
 import { getDefaultParamsMin } from '../../ui-kit/Calculator/getDefaultParams';
 import {
   getMoneyDefaultValue,
@@ -102,7 +102,7 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
 
     return (
       <CalculatorLayout className={className} title={title} {...rest}>
-        <section className={style(CalculatorStyle.wrapper, CalculatorStyle.gapL, className)}>
+        <section className={style(CalculatorStyle.wrapper, className)}>
           <div className={CalculatorStyle.input}>
             {renderWantedSumInput({
               title: 'Сумма кредита, ₽',
@@ -123,7 +123,14 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
             <div className="sm:hidden">{paymentTypeElement}</div>
           </div>
           <div className={style(CalculatorStyle.result, '@4xl:w-1/2')}>
-            <CalculatorValueBlock
+            <CalculatorValue title="Полная стоимость кредита" value={calcSource?.totalLoanCost} />
+            <CalculatorValue
+              title="Ставка"
+              value={calcParams?.rate}
+              fractionDigits={2}
+              postfix="%"
+            />
+            <CalculatorValue
               title="Ежемесячный платёж"
               value={calcParams.monthlyPayment}
               postfix="₽"

package/src/components/CalculatorCredit/CalculatorCreditContent.ts

@@ -29,6 +29,7 @@ export interface CreditCalculatorParams
 export type CreditCalculatorData = {
   rateRows?: CreditCalculatorSourceBookParams[];
   limitRows?: CreditCalculatorSourceBookParams[];
+  totalLoanCost?: string;
 };
 
 export interface CreditCalculatorParamsViewSettingsDefault {