@redneckz/wildless-cms-uni-blocks 0.3.84 → 0.3.85

package/mobile/src/components/Calculator/useBonusCalculatorParams.ts

@@ -0,0 +1,55 @@
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { BONUS_CALC_DEFAULT_DIR, DEFAULT_BONUS_CALCULATOR_PARAMS } from './constants';
+import { getBonus } from './getBonus';
+import { useCalculatorParams } from './useCalculatorParams';
+
+export interface BonusCalculatorUserInputParams {
+  travelExpenseValue: number;
+  restExpenseValue: number;
+}
+
+export interface BonusCalculatorSourceBookParams {
+  minSumTravel: number;
+  maxSumTravel: number;
+  minSumOther: number;
+  maxSumOther: number;
+  maxBonus: number;
+  prefMonthsNum: number;
+  prefTravelBonusRate: number;
+  prefRestBonusRate: number;
+  travelBonusRate: number;
+  restBonusRate: number;
+}
+
+export interface BonusCalculatorParams
+  extends BonusCalculatorUserInputParams,
+    BonusCalculatorSourceBookParams {
+  monthBonus: number;
+  yearBonus: number;
+}
+
+export const getBonusCalculatorParams = (
+  context: ContentPageContext,
+  userInputParams: BonusCalculatorUserInputParams,
+  sourceBookDir,
+) => {
+  const { travelExpenseValue, restExpenseValue } = userInputParams;
+  const bonusCalculatorSourceBookParams =
+    useCalculatorParams<BonusCalculatorSourceBookParams>(
+      context.useAsyncData,
+      sourceBookDir || BONUS_CALC_DEFAULT_DIR,
+    ) || DEFAULT_BONUS_CALCULATOR_PARAMS;
+
+  const [monthBonus, yearBonus] = getBonus(
+    bonusCalculatorSourceBookParams,
+    travelExpenseValue,
+    restExpenseValue,
+  );
+
+  return {
+    ...bonusCalculatorSourceBookParams,
+    ...userInputParams,
+    monthBonus,
+    yearBonus,
+  };
+};

package/mobile/src/components/Calculator/useCalculatorParams.ts

@@ -0,0 +1,16 @@
+import type { AsyncDataHook } from '../ContentPage/ContentPageContext';
+
+export function useCalculatorParams<Data>(useAsyncData: AsyncDataHook, dir: string) {
+  const { data } = useAsyncData<Data>(
+    `/wcms-resources/${dir}.json`,
+    fetchCalculatorSourceBookParams,
+  );
+
+  return data;
+}
+
+async function fetchCalculatorSourceBookParams<Data>(url: string): Promise<Data> {
+  const response = await fetch(url);
+
+  return await response.json();
+}

package/mobile/src/components/Calculator/useCreditCalculatorParams.ts

