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

package/src/components/GrantSupport/GrantSupport.tsx

@@ -2,8 +2,7 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspectsWithInclude';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { getRegularButtonClasses } from '../../ui-kit/LinkButton/getRegularButtonClasses';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Link } from '../../ui-kit/Link/Link';
 import { SelectControl } from '../../ui-kit/Select/SelectControl';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -17,16 +16,11 @@ export const GrantSupport = UniBlock<GrantSupportProps>(
     const [region, setRegion] = useState({ key: '' });
     const regions = regionSource?.regions ?? [];
 
-    const buttonStyle = getRegularButtonClasses({
-      className: 'text-white',
-      version: button?.version || 'primary',
-    });
     const regionHref = regions?.find((_) => _.name === region.key)?.href;
-    const buttonText = button?.text ? button.text : 'Перейти';
 
     return (
       <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
-        <div className="container max-w-[978px] space-y-m">
+        <div className="container space-y-m">
           {title ? <Heading headingType="h3" title={title} className="@xl:text-center" /> : null}
           {regions ? (
             <SelectControl
@@ -40,14 +34,15 @@ export const GrantSupport = UniBlock<GrantSupportProps>(
           ) : null}
           {regionHref ? (
             <div className="text-center">
-              <LinkButton
+              <Link
+                className={style('w-full @xl:w-auto')}
                 href={regionHref}
                 target="_blank"
-                className={style('p-m w-full @xl:w-auto', buttonStyle)}
+                version={button?.version ?? 'primary'}
                 data={getAspectsWithInclude(data, region?.key)}
               >
-                {buttonText}
-              </LinkButton>
+                {button?.text ? button.text : 'Перейти'}
+              </Link>
             </div>
           ) : null}
         </div>

package/src/components/Header/HeaderChatBotButton.tsx

@@ -12,21 +12,31 @@ interface HeaderChatBotButtonProps {
   onClick?: (ev: PreventableEventWithTarget) => void;
   ariaLabel?: string;
   version?: BlockVersion;
+  buttonSize?: 'default' | 'medium' | 'large';
 }
 
 export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>(
-  ({ chat = 'personal', iconVersion, className, ariaLabel = 'Чат', version }) => {
-    const load = useChatBot(chat);
+  ({
+    chat = 'personal',
+    iconVersion,
+    className,
+    ariaLabel = 'Чат',
+    version,
+    buttonSize = 'large',
+  }) => {
+    const { load, isLoading } = useChatBot(chat);
 
     return (
       <HeaderSecondaryMenuButton
         className={className}
-        image={{ icon: 'HeadphonesIcon', iconVersion }}
+        image={{ icon: 'ChatBotIcon', iconVersion }}
         ariaLabel={ariaLabel}
         onClick={load}
-        buttonSize="large"
+        buttonSize={buttonSize}
         isGrayBg={true}
         version={version}
+        isLoading={isLoading}
+        dataTestId="chat icon"
       />
     );
   },

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -8,8 +8,9 @@ import { useLocation } from '../../hooks/useLocation';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
-import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
-import { useSearchDialog } from '../../ui-kit/SearchDialog/useSearchDialog';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { LocationDialog } from '../../ui-kit/LocationDialog/LocationDialog';
+import { SearchDialog } from '../../ui-kit/SearchDialog/SearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
@@ -23,13 +24,13 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
   ({ className, version, ...rest }) => {
     const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
-    const [currentLocation] = useLocation(rest?.branches?.default);
+    const currentLocation = useLocation(rest?.branches?.default);
 
-    const searchDialog = useSearchDialog(rest);
-    const locationDialog = useLocationDialog(rest);
+    const searchDialog = useDialog(SearchDialog, rest);
+    const locationDialog = useDialog(LocationDialog, rest);
 
-    const openSearchDialog = useCallback(() => searchDialog.open(), [searchDialog]);
-    const openLocationDialog = useCallback(() => locationDialog.open(), [locationDialog]);
+    const openSearchDialog = useCallback(() => searchDialog.open({}), [searchDialog]);
+    const openLocationDialog = useCallback(() => locationDialog.open({}), [locationDialog]);
 
     return (
       <div

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -10,16 +10,20 @@ import { style } from '../../utils/style';
 export interface HeaderSecondaryMenuButtonProps extends ImageContent, AspectsProps {
   className?: string;
   isRounded?: boolean;
-  buttonSize?: 'default' | 'large';
+  buttonSize?: 'default' | 'medium' | 'large';
   isGrayBg?: boolean;
   disabled?: boolean;
   ariaLabel?: string;
   onClick?: (ev: PreventableEventWithTarget) => void;
   version?: BlockVersion;
+  isLoading?: boolean;
+  // Made special for chatBot, temporary
+  dataTestId?: string;
 }
 
 const BUTTON_SIZE_STYLE = {
   default: 'w-6 h-6',
+  medium: 'w-10 h-10',
   large: 'w-12 h-12',
 };
 
@@ -35,6 +39,8 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
     data,
     onClick,
     version,
+    isLoading,
+    dataTestId = '',
   }) => {
     const grayBg = isGrayBg && !isRounded ? 'bg-main-divider' : '';
     const bgColor = version === 'transparent' ? 'backdrop-opacity-30 bg-white/30' : grayBg;
@@ -56,16 +62,25 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
         aria-label={ariaLabel}
         onClick={onClick}
         // eslint-disable-next-line react/jsx-props-no-spreading
+        {...getDataTestIdAttribute(dataTestId)}
+        // eslint-disable-next-line react/jsx-props-no-spreading
         {...getAspectsAttributes(data)}
       >
-        <Img
-          image={image}
-          className={style('h-full', {
-            'bg-main-divider/20 rounded-full': isRounded,
-          })}
-          imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
-        />
+        {isLoading ? (
+          <div className="w-full h-full rounded-full border-4 border-r-transparent animate-spin text-primary-main" />
+        ) : (
+          <Img
+            image={image}
+            className={style('h-full', {
+              'bg-main-divider/20 rounded-full': isRounded,
+            })}
+            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
+          />
+        )}
       </button>
     );
   },
 );
+
+const getDataTestIdAttribute = (dataTestId?: string) =>
+  dataTestId ? { 'data-test-id': dataTestId } : null;

package/src/components/Header/HeaderTop.tsx

@@ -1,11 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { useRouter } from '../../hooks/useRouter';
+import { useRouter } from '../../external/useRouter';
 import { type BgColorVersion } from '../../model/BgColorVersion';
 import { type BlockVersion } from '../../model/BlockVersion';
+import { type IconVersion } from '../../model/IconVersion';
 import { type LogoType } from '../../model/LogoType';
+import { projectSettings } from '../../ProjectSettings';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Logo } from '../../ui-kit/Logo/Logo';
+import { HeaderChatBotButton } from './HeaderChatBotButton';
 import { type InternetButtonProps } from './HeaderProps';
 import { InternetBankButton } from './InternetBankButton';
 
@@ -22,6 +25,7 @@ export const HeaderTop = JSX<HeaderTopProps>(
   ({ bgColor, logo, alwaysShowLogo, internetBankButton, version, backwardButton }) => {
     const router = useRouter();
     const isRootLocation = router.pathname === '/';
+    const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { dataFooter, dataHeader, ...logoProps } = logo ?? {};
@@ -45,7 +49,17 @@ export const HeaderTop = JSX<HeaderTopProps>(
         ) : (
           renderBackButton(onClick, backwardButton)
         )}
-        <InternetBankButton version={version} {...internetBankButton} />
+        <div className="flex gap-lg items-center">
+          {projectSettings.CHAT_BOT ? (
+            <HeaderChatBotButton
+              version={version}
+              iconVersion={iconVersion}
+              chat={projectSettings.CHAT_BOT}
+              buttonSize="medium"
+            />
+          ) : null}
+          <InternetBankButton version={version} {...internetBankButton} />
+        </div>
       </div>
     );
   },

package/src/components/Header/useChatBot.ts

@@ -1,39 +1,86 @@
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { initializeExternalNS } from '../../hooks/useExternalNS';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { initializeExternalNS, initializeExternalStylesheet } from '../../hooks/useExternalNS';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 
 const CHAT_NAMESPACE = 'chatbot';
 const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
 const CHAT_FRAME_ID = 'webchat-js-container:webchat_rshb';
 const CHAT_STORAGE_NAME = 'webchat-keep-open';
+const BUSINESS_CHAT_PREFIX = '/webchat-api';
+const BUSINESS_CHAT_CLASSNAME =
+  '@container fixed right-0 bottom-0 top-0 h-full w-full z-[100] @3xl:w-auto h-fit';
 
 const CHATBOT_URL: Record<string, string> = {
   personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
-  business: '', //TODO: add url business chat
+  business: '/webchat',
 };
 
+interface WebChat {
+  render?: (id?: string, isOpen?: boolean, prefix?: string, className?: string) => void;
+  chatOpen?: () => void;
+  chatClose?: () => void;
+}
+
 export const useChatBot = (chat?: string) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   useEffect(() => globalThis.localStorage?.setItem(CHAT_STORAGE_NAME, String(Date.now())), []);
   const chatUrl = CHATBOT_URL[chat ?? ''];
 
-  return (ev: PreventableEventWithTarget) => {
-    if (!chatUrl) {
-      return;
-    }
-
-    if (chat !== 'personal') {
-      initializeExternalNS(CHAT_NAMESPACE, chatUrl);
-    } else {
-      const target = ev.target as HTMLElement;
-
-      if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
-        target?.classList.add(CHAT_BUTTON_EXTERNAL_NAME);
+  const load = useCallback(
+    (ev: PreventableEventWithTarget) => {
+      if (!chatUrl) {
+        return;
       }
 
-      const chatFrame = document.getElementById(CHAT_FRAME_ID);
-      if (!chatFrame) {
-        initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+      setIsLoading(true);
+      if (chat === 'business') {
+        renderBusinessChatBot(chatUrl).finally(() => setIsLoading(false));
+      } else {
+        renderPersonalChatBot(ev, chatUrl).finally(() => setIsLoading(false));
       }
-    }
-  };
+    },
+    [chatUrl, chat],
+  );
+
+  return { load, isLoading };
+};
+
+const renderPersonalChatBot = async (ev: PreventableEventWithTarget, chatUrl: string) => {
+  const target = ev.target as HTMLElement;
+
+  if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
+    target?.classList.add(CHAT_BUTTON_EXTERNAL_NAME);
+  }
+
+  const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
+  if (!chatFrame) {
+    await initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+  }
+};
+
+const renderBusinessChatBot = async (chatUrl: string) => {
+  const businessChat = (await initializeExternalNS(
+    CHAT_NAMESPACE,
+    `${chatUrl}/bundle.js`,
+    true,
+  )) as WebChat;
+
+  initializeExternalStylesheet(`${chatUrl}/bundle.css`);
+
+  const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
+  if (chatFrame) {
+    businessChat?.chatOpen?.();
+  } else {
+    createChatFrame();
+
+    businessChat?.render?.(CHAT_FRAME_ID, true, BUSINESS_CHAT_PREFIX, BUSINESS_CHAT_CLASSNAME);
+  }
+};
+
+const createChatFrame = () => {
+  const chatFrame = globalThis.document.createElement('div');
+  chatFrame.id = CHAT_FRAME_ID;
+
+  globalThis.document.body.appendChild(chatFrame);
 };

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -76,19 +76,20 @@ const renderInvestmentColumn = (
 ) => {
   const isSecondColumn = i === 1;
   const isLastColumn = i === arr.length - 1;
+  const reversedCells = column.cells?.reverse() || [];
 
   return (
     <div
       key={`column_${i}`}
       className={`${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`}
     >
-      {column.cells?.length ? (
+      {reversedCells.length ? (
         <div
           className={`w-full ${
             isLastColumn ? 'border-4 border-green-more-dark p-1.5 min-w-72' : ''
           }`}
         >
-          {column.cells.reverse().map(renderInvestmentCell)}
+          {reversedCells.map(renderInvestmentCell)}
         </div>
       ) : null}
     </div>

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,4 +1,4 @@
-import { useRouter, type Router } from '../../hooks/useRouter';
+import { useRouter, type Router } from '../../external/useRouter';
 import { type Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { RichText } from '../../ui-kit/RichText/RichText';
@@ -14,7 +14,7 @@ import {
   type LinkDocsContent,
 } from './LinkDocsContent';
 import { renderDefaultItem } from './renderDefaultItem';
-import { ReportDialogButton } from './RepordDialogButton';
+import { ReportDialogButton } from './ReportDialogButton';
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
   double: 'sm:flex-wrap sm:flex-row',
@@ -72,13 +72,13 @@ const renderLinkDocItem =
     }
 
     if ('reportSource' in docBlockDef && docBlockDef?.reportSource?.__html) {
-      return renderModalItem(docBlockDef, i);
+      return renderModalItem(icon)(docBlockDef, i);
     }
 
     return renderDefaultItem(router, icon)(docBlockDef, i);
   };
 
-const renderModalItem = (props: LinkDocDef | AttachmentDocDef, i: number) => {
+const renderModalItem = (icon: Picture) => (props: LinkDocDef | AttachmentDocDef, i: number) => {
   const commonProps = {
     text: props.text,
     target: props.target,
@@ -89,6 +89,7 @@ const renderModalItem = (props: LinkDocDef | AttachmentDocDef, i: number) => {
     <div role="listitem" key={String(i)}>
       <ReportDialogButton
         {...commonProps}
+        icon={icon}
         href={isLinkDoc(props) ? props?.href : props?.attachment?.src}
       />
       <RichText __html={props?.__html} />

package/src/components/LinkDocs/ReportDialogButton.tsx

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { ReportDialog, type ReportDialogProps } from '../../ui-kit/ReportDialog/ReportDialog';
+import { Text } from '../../ui-kit/Text/Text';
+import { renderImg } from './renderDefaultItem';
+
+export const ReportDialogButton = JSX<ReportDialogProps>(({ text, href, target, __html, icon }) => {
+  const { open } = useDialog(ReportDialog);
+  const openReportDialog = useCallback(
+    () => open({ __html, href, target }),
+    [__html, href, target],
+  );
+
+  return text ? (
+    <button
+      className="flex gap-s text-primary-text no-underline hover:text-primary-main"
+      onClick={openReportDialog}
+    >
+      {renderImg(icon)}
+      <Text font="font-light">{text}</Text>
+    </button>
+  ) : null;
+});

package/src/components/LinkDocs/linkDocsContentExample.ts

@@ -37,6 +37,7 @@ export const linkDocsContentExample: LinkDocsContent = {
       href: '/abc8/archive.zip',
       fileFormat: 'zip',
       fileSize: '2.3МБ',
+      __html: HTML,
     },
     {
       docType: 'Link',

package/src/components/LinkDocs/renderDefaultItem.tsx

@@ -1,4 +1,4 @@
-import { type Router } from '../../hooks/useRouter';
+import { type Router } from '../../external/useRouter';
 import { type Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
@@ -38,7 +38,7 @@ export const renderDefaultItem =
     );
   };
 
-const renderImg = (icon?: Picture) =>
+export const renderImg = (icon?: Picture) =>
   icon ? <Img className={linkIconStyle} image={icon} width="24" height="24" /> : null;
 
 const getExtFromHref = (href?: string) => {

package/src/components/OfficesAtmsMap/AtmsMap.tsx

@@ -30,7 +30,7 @@ export interface AtmsMapProps {
 }
 
 export const AtmsMap = JSX<AtmsMapProps>(({ descriptionData, className }) => {
-  const [currentLocation] = useLocation();
+  const currentLocation = useLocation();
 
   const regionCode = currentLocation?.code ?? '000';
 

package/src/components/OfficesAtmsMap/FiltrationForm.tsx

@@ -0,0 +1,68 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { Button } from '../../ui-kit/Button/Button';
+import { ButtonTitle } from '../../ui-kit/Button/ButtonTitle';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
+
+export interface RenderFiltrationFormProps {
+  filters: string[];
+  field: { field: FormFieldRegisterer<any>; reset: () => void };
+  onlyOffice?: boolean;
+  labels: Record<string, string>;
+}
+
+export const FiltrationForm = JSX<RenderFiltrationFormProps>(
+  ({ filters, field: { field, reset }, onlyOffice, labels }) => {
+    const visibleFiltersNum = onlyOffice ? 5 : 6;
+
+    const filtersCheckbox = (filters || []).map((key) => (
+      <Checkbox key={key} text={labels[key]} {...field(key)} />
+    ));
+
+    const [visibleFilters, hiddenFilters] =
+      visibleFiltersNum > 0
+        ? [filtersCheckbox.slice(0, visibleFiltersNum), filtersCheckbox.slice(visibleFiltersNum)]
+        : [filtersCheckbox, []];
+
+    const [isUnfolded, { toggle }] = useBool(false);
+
+    return (
+      <div>
+        {filters?.length ? (
+          <div>
+            <Foldable>
+              <div>
+                <div className={COMMON_FILTERS_STYLES}>{visibleFilters}</div>
+                <FoldableSection className={COMMON_FILTERS_STYLES} isUnfolded={isUnfolded}>
+                  {hiddenFilters}
+                </FoldableSection>
+              </div>
+              <div className="flex space-x-lg">
+                {onlyOffice ? (
+                  <DefaultFoldButton
+                    label={isUnfolded ? 'Меньше фильтров' : 'Больше фильтров'}
+                    isUnfolded={isUnfolded}
+                    embedded
+                    short
+                    onClick={toggle}
+                  />
+                ) : null}
+                <Button embedded onClick={reset}>
+                  <ButtonTitle>Очистить фильтр</ButtonTitle>
+                  <Icon name="CloseIcon" size="small" />
+                </Button>
+              </div>
+            </Foldable>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/src/components/OfficesAtmsMap/FoldableCardContent.tsx

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+
+export const FoldableCardContent = JSX(({ children }) => {
+  const [isUnfolded, { toggle }] = useBool(false);
+
+  return (
+    <div>
+      <div className="hidden sm:block">{children}</div>
+      <Foldable className="block sm:hidden">
+        <FoldableSection isUnfolded={isUnfolded}>{children}</FoldableSection>
+        <DefaultFoldButton
+          className="my-m mr-m border-b border-solid border-main-divider"
+          label={isUnfolded ? 'Скрыть' : 'Подробнее'}
+          isUnfolded={isUnfolded}
+          embedded
+          onClick={toggle}
+        />
+      </Foldable>
+    </div>
+  );
+});

package/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -1,17 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm } from '../../hooks/useForm';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
 import { type VNode } from '../../model/VNode';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 import { style } from '../../utils/style';
 import { FILTRATION_LABELS, FILTRATION_PREDICATES, INITIAL_FILTRATION_STATE } from './filters';
+import { FiltrationForm } from './FiltrationForm';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 import { renderButtonsGroup } from './renderButtonsGroup';
 import { renderDescriptionBlock } from './renderDescriptionBlock';
-import { renderFiltrationForm, type RenderFiltrationFormOptions } from './renderFiltrationForm';
 import { renderHeading } from './renderHeading';
+import { useOfficesAtmsMapData } from './useOfficesAtmsMapData';
 import { type BalloonContent } from './YandexMapProps';
 
 const defaultEmptyFunction = () => void 0;
@@ -52,40 +53,16 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
     const onlyOffice = title?.includes('Офис');
     const [filtrationState, { field, reset }] = useForm(INITIAL_FILTRATION_STATE);
 
-    const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
-      const _filteredItems = filterItems(data, filtrationState);
-      const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
-
-      const _points = [
-        ..._filteredItems.map((_) => ({
-          type: 'offices',
-          coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-          content: getBalloon(_),
-        })),
-        ..._filteredRemoteWorkplaces.map((_: RemoteWorkplace) => ({
-          type: 'workplaces',
-          coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-          content: getBalloonRemoteWorkplaces({
-            address: _.address,
-            workScheduleDescription: _.workScheduleDescription,
-          }),
-        })),
-      ].filter((_) => _.coords && _.coords.length === 2);
-
-      const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
-
-      return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
-    }, [data, remoteWorkplaces, filtrationState]);
+    const { filteredItems, points, filteredRemoteWorkplaces, lengthItems } = useOfficesAtmsMapData({
+      data,
+      remoteWorkplaces,
+      filtrationState,
+      getBalloon,
+      getBalloonRemoteWorkplaces,
+    });
 
     const [activeButton, setActiveButton] = useState('all');
 
-    const filterOptions: RenderFiltrationFormOptions = {
-      filters: getFiltersWithNonEmptyData([...data, ...remoteWorkplaces]),
-      field: { field, reset },
-      onlyOffice,
-      labels: FILTRATION_LABELS,
-    };
-
     return (
       <div className={style('space-y-1', className)}>
         <div className="bg-white">
@@ -94,7 +71,12 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
             {descriptionData ? renderDescriptionBlock(descriptionData) : null}
             {onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton)}
             <div className={style('pb-3xl', filtersVisibleStyles(activeButton))}>
-              {renderFiltrationForm(filterOptions)}
+              <FiltrationForm
+                filters={getFiltersWithNonEmptyData([...data, ...remoteWorkplaces])}
+                field={{ field, reset }}
+                onlyOffice={onlyOffice}
+                labels={FILTRATION_LABELS}
+              />
             </div>
           </div>
           <div className="h-[600px]">
@@ -112,15 +94,6 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
   },
 );
 
-export const filterItems = (
-  data: (Branch | RemoteWorkplace)[],
-  filtrationState: Record<string, boolean>,
-) => {
-  const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
-
-  return data.filter((item) => truthyFilters.every((_) => FILTRATION_PREDICATES[_](item)));
-};
-
 export const getFiltersWithNonEmptyData = (data: (Branch | Atm | RemoteWorkplace)[]) =>
   Object.keys(INITIAL_FILTRATION_STATE).filter(
     (_) => data.filter((item) => FILTRATION_PREDICATES[_](item)).length,

package/src/components/OfficesAtmsMap/OfficesMap.tsx

@@ -10,7 +10,7 @@ export interface OfficesMapProps {
 }
 
 export const OfficesMap = JSX<OfficesMapProps>(({ className }) => {
-  const [currentLocation] = useLocation();
+  const currentLocation = useLocation();
   const regionCode = currentLocation?.code ?? '000';
   const { data, isLoad } = useOffices(regionCode);