@redneckz/wildless-cms-uni-blocks 0.14.1026 → 0.14.1028

package/mobile/src/components/Blocks.ts

@@ -36,6 +36,7 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ProductBlock } from './ProductBlock/ProductBlock';
+import { RatesTable } from './RatesTable/RatesTable';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RkoTariffCardsTable } from './RkoTariffCardsTable/RkoTariffCardsTable';
 import { RollupItem } from './RollupItem/RollupItem';
@@ -92,4 +93,5 @@ export const Blocks: BlocksRegistry = {
   CashbackCalculator,
   CalculatorRko,
   RkoTariffCardsTable,
+  RatesTable,
 };

package/mobile/src/components/RatesTable/RatesTable.example.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "infoMessage": "",
+    "title": "Курс покупки/продажи для операций с использованием платежных карт в сети Банка",
+    "href": ""
+  }
+}

package/mobile/src/components/RatesTable/RatesTable.tsx

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useRates } from '../../hooks/useRates';
+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 { type RatesTableContent } from './RatesTableContent';
+import { RatesTableItem } from './RatesTableItem';
+import { renderDataPickForm } from './renderDataPickForm';
+import { renderLink } from './renderLink';
+
+interface RatesTableProps extends RatesTableContent, UniBlockProps {}
+
+export const RatesTable = JSX<RatesTableProps>(
+  ({ href, className = '', infoMessage, title, isArchive = false, ...rest }) => {
+    const ratesList = useRates(isArchive);
+
+    const isRatesValid = ratesList[0].length > 0;
+
+    return (
+      <BlockWrapper className={style('p-6xl space-y-xl', className)} defaultPadding="p-0" {...rest}>
+        <Heading className="mb-xl">{title}</Heading>
+        {isArchive ? renderDataPickForm() : null}
+        {ratesList.map((list, i) => (
+          <RatesTableItem
+            list={list}
+            isRatesValid={isRatesValid}
+            isArchive={isArchive}
+            key={String(i)}
+            infoMessage={infoMessage}
+          />
+        ))}
+
+        {href ? renderLink(href) : null}
+      </BlockWrapper>
+    );
+  },
+);

package/mobile/src/components/RatesTable/RatesTable.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "href": {
+      "ui:field": "attachmentHref"
+    }
+  }
+}

package/mobile/src/components/RatesTable/RatesTableContent.ts

@@ -0,0 +1,13 @@
+import { type HrefProps } from '../../model/LinkProps';
+
+/**
+ * @title Таблица курсов
+ */
+export interface RatesTableContent extends HrefProps {
+  /** @title Информационное сообщение */
+  infoMessage?: string;
+  /** @title Заголовок */
+  title?: string;
+  /** @hidden */
+  isArchive?: boolean;
+}

package/mobile/src/components/RatesTable/RatesTableItem.tsx

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Rate, RATES_COLUMN_STYLE, type RateItem } from '../../ui-kit/Rate/Rate';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { type RatesTableContent } from './RatesTableContent';
+import { renderDate } from './renderDate';
+
+interface RatesTableItemProps extends RatesTableContent {
+  maxDate?: string;
+  isRatesValid?: boolean;
+  list: RateItem[];
+}
+
+export const RatesTableItem = JSX<RatesTableItemProps>(
+  ({ isArchive = false, isRatesValid, list = [], infoMessage }) => {
+    const maxDate = isRatesValid
+      ? list.map((item) => item.lastUpdatedAt).reduce((a, b) => (String(a) > String(b) ? a : b))
+      : '';
+
+    return (
+      <div className="space-y-xl mb-3xl">
+        {maxDate && renderDate({ dateString: maxDate, isArchive })}
+        <div className={style(RATES_COLUMN_STYLE)}>
+          <Text font="font-medium">Валюта</Text>
+          <Text font="font-medium">Покупка</Text>
+          <Text font="font-medium">Продажа</Text>
+        </div>
+        {list.length > 0 ? (
+          list.map((rate, i) => <Rate key={String(i)} {...rate} />)
+        ) : (
+          <Paragraph>Ошибка получения данных</Paragraph>
+        )}
+
+        <Paragraph color="text-secondary-text">{infoMessage}</Paragraph>
+      </div>
+    );
+  },
+);

package/mobile/src/components/RatesTable/renderDataPickForm.tsx