@@ -0,0 +1,70 @@
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
+import { getMonthlyPayment } from './getMonthlyPayment';
+import { useCalculatorParams } from './useCalculatorParams';
+
+export interface CommonCreditParams {
+  isInsurance: boolean;
+  isSalaryClient: boolean;
+  isStateEmployee: boolean;
+}
+export interface CreditCalculatorSourceBookParams extends CommonCreditParams {
+  minSum: number;
+  maxSum: number;
+  minMonths: number;
+  maxMonths: number;
+  rateBottomRange: number;
+  rateTopRange: number;
+  sumBorder: number;
+}
+
+export interface CreditCalculatorUserInputParams extends CommonCreditParams {
+  isAnnuity: boolean;
+  moneyValue: number;
+  monthsValue: number;
+}
+
+export interface CreditCalculatorParams
+  extends CreditCalculatorSourceBookParams,
+    CreditCalculatorUserInputParams {
+  monthlyPayment: number;
+  finalRate: number;
+}
+
+export type CreditCalculatorData = {
+  rows: CreditCalculatorSourceBookParams[];
+};
+
+export const getCreditCalculatorParams = (
+  context: ContentPageContext,
+  userInputParams: CreditCalculatorUserInputParams,
+  sourceBookDir?: string,
+): CreditCalculatorParams => {
+  const { isInsurance, isSalaryClient, isStateEmployee, moneyValue } = userInputParams;
+
+  const data = useCalculatorParams<CreditCalculatorData>(
+    context.useAsyncData,
+    sourceBookDir || CREDIT_CALC_DEFAULT_DIR,
+  );
+  const creditCalculatorSourceBookParams =
+    data?.rows.find((_) => {
+      return (
+        isInsurance === _.isInsurance &&
+        isSalaryClient === _.isSalaryClient &&
+        isStateEmployee === _.isStateEmployee
+      );
+    }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
+
+  const { rateBottomRange, rateTopRange, sumBorder } = creditCalculatorSourceBookParams;
+  const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
+  const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
+
+  const extendedCalculatorParams = {
+    ...creditCalculatorSourceBookParams,
+    ...userInputParams,
+    finalRate,
+    monthlyPayment,
+  };
+
+  return extendedCalculatorParams;
+};

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -3,7 +3,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
-const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
+const TABLE_HEAD_STYLE = 'text-left text-m text-secondary-text';
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -34,19 +34,15 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const code = exchangeCurrencyItem?.code;
 
   return (
-    <tr key={code} className="pb-1">
+    <tr key={code} className="pb-1 text-h6">
       <td className="pt-4">
         <div className="flex items-center">
           {code ? <Img image={{ icon: CURRENCY_ICONS_MAP[code] }} width="24" height="24" /> : null}
-          <span className="text-m-title-md ml-2">{code}</span>
+          <span className="ml-2">{code}</span>
         </div>
       </td>
-      <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.buy)}
-      </td>
-      <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.sell)}
-      </td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.sell)}</td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.buy)}</td>
     </tr>
   );
 };

