@redneckz/wildless-cms-uni-blocks 0.5.4 → 0.5.6

package/mobile/lib/ui-kit/SelectCustom/SelectCustom.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../Icon/Icon.js';
+import { useState, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+export const SelectCustom = JSX(({ className = '', isBorder = true, label, options = [], value, onChange }) => {
+    const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
+    const [isOpen, setIsOpen] = useState(false);
+    const choiceOption = (option) => {
+        setSelectedItem(option);
+        setIsOpen(false);
+        onChange(option);
+    };
+    const isSelected = (option) => Boolean(option.key === selectedItem.key);
+    useEffect(() => {
+        setSelectedItem(value || { key: '', text: '' });
+    }, [value]);
+    return (_jsxs("div", { className: `${isOpen ? 'z-10' : ''} ${className}`, children: [label ? _jsx("span", { className: "mb-2", children: label }) : null, _jsxs("div", { className: `relative w-fit`, children: [_jsxs("div", { className: `text-m-light flex justify-between min-h-[56px] mb-0.5 p-4 pr-8 text-primary-text cursor-pointer
+            ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [selectedItem.text, _jsx(Icon, { name: "ArrowUpIcon", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options.length > 0 ? (_jsx("div", { className: `h-0 ${isOpen ? '' : 'overflow-hidden'}`, children: _jsx("div", { className: `bg-white text-l rounded-md`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
+});
+const renderOption = (choiceOption, isOpen, isSelected) => (option, i) => {
+    return (_jsxs("div", { onClick: () => {
+            choiceOption(option);
+        }, className: "flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11", children: [_jsx("span", { children: option.text }), _jsx(Icon, { name: "DoneSimpleIcon", className: ['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(' ') })] }, String(i)));
+};
+function getBorderStyle(isBorder) {
+    return isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';
+}
+//# sourceMappingURL=SelectCustom.js.map

package/mobile/lib/ui-kit/SelectCustom/SelectCustom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCustom.js","sourceRoot":"","sources":["../../../src/ui-kit/SelectCustom/SelectCustom.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/wlc.json

@@ -0,0 +1,5 @@
+{
+    "PROD_BRANCH": "master",
+    "FORCED_DRAFT_FLOW": false,
+    "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b"
+}

package/mobile/src/ProjectSettings.ts

@@ -6,6 +6,8 @@ export interface ProjectSettings {
   ASSIST_PROJECT_ID?: string;
   SITEMAP?: string;
   CDN?: string; // Should ends with "/"
+  YANDEX_MAP_API_KEY?: string;
+  YANDEX_METRIKA_ID?: string;
 }
 
 export const projectSettings = new (class implements ProjectSettings {
@@ -39,4 +41,10 @@ export const projectSettings = new (class implements ProjectSettings {
   get CDN() {
     return this._.CDN;
   }
+  get YANDEX_MAP_API_KEY() {
+    return this._.YANDEX_MAP_API_KEY;
+  }
+  get YANDEX_METRIKA_ID() {
+    return this._.YANDEX_METRIKA_ID;
+  }
 })();

package/mobile/src/components/Accordion/AccordionContent.ts

@@ -2,6 +2,8 @@ import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+
 /**
  * @title Элемент списка
  */
@@ -11,9 +13,7 @@ export interface AccordionItemCommonProps {
    * @default Список
    */
   label?: string;
-  /**
-   * @title Отображать в раскрытом виде
-   */
+  /** @title Отображать в раскрытом виде */
   isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
@@ -28,9 +28,7 @@ export interface AccordionItemCommonProps {
 /**
  * @title Аккордеон
  */
-export interface AccordionContent {
-  /** @title Заголовок */
-  title?: string;
+export type AccordionContent = HeadlineCommonProps & {
   /**
    * @title Выравнивание заголовка
    * @default center
@@ -39,11 +37,9 @@ export interface AccordionContent {
   version?: BlockVersion;
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
-  /** @title Описание */
-  description?: string;
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
-}
+};

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,15 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
-import {
-  BenefitBlockItemProps,
-  BenefitsBlockVersion,
-  DescriptionDef,
-} from './BenefitsBlockContent';
-import { Picture } from '../../model/Picture';
+import { BenefitBlockItemProps, DescriptionDef } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -56,7 +53,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 
 const renderBenefits = (
   benefitList: BenefitBlockItemProps[],
-  benefitsBlockVersion: BenefitsBlockVersion,
+  benefitsBlockVersion: BlockVersion,
 ) => {
   return (
     <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
@@ -65,7 +62,7 @@ const renderBenefits = (
   );
 };
 
-const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BenefitsBlockVersion) => {
+const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BlockVersion) => {
   if (!benefitIcon.icon) {
     return benefitIcon;
   }
@@ -75,7 +72,7 @@ const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BenefitsBloc
 };
 
 const renderStep =
-  (benefitsBlockVersion: BenefitsBlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+  (benefitsBlockVersion: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
     const description = (benefit?.description || undefined) as DescriptionDef;
 
     return (
@@ -100,10 +97,7 @@ const renderStep =
     );
   };
 
-const renderDescription = (
-  description: DescriptionDef,
-  benefitsBlockVersion: BenefitsBlockVersion,
-) => {
+const renderDescription = (description: DescriptionDef, benefitsBlockVersion: BlockVersion) => {
   const benefitType = description ? description?.benefitType : null;
   if (!benefitType) {
     return null;

package/mobile/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,31 +1,32 @@
-import type { Picture } from '../../model/Picture';
-import type { TitleProps } from '../../model/HeadlineType';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { EmptyOption } from '../../model/EmptyOptionType';
+import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+import type { IconProps } from '../../model/Picture';
 
 /**
  * @title Пункты описания
- * @default {"benefitType": "text"}
  */
 export type TextBenefitDef = {
-  /**
-   * @title Описание
-   */
+  /** @title Описание */
   name?: string;
+  /** @default text */
   benefitType?: 'text';
 };
 
 /**
  * @title Список
- * @default {"benefitType": "list"}
  */
 export type ListBenefitDef = {
   /** @title Буллиты */
   bullets?: boolean;
   /**
    * @title Пункты
-   * @example ["Пункт 1"]
+   * @default [
+   *  "Пункт 1"
+   * ]
    */
   items?: string[];
+  /** @default list */
   benefitType?: 'list';
 };
 
@@ -37,19 +38,11 @@ export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 /**
  * @title Преимущество
  */
-export interface BenefitBlockItemProps {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: DescriptionDef;
-  icon?: Picture;
-}
-
-/**
- * @title Цвет блока
- * @enumNames ["Основная", "Второстепенная"]
- */
-export type BenefitsBlockVersion = 'primary' | 'secondary';
+export type BenefitBlockItemProps = LabelProps &
+  IconProps & {
+    /** @title Описание */
+    description?: DescriptionDef;
+  };
 
 /**
  * @title Блок преимущества
@@ -61,5 +54,5 @@ export type BenefitsBlockContent = TitleProps & {
    */
   benefitList?: BenefitBlockItemProps[];
   /** @default primary */
-  benefitsBlockVersion?: BenefitsBlockVersion;
+  benefitsBlockVersion?: BlockVersion;
 };

package/mobile/src/components/BlockContent.ts

@@ -3,6 +3,7 @@ import type { BonusContent } from './Bonus/BonusContent';
 import type { BonusBenefitsBlockContent } from './BonusBenefitsBlock/BonusBenefitsBlockContent';
 import type { CardTransferContent } from './CardTransfer/CardTransferContent';
 import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
+import type { ErrorBlockContent } from './ErrorBlock/ErrorBlockContent';
 import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
@@ -12,7 +13,6 @@ import type { InsuranceAmountBlockContent } from './InsuranceAmountBlock/Insuran
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
-import type { NavigationContent } from './Navigation/NavigationContent';
 import type { OfficeServicesBlockContent } from './OfficeServicesBlock/OfficeServicesBlockContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
@@ -26,7 +26,6 @@ import type { TabsContent } from './Tabs/TabsContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
-import type { ErrorBlockContent } from './ErrorBlock/ErrorBlockContent';
 
 /**
  * @hidden
@@ -54,7 +53,6 @@ export type BlockContent =
   | TariffsTableContent
   | TextBlockContent
   | TileContent
-  | NavigationContent
   | LinkListContent
   | BonusBenefitsBlockContent
   | SafeDepositRentalContent

package/mobile/src/components/Bonus/Bonus.tsx

@@ -42,7 +42,7 @@ export const Bonus = JSX<BonusProps>((props) => {
                           <span className="font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
                             {_.bonusCount}
                           </span>
-                          <span className="text-[44px] bg-clip-text text-transparent bg-green-to-yellow">
+                          <span className="text-h2 bg-clip-text text-transparent bg-green-to-yellow">
                             {_.bonusName}
                           </span>
                         </div>

package/mobile/src/components/Bonus/BonusContent.ts

@@ -1,21 +1,19 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
-/** @title Плитка */
-interface BonusItems {
-  /** @title Бонусы */
-  title?: string;
-  /** @title Описание плитки */
-  description?: string;
+/**
+ * @title Плитка
+ */
+export type BonusItem = HeadlineCommonProps & {
   /** @title Количество баллов */
   bonusCount?: string;
   /** @title Наименование */
   bonusName?: string;
-}
+};
 
 /**
  * @title Блок Бонусы
  */
 export type BonusContent = HeadlineCommonProps & {
   /** @title Список плиток */
-  bonusItems?: BonusItems[];
+  bonusItems?: BonusItem[];
 };

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,37 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
+import { Headline } from '../Headline/Headline';
 import type { BonusBenefit, BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
 import { getElementsColsValue } from './getElementsColsValue';
-import { Headline } from '../Headline/Headline';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`}
+  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => (
+    <BlockWrapper
+      className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
+      context={context}
+      {...rest}
+    >
+      <Headline
         context={context}
-        {...rest}
-      >
-        <Headline
-          context={context}
-          className="!p-0"
-          title={title}
-          description={subtitle}
-          headlineVersion="M"
-          align="center"
-        />
-        {bonusBenefits?.length ? (
-          <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
-            {bonusBenefits.map(renderBonusBenefit)}
-          </div>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+        className="!p-0"
+        title={title}
+        description={subtitle}
+        headlineVersion="M"
+        align="center"
+      />
+      {bonusBenefits?.length ? (
+        <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
+          {bonusBenefits.map(renderBonusBenefit)}
+        </div>
+      ) : null}
+    </BlockWrapper>
+  ),
 );
 
 const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
@@ -39,10 +37,10 @@ const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
     <div key={String(i)} className="flex flex-col items-center max-w-[292px]">
       {bonusBenefit?.icon ? (
         <Img
-          className="h-[180px] w-[160px] min-w-[160px] min-h-[160px]"
+          className="h-[160px] w-[180px] min-w-[180px] min-h-[160px]"
           image={bonusBenefit.icon}
-          width="160"
-          height="180"
+          width="180"
+          height="160"
         />
       ) : null}
       <div>

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlockContent.ts

@@ -1,23 +1,17 @@
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
+import type { LabelProps, TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Бонус и преимущество
  */
-export interface BonusBenefit {
-  /** @title Название */
-  label?: string;
-  /** @title Изображение */
-  icon?: Picture;
-}
+export type BonusBenefit = LabelProps & IconProps & {};
 
 /**
  * @title Блок бонусов и преимуществ
  */
-export interface BonusBenefitsBlockContent {
-  /** @title Заголовок */
-  title?: string;
+export type BonusBenefitsBlockContent = TitleProps & {
   /** @title Подзаголовок */
   subtitle?: string;
   /** @title Список бонусов */
   bonusBenefits?: BonusBenefit[];
-}
+};

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

@@ -8,11 +8,12 @@ import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useBonusCalculatorParams } from './useBonusCalculatorParams';
+import { renderFootnote } from './renderFootnote';
 
 export interface BonusCalculatorProps extends CommonCalculatorProps, UniBlockProps {}
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
-  ({ context, className = '', sourceBookDir = '', buttons }) => {
+  ({ context, className = '', sourceBookDir = '', buttons, footnote }) => {
     const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
     const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
     const userInputParams = {
@@ -54,9 +55,10 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
             <Rate title="Баллов за месяц" rate={monthBonus} rateBlockClassName="tracking-[-14px]" />
           ) : null}
         </div>
-        <div className="w-[240px]">
+        <div className="w-full max-w-[350px]">
           {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
           {renderButtonSection(context, buttons)}
+          {renderFootnote(footnote)}
         </div>
       </section>
     );

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

@@ -92,7 +92,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
       ${btnClassName}`}
     >
       <Img
-        className={`h-[24px] w-[24px] min-w-[24px] min-h-[24px] mr-4 ${iconClassName}`}
+        className={`h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`}
         image={{ ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }}
         width="24"
         height="24"

package/mobile/src/components/Calculator/CalculatorContent.ts

@@ -1,14 +1,15 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { TitleProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Footnote } from '../../model/Footnote';
 
-export interface CommonCalculatorProps {
+export type CommonCalculatorProps = Footnote & {
   /** @title Кнопки */
   buttons?: ButtonWithIconProps[];
   /** @title Адрес справочника */
   sourceBookDir?: string;
-}
+};
 
 /**
  * TODO: данные из справочника
@@ -36,28 +37,6 @@ export interface CreditCalculatorParams {
   rateWithoutInsurance?: number;
 }
 
-/**
- * TODO: данные из справочника
- **/
-export interface MortgageCalculatorParams {
-  /** @hidden */
-  isAnnuity?: boolean;
-  /** @hidden */
-  minInitialContribution?: number;
-  /** @hidden */
-  minSum?: number;
-  /** @hidden */
-  maxSum?: number;
-  /** @hidden */
-  minMonths?: number;
-  /** @hidden */
-  maxMonths?: number;
-  /** @hidden */
-  rateWithInsurance?: number;
-  /** @hidden */
-  rateWithoutInsurance?: number;
-}
-
 /**
  * TODO: данные из справочника
  **/
@@ -122,16 +101,6 @@ export type CreditCalculatorParamsDef = TitleProps &
     calcType: 'CreditCalculatorForm';
   };
 
-/**
- * @title Ипотечный калькулятор
- * @default {"calcType": "MortgageCalculatorForm"}
- */
-export type MortgageCalculatorParamsDef = TitleProps &
-  MortgageCalculatorParams &
-  CommonCalculatorProps & {
-    calcType: 'MortgageCalculatorForm';
-  };
-
 /**
  * @title Калькулятор вкладов
  * @default {"calcType": "DepositCalculatorForm"}
@@ -158,20 +127,13 @@ export type BonusCalculatorParamsDef = TitleProps &
 export type CalculatorBlockDef =
   | EmptyOption
   | CreditCalculatorParamsDef
-  | MortgageCalculatorParamsDef
   | DepositCalculatorParamsDef
   | BonusCalculatorParamsDef;
 
 /**
  * @title Кнопка навигации
  */
-export interface CalculatorNav {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
-  icon?: Picture;
-}
+export type CalculatorNav = HeadlineCommonProps & IconProps & {};
 
 /**
  * @title Вкладка

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

@@ -12,7 +12,7 @@ export interface CalculatorValueBlockProps {
 export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => {
     return (
-      <div className={`mb-5 ${className}`}>
+      <div className={`mb-7 ${className}`}>
         {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
         {value ? (
           <div className="text-h3">

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

@@ -11,6 +11,7 @@ import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useCreditCalculatorParams } from './useCreditCalculatorParams';
+import { renderFootnote } from './renderFootnote';
 
 export const ANNUITY = 'annuity';
 export const DIFFERENTIAL = 'differential';
@@ -29,7 +30,7 @@ const paymentTypeItems = [
 export interface CreditCalculatorProp extends CommonCalculatorProps, UniBlockProps {}
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ context, className = '', sourceBookDir, buttons }) => {
+  ({ context, className = '', sourceBookDir, buttons, footnote }) => {
     const [isAnnuity, toggleIsAnnuity] = useState(false);
     const [isInsurance, toggleIsInsurance] = useState(true);
     const [isSalaryClient, toggleIsSalaryClient] = useState(false);
@@ -81,7 +82,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
           rateBlockClassName="tracking-[-25px]"
           unit="%"
         />
-        <div className="w-[351px]">
+        <div className="w-full max-w-[350px]">
           <CalculatorValueBlock
             title={isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц'}
             value={calculatorParams.monthlyPayment}
@@ -93,6 +94,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             onChange: (text: string) => toggleIsAnnuity(text === ANNUITY),
           })}
           {renderButtonSection(context, buttons)}
+          {renderFootnote(footnote)}
         </div>
       </section>
     );

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

@@ -17,16 +17,33 @@ import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
+import { renderFootnote } from './renderFootnote';
 
 export interface DepositCalculatorProp
   extends DepositCalculatorParams,
     CommonCalculatorProps,
     UniBlockProps {}
 
+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>(
-  ({ context, className = '', buttons, rate }) => {
+  ({ context, className = '', rate, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
+    const [isEveryMonth, toggleIsEveryMonth] = useState(false);
 
     const income = 948841;
     const finallySum = 1218841;
@@ -54,14 +71,20 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           )}
         </div>
         <Rate rate={rate || 1} rateBlockClassName="tracking-[-25px]" unit="%" />
-        <div className="w-[351px]">
+        <div className="w-full max-w-[350px]">
           {income ? (
             <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
           ) : null}
           {finallySum ? (
             <CalculatorValueBlock title="Сумма в конце срока" value={finallySum} postfix="₽" />
           ) : null}
+          {renderPaymentTypeSelector(context, {
+            items: depositTypeItems,
+            checkedItem: isEveryMonth ? EVERY_MONTH : AT_END_TERM,
+            onChange: (text: string) => toggleIsEveryMonth(text === EVERY_MONTH),
+          })}
           {renderButtonSection(context, buttons)}
+          {renderFootnote(footnote)}
         </div>
       </section>
     );

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

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