@redneckz/wildless-cms-uni-blocks 0.4.3 → 0.4.4

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

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useTariffsInnerTableData } from '../../hooks/useTariffsInnerTableData';
+import type { UniBlockProps } from '../../types';
+import { InnerTableBody } from './InnerTableBody';
+import { TableInnerButton } from './InnerTableButton';
+import { InnerTableHeader } from './InnerTableHeader';
+import type { TableFetchData, TariffsTableInnerContent } from './InnerTableProps';
+
+export interface InnerTableProps extends TariffsTableInnerContent, UniBlockProps {}
+
+export const InnerTable = JSX<InnerTableProps>(({ context, dataUrl, pdfUrl }) => {
+  const { tableData }: TableFetchData = useTariffsInnerTableData(dataUrl);
+
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+  const items = tableData?.[activeTabIndex]?.items ?? [];
+
+  const currencies = tableData?.map((item) => item.currency ?? '');
+
+  return tableData ? (
+    <div className="bg-white z-10 pr-[50px]">
+      <InnerTableHeader
+        currencies={currencies}
+        activeTabIndex={activeTabIndex}
+        setActiveTabIndex={setActiveTabIndex}
+        linkToPDF={pdfUrl} //TODO: need link to service
+      />
+      <InnerTableBody context={context} activeTabIndex={activeTabIndex} items={items} />
+      <TableInnerButton context={context} isOpen />
+    </div>
+  ) : null;
+});

