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

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -1,6 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconProps } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 
 /**
@@ -29,6 +29,10 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
+  /** @title Иконка слева */
+  icon?: Picture;
+  /** @title Иконка справа */
+  iconRight?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */

package/mobile/src/ui-kit/Button/ButtonSection.tsx

@@ -1,16 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { HandlerDecorator, Router } from '../../components/ContentPage/ContentPageContext';
 import { useLink } from '../../hooks/useLink';
+import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
 
 export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
 
-interface ButtonSectionItemProps {
+interface RenderButtonProps {
   button: ButtonWithIconProps;
-  router: Router;
-  handlerDecorator?: HandlerDecorator;
+  buttonClassName?: string;
+  index?: number;
+}
+
+interface RenderButtonIconProps {
+  icon?: Picture;
+  iconVersion?: IconVersion;
 }
 
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
@@ -19,20 +26,38 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 
   return buttons && buttons?.length ? (
     <div className={className}>
-      {buttons.map((button, index) => (
-        <ButtonSectionItem
-          button={button}
-          handlerDecorator={handlerDecorator}
-          key={String(index)}
-          router={router}
-        />
-      ))}
+      {buttons.map((button, index) =>
+        renderButton({ button: useLink({ router, handlerDecorator }, button), index }),
+      )}
     </div>
   ) : null;
 });
 
