@redneckz/wildless-cms-uni-blocks 0.3.11 → 0.3.12

package/mobile/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/mobile/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/mobile/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/mobile/src/hooks/useCreditCalculatorData.ts

@@ -5,16 +5,12 @@ export function useCreditCalculatorData(
   useAsyncData: AsyncDataHook,
   directoryName: string | undefined,
 ): CreditCalculatorData {
-  const { data } = useAsyncData(creditCalculatorUrl(directoryName), () =>
-    fetchCreditCalculatorData(directoryName),
-  );
+  const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
   return data || {};
 }
 
-async function fetchCreditCalculatorData(
-  directoryName: string | undefined,
-): Promise<CreditCalculatorData> {
-  const response = await fetch(creditCalculatorUrl(directoryName));
+async function fetchCreditCalculatorData(url: string): Promise<CreditCalculatorData> {
+  const response = await fetch(url);
   return await response.json();
 }
 

package/mobile/src/hooks/useExchangeRates.ts

@@ -0,0 +1,25 @@
+import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
+import { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeRateTileContent';
+
+interface ExchangeRatesData {
+  exchangeRate?: {
+    currencies?: ExchangeCurrencyItem[];
+  };
+}
+
+export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeRatesData {
+  const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
+
+  return data || {};
+}
+
+async function fetchExchangeRates(): Promise<ExchangeRatesData | undefined> {
+  try {
+    const response = await fetch(EXCHANGE_RATES_URL);
+    return await response.json();
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+const EXCHANGE_RATES_URL = '/api/v1/exchangerates.json';

package/mobile/src/icons/GpsIcon.svg

@@ -0,0 +1,8 @@
+<svg title="Gps" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.35107 5.45074C10.3959 4.89842 11.587 4.58569 12.8511 4.58569C16.9932 4.58569 20.3511 7.94356 20.3511 12.0857C20.3511 16.2278 16.9932 19.5857 12.8511 19.5857C8.70894 19.5857 5.35107 16.2278 5.35107 12.0857C5.35107 10.8216 5.66381 9.63055 6.21612 8.58569" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8511 15.0857C14.5079 15.0857 15.8511 13.7425 15.8511 12.0857C15.8511 10.4288 14.5079 9.08569 12.8511 9.08569C11.1942 9.08569 9.85107 10.4288 9.85107 12.0857C9.85107 13.7425 11.1942 15.0857 12.8511 15.0857Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8511 4.08569V2.08569" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.85107 12.0857H2.85107" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8511 20.0857V22.0857" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.8511 12.0857H22.8511" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/mobile/src/icons/IconName.ts

@@ -2,7 +2,7 @@
 // Generated. Do not touch
 
 export enum IconMap {
-  ActualBalanceIcon = "ActualBalanceIcon", AppleIcon = "AppleIcon", AtmIcon = "AtmIcon", BankIcon = "BankIcon", BurgerIcon = "BurgerIcon", BurgerIconWhite = "BurgerIconWhite", Calendar2Icon = "Calendar2Icon", CalendarCircleIcon = "CalendarCircleIcon", CalendarIcon = "CalendarIcon", CalendarTickIcon = "CalendarTickIcon", CalendarWhiteIcon = "CalendarWhiteIcon", CardIcon = "CardIcon", CardPosIcon = "CardPosIcon", CardTickIcon = "CardTickIcon", CardWithGemIcon = "CardWithGemIcon", ChartSquareIcon = "ChartSquareIcon", ClockIcon = "ClockIcon", CloseIcon = "CloseIcon", ComfortableCompIcon = "ComfortableCompIcon", CreditCardsIcon = "CreditCardsIcon", DiscountShapeIcon = "DiscountShapeIcon", DocIcon = "DocIcon", DocIconMonoColor = "DocIconMonoColor", DocumentTextIcon = "DocumentTextIcon", DollarIcon = "DollarIcon", EarthIcon = "EarthIcon", EmptyWalletChangeIcon = "EmptyWalletChangeIcon", EmptyWalletIcon = "EmptyWalletIcon", EmptyWalletWhiteIcon = "EmptyWalletWhiteIcon", EuroIcon = "EuroIcon", GeolocationIcon = "GeolocationIcon", GlassIcon = "GlassIcon", GlobalIcon = "GlobalIcon", GridIcon = "GridIcon", GridIconWhite = "GridIconWhite", InterestGrowthIcon = "InterestGrowthIcon", InterestIcon = "InterestIcon", JCBIcon = "JCBIcon", LoupeIcon = "LoupeIcon", MasterCardIcon = "MasterCardIcon", MinusIcon = "MinusIcon", MirIcon = "MirIcon", MoneyIcon = "MoneyIcon", MoneyInsuranceIcon = "MoneyInsuranceIcon", MonitorMobileIcon = "MonitorMobileIcon", NewDocIcon = "NewDocIcon", OfficeIcon = "OfficeIcon", OkIcon = "OkIcon", PassSendIcon = "PassSendIcon", PercentageRoundIcon = "PercentageRoundIcon", PercentageSquareIcon = "PercentageSquareIcon", PercentageSquareWhiteIcon = "PercentageSquareWhiteIcon", PersonalCardIcon = "PersonalCardIcon", PlayMarketIcon = "PlayMarketIcon", PlusIcon = "PlusIcon", Profile2UserIcon = "Profile2UserIcon", ProfileIcon = "ProfileIcon", RoundRubleIcon = "RoundRubleIcon", SafeIcon = "SafeIcon", ShieldTickIcon = "ShieldTickIcon", SignDocsIcon = "SignDocsIcon", SmallClockIcon = "SmallClockIcon", TelegramIcon = "TelegramIcon", UnionPayIcon = "UnionPayIcon", UserTickIcon = "UserTickIcon", VisaIcon = "VisaIcon", VKIcon = "VKIcon", WalletAdd2Icon = "WalletAdd2Icon", WalletAddIcon = "WalletAddIcon", WalletIcon = "WalletIcon", WalletWithMoneyIcon = "WalletWithMoneyIcon"
+  ActualBalanceIcon = "ActualBalanceIcon", AppleIcon = "AppleIcon", AtmIcon = "AtmIcon", BankIcon = "BankIcon", BurgerIcon = "BurgerIcon", BurgerIconWhite = "BurgerIconWhite", Calendar2Icon = "Calendar2Icon", CalendarCircleIcon = "CalendarCircleIcon", CalendarIcon = "CalendarIcon", CalendarTickIcon = "CalendarTickIcon", CalendarWhiteIcon = "CalendarWhiteIcon", CardIcon = "CardIcon", CardPosIcon = "CardPosIcon", CardTickIcon = "CardTickIcon", CardWithGemIcon = "CardWithGemIcon", ChartSquareIcon = "ChartSquareIcon", ClockIcon = "ClockIcon", CloseIcon = "CloseIcon", ComfortableCompIcon = "ComfortableCompIcon", CreditCardsIcon = "CreditCardsIcon", DiscountShapeIcon = "DiscountShapeIcon", DocIcon = "DocIcon", DocIconMonoColor = "DocIconMonoColor", DocumentTextIcon = "DocumentTextIcon", DollarIcon = "DollarIcon", EarthIcon = "EarthIcon", EmptyWalletChangeIcon = "EmptyWalletChangeIcon", EmptyWalletIcon = "EmptyWalletIcon", EmptyWalletWhiteIcon = "EmptyWalletWhiteIcon", EuroIcon = "EuroIcon", GeolocationIcon = "GeolocationIcon", GlassIcon = "GlassIcon", GlobalIcon = "GlobalIcon", GpsIcon = "GpsIcon", GridIcon = "GridIcon", GridIconWhite = "GridIconWhite", InterestGrowthIcon = "InterestGrowthIcon", InterestIcon = "InterestIcon", JCBIcon = "JCBIcon", LoupeIcon = "LoupeIcon", MasterCardIcon = "MasterCardIcon", MinusIcon = "MinusIcon", MirIcon = "MirIcon", MoneyIcon = "MoneyIcon", MoneyInsuranceIcon = "MoneyInsuranceIcon", MonitorMobileIcon = "MonitorMobileIcon", NewDocIcon = "NewDocIcon", OfficeIcon = "OfficeIcon", OkIcon = "OkIcon", PassSendIcon = "PassSendIcon", PercentageRoundIcon = "PercentageRoundIcon", PercentageSquareIcon = "PercentageSquareIcon", PercentageSquareWhiteIcon = "PercentageSquareWhiteIcon", PersonalCardIcon = "PersonalCardIcon", PlayMarketIcon = "PlayMarketIcon", PlusIcon = "PlusIcon", Profile2UserIcon = "Profile2UserIcon", ProfileIcon = "ProfileIcon", RoundRubleIcon = "RoundRubleIcon", SafeIcon = "SafeIcon", ShieldTickIcon = "ShieldTickIcon", SignDocsIcon = "SignDocsIcon", SmallClockIcon = "SmallClockIcon", TelegramIcon = "TelegramIcon", UnionPayIcon = "UnionPayIcon", UserTickIcon = "UserTickIcon", VisaIcon = "VisaIcon", VKIcon = "VKIcon", WalletAdd2Icon = "WalletAdd2Icon", WalletAddIcon = "WalletAddIcon", WalletIcon = "WalletIcon", WalletWithMoneyIcon = "WalletWithMoneyIcon"
 }
 
 /**
@@ -10,7 +10,7 @@ export enum IconMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   "Деньги", "Лого «Apple»", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
+ *   "Деньги", "Лого «Apple»", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
  * ]
  */
-export type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";
+export type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GpsIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";

package/mobile/src/model/InputTypes.ts

@@ -0,0 +1 @@
+export type InputTypes = 'text' | 'number';

package/mobile/src/setup-fixture.ts

@@ -24,7 +24,7 @@ export const context: ContentPageContext = {
   useAsyncData: (key, fetcher) => {
     const [data, setData] = useState();
     useEffect(() => {
-      fetcher().then((_) => {
+      fetcher(key).then((_) => {
         setData(_);
       });
     }, [key, fetcher]);

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputProps } from './InputProps';
+
+export const Input = JSX<InputProps>(({ className = '', id, name, type = 'text', placeholder }) => {
+  return (
+    <input className={className} id={id} name={name || id} type={type} placeholder={placeholder} />
+  );
+});

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -0,0 +1,9 @@
+import type { InputTypes } from '../../model/InputTypes';
+
+export interface InputProps {
+  className?: string;
+  id?: string;
+  name?: string;
+  type?: InputTypes;
+  placeholder?: string;
+}

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

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface SelectProps {
+  className?: string;
+  id?: string;
+  name?: string;
+}
+
+export const Select = JSX<SelectProps>(({ className = '', id, name, children }) => {
+  return (
+    <select className={className} id={id} name={name || id}>
+      {children}
+    </select>
+  );
+});

package/mobile/src/ui-kit/Select/SelectOption.tsx

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface SelectOptionProps {
+  className?: string;
+  value?: string;
+}
+
+export const SelectOption = JSX<SelectOptionProps>(({ className = '', value, children }) => {
+  return (
+    <option className={className} value={`${value}`}>
+      {children}
+    </option>
+  );
+});

package/package.json

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

package/src/common.css

@@ -136,4 +136,16 @@
     box-shadow: none;
     border: 3px solid #42ab44;
   }
+
+  /* Hide arrows */
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Hide arrows */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
 }

package/src/components/BaseTile/BaseTile.tsx

@@ -12,7 +12,7 @@ export const BaseTile = JSX<BaseTileProps>(
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            <div>{buttons}</div>
+            {buttons?.length ? <div>{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/Blocks.ts

@@ -12,6 +12,7 @@ import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
 import { PictureText } from './PictureText/PictureText';
+import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
@@ -44,4 +45,5 @@ export const Blocks = {
   TextBlock,
   Tile,
   Navigation,
+  Placeholder,
 };

package/src/components/ContentPage/ContentPageContext.tsx

@@ -21,7 +21,7 @@ export interface Search {
 
 export type AsyncDataHook = <Data, Error = any>(
   key: string,
-  fetcher: () => Promise<Data>,
+  fetcher: (key: string) => Promise<Data>,
 ) => { data?: Data; error?: Error };
 
 export type GeolocationHook = (defaultLocation: string) => [string, () => void];

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -1,63 +1,47 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
-import { UniBlockProps } from '../../types';
-import { Button } from '../../ui-kit/Button/Button';
+import type { UniBlockProps } from '../../types';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { clamp } from '../../utils/clamp';
-import {
-  DEFAULT_MAX_MONTHS,
-  DEFAULT_MAX_SUM,
-  DEFAULT_MIN_MONTHS,
-  DEFAULT_MIN_SUM,
-  DEFAULT_MONTHS,
-  DEFAULT_SUM,
-  MONTHS_IN_YEAR,
-} from './constants';
-import { CreditCalculatorContent } from './CreditCalculatorContent';
+import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS, MONTHS_IN_YEAR } from './constants';
+import type { CreditCalculatorContent } from './CreditCalculatorContent';
 import { getCalculatorParams } from './getCalculatorParams';
 import { getCreditRate } from './getCreditRate';
 import { getCreditTermYears } from './getCreditTermYears';
+import { getDefaultMonths } from './getDefaultMonths';
+import { getDefaultSum } from './getDefaultSum';
 import { getMonthlyPayment } from './getMonthlyPayment';
+import { renderButton } from './renderButton';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderProposal } from './renderProposal';
+import { renderTermsButton } from './renderTermsButton';
+import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
 
-const STEP_MONEY = 1000;
-const STEP_MONTHS = 1;
 const DEFAULT_PAYMENT_TYPE = 'annuity';
 
 const borderStyle = 'border-solid border-[3px] border-primary-main rounded-md';
 
 export const CreditCalculator = JSX<CreditCalculatorProps>(
-  ({ context, className, directoryName }) => {
+  ({ context, className = '', directoryName }) => {
     const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
     const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
     const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
     const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
 
     const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
-
     const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
 
-    const defaultSum =
-      calculatorParams.maxSum && calculatorParams.minSum
-        ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
-        : DEFAULT_SUM;
-
-    const defaultMonths =
-      calculatorParams.maxMonths && calculatorParams.minMonths
-        ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
-        : DEFAULT_MONTHS;
+    const defaultSum = getDefaultSum(calculatorParams);
+    const defaultMonths = getDefaultMonths(calculatorParams);
 
-    const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-    const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
     const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
     const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
 
     const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
 
-    const montlyPayment = getMonthlyPayment({
+    const monthlyPayment = getMonthlyPayment({
       calculatorParams,
       paymentType: DEFAULT_PAYMENT_TYPE,
       rate,
@@ -72,32 +56,18 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
     }
 
     return (
-      <section className={`font-sans text-primary-text p-10 bg-white ${className || ''}`}>
+      <section className={`font-sans text-primary-text p-10 bg-white ${className}`}>
         <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${borderStyle}`}>
-          <div className="flex justify-between ">
+          <div className="flex justify-between">
             <div className="mr-[42px]">
-              <InputRange
-                title="Желаемая сумма кредита, ₽"
-                items={[
-                  `От ${addSpacesBetweenNumbers(minSum)} рублей`,
-                  `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
-                ]}
-                min={minSum}
-                max={maxSum}
-                step={STEP_MONEY}
-                value={moneyValue || defaultSum}
-                onChange={setMoneyValue}
-              />
-              <InputRange
-                className="mt-[23px]"
-                title="Срок кредита, месяцев"
-                items={['Или выберите из предложенных вариантов ниже']}
-                min={minMonths}
-                max={maxMonths}
-                step={STEP_MONTHS}
-                value={monthsValue || defaultMonths}
-                onChange={setMonthsValue}
-              />
+              {renderWantedSumInput({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
+              {renderMonthsInput({
+                minMonths,
+                maxMonths,
+                monthsValue,
+                defaultMonths,
+                setMonthsValue,
+              })}
               <div className="flex mb-7">
                 {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
               </div>
@@ -113,42 +83,11 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
                 onChange={setIsInsuranceChecked}
               />
             </div>
-            <div className="box-border h-fit p-9 bg-primary-main rounded-md text-white">
-              <div className="text-base mb-[18px]">Наше предложение</div>
-              <div className="text-sm opacity-60">Ежемесячный платёж</div>
-              <div className="text-lg mb-3">
-                {addSpacesBetweenNumbers(Math.round(montlyPayment))} ₽
-              </div>
-              <div className="text-sm opacity-60">Ставка</div>
-              <div className="text-lg">{rate} %</div>
-            </div>
-          </div>
-          <div className="flex items-center">
-            <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
-            <div
-              className="w-80 text-2xs leading-4 text-secondary-text"
-              aria-label="Соглашение на обработку персональных данных"
-            >
-              Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
-              требованиям ФЗ «О персональных данных»
-            </div>
+            {renderProposal(monthlyPayment, rate)}
           </div>
+          {renderTermsButton()}
         </div>
       </section>
     );
   },
 );
-
-function renderButton(number: number, i: number, handleClick: (number: number) => void) {
-  return (
-    <button
-      key={String(i)}
-      className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none"
-      onClick={() => handleClick(number)}
-    >
-      <span className="font-semibold text-sm">
-        {number} {number === 1 ? 'год' : number > 4 ? 'лет' : 'года'}
-      </span>
-    </button>
-  );
-}

package/src/components/CreditCalculator/getCalculatorParams.ts

@@ -1,4 +1,4 @@
-import { CalculatorParams } from './CreditCalculatorContent';
+import type { CalculatorParams } from './CreditCalculatorContent';
 
 interface GetCalculatorParamsParams {
   tableRows?: CalculatorParams[];

package/src/components/CreditCalculator/getCreditRate.ts

@@ -1,4 +1,4 @@
-import { CalculatorParams } from './CreditCalculatorContent';
+import type { CalculatorParams } from './CreditCalculatorContent';
 
 const DEFAULT_RATE = 5;
 

package/src/components/CreditCalculator/getDefaultMonths.ts

@@ -0,0 +1,7 @@
+import { DEFAULT_MONTHS } from './constants';
+import type { CalculatorParams } from './CreditCalculatorContent';
+
+export const getDefaultMonths = (calculatorParams: CalculatorParams) =>
+  calculatorParams.maxMonths && calculatorParams.minMonths
+    ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
+    : DEFAULT_MONTHS;

package/src/components/CreditCalculator/getDefaultSum.ts

@@ -0,0 +1,7 @@
+import { DEFAULT_SUM } from './constants';
+import type { CalculatorParams } from './CreditCalculatorContent';
+
+export const getDefaultSum = (calculatorParams: CalculatorParams) =>
+  calculatorParams.maxSum && calculatorParams.minSum
+    ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
+    : DEFAULT_SUM;

package/src/components/CreditCalculator/getMonthlyPayment.ts

@@ -1,6 +1,6 @@
 import { clamp } from '../../utils/clamp';
 import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM, MONTHS_IN_YEAR } from './constants';
-import { CalculatorParams } from './CreditCalculatorContent';
+import type { CalculatorParams } from './CreditCalculatorContent';
 
 type PaymentType = 'annuity' | 'differentiated';
 

package/src/components/CreditCalculator/renderButton.tsx

@@ -0,0 +1,13 @@
+export function renderButton(number: number, i: number, handleClick: (number: number) => void) {
+  return (
+    <button
+      key={String(i)}
+      className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none"
+      onClick={() => handleClick(number)}
+    >
+      <span className="font-semibold text-sm">
+        {number} {number === 1 ? 'год' : number > 4 ? 'лет' : 'года'}
+      </span>
+    </button>
+  );
+}