@redneckz/wildless-cms-uni-blocks 0.15.339 → 0.15.341

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -5,13 +5,13 @@ import { type VNode } from '../../model/VNode';
 import { Button } from '../../ui-kit/Button/Button';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
+import { getVersion } from '../../utils/getVersion';
 import { style } from '../../utils/style';
 import { type AtmsDef } from './OfficesAtmsMapContent';
-import { type Atm, type Branch } from './OfficesAtmsMapProps';
+import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { renderDescriptionBlock } from './renderDescriptionBlock';
 import { renderFiltrationForm } from './renderFiltrationForm';
 import { type BalloonContent } from './YandexMapProps';
 
@@ -23,9 +23,12 @@ export type InitFilterState = Record<string, boolean>;
 export interface OfficesAtmsMapLayoutProps<T> {
   className?: string;
   data?: T[];
+  remoteWorkplaces?: T[];
   renderCard?: (item: T, index: number) => VNode;
+  renderRemoteWorkplaceCard?: (item: T, index: number) => VNode;
   filterItems?: (data: T[], filtrationState: InitFilterState) => T[];
   getBalloon?: (item: T) => BalloonContent;
+  getBalloonRemoteWorkplaces?: (item: T) => BalloonContent;
   initFilterState?: InitFilterState;
   descriptionData?: AtmsDef;
   title?: string;
@@ -34,13 +37,16 @@ export interface OfficesAtmsMapLayoutProps<T> {
 const filtersVisibleStyles = (activeButton: string) =>
   activeButton === 'all' ? 'block' : 'hidden';
 
-export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>(
+export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm | RemoteWorkplace>>(
   ({
     className,
     data = [],
+    remoteWorkplaces = [],
     renderCard = defaultEmptyFunction,
+    renderRemoteWorkplaceCard = defaultEmptyFunction,
     filterItems = defaultFilterItems,
     getBalloon = defaultEmptyFunction,
+    getBalloonRemoteWorkplaces = defaultEmptyFunction,
     initFilterState = {},
     descriptionData,
     title,
@@ -49,18 +55,30 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>
 
     const [filtrationState, { field, reset }] = useForm(initFilterState);
 
-    const [filteredItems, points, lengthItems] = useMemo(() => {
+    const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
       const _filteredItems = filterItems(data, filtrationState);
+      const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
 
-      const _points = _filteredItems
-        .map((_) => ({
+      const _points = [
+        ..._filteredItems.map((_) => ({
+          type: 'offices',
           coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
           content: getBalloon(_),
-        }))
-        .filter((_) => _.coords && _.coords.length === 2);
+        })),
+        ..._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, _filteredItems.length];
-    }, [data, filtrationState]);
+      return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
+    }, [data, remoteWorkplaces, filtrationState]);
 
     const [activeButton, setActiveButton] = useState('all');
 
@@ -89,6 +107,7 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>
           </div>
         </div>
         {filteredItems.map(renderCard)}
+        {filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)}
       </div>
     );
   },
@@ -97,13 +116,13 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>
 const renderButtonsGroup = (
   data: Branch[],
   activeButton: string,
-  setActiveButton: (item: string) => void,
+  onButtonClick: (item: string) => void,
 ) => {
-  const allButtonVersion = activeButton === 'all' ? 'primary' : 'secondary';
+  const allButtonVersion = getVersion(activeButton === 'all');
 
-  const businessButtonVersion = activeButton === 'business' ? 'primary' : 'secondary';
+  const businessButtonVersion = getVersion(activeButton === 'business');
 
-  const handleOnClick = (e: any, key: string, branches: Branch[]) => {
+  const handleClick = (e: any, key: string, branches: Branch[]) => {
     if (e.currentTarget === e.target && key === 'business') {
       branches.filter(
         (branch) =>
@@ -113,23 +132,19 @@ const renderButtonsGroup = (
       );
     }
 
-    setActiveButton(key);
+    onButtonClick(key);
 
     return branches;
   };
 
   return (
     <div className="flex gap-lg flex-col sm:flex-row pb-lg">
-      <Button
-        data-id="all"
-        onClick={(e) => handleOnClick(e, 'all', data)}
-        version={allButtonVersion}
-      >
+      <Button data-id="all" onClick={(e) => handleClick(e, 'all', data)} version={allButtonVersion}>
         Для физических лиц
       </Button>
       <Button
         data-id="business"
-        onClick={(e) => handleOnClick(e, 'business', data)}
+        onClick={(e) => handleClick(e, 'business', data)}
         version={businessButtonVersion}
       >
         Для юридических лиц
@@ -137,28 +152,3 @@ const renderButtonsGroup = (
     </div>
   );
 };
-
-const renderDescriptionBlock = ({ __html, list }: AtmsDef) =>
-  __html || list?.length ? (
-    <div className="mb-2xl border-b sm:border border-main-divider sm:rounded-md">
-      {__html ? (
-        <div className="mb-2xl">
-          <RichText __html={__html} />
-        </div>
-      ) : null}
-      {list?.length ? (
-        <div className="flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl">
-          {list.map((item, i) => (
-            <div key={String(i)} className="flex gap-xs items-center">
-              {item?.image ? <Img image={item.image} /> : null}
-              {item?.text ? (
-                <Text size="text-m" font="font-light">
-                  {item.text}
-                </Text>
-              ) : null}
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  ) : null;

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapProps.tsx

@@ -82,6 +82,21 @@ export interface Branch {
   transferringDataToBiometricSystem?: false;
 }
 
+export interface RemoteWorkplace {
+  id?: number;
+  region?: {
+    id?: number;
+    code?: string;
+    name?: string;
+    slug?: string;
+  };
+  landmark?: string;
+  workScheduleDescription?: string;
+  description?: string;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+  address?: string;
+}
 export interface Atm {
   location?: string;
   address?: string;

package/mobile/src/components/OfficesAtmsMap/OfficesMap.tsx

@@ -1,14 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLocation } from '../../hooks/useLocation';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
-import { type Branch } from './OfficesAtmsMapProps';
+import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 import { getOfficePoint, renderOfficeCard } from './renderOfficeCard';
+import { getRemoteWorkplacePoint, renderRemoteWorkplaceCard } from './renderRemoteWorkplaceCard';
 import { useOffices } from './useOffices';
 
 const INITIAL_FILTRATION_STATE = {
   workingSaturday: false,
   premiumService: false,
   privateBanking: false,
+  remoteWorkplace: false,
   sellingCoins: false,
   buyingCoins: false,
   bullionOperations: false,
@@ -17,15 +19,23 @@ const INITIAL_FILTRATION_STATE = {
 };
 
 const FILTRATION_PREDICATES = {
-  workingSaturday: (item: Branch) => Boolean(item.workSchedule?.workingSaturday),
-  premiumService: (item: Branch) => Boolean(item.premiumService),
-  privateBanking: (item: Branch) => Boolean(item.privateBanking),
-  sellingCoins: (item: Branch) => Boolean(item.sellingCoins),
-  buyingCoins: (item: Branch) => Boolean(item.buyingCoins),
-  bullionOperations: (item: Branch) => Boolean(item.bullionOperations),
-  preciousMetalsOperations: (item: Branch) => Boolean(item.preciousMetalsOperations),
-  transferringDataToBiometricSystem: (item: Branch) =>
-    Boolean(item.transferringDataToBiometricSystem),
+  workingSaturday: (item: Branch | RemoteWorkplace) =>
+    Boolean('workSchedule' in item && item.workSchedule?.workingSaturday),
+  premiumService: (item: Branch | RemoteWorkplace) =>
+    Boolean('premiumService' in item && item.premiumService),
+  privateBanking: (item: Branch | RemoteWorkplace) =>
+    Boolean('privateBanking' in item && item.privateBanking),
+  remoteWorkplace: (item: Branch | RemoteWorkplace) => Boolean('workScheduleDescription' in item),
+  sellingCoins: (item: Branch | RemoteWorkplace) =>
+    Boolean('sellingCoins' in item && item.sellingCoins),
+  buyingCoins: (item: Branch | RemoteWorkplace) =>
+    Boolean('buyingCoins' in item && item.buyingCoins),
+  bullionOperations: (item: Branch | RemoteWorkplace) =>
+    Boolean('bullionOperations' in item && item.bullionOperations),
+  preciousMetalsOperations: (item: Branch | RemoteWorkplace) =>
+    Boolean('preciousMetalsOperations' in item && item.preciousMetalsOperations),
+  transferringDataToBiometricSystem: (item: Branch | RemoteWorkplace) =>
+    Boolean('transferringDataToBiometricSystem' in item && item.transferringDataToBiometricSystem),
 };
 
 export interface OfficesMapProps {
@@ -43,16 +53,22 @@ export const OfficesMap = JSX<OfficesMapProps>(({ className }) => {
     <OfficesAtmsMapLayout
       className={className}
       filterItems={filterItems}
-      data={officesData}
+      data={officesData[0]?.branches}
+      remoteWorkplaces={officesData[0]?.remoteWorkplaces}
       initFilterState={INITIAL_FILTRATION_STATE}
       renderCard={renderOfficeCard}
+      renderRemoteWorkplaceCard={renderRemoteWorkplaceCard}
       getBalloon={getOfficePoint}
+      getBalloonRemoteWorkplaces={getRemoteWorkplacePoint}
       title={`Офисы филиала ${currentLocation?.name}`}
     />
   );
 });
 
-const filterItems = (data: Branch[], filtrationState: Record<string, boolean>) => {
+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)));

package/mobile/src/components/OfficesAtmsMap/YandexMapProps.ts

@@ -1,4 +1,5 @@
 export type BalloonPoints = {
+  type?: string;
   coords: number[];
   content?: BalloonContent;
 };

package/mobile/src/components/OfficesAtmsMap/renderDescriptionBlock.tsx

@@ -0,0 +1,29 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { Text } from '../../ui-kit/Text/Text';
+import { type AtmsDef } from './OfficesAtmsMapContent';
+
+export const renderDescriptionBlock = ({ __html, list }: AtmsDef) =>
+  __html || list?.length ? (
+    <div className="mb-2xl border-b sm:border border-main-divider sm:rounded-md">
+      {__html ? (
+        <div className="mb-2xl">
+          <RichText __html={__html} />
+        </div>
+      ) : null}
+      {list?.length ? (
+        <div className="flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl">
+          {list.map((item, i) => (
+            <div key={String(i)} className="flex gap-xs items-center">
+              {item?.image ? <Img image={item.image} /> : null}
+              {item?.text ? (
+                <Text size="text-m" font="font-light">
+                  {item.text}
+                </Text>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  ) : null;

package/mobile/src/components/OfficesAtmsMap/renderFiltrationForm.tsx

@@ -21,6 +21,7 @@ const FILTRATION_LABELS = {
   bullionOperations: 'Операции со слитками',
   preciousMetalsOperations: 'Операции с драгоценными металлами',
   transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
+  remoteWorkplace: 'Удаленное рабочее место',
 };
 
 const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
@@ -30,7 +31,7 @@ export const renderFiltrationForm = (
   { field, reset }: { field: FormFieldRegisterer<any>; reset: () => void },
   onlyOffice?: boolean,
 ) => {
-  const visibleFiltersNum = onlyOffice ? 3 : 4;
+  const visibleFiltersNum = 4;
 
   const filtersCheckbox = (filters || []).map((key) => (
     <Checkbox key={key} text={FILTRATION_LABELS[key]} {...field(key)} />

package/mobile/src/components/OfficesAtmsMap/renderRemoteWorkplaceCard.tsx

@@ -0,0 +1,86 @@
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Text } from '../../ui-kit/Text/Text';
+import { CardCell } from './CardCell';
+import { CardRow } from './CardRow';
+import { type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { renderFoldButton } from './renderFoldButton';
+
+export const renderRemoteWorkplaceCard = (
+  { address, workScheduleDescription }: RemoteWorkplace,
+  index: number,
+) => {
+  if (!workScheduleDescription) {
+    return null;
+  }
+
+  return (
+    <div key={String(index)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
+      <div className="sm:flex sm:justify-between">
+        <div>
+          <Text size="text-h4">Удаленное рабочее место</Text>
+          {address ? (
+            <div className="flex pb-xl pt-xs gap-2xs">
+              <Icon name="GeolocationIcon" width="24" height="24" />
+              <Text size="text-l">{address}</Text>
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <div className="hidden sm:block">
+        {renderCardContent({
+          workScheduleDescription,
+        })}
+      </div>
+      <Foldable
+        className="block sm:hidden"
+        renderFoldableSection={({ isUnfolded }) => {
+          return (
+            <FoldableSection isUnfolded={isUnfolded}>
+              {renderCardContent({
+                workScheduleDescription,
+              })}
+            </FoldableSection>
+          );
+        }}
+        //** TODO: remove styles with refactoring  DefaultFoldButton*/
+        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
+      />
+    </div>
+  );
+};
+
+const renderCardContent = ({ workScheduleDescription }: RemoteWorkplace) => {
+  return (
+    <div>
+      <CardRow className="flex">
+        <CardCell label="Операции для физических лиц">
+          <Text>Оформление и обслуживание кредитов, счетов, вкладов</Text>
+        </CardCell>
+        <CardCell label="Операции для физических лиц">
+          <Text>Оформление и обслуживание банковских карт</Text>
+        </CardCell>
+        <CardCell label="Операции для физических лиц">
+          <Text>Инвестиционное и накопительное страхование</Text>
+        </CardCell>
+        <CardCell label="Операции для физических лиц">
+          <Text>Безналичные операции в рублях, переводы без открытия счёта</Text>
+        </CardCell>
+      </CardRow>
+      <CardCell label="Режим работы" className="max-w-none">
+        <Text>{workScheduleDescription}</Text>
+      </CardCell>
+    </div>
+  );
+};
+
+export const getRemoteWorkplacePoint = ({
+  address = '',
+  workScheduleDescription,
+}: RemoteWorkplace) => {
+  const header = 'Удаленное рабочее место';
+  const body = `${address} ${workScheduleDescription}`;
+
+  return { header, body };
+};

package/mobile/src/components/OfficesAtmsMap/useOffices.ts

@@ -1,20 +1,27 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import { fetchJSON } from '../../utils/fetchJSON';
-import { type Branch } from './OfficesAtmsMapProps';
+import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 
 const EMPTY_VALUE = [];
 
 export function useOffices(regionCode?: string) {
   const { data = EMPTY_VALUE } = useAsyncData(
-    `/api/v1/branches?regionCode=${regionCode}`,
+    `/api/v1/branchesAndRemoteWorkplaces?regionCode=${regionCode}`,
     fetchMap,
   );
 
   return data;
 }
 
-const fetchMap = async (url: string): Promise<Branch[]> => {
-  const result = await fetchJSON<Branch[]>(url, { method: 'GET' });
+const fetchMap = async (
+  url: string,
+): Promise<{ branches: Branch[]; remoteWorkplaces: RemoteWorkplace[] }[]> => {
+  const result = await fetchJSON<{ branches: Branch[]; remoteWorkplaces: RemoteWorkplace[] }[]>(
+    url,
+    {
+      method: 'GET',
+    },
+  );
 
   return Array.isArray(result) ? result : EMPTY_VALUE;
 };

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

@@ -3,6 +3,7 @@ import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type SitemapData } from '../../data/SitemapData';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
+import { useLocation } from '../../hooks/useLocation';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
 import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
@@ -19,6 +20,7 @@ export interface BurgerMenuDialogProps {
 export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
   ({ menuRef, menuItem, locationDialogProps, closeAll }) => {
     const locationDialog = useLocationDialog(locationDialogProps || {});
+    const [{ name: location }] = useLocation();
     const menuDimensions = menuRef?.current?.getBoundingClientRect();
 
     const handleIframeLoad = useCallback(() => {
@@ -28,9 +30,15 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
       ifDoc.style.height = String(ifDoc?.contentWindow?.document.body.offsetHeight) + 'px';
 
       const [, basePath] = globalThis?.location?.pathname?.split('/') || [];
-      iframeWindow.postMessage(basePath, '*');
+      iframeWindow.postMessage({ type: 'currentTab', data: basePath }, '*');
+      iframeWindow.postMessage({ type: 'currentLocation', data: location }, '*');
     }, []);
 
+    useEffect(() => {
+      const iframeWindow: Window = globalThis.frames['burger-menu-iframe'];
+      iframeWindow.postMessage({ type: 'currentLocation', data: location }, '*');
+    }, [location]);
+
     useEffect(() => {
       const onMessage = (e: MessageEvent<any>) => {
         if (e.data.type === 'location') {

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

@@ -11,20 +11,30 @@ import { type Tab, type TabsLayoutContent } from './TabsLayoutContent';
 
 const TAB_QUERY_PARAM_KEY = 'tab';
 
+type TabCountedProps = Tab & {
+  count?: number;
+};
 export interface TabsLayoutProps extends TabsLayoutContent, UniBlockProps {}
 
 export const TabsLayout = UniBlock<TabsLayoutProps>(
-  ({ className = '', tabs = [], block, tabsType, ...rest }) => {
+  ({ className = '', tabs = [], block, tabsType, showCounter = false, ...rest }) => {
     const router = useRouter();
 
-    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
+    const tabsCounted: TabCountedProps[] = showCounter
+      ? tabs.map((_) => ({
+          ..._,
+          count: block?.slots?.[_?.text ?? '']?.length ?? 0,
+        }))
+      : tabs;
 
-    const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabsCounted));
+
+    const defaultSelectedTab = tabsCounted.findIndex((_) => Boolean(_.selected));
 
     useEffect(() => {
-      const query = new URLSearchParams(globalThis?.location?.search || '');
+      const query = new URLSearchParams(globalThis?.location?.search);
       const defaultTabIndex = query.get(TAB_QUERY_PARAM_KEY)
-        ? tabs.findIndex(
+        ? tabsCounted.findIndex(
             (_, index) => _.type === 'group' && String(index) === query.get(TAB_QUERY_PARAM_KEY),
           )
         : defaultSelectedTab;
@@ -32,7 +42,7 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
       setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
     }, [defaultSelectedTab]);
 
-    const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
+    const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
 
     const updateUrlSearchTabParam = (_: TabItemBase, index: number) => {
       const searchParams = new URLSearchParams(globalThis?.location?.search || '');
@@ -46,8 +56,8 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
 
     const handleChange = useCallback(
       (_: TabItemBase) => {
-        const index = tabs.indexOf(_ as Tab);
-        const tab = tabs[index];
+        const index = tabsCounted.indexOf(_ as Tab);
+        const tab = tabsCounted[index];
 
         setActiveTabIndex(index);
 
@@ -55,14 +65,14 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
           updateUrlSearchTabParam(_, index);
         }
       },
-      [tabs],
+      [tabsCounted],
     );
 
     return (
       <BlockWrapper className={style(className)} defaultPadding="p-0" {...rest}>
         {renderTabsLayout({
-          items: tabs,
-          value: tabs[activeTabIndex],
+          items: tabsCounted,
+          value: tabsCounted[activeTabIndex],
           tabsType,
           onChange: handleChange,
         })}

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

@@ -1,6 +1,5 @@
 import { ScrollableTabsControl } from '../../ui-kit/TabsControl/ScrollableTabsControl';
 import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
-import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { type TabsControlProps, type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
 
 interface RenderTabsProps {
@@ -10,23 +9,28 @@ interface RenderTabsProps {
   tabsType?: TabsType;
 }
 
-export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) => {
-  switch (tabsType) {
-    case 'default':
-      return <TabsControl {...props} />;
-    case 'underlined':
-      return (
-        <div className="flex">
-          <TabsControl className="m-auto" tabsType="underlined" {...props} />
-        </div>
-      );
-    case 'animated':
-      return (
-        <div className="border-b-8 border-primary-main">
-          <ScrollableTabsControl className="m-auto" {...props} tabsType="animated" />
-        </div>
-      );
-    default:
-      return null;
-  }
+const tabsStyle: Record<TabsType, { wrapper: string; component: string }> = {
+  default: {
+    wrapper: '',
+    component: '',
+  },
+  animated: {
+    wrapper: 'border-b-8 border-primary-main bg-white',
+    component: 'm-auto',
+  },
+  underlined: {
+    wrapper: 'flex',
+    component: 'm-auto',
+  },
 };
+
+export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) =>
+  tabsType ? (
+    <div className={tabsStyle[tabsType].wrapper}>
+      <ScrollableTabsControl
+        className={tabsStyle[tabsType].component}
+        tabsType={tabsType}
+        {...props}
+      />
+    </div>
+  ) : null;