-const ButtonSectionItem = JSX<ButtonSectionItemProps>(({ router, handlerDecorator, button }) => {
-  const buttonProps = useLink({ router, handlerDecorator }, button);
+export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
+  const { icon, iconRight, version, ...rest } = button;
 
-  return <Button {...button} {...buttonProps} />;
-});
+  const iconVersion = version === 'secondary' ? 'normal' : 'white';
+
+  const leftIcon = renderButtonIcon({ icon, iconVersion });
+  const rightIcon = renderButtonIcon({ icon: iconRight, iconVersion });
+
+  return (
+    <Button
+      className={buttonClassName}
+      appendLeft={leftIcon}
+      appendRight={rightIcon}
+      version={version}
+      key={index ? String(index) : ''}
+      {...rest}
+    />
+  );
+}
+
+const renderButtonIcon = ({ icon, iconVersion }: RenderButtonIconProps) => {
+  if (!icon?.icon && !icon?.src) {
+    return null;
+  }
+  const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
+
+  return <Img image={{ ...icon, iconVersion: iconVersion }} width={iconWidth} height="24" asSVG />;
+};

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import type { VNode } from '../model/VNode';
 
 interface IntersectionObserverTagProps {
@@ -20,29 +20,25 @@ export const IntersectionObserverTag = JSX<IntersectionObserverTagProps>((props)
     anchor = null,
     children,
   } = props;
+  const tagRef = useRef<HTMLElement | null>(null);
 
-  const intersectionObserver = useRef<IntersectionObserver | null>(null);
+  useEffect(() => {
+    if (!tagRef.current) {
+      return undefined;
+    }
 
-  const ref = useCallback(
-    (element: HTMLElement | null) => {
-      if (!element) {
-        return;
-      }
+    const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
+    intersectionObserver.observe(tagRef.current);
 
-      if (intersectionObserver.current) {
-        intersectionObserver.current.disconnect();
-      }
-
-      intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
-      intersectionObserver.current.observe(element);
-    },
-    [observerCallback, observerOptions],
-  );
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [observerCallback, observerOptions]);
 
   const Tag = tag as any;
 
   return (
-    <Tag ref={ref} className={className} id={anchor}>
+    <Tag ref={tagRef} className={className} id={anchor}>
       {children}
     </Tag>
   );

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

@@ -0,0 +1,128 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import ymaps from 'yandex-maps';
+import { renderClusterer } from './renderClusterer';
+import { renderOpenMap } from './renderOpenMap';
+import { renderSearchField } from './renderSearchField';
+import { renderUserGeolocation } from './renderUserGeolocation';
+import { useYandexMaps } from './useYandexMaps';
+import { Icon } from '../Icon/Icon';
+import { ZoomButton } from './ZoomButton';
+import { MockPoints, mockPoints } from './mockPoints';
+
+interface YandexMapProps {
+  points: number[][];
+  className?: string;
+  zoom?: number;
+  showSearchField?: boolean;
+}
+
+const FULLSCREEN_STYLES = {
+  border: 'border border-transparent rounded-md ',
+  position: 'absolute flex items-center justify-center',
+  size: 'w-12 h-12',
+  focus: 'focus:border-primary-focus focus:border',
+  font: 'text-center font-sans',
+  active: 'active:bg-primary-active',
+  hover: 'hover:bg-primary-hover',
+  other: 'select-none cursor-pointer',
+};
+
+// TODO: Поле для поиска: невыяснено среди каких данных делать поиск (искать в имени офиса, в адресе, метро и т.д.).
+//       Сейчас реализован поиск среди тестовых данных
+// TODO: Также выяснить что делать когда ничего не найдено
+// TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
+export const YandexMap = JSX<YandexMapProps>(
+  ({ points, className = '', zoom = 5, showSearchField = false }) => {
+    const map = useRef<ymaps.Map | null>(null);
+
+    const yandexMaps = useYandexMaps();
+
+    const [isFullScreen, setIsFullScreen] = useState();
+    const [pointsToRender, setPointsToRender] = useState<number[][]>(normalizePoints(mockPoints));
+
+    const pointsCenter = getCenterPoint(points);
+
+    useEffect(() => {
+      if (!map?.current) {
+        yandexMaps?.ready(() => {
+          map.current = new yandexMaps.Map('map', {
+            center: pointsCenter,
+            zoom,
+            controls: [],
+            suppressMapOpenBlock: true,
+          });
+          renderClusterer(yandexMaps, map.current, pointsToRender);
+        });
+      }
+    }, [yandexMaps, map, pointsToRender]);
+
+    useEffect(() => {
+      if (map.current && pointsToRender && yandexMaps) {
+        const newPoints = pointsToRender.length < 1 ? normalizePoints(mockPoints) : pointsToRender;
+        renderClusterer(yandexMaps, map.current, newPoints);
+      }
+    }, [map, pointsToRender, yandexMaps]);
+
+    if (!yandexMaps) {
+      return null;
+    }
+
+    const toggleFullscreen = () => {
+      const container = map.current.container;
+      if (!isFullScreen) {
+        container.enterFullscreen();
+      } else {
+        container.exitFullscreen();
+      }
+      setIsFullScreen(container.isFullscreen());
+    };
+
+    const zIndex = isFullScreen ? 'z-[100000]' : 'z-10';
+
+    const updatePointsToRender = (newPoints: MockPoints | null) => {
+      if (newPoints) {
+        const normalizedPoints = normalizePoints(newPoints);
+        setPointsToRender(normalizedPoints);
+      }
+    };
+
+    return (
+      <div id="map" className={`${isFullScreen ? '' : 'relative'} w-full ${className}`}>
+        <div className={`absolute flex left-2 top-4 w-[50%] ${zIndex}`}>
+          {showSearchField
+            ? renderSearchField(mockPoints, yandexMaps, updatePointsToRender)
+            : renderOpenMap(pointsCenter)}
+        </div>
+        <div
+          className={`${Object.values(FULLSCREEN_STYLES).join(
+            ' ',
+          )} ${zIndex} right-2 top-4 bg-white`}
+          onClick={toggleFullscreen}
+        >
+          <Icon name="FullScreenIcon" width="16" height="16" />
+        </div>
+        <div
+          className={`absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md ${zIndex}`}
+        >
+          <ZoomButton yandexMaps={map} />
+          <ZoomButton yandexMaps={map} direction="out" />
+        </div>
+        {renderUserGeolocation(map.current, yandexMaps, `right-2 top-80 ${zIndex}`)}
+      </div>
+    );
+  },
+);
+
+const getCenterPoint = (points: number[][]) => [
+  getArraySumAndAverage(mapByIndex(points, 0)),
+  getArraySumAndAverage(mapByIndex(points, 1)),
+];
+
+const mapByIndex = (arr: number[][], index: number) => arr.map((a) => a[index]);
+
+const getArraySumAndAverage = (arr: number[][]) => arr.reduce((a, b) => a + b) / arr.length;
+
+const normalizePoints = (points: number[][]) => (points ? points.map((_) => _.coords) : null);

package/mobile/src/ui-kit/YandexMap/ZoomButton.tsx

@@ -0,0 +1,38 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { JSX } from '@redneckz/uni-jsx';
+import ymaps from 'yandex-maps';
+import { Icon } from '../Icon/Icon';
+
+interface ZoomButtonProps {
+  yandexMaps: ymaps.Map;
+  direction?: string;
+}
+
+const styles = {
+  focus: 'focus:border-primary-focus focus:border',
+  hover: 'hover:bg-primary-hover',
+  active: 'active:bg-primary-active',
+  border: 'border-b border-b-2 border-gray last:border-0',
+  position: 'relative flex items-center justify-center',
+  font: 'text-center font-sans text-l',
+};
+
+// TODO: Добавить метод определения центральной точки
+export const ZoomButton = JSX<ZoomButtonProps>(({ yandexMaps, direction = 'in' }) => {
+  const iconName = direction === 'in' ? 'PlusIcon' : 'MinusIcon';
+  const changeZoom = () => {
+    const currentZoom = yandexMaps.current.getZoom();
+    const newZoom = direction === 'in' ? currentZoom + 1 : currentZoom - 1;
+    yandexMaps.current.setZoom(newZoom, { checkZoomRange: true });
+  };
+
+  return (
+    <div
+      onClick={changeZoom}
+      className={`${Object.values(styles).join(' ')} bg-white select-none cursor-pointer w-12 h-12`}
+    >
+      <Icon name={iconName} width="20" height="16" />
+    </div>
+  );
+});

package/mobile/src/ui-kit/YandexMap/mockPoints.ts

@@ -0,0 +1,30 @@
+export type MockPoints = {
+  coords: number[];
+  text: string;
+};
+
+export const mockPoints: MockPoints[] = [
+  { coords: [55.77, 37.46], text: 'Трактир' },
+  { coords: [55.66, 37.48], text: 'Трактор' },
+  { coords: [55.65, 37.42], text: 'Ресторан' },
+  { coords: [55.64, 37.54], text: 'Музей' },
+  { coords: [55.54, 37.52], text: 'Библиотека' },
+  { coords: [55.53, 37.56], text: 'Школа' },
+  { coords: [55.61, 37.61], text: 'Аптека' },
+  { coords: [55.8, 37.58], text: 'Бар' },
+  { coords: [55.71, 37.35], text: 'Институт' },
+  { coords: [55.74, 37.57], text: 'Университет' },
+  { coords: [55.58, 37.69], text: 'Больница' },
+  { coords: [55.57, 37.7], text: 'Цирк' },
+  { coords: [55.55, 37.64], text: 'Магазин' },
+  { coords: [55.5, 37.75], text: 'Булочная' },
+  { coords: [55.81, 37.73], text: 'Полиция' },
+  { coords: [55.73, 37.68], text: 'Салон красоты' },
+  { coords: [55.86, 37.76], text: 'Баня' },
+  { coords: [55.38, 37.69], text: 'Гараж' },
+  { coords: [55.91, 37.5], text: 'Дом' },
+  { coords: [55.62, 37.32], text: 'Прачечная' },
+  { coords: [55.85, 37.41], text: 'Стадион' },
+  { coords: [55.67, 37.24], text: 'Вокзал' },
+  { coords: [55.79, 37.41], text: 'Кафе' },
+];

package/mobile/src/ui-kit/YandexMap/renderClusterer.ts

@@ -0,0 +1,51 @@
+// TODO: Fix
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import ymaps from 'yandex-maps';
+
+export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points: number[][]) {
+  map.geoObjects.removeAll();
+
+  const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass(
+    '<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>',
+  );
+
+  const clusterer = new yandexMaps.Clusterer({
+    clusterIcons: [
+      {
+        href: 'icons/MapMarkerClusterIcon.svg',
+        size: [78, 84],
+        offset: [-35, -50],
+      },
+    ],
+    clusterIconContentLayout,
+    clusterHideIconOnBalloonOpen: false,
+    geoObjectHideIconOnBalloonOpen: false,
+  } as ymaps.IClustererOptions);
+
+  const geoObjects = points.map(
+    (point) =>
+      new yandexMaps.Placemark(
+        point,
+        {},
+        {
+          iconLayout: 'default#image',
+          iconImageHref: 'icons/MapMarkerSingleIcon.svg',
+          iconImageSize: [78, 84],
+          iconImageOffset: [-35, -50],
+        },
+      ),
+  );
+
+  clusterer.add(geoObjects);
+
+  map.geoObjects.add(clusterer as any);
+
+  // TODO: Fix
+  // @ts-ignore
+  map.setBounds(yandexMaps.util.bounds.fromPoints(points)).then(() => {
+    if (map.getZoom() > 10) {
+      map.setZoom(10);
+    }
+  });
+}

package/mobile/src/ui-kit/YandexMap/renderOpenMap.tsx

@@ -0,0 +1,26 @@
+const styles = {
+  focus: 'focus:border-primary-focus focus:border',
+  hover: 'hover:bg-primary-hover',
+  active: 'active:bg-primary-active',
+  border: 'border border-transparent rounded-md',
+  position: 'flex items-center justify-center',
+  font: 'text-center font-sans',
+};
+
+export const renderOpenMap = (pointsCenter: number[]) => {
+  const getYandexMapUrl = () => {
+    return `https://yandex.ru/maps/?ll=${[pointsCenter[1], pointsCenter[0]]}&z=10&l=map`;
+  };
+
+  return (
+    <a
+      className={`select-none cursor-pointer px-9 h-12 bg-white bg-primary-main text-white ${Object.values(
+        styles,
+      ).join(' ')}`}
+      href={getYandexMapUrl()}
+      target="_blank"
+    >
+      Открыть на карте
+    </a>
+  );
+};

package/mobile/src/ui-kit/YandexMap/renderSearchField.tsx

@@ -0,0 +1,51 @@
+import { Icon } from '../Icon/Icon';
+import type { MockPoints } from './mockPoints';
+import ymaps from 'yandex-maps';
+const styles = {
+  border: 'border border-transparent rounded-md',
+  position: 'relative flex items-center',
+  font: 'text-center font-sans',
+  shadow: 'shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
+};
+
+export const renderSearchField = (
+  points: MockPoints[],
+  yandexMaps: ymaps.Map,
+  updatePointsToRender: (any: MockPoints[] | null) => void,
+) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value: string = e.target?.value ? e.target?.value.toLowerCase() : '';
+    if (value) {
+      const searchResult = points.filter((_: MockPoints) => {
+        const textLowerCase = _.text.toLowerCase();
+        if (textLowerCase.indexOf(value) > -1) {
+          return _;
+        }
+
+        return null;
+      });
+      updatePointsToRender(searchResult);
+    } else {
+      updatePointsToRender(null);
+    }
+  };
+
+  return (
+    <div className={`${Object.values(styles).join(' ')} bg-white py-3 pl-11 pr-4 w-full`}>
+      <Icon
+        name="LoupeIcon"
+        iconVersion="black"
+        width="20"
+        height="20"
+        asSVG
+        className="absolute left-4"
+      />
+      <input
+        type="text"
+        placeholder="Введите адрес или метро"
+        onChange={onChange}
+        className="border-0 focus:border-0 outline-0 w-full"
+      />
+    </div>
+  );
+};