@@ -0,0 +1,9 @@
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+import { DatePicker } from '../../ui-kit/DatePicker/DatePicker';
+
+export const renderDataPickForm = () => (
+  <div className="flex justify-start items-end space-x-xl">
+    <DatePicker label="Выберите день" maxDate={new Date()} />
+    <SubmitButton className="h-fit">Показать</SubmitButton>
+  </div>
+);

package/mobile/src/components/RatesTable/renderDate.tsx

@@ -0,0 +1,42 @@
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+
+type RenderDateProps = {
+  dateString: string;
+  isArchive?: boolean;
+};
+
+const TIMEZONE = 'МСК';
+
+export const renderDate = ({ dateString, isArchive = false }: RenderDateProps) => {
+  const date = new Date(String(dateString));
+
+  const formatTime = date.toLocaleTimeString('ru-RU', {
+    timeZone: 'Europe/Moscow',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+  const formatDate = date.toLocaleDateString('ru-RU', {
+    timeZone: 'Europe/Moscow',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+
+  return isArchive ? (
+    <div>
+      <Paragraph color="text-secondary-text" font="font-medium">
+        {formatDate}
+      </Paragraph>
+      <Paragraph color="text-secondary-text">
+        {formatTime} ({TIMEZONE})
+      </Paragraph>
+    </div>
+  ) : (
+    <Text color="text-secondary-text">
+      Курсы действительны на {formatTime} ({TIMEZONE}), {formatDate}
+    </Text>
+  );
+};

package/mobile/src/components/RatesTable/renderLink.tsx

@@ -0,0 +1,8 @@
+import { Link } from '../../ui-kit/Link/Link';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+
+export const renderLink = (href: string) => (
+  <Paragraph>
+    Полный архив вы можете посмотреть <Link href={href}>здесь</Link>
+  </Paragraph>
+);

package/mobile/src/hooks/useRates.ts

@@ -0,0 +1,65 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { useLocalStore } from '@redneckz/uni-jsx/lib/Store/useLocalStore';
+import { API_BASE_URI } from '../api/apiBaseUrl';
+import { type RateItem } from '../ui-kit/Rate/Rate';
+import { fetchJSONUnsafe, type FetchJSONUnsafeType } from '../utils/fetchJSON';
+
+type RatesStoreItem = {
+  rate: RateItemList[];
+  nextUpdate: number;
+};
+
+type RateItemList = RateItem[];
+
+type RatesStoreSlice = {
+  rates: RatesStoreItem;
+  archiveRates: RatesStoreItem;
+};
+
+const RATES_URL = `${API_BASE_URI}/rates`;
+const ARCHIVE_RATES_URL = `${API_BASE_URI}/historyrates`;
+const EMPTY_RATES: RateItemList[] = [
+  [
+    {
+      currencyPair: 'Валютная пара',
+      buyRate: 0,
+      sellRate: 0,
+    },
+  ],
+];
+
+export function useRates(isArchive: boolean): RateItemList[] {
+  const url = isArchive ? ARCHIVE_RATES_URL : RATES_URL;
+  const rateKey = isArchive ? 'archiveRates' : 'rates';
+
+  const ratesStore = useLocalStore<RatesStoreSlice>();
+
+  // проверяем, надо ли обновлять значения ставок
+  const shouldUpdate = getShouldUpdate(isArchive, ratesStore as RatesStoreSlice);
+
+  // костыль, не отправлять запрос на бэк, если уже был запрос менее 15 мин назад
+  const { data } = useAsyncData(
+    shouldUpdate ? url : '',
+    fetchJSONUnsafe as FetchJSONUnsafeType<RateItemList[]>,
+  );
+
+  // если есть data и значение надо обновить, то обновляем локалсторадж
+  if (shouldUpdate && data) {
+    const nextUpdate = getTimeAfter15Minutes();
+    ratesStore[rateKey] = { rate: data, nextUpdate };
+  }
+
+  // берем данные из локалсторадж
+  const rates = ratesStore[rateKey]?.rate;
+
+  // возвращаем данные из локалсторадж или заглушку
+  return Array.isArray(rates) ? rates : EMPTY_RATES;
+}
+
+// Отсчитываем 15 минут с текущего момента
+const getTimeAfter15Minutes = () => Date.now() + 15 * 60 * 1000;
+
+const getShouldUpdate = (isArchive: boolean, ratesStore: RatesStoreSlice | null) =>
+  isArchive
+    ? !ratesStore?.archiveRates || ratesStore?.archiveRates.nextUpdate <= Date.now()
+    : !ratesStore?.rates || ratesStore?.rates.nextUpdate <= Date.now();

package/mobile/src/model/LinkProps.ts

@@ -16,6 +16,8 @@ export type Target = '' | '_self' | '_blank' | '_parent' | '_top';
 export type HrefProps = {
   /** @title URL (href) */
   href?: string;
+  /** @title Дополнительные ссылки для A/B-тестирования */
+  additionalHrefs?: string[];
 };
 
 export type LinkCommonProps = HrefProps & {

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

@@ -1,19 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLocalStore } from '@redneckz/uni-jsx/lib/Store/useLocalStore';
 import { useLink } from '../../hooks/useLink';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { ButtonInner } from './ButtonInner';
 import { getDisabledButtonClasses } from './getDisabledButtonClasses';
 import { getRegularButtonClasses } from './getRegularButtonClasses';
+import { type LinkStoreSlice } from './LinkButtonContent';
 import { type LinkButtonProps } from './LinkButtonProps';
 import { useFormSubmit } from './useFormSubmit';
 
+type SaveLinksProps = {
+  linksStore: LinkStoreSlice;
+  id?: string;
+  href?: string;
+  additionalHrefs?: string[];
+};
+
 /** @deprecated */
 export const LinkButton = JSX<LinkButtonProps>(
-  ({ disabled, children, method = 'LINK', href, ...rest }) => {
+  ({ disabled, children, method = 'LINK', href, id, additionalHrefs, ...rest }) => {
     const handleFormSubmit = useFormSubmit({ method, href });
+    const linksStore = useLocalStore<LinkStoreSlice>();
+
+    saveLinksToStore({ linksStore, href, id, additionalHrefs });
+
+    const adjustedHref = additionalHrefs
+      ? (linksStore.links || []).find((store) => store.id === id)?.lastLink
+      : href;
 
     const link = useLink();
-    const adjustedProps = link({ onClick: handleFormSubmit, href, ...rest });
+    const adjustedProps = link({ onClick: handleFormSubmit, href: adjustedHref, ...rest });
     const buttonInner = children ?? <ButtonInner {...adjustedProps} />;
 
     return disabled ? (
@@ -69,3 +85,39 @@ const DisabledButton = JSX<LinkButtonProps>(
     </button>
   ),
 );
+
+const getRandomHref = (href = '', additionalHrefs: string[] = []) => {
+  const hrefs = [href, ...additionalHrefs];
+
+  return hrefs[Math.floor(Math.random() * hrefs.length)];
+};
+
+// Отсчитываем 7 длей с текущей даты
+const getTimeAfter7days = () => Date.now() + 7 * 24 * 60 * 60 * 1000;
+
+// Сохраняем или заменяем рандомную ссылку в localStorage
+const saveLinksToStore = ({ linksStore, id, href, additionalHrefs }: SaveLinksProps) => {
+  const buttonLinkStore = (linksStore.links || []).find((store) => store.id === id);
+
+  // Если хранилища вообще нет
+  if (!linksStore.links) {
+    linksStore.links = [];
+  }
+
+  if ((!buttonLinkStore || buttonLinkStore.nextDueAt <= Date.now()) && additionalHrefs) {
+    // Получаем рандомную ссылку
+    const randomHref = getRandomHref(href, additionalHrefs);
+
+    // При наличии ссылки для этой кнопки в хранилище удаляем этот элемент из массива ссылок
+    const updatedLinks = linksStore.links?.filter((item) => item.id !== id);
+
+    // Добавляем новый элемент
+    updatedLinks.push({
+      id: id ?? '',
+      lastLink: randomHref,
+      nextDueAt: getTimeAfter7days(),
+    });
+    // Добавляем это все в хранилище
+    linksStore.links = updatedLinks;
+  }
+};

package/mobile/src/ui-kit/LinkButton/LinkButtonContent.ts

@@ -22,4 +22,16 @@ export interface LinkButtonContent extends ButtonCommonContent {
   iconRight?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
+  /** @title Уникальный идентификатор кнопки */
+  id?: string;
 }
+
+type LinkStoreItem = {
+  id: string;
+  lastLink: string;
+  nextDueAt: number;
+};
+
+export type LinkStoreSlice = {
+  links: LinkStoreItem[] | null;
+};

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

@@ -0,0 +1,27 @@
+import { DIVIDER_STYLE } from '../../components/TariffsTable/TariffsTableRowContainer';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+
+export type RateItem = {
+  currencyPair?: string;
+  buyRate?: number;
+  sellRate?: number;
+  lastUpdatedAt?: string;
+};
+
+interface RateProps extends RateItem, UniBlockProps {}
+
+export const RATES_COLUMN_STYLE = `grid grid-cols-3 gap-s`;
+
+export const Rate = UniBlock<RateProps>(({ currencyPair = '', buyRate = 0, sellRate = 0 }) => (
+  <div className={style('mb-s', RATES_COLUMN_STYLE, DIVIDER_STYLE)}>
+    <div>{formatCurrencyPair(currencyPair)}</div>
+    <div>{formatRate(buyRate)}</div>
+    <div>{formatRate(sellRate)}</div>
+  </div>
+));
+
+const formatCurrencyPair = (currency: string) => currency.replace('_TOD', '');
+
+const formatRate = (rate: number) => rate.toFixed(4);

package/package.json

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

package/src/components/Blocks.mobile.ts

@@ -36,6 +36,7 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ProductBlock } from './ProductBlock/ProductBlock';
+import { RatesTable } from './RatesTable/RatesTable';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RkoTariffCardsTable } from './RkoTariffCardsTable/RkoTariffCardsTable';
 import { RollupItem } from './RollupItem/RollupItem';
@@ -92,4 +93,5 @@ export const Blocks: BlocksRegistry = {
   CashbackCalculator,
   CalculatorRko,
   RkoTariffCardsTable,
+  RatesTable,
 };

package/src/components/Blocks.ts

@@ -37,6 +37,7 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ProductBlock } from './ProductBlock/ProductBlock';
+import { RatesTable } from './RatesTable/RatesTable';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RkoTariffCardsTable } from './RkoTariffCardsTable/RkoTariffCardsTable';
 import { RollupItem } from './RollupItem/RollupItem';
@@ -96,4 +97,5 @@ export const Blocks: BlocksRegistry = {
   CashbackCalculator,
   CalculatorRko,
   RkoTariffCardsTable,
+  RatesTable,
 };

package/src/components/ButtonsBlock/ButtonsBlock.fixture.tsx

@@ -18,10 +18,31 @@ const buttons: LinkButtonContent[] = [
   },
 ];
 
+const buttonsForABTesting: LinkButtonContent[] = [
+  {
+    href: '/premium-cards',
+    additionalHrefs: ['/debit-cards', '/deposits'],
+    text: 'Оформить',
+    target: '_blank',
+    version: 'primary',
+    id: 'oformite',
+  },
+  {
+    href: '/details',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <ButtonsBlock className="col-span-12" buttons={buttons} />
     </div>
   ),
+  abTesting: (
+    <div className="container grid grid-cols-12">
+      <ButtonsBlock className="col-span-12" buttons={buttonsForABTesting} />
+    </div>
+  ),
 };

package/src/components/RatesTable/RatesTable.example.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "infoMessage": "",
+    "title": "Курс покупки/продажи для операций с использованием платежных карт в сети Банка",
+    "href": ""
+  }
+}

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

