@redneckz/wildless-cms-uni-blocks 0.13.6 → 0.13.8

package/mobile/src/components/MortgageFiltration/MortgageFiltrationContent.ts

@@ -2,7 +2,7 @@ import type {
   BaseFiltrationInnerContent,
   StringArray,
 } from '../../ui-kit/BaseFiltration/BaseFiltrationContent';
-import type { HotFilterRecord } from './HotFilterRecord';
+import type { HotFilterBase } from '../../ui-kit/BaseFiltration/HotFilterBase';
 
 export type MortgageFiltrationSchema = {
   /** @title Тип недвижимости */
@@ -15,14 +15,18 @@ export type MortgageFiltrationSchema = {
   extraOptions?: StringArray;
 };
 
-/**
- * @title Кнопка фильтрации
- */
-export interface HotFilterButton {
-  /** @title Текст */
-  text?: string;
+export interface MortgageFiltrationHotFilter extends HotFilterBase {
   /** @title Применяемые фильтры */
-  filter?: HotFilterRecord;
+  filter?: {
+    /** @title Тип недвижимости */
+    propertyType?: string[];
+    /** @title Этап строительства */
+    stage?: string[];
+    /** @title Категории */
+    categories?: string[];
+    /** @title Дополнительно */
+    extraOptions?: string[];
+  };
 }
 
 /**
@@ -32,5 +36,5 @@ export interface MortgageFiltrationContent extends BaseFiltrationInnerContent {
   /** @title Параметры фильтрации */
   filtrationSchema?: MortgageFiltrationSchema;
   /** @title Горячие фильтры */
-  hotFilters?: HotFilterButton[];
+  hotFilters?: MortgageFiltrationHotFilter[];
 }

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

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
+import type { TextColor } from '../Text/TextProps';
+
+interface BadgeProps {
+  count?: number;
+  version?: 'primary' | 'secondary';
+}
+
+const badgeBgStyleMap: Record<string, string> = {
+  primary: 'bg-white/30',
+  secondary: 'bg-main-divider',
+};
+
+const badgeTextColorStyleMap: Record<string, TextColor> = {
+  primary: 'text-white',
+  secondary: 'text-secondary-text',
+};
+
+export const Badge = JSX<BadgeProps>(({ count, version = 'secondary' }) => {
+  return (
+    <div
+      className={style(
+        'w-6 h-6 rounded-full flex items-center justify-center',
+        badgeBgStyleMap[version],
+      )}
+    >
+      <Text size="text-xs" color={badgeTextColorStyleMap[version]}>
+        {count}
+      </Text>
+    </div>
+  );
+});

package/mobile/src/ui-kit/BaseFiltration/BaseFiltrationInner.tsx

@@ -8,8 +8,7 @@ import { checkShouldRenderBlock } from '../BaseFiltration/checkShouldRenderBlock
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { Foldable } from '../Foldable/Foldable';
 import { FoldableSection } from '../Foldable/FoldableSection';
-import { Paragraph } from '../Paragraph/Paragraph';
-import { Text } from '../Text/Text';
+import { Headline } from '../../components/Headline/Headline';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
@@ -34,17 +33,14 @@ export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
         <div className={style(blocksToRender.length ? 'hidden' : 'block')}>
           {notFound ? renderNotFound(notFound) : null}
         </div>
-        <div className={style(blocksToRender.length ? '' : 'hidden')}>
-          <div className={style('mb-2xs', resultsGridStyle)}>
+        <div className={style('space-y-2xs', blocksToRender.length ? '' : 'hidden')}>
+          <div className={style(resultsGridStyle)}>
             {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
           </div>
           <Foldable
             renderFoldableSection={({ isUnfolded }) => {
               return (
-                <FoldableSection
-                  className={style(resultsGridStyle, isUnfolded ? 'mb-2xs' : '')}
-                  isUnfolded={isUnfolded}
-                >
+                <FoldableSection className={style(resultsGridStyle)} isUnfolded={isUnfolded}>
                   {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}
                 </FoldableSection>
               );
@@ -69,18 +65,7 @@ export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
 function renderNotFound({ title, description }: NotFound) {
   return (
     <div className="bg-white py-20">
-      {title ? (
-        <div className="mb-xs">
-          <Paragraph align="text-center">
-            <Text size="text-h4">{title}</Text>
-          </Paragraph>
-        </div>
-      ) : null}
-      {description ? (
-        <Paragraph size="text-xl" font="font-light" align="text-center">
-          {description}
-        </Paragraph>
-      ) : null}
+      <Headline title={title} description={description} headlineVersion="S" isEmbedded={true} />
     </div>
   );
 }

package/mobile/src/ui-kit/BaseFiltration/HotFilterBase.ts

@@ -0,0 +1,7 @@
+/**
+ * @title Кнопка фильтрации
+ */
+export interface HotFilterBase {
+  /** @title Текст */
+  text?: string;
+}

package/mobile/src/ui-kit/BaseFiltration/getBadgeCount.ts

@@ -0,0 +1,6 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+import { checkShouldRenderBlock } from '../../ui-kit/BaseFiltration/checkShouldRenderBlock';
+import type { BaseFilter } from './useHotFilters';
+
+export const getBadgeCount = (blocks: BlockDef[] = [], filter: BaseFilter = {}) =>
+  blocks.filter(({ content = {} }) => checkShouldRenderBlock(filter, content)).length;

package/mobile/src/ui-kit/BaseFiltration/hotFilterRecordCmp.ts

@@ -0,0 +1,3 @@
+import { arrCmp, combineBoolCmps, objCmp, scalarCmp } from '../../utils/BoolComparator';
+
+export const hotFilterRecordCmp = objCmp<string[]>(combineBoolCmps(scalarCmp, arrCmp()));

package/mobile/src/ui-kit/BaseFiltration/renderFiltrationForm.tsx

@@ -29,7 +29,7 @@ export const renderFiltrationForm = ({
   resetButton,
   children,
 }: RenderFiltrationFormProps) => (
-  <form className="flex justify-between bg-white p-4xl mb-2xs">
+  <form className="flex justify-between bg-white p-4xl">
     <div className="flex gap-5xl">
       {children}
       {Object.entries(filtrationSchema).map(renderFormItem(field))}

package/mobile/src/ui-kit/BaseFiltration/useHotFilters.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { Badge } from '../Badge/Badge';
+import type { TabItemBase } from '../TabsControl/TabItem';
+import type { TabsControlProps } from '../TabsControl/TabsControlProps';
+import { getBadgeCount } from './getBadgeCount';
+import { HotFilterBase } from './HotFilterBase';
+import { hotFilterRecordCmp } from './hotFilterRecordCmp';
+
+const EMPTY_ARR = [];
+const EMPTY_OBJ = {};
+
+export type BaseFilter = HotFilterBase & {
+  filter?: Record<string, string[]>;
+};
+
+interface UseHotFiltersParams {
+  hotFilters?: BaseFilter[];
+  filtrationState?: Record<string, string[]>;
+  blocks?: BlockDef[];
+  onFiltrationStateChange: (_?: Record<string, string[]>) => void;
+}
+
+export const useHotFilters = ({
+  hotFilters = EMPTY_ARR,
+  filtrationState = EMPTY_OBJ,
+  blocks = EMPTY_ARR,
+  onFiltrationStateChange,
+}: UseHotFiltersParams): TabsControlProps => {
+  const activeItemIndex = useMemo(
+    () =>
+      Math.max(
+        0,
+        hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState)),
+      ),
+    [hotFilters, filtrationState],
+  );
+
+  const items: TabItemBase[] = useMemo(
+    () =>
+      hotFilters.map((_) => ({
+        text: _.text,
+        appendRight: (
+          <Badge
+            version={_ === hotFilters[activeItemIndex] ? 'primary' : 'secondary'}
+            count={getBadgeCount(blocks, _.filter)}
+          />
+        ),
+      })),
+    [hotFilters, blocks, activeItemIndex],
+  );
+
+  const handleChange = useCallback(
+    (_: TabItemBase) => {
+      onFiltrationStateChange(hotFilters[items.indexOf(_)].filter);
+    },
+    [hotFilters, items],
+  );
+
+  return {
+    value: items[activeItemIndex],
+    items: items,
+    onChange: handleChange,
+  };
+};

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

@@ -66,20 +66,11 @@ export const BaseTile = JSX<BaseTileProps>(
 const renderImageContainer = (
   image: VNode | undefined,
   { className, imageAlign }: { className?: string; imageAlign?: Align },
-) => {
-  //TODO Спорное решение
-  const fullWidth = image?.props?.image?.size?.width > 400;
-
-  return image ? (
+) =>
+  image ? (
     <div
-      className={style(
-        'flex-shrink-0',
-        fullWidth ? 'w-full @xl:w-auto' : '',
-        imageAlign && imageAlignmentMap[imageAlign],
-        className,
-      )}
+      className={style('md:flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className)}
     >
       {image}
     </div>
   ) : null;
-};

package/mobile/src/ui-kit/InputRange/renderRangeWithTicks.tsx

@@ -20,8 +20,9 @@ export function renderRangeWithTicks({
   onChange,
 }: RangeWithTicksProps) {
   const rangeValue = list.length ? list.indexOf(value) : value;
+  const rangeValueShift = rangeValue > min ? rangeValue - min : 0;
   const inputStyle = {
-    backgroundSize: `${(((rangeValue - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+    backgroundSize: `${((rangeValueShift * 100) / (max - min)).toFixed(2)}% 100%`,
   };
 
   return (

package/mobile/src/ui-kit/TabsControl/TabItem.tsx

@@ -2,18 +2,20 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
+import type { VNode } from '../../model/VNode';
 import { TabItemInner } from './TabItemInner';
 import type { TabsControlProps } from './TabsControlProps';
-
-export type TabItemBase = LinkProps;
+export interface TabItemBase extends LinkProps {
+  appendRight?: VNode;
+}
 
 export type TabType = 'default' | 'underlined' | 'rounded';
 
 export interface TabItemProps {
   item?: TabItemBase;
   isActive?: boolean;
-  onClick?: TabsControlProps['onChange'];
   type?: TabType;
+  onClick?: TabsControlProps['onChange'];
 }
 
 export const TabItem = JSX<TabItemProps>((props) =>

package/mobile/src/ui-kit/TabsControl/TabItemInner.tsx

@@ -37,7 +37,7 @@ export const TabItemInner = JSX<TabItemInnerProps>(
   ({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
     const Tag: any = tag;
 
-    const { text, ...link } = item;
+    const { text, appendRight, ...link } = item;
 
     return (
       <Tag
@@ -62,6 +62,7 @@ export const TabItemInner = JSX<TabItemInnerProps>(
           )}
         >
           <Text size="text-m">{text}</Text>
+          {appendRight ? <div className="ml-xs">{appendRight}</div> : null}
         </div>
       </Tag>
     );

package/package.json

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

package/src/components/Blocks.mobile.ts

@@ -1,6 +1,7 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { ApplicationForm } from './ApplicationForm/ApplicationForm';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
+import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { Calculator } from './Calculator/Calculator';
@@ -9,6 +10,7 @@ import { Carousel } from './Carousel/Carousel';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
+import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
@@ -27,6 +29,7 @@ import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
+import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo/RepresentativeOfficeInfo';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -40,6 +43,7 @@ import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 export const Blocks: BlocksRegistry = {
   ApplicationForm,
   BenefitsBlock,
+  Bonus,
   BonusBenefitsBlock,
   ButtonsBlock,
   Calculator,
@@ -48,6 +52,7 @@ export const Blocks: BlocksRegistry = {
   CarouselBankHistoryCard,
   CarouselCard,
   CarouselCatalogCard,
+  CarouselLinks,
   CarouselProductCard,
   CarouselProgramsCard,
   CarouselRecommendationCard,
@@ -66,6 +71,7 @@ export const Blocks: BlocksRegistry = {
   ProductBlock,
   ProductGallery,
   ProductTile,
+  RepresentativeOfficeInfo,
   RichTextBlock,
   RollupItem,
   SafeDepositRental,

package/src/components/Bonus/Bonus.tsx

@@ -4,7 +4,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
 
@@ -29,18 +28,13 @@ export const Bonus = JSX<BonusProps>(
                   className="space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m"
                 >
                   <div className="grow">
-                    {_?.title ? (
-                      <div className="mb-xs last:mb-0">
-                        <Text size="text-h4">{_.title}</Text>
-                      </div>
-                    ) : null}
-                    {_?.description ? (
-                      <div className="mb-text last:mb-0">
-                        <Paragraph size="text-xl" font="font-light">
-                          {_.description}
-                        </Paragraph>
-                      </div>
-                    ) : null}
+                    <Headline
+                      title={_?.title}
+                      description={_?.description}
+                      headlineVersion="S"
+                      isEmbedded={true}
+                      align="text-left"
+                    />
                   </div>
                   <div className="flex justify-center sm:justify-between sm:items-end">
                     <div className="hidden sm:block">{renderButtonsSection(_?.buttons)}</div>

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -1,21 +1,21 @@
 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 { BusinessDepositCalculatorProps } from './CalculatorContent';
-import { renderFootnote } from './renderFootnote';
-import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { BUSINESS_DEFAULT_DAYS, BUSINESS_DEFAULT_SUM } from './constants';
+import { renderDaysInput } from './renderDaysInput';
+import { renderFootnote } from './renderFootnote';
+import { renderInterestPayment } from './renderInterestPayment';
+import { renderRate } from './renderRate';
+import { renderWantedSumInput } from './renderWantedSumInput';
 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';
-import { style } from '../../utils/style';
 
 export interface BusinessDepositCalculatorProp extends BusinessDepositCalculatorProps {
   className?: string;
@@ -33,7 +33,7 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
     });
 
     const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
-    const { income, finalSum, rate, isShowUnknownRate, depositeName } = calculatorParams;
+    const { income, finalSum, rate, isUnavailableByTerm, depositeName } = calculatorParams;
 
     return (
       <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
@@ -65,7 +65,7 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
           rate,
           depositeName,
           isShowDepositeName,
-          isShowUnknownRate,
+          isUnavailableByTerm,
         })}
         <div className="flex flex-col gap-2xl sm:w-96">
           {renderDepositResults(finalSum, income)}

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -14,15 +14,15 @@ import {
   REFINANCING_DEFAULT_SUM,
   REFINANCING_OLD_DEFAULT_SUM,
 } from './constants';
-import { Rate } from './Rate';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
+import { renderPaymentType } from './renderPaymentType';
+import { renderRate } from './renderRate';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import {
   RefinancingCalculatorParams,
   useRefinancingCalculatorParams,
 } from './useRefinancingCalculatorParams';
-import { renderPaymentType } from './renderPaymentType';
 
 export interface RefinancingCalculatorProp extends RefinancingCalculatorProps {
   className?: string;
@@ -86,13 +86,10 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
               })
             : null}
         </div>
-        <Rate
-          title="Ставка"
-          rate={calculatorParams.rate}
-          fractionDigits={1}
-          rateBlockClassName="tracking-[-25px]"
-          unit="%"
-        />
+        {renderRate({
+          rate: calculatorParams.rate,
+          fractionDigits: 1,
+        })}
         <div className="flex flex-col gap-2xl sm:w-96">
           <CalculatorValueBlock
             title={'Ежемесячный платеж'}

package/src/components/Calculator/UnknownRate.tsx

@@ -5,20 +5,30 @@ import { Text } from '../../ui-kit/Text/Text';
 
 export interface UnknownRateProps {
   title?: string;
+  isUnavailableByTerm?: boolean;
 }
 
-export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) => (
-  <div>
-    <Text size="text-l" font="font-light" color="text-secondary-text">
-      {title}
-    </Text>
-    <div className="mt-2xs pt-2xs pl-lg pb-xs">
-      <Icon name="PercentIcon" width="90" height="85" />
+export const UnknownRate = JSX<UnknownRateProps>(
+  ({ title = 'Ставка', isUnavailableByTerm = false }) => (
+    <div>
+      <Text size="text-l" font="font-light" color="text-secondary-text">
+        {title}
+      </Text>
+      <div className="mt-2xs pt-2xs pl-lg pb-xs">
+        <Icon name="PercentIcon" width="90" height="85" />
+      </div>
+      <div className="w-64 mt-m">
+        {isUnavailableByTerm ? (
+          <Paragraph size="text-xl" font="font-light" color="text-primary-text">
+            Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в
+            Банк
+          </Paragraph>
+        ) : (
+          <Paragraph size="text-xl" font="font-light" color="text-primary-text">
+            Выберите другую сумму или срок
+          </Paragraph>
+        )}
+      </div>
     </div>
-    <div className="w-64 mt-m">
-      <Paragraph size="text-xl" font="font-light" color="text-primary-text">
-        Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
-      </Paragraph>
-    </div>
-  </div>
-));
+  ),
+);

package/src/components/Calculator/constants.ts

@@ -36,7 +36,7 @@ export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookRatePar
   maxSum: DEFAULT_MAX_SUM,
   minMonths: DEFAULT_MIN_MONTHS,
   maxMonths: DEFAULT_MAX_MONTHS,
-  rate: 12.5,
+  rate: 0,
   isSalaryClient: false,
   isPensionClient: false,
   isStateEmployee: false,
@@ -52,7 +52,7 @@ export const DEFAULT_REFINANCING_CALCULATOR_PARAMS: RefinancingCalculatorSourceB
   maxSumExtra: REFINANCING_EXTRA_MAX_SUM,
   minMonths: DEFAULT_REFINANCING_MIN_MONTHS,
   maxMonths: DEFAULT_MAX_MONTHS,
-  rate: 7.5,
+  rate: 0,
   isExtraMoney: false,
   isSalaryClient: false,
   isInsurance: true,

package/src/components/Calculator/renderRate.tsx

@@ -1,18 +1,25 @@
-import { UnknownRate } from './UnknownRate';
-import { Rate } from './Rate';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { Rate } from './Rate';
+import { UnknownRate } from './UnknownRate';
 
 interface RenderRateProps {
   rate: number;
   depositeName?: string;
-  isShowUnknownRate?: boolean;
+  isUnavailableByTerm?: boolean;
   isShowDepositeName?: boolean;
+  fractionDigits?: number;
 }
 
-const renderDesktopRate = ({ rate, depositeName, isShowDepositeName }: RenderRateProps) => (
+const renderDesktopRate = ({
+  rate,
+  depositeName,
+  fractionDigits,
+  isShowDepositeName,
+}: RenderRateProps) => (
   <Rate
     rate={rate}
     depositeName={depositeName}
+    fractionDigits={fractionDigits}
     isShowDepositeName={isShowDepositeName}
     rateBlockClassName="tracking-[-25px]"
     unit="%"
@@ -24,8 +31,8 @@ const renderMobileRate = ({ rate }: RenderRateProps) => (
 );
 
 export const renderRate = (props: RenderRateProps) => {
-  if (props.isShowUnknownRate) {
-    return <UnknownRate />;
+  if (props.rate === 0) {
+    return <UnknownRate isUnavailableByTerm={props.isUnavailableByTerm} />;
   }
 
   return (

package/src/components/Calculator/useBusinessDepositCalculatorParams.ts

@@ -34,7 +34,7 @@ export interface BusinessDepositCalculatorParams
   income?: number;
   finalSum?: number;
   isDisabledOperatingDeposit?: boolean;
-  isShowUnknownRate?: boolean;
+  isUnavailableByTerm?: boolean;
 }
 
 export type BusinessDepositCalculatorData = {
@@ -66,7 +66,7 @@ export const useBusinessDepositCalculatorParams = (
       ...DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
       ...userInputParams,
       isDisabledOperatingDeposit,
-      isShowUnknownRate: true,
+      isUnavailableByTerm: true,
     };
   }
   const businessDepositCalculatorSourceBookParams =

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -1,5 +1,4 @@
 import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { clamp } from '../../utils/clamp';
 import type { CreditCalculatorParamsViewSettings } from './CalculatorContent';
 import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
 import { getCreditCalculatorLimitParams } from './getCreditCalculatorLimitParams';
@@ -51,7 +50,7 @@ export const useCreditCalculatorParams = (
   sourceBookDir?: string,
   paramsViewSettings?: CreditCalculatorParamsViewSettings,
 ): CreditCalculatorParams => {
-  let { moneyValue, monthsValue } = userInputParams;
+  const { moneyValue, monthsValue } = userInputParams;
   const data = useCalculatorParams<CreditCalculatorData>(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
   const rateRows = data?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
   const limitRows = data?.limitRows || [];
@@ -72,9 +71,6 @@ export const useCreditCalculatorParams = (
     rateRows,
   );
 
-  moneyValue = clamp(moneyValue, minSum, maxSum);
-  monthsValue = clamp(monthsValue, minMonths, maxMonths);
-
   const creditCalculatorRateParams = getCreditCalculatorRateParams({
     rateRows,
     userInputParams,