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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.ui.json

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

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

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

package/mobile/src/components/Gallery/Gallery.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/mobile/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/mobile/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) => {

package/mobile/src/components/Header/HeaderSubMenuItem.tsx

@@ -1,6 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import {
+  useIntersectionObserver,
+  type IntersectionObserverOptions,
+} from '../../hooks/useIntersectionObserver';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
@@ -9,7 +12,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
   className?: string;
   active?: boolean;
   bgColor?: BgColorVersion;
-  observerOptions?: IntersectionObserverInit;
+  observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;
 }
 

package/mobile/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -35,7 +35,7 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
             <DefaultFoldButton
               label={label}
               icon={icons[Number(isUnfolded)]}
-              dataTheme={rest.options?.page?.colorPalette || colorPalette}
+              dataTheme={colorPalette || rest.options?.page?.colorPalette}
               onClick={onToggle}
             />
           )}

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -55,7 +55,16 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ),
 );
 
-RollupItem.childrenTypes = [];
+RollupItem.childrenTypes = {
+  exclude: [
+    'RollupItem',
+    'Accordion',
+    'AccordionItem',
+    'OtherProducts',
+    'OtherProductsItem',
+    'VerticalLayout',
+  ],
+};
 
 const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
   const iconsPrimary: IconName[] = ['PlusIcon', 'MinusIcon'];

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -31,15 +31,17 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', gap = '', align = 'left', version = 'transparent', ...rest }) => (
+  ({ className = '', gap = '', align, version = 'transparent', ...rest }) => (
     <BlockWrapper
       className={[
         'flex flex-col',
         gapStyleMap[gap],
-        alignStyle[align],
+        align && alignStyle[align],
         backgroundStyleMap[version],
         className,
-      ].join(' ')}
+      ]
+        .filter(Boolean)
+        .join(' ')}
       {...rest}
     >
       {renderChildren(rest)}

package/mobile/src/hooks/useIntersectionObserver.ts

@@ -1,11 +1,23 @@
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useMemo, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export interface IntersectionObserverOptions<E extends Element = Element> {
+  sensitivity?: number; // from 0 to 1
+  rootRef?: { current: E | null };
+}
+
+const SENSITIVITY_SCALE = 10;
 
 export function useIntersectionObserver<R extends Element>(
   observerCallback: IntersectionObserverCallback,
-  observerOptions?: IntersectionObserverInit,
+  { sensitivity, rootRef }: IntersectionObserverOptions = {},
 ) {
   const ref = useRef<R | null>(null);
 
+  const observerOptions = useMemo(
+    () => ({ threshold: sensitivityToThreshold(sensitivity), root: rootRef?.current }),
+    [sensitivity, rootRef?.current],
+  );
+
   useEffect(() => {
     if (!ref.current) {
       return undefined;
@@ -21,3 +33,12 @@ export function useIntersectionObserver<R extends Element>(
 
   return ref;
 }
+
+function sensitivityToThreshold(sensitivity = 0): number[] {
+  const thresholdsCount = Math.round(sensitivity * SENSITIVITY_SCALE);
+
+  return new Array(thresholdsCount)
+    .fill(0)
+    .map((_, thi) => Math.min(thi / thresholdsCount), 1)
+    .concat(1);
+}

package/mobile/src/hooks/useLink.ts

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../model/LinkProps';
 import { adjustHref } from '../utils/adjustHref';
-import { isURL } from '../utils/url';
+import { isHash, isURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
@@ -24,7 +24,7 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
         props.onClick && props.onClick(ev);
         const isLocalHref = href && !isURL(href);
         const isLocalTarget = !props.target || props.target === '_self';
-        if (isLocalHref && isLocalTarget) {
+        if (isLocalHref && isLocalTarget && !isHash(href)) {
           ev?.preventDefault();
           router.push(href);
         }

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -20,13 +20,12 @@ export interface DispositionItem extends LinkProps {
 }
 
 export interface SitemapDataProps {
-  /** @title Основное меню */
   topItems?: TopMenuItem[];
-  /** @title Дополнительное меню */
   dispositions?: DispositionItem[];
   logo?: {
     image?: Picture;
     title?: string;
   };
   defaultLocation?: string;
+  officesLink?: string;
 }

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

@@ -11,15 +11,6 @@ interface BlockWrapperProps extends UniBlockProps {
   role?: string;
 }
 
-const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
-const THRESHOLD_ARRAY_LENGTH = 18;
-const THRESHOLD_ARRAY_START_VALUE =
-  (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
-
-const OBSERVER_OPTIONS = {
-  threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
-};
-
 export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ className, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
@@ -33,7 +24,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       () => changeHashOnObserve({ anchor, anchorClickRef }),
       [anchor],
     );
-    const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
+    const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
 
     useEffect(
       () =>
@@ -65,12 +56,6 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   },
 );
 
-function getIntersectionThreshold(_: number, i: number): number {
-  const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
-
-  return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
-}
-
 function changeHash(label?: string) {
   if (label) {
     globalThis.document.location.hash = label;