@redneckz/wildless-cms-uni-blocks 0.6.16 → 0.6.18

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -4,21 +4,14 @@ import { Img } from '../../ui-kit/Img/Img';
 interface CurrentLocationProps {
   className?: string;
   address?: string;
-  distance?: string;
 }
 
-export const CurrentLocation = JSX<CurrentLocationProps>(
-  ({ className = '', address, distance }) => (
-    <div className={`flex ${className}`}>
-      <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
-      <div className="ml-3">
-        {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
-        {distance ? (
-          <p className="text-secondary-text m-0 text-m-light">
-            Курс указан для ближайшего офиса - {distance}
-          </p>
-        ) : null}
-      </div>
+export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', address }) => (
+  <div className={`flex ${className}`}>
+    <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
+    <div className="ml-3">
+      {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
+      <p className="text-secondary-text m-0 text-m">Курс указан для ближайшего офиса</p>
     </div>
-  ),
-);
+  </div>
+));

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -10,9 +10,13 @@ import { Currency } from './CurrencyProps';
 import { renderInput } from './renderInput';
 
 export interface ExchangeCurrencyItem {
-  code?: Currency;
-  buy?: number;
-  sell?: number;
+  currency?: {
+    id?: number;
+    code?: string;
+    currency?: Currency;
+  };
+  buyExchangeRate?: number;
+  saleExchangeRate?: number;
 }
 export interface ExchangeCurrencyCalculatorProps extends UniBlockProps {
   className?: string;
@@ -35,8 +39,8 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
     const [calcState, setCalcState] = useState<CalcState>({
       inputSell: '',
       inputBuy: '',
-      selectSell: currencyRatesBuy?.[0]?.code || Currency.RUB,
-      selectBuy: currencyRatesSell?.[0]?.code || Currency.USD,
+      selectSell: currencyRatesBuy?.[0]?.currency?.currency || Currency.RUB,
+      selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
     });
 
     const handleSetCalcState = (newState: Partial<CalcState>) => {
@@ -96,8 +100,12 @@ const handleSelectSell =
     callbackCurrencySelect({
       value,
       oppositeValue: calcState.selectBuy,
-      handleConvert: (codeFrom = calcState.selectSell, codeTo = calcState.selectBuy) => {
-        handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, codeFrom, codeTo);
+      handleConvert: (currencyFrom = calcState.selectSell, currencyTo = calcState.selectBuy) => {
+        handleInputSell(setCalcState, currencyRatesSell)(
+          calcState.inputSell,
+          currencyFrom,
+          currencyTo,
+        );
       },
     });
   };
@@ -113,35 +121,39 @@ const handleSelectBuy =
     callbackCurrencySelect({
       value,
       oppositeValue: calcState.selectSell,
-      handleConvert: (codeTo = calcState.selectBuy, codeFrom = calcState.selectSell) =>
-        handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, codeTo, codeFrom),
+      handleConvert: (currencyTo = calcState.selectBuy, currencyFrom = calcState.selectSell) =>
+        handleInputBuy(setCalcState, currencyRatesBuy)(
+          calcState.inputBuy,
+          currencyTo,
+          currencyFrom,
+        ),
     });
   };
 
 const handleInputSell =
   (setCalcState: (state: Partial<CalcState>) => void, currencyRatesSell: ExchangeCurrencyItem[]) =>