@@ -0,0 +1,26 @@
+import '../../setup-fixture';
+import { RatesTable } from './RatesTable';
+
+const ratesTableContent = {
+  infoMessage: 'Информация может содержать неточности, актуальный курс уточняйте в отделении Банка',
+  title: 'Курс покупки/продажи для операций с использованием платежных карт в сети Банка',
+  href: 'rshb.ru',
+};
+
+const archiveRatesTableContent = {
+  title: 'Архив курсов покупки/продажи для операций с использованием платежных карт в сети Банка',
+  isArchive: true,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RatesTable className="col-span-12" {...ratesTableContent} />
+    </div>
+  ),
+  archive: (
+    <div className="container grid grid-cols-12">
+      <RatesTable className="col-span-12" {...archiveRatesTableContent} />
+    </div>
+  ),
+};

package/src/components/RatesTable/RatesTable.fixture.tsx

@@ -0,0 +1,26 @@
+import '../../setup-fixture';
+import { RatesTable } from './RatesTable';
+
+const ratesTableContent = {
+  infoMessage: 'Информация может содержать неточности, актуальный курс уточняйте в отделении Банка',
+  title: 'Курс покупки/продажи для операций с использованием платежных карт в сети Банка',
+  href: 'rshb.ru',
+};
+
+const archiveRatesTableContent = {
+  title: 'Архив курсов покупки/продажи для операций с использованием платежных карт в сети Банка',
+  isArchive: true,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RatesTable className="col-span-12" {...ratesTableContent} />
+    </div>
+  ),
+  archive: (
+    <div className="container grid grid-cols-12">
+      <RatesTable className="col-span-12" {...archiveRatesTableContent} />
+    </div>
+  ),
+};