package/mobile/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -0,0 +1,53 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type UniBlockProps } from '../../types';
+import { Img } from '../Img/Img';
+import { InnerTableBodyItem } from './InnerTableBodyItem';
+import type { DataItem } from './InnerTableProps';
+
+export interface InnerTableBodyProps extends UniBlockProps {
+  activeTabIndex: number;
+  items: DataItem[];
+}
+
+export const InnerTableBody = JSX<InnerTableBodyProps>(({ context, activeTabIndex, items }) => {
+  const [hiddenTables, setHiddenTables] = useState<Record<string, boolean>>({});
+
+  const toggleTable = (key: string) => {
+    setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] }));
+  };
+
+  return (
+    <div>
+      {items.map((_, tableIdx) => {
+        const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
+
+        return (
+          <div key={key} className="w-full">
+            <div
+              className="flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative"
+              onClick={() => toggleTable(key)}
+            >
+              {_.title}
+              <Img
+                image={hiddenTables[key] ? 'PlusIcon' : 'MinusIcon'}
+                className="absolute right-[22px]"
+                width="24"
+                height="24"
+              />
+            </div>
+            <div
+              className={`w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${
+                hiddenTables[key] ? 'h-0' : 'h-[243px]'
+              }`}
+            >
+              <div className="relative">
+                <InnerTableBodyItem context={context} rows={_.rowsData} />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});

package/mobile/src/ui-kit/InnerTable/InnerTableBodyItem.tsx

@@ -0,0 +1,86 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { UniBlockProps } from '../../types';
+import { renderArrows } from '../Button/renderArrows';
+import type { RowsData } from './InnerTableProps';
+
+const COLUMN_WIDTH = 140;
+
+export interface InnerTableBodyItemProps extends UniBlockProps {
+  rows?: RowsData[][];
+}
+
+export const InnerTableBodyItem = JSX<InnerTableBodyItemProps>(({ rows }) => {
+  const [activeColumnIndex, setActiveColumnIndex] = useState(0);
+
+  const handleNextClick = () => setActiveColumnIndex(activeColumnIndex + 1);
+  const handlePrevClick = () => setActiveColumnIndex(activeColumnIndex - 1);
+
+  const rowsLength = rows?.[0]?.length ?? 0;
+  const showNextButton = rowsLength > 3 && rowsLength > activeColumnIndex + 4;
+
+  const showPrevButton = activeColumnIndex > 0;
+
+  return (
+    <div>
+      {rows?.map(renderRow(activeColumnIndex))}
+      {renderArrows({
+        handler: [handlePrevClick, handleNextClick],
+        isShown: [showPrevButton, showNextButton],
+        btnClass: ['right-3 top-24', 'right-3 top-2'],
+        className: '',
+      })}
+    </div>
+  );
+});
+
+const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: number) => {
+  if (!rowData?.length) {
+    return null;
+  }
+
+  const [headerColumn, ...columns] = rowData;
+
+  const transform = [...Array(activeColumnIndex).keys()].reduce(
+    (res, i) => (columns?.[i]?.cols?.length ?? 1) * COLUMN_WIDTH + res,
+    0,
+  );
+
+  return (
+    <div
+      key={String(rowIdx)}
+      className="flex border-main-divider border border-t-0 border-x-0 border-solid"
+    >
+      <div className="text-xl-light min-w-[214px] w-[214px] pt-6 pb-5">{headerColumn.data}</div>
+      <div className="flex flex-grow overflow-hidden">
+        <div
+          className="flex duration-1000 text-center"
+          style={{
+            transform: `translateX(-${transform}px)`,
+          }}
+        >
+          {columns?.map((_, i) => (
+            <div
+              key={`row${i}`}
+              className="flex flex-col flex-grow justify-center pt-6 pb-5 odd:bg-main-divider"
+            >
+              {_?.data ? <div className="text-xl-light mb-3">{_.data}</div> : null}
+              {_?.cols ? renderCols(_.cols, activeColumnIndex) : null}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const renderCols = (cols: string[], rowIndex: number) =>
+  cols ? (
+    <div className={`flex text-xl-light ${rowIndex === 0 ? 'text-secondary-text' : ''}`}>
+      {cols.map((data, i) => (
+        <div key={String(i)} className="w-[76px] mx-8">
+          {data}
+        </div>
+      ))}
+    </div>
+  ) : null;

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { EventBus } from '../../EventBus/EventBus';
+import { UniBlockProps } from '../../types';
+import { Button } from '../Button/Button';
+import { Icon } from '../Icon/Icon';
+import type { TariffsTableInnerEvent } from './InnerTableProps';
+
+export interface TableInnerButtonProps extends TariffsTableInnerEvent, UniBlockProps {
+  isOpen?: boolean;
+}
+
+export const TableInnerButton = JSX<TableInnerButtonProps>(
+  ({ isOpen, dataUrl, rowIdx, cellIdx, fieldIdx }) => {
+    const handleClick = () => {
+      EventBus.inst.fire('tariffInnerTable', { dataUrl, rowIdx, cellIdx, fieldIdx });
+    };
+
+    return (
+      <Button
+        version="primary"
+        onClick={handleClick}
+        className="w-full flex items-center justify-center rounded-none py-5 "
+      >
+        <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать ставки по вкладу'}</div>
+        <Icon
+          name={isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+          className="ml-3"
+          iconVersion="white"
+          width="20"
+          height="20"
+          asSVG
+        />
+      </Button>
+    );
+  },
+);

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -0,0 +1,42 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../Button/Button';
+import { Img } from '../Img/Img';
+
+export interface InnerTableHeaderProps {
+  currencies?: string[];
+  linkToPDF?: string;
+  activeTabIndex: number;
+  setActiveTabIndex: (idx: number) => void;
+}
+
+export const InnerTableHeader = JSX<InnerTableHeaderProps>(
+  ({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (
+    <div className="flex justify-between w-full pt-2.5 pb-3">
+      {currencies && currencies.length > 1 ? (
+        <div className="flex bg-secondary-light p-1 rounded-md">
+          {currencies.map((currency, idx) => (
+            <div
+              key={currency}
+              className={`rounded-md text-xl-light px-4 py-3 cursor-pointer ${
+                idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'
+              }`}
+              onClick={() => setActiveTabIndex(idx)}
+            >
+              {currency || idx + 1}
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {linkToPDF ? (
+        <Button
+          href={linkToPDF}
+          version="secondary"
+          className="flex justify-center items-center text-l-light text-primary-main px-8"
+        >
+          <Img image="DocDownload" className="mr-[10px]" width="24" height="24" asSVG />
+          <span>Скачать в PDF</span>
+        </Button>
+      ) : null}
+    </div>
+  ),
+);

package/mobile/src/ui-kit/InnerTable/InnerTableProps.ts

@@ -0,0 +1,31 @@
+import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
+
+export type RowsData = {
+  data?: string;
+  cols?: string[];
+};
+
+export type DataItem = {
+  title?: string;
+  rowsData?: RowsData[][];
+};
+
+export type TableData = {
+  currency?: string;
+  items?: DataItem[];
+};
+
+export type TableFetchData = {
+  tableData?: TableData[];
+};
+
+export interface TariffsTableInnerContent {
+  /** @title Справочник */
+  dataUrl?: string;
+  /** @title Ссылка PDF-файл */
+  pdfUrl?: string;
+}
+
+export interface TariffsTableInnerEvent
+  extends Partial<TariffsTableCellIndexProps>,
+    TariffsTableInnerContent {}

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListItem } from './ListItem';
-import type { ListItemVersion, ListProps } from './ListProps';
+import type { ListItemSize, ListItemVersion, ListProps } from './ListProps';
 
 const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'text-primary-text',
@@ -10,11 +10,26 @@ const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
   'tile-white': 'text-white',
 };
 
+const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
+  M: 'text-xl-light',
+  L: 'text-h5-light',
+};
+
 export const List = JSX<ListProps>((props) => {
-  const { className = '', itemClassName, isDotted, items, version = 'primary' } = props;
+  const {
+    className = '',
+    itemClassName,
+    isDotted,
+    items,
+    listItemSize = 'M',
+    version = 'primary',
+  } = props;
 
   return (
-    <section className={`${TEXT_STYLE_MAP[version]} ${className}`} role="list">
+    <section
+      className={`${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className}`}
+      role="list"
+    >
       {items?.length
         ? items.map((_, i) => (
             <ListItem

package/mobile/src/ui-kit/List/ListProps.ts

@@ -1,5 +1,11 @@
 import type { ListContent } from './ListContent';
 
+/**
+ * @title Размер пунктов списка
+ * @enumNames ["Средний", "Большой"]
+ */
+export type ListItemSize = 'M' | 'L';
+
 /**
  * @title Версия списка
  * @enumNames ["Основной", "Второстепенный", "Серый"]
@@ -10,9 +16,12 @@ export type ListItemVersion = 'primary' | 'secondary' | 'gray' | 'tile' | 'tile-
  * @title Содержимое списка
  */
 export interface ListProps extends ListContent {
+  /** @hidden */
   className?: string;
+  /** @hidden */
+  itemClassName?: string;
   /** @title Буллиты */
   isDotted?: boolean;
+  listItemSize?: ListItemSize;
   version?: ListItemVersion;
-  itemClassName?: string;
 }

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BgColorVersion } from '../../model/BgColorVersion';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import { Img } from '../Img/Img';
 
 export interface LogoProps {

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -47,7 +47,7 @@ const getDotStyles = (
   indexFraction: number,
 ): Record<string, string> | undefined => {
   if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
-    return;
+    return undefined;
   }
 
   const leftIndexMod = 1 - indexFraction;

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BgColorVersion } from '../../model/BgColorVersion';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 
 export interface TopItemContent extends LinkProps {
@@ -54,8 +54,8 @@ const getLinkClasses = (bgColor: BgColorVersion, active = false, flat = false) =
 };
 
 const getTextClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
-  if (bgColor !== 'bg-white') {
-    return `text-white ${TEXT_CLASSES}`;
+  if (bgColor === 'transparent') {
+    return `text-white hover:text-primary-hover ${TEXT_CLASSES}`;
   }
   const nonActiveAtoms = `${
     flat ? 'text-primary-text' : 'text-secondary-text'

package/mobile/src/utils/assertUnreachable.ts

@@ -0,0 +1,3 @@
+export function assertUnreachable(x: never): never {
+  throw new Error(x);
+}

package/mobile/src/utils/fetchJSON.ts

@@ -0,0 +1,24 @@
+export async function fetchJSON<R = unknown>(
+  url: string,
+  options?: RequestInit,
+): Promise<R | null> {
+  try {
+    return await fetchJSONUnsafe(url, options);
+  } catch (err) {
+    console.error(err);
+  }
+
+  return null;
+}
+
+export async function fetchJSONUnsafe<R = unknown>(url: string, options?: RequestInit): Promise<R> {
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      ...options?.headers,
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return await response.json();
+}

package/mobile/src/utils/roundTo.ts

@@ -1,5 +1,5 @@
-export const roundTo = (value: number, precision = 2) => {
-  const factor = Math.pow(10, precision);
+export const roundTo = (value: number | string, precision = 2) => {
+  const factor = 10 ** precision;
 
   return Math.round(parseFloat(String(value)) * factor) / factor;
 };

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
   "description": "Инструмент для просмотра UI Kit",
   "type": "module",
+  "bin": {
+    "wcms-migrate": "./bin/migrate.js"
+  },
   "main": "./dist/index.js",
   "types": "./lib/index.d.ts",
   "engines": {
@@ -164,7 +167,7 @@
   },
   "size-limit": [
     {
-      "limit": "7 kB",
+      "limit": "8 kB",
       "path": "lib/common.css"
     },
     {

package/src/EventBus/EventMap.ts

@@ -1,5 +1,6 @@
 import type { TabActivationEvent } from '../components/Tabs/Tabs';
-
+import type { TariffsTableInnerEvent } from '../ui-kit/InnerTable/InnerTableProps';
 export interface EventMap {
   tab: TabActivationEvent;
+  tariffInnerTable: TariffsTableInnerEvent;
 }

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -25,11 +25,13 @@ export const AccordionItem = JSX<AccordionItemProps>(
             }`}
           >
             {labelIcon ? (
-              <Img image={labelIcon} width="24" height="24" asSVG className="mr-3" />
+              <Img image={labelIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
             ) : null}
             {label}
           </span>
-          {hasContent ? <Img className="w-6" image={icon} width="24" height="24" asSVG /> : null}
+          {hasContent ? (
+            <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+          ) : null}
         </button>
         {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
       </li>

package/src/components/Accordion/AccordionItem.tsx

@@ -23,7 +23,13 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, block
       >
         <span className={`text-xl font-medium pr-2.5`}>{label}</span>
         {hasContent ? (
-          <Img image={icon} className="text-primary-main" width="24" height="24" asSVG />
+          <Img
+            image={icon}
+            className="text-primary-main flex-shrink-0"
+            width="24"
+            height="24"
+            asSVG
+          />
         ) : null}
       </button>
       {hasContent ? (

package/src/components/BaseTile/BaseTile.tsx

@@ -10,9 +10,9 @@ export const BaseTile = JSX<BaseTileProps>(
       <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
         {title}
         <div className="flex grow w-full justify-between">
-          <div className="flex flex-col w-full">
+          <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            {buttons ? <div className="mt-9">{buttons}</div> : null}
+            {buttons ? <div className="mt-auto">{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { TitleProp } from '../../model/HeadlineType';
+import type { TitleProps } from '../../model/HeadlineType';
 import type { EmptyOption } from '../../model/EmptyOptionType';
 
 /**
@@ -48,7 +48,7 @@ export interface BenefitItemProps {
 /**
  * @title Блок преимущества
  */
-export type BenefitsBlockContent = TitleProp & {
+export type BenefitsBlockContent = TitleProps & {
   /**
    * @title Список преимуществ
    * @maxItems 6

package/src/components/BlockContent.ts

@@ -6,14 +6,12 @@ import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTil
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
 import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
-import type { GroupBlockContent } from './GroupBlock/GroupBlockContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlock/InsuranceAmountBlockContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
 import type { NavigationContent } from './Navigation/NavigationContent';
-import type { NavigatorTabsContent } from './NavigatorTabs/NavigatorTabsContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
@@ -22,6 +20,7 @@ import type { ProductTileContent } from './ProductTile/ProductTileContent';
 import type { PromoTileContent } from './PromoTile/PromoTileContent';
 import type { SafeDepositRentalContent } from './SafeDepositRental/SafeDepositRentalContent';
 import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
+import { TabsContent } from './Tabs/TabsContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
@@ -41,7 +40,6 @@ export type BlockContent =
   | InsuranceAmountBlockContent
   | LinkDocsContent
   | MobileAppTileContent
-  | NavigatorTabsContent
   | PictureTextContent
   | PlaceholderContent
   | ProductBlockContent
@@ -54,6 +52,6 @@ export type BlockContent =
   | TileContent
   | NavigationContent
   | LinkListContent
-  | GroupBlockContent
   | BonusBenefitsBlockContent
-  | SafeDepositRentalContent;
+  | SafeDepositRentalContent
+  | TabsContent;

package/src/components/Blocks.ts

@@ -9,7 +9,6 @@ import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { GracePeriod } from './GracePeriod/GracePeriod';
-import { GroupBlock } from './GroupBlock/GroupBlock';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
@@ -17,7 +16,6 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
-import { NavigatorTabs } from './NavigatorTabs/NavigatorTabs';
 import { OtherProducts } from './OtherProducts/OtherProducts';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
@@ -50,7 +48,6 @@ export const Blocks = {
   LinkDocs,
   MiniGallery,
   MobileAppTile,
-  NavigatorTabs,
   PictureText,
   ProductBlock,
   ProductGallery,
@@ -64,7 +61,6 @@ export const Blocks = {
   Tile,
   Navigation,
   Placeholder,
-  GroupBlock,
   BonusBenefitsBlock,
   SafeDepositRental,
   Tabs,

package/src/components/Calculator/Calculator.tsx

@@ -109,7 +109,7 @@ function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex
     <div>
       <div
         style={{ transform: `translateX(-${tabsShift * 388}px)` }}
-        className="flex flex-col justify-end items-center h-[126px] pt-[38px] box-border duration-1000"
+        className="flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000"
       >
         <div className="w-full flex flex-nowrap items-end gap-2">
           {tabsNav.map((tab, i) =>

package/src/components/Calculator/useCalculatorParams.ts

@@ -1,16 +1,8 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
 
 export function useCalculatorParams<Data>(dir: string) {
-  const { data } = useAsyncData<Data>(
-    `/wcms-resources/${dir}.json`,
-    fetchCalculatorSourceBookParams,
-  );
+  const { data } = useAsyncData<Data>(`/wcms-resources/${dir}.json`, fetchJSONUnsafe);
 
   return data;
 }
-
-async function fetchCalculatorSourceBookParams<Data>(url: string): Promise<Data> {
-  const response = await fetch(url);
-
-  return await response.json();
-}

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -54,12 +54,10 @@ export const useCreditCalculatorParams = (
   const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
   const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
 
-  const extendedCalculatorParams = {
+  return {
     ...creditCalculatorSourceBookParams,
     ...userInputParams,
     finalRate,
     monthlyPayment,
   };
-
-  return extendedCalculatorParams;
 };

package/src/components/Catalog/Catalog.fixture.tsx

@@ -1,6 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
-import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Catalog, CatalogProps } from './Catalog';
 import type { CatalogProductColor } from './CatalogContent';
 
@@ -16,11 +16,14 @@ const payRing: Picture = {
 
 const colors: CatalogProductColor[] = ['black', 'white'];
 
-const buttonPrimary: ButtonCommonProps = {
+const buttonPrimary: ButtonWithIconProps = {
   href: '/credit-cards',
   text: 'Подробнее',
   target: '_blank',
   version: 'primary',
+  icon: {
+    icon: 'AppleIcon',
+  },
 };
 
 const catalogCard = {