@redneckz/wildless-cms-uni-blocks 0.14.899 → 0.14.901

package/src/components/ApplicationForm/ApplicationForm.fixture.mobile.tsx

@@ -159,7 +159,7 @@ export default {
         className="col-span-12"
         title="Заполните онлайн-заявку на открытие брокерского счёта"
         typeForm="BROK"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             columns: 2,
@@ -219,7 +219,7 @@ export default {
         className="col-span-12"
         title="Заявка на выпуск бизнес-карты"
         typeForm="BCRD"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'region', required: true }],
@@ -247,7 +247,7 @@ export default {
         className="col-span-12"
         title="Заполните заявку на консультацию"
         typeForm="COLLECTION"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [
@@ -285,7 +285,7 @@ export default {
         className="col-span-12"
         title="Оформите заявку на кредит прямо сейчас"
         typeForm="CRED"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             title: 'Параметры кредита',
@@ -501,7 +501,7 @@ export default {
         className="col-span-12"
         title="Самоинкассация (ЮЛ)"
         typeForm="SELFCOLLECTION"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [
@@ -563,7 +563,7 @@ export default {
         className="col-span-12"
         title="Получите консультацию по обслуживанию ВЭД"
         typeForm="KVED"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [
@@ -663,7 +663,7 @@ export default {
         className="col-span-12"
         title="Заявка по акции 'Шеф в деле'"
         typeForm="FCB"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'name', required: true }],
@@ -689,7 +689,7 @@ export default {
         className="col-span-12"
         title="Льготное кредитование АПК"
         typeForm="CREDL"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'name', required: true }],
@@ -715,7 +715,7 @@ export default {
         className="col-span-12"
         title="Подключить расчетно-кассовое обслуживание"
         typeForm="CONT"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'name', required: true }],
@@ -855,7 +855,7 @@ export default {
         className="col-span-12"
         title="Онлайн-заявка от партнера"
         typeForm="PF"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             title: 'Информация о партнере',
@@ -902,7 +902,7 @@ export default {
         className="col-span-12"
         title="Заявка на открытие счёта для бизнеса"
         typeForm="UNIVERSAL"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'name', required: true }],

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -159,7 +159,7 @@ export default {
         className="col-span-12"
         title="Заполните онлайн-заявку на открытие брокерского счёта"
         typeForm="BROK"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             columns: 2,
@@ -215,7 +215,7 @@ export default {
         className="col-span-12"
         title="Заявка на выпуск бизнес-карты"
         typeForm="BCRD"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'region', required: true }],
@@ -243,7 +243,7 @@ export default {
         className="col-span-12"
         title="Заполните заявку на консультацию"
         typeForm="COLLECTION"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [
@@ -281,7 +281,7 @@ export default {
         className="col-span-12"
         title="Оформите заявку на кредит прямо сейчас"
         typeForm="CRED"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             title: 'Параметры кредита',
@@ -496,7 +496,7 @@ export default {
         className="col-span-12"
         title="Самоинкассация (ЮЛ)"
         typeForm="SELFCOLLECTION"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [
@@ -557,7 +557,7 @@ export default {
         className="col-span-12"
         title="Получите консультацию по обслуживанию ВЭД"
         typeForm="KVED"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [
@@ -658,7 +658,7 @@ export default {
         className="col-span-12"
         title="Заявка по акции 'Шеф в деле'"
         typeForm="FCB"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'name', required: true }],
@@ -684,7 +684,7 @@ export default {
         className="col-span-12"
         title="Льготное кредитование АПК"
         typeForm="CREDL"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'name', required: true }],
@@ -710,7 +710,7 @@ export default {
         className="col-span-12"
         title="Подключить расчетно-кассовое обслуживание"
         typeForm="CONT"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'name', required: true }],
@@ -850,7 +850,7 @@ export default {
         className="col-span-12"
         title="Онлайн-заявка от партнера"
         typeForm="PF"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             title: 'Информация о партнере',
@@ -919,7 +919,7 @@ export default {
         className="col-span-12"
         title="Заявка на открытие счёта для бизнеса"
         typeForm="UNIVERSAL"
-        endpoint="sendcorporatelead"
+        endpoint="initcorporatelead"
         sections={[
           {
             inputs: [{ name: 'name', required: true }],

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -38,10 +38,11 @@ export type FieldDef = Required &
     name?: NameFieldDef;
     dadata?: boolean;
     defaultValue?: string;
+    placeholder?: string;
   };
 
 /** @hidden */
-export type EndpointType = 'lead' | 'sendcorporatelead' | 'initcorporatelead';
+export type EndpointType = 'lead' | 'initcorporatelead';
 
 /**
  * @title Секция полей ввода

package/src/components/ApplicationLeadForm/consents.ts

@@ -27,7 +27,7 @@ const CREDIT_CONSENTS: Record<keyof CreditFormConsents, ConsentData> = {
     docId: 1,
   },
   consentPfrFlg: {
-    text: 'Согласие на запрос в ПФР',
+    text: 'Согласие на запрос в CФР',
     docId: 3,
   },
 };

package/src/components/ApplicationLeadForm/useInitApplicationLead.ts

@@ -70,7 +70,7 @@ export const useInitApplicationLead = ({
   useEffect(() => {
     leadFormStore.productType = productType;
 
-    const { code, state, referalCode, refererCode, productId, marketingInfo } = getLeadQueryParams(
+    const { referalCode, refererCode, productId, marketingInfo } = getLeadQueryParams(
       queryFromStorage,
       sessionStore,
     );
@@ -84,6 +84,13 @@ export const useInitApplicationLead = ({
     }
 
     sessionStore.marketingInfo = marketingInfo;
+  }, [queryFromStorage]);
+
+  useEffect(() => {
+    const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
+
+    const code = params.get('code');
+    const state = params.get('state');
 
     if (code && state) {
       requestEsiaProfile(code, state);
@@ -91,7 +98,7 @@ export const useInitApplicationLead = ({
       sessionStorage.removeItem('accessToken');
       sessionStorage.removeItem('refreshToken');
     }
-  }, [queryFromStorage]);
+  }, []);
 
   return initialFormState;
 };
@@ -103,10 +110,8 @@ const getLeadQueryParams = (
   const referalData = sessionStore.referalData;
   const marketingInfoFromStorage = sessionStore.marketingInfo;
   const queryStorage = new URLSearchParams(decodeURIComponent(queryFromStorage || ''));
-  const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
 
-  const code = params.get('code');
-  const state = params.get('state');
+  const code = queryStorage.get('code');
   const referalCode = code ? referalData?.referalCode : queryStorage.get('referalCode');
   const refererCode = code ? referalData?.refererCode : queryStorage.get('refererCode');
   const productId = code ? referalData?.productId : queryStorage.get('productId');
@@ -123,8 +128,6 @@ const getLeadQueryParams = (
       };
 
   return {
-    code,
-    state,
     referalCode,
     refererCode,
     productId,

package/src/components/Blocks.mobile.ts

@@ -22,6 +22,7 @@ import { CreditForm } from './CreditForm/CreditForm';
 import { DebitForm } from './DebitForm/DebitForm';
 import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
+import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { GalleryLayout } from './GalleryLayout/GalleryLayout';
 import { GrantSupport } from './GrantSupport/GrantSupport';
@@ -61,6 +62,7 @@ export const Blocks: BlocksRegistry = {
   CarouselTariffsCard,
   DepositFiltration,
   ErrorBlock,
+  ExchangeRateTile,
   Footer,
   GalleryLayout,
   GrantSupport,

package/src/components/Blocks.ts

@@ -23,6 +23,7 @@ import { CreditForm } from './CreditForm/CreditForm';
 import { DebitForm } from './DebitForm/DebitForm';
 import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
+import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { GalleryLayout } from './GalleryLayout/GalleryLayout';
 import { GrantSupport } from './GrantSupport/GrantSupport';
@@ -66,6 +67,7 @@ export const Blocks: BlocksRegistry = {
   ErrorBlock,
   Footer,
   GalleryLayout,
+  ExchangeRateTile,
   GrantSupport,
   Header,
   Headline,

package/src/components/ExchangeRateTile/CurrencyProps.ts

@@ -0,0 +1,6 @@
+export enum Currency {
+  RUB = 'RUB',
+  EUR = 'EUR',
+  USD = 'USD',
+  CNY = 'CNY',
+}

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -0,0 +1,64 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { type ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
+import { formatCurrency } from './formatCurrency';
+
+const TABLE_STYLE_BASE = 'text-m font-light text-secondary-text ';
+const TABLE_HEAD_STYLE = `${TABLE_STYLE_BASE} text-left`;
+const TABLE_HEAD_STYLE_CENTER = `${TABLE_STYLE_BASE} pl-5xl text-center`;
+const TABLE_HEAD_STYLE_RIGHT = `${TABLE_STYLE_BASE} pl-5xl text-right`;
+
+const CURRENCY_ICONS_MAP = {
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
+  CNY: 'ChineseYuanRenminbiIcon',
+};
+
+interface CurrencyTableProps extends ComponentType {
+  exchangeCurrencyItems: ExchangeCurrencyItem[];
+}
+
+export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurrencyItems }) => (
+  <table className={style('h-fit w-full', className)}>
+    <thead>
+      <tr>
+        <th className={TABLE_HEAD_STYLE}>
+          <Text size="text-m">Валюта</Text>
+        </th>
+        <th className={TABLE_HEAD_STYLE_CENTER}>
+          <Text size="text-m">Купить</Text>
+        </th>
+        <th className={TABLE_HEAD_STYLE_RIGHT}>
+          <Text size="text-m">Продать</Text>
+        </th>
+      </tr>
+    </thead>
+    <tbody>{exchangeCurrencyItems.map(renderCurrencyRow)}</tbody>
+  </table>
+));
+
+const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
+  const currency = exchangeCurrencyItem?.currency?.currency;
+
+  return (
+    <tr key={currency} className="pb-2xs text-h6">
+      <td className="pt-m m-auto flex text-left">
+        <div className="flex items-center gap-xs">
+          {currency ? (
+            <Img image={{ icon: CURRENCY_ICONS_MAP[currency] }} width="24" height="24" />
+          ) : null}
+          <Text size="text-h6">{currency}</Text>
+        </div>
+      </td>
+      <td className="pt-m pl-5xl text-center">
+        <Text size="text-h6">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</Text>
+      </td>
+      <td className="pt-m pl-5xl text-right">
+        <Text size="text-h6">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</Text>
+      </td>
+    </tr>
+  );
+};

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
+import { type Picture } from '../../model/Picture';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { style } from '../../utils/style';
+
+interface CurrentLocationProps extends ComponentType {
+  address?: string;
+}
+
+const icon: Picture = { icon: 'GpsIcon' };
+
+export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', address }) => (
+  <div className={style('flex gap-s w-full justify-between @sm:justify-center', className)}>
+    <RoundedIcon {...icon} iconBgVersion="primary" className="shrink-0" />
+    <div className="space-y-2xs whitespace-pre-wrap">
+      {address ? (
+        <Paragraph size="text-l" color="text-primary-main">
+          {address}
+        </Paragraph>
+      ) : null}
+      <Paragraph size="text-m" color="text-secondary-text">
+        Курс указан для заданного офиса
+      </Paragraph>
+    </div>
+  </div>
+));

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -0,0 +1,155 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type ComponentType } from '../../model/ComponentType';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { type ButtonCommonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { calculateResult, formatValue } from './calculateResult';
+import { callbackCurrencySelect } from './callbackCurrencySelect';
+import { Currency } from './CurrencyProps';
+import { renderInput } from './renderInput';
+
+export interface ExchangeCurrencyItem {
+  currency?: {
+    id?: number;
+    code?: string;
+    currency?: Currency;
+  };
+  buyExchangeRate?: number;
+  saleExchangeRate?: number;
+}
+
+export interface ExchangeCurrencyCalculatorProps extends ComponentType {
+  currencyRatesBuy: ExchangeCurrencyItem[];
+  currencyRatesSell: ExchangeCurrencyItem[];
+  button?: ButtonCommonContent;
+}
+
+export interface CalcState {
+  inputSell: string;
+  inputBuy: string;
+  selectSell: Currency;
+  selectBuy: Currency;
+}
+
+export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
+  ({ className = '', currencyRatesBuy, currencyRatesSell, button }) => {
+    const [calcState, setCalcState] = useState<CalcState>({
+      inputSell: '',
+      inputBuy: '',
+      selectSell: currencyRatesBuy?.[0]?.currency?.currency || Currency.RUB,
+      selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
+    });
+
+    const handleSetCalcState = useCallback(
+      (newState: Partial<CalcState>) => setCalcState((oldState) => ({ ...oldState, ...newState })),
+      [],
+    );
+
+    return (
+      <div className={`flex flex-col gap-m pt-2xl ${className}`}>
+        {currencyRatesBuy && currencyRatesSell ? (
+          <div className="grid gap-m">
+            {renderInput({
+              placeholder: 'Хочу продать',
+              rates: currencyRatesSell,
+              selected: calcState.selectSell,
+              setSelected: handleSelectSell(calcState, handleSetCalcState, currencyRatesSell),
+              value: calcState.inputSell,
+              onChange: (value) =>
+                handleInputSell(handleSetCalcState, currencyRatesSell)(
+                  value,
+                  calcState.selectSell,
+                  calcState.selectBuy,
+                ),
+            })}
+            {renderInput({
+              placeholder: 'Получу',
+              rates: currencyRatesBuy,
+              selected: calcState.selectBuy,
+              setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
+              value: calcState.inputBuy,
+              onChange: (value) =>
+                handleInputBuy(handleSetCalcState, currencyRatesBuy)(
+                  value,
+                  calcState.selectBuy,
+                  calcState.selectSell,
+                ),
+            })}
+          </div>
+        ) : null}
+        {button?.text ? (
+          <LinkButton text={button.text} version={button?.version} {...button} />
+        ) : null}
+      </div>
+    );
+  },
+);
+
+const handleSelectSell =
+  (
+    calcState: CalcState,
+    setCalcState: (state: Partial<CalcState>) => void,
+    currencyRatesSell: ExchangeCurrencyItem[],
+  ) =>
+  (value: Currency) => {
+    setCalcState({ selectSell: value });
+    callbackCurrencySelect({
+      value,
+      oppositeValue: calcState.selectBuy,
+      handleConvert: (currencyFrom = calcState.selectSell, currencyTo = calcState.selectBuy) => {
+        handleInputSell(setCalcState, currencyRatesSell)(
+          calcState.inputSell,
+          currencyFrom,
+          currencyTo,
+        );
+      },
+    });
+  };
+
+const handleSelectBuy =
+  (
+    calcState: CalcState,
+    setCalcState: (state: Partial<CalcState>) => void,
+    currencyRatesBuy: ExchangeCurrencyItem[],
+  ) =>
+  (value: Currency) => {
+    setCalcState({ selectBuy: value });
+    callbackCurrencySelect({
+      value,
+      oppositeValue: calcState.selectSell,
+      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, currencyFrom: Currency, currencyTo: Currency) => {
+    setCalcState({ inputSell: formatValue(value), selectBuy: currencyTo });
+    const rate =
+      currencyRatesSell.find((_) => _.currency?.currency === currencyTo)?.buyExchangeRate ||
+      currencyRatesSell.find((_) => _.currency?.currency === currencyFrom)?.buyExchangeRate;
+    if (rate) {
+      setCalcState({
+        inputBuy: String(calculateResult(value, rate, currencyFrom === Currency.RUB) || ''),
+      });
+    }
+  };
+
+const handleInputBuy =
+  (setCalcState: (state: Partial<CalcState>) => void, currencyRatesBuy: ExchangeCurrencyItem[]) =>
+  (value: string, currencyTo: Currency, currencyFrom: Currency) => {
+    setCalcState({ inputBuy: formatValue(value), selectSell: currencyFrom });
+    const rate =
+      currencyRatesBuy.find((_) => _.currency?.currency === currencyFrom)?.saleExchangeRate ||
+      currencyRatesBuy.find((_) => _.currency?.currency === currencyTo)?.saleExchangeRate;
+    if (rate) {
+      setCalcState({
+        inputSell: String(calculateResult(value, rate, currencyTo === Currency.RUB) || ''),
+      });
+    }
+  };

package/src/components/ExchangeRateTile/ExchangeRateTile.example.json

@@ -0,0 +1,12 @@
+{
+  "content": {
+    "version": "primary",
+    "padding": "",
+    "button": {
+      "href": "https://coins.rshb.ru/exchange",
+      "text": "Купить валюту",
+      "target": "_blank",
+      "version": "primary"
+    }
+  }
+}

package/src/components/ExchangeRateTile/ExchangeRateTile.fixture.mobile.tsx

@@ -0,0 +1,21 @@
+import '../../setup-fixture';
+
+import { type LinkButtonProps } from '../../ui-kit/LinkButton/LinkButtonProps';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { ExchangeRateTile } from './ExchangeRateTile';
+
+const button: LinkButtonProps = {
+  href: 'https://coins.rshb.ru/exchange',
+  text: 'Купить валюту',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ExchangeRateTile button={button} className="col-span-12" />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/ExchangeRateTile/ExchangeRateTile.fixture.tsx

@@ -0,0 +1,21 @@
+import '../../setup-fixture';
+
+import { type LinkButtonProps } from '../../ui-kit/LinkButton/LinkButtonProps';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { ExchangeRateTile } from './ExchangeRateTile';
+
+const button: LinkButtonProps = {
+  href: 'https://coins.rshb.ru/exchange',
+  text: 'Купить валюту',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ExchangeRateTile button={button} className="col-span-8" />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLocation } from '../../hooks/useLocation';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { Currency } from './CurrencyProps';
+import { CurrencyTable } from './CurrencyTable';
+import { CurrentLocation } from './CurrentLocation';
+import {
+  ExchangeCurrencyCalculator,
+  type ExchangeCurrencyItem,
+} from './ExchangeCurrencyCalculator';
+import { type ExchangeRateTileContent } from './ExchangeRateTileContent';
+import { useFetchExchangeRateData } from './useFetchExchangeRateData';
+
+export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
+
+export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
+  ({ className = '', title = 'Курсы обмена валют', button, ...rest }) => {
+    const currentLocation = useLocation();
+    const exchangeRates = useFetchExchangeRateData(currentLocation);
+
+    const currencyRates = getCurrencyRates(exchangeRates?.exchangeRate?.currencies);
+
+    const currencyRatesBuy = currencyRates.filter((_) => _.buyExchangeRate);
+    currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
+
+    const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
+    currencyRatesSell.push({ currency: { currency: Currency.RUB } });
+
+    return (
+      <BlockWrapper className={style('box-border min-h-80', className)} {...rest}>
+        <BaseTile
+          className="h-full"
+          title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap" />}
+        >
+          <div className="flex w-full gap-6xl flex-wrap @lg:flex-nowrap">
+            <div className="w-full @2xl:w-auto @5xl:w-1/2">
+              {currencyRates ? (
+                <CurrencyTable className="mb-xl" exchangeCurrencyItems={currencyRates} />
+              ) : null}
+              <CurrentLocation address={exchangeRates?.address} />
+            </div>
+            <ExchangeCurrencyCalculator
+              className="grow w-1/2"
+              currencyRatesBuy={currencyRatesBuy}
+              currencyRatesSell={currencyRatesSell}
+              button={button}
+            />
+          </div>
+        </BaseTile>
+      </BlockWrapper>
+    );
+  },
+);
+
+const getCurrencyRates = (currencies?: ExchangeCurrencyItem[]) =>
+  currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id as number)) || [];