package/mobile/src/ui-kit/YandexMap/renderUserGeolocation.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { Icon } from '../Icon/Icon';
+import ymaps from 'yandex-maps';
+
+const styles = {
+  focus: 'focus:border-primary-focus focus:border',
+  hover: 'hover:bg-primary-hover',
+  active: 'active:bg-primary-active',
+  border: 'border border-transparent rounded-md',
+  position: 'absolute flex items-center justify-center',
+  font: 'text-center font-sans',
+};
+
+export const renderUserGeolocation = (
+  map: ymaps.Map,
+  yandexMaps: typeof ymaps,
+  className: string,
+) => {
+  const setUserGeoLocation = () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    yandexMaps.geolocation
+      .get({
+        provider: 'yandex',
+        autoReverseGeocode: true,
+        mapStateAutoApply: true,
+      })
+      .then(function (result) {
+        map.geoObjects.add(result.geoObjects);
+      });
+  };
+
+  return (
+    <div
+      className={`select-none cursor-pointer py-4 w-12 bg-white ${Object.values(styles).join(
+        ' ',
+      )} ${className}`}
+      onClick={setUserGeoLocation}
+    >
+      <Icon name="UserGeoLocationIcon" width="20" height="16" />
+    </div>
+  );
+};

package/mobile/src/ui-kit/YandexMap/useYandexMaps.ts

