@redneckz/wildless-cms-uni-blocks 0.3.74 → 0.3.76

package/src/components/Blocks.ts

@@ -1,12 +1,15 @@
 import { Accordion } from './Accordion/Accordion';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
-import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { Calculator } from './Calculator/Calculator';
+import { Catalog } from './Catalog/Catalog';
+import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 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 { Insurance } from './Insurance/Insurance';
@@ -28,8 +31,6 @@ import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
-import { GroupBlock } from './GroupBlock/GroupBlock';
-import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 
 export const Blocks = {
   Accordion,
@@ -37,6 +38,7 @@ export const Blocks = {
   Bonus,
   ComparisonTable,
   Calculator,
+  Catalog,
   ExchangeRateTile,
   Footer,
   Gallery,

package/src/components/Calculator/getMonthlyPayment.ts

@@ -27,6 +27,7 @@ export const getMonthlyPayment = (params: GetMonthlyPaymentParams) => {
 
   if (paymentType === 'annuity') {
     const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
+
     return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
   } else {
     return finalSum / months + finalSum * (Number(rate) / 12);

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -10,6 +10,7 @@ export const renderCalculatorBlock =
       return null;
     }
     const EmbeddedBlock: JSXBlock<EmbeddableCalcProps> = EmbeddableCalcBlocks[type];
+
     return (
       <section
         key={String(i)}

package/src/components/Calculator/renderMonthsInput.tsx

@@ -16,6 +16,7 @@ export function renderMonthsInput(props: RenderMonthsInputProps) {
   const { title, minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
   const monthText = (month) => {
     const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
+
     return `${month} ${text}`;
   };
 

package/src/components/Calculator/renderRate.tsx

@@ -7,13 +7,12 @@ type rateType = {
 
 export function renderRate({ rate, title, sup, className = '' }: rateType) {
   const rateFormat = String(rate).replace('.', ',');
+
   return (
     <div>
       <div className="text-sm font-light ml-3">{title}</div>
       <div className="flex justify-start">
-        <span
-          className={`calc-rate-text font-mohave text-[200px] leading-[250px] pr-4 mt-[-16px] ${className}`}
-        >
+        <span className={`calc-rate-text font-mohave text-title-huge pr-4 mt-[-16px] ${className}`}>
           {rateFormat}
         </span>
         {sup ? <span className="calc-rate-text text-[65px] leading-[75px]">{sup}</span> : ''}

package/src/components/Catalog/Catalog.example.json

@@ -0,0 +1,57 @@
+{
+  "title": "Каталог",
+  "description": "Описание",
+  "cards": [
+    {
+      "title": "Заголовок карточки 1",
+      "description": "Описание карточки",
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 230,
+          "height": 230
+        }
+      },
+      "button": {
+        "href": "",
+        "text": "Подробнее",
+        "target": "_blank",
+        "version": "primary"
+      }
+    },
+    {
+      "title": "Заголовок карточки 2",
+      "description": "Описание карточки",
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 230,
+          "height": 230
+        }
+      },
+      "button": {
+        "href": "",
+        "text": "Подробнее",
+        "target": "_blank",
+        "version": "primary"
+      }
+    },
+    {
+      "title": "Заголовок карточки 3",
+      "description": "Описание карточки",
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 230,
+          "height": 230
+        }
+      },
+      "button": {
+        "href": "",
+        "text": "Подробнее",
+        "target": "_blank",
+        "version": "primary"
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,48 @@
+import type { Picture } from '../../model/Picture';
+import { context } from '../../react/setup-fixture';
+import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
+import { Catalog, CatalogProps } from './Catalog';
+import type { CatalogProductColor } from './CatalogContent';
+
+const payRing: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 230,
+    height: 230,
+  },
+  title: 'pay-ring',
+};
+
+const colors: CatalogProductColor[] = ['black', 'white'];
+
+const buttonPrimary: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+};
+
+const catalogCard = {
+  title: 'SATURN S-VI',
+  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
+  image: payRing,
+  price: 5600,
+  colors: colors,
+  button: buttonPrimary,
+};
+
+export const defaultProps: CatalogProps = {
+  context,
+  title: 'Каталог',
+  description: 'Описание',
+  cards: new Array(5).fill(catalogCard).flat(),
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Catalog {...defaultProps} className="col-span-12" />
+    </div>
+  ),
+};

package/src/components/Catalog/Catalog.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { CatalogCard } from './CatalogCard';
+import type { CatalogCardType, CatalogContent } from './CatalogContent';
+
+export interface CatalogProps extends CatalogContent, UniBlockProps {}
+
+const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+const CARD_FULL_VIEW_COUNT = 3;
+const CARD_SHIFT = 430;
+
+export const Catalog = JSX<CatalogProps>(
+  ({ context, cards = [], className = '', title, description, anchor = null }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    return (
+      <section
+        className={`bg-white relative font-sans p-9 overflow-hidden text-center ${className}`}
+        id={anchor}
+      >
+        {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
+        {description ? <Description className="mb-6" description={description} /> : null}
+        <div
+          className="flex duration-1000 gap-3.5"
+          style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+          role="list"
+        >
+          {cards?.length ? cards.map(renderCatalogCard(context)) : null}
+        </div>
+        {renderNavButtons({
+          cardsCount: cards.length,
+          activeCardIndex,
+          setActiveCardIndex,
+        })}
+        <div className={`${BLUR_BLOCK_CLASSES} left-0 ${'bg-opacity-from-white'}`} />
+        <div className={`${BLUR_BLOCK_CLASSES} right-0 ${'bg-opacity-to-white'}`} />
+      </section>
+    );
+  },
+);
+
+const renderCatalogCard = (context: ContentPageContext) => (card: CatalogCardType, i: number) => {
+  return <CatalogCard key={String(i)} context={context} {...card} />;
+};
+
+interface RenderNavButtonsProps {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (number) => void;
+}
+
+const renderNavButtons = ({
+  cardsCount,
+  activeCardIndex,
+  setActiveCardIndex,
+}: RenderNavButtonsProps) => {
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+  const showPrevButton = isUseSlider && activeCardIndex > 0;
+
+  return renderArrows({
+    handler: [handlePrevClick, handleNextClick],
+    isShown: [showPrevButton, showNextButton],
+    btnClass: ['left-8', 'right-8'],
+    className: 'top-1/2 z-10 mt-6',
+  });
+};

package/src/components/Catalog/CatalogCard.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { CatalogCardType, CatalogProductColor } from './CatalogContent';
+
+export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
+  version?: BlockVersion;
+}
+
+const cardStyleMap: Record<CatalogProductColor, string> = {
+  black: 'bg-black',
+  white: 'bg-white',
+};
+
+export const CatalogCard = JSX<CatalogCardProps>(
+  ({ className = '', title, description, image, price, button, colors }) => {
+    return (
+      <section
+        className={`border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
+        role="listitem"
+      >
+        {image?.src ? <Img className="mb-5" image={image} /> : null}
+        {title ? (
+          <Heading headingType="h6" as="h5" className="text-left mb-1.5" title={title} />
+        ) : null}
+        {description ? <div className="text-m-md text-left mb-4">{description}</div> : null}
+        {colors?.length ? (
+          <div className="flex mb-4 text-m-md text-secondary-text">
+            Доступные цвета: {colors.map(renderColorOption)}
+          </div>
+        ) : null}
+        {price ? <div className="text-title-sm text-left">{price}&nbsp;₽</div> : null}
+        {button?.text ? <Button className="mt-6 w-full" {...button} /> : null}
+      </section>
+    );
+  },
+);
+
+const renderColorOption = (color: CatalogProductColor, i: number) => (
+  <span
+    key={String(i)}
+    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
+  />
+);

package/src/components/Catalog/CatalogContent.ts

@@ -0,0 +1,27 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+
+/**
+ * @enumNames ["Черный", "Белый"]
+ */
+export type CatalogProductColor = 'black' | 'white';
+
+export interface CatalogCardType extends HeadingContent, DescriptionContent, ImageContent {
+  /** @title Цена в рублях */
+  price?: number;
+  /** @title Доступные цвета */
+  colors?: CatalogProductColor[];
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+}
+
+/**
+ * @title Каталог
+ */
+export type CatalogContent = HeadingContent &
+  DescriptionContent & {
+    /** @title Список карточек */
+    cards?: CatalogCardType[];
+  };

package/src/components/ComparisonTable/TableColumn.tsx

@@ -21,6 +21,7 @@ export const TableColumn = JSX<TableColumnProps>(
     const columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
     const gradientClassName = isFillGradient ? GRADIENT : '';
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
+
     return (
       <div
         className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}

package/src/components/ContentPage/ContentPage.tsx

@@ -108,12 +108,14 @@ function renderBlock(
     console.warn(`No block with "${type}" is registered`);
   }
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
+
   return blockDecorator(
     {
       blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
       block,
       render: (props) => {
         const { version, content, anchor } = props.block;
+
         return (
           <BlockComponent
             key={`${type}-${i}`}

package/src/components/ContentPage/ContentPageHead.tsx

@@ -9,6 +9,7 @@ export interface ContentPageHeadProps {
 export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
   const { title, main, og, twitter, jsonLd } = data;
   const { description, keywords, canonical, robots } = main || {};
+
   return (
     <HeadComponent>
       <title>{title}</title>

package/src/components/ContentPage/normalizeBlock.mobile.ts

@@ -2,5 +2,6 @@ import { BlockDef } from '../../types';
 
 export function normalizeBlock(block: BlockDef) {
   const { mobile, ...rest } = block;
+
   return mobile ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } } : block;
 }

package/src/components/ContentPage/normalizeBlock.ts

@@ -3,5 +3,6 @@ import { BlockDef } from '../../types';
 export function normalizeBlock(block: BlockDef) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { mobile, ...rest } = block;
+
   return rest;
 }

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -32,6 +32,7 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const code = exchangeCurrencyItem?.code;
+
   return (
     <tr key={code} className="pb-1">
       <td className="pt-4">

package/src/components/ExchangeRateTile/calculateResult.ts

@@ -2,6 +2,7 @@ import { roundTo } from '../../utils/roundTo';
 
 export const calculateResult = (value: string, rate: number, precision: boolean) => {
   const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+
   return Number.isInteger(result) ? result : roundTo(result);
 };
 

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

@@ -28,6 +28,7 @@ export const Footer = JSX<FooterProps>(
   }) => {
     const sitemap = useSitemap(context.useAsyncData);
     const dispositions = sitemap?.dispositions;
+
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
@@ -57,6 +58,7 @@ export const Footer = JSX<FooterProps>(
 
 const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
+
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
       {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}

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

@@ -13,6 +13,7 @@ export interface SocialMediaProps extends UniBlockProps {
 export const SocialMedia = JSX<SocialMediaProps>(({ className, media, version, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`}>
       {media?.map((_, index) => (

package/src/components/Footer/SocialMedia.tsx

@@ -14,6 +14,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
   ({ className = '', media, version, context, children }) => {
     const router = context.useRouter();
     const { handlerDecorator } = context;
+
     return (
       <div>
         <div className={`flex gap-2.5 ${className}`}>

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

@@ -6,6 +6,7 @@ import type { FooterLink } from './FooterLink';
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`${className || ''}`}>
       <div className="py-6">

package/src/components/Footer/TextInformation.tsx

@@ -6,6 +6,7 @@ import type { FooterLink } from './FooterLink';
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`${className || ''}`}>
       <div className="pt-5">

package/src/components/Gallery/GalleryCardInner.tsx

@@ -8,6 +8,7 @@ import type { GalleryCard, GalleryItem } from './GalleryContent';
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version, isDotted = true }) => {
     const titleStyleClasses = getTitleStyle(version);
+
     return (
       <div className="h-full flex flex-col justify-between text-center">
         <div>

package/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -24,6 +24,7 @@ export const renderBlock = (context: ContentPageContext) => (block: GroupBlockDe
   }
   const classNameBlock = style2className(block?.style);
   const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+
   return (
     <EmbeddedBlock key={`block_${i}`} context={context} {...block} className={classNameBlock} />
   );

package/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -19,6 +19,7 @@ export const renderBlock =
     }
     const classNameBlock = style2className(block?.style);
     const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+
     return (
       <div className={className} key={`block_${i}`}>
         <EmbeddedBlock context={context} {...block} className={classNameBlock} />

package/src/components/Header/HeaderBurger.tsx

@@ -15,6 +15,7 @@ export interface HeaderBurgerProps {
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
+
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
         <button
@@ -46,6 +47,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
 
 const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   const { icon, href, text } = menu;
+
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">
       {icon ? (

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -29,6 +29,7 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
   ({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
+
     return (
       <div className={`flex items-center ${className || ''}`}>
         <TopItem

package/src/components/Headline/Headline.mobile.tsx

@@ -18,6 +18,7 @@ export const Headline = JSX<HeadlineProps>(
     align = 'left',
   }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+
     return (
       <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
         {title ? (

package/src/components/Insurance/Insurance.tsx

@@ -64,6 +64,7 @@ function renderInsuranceSumMonth(sum, monthLimit) {
 
 function renderValueBlock(title, sum, isAnotherBlock) {
   const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+
   return (
     <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
       <span className="text-secondary-text text-base">{title}</span>

package/src/components/Insurance/InsuranceContent.ts

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import type { InsuranceProps } from '../../model/Insurance';
 
 /**
  * @title Преимущество
@@ -15,12 +14,16 @@ export interface InsuranceBenefit {
 /**
  * @title Страховка
  */
-export type InsuranceContent = InsuranceProps & {
+export type InsuranceContent = {
   /** @title Заголовок */
   title?: string;
   /** @title Описание */
   description?: string;
   image?: Picture;
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  sum?: number;
   /**
    * @title Список преимуществ
    * @maxItems 6

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

@@ -6,8 +6,8 @@
   },
   "insuranceTabs": [
     {
-      "title": "Описание",
-      "card": [
+      "title": "Описание 1",
+      "cards": [
         {
           "sum": 200000,
           "fee": 2100,
@@ -21,8 +21,8 @@
       ]
     },
     {
-      "title": "Описание",
-      "card": [
+      "title": "Описание 2",
+      "cards": [
         {
           "sum": 200000,
           "fee": 2100,

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -38,11 +38,6 @@ export default {
                 fee: 3600,
                 icon: { icon: 'ActualBalanceIcon' },
               },
-              {
-                sum: 600000,
-                fee: 3600,
-                icon: { icon: 'MoneyInsuranceIcon' },
-              },
             ],
           },
         ]}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -9,7 +9,6 @@ export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent,
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   ({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
-    const insuranceGalleries = insuranceTabs.map((_) => _.cards);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
@@ -36,7 +35,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
           {renderInsuranceGalleries({
             context,
             className,
-            insuranceGalleries,
+            insuranceTabs,
           })}
         </div>
         {button?.text ? (
@@ -55,7 +54,13 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   },
 );
 
-const renderInsuranceGalleries = ({ insuranceGalleries, context, className }: any) => {
+const renderInsuranceGalleries = ({
+  insuranceTabs,
+  context,
+  className = '',
+}: InsuranceAmountBlockProps) => {
+  const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
+
   return insuranceGalleries?.length
     ? insuranceGalleries.map((cards) => (
         <InsuranceAmountBlockInner context={context} className={className} cards={cards} />

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,14 +1,16 @@
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { InsuranceProps } from '../../model/Insurance';
 
 /**
  * @title Кнопка выбора программы
  */
-export type cardItem = InsuranceProps & {
+export type CardItem = {
+  /** @title Иконка */
   icon?: Picture;
   /** @title Страховой взнос */
   fee?: number;
+  /** @title Страховая сумма */
+  sum?: number;
 };
 
 /**
@@ -18,7 +20,7 @@ export interface InsuranceAmountBlockTabs {
   /** @title Заголовок вкладки */
   title?: string;
   /** @title Содержимое вкладки */
-  cards?: cardItem[];
+  cards?: CardItem[];
 }
 
 /**