@redneckz/wildless-cms-uni-blocks 0.7.4 → 0.7.6

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { SVG } from '../SVG';
 import type { CheckboxProps } from './CheckboxProps';
 
@@ -11,33 +12,40 @@ const CHECK_PATHS = [
   },
 ];
 
-export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio, onChange }) => {
-  return (
-    <div className={className}>
-      <label className="flex items-center relative cursor-pointer group/box">
-        <input
-          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover/box:border-primary-hover
-        ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
-        ${checked ? 'border-black' : 'border-gray'}
-        checked:border-primary-main m-0`}
-          type="checkbox"
-          onChange={(e) => onChange && onChange(e.target.checked as boolean)}
-          checked={checked}
-        />
-        {isRadio ? (
-          <div className="left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block"></div>
-        ) : (
-          <SVG
-            paths={CHECK_PATHS}
-            className="hidden absolute left-1 ml-px peer-checked:block"
-            width="11"
-            height="9"
-            fill="white"
-            viewBox="0 0 11 9"
+export const Checkbox = JSX<CheckboxProps>(
+  ({ className, text, checked, disabled, isRadio, onChange }) => {
+    return (
+      <div className={className}>
+        <label className="flex items-center relative cursor-pointer group/box">
+          <input
+            className={style(
+              'peer appearance-none w-5 h-5 border-solid cursor-pointer checked:border-primary-main m-0',
+              isRadio
+                ? 'rounded-full border-2'
+                : 'rounded checked:bg-primary-main disabled:bg-main-disabled border',
+              checked ? 'border-black' : 'border-gray',
+              disabled ? '' : 'group-hover/box:border-primary-hover',
+            )}
+            type="checkbox"
+            onChange={(e) => onChange && onChange(e.target.checked as boolean)}
+            checked={checked}
+            disabled={disabled}
           />
-        )}
-        {text ? <span className="font-sans ml-3 text-l-light">{text}</span> : null}
-      </label>
-    </div>
-  );
-});
+          {isRadio ? (
+            <div className="left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block" />
+          ) : (
+            <SVG
+              paths={CHECK_PATHS}
+              className="hidden absolute left-1 ml-px peer-checked:block"
+              width="11"
+              height="9"
+              fill="white"
+              viewBox="0 0 11 9"
+            />
+          )}
+          {text ? <span className="font-sans ml-3 text-l-light">{text}</span> : null}
+        </label>
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -1,6 +1,7 @@
 export interface CheckboxProps {
   text?: string;
   checked?: boolean;
+  disabled?: boolean;
   className?: string;
   isRadio?: boolean;
   onChange?: (value: boolean) => void;

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

@@ -3,7 +3,8 @@ import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { mapChildren } from '../../utils/mapChildren';
 import { style } from '../../utils/style';
-import type { SwipeContainerProps, SwipeListControlType } from './SwipeListControlProps';
+import type { SwipeListControlType } from './SwipeListControlContent';
+import type { SwipeContainerProps } from './SwipeListControlProps';
 import { SwipeListItem } from './SwipeListItem';
 
 type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;

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

@@ -0,0 +1,17 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+
+/**
+ * @title Вид
+ * @enumNames ["Горизонтальный", "Вертикальный"]
+ */
+export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+
+/**
+ * @title Swipe-контроллер
+ */
+export interface SwipeListControlContent {
+  /** @title Точки-индикаторы */
+  showDots?: boolean;
+  listType?: SwipeListControlType;
+  version?: BlockVersion;
+}

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { SwipeListControlType } from './SwipeListControlProps';
+import type { SwipeListControlType } from './SwipeListControlContent';
 
 const containerStyles: Record<SwipeListControlType, string> = {
   'horizontal-list': 'mx-auto mt-5 w-fit',
@@ -11,7 +11,8 @@ const activeDotStyles: Record<SwipeListControlType, string> = {
   'vertical-list': 'h-6',
 };
 
-const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300';
+const dotStyle =
+  'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white';
 
 const inactiveDotStyle = 'w-2 h-2 opacity-30';
 

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

@@ -1,8 +1,4 @@
-/**
- * @title Вид
- * @enumNames ["Горизонтальный", "Вертикальный"]
- */
-export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+import type { SwipeListControlContent } from './SwipeListControlContent';
 
 /**
  * @title Контейнер
@@ -17,11 +13,8 @@ export interface SwipeContainerProps {
 /**
  * @title Swipe-контроллер
  */
-export interface SwipeListControlProps extends SwipeContainerProps {
+export interface SwipeListControlProps extends SwipeListControlContent, SwipeContainerProps {
   className?: string;
-  /** @title Точки-индикаторы */
-  showDots?: boolean;
   /** @hidden */
   onVisibleIndicesChange?: (indices: number[]) => void;
-  listType?: SwipeListControlType;
 }

package/mobile/src/utils/addSpacesBetweenNumbers.ts

@@ -1,2 +1,2 @@
 export const addSpacesBetweenNumbers = (number: number) =>
-  new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
+  new Intl.NumberFormat('ru-RU', {}).format(number);

package/package.json

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

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { style } from '../../utils/style';
 import type { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
@@ -27,7 +28,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
       useBonusCalculatorParams(userInputParams, sourceBookDir);
 
     return (
-      <section className={className}>
+      <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
           {renderWantedSumInput(
             'Сумма покупок в категории путешествия, ₽',

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -0,0 +1,133 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import type { BusinessDepositCalculatorProps } from './CalculatorContent';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { BUSINESS_DEFAULT_DAYS, BUSINESS_DEFAULT_SUM } from './constants';
+import { Rate } from './Rate';
+import { renderDaysInput } from './renderDaysInput';
+import { renderFootnote } from './renderFootnote';
+import { renderInterestPayment } from './renderInterestPayment';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { UnknownRate } from './UnknownRate';
+import {
+  BusinessDepositCalculatorParams,
+  useBusinessDepositCalculatorParams,
+} from './useBusinessDepositCalculatorParams';
+
+export interface BusinessDepositCalculatorProp extends BusinessDepositCalculatorProps {
+  className?: string;
+}
+
+export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
+  ({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
+    const [moneyValue, setMoneyValue] = useState(BUSINESS_DEFAULT_SUM);
+    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
+    const [daysValue, setDaysValue] = useState(BUSINESS_DEFAULT_DAYS);
+    const handleDaysValue = useCallback((_: number) => setDaysValue(_), []);
+    const [isReplenished, toggleIsReplenished] = useState(false);
+    const handleIsReplenished = useCallback((_: boolean) => toggleIsReplenished(_), []);
+    const [isPartialWithdrawal, toggleIsPartialWithdrawal] = useState(false);
+    const handleIsPartialWithdrawal = useCallback((_: boolean) => toggleIsPartialWithdrawal(_), []);
+    const [isSmallBusiness, toggleIsSmallBusiness] = useState(false);
+    const handleIsSmallBusiness = useCallback((_: boolean) => toggleIsSmallBusiness(_), []);
+    const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+    const handleIsMonthlyInterestPayment = useCallback(
+      (_: boolean) => toggleIsMonthlyInterestPayment(_),
+      [],
+    );
+    const userInputParams = {
+      moneyValue,
+      daysValue,
+      isReplenished,
+      isPartialWithdrawal,
+      isSmallBusiness,
+      isMonthlyInterestPayment,
+    };
+
+    const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
+    const { income, finalSum, rate, depositeName } = calculatorParams;
+
+    return (
+      <section className={className}>
+        <div className="flex justify-between">
+          <div className="w-[486px]">
+            {renderWantedSumInput('Сумма вклада, ₽', calculatorParams, handleMoneyValue)}
+            {renderDaysInput('Срок вклада, дни', calculatorParams, handleDaysValue)}
+            <div className="mt-7 flex justify-between">
+              {renderBusinessDepositParamsForm({
+                ...calculatorParams,
+                handleIsReplenished,
+                handleIsPartialWithdrawal,
+                handleIsSmallBusiness,
+              })}
+              {renderInterestPayment(
+                isMonthlyInterestPayment,
+                handleIsMonthlyInterestPayment,
+                'Выплата процентов',
+              )}
+            </div>
+          </div>
+          {rate ? (
+            <Rate
+              rate={rate}
+              depositeName={depositeName}
+              isShowDepositeName={isShowDepositeName}
+              rateBlockClassName="tracking-[-25px]"
+              unit="%"
+            />
+          ) : (
+            <UnknownRate />
+          )}
+
+          <div className="w-full max-w-[350px]">
+            <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
+            <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
+            {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
+            <div className="mt-7">{renderFootnote(footnote)}</div>
+          </div>
+        </div>
+        <div className="mt-5">{renderFootnote(bottomFootnote)}</div>
+      </section>
+    );
+  },
+);
+
+interface BusinessDepositParamsFormProps extends BusinessDepositCalculatorParams {
+  handleIsReplenished?: (value: boolean) => void;
+  handleIsPartialWithdrawal?: (value: boolean) => void;
+  handleIsSmallBusiness?: (value: boolean) => void;
+}
+
+const renderBusinessDepositParamsForm = ({
+  isDisabledOperatingDeposit,
+  isReplenished,
+  isPartialWithdrawal,
+  isSmallBusiness,
+  handleIsReplenished,
+  handleIsPartialWithdrawal,
+  handleIsSmallBusiness,
+}: BusinessDepositParamsFormProps) => (
+  <div>
+    <Checkbox
+      text="Пополнение"
+      disabled={isDisabledOperatingDeposit}
+      checked={isReplenished}
+      onChange={handleIsReplenished}
+    />
+    <Checkbox
+      className="mt-3"
+      disabled={isDisabledOperatingDeposit}
+      text="Частичное снятие"
+      checked={isPartialWithdrawal}
+      onChange={handleIsPartialWithdrawal}
+    />
+    <Checkbox
+      className="mt-3"
+      text="Являюсь малым предприятием"
+      checked={isSmallBusiness}
+      onChange={handleIsSmallBusiness}
+    />
+  </div>
+);

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

@@ -4,6 +4,7 @@ import { Calculator } from './Calculator';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type {
   BonusCalculatorParamsDef,
+  BusinessDepositCalculatorParamsDef,
   CreditCalculatorParamsDef,
   DepositCalculatorParamsDef,
 } from './CalculatorContent';
@@ -26,6 +27,9 @@ const buttons: ButtonWithIconProps[] = [
 const footnote =
   'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка. ';
 
+const bottomFootnote =
+  'При сумме свыше 500 000 000 ₽ вы можете обратится в офис за индивидуальными условиями по вкладу';
+
 const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
   calcType: 'CreditCalculatorForm',
   buttons: buttons,
@@ -38,6 +42,14 @@ const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
   footnote,
 };
 
+const BUSINESS_DEPOSIT_CALCULATOR_BLOCK: BusinessDepositCalculatorParamsDef = {
+  calcType: 'BusinessDepositCalculatorForm',
+  buttons: buttons,
+  isShowDepositeName: true,
+  footnote,
+  bottomFootnote,
+};
+
 const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
   title: 'Обменивайте баллы на путешествия',
   calcType: 'BonusCalculatorForm',
@@ -94,4 +106,21 @@ export default {
       />
     </div>
   ),
+  business: (
+    <div className="container grid grid-cols-12">
+      <Calculator
+        className="col-span-12"
+        calculatorTabs={[
+          {
+            nav: {
+              title: 'Кредит на любые цели',
+              description: 'Ставка от 5,5% до 5 лет',
+              icon: { icon: 'CalendarIcon' },
+            },
+            calculatorBlock: BUSINESS_DEPOSIT_CALCULATOR_BLOCK,
+          },
+        ]}
+      />
+    </div>
+  ),
 };

package/src/components/Calculator/CalculatorContent.ts

@@ -11,6 +11,13 @@ export type CommonCalculatorProps = Footnote & {
   sourceBookDir?: string;
 };
 
+export interface BusinessDepositCalculatorProps extends CommonCalculatorProps {
+  /** @title Сноска снизу блока */
+  bottomFootnote?: string;
+  /** @title Показывать название депозита */
+  isShowDepositeName?: boolean;
+}
+
 /**
  * TODO: данные из справочника
  **/
@@ -61,6 +68,16 @@ export type DepositCalculatorParamsDef = TitleProps &
     calcType: 'DepositCalculatorForm';
   };
 
+/**
+ * @title Калькулятор вкладов - бизнес
+ * @default {"calcType": "BusinessDepositCalculatorForm"}
+ */
+export type BusinessDepositCalculatorParamsDef = TitleProps &
+  DepositCalculatorParams &
+  BusinessDepositCalculatorProps & {
+    calcType: 'BusinessDepositCalculatorForm';
+  };
+
 /**
  * @title Калькулятор бонусов
  * @default {"calcType": "BonusCalculatorForm"}
@@ -77,6 +94,7 @@ export type CalculatorBlockDef =
   | EmptyOption
   | CreditCalculatorParamsDef
   | DepositCalculatorParamsDef
+  | BusinessDepositCalculatorParamsDef
   | BonusCalculatorParamsDef;
 
 /**

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { style } from '../../utils/style';
 
 export interface CalculatorValueBlockProps {
   title?: string;
@@ -11,13 +13,23 @@ export interface CalculatorValueBlockProps {
 
 export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => (
-    <div className={`mb-7 ${className}`}>
-      {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
+    <div className={style('mb-7', className)}>
+      {title ? (
+        <Text size="text-l-light" color="text-secondary-text">
+          {title}
+        </Text>
+      ) : null}
       {value ? (
-        <div className="text-h3">
-          {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
+        <div>
+          <Text size="text-h3">
+            {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
+          </Text>
         </div>
-      ) : null}
+      ) : (
+        <div>
+          <Text size="text-h3">-</Text>
+        </div>
+      )}
     </div>
   ),
 );

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { style } from '../../utils/style';
 import type { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
@@ -51,7 +52,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
 
     return (
-      <section className={className}>
+      <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
           {renderWantedSumInput(
             'Сумма кредита, ₽',

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -3,12 +3,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { style } from '../../utils/style';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
+import { renderInterestPayment } from './renderInterestPayment';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useDepositCalculatorParams } from './useDepositCalculatorParams';
@@ -17,26 +18,16 @@ export interface DepositCalculatorProp extends DepositCalculatorParams, CommonCa
   className?: string;
 }
 
-const EVERY_MONTH = 'everyMonth';
-const AT_END_TERM = 'atEndTerm';
-
-const depositTypeItems = [
-  {
-    id: EVERY_MONTH,
-    text: 'Ежемесячно',
-  },
-  {
-    id: AT_END_TERM,
-    text: 'В конце срока',
-  },
-];
-
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
   ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
     const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+    const handleIsMonthlyInterestPayment = useCallback(
+      (_: boolean) => toggleIsMonthlyInterestPayment(_),
+      [],
+    );
     const userInputParams = {
       moneyValue,
       monthsValue,
@@ -48,7 +39,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
     const { income, finalSum, rate } = calculatorParams;
 
     return (
-      <section className={className}>
+      <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
           {renderWantedSumInput(
             'Сумма вклада, ₽',
@@ -73,11 +64,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {finalSum ? (
             <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           ) : null}
-          <RadioButtonGroup
-            items={depositTypeItems}
-            checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
-            onChange={(text: string) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH)}
-          />
+          {renderInterestPayment(isMonthlyInterestPayment, handleIsMonthlyInterestPayment)}
           {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>

package/src/components/Calculator/EmbeddableCalcBlocks.tsx

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

package/src/components/Calculator/Rate.tsx

@@ -1,22 +1,44 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 
 export interface RateProps {
   rate: number;
   title?: string;
   unit?: string;
+  depositeName?: string;
+  isShowDepositeName?: boolean;
   rateBlockClassName?: string;
 }
 
-export const Rate = JSX<RateProps>(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (
-  <div>
-    <div className="text-l-light text-secondary-text">{title}</div>
-    <div className="flex justify-start">
-      <span
-        className={`block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
-      >
-        {String(rate).replace('.', ',')}
-      </span>
-      {unit ? <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span> : ''}
+export const Rate = JSX<RateProps>(
+  ({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName }) => (
+    <div>
+      <Text size="text-l-light" color="text-secondary-text">
+        {title}
+      </Text>
+      <div className="relative">
+        <div className="flex justify-start">
+          <span
+            className={style(
+              'block gradient-color-text font-mohave text-title-huge pr-6 -mt-4',
+              rateBlockClassName,
+            )}
+          >
+            {String(rate).replace('.', ',')}
+          </span>
+          {unit ? (
+            <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span>
+          ) : (
+            ''
+          )}
+        </div>
+        {depositeName && isShowDepositeName ? (
+          <div className="absolute bottom-7 w-full text-center whitespace-nowrap">
+            {depositeName}
+          </div>
+        ) : null}
+      </div>
     </div>
-  </div>
-));
+  ),
+);

package/src/components/Calculator/UnknownRate.tsx

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface UnknownRateProps {
+  title?: string;
+}
+
+export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) => (
+  <div>
+    <Text size="text-l-light" color="text-secondary-text">
+      {title}
+    </Text>
+    <div className="mt-1 pt-1 pl-5 pb-1.5">
+      <Img image={{ icon: 'PercentIcon' }} width="90" height="85" asSVG />
+    </div>
+    <div className="w-[250px] mt-3.5">
+      <Paragraph size="text-xl-light" color="text-primary-text">
+        Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
+      </Paragraph>
+    </div>
+  </div>
+));