@@ -0,0 +1,11 @@
+import ymaps from 'yandex-maps';
+import { useExternalNS } from '../../hooks/useExternalNS';
+import { projectSettings } from '../../ProjectSettings';
+
+const YMAPS_NAMESPACE = 'ymaps';
+
+export const useYandexMaps = () => {
+  const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`;
+
+  return useExternalNS<typeof ymaps>(YMAPS_NAMESPACE, url);
+};

package/package.json

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

package/src/common.css

@@ -157,3 +157,12 @@ html {
     -moz-appearance: textfield;
   }
 }
+
+/*
+  Styling Yandex Map element
+ */
+/* Hide yandex elements in yandex map */
+[class$='-map-copyrights-promo'],
+[class$='-copyrights-pane'] {
+  display: none;
+}

package/src/components/Bonus/Bonus.example.json

@@ -4,12 +4,7 @@
   "bonusItems": [
     {
       "title": "Плитка 1",
-      "description": "Описание плитки 1",
-      "bonusItemContent": {
-        "bonusType": "count",
-        "bonusCount": "1",
-        "bonusName": "балл"
-      }
+      "description": "Описание плитки 1"
     }
   ]
 }

package/src/components/Bonus/BonusContent.ts

@@ -37,6 +37,7 @@ export type BonusItem = HeadlineCommonProps & {
   /**
    * @title Кнопка
    * @maxItems 1
+   * @default [{"version" : "secondary", "target": "_self"}]
    */
   buttons?: ButtonWithIconProps[];
 };

package/src/components/Catalog/Catalog.fixture.tsx

@@ -1,9 +1,7 @@
-import type { IconVersion } from '../../model/IconVersion';
 import type { Picture } from '../../model/Picture';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { Catalog, CatalogProps } from './Catalog';
 
 const payRing: Picture = {
@@ -23,14 +21,9 @@ const buttonPrimary: ButtonWithIconProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'primary',
-  appendLeft: (
-    <Img
-      image={{ icon: 'AppleIcon', iconVersion: 'primary' as IconVersion }}
-      width="24"
-      height="24"
-      asSVG
-    />
-  ),
+  icon: {
+    icon: 'AppleIcon',
+  },
 };
 
 const catalogCard = {

package/src/components/Catalog/CatalogCard.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { Button } from '../../ui-kit/Button/Button';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CatalogCardType } from './CatalogContent';
@@ -35,7 +35,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
           </div>
         ) : null}
         {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
-        {button ? <Button className="mt-5 w-full" {...button} /> : null}
+        {button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null}
       </section>
     );
   },

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -31,18 +31,20 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 });
 
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
-  const code = exchangeCurrencyItem?.code;
+  const currency = exchangeCurrencyItem?.currency?.currency;
 
   return (
-    <tr key={code} className="pb-1 text-h6">
+    <tr key={currency} className="pb-1 text-h6">
       <td className="pt-4">
         <div className="flex items-center">
-          {code ? <Img image={{ icon: CURRENCY_ICONS_MAP[code] }} width="24" height="24" /> : null}
-          <span className="ml-2">{code}</span>
+          {currency ? (
+            <Img image={{ icon: CURRENCY_ICONS_MAP[currency] }} width="24" height="24" />
+          ) : null}
+          <span className="ml-2">{currency}</span>
         </div>
       </td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.sell)}</td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.buy)}</td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</td>
     </tr>
   );
 };