@redneckz/wildless-cms-uni-blocks 0.14.869 → 0.14.870

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

@@ -3,44 +3,31 @@ import { useLocation } from '../../hooks/useLocation';
 import { type ComponentType } from '../../model/ComponentType';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
-import { type Atm } from './OfficesAtmsMapProps';
 import { getAtmPoint, renderAtmCard } from './renderAtmCard';
 import { useAtms } from './useAtms';
 
 const INITIAL_FILTRATION_STATE = {
-  terminalTypeAtms: true,
   terminalTypeTerm: false,
+  terminalTypeAtms: false,
   workAllTime: false,
   billAcceptorEnable: false,
   locationDisabledPeople: false,
   designDisabledPeople: false,
 };
 
-const FILTRATION_PREDICATES = {
-  terminalTypeAtms: (item: Atm) => item.terminalType?.toLowerCase() === 'банкомат',
-  terminalTypeTerm: (item: Atm) => item.terminalType?.toLowerCase() === 'терминал',
-  workAllTime: (item: Atm) => item.workTime?.toLowerCase() === 'круглосуточно',
-  billAcceptorEnable: (item: Atm) => Boolean(item.billAcceptorEnable),
-  locationDisabledPeople: (item: Atm) => Boolean(item.locationDisabledPeople),
-  designDisabledPeople: (item: Atm) => Boolean(item.designDisabledPeople),
-};
-
 export interface AtmsMapProps extends ComponentType {
   descriptionData?: AtmsDef;
 }
 
 export const AtmsMap = JSX<AtmsMapProps>(({ descriptionData, className }) => {
   const currentLocation = useLocation();
-
   const regionCode = currentLocation?.code ?? '000';
-
-  const { data: officesData, isLoad } = useAtms(regionCode);
+  const { data, isLoad } = useAtms(regionCode);
 
   return (
     <OfficesAtmsMapLayout
       className={className}
-      filterItems={filterItems}
-      data={officesData}
+      data={data}
       isLoad={isLoad}
       initFilterState={INITIAL_FILTRATION_STATE}
       renderCard={renderAtmCard}
@@ -50,18 +37,3 @@ export const AtmsMap = JSX<AtmsMapProps>(({ descriptionData, className }) => {
     />
   );
 });
-
-const filterItems = (data: Atm[], filtrationState: Record<string, boolean>) => {
-  const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
-  const filtersOR = truthyFilters.filter((_) => _.startsWith('terminalType'));
-  const filtersAND = truthyFilters.filter((_) => !filtersOR.includes(_));
-
-  return data.filter((item) => {
-    const resultAND = filtersAND.every((_) => FILTRATION_PREDICATES[_](item));
-    const resultOR = filtersOR.length
-      ? filtersOR.some((_) => FILTRATION_PREDICATES[_](item))
-      : true;
-
-    return resultAND && resultOR;
-  });
-};

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

@@ -27,7 +27,6 @@ export interface OfficesAtmsMapLayoutProps<T> extends ComponentType, TitleProps
   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;
@@ -46,12 +45,13 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
     renderCard = defaultEmptyFunction,
     renderRemoteWorkplaceCard = defaultEmptyFunction,
     getBalloon = defaultEmptyFunction,
+    initFilterState = INITIAL_FILTRATION_STATE,
     getBalloonRemoteWorkplaces = defaultEmptyFunction,
     descriptionData,
     title,
   }) => {
     const onlyOffice = title?.includes('Офис');
-    const [filtrationState, { field, reset }] = useForm(INITIAL_FILTRATION_STATE);
+    const [filtrationState, { field, reset }] = useForm(initFilterState);
 
     const { filteredItems, points, filteredRemoteWorkplaces, lengthItems } = useOfficesAtmsMapData({
       data,
@@ -66,7 +66,7 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
     return (
       <div className={style('space-y-1', className)}>
         <div className="bg-white">
-          <div className="p-3xl pb-0">
+          <div className="p-3xl pb-0 grid gap-xl">
             {renderHeading(title, lengthItems)}
             {descriptionData ? renderDescriptionBlock(descriptionData) : null}
             {onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton)}

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

@@ -112,4 +112,5 @@ export interface Atm {
   gpsLongitude?: number;
   locationDisabledPeople?: boolean;
   designDisabledPeople?: boolean;
+  terminalTypeAtms?: boolean;
 }

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

@@ -1,4 +1,11 @@
-import type { Branch, RemoteWorkplace } from './OfficesAtmsMapProps';
+import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+
+const ATMS_INITIAL_FILTRATION_STATE = {
+  billAcceptorEnable: false,
+  workAllTime: false,
+  terminalTypeTerm: false,
+  terminalTypeAtms: false,
+};
 
 export const INITIAL_FILTRATION_STATE = {
   workingSaturday: false,
@@ -11,29 +18,40 @@ export const INITIAL_FILTRATION_STATE = {
   bullionOperations: false,
   preciousMetalsOperations: false,
   transferringDataToBiometricSystem: false,
+  ...ATMS_INITIAL_FILTRATION_STATE,
 };
 
 export const FILTRATION_LABELS = {
-  safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
-  workingSaturday: 'Открыты по субботам',
-  terminalTypeAtms: 'Банкоматы',
-  terminalTypeTerm: 'Терминалы',
-  workAllTime: 'Круглосуточно',
   billAcceptorEnable: 'Прием наличных',
-  premiumService: 'Премиальное обслуживание',
-  privateBanking: 'Услуга Private banking',
-  sellingCoins: 'Продажа монет из драгоценных металлов',
-  buyingCoins: 'Покупка монет из драгоценных металлов',
   bullionOperations: 'Операции со слитками',
-  preciousMetalsOperations: 'Операции с драгоценными металлами',
-  transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
-  locationDisabledPeople: 'Для маломобильных',
+  buyingCoins: 'Покупка монет из драгоценных металлов',
   designDisabledPeople: 'Для слабовидящих',
+  locationDisabledPeople: 'Для маломобильных',
+  preciousMetalsOperations: 'Операции с драгоценными металлами',
+  premiumService: 'Премиальное обслуживание',
+  privateBanking: 'Услуга Private banking',
   remoteWorkplace: 'Удаленное рабочее место',
+  terminalTypeAtms: 'Банкоматы',
+  terminalTypeTerm: 'Терминалы',
+  transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
+  sellingCoins: 'Продажа монет из драгоценных металлов',
+  safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
   serviceDisabledPeople: 'Для маломобильных граждан',
+  workAllTime: 'Круглосуточно',
+  workingSaturday: 'Открыты по субботам',
+};
+
+const FILTRATION_PREDICATES_ATMS = {
+  terminalTypeTerm: (item: Atm) => item.terminalType?.toLowerCase() === 'терминал',
+  terminalTypeAtms: (item: Atm) => item.terminalType?.toLowerCase() === 'банкомат',
+  workAllTime: (item: Atm) => item.workTime?.toLowerCase() === 'круглосуточно',
+  billAcceptorEnable: (item: Atm) => Boolean(item.billAcceptorEnable),
+  locationDisabledPeople: (item: Atm) => Boolean(item.locationDisabledPeople),
+  designDisabledPeople: (item: Atm) => Boolean(item.designDisabledPeople),
 };
 
 export const FILTRATION_PREDICATES = {
+  ...FILTRATION_PREDICATES_ATMS,
   workingSaturday: (item: Branch | RemoteWorkplace) =>
     Boolean('workSchedule' in item && item.workSchedule?.workingSaturday),
   premiumService: (item: Branch | RemoteWorkplace) =>

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

@@ -29,7 +29,7 @@ export const renderButtonsGroup = (
     );
 
   return (
-    <div className="flex gap-lg flex-col sm:flex-row pb-lg">
+    <div className="flex gap-lg flex-col sm:flex-row">
       <Button data-id="all" onClick={(e) => handleClick(e, 'all', data)} version={allButtonVersion}>
         Для физических лиц
       </Button>

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

@@ -1,29 +1,27 @@
 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';
+import { type AtmsDef, type ItemList } from './OfficesAtmsMapContent';
 
 export const renderDescriptionBlock = ({ __html, list, richVersion }: 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} richVersion={richVersion} />
-        </div>
-      ) : null}
+    <div className="border-b sm:border border-main-divider rounded-md space-y-2xl">
+      {__html ? <RichText __html={__html} richVersion={richVersion} /> : 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>
-          ))}
+          {list.map(renderItem)}
         </div>
       ) : null}
     </div>
   ) : null;
