@redneckz/wildless-cms-uni-blocks 0.3.10 → 0.3.13

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
+import { formatCurrency } from './formatCurrency';
+
+const TABLE_HEAD_STYLE = 'text-left font-normal text-sm text-secondary-text';
+
+const CURRENCY_ICONS_MAP = {
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
+};
+
+interface CurrencyTableProps {
+  className?: string;
+  exchangeCurrencyItems: ExchangeCurrencyItem[];
+}
+
+export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurrencyItems }) => {
+  return (
+    <table className={`h-fit w-fit ${className}`}>
+      <thead>
+        <tr>
+          <th className={TABLE_HEAD_STYLE}>Валюта</th>
+          <th className={`${TABLE_HEAD_STYLE} pl-11`}>Купить</th>
+          <th className={`${TABLE_HEAD_STYLE} pl-11`}>Продать</th>
+        </tr>
+      </thead>
+      <tbody>{exchangeCurrencyItems.map((item) => renderCurrencyRow(item))}</tbody>
+    </table>
+  );
+});
+
+const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
+  const code = exchangeCurrencyItem?.currency?.currency;
+  return (
+    <tr key={code}>
+      <td className="pt-4">
+        <div className="flex items-center">
+          {code ? <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" /> : null}
+          <span className="ml-2">{code}</span>
+        </div>
+      </td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.buyExchangeRate)}</td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.saleExchangeRate)}</td>
+    </tr>
+  );
+};

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+interface CurrentLocationProps {
+  className?: string;
+  address?: string;
+  distance?: string;
+}
+
+export const CurrentLocation = JSX<CurrentLocationProps>(
+  ({ className = '', address, distance }) => (
+    <div className={`flex text-sm ${className}`}>
+      <Icon className="min-w-fit" name="GpsIcon" width="24" height="24" asSVG />
+      <div className="ml-1.5">
+        {address ? <p className="m-0">{address}</p> : null}
+        {distance ? (
+          <p className="text-secondary-text m-0">Курс указан для ближайшего офиса - {distance}</p>
+        ) : null}
+      </div>
+    </div>
+  ),
+);

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../../ui-kit/Button/Button';
+import { Input } from '../../ui-kit/Input/Input';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
+
+export interface ExchangeCurrencyCalculatorProps {
+  exchangeCurrencyItems: ExchangeCurrencyItem[];
+  codes: string[];
+  className?: string;
+}
+
+export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
+  ({ codes, className = '' }) => {
+    return (
+      <div className={`grid gap-3.5 ${className}`}>
+        {renderInput('Хочу продать', codes)}
+        {renderInput('Получу', codes)}
+        <Button className="box-border mt-3.5 py-3 h-12 w-44" version="primary" href="#">
+          Купить валюту
+        </Button>
+      </div>
+    );
+  },
+);
+
+function renderInput(placeholder: string, codes: string[]) {
+  return (
+    <div className="flex items-center">
+      <Input
+        className="h-10 border pl-2.5 rounded-md text-m-sm w-full appearance-none"
+        type="number"
+        placeholder={`${placeholder}`}
+      />
+      {codes.length ? (
+        <Select className="h-9 -translate-x-16">
+          {codes.map((code, i) => (
+            <SelectOption key={String(i)} value={code}>
+              {code}
+            </SelectOption>
+          ))}
+        </Select>
+      ) : null}
+    </div>
+  );
+}

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

@@ -5,7 +5,7 @@ import { ExchangeRateTile } from './ExchangeRateTile';
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <ExchangeRateTile context={context} className="col-span-4" />
+      <ExchangeRateTile context={context} className="col-span-12" />
     </div>
   ),
 };

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,104 +1,73 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useExchangeRates } from '../../hooks/useExchangeRates';
 import type { UniBlockProps } from '../../types';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
-import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
+import { CurrencyTable } from './CurrencyTable';
+import { CurrentLocation } from './CurrentLocation';
+import { ExchangeCurrencyCalculator } from './ExchangeCurrencyCalculator';
 import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
 
-export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
-
-const CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
-
 const CURRENCY_CODES = ['USD', 'EUR'];