package/mobile/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -9,12 +9,14 @@ interface CurrentLocationProps {
 
 export const CurrentLocation = JSX<CurrentLocationProps>(
   ({ className = '', address, distance }) => (
-    <div className={`flex text-sm ${className}`}>
+    <div className={`flex ${className}`}>
       <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
-      <div className="ml-3 font-light">
-        {address ? <p className="m-0 mb-[3px]">{address}</p> : null}
+      <div className="ml-3">
+        {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
         {distance ? (
-          <p className="text-secondary-text m-0">Курс указан для ближайшего офиса - {distance}</p>
+          <p className="text-secondary-text m-0 text-m">
+            Курс указан для ближайшего офиса - {distance}
+          </p>
         ) : null}
       </div>
     </div>

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -5,6 +5,7 @@ import { callbackCurrencySelect } from './callbackCurrencySelect';
 import { Currency } from './CurrencyProps';
 import { renderButton } from './renderButton';
 import { renderInput } from './renderInput';
+import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 export interface ExchangeCurrencyItem {
   code?: Currency;
@@ -15,6 +16,7 @@ export interface ExchangeCurrencyCalculatorProps extends UniBlockProps {
   className?: string;
   currencyRatesBuy: ExchangeCurrencyItem[];
   currencyRatesSell: ExchangeCurrencyItem[];
+  button?: ButtonProps;
 }
 export interface CalcState {
   inputSell: string;
@@ -24,7 +26,7 @@ export interface CalcState {
 }
 
 export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
-  ({ context, className = '', currencyRatesBuy, currencyRatesSell }) => {
+  ({ context, className = '', currencyRatesBuy, currencyRatesSell, button }) => {
     const [calcState, setCalcState] = context.useState<CalcState>({
       inputSell: '',
       inputBuy: '',
@@ -37,7 +39,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
     };
 
     return (
-      <div className={`grid gap-3.5 ${className}`}>
+      <div className={`grid gap-[18px] pt-2 ${className}`}>
         {renderInput({
           placeholder: 'Хочу продать',
           rates: currencyRatesBuy,
@@ -64,7 +66,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
               calcState.selectSell,
             ),
         })}
-        {renderButton()}
+        {button?.text ? renderButton(button) : null}
       </div>
     );
   },

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

@@ -0,0 +1,8 @@
+{
+  "button": {
+    "href": "https://coins.rshb.ru/exchange",
+    "text": "Купить валюту",
+    "target": "_blank",
+    "version": "primary"
+  }
+}

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useExchangeRates } from '../../hooks/useExchangeRates';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { Currency } from './CurrencyProps';
 import { CurrencyTable } from './CurrencyTable';
 import { CurrentLocation } from './CurrentLocation';
@@ -19,7 +18,7 @@ const DEFAULT_LOCATION = {
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
-  ({ className = '', context, title = 'Курсы обмена валют', ...rest }) => {
+  ({ className = '', context, title = 'Курсы обмена валют', button, ...rest }) => {
     const currencyRates = useExchangeRates(context.useAsyncData);
 
     const currencyRatesBuy = currencyRates.filter((_) => _.buy);
@@ -36,18 +35,12 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
       >
         <BaseTile
           context={context}
-          title={
-            <Heading
-              headingType={getTileHeadingType(className)}
-              title={title}
-              className="whitespace-pre-wrap"
-            />
-          }
+          title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap text-h4" />}
         >
           <div className="flex">
-            <div className="mr-[43px] pt-4">
+            <div className="mr-14 pt-4">
               {currencyRates ? (
-                <CurrencyTable className="mb-[31px]" exchangeCurrencyItems={currencyRates} />
+                <CurrencyTable className="mb-[30px]" exchangeCurrencyItems={currencyRates} />
               ) : null}
               <CurrentLocation {...DEFAULT_LOCATION} />
             </div>
@@ -57,6 +50,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
                 context={context}
                 currencyRatesBuy={currencyRatesBuy}
                 currencyRatesSell={currencyRatesSell}
+                button={button}
               />
             ) : null}
           </div>

package/mobile/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -1,7 +1,10 @@
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
 /**
  * @title Курсы обмена валют
  */
 export interface ExchangeRateTileContent {
   /** @title Заголовок */
   title?: string;
+  button?: ButtonProps;
 }

package/mobile/src/components/ExchangeRateTile/renderButton.tsx

@@ -1,14 +1,9 @@
 import { Button } from '../../ui-kit/Button/Button';
 
-export function renderButton() {
+export function renderButton(button) {
   return (
-    <Button
-      className="box-border mt-3.5 py-3 h-12 w-full"
-      version="primary"
-      href="https://coins.rshb.ru/exchange"
-      target="_blank"
-    >
-      Купить валюту
+    <Button className="py-4 mr-1" version={button?.version} href={button?.href} target="_blank">
+      {button?.text}
     </Button>
   );
 }

package/mobile/src/components/ExchangeRateTile/renderInput.tsx

@@ -19,7 +19,7 @@ export function renderInput(props: InputProps) {
   return (
     <div className="relative flex items-center">
       <Input
-        className="h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12"
+        className="h-13 border pl-4 pt-4 pb-4 rounded-md text-l w-full appearance-none -mr-12"
         placeholder={placeholder}
         type="text"
         value={value}
@@ -27,7 +27,7 @@ export function renderInput(props: InputProps) {
       />
       {rates.length ? (
         <Select
-          className="h-9 -translate-x-4"
+          className="h-9 -translate-x-4 bg-transparent"
           value={selected}
           onChange={(_) => setSelected(_ as Currency)}
         >

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import type { FooterLink } from './FooterLink';
+import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
 export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
   title?: string;
@@ -22,6 +22,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
               <HorizontalNavigationLink
                 key={String(i)}
                 index={i}
+                className="font-normal text-sm"
                 {...useLink({ router, handlerDecorator }, _)}
               />
             ))}
@@ -31,22 +32,3 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
     );
   },
 );
-
-interface HorizontalNavigationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
-  ({ className = '', index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

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

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+
+interface HorizontalNavigationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

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

@@ -54,6 +54,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
 
   const isPrimary = version === 'primary';
+  const imageClassName = isPrimary ? 'group-hover:text-white' : '';
 
   return (
     <a
@@ -66,13 +67,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       rel="noopener noreferrer"
     >
       {icon ? (
-        <Img
-          image={icon}
-          imageClassName={isPrimary ? 'group-hover:text-white' : ''}
-          width="24"
-          height="24"
-          asSVG
-        />
+        <Img image={icon} imageClassName={imageClassName} width="24" height="24" asSVG />
       ) : null}
     </a>
   );

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { FooterLink } from './FooterLink';
+import { TextInformationLink } from './TextInformationLink';
 
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
@@ -20,6 +20,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
             <TextInformationLink
               key={String(i)}
               index={i}
+              className="font-normal"
               {...useLink({ router, handlerDecorator }, _)}
             />
           ))}
@@ -28,24 +29,3 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
     </div>
   );
 });
-
-interface TextInformationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
-  ({ className, index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
-        className || ''
-      }`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

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

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+
+interface TextInformationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
+        className
+      }`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

package/mobile/src/components/Gallery/Gallery.tsx

@@ -17,17 +17,15 @@ const blockStyle: Record<BlockVersion, string> = {
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
+    const headingClassName = description ? 'mb-2' : 'mb-5';
+
     return (
       <section
         className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
       >
         <div className="flex flex-col items-center mb-5">
           {title ? (
-            <Heading
-              headingType="h3"
-              className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
-              title={title}
-            />
+            <Heading headingType="h3" className={`text-center ${headingClassName}`} title={title} />
           ) : null}
           {description ? (
             <div className="font-normal text-m-md max-w-[600px] text-center mb-5">

package/mobile/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -12,11 +12,11 @@ export interface GroupBlockTabsProps {
 }
 
 export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
-  const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
+  const { tabs, currentTag, onTabClick, className = '', isShowCounter = false } = props;
 
   return (
     <div className={`mb-2 box-border flex gap-x-1 ${className}`} role="tablist">
-      {tabs?.map(renderTab(onTabClick, isShowCounter, currentTag))}
+      {tabs?.map(renderTab(onTabClick, currentTag, isShowCounter))}
     </div>
   );
 });
@@ -24,12 +24,12 @@ export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
 const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
 
 const renderTab =
-  (onTabClick: TabClickHandler, isShowCounter?: boolean, currentTag?: string) =>
+  (onTabClick: TabClickHandler, currentTag?: string, isShowCounter = false) =>
   (tab: TabsItemProps, i: number) => {
     const isActive = currentTag === tab.tag;
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
     const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
-    const counterBlockStyle = `${badgeStyle} 
+    const counterBlockStyle = `${badgeStyle}
       ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
 
     return (

package/mobile/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { JSXBlock } from '../../components/ContentPage/ContentPage';
-import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { UniBlockProps } from '../../types';
 import { style2className } from '../../utils/style2className';
 import type { GroupBlockDef } from './BlocksTypeProps';

package/mobile/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -13,12 +13,15 @@ type EmbeddableBlocksProps = {
 export const renderBlock =
   ({ context, className }: EmbeddableBlocksProps) =>
   (block: GroupBlockDef, i: number) => {
-    const type = block?.blockType;
-    if (!type || !(type in EmbeddableGroupBlocks)) {
+    if (!block) {
       return null;
     }
 
-    const { style, ...rest } = block;
+    const { style, blockType: type, ...rest } = block;
+
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+      return null;
+    }
 
     const classNameBlock = style2className(style);
     const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];

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

@@ -1,9 +1,5 @@
 {
   "title": "Заголовок",
-  "button": {
-    "href": "https://rshb.ru",
-    "text": "Текст кнопки"
-  },
   "insuranceTabs": [
     {
       "title": "Описание 1",
@@ -11,12 +7,28 @@
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         }
       ]
     },
@@ -26,17 +38,41 @@
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         }
       ]
     }