@redneckz/wildless-cms-uni-blocks 0.6.34 → 0.6.36

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -5,19 +5,13 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
-import {
-  DEFAULT_MAX_MONTHS,
-  DEFAULT_MAX_SUM,
-  DEFAULT_MIN_MONTHS,
-  DEFAULT_MIN_SUM,
-  DEFAULT_MONTHS,
-  DEFAULT_SUM,
-} from './constants';
+import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { useDepositCalculatorParams } from './useDepositCalculatorParams';
 
 export interface DepositCalculatorProp extends DepositCalculatorParams, CommonCalculatorProps {
   className?: string;
@@ -38,13 +32,18 @@ const depositTypeItems = [
 ];
 
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
-  ({ className = '', rate, buttons, footnote }) => {
+  ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
-    const [isEveryMonth, toggleIsEveryMonth] = useState(false);
+    const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+    const userInputParams = {
+      moneyValue,
+      monthsValue,
+      isMonthlyInterestPayment,
+    };
 
-    const income = 948841;
-    const finallySum = 1218841;
+    const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
+    const { income, finalSum, rate } = calculatorParams;
 
     return (
       <section className={className}>
@@ -52,18 +51,14 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {renderWantedSumInput(
             'Сумма вклада, ₽',
             {
-              moneyValue,
-              minSum: DEFAULT_MIN_SUM,
-              maxSum: DEFAULT_MAX_SUM,
+              ...calculatorParams,
             },
             setMoneyValue,
           )}
           {renderMonthsInput(
             'Срок вклада, месяцев',
             {
-              minMonths: DEFAULT_MIN_MONTHS,
-              maxMonths: DEFAULT_MAX_MONTHS,
-              monthsValue,
+              ...calculatorParams,
             },
             setMonthsValue,
           )}
@@ -73,13 +68,13 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {income ? (
             <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
           ) : null}
-          {finallySum ? (
-            <CalculatorValueBlock title="Сумма в конце срока" value={finallySum} postfix="₽" />
+          {finalSum ? (
+            <CalculatorValueBlock title="Сумма в конце срока" value={finalSum} postfix="₽" />
           ) : null}
           <RadioButtonGroup
             items={depositTypeItems}
-            checkedItem={isEveryMonth ? EVERY_MONTH : AT_END_TERM}
-            onChange={(text: string) => toggleIsEveryMonth(text === EVERY_MONTH)}
+            checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
+            onChange={(text: string) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH)}
           />
           {renderButtonSection(buttons)}
           {renderFootnote(footnote)}

package/src/components/Calculator/constants.ts

@@ -1,5 +1,6 @@
 import { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
 import { CreditCalculatorSourceBookParams } from './useCreditCalculatorParams';
+import { DepositCalculatorSourceBookParams } from './useDepositCalculatorParams';
 
 export const DEFAULT_MIN_SUM = 60000;
 export const DEFAULT_MAX_SUM = 2000000;
@@ -41,5 +42,15 @@ export const DEFAULT_BONUS_CALCULATOR_PARAMS: BonusCalculatorSourceBookParams =
   restBonusRate: 0.01,
 };
 
+export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParams = {
+  minSum: 50000,
+  maxSum: 5000000,
+  minMonths: 2,
+  maxMonths: 120,
+  rate: 5.9,
+  isMonthlyInterestPayment: true,
+};
+
 export const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
 export const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
+export const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';

package/src/components/Calculator/useDepositCalculatorParams.ts

@@ -0,0 +1,64 @@
+import { DEFAULT_DEPOSIT_CALCULATOR_PARAMS, DEPOSIT_CALC_DEFAULT_DIR } from './constants';
+import { useCalculatorParams } from './useCalculatorParams';
+
+export interface CommonDepositParams {
+  isMonthlyInterestPayment: boolean;
+}
+export interface DepositCalculatorSourceBookParams extends CommonDepositParams {
+  minSum: number;
+  maxSum: number;
+  minMonths: number;
+  maxMonths: number;
+  rate: number;
+}
+
+export interface DepositCalculatorUserInputParams extends CommonDepositParams {
+  moneyValue: number;
+  monthsValue: number;
+}
+
+export interface DepositCalculatorParams
+  extends DepositCalculatorSourceBookParams,
+    DepositCalculatorUserInputParams {
+  income: number;
+  finalSum: number;
+}
+
+export type DepositCalculatorData = {
+  rows: DepositCalculatorSourceBookParams[];
+};
+
+export const useDepositCalculatorParams = (
+  userInputParams: DepositCalculatorUserInputParams,
+  sourceBookDir?: string,
+): DepositCalculatorParams => {
+  const { isMonthlyInterestPayment, moneyValue } = userInputParams;
+
+  const data = useCalculatorParams<DepositCalculatorData>(
+    sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
+  );
+
+  const depositCalculatorSourceBookParams =
+    data?.rows.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
+    DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+
+  const { rate } = depositCalculatorSourceBookParams;
+
+  const income = getDepositIncome(rate, userInputParams);
+  const finalSum = moneyValue + income;
+
+  return { ...depositCalculatorSourceBookParams, ...userInputParams, income, finalSum };
+};
+
+const getDepositIncome = (rate: number, userInputParams: DepositCalculatorUserInputParams) => {
+  const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
+
+  if (isMonthlyInterestPayment) {
+    return Math.round(moneyValue * Math.pow((1200 + rate) / 1200, monthsValue) - moneyValue);
+  } else {
+    /*
+    Приблизительный расчёт, не учитывающий разницу в количестве дней в месяцах. Месяц принят за 30 дней, год за 365 дней.
+    */
+    return Math.round((moneyValue * rate * 30 * monthsValue) / 365 / 100);
+  }
+};

package/src/components/Carousel/Carousel.fixture.tsx

@@ -3,6 +3,7 @@ import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { Carousel } from './Carousel';
 
 const options = {
@@ -66,4 +67,23 @@ export default {
       />
     </div>
   ),
+  program: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={2}
+        isBlur={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselProgramsCard',
+              content: BUSINESS_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: BUSINESS_CARD } : _)),
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/Carousel/Carousel.tsx

@@ -1,58 +1,76 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { CarouselContainer } from './CarouselContainer';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import {
+  SwipeListScroll,
+  useSwipeListScroll,
+} from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import type { CarouselContent } from './CarouselContent';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
 }
 
+const ITEMS_GAP = 4;
+
 const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
+const scrollButtonStyle = 'absolute top-1/2 z-50';
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
     const { blocks: childBlocks } = rest.block || {};
     const count = itemCount || childBlocks?.length || 0;
 
-    const containerRef = useRef<HTMLDivElement | null>(null);
-
-    const [activeIndex, controls] = useCarouselControls({
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
       itemCount: count,
-      visibleItemCount,
       isCyclic,
-      container: containerRef.current,
     });
-    const { isScrollAvailable } = controls;
 
     return (
-      <BlockWrapper className={`relative font-sans overflow-hidden ${className}`} {...rest}>
-        <CarouselContainer
-          activeIndex={activeIndex}
-          itemCount={count}
-          visibleItemCount={visibleItemCount}
+      <BlockWrapper className={`relative font-sans ${className}`} {...rest}>
+        <SwipeListContainer
           containerRef={containerRef}
+          visibleItemCount={visibleItemCount}
+          snapAlign="snap-start"
+          gap={ITEMS_GAP}
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
           {renderChildren(rest)}
-        </CarouselContainer>
-        {isScrollAvailable && isBlur ? (
+        </SwipeListContainer>
+        {(scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
           <div>
             <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
             <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
           </div>
         ) : null}
-        {renderArrows({
-          ...controls,
-          btnClass: ['left-8', 'right-8'],
-          className: 'top-1/2',
-        })}
+        {renderScrollButtons(scroll)}
       </BlockWrapper>
     );
   },
 );
 
-Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
+Carousel.childrenTypes = [
+  'CarouselCard',
+  'CarouselTariffsCard',
+  'CarouselLinks',
+  'CarouselProgramsCard',
+];
+
+const renderScrollButtons = ({
+  scrollLeft,
+  scrollRight,
+  canScrollLeft,
+  canScrollRight,
+}: SwipeListScroll) => (
+  <div>
+    {canScrollLeft ? (
+      <ScrollLeftButton className={`${scrollButtonStyle} left-8`} onClick={scrollLeft} />
+    ) : null}
+    {canScrollRight ? (
+      <ScrollRightButton className={`${scrollButtonStyle} right-8`} onClick={scrollRight} />
+    ) : null}
+  </div>
+);

package/src/components/CarouselProgramsCard/CarouselProgramsCard.example.json

@@ -0,0 +1,25 @@
+{
+  "icon": {
+    "icon": "SignDocsIcon",
+    "format": "webp",
+    "size": {
+      "width": 200,
+      "height": 242
+    }
+  },
+  "title": "Заголовок",
+  "list": [
+    {
+      "title": "Ячейка 1-1",
+      "description": "Описание 1-1"
+    },
+    {
+      "title": "Ячейка 1-2",
+      "description": "Описание 1-2"
+    },
+    {
+      "title": "Ячейка 1-3",
+      "description": "Описание 1-3"
+    }
+  ]
+}

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -0,0 +1,38 @@
+import type { Picture } from '../../model/Picture';
+import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselProgramsCard } from './CarouselProgramsCard';
+import { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+const imageMonth: Picture = {
+  src: 'coin.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 242,
+  },
+  title: 'money',
+};
+
+const list = [
+  { title: 'От 16 до 81', description: 'платежей' },
+  {
+    title: 'От 3 до 7,5 млн руб. ',
+    description: 'остаток по счету',
+  },
+];
+
+export const BUSINESS_CARD: CarouselProgramsCardContent = {
+  title: 'Продвинутый',
+  icon: imageMonth,
+  list,
+};
+
+const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard {...BUSINESS_CARD} />;
+const CAROUSEL_BUSINESS_CARD_SECONDARY = (
+  <CarouselProgramsCard {...BUSINESS_CARD} version="secondary" />
+);
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD}</div>,
+  secondary: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD_SECONDARY}</div>,
+};

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
+
+export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
+  ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
+    <BlockWrapper
+      className={`font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
+      {...rest}
+    >
+      <div className="w-[200px] min-w-[200px] self-end">
+        {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+        {icon?.src ? <Img image={icon} /> : null}
+      </div>
+      <div className="p-8 pl-3 w-full">
+        {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
+        {list.length ? <div className="flex flex-col gap-3">{list?.map(renderList)}</div> : null}
+      </div>
+    </BlockWrapper>
+  ),
+);
+
+const renderList = (_: HeadlineCommonProps, i: number) => (
+  <div key={String(i)} className="break-words">
+    {_.title ? <div className={`text-h6`}>{_.title}</div> : null}
+    {_.description ? <span className="text-l-light mt-1">{_.description}</span> : null}
+  </div>
+);

package/src/components/CarouselProgramsCard/CarouselProgramsCard.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/CarouselProgramsCard/CarouselProgramsCardContent.ts

@@ -0,0 +1,13 @@
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+/**
+ * @title Карточка программ карусели
+ */
+export type CarouselProgramsCardContent = TitleProps & {
+  icon?: Picture;
+  /** @title Список */
+  list?: HeadlineCommonProps[];
+  version?: BlockVersion;
+};

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
-import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselTariffsCard } from './CarouselTariffsCard';
-import { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 
 const imageMonth: Picture = {
   src: 'monthly-payment.png',

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -14,45 +14,50 @@ import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
+const VISIBLE_ROWS_COUNT = 1;
+
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
-    const hitStyle = getHitStyle(Boolean(isHighlighting));
     const rowsNode = rows.map(renderCardInfo);
-    const VISIBLE_ROWS_COUNT = 1;
-    const [visibleRows, hiddenRows] = [
-      rowsNode.slice(0, VISIBLE_ROWS_COUNT),
-      rowsNode.slice(VISIBLE_ROWS_COUNT),
-    ];
+    const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
+    const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
 
     return (
-      <BlockWrapper
-        className={`font-sans bg-white p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
-        {...rest}
-      >
-        {isHighlighting ? renderHitIcon() : null}
-        {icon?.src ? <Img className="flex justify-center" image={icon} /> : null}
-        {title ? (
-          <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
-        ) : null}
-        {button ? <Button className="w-full mt-4" {...button} /> : null}
-        {rows?.length ? (
-          <Foldable
-            renderFoldableSection={({ isUnfolded }) => (
-              <div>
-                {visibleRows}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
-              </div>
-            )}
-            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
-          />
-        ) : null}
+      <BlockWrapper className={`font-sans ${className}`} {...rest}>
+        <div
+          className={`relative bg-white border border-main-stroke min-w-[322px] p-8 ${getHitStyle(
+            isHighlighting,
+          )}`}
+        >
+          {isHighlighting ? renderHitIcon() : null}
+          {icon?.src ? <Img image={icon} /> : null}
+          {title ? (
+            <Heading
+              className="text-primary-text text-center pt-2"
+              headingType="h5"
+              title={title}
+            />
+          ) : null}
+          {button ? <Button className="w-full mt-4" {...button} /> : null}
+          {rows?.length ? (
+            <Foldable
+              renderFoldableSection={({ isUnfolded }) => (
+                <div>
+                  {visibleRows}
+                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+                </div>
+              )}
+              renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+            />
+          ) : null}
+        </div>
       </BlockWrapper>
     );
   },
 );
 
