@redneckz/wildless-cms-uni-blocks 0.10.1 → 0.10.3

package/mobile/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/mobile/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/mobile/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -5,7 +5,6 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { Text } from '../../ui-kit/Text/Text';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import type { CarouselEventCardContent } from './CarouselEventCardContent';
 
@@ -16,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={getIconWithVersion(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/mobile/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/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -5,7 +5,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
 
@@ -17,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={getIconWithVersion(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/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -5,7 +5,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
@@ -64,7 +63,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
 
 const renderIconBlock = (icon: Picture | undefined) => (
   <div className="absolute bottom-0 right-0">
-    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} /> : null}
     {icon?.src ? <Img image={icon} /> : null}
   </div>
 );

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -24,8 +24,16 @@
       "description": "Описание 1-2"
     },
     {
-      "title": "Ячейка 1-3",
-      "description": "Описание 1-3"
+      "buttons": [
+        {
+          "icon": {
+            "iconVersion": "color",
+            "icon": "DocIconMonoColor"
+          },
+          "version": "link",
+          "text": "Скачать файл"
+        }
+      ]
     }
   ]
 }

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -12,9 +12,11 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
-import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type {
+  CarouselTariffsCardContent,
+  TariffsCardCellProps,
+} from './CarouselTariffsCardContent';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
@@ -58,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={getIconWithVersion(icon)} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
@@ -76,25 +78,31 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
       name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
       width="16"
       height="16"
-      asSVG
     />
   </button>
 );
 
-const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
-  <div key={String(i)} className="py-5 border-b border-main-divider">
-    {cell?.title ? (
-      <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
-    ) : null}
-    {cell?.description ? (
-      <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
-    ) : null}
-  </div>
-);
+const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
+  const { title, description, buttons } = cell;
+
+  return (
+    <div key={String(i)} className="py-5 border-b border-main-divider">
+      {title ? (
+        <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
+      ) : null}
+      {description ? (
+        <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
+      ) : null}
+      {buttons?.length ? (
+        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
+      ) : null}
+    </div>
+  );
+};
 
 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/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.ui.json

@@ -1 +1,18 @@
-{}
+{
+  "content": {
+    "cardCells": {
+      "items": {
+        "buttons": {
+          "items": {
+            "icon": {
+              "ui:field": "icon"
+            },
+            "iconRight": {
+              "ui:field": "icon"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -1,7 +1,15 @@
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+export type TariffsCardCellProps = HeadlineCommonProps & {
+  /**
+   * @title Кнопка
+   * @maxItems 1
+   */
+  buttons?: ButtonWithIconProps[];
+};
 
 /**
  * @title Карточка тарифной карусели
@@ -14,5 +22,5 @@ export type CarouselTariffsCardContent = UniBlockContent &
     /** @title Кнопка */
     button?: ButtonProps;
     /** @title Ячейка */
-    cardCells?: HeadlineCommonProps[];
+    cardCells?: TariffsCardCellProps[];
   };

package/mobile/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/mobile/src/components/Footer/Footer.tsx

@@ -7,7 +7,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { RollupItem } from '../RollupItem/RollupItem';
@@ -56,9 +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={getIconWithVersion(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/mobile/src/components/Footer/MediaButton.tsx

@@ -3,7 +3,6 @@ import type { IconProps, Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 
 const ICONS_MAP: Array<{
@@ -68,8 +67,6 @@ export const MediaButton = JSX<MediaButtonProps>(
 
     const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 
-    const iconWithVersion = iconCustom ? getIconWithVersion(iconCustom) : undefined;
-
     return (
       <Button
         className={style(
@@ -88,13 +85,12 @@ export const MediaButton = JSX<MediaButtonProps>(
         version={version}
         {...rest}
       >
-        {iconWithVersion && !text ? (
+        {iconCustom && !text ? (
           <Img
-            image={iconWithVersion}
+            image={iconCustom}
             imageClassName="group-hover/media:text-white"
             width="24"
             height="24"
-            asSVG
           />
         ) : null}
       </Button>

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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>
   ),