@redneckz/wildless-cms-uni-blocks 0.14.430 → 0.14.432

package/mobile/lib/ui-kit/Calculator/renderBinaryRadioButtonGroup.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { RadioButtonGroup, } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup.js';
 import { Text } from '../../ui-kit/Text/Text.js';
-import { style } from '../../utils/style.js';
-export const renderBinaryRadioButtonGroup = ({ items, title, mobileTitle = title, orientation = 'horizontal', value, radioGroupClassName, onChange, }) => (_jsxs("div", { className: "space-y-s", children: [title ? (_jsx("div", { className: "hidden @5xl:block", children: _jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, mobileTitle ? (_jsx("div", { className: "@5xl:hidden", children: _jsx(Text, { color: "text-secondary-text", font: "font-light", children: mobileTitle }) })) : null, _jsx(RadioButtonGroup, { orientation: orientation, items: items, checkedItem: items[value ? 0 : 1].id, className: style('flex-col sm:flex-row', radioGroupClassName), onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
+export const renderBinaryRadioButtonGroup = ({ items, title, mobileTitle = title, orientation = 'horizontal', value, radioGroupClassName, onChange, }) => (_jsxs("div", { className: "grid gap-s whitespace-nowrap", children: [title ? (_jsx("div", { className: "hidden @5xl:block", children: _jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, mobileTitle ? (_jsx("div", { className: "@5xl:hidden", children: _jsx(Text, { color: "text-secondary-text", font: "font-light", children: mobileTitle }) })) : null, _jsx(RadioButtonGroup, { orientation: orientation, items: items, checkedItem: items[value ? 0 : 1].id, className: radioGroupClassName, onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
 //# sourceMappingURL=renderBinaryRadioButtonGroup.js.map

package/mobile/lib/ui-kit/Calculator/renderBinaryRadioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderBinaryRadioButtonGroup.js","sourceRoot":"","sources":["../../../src/ui-kit/Calculator/renderBinaryRadioButtonGroup.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,gBAAgB,GAEjB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAY1C,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAC3C,KAAK,EACL,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,WAAW,GAAG,YAAY,EAC1B,KAAK,EACL,mBAAmB,EACnB,QAAQ,GACoB,EAAE,EAAE,CAAC,CACjC,eAAK,SAAS,EAAC,WAAW,aACvB,KAAK,CAAC,CAAC,CAAC,CACP,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,IAAI,IAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,YAAY,YAChD,KAAK,GACD,GACH,CACP,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,CACb,cAAK,SAAS,EAAC,aAAa,YAC1B,KAAC,IAAI,IAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,YAAY,YAChD,WAAW,GACP,GACH,CACP,CAAC,CAAC,CAAC,IAAI,EAER,KAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EACpC,SAAS,EAAE,KAAK,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,EAC7D,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GACxD,IACE,CACP,CAAC"}
+{"version":3,"file":"renderBinaryRadioButtonGroup.js","sourceRoot":"","sources":["../../../src/ui-kit/Calculator/renderBinaryRadioButtonGroup.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,gBAAgB,GAEjB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAY9C,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAC3C,KAAK,EACL,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,WAAW,GAAG,YAAY,EAC1B,KAAK,EACL,mBAAmB,EACnB,QAAQ,GACoB,EAAE,EAAE,CAAC,CACjC,eAAK,SAAS,EAAC,8BAA8B,aAC1C,KAAK,CAAC,CAAC,CAAC,CACP,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,IAAI,IAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,YAAY,YAChD,KAAK,GACD,GACH,CACP,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,CACb,cAAK,SAAS,EAAC,aAAa,YAC1B,KAAC,IAAI,IAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,YAAY,YAChD,WAAW,GACP,GACH,CACP,CAAC,CAAC,CAAC,IAAI,EAER,KAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EACpC,SAAS,EAAE,mBAAmB,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GACxD,IACE,CACP,CAAC"}

package/mobile/lib/ui-kit/Calculator/renderRate.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { type VNode } from '../../model/VNode';
 import { type RateProps } from './Rate';
 import { type UnknownRateProps } from './UnknownRate';
 interface RenderRateProps extends RateProps, UnknownRateProps {
     isUnknownRateShown?: boolean;
+    children?: VNode;
 }
-export declare const renderRate: ({ title, rate, unit, fractionDigits, isUnknownRateShown, color, ...rest }: RenderRateProps) => JSX.Element;
+export declare const renderRate: ({ title, rate, unit, fractionDigits, isUnknownRateShown, color, children, ...rest }: RenderRateProps) => JSX.Element;
 export {};

package/mobile/lib/ui-kit/Calculator/renderRate.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { CalculatorValueBlock } from './CalculatorValueBlock.js';
 import { Rate } from './Rate.js';
 import { UnknownRate } from './UnknownRate.js';
-export const renderRate = ({ title = 'Ставка', rate = 0, unit = '%', fractionDigits = 2, isUnknownRateShown = true, color = 'text-secondary-text', ...rest }) => isUnknownRateShown && rate === 0 ? (_jsx(UnknownRate, { title: title, ...rest })) : (_jsxs("div", { children: [_jsx("div", { className: "hidden @xl:block", children: _jsx(Rate, { title: title, rate: rate, unit: unit, fractionDigits: fractionDigits, color: color, ...rest }) }), _jsx("div", { className: "@xl:hidden", children: _jsx(CalculatorValueBlock, { title: title, value: rate, postfix: unit, fractionDigits: fractionDigits, fixed: true, color: color, ...rest }) })] }));
+export const renderRate = ({ title = 'Ставка', rate = 0, unit = '%', fractionDigits = 2, isUnknownRateShown = true, color = 'text-secondary-text', children, ...rest }) => isUnknownRateShown && rate === 0 ? (_jsx(UnknownRate, { title: title, ...rest })) : (_jsxs("div", { children: [_jsx("div", { className: "hidden @xl:block min-w-96", children: _jsx(Rate, { title: title, rate: rate, unit: unit, fractionDigits: fractionDigits, color: color, ...rest }) }), _jsx("div", { className: "@xl:hidden", children: _jsx(CalculatorValueBlock, { title: title, value: rate, postfix: unit, fractionDigits: fractionDigits, fixed: true, color: color, ...rest }) }), children] }));
 //# sourceMappingURL=renderRate.js.map

package/mobile/lib/ui-kit/Calculator/renderRate.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderRate.js","sourceRoot":"","sources":["../../../src/ui-kit/Calculator/renderRate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AAMnE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,GAAG,QAAQ,EAChB,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,GAAG,EACV,cAAc,GAAG,CAAC,EAClB,kBAAkB,GAAG,IAAI,EACzB,KAAK,GAAG,qBAAqB,EAC7B,GAAG,IAAI,EACS,EAAE,EAAE,CACpB,kBAAkB,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CACjC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,KAAM,IAAI,GAAI,CACxC,CAAC,CAAC,CAAC,CACF,0BACE,cAAK,SAAS,EAAC,kBAAkB,YAC/B,KAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,KACR,IAAI,GACR,GACE,EACN,cAAK,SAAS,EAAC,YAAY,YACzB,KAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,IAAI,EACb,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,KACR,IAAI,GACR,GACE,IACF,CACP,CAAC"}
+{"version":3,"file":"renderRate.js","sourceRoot":"","sources":["../../../src/ui-kit/Calculator/renderRate.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AAOnE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,GAAG,QAAQ,EAChB,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,GAAG,EACV,cAAc,GAAG,CAAC,EAClB,kBAAkB,GAAG,IAAI,EACzB,KAAK,GAAG,qBAAqB,EAC7B,QAAQ,EACR,GAAG,IAAI,EACS,EAAE,EAAE,CACpB,kBAAkB,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CACjC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,KAAM,IAAI,GAAI,CACxC,CAAC,CAAC,CAAC,CACF,0BACE,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,KACR,IAAI,GACR,GACE,EACN,cAAK,SAAS,EAAC,YAAY,YACzB,KAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,IAAI,EACb,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,KACR,IAAI,GACR,GACE,EACL,QAAQ,IACL,CACP,CAAC"}

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

@@ -1,7 +1,8 @@
 /* eslint-disable max-lines, max-lines-per-function */
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
-import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { useForm } from '../../hooks/useForm';
+import { Button } from '../../ui-kit/Button/Button';
 import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
 import { CalculatorStyle } from '../../ui-kit/Calculator/CalculatorStyle';
 import { getDefaultParamsMax } from '../../ui-kit/Calculator/getDefaultParams';
@@ -10,7 +11,6 @@ import {
   getMonthsDefaultValue,
 } from '../../ui-kit/Calculator/getDefaultValues';
 import { renderMonthsInput } from '../../ui-kit/Calculator/renderMonthsInput';
-import { renderPayout } from '../../ui-kit/Calculator/renderPayout';
 import { renderRate } from '../../ui-kit/Calculator/renderRate';
 import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
 import { setDefaultParamsCalc } from '../../ui-kit/Calculator/setDefaultParamsCalc';
@@ -19,22 +19,21 @@ import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { clamp } from '../../utils/clamp';
 import { style } from '../../utils/style';
 import { isDefaultParams } from '../CalculatorCredit/isDefaultParams';
-import {
-  type CalculatorDepositContent,
-  type CalculatorDepositParamsViewSettings,
-} from './CalculatorDepositContent';
+import { type CalculatorDepositContent } from './CalculatorDepositContent';
 import {
   getDepositCalculatorParams,
   type DepositCalculatorData,
-  type DepositCalculatorParams,
   type DepositCalculatorSourceBookParams,
+  type TariffsButtonContent,
 } from './getDepositCalculatorParams';
+import { renderDepositParamsForm } from './renderDepositParamsForm';
 import { renderDepositResult } from './renderDepositResult';
-import { renderRegistrationType } from './renderRegistrationType';
 
 const MAP = {
   isMonthlyInterestPayment: 'isMonthlyInterestPayment',
   isRemoteRegistration: 'isRemoteRegistration',
+  isReplenish: 'isReplenish',
+  isWithdrawn: 'isWithdrawn',
   moneyValue: 'minSum',
 };
 
@@ -49,22 +48,24 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
     className,
     title,
     calcSource,
-    buttons,
-    footnote,
+    buttons = [],
+    footnote = '',
     paramsViewSettings,
     defaultParams,
     ...rest
   }) => {
     const defParams = getDefaultParamsMax(calcSource?.rateRows);
+
     const [userInputParams, { field }] = useForm({
       moneyValue: getMoneyDefaultValue(defaultParams, DEPOSIT_DEFAULT_SUM),
       monthsValue: getMonthsDefaultValue(defaultParams),
       isMonthlyInterestPayment: Boolean(defaultParams?.isMonthlyInterestPayment),
       isRemoteRegistration: Boolean(defaultParams?.isRemoteRegistration),
+      isReplenish: false,
+      isWithdrawn: Boolean(defaultParams?.isWithdrawn ?? false),
     });
-
     const calcParams = getDepositCalculatorParams(userInputParams, calcSource, paramsViewSettings);
-    const { defaultMonth, rate, income, finalSum } = calcParams;
+    const { defaultMonth, rate, income, finalSum, type = '' } = calcParams;
     const { onChange: setMonthsValue } = field('monthsValue');
     const { onChange: setMoneyValue } = field('moneyValue');
 
@@ -77,18 +78,23 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
         setMoneyValue(clamp(userInputParams.moneyValue, calcParams.minSum, calcParams.maxSum));
     }, [calcParams.minSum, calcParams.maxSum]);
 
+    const handleDefaultParamsCals = () =>
+      setDefaultParamsCalc({
+        field,
+        defParams: defParams as DepositCalculatorSourceBookParams,
+        calcParams,
+        monthsValue: 'minMonths',
+        map: MAP,
+      });
+
     useEffect(() => {
       if (!isDefaultParams(defaultParams) && defParams) {
-        setDefaultParamsCalc({
-          field,
-          defParams: defParams as DepositCalculatorSourceBookParams,
-          calcParams,
-          monthsValue: 'minMonths',
-          map: MAP,
-        });
+        handleDefaultParamsCals();
       }
     }, [calcSource, defaultParams]);
 
+    const isMaxRate = rate === defParams?.rate;
+
     return (
       <CalculatorLayout className={className} title={title} {...rest}>
         <section className={style(CalculatorStyle.wrapper, className)}>
@@ -112,32 +118,30 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
           </div>
           {renderRate({
             rate,
+            children: renderMaxRateButton(handleDefaultParamsCals, isMaxRate),
+          })}
+          {renderDepositResult({
+            income,
+            finalSum,
+            buttons: [...buttons, getTariffButton(calcSource?.buttons, type)],
+            footnotes: [footnote],
           })}
-          {renderDepositResult({ income, finalSum, buttons, footnotes: [footnote as string] })}
         </section>
       </CalculatorLayout>
     );
   },
 );
 
-const renderDepositParamsForm = (
-  params: DepositCalculatorParams & CalculatorDepositParamsViewSettings,
-  field: FormFieldRegisterer<any>,
-) => (
-  <div className="flex flex-col gap-y-2xl">
-    {params.isShowMonthlyInterestPayment
-      ? renderPayout({
-          title: 'Выплата процентов',
-          ...field('isMonthlyInterestPayment'),
-          value: params.isMonthlyInterestPayment,
-        })
-      : null}
-    {params.isShowRemoteRegistration
-      ? renderRegistrationType({
-          title: 'Оформление',
-          ...field('isRemoteRegistration'),
-          value: params.isRemoteRegistration,
-        })
-      : null}
-  </div>
-);
+const getTariffButton = (buttons: TariffsButtonContent[] = [], btnType = '') => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { type, ...button } = buttons.find((_) => _.type === btnType) ?? {};
+
+  return button;
+};
+
+const renderMaxRateButton = (handleDefaultParamsCals: () => void, isMaxRate = false) =>
+  isMaxRate ? null : (
+    <Button type="button" version="secondary" onClick={handleDefaultParamsCals}>
+      Показать максимальную ставку
+    </Button>
+  );

package/mobile/src/components/CalculatorDeposit/CalculatorDepositContent.ts

@@ -15,13 +15,23 @@ export interface CalculatorDepositParamsViewSettings {
    * @default true
    */
   isShowRemoteRegistration?: boolean;
+  /** @title Пополнение */
+  isShowReplenish?: boolean;
+  /** @title Снятие */
+  isShowWithdrawn?: boolean;
 }
 
 export interface CommonDepositParams {
+  /** @title Возможность помолнять */
+  isReplenish?: boolean;
+  /** @title Возможно снимать */
+  isWithdrawn?: boolean;
   /** @title Ежемесячная выплата процентов */
   isMonthlyInterestPayment?: boolean;
   /** @title Дистанционное оформление */
   isRemoteRegistration?: boolean;
+  /** @title Тип депозита */
+  type?: string;
 }
 
 export interface DepositDefaultParams extends CommonDefaultParams, CommonDepositParams {}

package/mobile/src/components/CalculatorDeposit/getDepositCalculatorParams.ts

@@ -3,6 +3,7 @@ import {
   type CalcValueProps,
 } from '../../ui-kit/Calculator/CalculatorProps';
 import { checkRangeByKeys, getRangeByKeys } from '../../ui-kit/Calculator/rangeHelpers';
+import type { LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { arrayByRange } from '../../utils/arrayByRange';
 import { mergeIntervals } from '../../utils/mergeIntervals';
 import {
@@ -18,6 +19,9 @@ const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParams = {
   rate: 0,
   isMonthlyInterestPayment: true,
   isRemoteRegistration: true,
+  isReplenish: false,
+  isWithdrawn: false,
+  type: '',
 };
 
 export interface DepositCalculatorSourceBookParams
@@ -35,8 +39,13 @@ export interface DepositCalculatorParams
   finalSum: number;
 }
 
+export type TariffsButtonContent = LinkButtonContent & {
+  type?: string;
+};
+
 export type DepositCalculatorData = {
   rateRows?: DepositCalculatorSourceBookParams[];
+  buttons?: TariffsButtonContent[];
 };
 
 export const getDepositCalculatorParams = (
@@ -50,9 +59,23 @@ export const getDepositCalculatorParams = (
     : 0;
   const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
   const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
+  const isExcludeReplenish = !paramsViewSettings?.isShowReplenish;
+  const isExcludeWithdrawn = !paramsViewSettings?.isShowWithdrawn;
   const depositCalculatorSourceBookParams =
     calcSource?.rateRows?.find(
       (row) =>
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isReplenish',
+          isExclude: isExcludeReplenish,
+        }) &&
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isWithdrawn',
+          isExclude: isExcludeWithdrawn,
+        }) &&
         checkRowByParam({
           row,
           userInputParams,

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

@@ -0,0 +1,59 @@
+import type { FormFieldRegisterer } from '../../hooks/useForm';
+import { renderBinaryRadioButtonGroup } from '../../ui-kit/Calculator/renderBinaryRadioButtonGroup';
+import { renderPayout } from '../../ui-kit/Calculator/renderPayout';
+import type { CalculatorDepositParamsViewSettings } from './CalculatorDepositContent';
+import type { DepositCalculatorParams } from './getDepositCalculatorParams';
+import { renderRegistrationType } from './renderRegistrationType';
+
+export const renderDepositParamsForm = (
+  params: DepositCalculatorParams & CalculatorDepositParamsViewSettings,
+  field: FormFieldRegisterer<any>,
+) => (
+  <div className="grid gap-lg">
+    <div className="flex gap-lg">
+      {params.isShowReplenish
+        ? renderBinaryRadioButtonGroup({
+            title: 'Пополнение',
+            ...field('isReplenish'),
+            value: params.isReplenish,
+            orientation: 'vertical',
+            items: [
+              { id: 'withReplenish', text: 'С пополнением' },
+              { id: 'withoutReplenish', text: 'Без пополнения' },
+            ],
+          })
+        : null}
+      {params.isShowWithdrawn
+        ? renderBinaryRadioButtonGroup({
+            title: 'Снятие',
+            ...field('isWithdrawn'),
+            value: params.isWithdrawn,
+            orientation: 'vertical',
+            items: [
+              { id: 'wthDrawn', text: 'Со снятием' },
+              { id: 'noWithdrawn', text: 'Без снятия' },
+            ],
+          })
+        : null}
+    </div>
+    <div className="border-b border-main-divider w-full" />
+    <div className="flex gap-lg">
+      {params.isShowMonthlyInterestPayment
+        ? renderPayout({
+            title: 'Выплата процентов',
+            ...field('isMonthlyInterestPayment'),
+            value: params.isMonthlyInterestPayment,
+            orientation: 'vertical',
+          })
+        : null}
+      {params.isShowRemoteRegistration
+        ? renderRegistrationType({
+            title: 'Оформление',
+            ...field('isRemoteRegistration'),
+            value: params.isRemoteRegistration,
+            orientation: 'vertical',
+          })
+        : null}
+    </div>
+  </div>
+);

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

@@ -14,7 +14,7 @@ type DepositResultProps = {
 export const renderDepositResult = ({
   income,
   finalSum,
-  buttons,
+  buttons = [],
   footnotes = [],
 }: DepositResultProps) => (
   <div className={CalculatorStyle.result}>

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
 import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { useLink } from '../../hooks/useLink';
 import { type LinkProps } from '../../model/LinkProps';
@@ -17,10 +19,39 @@ export const DropdownMenu = JSX<DropdownMenuProps>(
   ({ className = '', items, activeItem, ariaLabel }) => {
     const [isVisible, { setFalse, toggle }] = useBool(false);
     const ref = useOutsideClick<HTMLDivElement>(setFalse);
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+    const changeDropdownPosition = useCallback(
+      (isOpened: boolean, buttonRef, menuRef) => {
+        if (isOpened) {
+          const dropdownRect = menuRef?.current?.getBoundingClientRect();
+          const dropdownButtonRect = buttonRef?.current?.getBoundingClientRect();
+
+          if (menuRef.current && dropdownRect && dropdownButtonRect) {
+            if (dropdownRect?.right >= globalThis.innerWidth) {
+              menuRef.current.style.left = `${globalThis.innerWidth - dropdownRect.width}px`;
+            } else if (dropdownButtonRect?.left > dropdownRect.left) {
+              menuRef.current.style.left = `${globalThis.innerWidth - dropdownRect.width}px`;
+            } else {
+              menuRef.current.style.left = '';
+            }
+          }
+        }
+      },
+      [isVisible],
+    );
+
+    useEventListener(globalThis, 'resize', () =>
+      changeDropdownPosition(isVisible, ref, dropdownRef),
+    );
+
+    useEffect(() => {
+      changeDropdownPosition(isVisible, ref, dropdownRef);
+    }, [isVisible]);
 
     return (
       <div
-        className={style(isVisible ? 'bg-white rounded-md shadow-blue-gray' : '', className)}
+        className={style(isVisible ? 'rounded-md shadow-blue-gray' : '', className)}
         ref={ref}
         role="navigation"
       >
@@ -40,8 +71,9 @@ export const DropdownMenu = JSX<DropdownMenuProps>(
             ))}
         </button>
         <div
+          ref={dropdownRef}
           className={style(
-            'absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40 translate-x-[-100%]',
+            'absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40',
             isVisible ? '' : 'hidden',
           )}
           aria-hidden={!isVisible}

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

@@ -1,6 +1,6 @@
 export const CalculatorStyle = {
-  wrapper: 'flex flex-col justify-between @4xl:flex-row gap-x-m gap-y-7 @xl:gap-y-4xl',
+  wrapper: 'flex flex-col justify-between @4xl:flex-row gap-x-s gap-y-7 @xl:gap-y-4xl',
   input:
-    'flex flex-col @xl:max-w-md gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0',
-  result: 'flex flex-col gap-y-xl @xl:w-96',
+    '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',
 };

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

@@ -4,7 +4,6 @@ import {
   type 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];
@@ -25,7 +24,7 @@ export const renderBinaryRadioButtonGroup = ({
   radioGroupClassName,
   onChange,
 }: BinaryRadioButtonGroupProps) => (
-  <div className="space-y-s">
+  <div className="grid gap-s whitespace-nowrap">
     {title ? (
       <div className="hidden @5xl:block">
         <Text color="text-secondary-text" font="font-light">
@@ -45,7 +44,7 @@ export const renderBinaryRadioButtonGroup = ({
       orientation={orientation}
       items={items}
       checkedItem={items[value ? 0 : 1].id}
-      className={style('flex-col sm:flex-row', radioGroupClassName)}
+      className={radioGroupClassName}
       onChange={(_) => onChange && onChange(_ === items[0].id)}
     />
   </div>

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

@@ -1,9 +1,11 @@
+import { type VNode } from '../../model/VNode';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { Rate, type RateProps } from './Rate';
 import { UnknownRate, type UnknownRateProps } from './UnknownRate';
 
 interface RenderRateProps extends RateProps, UnknownRateProps {
   isUnknownRateShown?: boolean;
+  children?: VNode;
 }
 
 export const renderRate = ({
@@ -13,13 +15,14 @@ export const renderRate = ({
   fractionDigits = 2,
   isUnknownRateShown = true,
   color = 'text-secondary-text',
+  children,
   ...rest
 }: RenderRateProps) =>
   isUnknownRateShown && rate === 0 ? (
     <UnknownRate title={title} {...rest} />
   ) : (
     <div>
-      <div className="hidden @xl:block">
+      <div className="hidden @xl:block min-w-96">
         <Rate
           title={title}
           rate={rate}
@@ -40,5 +43,6 @@ export const renderRate = ({
           {...rest}
         />
       </div>
+      {children}
     </div>
   );

package/package.json

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

package/src/components/CalculatorDeposit/CalculatorDeposit.fixture.tsx

@@ -37,6 +37,8 @@ export default {
         paramsViewSettings={{
           isShowMonthlyInterestPayment: true,
           isShowRemoteRegistration: true,
+          isShowReplenish: true,
+          isShowWithdrawn: true,
         }}
       />
     </div>
@@ -48,6 +50,24 @@ export default {
         paramsViewSettings={{
           isShowMonthlyInterestPayment: false,
           isShowRemoteRegistration: true,
+          isShowReplenish: true,
+          isShowWithdrawn: true,
+        }}
+      />
+    </div>
+  ),
+  replenish: (
+    <div className="container grid grid-cols-12">
+      <CalculatorDeposit
+        {...calculator}
+        paramsViewSettings={{
+          isShowReplenish: true,
+          isShowWithdrawn: true,
+          isShowRemoteRegistration: true,
+          isShowMonthlyInterestPayment: true,
+        }}
+        calcSource={{
+          $ref: '/wcms-resources/vklad-calculator-main-data.json',
         }}
       />
     </div>