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

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>
+);

package/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/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/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/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);