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

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { clamp } from '../../utils/clamp';
 import type { InputRangeProps } from './InputRangeProps';
 
 const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
@@ -16,27 +17,19 @@ export const InputRange = JSX<InputRangeProps>(
     disabled = false,
     onChange,
   }) => {
-    const handleChange = (_: string) => {
+    const getSanitizedValue = (_: string) => Number(_.replace(/\D/g, ''));
+
+    const handleChange = (e) => {
       if (!onChange) {
         return;
       }
-      const sanitizedValue = Number(_.replace(/\D/g, ''));
-      onChange(sanitizedValue);
+
+      onChange(clamp(getSanitizedValue(e.target.value as string), min, max));
     };
+
     const inputStyle = {
       backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
     };
-    const handleBlur = () => {
-      if (!onChange) {
-        return;
-      }
-      if (value < min) {
-        onChange(min);
-      }
-      if (value > max) {
-        onChange(max);
-      }
-    };
 
     return (
       <div className={className}>
@@ -44,11 +37,11 @@ export const InputRange = JSX<InputRangeProps>(
           {title ? <span className="text-m-light">{title}</span> : null}
           <input
             className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}
+            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}
             value={addSpacesBetweenNumbers(value)}
             disabled={disabled}
-            onChange={(e) => handleChange(e.target.value as string)}
-            onBlur={handleBlur}
+            onChange={handleChange}
+            onBlur={handleChange}
           />
           <div className="absolute inset-x-0 -bottom-1 px-4 leading-[18px]">
             <input
@@ -59,19 +52,25 @@ export const InputRange = JSX<InputRangeProps>(
               step={step}
               value={value}
               disabled={disabled}
-              onChange={(e) => handleChange(e.target.value as string)}
+              onChange={handleChange}
               style={inputStyle}
             />
           </div>
         </label>
-        <div className="flex justify-between my-2">
-          {items.map((item, i) => (
-            <span key={String(i)} className="text-s-light text-secondary-text">
-              {item}
-            </span>
-          ))}
-        </div>
+        {renderRangeCaption(items)}
       </div>
     );
   },
 );
+
+function renderRangeCaption(items) {
+  return (
+    <div className="flex justify-between my-2">
+      {items.map((item, i) => (
+        <span key={String(i)} className="text-s-light text-secondary-text">
+          {item}
+        </span>
+      ))}
+    </div>
+  );
+}

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

@@ -5,7 +5,8 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="flex items-center relative cursor-pointer">
       <input
-        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main
+        rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
         type="radio"
         value={value}
         name={name}

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

@@ -16,7 +16,7 @@ interface RadioButtonGroupProps extends UniBlockProps {
 export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
   ({ items, checkedItem, onChangeCheckedItem }) => {
     return (
-      <div>
+      <div className="flex flex-col gap-3">
         {items?.map(({ id, text }) => (
           <Checkbox
             key={id}

package/mobile/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -55,7 +55,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
         <Button
           version="primary"
           text="Найти"
-          className="invisible peer-focus:visible absolute top-1 right-1"
+          className="invisible peer-focus:visible absolute top-[3px] right-1"
           onClick={(ev) => {
             ev?.preventDefault();
             console.log('click');

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

@@ -0,0 +1,84 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../Icon/Icon';
+import { useState, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+export interface OptionProps {
+  key: string;
+  text: string;
+}
+
+export interface SelectCustomProps {
+  className?: string;
+  label?: string;
+  value?: OptionProps;
+  onChange: (value: OptionProps) => void;
+  options: OptionProps[];
+  isBorder?: boolean;
+}
+
+export const SelectCustom = JSX<SelectCustomProps>(
+  ({ className = '', isBorder = true, label, options = [], value, onChange }) => {
+    const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
+    const [isOpen, setIsOpen] = useState(false);
+
+    const choiceOption = (option: OptionProps) => {
+      setSelectedItem(option);
+      setIsOpen(false);
+      onChange(option);
+    };
+
+    const isSelected = (option) => Boolean(option.key === selectedItem.key);
+
+    useEffect(() => {
+      setSelectedItem(value || { key: '', text: '' });
+    }, [value]);
+
+    return (
+      <div className={`${isOpen ? 'z-10' : ''} ${className}`}>
+        {label ? <span className="mb-2">{label}</span> : null}
+        <div className={`relative w-fit`}>
+          <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)}
+          >
+            {selectedItem.text}
+            <Icon name="ArrowUpIcon" className={`absolute right-3 ${isOpen ? '' : 'rotate-180'}`} />
+          </div>
+          {options.length > 0 ? (
+            <div className={`h-0 ${isOpen ? '' : 'overflow-hidden'}`}>
+              <div className={`bg-white text-l rounded-md`}>
+                {options.map(renderOption(choiceOption, isOpen, isSelected))}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+const renderOption =
+  (choiceOption, isOpen: boolean, isSelected) => (option: OptionProps, i: number) => {
+    return (
+      <div
+        key={String(i)}
+        onClick={() => {
+          choiceOption(option);
+        }}
+        className="flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11"
+      >
+        <span>{option.text}</span>
+        <Icon
+          name="DoneSimpleIcon"
+          className={['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(
+            ' ',
+          )}
+        />
+      </div>
+    );
+  };
+
+function getBorderStyle(isBorder) {
+  return isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -165,7 +165,7 @@
     "svgo": "^2.8.0",
     "tailwindcss": "^3.1.8",
     "ts-jest": "^28.0.6",
-    "ts-json-schema-generator": "^1.0.0",
+    "ts-json-schema-generator": "^1.1.2",
     "ts-loader": "^9.3.0",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0",

package/src/ProjectSettings.ts

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

package/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/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/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/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/src/components/Blocks.ts

@@ -6,6 +6,7 @@ import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
@@ -16,7 +17,6 @@ import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBloc
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
-import { Navigation } from './Navigation/Navigation';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { OtherProducts } from './OtherProducts/OtherProducts';
 import { PictureText } from './PictureText/PictureText';
@@ -32,7 +32,6 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
-import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 
 export const Blocks = {
   Accordion,
@@ -63,7 +62,6 @@ export const Blocks = {
   TariffsTable,
   TextBlock,
   Tile,
-  Navigation,
   Placeholder,
   BonusBenefitsBlock,
   SafeDepositRental,

package/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/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/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/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>
     );