@redneckz/wildless-cms-uni-blocks 0.10.2 → 0.10.4

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { clamp } from '../../utils/clamp';
 import { style } from '../../utils/style';
 import type {
   CreditCalculatorParamsViewSettings,
@@ -50,6 +51,11 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
       paramsViewSettings,
     );
 
+    useEffect(() => {
+      setMoneyValue(clamp(moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
+      setMonthsValue(clamp(monthsValue, calculatorParams.minMonths, calculatorParams.maxMonths));
+    }, [calculatorParams]);
+
     return (
       <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">

package/src/components/Calculator/UnknownRate.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from '../../ui-kit/Img/Img';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 
@@ -13,7 +13,7 @@ export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) =>
       {title}
     </Text>
     <div className="mt-1 pt-1 pl-5 pb-1.5">
-      <Img image={{ icon: 'PercentIcon' }} width="90" height="85" asSVG />
+      <Icon name="PercentIcon" width="90" height="85" />
     </div>
     <div className="w-[250px] mt-3.5">
       <Paragraph size="text-xl-light" color="text-primary-text">

package/src/components/Calculator/constants.ts

@@ -1,6 +1,6 @@
 import { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
 import { BusinessDepositCalculatorSourceBookParams } from './useBusinessDepositCalculatorParams';
-import { CreditCalculatorSourceBookParams } from './useCreditCalculatorParams';
+import { CreditCalculatorSourceBookRateParams } from './useCreditCalculatorParams';
 import { DepositCalculatorSourceBookParams } from './useDepositCalculatorParams';
 
 export const DEFAULT_MIN_SUM = 10000;
@@ -21,7 +21,7 @@ export const MONTHS_IN_YEAR = 12;
 
 export const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
 
-export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookParams = {
+export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookRateParams = {
   minSum: DEFAULT_MIN_SUM,
   maxSum: DEFAULT_MAX_SUM,
   minMonths: DEFAULT_MIN_MONTHS,

package/src/components/Calculator/rangeHelpers.ts

@@ -2,6 +2,22 @@ import { maxBy } from '../../utils/maxBy';
 import { mergeIntervals } from '../../utils/mergeIntervals';
 import { minBy } from '../../utils/minBy';
 
+export const getLimitRangeByKeys = <
+  MinKey extends string,
+  MaxKey extends string,
+  T extends Record<MinKey | MaxKey, number>,
+>(
+  [minKey, maxKey]: [MinKey, MaxKey],
+  limitParams?: T,
+  rateRows: T[] = [],
+) =>
+  limitParams && limitParams[minKey] && limitParams[maxKey]
+    ? {
+        [minKey]: limitParams[minKey],
+        [maxKey]: limitParams[maxKey],
+      }
+    : getRangeByKeys([minKey, maxKey], rateRows);
+
 export const getRangeByKeys = <
   MinKey extends string,
   MaxKey extends string,
@@ -10,8 +26,8 @@ export const getRangeByKeys = <
   [minKey, maxKey]: [MinKey, MaxKey],
   rows: T[] = [],
 ) => ({
-  [minKey]: rows.length ? minBy()(rows.map((row) => row[minKey])) : 0,
-  [maxKey]: rows.length ? maxBy()(rows.map((row) => row[maxKey])) : 0,
+  [minKey]: rows.length ? minBy()(rows.filter((row) => row[minKey]).map((row) => row[minKey])) : 0,
+  [maxKey]: rows.length ? maxBy()(rows.filter((row) => row[maxKey]).map((row) => row[maxKey])) : 0,
 });
 
 export const getMergeRangesByKeys = <

package/src/components/Calculator/useBusinessDepositCalculatorParams.ts

@@ -38,7 +38,7 @@ export interface BusinessDepositCalculatorParams
 }
 
 export type BusinessDepositCalculatorData = {
-  rows: BusinessDepositCalculatorSourceBookParams[];
+  rateRows: BusinessDepositCalculatorSourceBookParams[];
 };
 
 export const useBusinessDepositCalculatorParams = (
@@ -70,7 +70,7 @@ export const useBusinessDepositCalculatorParams = (
     };
   }
   const businessDepositCalculatorSourceBookParams =
-    data?.rows?.find((_) => {
+    data?.rateRows?.find((_) => {
       return (
         isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
         isSmallBusiness === _.isSmallBusiness &&
@@ -84,7 +84,7 @@ export const useBusinessDepositCalculatorParams = (
 
   const income = getDepositIncome(rate, userInputParams);
   const finalSum = moneyValue + income;
-  const sourceBookRows = data?.rows || [DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS];
+  const sourceBookRows = data?.rateRows || [DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS];
 
   return {
     ...businessDepositCalculatorSourceBookParams,

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -1,7 +1,8 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import type { CreditCalculatorParamsViewSettings } from './CalculatorContent';
 import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
 import { getMonthlyPayment } from './getMonthlyPayment';
-import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
+import { checkRangeByKeys, getLimitRangeByKeys } from './rangeHelpers';
 import { useCalculatorParams } from './useCalculatorParams';
 
 export interface CommonCreditParams {
@@ -10,7 +11,7 @@ export interface CommonCreditParams {
   isPensionClient: boolean;
   isStateEmployee: boolean;
 }
-export interface CreditCalculatorSourceBookParams extends CommonCreditParams {
+export interface CreditCalculatorSourceBookRateParams extends CommonCreditParams {
   minSum: number;
   maxSum: number;
   minMonths: number;
@@ -18,6 +19,13 @@ export interface CreditCalculatorSourceBookParams extends CommonCreditParams {
   rate: number;
 }
 
+export interface CreditCalculatorSourceBookLimitParams extends CommonCreditParams {
+  minSum: number;
+  maxSum: number;
+  minMonths: number;
+  maxMonths: number;
+}
+
 export interface CreditCalculatorUserInputParams extends CommonCreditParams {
   isAnnuity: boolean;
   moneyValue: number;
@@ -25,13 +33,14 @@ export interface CreditCalculatorUserInputParams extends CommonCreditParams {
 }
 
 export interface CreditCalculatorParams
-  extends CreditCalculatorSourceBookParams,
+  extends CreditCalculatorSourceBookRateParams,
     CreditCalculatorUserInputParams {
   monthlyPayment: number;
 }
 
 export type CreditCalculatorData = {
-  rows: CreditCalculatorSourceBookParams[];
+  rateRows?: CreditCalculatorSourceBookRateParams[];
+  limitRows?: CreditCalculatorSourceBookLimitParams[];
 };
 
 export const useCreditCalculatorParams = (
@@ -41,60 +50,88 @@ export const useCreditCalculatorParams = (
 ): CreditCalculatorParams => {
   const { moneyValue, monthsValue } = userInputParams;
   const data = useCalculatorParams<CreditCalculatorData>(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
-  const isExcludeSalaryClient = !paramsViewSettings?.isShowSalaryClient;
-  const isExcludeStateEmployee = !paramsViewSettings?.isShowStateEmployee;
-  const isExcludePensionClient = !paramsViewSettings?.isShowPensionClient;
-  const isExcludeInsurance = !paramsViewSettings?.isShowInsurance;
-  const creditCalculatorSourceBookParams =
-    data?.rows?.find(
+
+  const creditCalculatorSourceBookLimitParams = data?.limitRows?.find((row) =>
+    checkRowCommonParams({
+      row,
+      userInputParams,
+      paramsViewSettings,
+    }),
+  );
+
+  const creditCalculatorSourceBookRateParams =
+    data?.rateRows?.find(
       (row) =>
-        checkRowByParam({
-          row,
-          userInputParams,
-          paramKey: 'isSalaryClient',
-          isExclude: isExcludeSalaryClient,
-        }) &&
-        checkRowByParam({
+        checkRowCommonParams({
           row,
           userInputParams,
-          paramKey: 'isStateEmployee',
-          isExclude: isExcludeStateEmployee,
-        }) &&
-        checkRowByParam({
-          row,
-          userInputParams,
-          paramKey: 'isPensionClient',
-          isExclude: isExcludePensionClient,
-        }) &&
-        checkRowByParam({
-          row,
-          userInputParams,
-          paramKey: 'isInsurance',
-          isExclude: isExcludeInsurance,
+          paramsViewSettings,
         }) &&
         checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
         checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row),
     ) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
 
-  const { rate } = creditCalculatorSourceBookParams;
+  const { rate } = creditCalculatorSourceBookRateParams;
   const monthlyPayment = getMonthlyPayment(rate, userInputParams);
-  const sourceBookRows = data?.rows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
+  const rateRows = data?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
 
-  return {
-    ...creditCalculatorSourceBookParams,
-    ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
-    ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
-    ...userInputParams,
-    monthlyPayment,
-  };
+  return useMemo(
+    () => ({
+      ...creditCalculatorSourceBookRateParams,
+      ...getLimitRangeByKeys(['minSum', 'maxSum'], creditCalculatorSourceBookLimitParams, rateRows),
+      ...getLimitRangeByKeys(
+        ['minMonths', 'maxMonths'],
+        creditCalculatorSourceBookLimitParams,
+        rateRows,
+      ),
+      ...userInputParams,
+      monthlyPayment,
+    }),
+    [userInputParams],
+  );
 };
 
-interface CheckRowByParamProps {
-  row: CreditCalculatorSourceBookParams;
+interface CheckSourceBookRowProps {
+  row: CommonCreditParams;
   userInputParams: CreditCalculatorUserInputParams;
-  paramKey: string;
-  isExclude: boolean;
+  paramsViewSettings?: CreditCalculatorParamsViewSettings;
 }
 
-const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }: CheckRowByParamProps) =>
-  isExclude || userInputParams[paramKey] === row[paramKey];
+interface CheckSourceBookRowFieldProps extends CheckSourceBookRowProps {
+  fieldKey: string;
+  viewSettingFieldKey: string;
+}
+
+const checkRowCommonParams = (props: CheckSourceBookRowProps) =>
+  checkRowParam({
+    ...props,
+    fieldKey: 'isSalaryClient',
+    viewSettingFieldKey: 'isShowSalaryClient',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isStateEmployee',
+    viewSettingFieldKey: 'isShowStateEmployee',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isPensionClient',
+    viewSettingFieldKey: 'isShowPensionClient',
+  }) &&
+  checkRowParam({
+    ...props,
+    fieldKey: 'isInsurance',
+    viewSettingFieldKey: 'isShowInsurance',
+  });
+
+const checkRowParam = ({
+  row,
+  userInputParams,
+  paramsViewSettings,
+  fieldKey,
+  viewSettingFieldKey,
+}: CheckSourceBookRowFieldProps) => {
+  const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
+
+  return isExclude || userInputParams[fieldKey] === row[fieldKey];
+};

package/src/components/Calculator/useDepositCalculatorParams.ts

@@ -33,7 +33,7 @@ export interface DepositCalculatorParams
 }
 
 export type DepositCalculatorData = {
-  rows: DepositCalculatorSourceBookParams[];
+  rateRows: DepositCalculatorSourceBookParams[];
 };
 
 export const useDepositCalculatorParams = (
@@ -45,13 +45,13 @@ export const useDepositCalculatorParams = (
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
   );
-  const defaultMonth = data?.rows[0]
-    ? getMiddleMonth(data.rows[0].minMonths, data.rows[0].maxMonths)
+  const defaultMonth = data?.rateRows[0]
+    ? getMiddleMonth(data.rateRows[0].minMonths, data.rateRows[0].maxMonths)
     : 1;
   const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
   const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
   const depositCalculatorSourceBookParams =
-    data?.rows?.find(
+    data?.rateRows?.find(
       (row) =>
         checkRowByParam({
           row,
@@ -72,7 +72,7 @@ export const useDepositCalculatorParams = (
   const { rate } = depositCalculatorSourceBookParams;
   const income = getDepositIncome(rate, userInputParams);
   const finalSum = moneyValue + income;
-  const sourceBookRows = data?.rows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];
+  const sourceBookRows = data?.rateRows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];
 
   return {
     ...depositCalculatorSourceBookParams,

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -15,7 +15,7 @@ export const CarouselEventCard = JSX<CarouselEventCardProps>(
     return (
       <BlockWrapper className={style('w-[365px]', className)} {...rest}>
         <LinkWrapper className="flex flex-col" href={href} target={target}>
-          {icon?.icon ? <Img image={icon} asSVG /> : null}
+          {icon?.icon ? <Img image={icon} /> : null}
           {icon?.src ? <Img image={icon} /> : null}
           {title ? (
             <Heading headingType="h6" as="h4" className="text-left pt-3 mb-2" title={title} />

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -64,7 +64,7 @@ const renderImage = (image?: Picture) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
-      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} asSVG />
+      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} />
     ) : null}
   </div>
 );

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -16,7 +16,7 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
       <BlockWrapper className={style('border border-gray', className)} {...rest}>
         <LinkWrapper className="flex" href={href} target={target}>
           <div className="w-[200px] min-w-[200px] self-center">
-            {icon?.icon ? <Img image={icon} asSVG /> : null}
+            {icon?.icon ? <Img image={icon} /> : null}
             {icon?.src ? <Img image={icon} /> : null}
           </div>
           <div className="p-8 pl-3 w-full">

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -63,7 +63,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
 
 const renderIconBlock = (icon: Picture | undefined) => (
   <div className="absolute bottom-0 right-0">
-    {icon?.icon ? <Img image={icon} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} /> : null}
     {icon?.src ? <Img image={icon} /> : null}
   </div>
 );

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -60,7 +60,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 const renderIconBlock = (icon?: Picture) => (
   <div className="w-[267px] min-w-[267px] self-center">
     {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
@@ -78,7 +78,6 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
       name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
       width="16"
       height="16"
-      asSVG
     />
   </button>
 );
@@ -103,7 +102,7 @@ const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
 
 const renderHitIcon = (): VNode => (
   <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-    <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
+    <Icon iconVersion="black" name="HeartIcon" width="23" height="22" />
     <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
       ХИТ
     </Paragraph>

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -25,7 +25,6 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
         image={icon}
         width="63"
         height="63"
-        asSVG
       />
     )}
     {image?.src && <Img className="mb-[18px]" image={image} />}

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -8,7 +8,7 @@ interface CurrentLocationProps {
 
 export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', address }) => (
   <div className={`flex ${className}`}>
-    <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
+    <Img image={{ icon: 'GpsIcon' }} width="24" height="24" />
     <div className="ml-3">
       {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
       <p className="text-secondary-text m-0 text-m">Курс указан для заданного офиса</p>

package/src/components/Footer/Footer.mobile.tsx

@@ -55,7 +55,7 @@ const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
 
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-s mb-4 w-6">
-      {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}
+      {icon ? <Img className="pr-1" image={icon} width="24" height="24" /> : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );

package/src/components/Footer/MediaButton.tsx

@@ -91,7 +91,6 @@ export const MediaButton = JSX<MediaButtonProps>(
             imageClassName="group-hover/media:text-white"
             width="24"
             height="24"
-            asSVG
           />
         ) : null}
       </Button>

package/src/components/Header/DropdownMenu.tsx

@@ -2,8 +2,8 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
-import type { LinkProps } from '../../model/LinkProps';
 import { style } from '../../utils/style';
+import type { LinkProps } from '../../model/LinkProps';
 
 interface DropdownMenuProps {
   className?: string;
@@ -26,7 +26,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
       ref={ref}
     >
       <button
-        className="group/btn flex justify-between items-center h-6 ml-6"
+        className="group/btn flex justify-between items-center h-6"
         aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
         onClick={handleToggle}
       >
@@ -40,7 +40,10 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
           ))}
       </button>
       <div
-        className={style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden')}
+        className={style(
+          'absolute flex flex-col rounded-md bg-white p-6 pb-2',
+          visible ? '' : 'hidden',
+        )}
         aria-hidden={!visible}
       >
         {items?.map((item, i) => {

package/src/components/Header/Header.tsx

@@ -35,7 +35,7 @@ export const Header = JSX<HeaderProps>(
   }) => {
     const router = useRouter();
 
-    const { topItems, logo, defaultLocation, foreignOffices, officesLink } =
+    const { topItems, logo, defaultLocation, foreignOffices, officesLink, internetBankUrl } =
       useSWRResource<SitemapData>(
         projectSettings.SITEMAP || 'sitemap',
         rest.options?.page?.fallback,
@@ -76,7 +76,11 @@ export const Header = JSX<HeaderProps>(
             )}
           />
           {showSubMenu && activeTopItem?.items?.length ? (
-            <HeaderSubMenu subItems={activeTopItem.items} />
+            <HeaderSubMenu
+              subItems={activeTopItem.items}
+              version={version}
+              internetBankUrl={internetBankUrl}
+            />
           ) : null}
         </div>
         <SearchDialog topItems={topItems} />

package/src/components/Header/HeaderBurger.tsx

@@ -23,7 +23,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
           className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
           onClick={onClick}
         >
-          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" asSVG />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
         </button>
         <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
@@ -31,7 +31,6 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
             width="20"
             height="20"
             className="text-primary-main box-border mr-2"
-            asSVG
           />
           <Text color="text-secondary-text">{location.name}</Text>
         </button>
@@ -48,9 +47,7 @@ const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
 
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-s mb-4 hover:text-primary-main">
-      {icon ? (
-        <Img className="text-primary-main pr-1" image={icon} width="24" height="24" asSVG />
-      ) : null}
+      {icon ? <Img className="text-primary-main pr-1" image={icon} width="24" height="24" /> : null}
       <span className="font-medium pl-0.5">{text}</span>
     </a>
   );

package/src/components/Header/HeaderChatBotButton.tsx

@@ -38,5 +38,7 @@ const renderChatBotButton = ({ className, iconVersion, onClick }: HeaderChatBotB
     image={{ icon: 'HeadphonesIcon', iconVersion }}
     ariaLabel="Чат"
     onClick={onClick}
+    buttonSize="large"
+    isGrayBg={true}
   />
 );

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -2,13 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import { projectSettings } from '../../ProjectSettings';
 import { useDialog } from '../../ui-kit/Dialog/useDialog';
 import { LOCATION_DIALOG_ID } from '../../ui-kit/LocationDialog/LocationDialog';
 import { SEARCH_DIALOG_ID } from '../../ui-kit/SearchDialog/SearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
-import { HeaderChatBotButton } from './HeaderChatBotButton';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
@@ -40,9 +38,6 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           ariaLabel="Поиск"
           onClick={handleOpenSearchModal}
         />
-        {projectSettings.CHAT_BOT ? (
-          <HeaderChatBotButton iconVersion={iconVersion} chat={projectSettings.CHAT_BOT} />
-        ) : null}
       </div>
     );
   },

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,24 +1,42 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { style } from '../../utils/style';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   className?: string;
   isRounded?: boolean;
+  buttonSize?: 'default' | 'large';
+  isGrayBg?: boolean;
   disabled?: boolean;
   ariaLabel?: string;
   onClick?: () => void;
 }
 
+const BUTTON_SIZE_STYLE = {
+  default: 'w-6 h-6',
+  large: 'w-12 h-12',
+};
+
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
-  ({ className, isRounded, disabled, ariaLabel, image, onClick }) => (
+  ({
+    className,
+    isRounded,
+    buttonSize = 'default',
+    isGrayBg = false,
+    disabled,
+    ariaLabel,
+    image,
+    onClick,
+  }) => (
     <button
       className={style(
-        'group/btn border-0 p-0 flex items-center bg-inherit',
+        'group/btn border-0 flex shrink-0 items-center',
+        isGrayBg ? 'p-3 rounded-full' : 'p-0 bg-inherit',
+        isGrayBg && !isRounded ? 'bg-main-divider' : '',
         isRounded
           ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
-          : 'w-6 h-6 text-primary-text hover:text-primary-main',
+          : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`,
         'group-data-transparent:text-white',
         className,
       )}
@@ -31,7 +49,6 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
         image={image}
         className={style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : '')}
         imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
-        asSVG
       />
     </button>
   ),