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

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