+
+const renderItem = (item: ItemList, i: number) => (
+  <div key={String(i)} className="flex gap-xs items-center">
+    <Img image={item.image} />
+    {item?.text ? (
+      <Text size="text-m" font="font-light">
+        {item.text}
+      </Text>
+    ) : null}
+  </div>
+);

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

@@ -1,15 +1,16 @@
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Text } from '../../ui-kit/Text/Text';
 
-export const renderHeading = (title?: string, lengthItems?: number) => (
-  <div className="flex flex-col sm:flex-row gap-xs mb-2xl">
-    <Heading headingType="h3">
-      <span suppressHydrationWarning={true}>{title}</span>
-      {lengthItems ? (
-        <Text size="text-h2" color="text-secondary-text">
-          <span suppressHydrationWarning={true}>{` (${lengthItems})`}</span>
-        </Text>
-      ) : null}
-    </Heading>
-  </div>
-);
+export const renderHeading = (title?: string, lengthItems?: number) =>
+  title ? (
+    <div className="flex flex-row gap-xs">
+      <Heading headingType="h3">
+        <span suppressHydrationWarning>{title}</span>
+        {lengthItems ? (
+          <Text size="text-h2" color="text-secondary-text">
+            <span suppressHydrationWarning>{` (${lengthItems})`}</span>
+          </Text>
+        ) : null}
+      </Heading>
+    </div>
+  ) : null;

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

