@redneckz/wildless-cms-uni-blocks 0.16.1 → 0.16.3-isr

package/mobile/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -5,24 +5,23 @@ import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
 import { env } from '../../Env';
 import { useLocation } from '../../hooks/useLocation';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
+import { LocationDialog } from '../../ui-kit/LocationDialog/LocationDialog';
 import { getBasePath } from '../../utils/getBasePath';
 import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
 
 export interface BurgerMenuDialogProps {
-  menuRef: {
-    current?: HTMLDivElement | null;
-  };
+  menuRef: { current?: HTMLDivElement | null };
   menuItem?: StickyMenuItem;
   locationDialogProps?: HeaderData & JSONRefObject;
-  closeAll: () => void;
+  onClose?: () => void;
 }
 
 export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
-  ({ menuRef, menuItem, locationDialogProps, closeAll }) => {
-    const locationDialog = useLocationDialog(locationDialogProps || {});
-    const [{ name: location }] = useLocation();
+  ({ menuRef, menuItem, locationDialogProps, onClose }) => {
+    const locationDialog = useDialog(LocationDialog, locationDialogProps);
+    const { name: location } = useLocation();
     const menuDimensions = menuRef?.current?.getBoundingClientRect();
 
     const handleIframeLoad = useCallback(() => {
@@ -44,10 +43,10 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
     useEffect(() => {
       const onMessage = (e: MessageEvent<any>) => {
         if (e.data.type === 'location') {
-          locationDialog.open();
+          locationDialog.open({});
         }
         if (e.data.type === 'reload') {
-          closeAll();
+          onClose?.();
         }
         if (e.data.type === 'resize') {
           const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
@@ -61,16 +60,17 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
       return () => {
         globalThis.removeEventListener('message', onMessage);
       };
-    }, []);
+    }, [onClose]);
 
     return (
       <StickyBottomMenuDialog
-        onClick={(e) => e.stopPropagation()}
         head={
           <div className="flex items-center justify-center px-xl">
             <Heading as="h4" title={menuItem?.title} className="font-medium" />
           </div>
         }
+        onClick={(e) => e.stopPropagation()}
+        onClose={onClose}
       >
         <div className="bg-white pb-20 pt-1 text-l">
           <iframe

package/mobile/src/components/StickyBottomMenu/StickyBottomMenu.tsx

@@ -28,41 +28,39 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
   const [activeIndex, setActiveIndex] = useState(-1);
   const [currentItemPosition, setCurrentItemPosition] = useState<string>('');
 
-  const { open: openDialog, closeAll } = useDialogManager();
+  const { closeAll } = useDialogManager();
 
-  const closeDialog = useCallback(() => {
+  const handleClose = useCallback(() => {
     setActiveIndex(-1);
     setCurrentItemPosition('');
     closeAll();
   }, [closeAll]);
 
-  const dialogRef = useOutsideClick<HTMLDivElement>(closeDialog);
+  const dialogRef = useOutsideClick<HTMLDivElement>(handleClose);
   const menuRef = useRef<HTMLDivElement | null>(null);
 
   const [isBurgerMenuDialogOpen, { toggle }] = useBurgerMenuDialog({
     menuRef,
     centralMenuItem,
-    closeAll,
-    openDialog,
     locationDialogProps: rest.header,
+    onClose: handleClose,
   });
 
-  const [{ openBottomMenuItemDialog }] = useBottomMenuItemDialog({
+  const openBottomMenuItemDialog = useBottomMenuItemDialog({
     menuRef,
     dialogRef,
-    closeDialog,
-    openDialog,
     leftItems,
     rightItems,
+    onClose: handleClose,
   });
 
   const handleMenuBurgerClick = useCallback(
     (e: PreventableEvent) => {
-      closeDialog();
       e.stopPropagation();
+      handleClose();
       toggle();
     },
-    [closeDialog, toggle],
+    [handleClose, toggle],
   );
 
   const handleMenuItemClick = useCallback(

package/mobile/src/components/StickyBottomMenu/StickyBottomMenuDialog.tsx

@@ -1,8 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type VNode } from '../../model/VNode';
 import { CloseButton } from '../../ui-kit/DialogManager/CloseButton';
-import { useDialogManager } from '../../ui-kit/DialogManager/useDialogManager';
 import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
@@ -14,26 +12,17 @@ export interface StickyBottomMenuDialogProps {
 }
 
 export const StickyBottomMenuDialog = JSX<StickyBottomMenuDialogProps>(
-  ({ className, head, children, onClose, onClick }) => {
-    const { close } = useDialogManager();
-
-    const handleClose = useCallback(() => {
-      close();
-      onClose && onClose();
-    }, [onClose]);
-
-    return (
-      <div
-        onClick={onClick}
-        className={style('relative min-h-full bg-white p-0 rounded-xl top-32', className)}
-        role="dialog"
-      >
-        <div className="sticky py-xl top-0 rounded-xl bg-white z-10">
-          <CloseButton className="absolute top-1.5 right-0" onClose={handleClose} />
-          <div className="container">{head}</div>
-        </div>
-        <div className="container pb-6xl">{children}</div>
+  ({ className, head, children, onClose, onClick }) => (
+    <div
+      onClick={onClick}
+      className={style('relative bg-white p-0 rounded-xl top-32', className)}
+      role="dialog"
+    >
+      <div className="sticky py-xl top-0 rounded-xl bg-white z-10">
+        <CloseButton className="absolute top-1.5 right-0" onClose={onClose} />
+        <div className="container">{head}</div>
       </div>
-    );
-  },
+      <div className="container pb-6xl">{children}</div>
+    </div>
+  ),
 );

package/mobile/src/components/StickyBottomMenu/useBottomMenuItemDialog.tsx

@@ -1,65 +1,67 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { type VNode } from '../../model/VNode';
-import { type DialogOptions } from '../../ui-kit/DialogManager/useDialogManager';
+import { useDialogManager } from '../../ui-kit/DialogManager/useDialogManager';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
 
 interface BottomMenuItemDialog {
-  menuRef?: {
-    current: HTMLDivElement | null;
-  };
-  dialogRef?: {
-    current: HTMLDivElement | null;
-  };
-  closeDialog: () => void;
-  openDialog: (dialog: VNode, options: DialogOptions) => void;
+  menuRef?: { current: HTMLDivElement | null };
+  dialogRef?: { current: HTMLDivElement | null };
   leftItems: StickyMenuItem[];
   rightItems: StickyMenuItem[];
+  onClose?: () => void;
 }
 
 export const useBottomMenuItemDialog = ({
   menuRef,
   dialogRef,
-  closeDialog,
-  openDialog,
   leftItems,
   rightItems,
+  onClose,
 }: BottomMenuItemDialog) => {
-  const openBottomMenuItemDialog = (index: number, itemsPosition: string) => {
-    const requiredArray = itemsPosition === 'left' ? leftItems : rightItems;
-    const menuDimensions = menuRef?.current?.getBoundingClientRect();
+  const { open, close } = useDialogManager();
 
-    const handleIframeLoad = () => {
-      const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
-      ifDoc.style.height = String(ifDoc?.contentWindow?.document.body.offsetHeight) + 'px';
-    };
+  const handleIframeLoad = useCallback(() => {
+    const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
+    ifDoc.style.height = `${ifDoc?.contentWindow?.document.body.offsetHeight}px`;
+  }, []);
 
-    openDialog(
-      <StickyBottomMenuDialog
-        onClick={(e) => e.stopPropagation()}
-        onClose={closeDialog}
-        className="mt-[20%] border-t border-current"
-        head={
-          <div className="flex items-center justify-center px-xl">
-            <Heading
-              as="h4"
-              title={requiredArray[index].description || requiredArray[index].title}
-            />
-          </div>
-        }
-      >
-        <div className="bg-white pb-20 pt-1 text-l" ref={dialogRef}>
-          <iframe
-            id="iframe-dialog"
-            onLoad={() => handleIframeLoad()}
-            src={requiredArray[index]?.src}
-            width={menuDimensions?.width || 0}
-          />
-        </div>
-      </StickyBottomMenuDialog>,
-      { id: itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title },
-    );
-  };
+  return useCallback(
+    (index: number, itemsPosition: string) => {
+      const requiredArray = itemsPosition === 'left' ? leftItems : rightItems;
+      const menuDimensions = menuRef?.current?.getBoundingClientRect();
 
-  return [{ openBottomMenuItemDialog }];
+      open({
+        id: itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title,
+        dialog: (
+          <StickyBottomMenuDialog
+            className="mt-[20%] border-t border-current"
+            head={
+              <div className="flex items-center justify-center px-xl">
+                <Heading
+                  as="h4"
+                  title={requiredArray[index].description || requiredArray[index].title}
+                />
+              </div>
+            }
+            onClick={(e) => e.stopPropagation()}
+            onClose={() => {
+              close();
+              onClose?.();
+            }}
+          >
+            <div className="bg-white pb-20 pt-1 text-l" ref={dialogRef}>
+              <iframe
+                id="iframe-dialog"
+                src={requiredArray[index]?.src}
+                width={menuDimensions?.width ?? 0}
+                onLoad={handleIframeLoad}
+              />
+            </div>
+          </StickyBottomMenuDialog>
+        ),
+      });
+    },
+    [handleIframeLoad, leftItems, rightItems, onClose],
+  );
 };

package/mobile/src/components/StickyBottomMenu/useBurgerMenuDialog.tsx

@@ -1,58 +1,40 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type HeaderData } from '../../data/HeaderData';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { type VNode } from '../../model/VNode';
 import { isDialogOpen } from '../../ui-kit/DialogManager/isDialogOpen';
-import { type DialogOptions } from '../../ui-kit/DialogManager/useDialogManager';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { useDialogsList } from '../../ui-kit/DialogManager/useDialogsList';
+import { noop } from '../../utils/noop';
 import { BurgerMenuDialog } from './BurgerMenuDialog';
 
 export const BURGER_MENU_DIALOG_ID = 'burgerMenuDialog';
 
 interface BurgerMenuDialog {
-  menuRef: {
-    current?: HTMLDivElement | null;
-  };
+  menuRef: { current?: HTMLDivElement | null };
   centralMenuItem?: StickyMenuItem;
-  closeAll: () => void;
-  openDialog: (dialog: VNode, options: DialogOptions) => void;
   locationDialogProps?: HeaderData & JSONRefObject;
+  onClose?: () => void;
 }
 
 export const useBurgerMenuDialog = ({
   menuRef,
   centralMenuItem,
-  closeAll,
-  openDialog,
   locationDialogProps,
-}: BurgerMenuDialog): [
-  boolean,
-  {
-    toggle: () => void;
-  },
-] => {
-  const dialogs = useDialogsList();
+  onClose = noop,
+}: BurgerMenuDialog): [boolean, { toggle: () => void }] => {
+  const { open } = useDialog(BurgerMenuDialog);
+  const [dialogs] = useDialogsList(); // TODO Рефакторинг
   const isBurgerMenuOpen = isDialogOpen(BURGER_MENU_DIALOG_ID, dialogs);
 
-  const open = () =>
-    openDialog(
-      <BurgerMenuDialog
-        locationDialogProps={locationDialogProps}
-        menuRef={menuRef}
-        menuItem={centralMenuItem}
-        closeAll={closeAll}
-      />,
-      {
-        id: BURGER_MENU_DIALOG_ID,
-      },
-    );
-  const toggle = () => {
-    if (isBurgerMenuOpen) {
-      closeAll();
-    } else {
-      open();
-    }
-  };
+  const openDialog = useCallback(
+    () =>
+      open(
+        { menuRef, locationDialogProps, menuItem: centralMenuItem, onClose },
+        { id: BURGER_MENU_DIALOG_ID },
+      ),
+    [menuRef, locationDialogProps, centralMenuItem, onClose],
+  );
 
-  return [isBurgerMenuOpen, { toggle }];
+  return [isBurgerMenuOpen, { toggle: isBurgerMenuOpen ? onClose : openDialog }];
 };

package/mobile/src/components/TabsLayout/TabsLayout.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
-import { useRouter } from '../../hooks/useRouter';
+import { useRouter } from '../../external/useRouter';
 import { type BlockDef } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -40,6 +41,8 @@ export const TariffsTable = JSX<TariffsTableProps>(
     const [visibleRows, hiddenRows] =
       hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
 
+    const [isUnfolded, { toggle }] = useBool(false);
+
     return (
       <BlockWrapper
         className={style('relative space-y-6xl @4xl:space-y-xl', className)}
@@ -55,15 +58,13 @@ export const TariffsTable = JSX<TariffsTableProps>(
         />
         <div className="space-y-m overflow-hidden">
           {hiddenRowsNum > 0 ? (
-            <Foldable
-              renderFoldableSection={({ isUnfolded }) => (
-                <TariffsTableWrapper controls={controls}>
-                  {visibleRows}
-                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
-                </TariffsTableWrapper>
-              )}
-              renderFoldButton={renderDefaultFoldButton}
-            />
+            <Foldable>
+              <TariffsTableWrapper controls={controls}>
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+              </TariffsTableWrapper>
+              <DefaultFoldButton className="text-h4" isUnfolded={isUnfolded} onClick={toggle} />
+            </Foldable>
           ) : (
             <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>
           )}

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -12,10 +12,7 @@ export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 export const TextBlock = JSX<TextBlockProps>(
   ({ className = '', title, description, iconVersion, __html, richVersion, ...rest }) => (
     <BlockWrapper
-      className={style(
-        'flex gap-s sm:gap-m bg-white group-data-secondary:bg-primary-main/10',
-        className,
-      )}
+      className={style('flex gap-s sm:gap-m group-data-secondary:bg-primary-main/10', className)}
       {...rest}
     >
       {iconVersion === 'small' ? renderIcon() : null}
@@ -37,9 +34,7 @@ export const TextBlock = JSX<TextBlockProps>(
 );
 
 const renderIcon = () => (
-  <div
-    className={`rounded-full h-4 w-4 text-center text-xs font-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`}
-  >
+  <div className="rounded-full h-4 w-4 text-center text-xs font-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main">
     i
   </div>
 );

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

@@ -1,5 +1,5 @@
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import { useRouter } from '../../hooks/useRouter';
+import { useRouter } from '../../external/useRouter';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';

package/mobile/src/components/Video/Video.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useRouter } from '../../hooks/useRouter';
+import { useRouter } from '../../external/useRouter';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { adjustHref } from '../../utils/adjustHref';

package/mobile/src/external/locationNavigator.ts

@@ -0,0 +1,27 @@
+import { type Target } from '../model/LinkProps';
+
+export interface LocationNavigator {
+  assign: (url: string, target?: Target) => void;
+  readonly origin: string;
+  readonly href: string;
+}
+
+export function locationNavigator(): LocationNavigator {
+  return locationNavigator._impl();
+}
+
+locationNavigator._impl = (): LocationNavigator => ({
+  assign: (url, target) => {
+    globalThis.open(url, target || '_self');
+  },
+  get origin() {
+    return globalThis.location.origin;
+  },
+  get href() {
+    return globalThis.location.href;
+  },
+});
+
+locationNavigator.setup = (impl: () => LocationNavigator) => {
+  locationNavigator._impl = impl;
+};

package/mobile/src/hooks/useActiveRoute.ts

@@ -1,9 +1,8 @@
 import { env } from '../Env';
-import { type Router } from '../hooks/useRouter';
+import { useRouter, type Router } from '../external/useRouter';
 import { type LinkProps } from '../model/LinkProps';
 import { getBasePath } from '../utils/getBasePath';
 import { isURL, joinPath, withoutQuery } from '../utils/url';
-import { useRouter } from './useRouter';
 
 export function useActiveRoute<T extends LinkProps>(items: T[] | undefined = []): [number, T] {
   const router = useRouter();

package/mobile/src/hooks/useAspects/aspects/forwardQuery.ts

@@ -1,32 +1,20 @@
+import { locationNavigator } from '../../../external/locationNavigator';
 import { type Target } from '../../../model/LinkProps';
 import { type PreventableEventWithTarget } from '../../../ui-kit/PreventableEvent';
 import { adjustSessionQuery } from '../../../utils/adjustSessionQuery';
-import { tableFunc } from '../../../utils/tableFunc';
 import { isURL } from '../../../utils/url';
 
 export const forwardQuery = (ev: PreventableEventWithTarget) => {
   const anchor = (ev.target as Element | null)?.closest('a');
+  const navigator = locationNavigator();
 
-  if (isURL(anchor?.href) && !anchor?.href?.startsWith(globalThis.location?.origin)) {
+  if (isURL(anchor?.href) && !anchor?.href?.startsWith(navigator.origin)) {
     ev.preventDefault();
     ev.stopPropagation();
 
     const url = adjustSessionQuery(anchor?.href) || anchor?.href;
     if (url) {
-      const transition = getTransition(anchor?.target as Target);
-      transition?.(url);
+      navigator.assign(url, anchor?.target as Target);
     }
   }
 };
-
-const getTransition = tableFunc<Target, (url: string) => void>([
-  [(_) => _ === '_blank', (url) => globalThis.open(url, '_blank')],
-  [(_) => _ === '_parent', (url) => globalThis.parent && (globalThis.parent.location.href = url)],
-  [
-    (_) => _ === '_top',
-    (url) => {
-      globalThis.top && (globalThis.top.location.href = url);
-    },
-  ],
-  [() => true, (url) => globalThis.location && (globalThis.location.href = url)],
-]);

package/mobile/src/hooks/useAspects/aspects/getAspectsWithInclude.tsx

@@ -4,5 +4,5 @@ import { type AspectsAttribute } from '../useAspects';
 export const getAspectsWithInclude = (data?: AspectsDef[], include?: string): AspectsDef[] =>
   data?.map(({ aspectName, params }: AspectsAttribute) => ({
     aspectName,
-    params: aspectName === 'mindboxEvent' ? { ...params, eventJson: include } : params,
+    params: aspectName === 'snowplowEvent' ? { ...params, eventJSON: include } : params,
   })) as AspectsDef[];

package/mobile/src/hooks/useAspects/handleAspects.ts

@@ -2,13 +2,13 @@ import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { type Aspects, type AspectsAttribute } from './useAspects';
 
 export type HandleAspectsProps = {
-  aspectsAttributes: AspectsAttribute[];
+  aspectsAttributes?: AspectsAttribute[];
   aspects: Aspects;
   ev: PreventableEventWithTarget;
 };
 
 export const handleAspects = ({ aspectsAttributes, aspects, ev }: HandleAspectsProps) => {
-  for (const { aspectName, params } of aspectsAttributes) {
+  for (const { aspectName, params } of aspectsAttributes ?? []) {
     aspects[aspectName ?? '']?.(ev, params);
   }
 };

package/mobile/src/hooks/useAsyncEffect.ts

@@ -0,0 +1,16 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useAsyncEffect<Deps extends any[], R>(
+  effect: () => Promise<R | (() => void)>,
+  deps: Deps,
+): void {
+  useEffect(() => {
+    const free = effect();
+
+    return () => {
+      free.then((_) => {
+        _ instanceof Function && _();
+      });
+    };
+  }, deps);
+}

package/mobile/src/hooks/useBranches.ts

@@ -1,4 +1,5 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { API_BASE_URI } from '../api/apiBaseUrl';
 import { fetchJSON } from '../utils/fetchJSON';
 
 export interface Tariff {
@@ -24,7 +25,7 @@ export interface Branch {
   safeBoxCaseVolumes?: SafeBoxCaseVolume[];
 }
 
-const BRANCHES_URL = '/api/v1/branches';
+const BRANCHES_URL = `${API_BASE_URI}/branches`;
 const EMPTY_VALUE = [];
 
 export function useBranches(regionCode?: string): Branch[] {

package/mobile/src/hooks/useBranchesByRegions.ts

@@ -1,7 +1,9 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { API_BASE_URI } from '../api/apiBaseUrl';
 import { fetchJSONUnsafe, type FetchJSONUnsafeType } from '../utils/fetchJSON';
 
-const REGIONS_URL = '/api/v1/branchesByRegions';
+const REGIONS_URL = '/branchesByRegions';
+const PREMIUM_REGIONS_URL = '/premiumBranchesByRegions';
 
 export interface Region {
   region: string;
@@ -11,8 +13,11 @@ export interface Region {
   }[];
 }
 
-export function useBranchesByRegions(): Region[] {
-  const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe as FetchJSONUnsafeType<Region[]>);
+export function useBranchesByRegions(isPremium = false): Region[] {
+  const { data } = useAsyncData(
+    `${API_BASE_URI}${isPremium ? PREMIUM_REGIONS_URL : REGIONS_URL}`,
+    fetchJSONUnsafe as FetchJSONUnsafeType<Region[]>,
+  );
 
   return Array.isArray(data) ? data : [];
 }

package/mobile/src/hooks/useClickHandler.ts

@@ -1,7 +1,7 @@
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
+import { handlerDecorator } from '../external/handlerDecorator';
 import { saveSessionQuery } from '../utils/getSessionQuery';
-import { handlerDecorator } from './handlerDecorator';
 import { applyAspects } from './useAspects/applyAspects';
 import { useAspects } from './useAspects/useAspects';
 

package/mobile/src/hooks/useElementSpace.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type RefObject } from 'react';
+
+export const useElementSpace = (ref: RefObject<HTMLElement>, heightEl: number) => {
+  const [spaceAbove, setSpaceAbove] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (ref?.current) {
+        const { top } = ref.current.getBoundingClientRect();
+
+        const hasSpaceAbove = top > heightEl;
+
+        setSpaceAbove(hasSpaceAbove);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, [ref]);
+
+  return spaceAbove;
+};