-const getHitStyle = (isHighlighting: boolean): string =>
-  isHighlighting ? 'mt-9 pt-[71px]' : 'mt-[70px] pt-9';
+const getHitStyle = (isHighlighting?: boolean): string =>
+  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
@@ -71,23 +76,19 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
 );
 
 const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
-  <div key={String(i)} className="py-5 border-b border-main-divider flex flex-col gap-1">
+  <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">{cell.description}</div> : null}
+    {cell?.description ? (
+      <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
+    ) : null}
   </div>
 );
 
-const renderHitIcon = (): VNode => {
-  const POSITION_STYLE = 'absolute -top-7 -right-4';
-
-  return (
-    <div
-      className={`h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`}
-    >
-      <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
-      <div className="text-center">Хит</div>
-    </div>
-  );
-};
+const renderHitIcon = (): VNode => (
+  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+    <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
+    <div className="text-center">Хит</div>
+  </div>
+);

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -62,7 +62,7 @@ const TableInner = JSX<ComparisonTableProps>(
     ));
 
     return orientation === 'horizontal' ? (
-      <SwipeListControl onSlideChange={handleSlideChange}>{tableColumns}</SwipeListControl>
+      <SwipeListControl onVisibleIndicesChange={handleSlideChange}>{tableColumns}</SwipeListControl>
     ) : (
       tableColumns
     );