@@ -18,7 +18,7 @@ export const PriceList = JSX<PriceListProps>(({ priceList }) =>
 const renderPriceListItem = ({ label, amount, unit }: PriceItem, i: number) => (
   <div
     key={String(i)}
-    className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between sm:bg-main-divider sm:py-m sm:px-lg sm:rounded-md items-baseline whitespace-pre"
+    className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between sm:bg-main-divider sm:py-m sm:px-lg rounded-md items-baseline whitespace-pre"
     role="listitem"
   >
     <Text font="font-light" size="text-l" color="text-secondary-text">

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

@@ -31,7 +31,7 @@ export const TopItem = JSX<TopItemProps>(
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...getAspectsAttributes(data)}
       >
-        <span suppressHydrationWarning={true} className={getTextStyle(active, flat)}>
+        <span suppressHydrationWarning className={getTextStyle(active, flat)}>
           {text || children}
         </span>
       </a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.869",
+  "version": "0.14.870",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/AdTile/AdTile.tsx

@@ -20,7 +20,7 @@ export const AdTile = JSX<AdTileProps>((props) => {
   const content = items?.[tileIndex];
 
   return content ? (
-    <ProductBlock suppressHydrationWarning={true} {...content} {...props} />
+    <ProductBlock suppressHydrationWarning {...content} {...props} />
   ) : (
     <BlockWrapper {...props}>
       <Shimmer />

package/src/components/OfficesAtmsMap/AtmsMap.tsx

@@ -3,44 +3,31 @@ import { useLocation } from '../../hooks/useLocation';
 import { type ComponentType } from '../../model/ComponentType';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
-import { type Atm } from './OfficesAtmsMapProps';
 import { getAtmPoint, renderAtmCard } from './renderAtmCard';
 import { useAtms } from './useAtms';
 
 const INITIAL_FILTRATION_STATE = {
-  terminalTypeAtms: true,
   terminalTypeTerm: false,
+  terminalTypeAtms: false,
   workAllTime: false,
   billAcceptorEnable: false,
   locationDisabledPeople: false,
   designDisabledPeople: false,
 };
 
-const FILTRATION_PREDICATES = {
-  terminalTypeAtms: (item: Atm) => item.terminalType?.toLowerCase() === 'банкомат',
-  terminalTypeTerm: (item: Atm) => item.terminalType?.toLowerCase() === 'терминал',
-  workAllTime: (item: Atm) => item.workTime?.toLowerCase() === 'круглосуточно',
-  billAcceptorEnable: (item: Atm) => Boolean(item.billAcceptorEnable),
-  locationDisabledPeople: (item: Atm) => Boolean(item.locationDisabledPeople),
-  designDisabledPeople: (item: Atm) => Boolean(item.designDisabledPeople),
-};
-
 export interface AtmsMapProps extends ComponentType {
   descriptionData?: AtmsDef;
 }
 
 export const AtmsMap = JSX<AtmsMapProps>(({ descriptionData, className }) => {
   const currentLocation = useLocation();
-
   const regionCode = currentLocation?.code ?? '000';
-
-  const { data: officesData, isLoad } = useAtms(regionCode);
+  const { data, isLoad } = useAtms(regionCode);
 
   return (
     <OfficesAtmsMapLayout
       className={className}
-      filterItems={filterItems}
-      data={officesData}
+      data={data}
       isLoad={isLoad}
       initFilterState={INITIAL_FILTRATION_STATE}
       renderCard={renderAtmCard}
@@ -50,18 +37,3 @@ export const AtmsMap = JSX<AtmsMapProps>(({ descriptionData, className }) => {
     />
   );
 });
-
-const filterItems = (data: Atm[], filtrationState: Record<string, boolean>) => {
-  const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
-  const filtersOR = truthyFilters.filter((_) => _.startsWith('terminalType'));
-  const filtersAND = truthyFilters.filter((_) => !filtersOR.includes(_));
-
-  return data.filter((item) => {
-    const resultAND = filtersAND.every((_) => FILTRATION_PREDICATES[_](item));
-    const resultOR = filtersOR.length
-      ? filtersOR.some((_) => FILTRATION_PREDICATES[_](item))
-      : true;
-
-    return resultAND && resultOR;
-  });
-};

package/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -27,7 +27,6 @@ export interface OfficesAtmsMapLayoutProps<T> extends ComponentType, TitleProps
   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;
@@ -46,12 +45,13 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
     renderCard = defaultEmptyFunction,
     renderRemoteWorkplaceCard = defaultEmptyFunction,
     getBalloon = defaultEmptyFunction,
+    initFilterState = INITIAL_FILTRATION_STATE,
     getBalloonRemoteWorkplaces = defaultEmptyFunction,
     descriptionData,
     title,
   }) => {
     const onlyOffice = title?.includes('Офис');
-    const [filtrationState, { field, reset }] = useForm(INITIAL_FILTRATION_STATE);
+    const [filtrationState, { field, reset }] = useForm(initFilterState);
 
     const { filteredItems, points, filteredRemoteWorkplaces, lengthItems } = useOfficesAtmsMapData({
       data,
@@ -66,7 +66,7 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
     return (
       <div className={style('space-y-1', className)}>
         <div className="bg-white">
-          <div className="p-3xl pb-0">
+          <div className="p-3xl pb-0 grid gap-xl">
             {renderHeading(title, lengthItems)}
             {descriptionData ? renderDescriptionBlock(descriptionData) : null}
             {onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton)}

package/src/components/OfficesAtmsMap/OfficesAtmsMapProps.tsx

@@ -112,4 +112,5 @@ export interface Atm {
   gpsLongitude?: number;
   locationDisabledPeople?: boolean;
   designDisabledPeople?: boolean;
+  terminalTypeAtms?: boolean;
 }

package/src/components/OfficesAtmsMap/filters.ts

@@ -1,4 +1,11 @@
-import type { Branch, RemoteWorkplace } from './OfficesAtmsMapProps';
+import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+
+const ATMS_INITIAL_FILTRATION_STATE = {
+  billAcceptorEnable: false,
+  workAllTime: false,
+  terminalTypeTerm: false,
+  terminalTypeAtms: false,
+};
 
 export const INITIAL_FILTRATION_STATE = {
   workingSaturday: false,
@@ -11,29 +18,40 @@ export const INITIAL_FILTRATION_STATE = {
   bullionOperations: false,
   preciousMetalsOperations: false,
   transferringDataToBiometricSystem: false,
+  ...ATMS_INITIAL_FILTRATION_STATE,
 };
 
 export const FILTRATION_LABELS = {
-  safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
-  workingSaturday: 'Открыты по субботам',
-  terminalTypeAtms: 'Банкоматы',
-  terminalTypeTerm: 'Терминалы',
-  workAllTime: 'Круглосуточно',
   billAcceptorEnable: 'Прием наличных',
-  premiumService: 'Премиальное обслуживание',
-  privateBanking: 'Услуга Private banking',
-  sellingCoins: 'Продажа монет из драгоценных металлов',
-  buyingCoins: 'Покупка монет из драгоценных металлов',
   bullionOperations: 'Операции со слитками',
-  preciousMetalsOperations: 'Операции с драгоценными металлами',
-  transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
-  locationDisabledPeople: 'Для маломобильных',
+  buyingCoins: 'Покупка монет из драгоценных металлов',
   designDisabledPeople: 'Для слабовидящих',
+  locationDisabledPeople: 'Для маломобильных',
+  preciousMetalsOperations: 'Операции с драгоценными металлами',
+  premiumService: 'Премиальное обслуживание',
+  privateBanking: 'Услуга Private banking',
   remoteWorkplace: 'Удаленное рабочее место',
+  terminalTypeAtms: 'Банкоматы',
+  terminalTypeTerm: 'Терминалы',
+  transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
+  sellingCoins: 'Продажа монет из драгоценных металлов',
+  safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
   serviceDisabledPeople: 'Для маломобильных граждан',
+  workAllTime: 'Круглосуточно',
+  workingSaturday: 'Открыты по субботам',
+};
+
+const FILTRATION_PREDICATES_ATMS = {
+  terminalTypeTerm: (item: Atm) => item.terminalType?.toLowerCase() === 'терминал',
+  terminalTypeAtms: (item: Atm) => item.terminalType?.toLowerCase() === 'банкомат',
+  workAllTime: (item: Atm) => item.workTime?.toLowerCase() === 'круглосуточно',
+  billAcceptorEnable: (item: Atm) => Boolean(item.billAcceptorEnable),
+  locationDisabledPeople: (item: Atm) => Boolean(item.locationDisabledPeople),
+  designDisabledPeople: (item: Atm) => Boolean(item.designDisabledPeople),
 };
 
 export const FILTRATION_PREDICATES = {
+  ...FILTRATION_PREDICATES_ATMS,
   workingSaturday: (item: Branch | RemoteWorkplace) =>
     Boolean('workSchedule' in item && item.workSchedule?.workingSaturday),
   premiumService: (item: Branch | RemoteWorkplace) =>

package/src/components/OfficesAtmsMap/renderButtonsGroup.tsx

@@ -29,7 +29,7 @@ export const renderButtonsGroup = (
     );
 
   return (
-    <div className="flex gap-lg flex-col sm:flex-row pb-lg">
+    <div className="flex gap-lg flex-col sm:flex-row">
       <Button data-id="all" onClick={(e) => handleClick(e, 'all', data)} version={allButtonVersion}>
         Для физических лиц
       </Button>

package/src/components/OfficesAtmsMap/renderDescriptionBlock.tsx

@@ -1,29 +1,27 @@
 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';
+import { type AtmsDef, type ItemList } from './OfficesAtmsMapContent';
 
 export const renderDescriptionBlock = ({ __html, list, richVersion }: 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} richVersion={richVersion} />
-        </div>
-      ) : null}
+    <div className="border-b sm:border border-main-divider rounded-md space-y-2xl">
+      {__html ? <RichText __html={__html} richVersion={richVersion} /> : 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>
-          ))}
+          {list.map(renderItem)}
         </div>
       ) : null}
     </div>
   ) : null;
+
+const renderItem = (item: ItemList, i: number) => (
+  <div key={String(i)} className="flex gap-xs items-center">
+    <Img image={item.image} />
+    {item?.text ? (
+      <Text size="text-m" font="font-light">
+        {item.text}
+      </Text>
+    ) : null}
+  </div>
+);

package/src/components/OfficesAtmsMap/renderHeading.tsx

@@ -1,15 +1,16 @@
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Text } from '../../ui-kit/Text/Text';
 
-export const renderHeading = (title?: string, lengthItems?: number) => (
-  <div className="flex flex-col sm:flex-row gap-xs mb-2xl">
-    <Heading headingType="h3">
-      <span suppressHydrationWarning={true}>{title}</span>
-      {lengthItems ? (
-        <Text size="text-h2" color="text-secondary-text">
-          <span suppressHydrationWarning={true}>{` (${lengthItems})`}</span>
-        </Text>
-      ) : null}
-    </Heading>
-  </div>
-);
+export const renderHeading = (title?: string, lengthItems?: number) =>
+  title ? (
+    <div className="flex flex-row gap-xs">
+      <Heading headingType="h3">
+        <span suppressHydrationWarning>{title}</span>
+        {lengthItems ? (
+          <Text size="text-h2" color="text-secondary-text">
+            <span suppressHydrationWarning>{` (${lengthItems})`}</span>
+          </Text>
+        ) : null}
+      </Heading>
+    </div>
+  ) : null;

package/src/ui-kit/PriceList/PriceList.tsx

@@ -18,7 +18,7 @@ export const PriceList = JSX<PriceListProps>(({ priceList }) =>
 const renderPriceListItem = ({ label, amount, unit }: PriceItem, i: number) => (
   <div
     key={String(i)}
-    className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between sm:bg-main-divider sm:py-m sm:px-lg sm:rounded-md items-baseline whitespace-pre"
+    className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between sm:bg-main-divider sm:py-m sm:px-lg rounded-md items-baseline whitespace-pre"
     role="listitem"
   >
     <Text font="font-light" size="text-l" color="text-secondary-text">

package/src/ui-kit/TopItem/TopItem.tsx

@@ -31,7 +31,7 @@ export const TopItem = JSX<TopItemProps>(
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...getAspectsAttributes(data)}
       >
-        <span suppressHydrationWarning={true} className={getTextStyle(active, flat)}>
+        <span suppressHydrationWarning className={getTextStyle(active, flat)}>
           {text || children}
         </span>
       </a>