-const CURRENCY_ICONS_MAP = {
-  USD: 'DollarIcon',
-  EUR: 'EuroIcon',
-};
-
-const buttons: ButtonProps[] = [
+const EXCHANGE_CODES = ['RUB', 'USD', 'EUR'];
+const DEFAULT_CURRENCY_ITEMS = [
   {
-    text: 'Все показатели',
-    href: 'https://cbr.ru/currency_base/daily/',
-    version: 'secondary',
+    buyExchangeRate: 90.6,
+    saleExchangeRate: 92.8,
+    currency: { id: 2, code: '978', currency: 'EUR', name: 'Евро' },
+  },
+  {
+    buyExchangeRate: 73.75,
+    saleExchangeRate: 75.95,
+    currency: { id: 1, code: '840', currency: 'USD', name: 'Американский доллар' },
   },
 ];
 
+const DEFAULT_LOCATION = {
+  address: 'Москва, ул.Ленина д.28',
+  distance: '6км',
+};
+
+export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
+
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   ({ className = '', context, title = 'Курсы обмена валют' }) => {
-    const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
+    const data = useExchangeRates(context.useAsyncData);
+    const exchangeCurrencyItems =
+      data?.exchangeRate?.currencies?.filter((item) => {
+        return CURRENCY_CODES.indexOf(item?.currency?.currency || '') !== -1;
+      }) || DEFAULT_CURRENCY_ITEMS;
+
     return (
-      <section
-        className={`bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(
-          className,
-        )} ${getTileMinHeight(className)} `}
-      >
+      <section className={`bg-white text-primary-text font-sans p-9 box-border ${className}`}>
         <BaseTile
           context={context}
           title={
-            title && (
-              <Heading
-                headingType={getTileHeadingType(className)}
-                title={title}
-                className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}`}
-              />
-            )
-          }
-          buttons={
-            buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
-            ) : null
+            <Heading
+              headingType={getTileHeadingType(className)}
+              title={title}
+              className="whitespace-pre-wrap mb-3"
+            />
           }
         >
-          <table>
-            <thead>
-              <tr>
-                <CurrencyTH>Валюта</CurrencyTH>
-                <CurrencyTH className="pl-11">Курс</CurrencyTH>
-              </tr>
-            </thead>
-            <tbody>{CURRENCY_CODES.map(renderCurrencyRow(data))}</tbody>
-          </table>
+          <div className="flex">
+            <div className="mr-20 pt-3">
+              {exchangeCurrencyItems ? (
+                <CurrencyTable className="mb-7" exchangeCurrencyItems={exchangeCurrencyItems} />
+              ) : null}
+              <CurrentLocation {...DEFAULT_LOCATION} />
+            </div>
+            {exchangeCurrencyItems?.length ? (
+              <ExchangeCurrencyCalculator
+                className="grow"
+                exchangeCurrencyItems={exchangeCurrencyItems}
+                codes={EXCHANGE_CODES}
+              />
+            ) : null}
+          </div>
         </BaseTile>
       </section>
     );
   },
 );
-
-const CurrencyTH = JSX<{ className?: string }>(({ className = '', children }) => (
-  <th className={`text-left font-normal text-sm text-secondary-text ${className}`}>{children}</th>
-));
-
-const CurrencyTD = JSX<{ className?: string }>(({ className = '', children }) => (
-  <td className={`text-left font-normal text-base text-primary-text ${className}`}>{children}</td>
-));
-
-async function fetchExchangeRate(): Promise<{
-  Valute?: Record<string, { CharCode: string; Name?: string; Value: number; Previous?: number }>;
-}> {
-  const response = await fetch(CBR_EXCHANGE_RATE_URL);
-  return await response.json();
-}
-
-const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
-
-const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');
-
-const renderCurrencyRow = (data) => (code: string) => {
-  const value = (data?.Valute || {})[code]?.Value;
-  return (
-    <tr key={code}>
-      <CurrencyTD className="pt-4">
-        <div className="flex items-center">
-          <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
-          <span className="ml-2">{code}</span>
-        </div>
-      </CurrencyTD>
-      <CurrencyTD className="pt-4 pl-11">{formatCurrency(value)}</CurrencyTD>
-    </tr>
-  );
-};

package/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -4,3 +4,14 @@ import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
  * @title Курсы валют
  */
 export type ExchangeRateTileContent = HeadingContent;
+
+export interface ExchangeCurrencyItem {
+  buyExchangeRate?: number;
+  saleExchangeRate?: number;
+  currency?: {
+    id?: number;
+    code?: string;
+    currency?: string;
+    name?: string;
+  };
+}

package/src/components/ExchangeRateTile/formatCurrency.ts

@@ -0,0 +1,3 @@
+const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
+
+export const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');

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

@@ -1,285 +1,92 @@
 import { context } from '../../setup-fixture';
-import { Footer } from './Footer.mobile';
+import { Footer } from './Footer';
 
 const DEFAULT_ORIGIN = 'https://rshb.ru/';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <Footer
-      className="col-span-12"
-      topItems={[
-        {
-          href: DEFAULT_ORIGIN,
-          text: 'Частным клиентам',
-          target: '_blank',
-          items: [
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредитные карты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Дебетовые карты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредиты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Ипотека',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Вклады и сбережения',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Инвестиции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Страхование',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Премиальным клиентам',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Биометрическая регистрация',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Перевод денег',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Обмен денег',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Акции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Тарифы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Архивная информация',
-            },
-          ],
-        },
-        {
-          href: DEFAULT_ORIGIN,
-          text: 'Бизнес клиентам',
-          target: '_blank',
-          items: [
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'РКО',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредиты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Депозиты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Эквайринг',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Банковские карты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'ВЭД',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Инвестиции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Обмен валюты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Страхование',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Партнёрские программы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Онлайн-сервисы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Акции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Тарифы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Архивная информация',
-            },
-          ],
-        },
-        {
-          href: DEFAULT_ORIGIN,
-          text: 'О банке',
-          target: '_blank',
-          items: [
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'О банке',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Новости',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Офисы и отделения',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Карьера в банке',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Пресс-центр',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредитным организациям',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Закупки',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Непрофильные/Профильные нецелевые активы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Инсайдерам',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Противодействие коррупции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Меры безопасности',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Залоговое имущество',
-            },
-          ],
-        },
-      ]}
-      subMenu={[
-        {
-          text: 'Офисы',
-          href: '#',
-          icon: 'BankIcon',
-        },
-        {
-          text: 'Банкоматы',
-          href: '#',
-          icon: 'AtmIcon',
-        },
-      ]}
-      socialMedia={[
-        { href: 'https://t.me' },
-        { href: 'https://vk.com' },
-        { href: 'https://ok.ru' },
-      ]}
-      contacts={[
-        {
-          text: '+7 (495) 787-7-787',
-          description: 'Для звонков из-за границы',
-          type: 'tel',
-        },
-        {
-          text: 'example@example.com',
-          description: 'Для писем',
-          type: 'email',
-        },
-        {
-          text: '7787',
-          description: 'Абонентам МТС, Мегафон, Билайн и Tele2',
-          type: 'tel',
-        },
-      ]}
-      horizontalNavigationTitle="Компании Россельхозбанка"
-      relatedEnterprises={[
-        {
-          text: 'РСХБ Страхование',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-        {
-          text: 'РСХБ Страхование жизни',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-        {
-          text: 'РСХБ Управление активами',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-        {
-          text: 'РСХБ Лизинг',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-        {
-          text: 'РСХБ Факторинг',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-      ]}
-      documents={[
-        {
-          text: 'Информация о процентных ставках по договорам банковского вклада с физическими лицами',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-        {
-          text: 'Раскрытие информации профессиональным участником рынка ценных бумаг',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-        {
-          text: 'Раскрытие информации',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-        {
-          text: 'Удостоверяющий центр',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-        {
-          text: 'Финансовая культура',
-          href: DEFAULT_ORIGIN,
-          target: '_blank',
-        },
-      ]}
-      context={context}
-    />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Footer
+        className="col-span-12"
+        socialMedia={[
+          { href: 'https://t.me' },
+          { href: 'https://vk.com' },
+          { href: 'https://ok.ru' },
+        ]}
+        contacts={[
+          {
+            text: '+7 (495) 787-7-787',
+            description: 'Для звонков из-за границы',
+            type: 'tel',
+          },
+          {
+            text: 'example@example.com',
+            description: 'Для писем',
+            type: 'email',
+          },
+          {
+            text: '7787',
+            description: 'Абонентам МТС, Мегафон, Билайн и Tele2',
+            type: 'tel',
+          },
+        ]}
+        horizontalNavigationTitle="Компании Россельхозбанка"
+        relatedEnterprises={[
+          {
+            text: 'РСХБ Страхование',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+          {
+            text: 'РСХБ Страхование жизни',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+          {
+            text: 'РСХБ Управление активами',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+          {
+            text: 'РСХБ Лизинг',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+          {
+            text: 'РСХБ Факторинг',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+        ]}
+        documents={[
+          {
+            text: 'Информация о процентных ставках по договорам банковского вклада с физическими лицами',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+          {
+            text: 'Раскрытие информации профессиональным участником рынка ценных бумаг',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+          {
+            text: 'Раскрытие информации',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+          {
+            text: 'Удостоверяющий центр',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+          {
+            text: 'Финансовая культура',
+            href: DEFAULT_ORIGIN,
+            target: '_blank',
+          },
+        ]}
+        context={context}
+      />
+    </div>
+  ),
+};