package/src/components/Gallery/Gallery.mobile.tsx

@@ -45,7 +45,7 @@ function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps
 function renderCard(card: GalleryCardProps, key: number) {
   return (
     <div
-      className={`h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
+      className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-main-stroke p-4
       ${VersionStyleMap[card.version ?? 'primary']}`}
       key={key}
     >

package/src/components/Header/Header.tsx

@@ -25,7 +25,7 @@ export const Header = JSX<HeaderProps>(
   ({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
     const router = useRouter();
 
-    const { topItems, logo, defaultLocation } = useSWRResource<SitemapDataProps>(
+    const { topItems, logo, defaultLocation, officesLink } = useSWRResource<SitemapDataProps>(
       projectSettings.SITEMAP || 'sitemap',
       rest.options?.page?.fallback,
     );
@@ -57,6 +57,7 @@ export const Header = JSX<HeaderProps>(
             <HeaderSecondaryMenu
               className="ml-auto"
               defaultLocation={defaultLocation}
+              officesLink={officesLink}
               bgColor={bgColor}
             />
           </div>

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -8,6 +8,7 @@ import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
+  officesLink?: string;
   bgColor?: BgColorVersion;
 }
 
@@ -29,7 +30,7 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ className, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
+  ({ className, officesLink, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
     const [city, getCity] = useGeolocation(defaultLocation);
 
     return (
@@ -43,14 +44,16 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           onClick={getCity}
           bgColor={bgColor}
         />
-        <TopItem
-          className="mr-7"
-          flat={true}
-          href="#"
-          text="Офисы и банкоматы"
-          ariaLabel="Список всех доступных офисов и банкоматов"
-          bgColor={bgColor}
-        />
+        {officesLink ? (
+          <TopItem
+            className="mr-7"
+            flat={true}
+            href={officesLink}
+            text="Офисы и банкоматы"
+            ariaLabel="Список всех доступных офисов и банкоматов"
+            bgColor={bgColor}
+          />
+        ) : null}
         <HeaderSecondaryMenuButton
           className={`mr-5 group ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -21,10 +22,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
   const subItemsListRef = useRef<HTMLDivElement | null>(null);
-  const observerOptions = useMemo(
-    () => ({ threshold: 1, root: subItemsListRef.current }),
-    [subItemsListRef.current],
-  );
+  const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
   const subItemsVisibilityHandlers = useMemo(
     () =>
       subItems.map((_, index) => (isIntersecting: boolean) => {