-  (value: string, codeFrom: Currency, codeTo: Currency) => {
-    setCalcState({ inputSell: formatValue(value), selectBuy: codeTo });
+  (value: string, currencyFrom: Currency, currencyTo: Currency) => {
+    setCalcState({ inputSell: formatValue(value), selectBuy: currencyTo });
     const rate =
-      currencyRatesSell.find((_) => _.code === codeTo)?.buy ||
-      currencyRatesSell.find((_) => _.code === codeFrom)?.sell;
+      currencyRatesSell.find((_) => _.currency?.currency === currencyTo)?.buyExchangeRate ||
+      currencyRatesSell.find((_) => _.currency?.currency === currencyFrom)?.saleExchangeRate;
     if (rate) {
       setCalcState({
-        inputBuy: String(calculateResult(value, rate, codeFrom === Currency.RUB) || ''),
+        inputBuy: String(calculateResult(value, rate, currencyFrom === Currency.RUB) || ''),
       });
     }
   };
 
 const handleInputBuy =
   (setCalcState: (state: Partial<CalcState>) => void, currencyRatesBuy: ExchangeCurrencyItem[]) =>
-  (value: string, codeTo: Currency, codeFrom: Currency) => {
-    setCalcState({ inputBuy: formatValue(value), selectSell: codeFrom });
+  (value: string, currencyTo: Currency, currencyFrom: Currency) => {
+    setCalcState({ inputBuy: formatValue(value), selectSell: currencyFrom });
     const rate =
-      currencyRatesBuy.find((_) => _.code === codeFrom)?.sell ||
-      currencyRatesBuy.find((_) => _.code === codeTo)?.buy;
+      currencyRatesBuy.find((_) => _.currency?.currency === currencyFrom)?.saleExchangeRate ||
+      currencyRatesBuy.find((_) => _.currency?.currency === currencyTo)?.buyExchangeRate;
     if (rate) {
       setCalcState({
-        inputSell: String(calculateResult(value, rate, codeTo === Currency.RUB) || ''),
+        inputSell: String(calculateResult(value, rate, currencyTo === Currency.RUB) || ''),
       });
     }
   };

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useExchangeRates } from '../../hooks/useExchangeRates';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -7,25 +6,23 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { Currency } from './CurrencyProps';
 import { CurrencyTable } from './CurrencyTable';
 import { CurrentLocation } from './CurrentLocation';
-import { ExchangeCurrencyCalculator } from './ExchangeCurrencyCalculator';
+import { ExchangeCurrencyCalculator, ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
-
-const DEFAULT_LOCATION = {
-  address: 'Москва, ул.Ленина д.28',
-  distance: '6км',
-};
+import { useFetchExchangeRateData } from './useFetchExchangeRateData';
 
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   ({ className = '', context, title = 'Курсы обмена валют', button, ...rest }) => {
-    const currencyRates = useExchangeRates();
+    const { exchangeRates } = useFetchExchangeRateData();
+
+    const currencyRates = getCurrencyRates(exchangeRates?.exchangeRate?.currencies);
 
-    const currencyRatesBuy = currencyRates.filter((_) => _.buy);
-    currencyRatesBuy.unshift({ code: Currency.RUB });
+    const currencyRatesBuy = currencyRates.filter((_) => _.buyExchangeRate);
+    currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
 
-    const currencyRatesSell = currencyRates.filter((_) => _.sell);
-    currencyRatesSell.push({ code: Currency.RUB });
+    const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
+    currencyRatesSell.push({ currency: { currency: Currency.RUB } });
 
     return (
       <BlockWrapper
@@ -44,7 +41,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
               {currencyRates ? (
                 <CurrencyTable className="mb-[30px]" exchangeCurrencyItems={currencyRates} />
               ) : null}
-              <CurrentLocation {...DEFAULT_LOCATION} />
+              <CurrentLocation address={exchangeRates?.address} />
             </div>
             {currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (
               <ExchangeCurrencyCalculator
@@ -61,3 +58,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
     );
   },
 );
+
+const getCurrencyRates = (currencies?: ExchangeCurrencyItem[]) => {
+  return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
+};

package/src/components/ExchangeRateTile/callbackCurrencySelect.ts

@@ -4,7 +4,7 @@ import { Currency } from './CurrencyProps';
 interface TableFuncProps {
   value: Currency;
   oppositeValue: Currency;
-  handleConvert: (codeFrom?: Currency, codeTo?: Currency) => void;
+  handleConvert: (currencyFrom?: Currency, currencyTo?: Currency) => void;
 }
 
 export const callbackCurrencySelect = (props: TableFuncProps) =>

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,6 +1,6 @@
 import { Input } from '../../ui-kit/Input/Input';
-import { Select } from '../../ui-kit/Select/Select';
 import type { OptionProps } from '../../ui-kit/Select/Select';
+import { Select } from '../../ui-kit/Select/Select';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 
@@ -15,7 +15,10 @@ interface InputProps {
 
 export function renderInput(props: InputProps) {
   const { placeholder, rates, selected, value, setValue, setSelected } = props;
-  const ratesOptions: OptionProps[] = rates.map((_) => ({ key: _.code ?? '', text: _.code ?? '' }));
+  const ratesOptions: OptionProps[] = rates.map((_) => ({
+    key: _?.currency?.currency ?? '',
+    text: _?.currency?.currency ?? '',
+  }));
   const selectedValue: OptionProps = { key: selected, text: selected };
 
   return (

package/src/components/ExchangeRateTile/useFetchExchangeRateData.ts

@@ -0,0 +1,71 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { ExchangeCurrencyItem } from '../../components/ExchangeRateTile/ExchangeCurrencyCalculator';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+
+export interface ExchangeData {
+  exchangeRate?: {
+    currencies?: ExchangeCurrencyItem[];
+  };
+  address?: string;
+}
+
+export interface RegionData {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+const EXCHANGE_RATES_URL = '/api/v1/exchangerates';
+const REGION_URL = '/api/v1/region';
+
+export function useFetchExchangeRateData() {
+  const { data } = useAsyncData<{
+    region?: RegionData;
+    exchangeRates?: ExchangeData;
+  }>(EXCHANGE_RATES_URL, fetchData);
+
+  return data || {};
+}
+
+export function useCurrentPosition() {
+  const { data } = useAsyncData<RegionData>(REGION_URL, fetchJSONUnsafe);
+
+  return data || {};
+}
+
+const fetchData = async (
+  urlExchangeRates: string,
+): Promise<{
+  region: RegionData;
+  exchangeRates: ExchangeData;
+}> => {
+  const region = await fetchRegion();
+
+  const regionCode = region?.code || '000';
+
+  const exchangeRates = await fetchExchangeRates(urlExchangeRates, regionCode);
+
+  return { region, exchangeRates };
+};
+
+const fetchRegion = async (): Promise<RegionData> => {
+  try {
+    return await fetchJSONUnsafe<RegionData>(REGION_URL, { method: 'GET' });
+  } catch (error) {
+    console.log(error);
+
+    return {};
+  }
+};
+
+const fetchExchangeRates = async (url: string, regionCode: string): Promise<ExchangeData> => {
+  try {
+    return await fetchJSONUnsafe<ExchangeData>(url + `?regionCode=${regionCode}`, {
+      method: 'GET',
+    });
+  } catch (error) {
+    console.log(error);
+
+    return {};
+  }
+};

package/src/components/Gallery/Gallery.fixture.tsx

@@ -1,7 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { Gallery } from './Gallery';
 import type { GalleryProps } from './GalleryProps';
 const isDotted = true;
@@ -28,7 +27,7 @@ const buttonPrimaryIcon: ButtonWithIconProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
-  appendLeft: <Img image={{ icon: 'BankIcon' }} width="24" height="24" asSVG />,
+  icon: { icon: 'BankIcon' },
 };
 
 const defaultItems = [

package/src/components/Gallery/GalleryCardInner.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
-import { Button } from '../../ui-kit/Button/Button';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
@@ -30,7 +30,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
           {items?.length ? renderItems(items, isDotted, version) : null}
           {renderAdditionalDescription(additionalDescription)}
         </div>
-        {button?.text ? <Button className="mt-6" {...button} /> : null}
+        {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
       </div>
     );
   },

package/src/components/Gallery/GalleryInner.tsx

@@ -3,11 +3,11 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
 import type { GalleryContent } from './GalleryContent';
-import { Button } from '../../ui-kit/Button/Button';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
   version?: GalleryVersion;
@@ -54,7 +54,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
           </div>
         ) : null}
 
-        {button ? <Button className="mt-8 mx-auto" {...button} /> : null}
+        {button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null}
       </BlockWrapper>
     );
   },

package/src/components/Header/DropdownMenu.tsx

@@ -67,15 +67,15 @@ const renderDotsSubMenuItems = ({
 }: DotsSubMenuItemsProps) => {
   const isActive = (item: LinkProps) => item === activeSubItem;
 
-  return menuItems?.map((_) => (
+  return menuItems?.map(({ text, ...rest }) => (
     <a
-      key={_.href}
-      {...useLink({ router, handlerDecorator }, _)}
+      key={rest.href}
+      {...useLink({ router, handlerDecorator }, rest)}
       className={`text-l-light pb-4 hover:text-primary-main ${
-        isActive(_) ? 'text-primary-main' : ''
+        isActive(rest) ? 'text-primary-main' : ''
       }`}
     >
-      {_.text}
+      {text}
     </a>
   ));
 };

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -16,39 +16,52 @@ export interface HeaderSubMenuProps {
 }
 
 export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
-  const [menuVisible, setMenuVisible] = useState(false);
-  const router = context.useRouter();
   const { handlerDecorator } = context;
+  const router = context.useRouter();
+
+  const subItemsListRef = useRef<HTMLDivElement | null>(null);
+
+  const [menuVisible, setMenuVisible] = useState(false);
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const toggleMenu = () => setMenuVisible(!menuVisible);
+  const observerOptions = useMemo(
+    () => ({ threshold: 1, root: subItemsListRef.current }),
+    [subItemsListRef.current],
+  );
+
+  const observerCallbacks = useMemo(
+    () =>
+      subItems.map((_, index) => (entries: IntersectionObserverEntry[]) => {
+        if (!entries.length) {
+          return;
+        }
 
-  const observerCallback = (itemIndex: number) => (entries: IntersectionObserverEntry[]) => {
-    if (!entries.length) {
-      return;
-    }
+        // Assumption about sorting entries by time
+        const entry = entries[entries.length - 1];
 
-    const entry = entries[0];
+        if (entry.isIntersecting) {
+          setVisibleItemsCount(handleIntersectionActivation(index));
+        } else {
+          setVisibleItemsCount(handleIntersectionDeactivation(index));
+        }
+      }),
+    [subItems],
+  );
 
-    if (entry.intersectionRatio < 1) {
-      setVisibleItemsCount((prev) => Math.min(prev, itemIndex));
-    } else {
-      setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
-    }
-  };
+  const activeSubItem = findActiveSubItem(router)(subItems);
+  const toggleMenu = () => setMenuVisible(!menuVisible);
 
   return (
     <nav className="relative mt-6">
-      <div className="overflow-hidden whitespace-nowrap mr-52 pb-3">
+      <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
           <IntersectionObserverTag
-            tag="span"
-            observerCallback={observerCallback(i)}
-            observerOptions={{ threshold: 1 }}
             key={String(i)}
+            tag="span"
+            observerCallback={observerCallbacks[i]}
+            observerOptions={observerOptions}
           >
             <HeaderItem
               className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
@@ -72,3 +85,6 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
     </nav>
   );
 });
+
+const handleIntersectionActivation = (index: number) => (prev: number) => Math.max(prev, index + 1);
+const handleIntersectionDeactivation = (index: number) => (prev: number) => Math.min(prev, index);

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -1,8 +1,6 @@
-import type { IconVersion } from '../../model/IconVersion';
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { MobileAppTile } from './MobileAppTile';
 
 const image: Picture = {
@@ -34,14 +32,7 @@ const listItems = [
 const button1: ButtonWithIconProps = {
   aboveText: 'Загрузите в',
   text: 'App Store',
-  appendLeft: (
-    <Img
-      image={{ icon: 'AppleIcon', iconVersion: 'white' as IconVersion }}
-      width="24"
-      height="24"
-      asSVG
-    />
-  ),
+  icon: { icon: 'AppleIcon', iconVersion: 'white' },
   href: 'apps.apple.com',
   version: 'primary',
 };
@@ -49,13 +40,11 @@ const button1: ButtonWithIconProps = {
 const button2: ButtonWithIconProps = {
   aboveText: 'Доступно в',
   text: 'Google Play',
-  appendLeft: <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" asSVG />,
+  icon: { icon: 'PlayMarketIcon' },
   href: 'play.google.com',
   version: 'secondary',
 };
 
-const icon = <Img image={{ icon: 'AppleIcon' }} width="24" height="24" asSVG />;
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -72,7 +61,7 @@ export default {
         buttons={[
           {
             ...button1,
-            appendLeft: icon,
+            icon: { icon: 'AppleIcon' },
             version: 'secondary',
           },
           button2,

package/src/components/OfficeMap/OfficeMap.tsx

@@ -1,21 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useOfficeMap } from '../../hooks/useOfficeMap';
+import { useOfficeMap } from './useOfficeMap';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { OFFICE_MAP } from './mockOfficeMap';
-import type { NearbyOffices, OfficeMapProps, WorkScheduleWeek } from './OfficeMapContent';
+import type { OfficeMapProps, WorkScheduleWeek } from './OfficeMapContent';
 import { renderCurrentDaySchedule, renderDay, renderNearbyOffice } from './renderFunctions';
-import { YandexMap } from './YandexMap';
+import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
+import { nearbyOffices } from './nearbyOffices';
 
 export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
   const resultOfficeMap = useOfficeMap('063') || OFFICE_MAP;
   const { name, address, gpsLatitude, gpsLongitude, workSchedule } =
     resultOfficeMap as OfficeMapProps;
   const {
-    workTime,
-    lunchHour,
-    workTimeSaturday,
-    lunchHourSaturday,
     workingMonday,
     workingTuesday,
     workingWednesday,
@@ -24,8 +21,8 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
     workingSaturday,
     workingSunday,
   } = workSchedule;
+  const { workTime, lunchHour, workTimeSaturday, lunchHourSaturday } = workSchedule;
   const point = gpsLatitude && gpsLongitude ? [gpsLatitude, gpsLongitude] : null;
-
   const workScheduleWeek: WorkScheduleWeek[] = [
     { title: 'Понедельник', status: workingMonday, workTime, lunchHour },
     { title: 'Вторник', status: workingTuesday, workTime, lunchHour },
@@ -46,12 +43,6 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
     },
     { title: 'Воскресенье', status: workingSunday },
   ];
-  // Добавлено для проверки
-  const nearbyOffices: NearbyOffices[] = [
-    { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
-    { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
-    { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
-  ];
   const currentWeekDayInd = new Date().getDay();
   const currentWeekDay =
     currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
@@ -70,9 +61,11 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
         <div className="flex pt-4">{nearbyOffices.map(renderNearbyOffice)}</div>
       </div>
       <div className="flex justify-between pt-8">
-        <div className="flex-grow h-full bg-gray">{point ? <YandexMap point={point} /> : null}</div>
-        <div className="w-[434px] pl-9 pr-12 pb-14">
-          <div className="flex flex-col">{workScheduleWeek.map(renderDay)}</div>
+        <div className="flex-grow h-full w-full overflow-hidden">
+          {point ? <YandexMap points={[point]} className="h-full" /> : null}
+        </div>
+        <div className="w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col">
+          {workScheduleWeek.map(renderDay)}
         </div>
       </div>
     </div>

package/src/components/OfficeMap/nearbyOffices.ts

@@ -0,0 +1,8 @@
+import { NearbyOffices } from './OfficeMapContent';
+
+// Добавлено для проверки
+export const nearbyOffices: NearbyOffices[] = [
+  { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
+  { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
+  { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
+];

package/src/components/OfficeMap/renderFunctions.tsx

@@ -23,8 +23,11 @@ export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkSc
   );
 };
 
-export const renderNearbyOffice = ({ icon, title, distance, time }: NearbyOffices, inx: number) => (
-  <div className="flex mr-4" key={`nearbyOffice${inx}`}>
+export const renderNearbyOffice = (
+  { icon, title, distance, time }: NearbyOffices,
+  index: number,
+) => (
+  <div className="flex mr-4" key={`nearbyOffice${index}`}>
     <Icon name={icon} width="16" height="16" asSVG className="mr-1" />
     {title ? <span className="text-m">{title}&nbsp;</span> : null}
     <span className="text-m-light">

package/src/{hooks → components/OfficeMap}/useOfficeMap.ts

@@ -1,5 +1,5 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-import { fetchJSON } from '../utils/fetchJSON';
+import { fetchJSON } from '../../utils/fetchJSON';
 
 const OFFICE_MAP_URL = '/api/v1/branches';
 

package/src/components/PictureText/PictureText.tsx

@@ -47,7 +47,7 @@ export const PictureText = JSX<PictureTextProps>(
             {benefits?.length ? (
               <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
             ) : null}
-            {renderInsuranceSumMonth(sum, monthLimit)}
+            {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
           </div>
         </div>
       </BlockWrapper>

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -9,7 +9,7 @@ import { SafeDepositRentalForm } from './SafeDepositRentalForm';
 import { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
 import { Region, useGetRegions } from './useGetRegions';
 import { getBranch, getCoordinates } from './utils';
-import { YandexMap } from './YandexMap';
+import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
@@ -58,7 +58,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
           />
           {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}
         </div>
-        {points.length && showMap ? <YandexMap points={points} /> : null}
+        {points.length && showMap ? <YandexMap points={points} className="h-[640px]" /> : null}
       </BlockWrapper>
     );
   },

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -113,6 +113,8 @@ export default {
           text: 'Отправить заявку',
           href: 'https://www.rshb.ru/',
           target: '_blank',
+          icon: { icon: 'ComfortableCompIcon' },
+          iconRight: { icon: 'ComfortableCompIcon' },
         }}
       />
     </div>