package/src/components/RatesTable/RatesTable.tsx

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useRates } from '../../hooks/useRates';
+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 { type RatesTableContent } from './RatesTableContent';
+import { RatesTableItem } from './RatesTableItem';
+import { renderDataPickForm } from './renderDataPickForm';
+import { renderLink } from './renderLink';
+
+interface RatesTableProps extends RatesTableContent, UniBlockProps {}
+
+export const RatesTable = JSX<RatesTableProps>(
+  ({ href, className = '', infoMessage, title, isArchive = false, ...rest }) => {
+    const ratesList = useRates(isArchive);
+
+    const isRatesValid = ratesList[0].length > 0;
+
+    return (
+      <BlockWrapper className={style('p-6xl space-y-xl', className)} defaultPadding="p-0" {...rest}>
+        <Heading className="mb-xl">{title}</Heading>
+        {isArchive ? renderDataPickForm() : null}
+        {ratesList.map((list, i) => (
+          <RatesTableItem
+            list={list}
+            isRatesValid={isRatesValid}
+            isArchive={isArchive}
+            key={String(i)}
+            infoMessage={infoMessage}
+          />
+        ))}
+
+        {href ? renderLink(href) : null}
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/RatesTable/RatesTable.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "href": {
+      "ui:field": "attachmentHref"
+    }
+  }
+}

package/src/components/RatesTable/RatesTableContent.ts

@@ -0,0 +1,13 @@
+import { type HrefProps } from '../../model/LinkProps';
+
+/**
+ * @title Таблица курсов
+ */
+export interface RatesTableContent extends HrefProps {
+  /** @title Информационное сообщение */
+  infoMessage?: string;
+  /** @title Заголовок */
+  title?: string;
+  /** @hidden */
+  isArchive?: boolean;
+}

package/src/components/RatesTable/RatesTableItem.tsx

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Rate, RATES_COLUMN_STYLE, type RateItem } from '../../ui-kit/Rate/Rate';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { type RatesTableContent } from './RatesTableContent';
+import { renderDate } from './renderDate';
+
+interface RatesTableItemProps extends RatesTableContent {
+  maxDate?: string;
+  isRatesValid?: boolean;
+  list: RateItem[];
+}
+
+export const RatesTableItem = JSX<RatesTableItemProps>(
+  ({ isArchive = false, isRatesValid, list = [], infoMessage }) => {
+    const maxDate = isRatesValid
+      ? list.map((item) => item.lastUpdatedAt).reduce((a, b) => (String(a) > String(b) ? a : b))
+      : '';
+
+    return (
+      <div className="space-y-xl mb-3xl">
+        {maxDate && renderDate({ dateString: maxDate, isArchive })}
+        <div className={style(RATES_COLUMN_STYLE)}>
+          <Text font="font-medium">Валюта</Text>
+          <Text font="font-medium">Покупка</Text>
+          <Text font="font-medium">Продажа</Text>
+        </div>
+        {list.length > 0 ? (
+          list.map((rate, i) => <Rate key={String(i)} {...rate} />)
+        ) : (
+          <Paragraph>Ошибка получения данных</Paragraph>
+        )}
+
+        <Paragraph color="text-secondary-text">{infoMessage}</Paragraph>
+      </div>
+    );
+  },
+);

package/src/components/RatesTable/renderDataPickForm.tsx

@@ -0,0 +1,9 @@
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+import { DatePicker } from '../../ui-kit/DatePicker/DatePicker';
+
+export const renderDataPickForm = () => (
+  <div className="flex justify-start items-end space-x-xl">
+    <DatePicker label="Выберите день" maxDate={new Date()} />
+    <SubmitButton className="h-fit">Показать</SubmitButton>
+  </div>
+);