@redneckz/wildless-cms-uni-blocks 0.3.69 → 0.3.70

package/mobile/src/components/Insurance/InsuranceContent.ts

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

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

@@ -0,0 +1,44 @@
+{
+  "title": "Заголовок",
+  "button": {
+    "href": "https://rshb.ru",
+    "text": "Текст кнопки"
+  },
+  "insuranceTabs": [
+    {
+      "title": "Описание",
+      "card": [
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        },
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        }
+      ]
+    },
+    {
+      "title": "Описание",
+      "card": [
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        },
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        },
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        }
+      ]
+    }
+  ]
+}

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -0,0 +1,84 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
+import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Button } from '../../ui-kit/Button/Button';
+
+export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
+
+export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
+  ({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
+    const insuranceGalleries = insuranceTabs.map((_) => _.cards);
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+
+    return (
+      <section
+        id={anchor}
+        className={`box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`}
+      >
+        {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
+        <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
+          {insuranceTabs.map((item, i) =>
+            renderNavButton({
+              title: item?.title,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+            }),
+          )}
+        </div>
+        <div
+          className="flex"
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {renderInsuranceGalleries({
+            context,
+            className,
+            insuranceGalleries,
+          })}
+        </div>
+        {button?.text ? (
+          <div className="flex justify-center">
+            <Button
+              className="box-border p-4 h-14 w-full max-w-[240px]"
+              version={button?.version || 'primary'}
+              href={button.href}
+            >
+              {button.text}
+            </Button>
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);
+
+const renderInsuranceGalleries = ({ insuranceGalleries, context, className }: any) => {
+  return insuranceGalleries?.length
+    ? insuranceGalleries.map((cards) => (
+        <InsuranceAmountBlockInner context={context} className={className} cards={cards} />
+      ))
+    : null;
+};
+
+function renderNavButton({ title, i, activeSlideIndex, onClick }) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'bg-primary-main text-white rounded-md'
+    : `text-secondary-text`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      aria-label={title}
+      className={`box-border px-4 py-3 text-m-md ${btnClassName}`}
+    >
+      {title}
+    </button>
+  );
+}

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -0,0 +1,33 @@
+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 & {
+  icon?: Picture;
+  /** @title Страховой взнос */
+  fee?: number;
+};
+
+/**
+ * @title Вкладка
+ */
+export interface InsuranceAmountBlockTabs {
+  /** @title Заголовок вкладки */
+  title?: string;
+  /** @title Содержимое вкладки */
+  cards?: cardItem[];
+}
+
+/**
+ * @title Страховые суммы
+ */
+export interface InsuranceAmountBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список вкладок */
+  insuranceTabs?: InsuranceAmountBlockTabs[];
+  button?: ButtonProps;
+}

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -0,0 +1,157 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps, FuncReturnVoid } from '../../types';
+import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Img } from '../../ui-kit/Img/Img';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+
+export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
+
+type InsuranceGalleryProps = {
+  tabsShift: number;
+  cards: cardItem[];
+  activeSlideIndex: number;
+  isLastShift: boolean;
+  setActiveSlideIndex: FuncReturnVoid<number>;
+};
+
+type InsuranceSlideProps = {
+  slide: cardItem;
+  i: number;
+  activeSlideIndex: number;
+  onClick: FuncReturnVoid<MouseEvent>;
+};
+
+const arrowBtnStyle =
+  'absolute w-12 h-12 min-h-12 max-h-12 top-1 z-10 mt-[25px] bg-white rounded-full text-primary-text';
+
+export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
+  ({ className = '', context, cards = [], anchor = null }) => {
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+    const [tabsShift, setTabsShift] = context.useState(0);
+
+    const handleNextClick = () => setTabsShift(tabsShift + 1);
+    const handlePrevClick = () => setTabsShift(tabsShift - 1);
+
+    const galleryLength = cards?.length;
+
+    const isGalleryScrollAvailable = cards?.length > 2;
+    const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
+    const isLastShift = galleryLength === tabsShift + 2;
+    const showPrevButton = tabsShift > 0;
+
+    return (
+      <section id={anchor} className={`min-w-full ${className}`}>
+        <div className="relative mt-7 overflow-hidden">
+          {galleryLength > 1
+            ? renderGallery({
+                tabsShift,
+                cards,
+                activeSlideIndex,
+                isLastShift,
+                setActiveSlideIndex,
+              })
+            : null}
+          {showPrevButton ? (
+            <div>
+              <ArrowButton
+                className={`${arrowBtnStyle} left-0 top-9`}
+                onClick={handlePrevClick}
+                ariaLabel="Пролистать влево"
+                data-block-control="scroll-left"
+              />
+              <div className="absolute top-0 left-0 h-[168px] w-[84px] bg-opacity-from-white" />
+            </div>
+          ) : null}
+          {showNextButton ? (
+            <div>
+              <ArrowButton
+                className={`${arrowBtnStyle} right-0 top-9 rotate-180`}
+                onClick={handleNextClick}
+                ariaLabel="Пролистать вправо"
+                data-block-control="scroll-right"
+              />
+              <div className="absolute top-0 right-0 h-[168px] w-[100px] bg-opacity-to-white" />
+            </div>
+          ) : null}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderGallery({
+  tabsShift,
+  cards,
+  activeSlideIndex,
+  isLastShift,
+  setActiveSlideIndex,
+}: InsuranceGalleryProps) {
+  const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+  return (
+    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000">
+      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px] px-[50px]">
+        {cards.map((slide, i) =>
+          renderSlide({
+            slide,
+            i,
+            activeSlideIndex,
+            onClick: () => setActiveSlideIndex(i),
+          }),
+        )}
+      </div>
+    </div>
+  );
+}
+
+function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProps) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'shadow-dark-blue/42 border-primary-main'
+    : `ease-in duration-300 border-main-stroke`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      className={`p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`}
+    >
+      {slide?.icon ? (
+        <Img
+          className={`h-[108px] w-[108px] p-3 rounded-full bg-secondary-light mr-[30px]`}
+          image={slide.icon}
+          width="24"
+          height="24"
+        />
+      ) : null}
+
+      <div className="flex gap-3.5">
+        {slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null}
+        {slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null}
+      </div>
+      {renderDoneIcon(isActiveBtn)}
+    </button>
+  );
+}
+
+function renderValueBlock(title, sum) {
+  return (
+    <div className="flex flex-col text-left">
+      <span className="whitespace-pre text-title-2xs">{addSpacesBetweenNumbers(sum)} ₽</span>
+      <span className="whitespace-pre text-secondary-text font-light text-base mt-1">{title}</span>
+    </div>
+  );
+}
+
+function renderDoneIcon(isActive) {
+  return isActive ? (
+    <Img
+      className={`h-[24px] w-[24px] min-w-[24px] min-h-[24px] absolute right-4 top-4`}
+      image="DoneIcon"
+      width="24"
+      height="24"
+    />
+  ) : null;
+}

package/mobile/src/icons/DoneIcon.svg

@@ -0,0 +1,4 @@
+<svg title="Зелёная 'галочка'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="#42AB44"/>
+<path d="M7 13.0047L9.7242 16L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/mobile/src/icons/IconName.ts

@@ -3,11 +3,11 @@
 /* eslint-disable max-lines */
 
 export enum IconMap {
-  ActualBalanceIcon = 'ActualBalanceIcon', AirPlane = 'AirPlane', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', 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', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCan = 'WateringCan'
+  ActualBalanceIcon = 'ActualBalanceIcon', AirPlane = 'AirPlane', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', 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', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCan = 'WateringCan'
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlane = 'Самолет', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка', ArrowUpIcon = 'Стрелка вверх', AtmIcon = 'Банкомат', BankIcon = 'Банк', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кино', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LoupeIcon = 'Лупа', MasterCardIcon = 'MasterCard', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCan = 'Добавить продукт'
+  ActualBalanceIcon = 'Деньги', AirPlane = 'Самолет', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка', ArrowUpIcon = 'Стрелка вверх', AtmIcon = 'Банкомат', BankIcon = 'Банк', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кино', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LoupeIcon = 'Лупа', MasterCardIcon = 'MasterCard', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCan = 'Добавить продукт'
 }
 
 /**
@@ -15,7 +15,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlane' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentTextIcon' | 'DollarIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LoupeIcon' | 'MasterCardIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCan';
+export type IconName = '' | 'ActualBalanceIcon' | 'AirPlane' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LoupeIcon' | 'MasterCardIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCan';

package/mobile/src/model/Insurance.ts

@@ -0,0 +1,6 @@
+export interface InsuranceProps {
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  sum?: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.69",
+  "version": "0.3.70",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -163,7 +163,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "30 kB",
+      "limit": "45 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/BlockContent.ts

@@ -7,6 +7,7 @@ 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';
@@ -23,6 +24,7 @@ import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
 import type { BonusBenefitsBlockContent } from './BonusBenefitsBlock/BonusBenefitsBlockContent';
+import type { InsuranceContent } from './Insurance/InsuranceContent';
 
 /**
  * @hidden
@@ -36,6 +38,7 @@ export type BlockContent =
   | GalleryContent
   | GracePeriodContent
   | HeaderContent
+  | InsuranceAmountBlockContent
   | LinkDocsContent
   | MobileAppTileContent
   | NavigatorTabsContent
@@ -52,4 +55,5 @@ export type BlockContent =
   | NavigationContent
   | LinkListContent
   | GroupBlockContent
-  | BonusBenefitsBlockContent;
+  | BonusBenefitsBlockContent
+  | InsuranceContent;

package/src/components/Blocks.ts

@@ -11,6 +11,7 @@ import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { Insurance } from './Insurance/Insurance';
+import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
@@ -45,6 +46,7 @@ export const Blocks = {
   Header,
   Headline,
   Insurance,
+  InsuranceAmountBlock,
   LinkDocs,
   MiniGallery,
   MobileAppTile,

package/src/components/ContentPage/ContentPage.page.json

@@ -2155,7 +2155,7 @@
       "content": {
         "title": "Страховые риски и продукты",
         "description": "Описание",
-        "insuranceSum": 500000,
+        "sum": 500000,
         "image": {
           "src": "insurance.png",
           "title": "страхование",
@@ -2188,6 +2188,55 @@
         ]
       }
     },
+    {
+      "type": "InsuranceAmountBlock",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Выбор страховой суммы",
+        "button": {
+          "href": "https://rshb.ru",
+          "text": "Выбрать программу"
+        },
+        "insuranceTabs": [
+          {
+            "title": "Индивидуальный",
+            "cards": [
+              {
+                "sum": 200000,
+                "fee": 2100,
+                "icon": { "icon": "ActualBalanceIcon" }
+              },
+              {
+                "sum": 200000,
+                "fee": 2100,
+                "icon": { "icon": "ActualBalanceIcon" }
+              },
+              {
+                "sum": 200000,
+                "fee": 2100,
+                "icon": { "icon": "ActualBalanceIcon" }
+              }
+            ]
+          },
+          {
+            "title": "Семейный",
+            "cards": [
+              {
+                "sum": 400000,
+                "fee": 3600,
+                "icon": { "icon": "ActualBalanceIcon" }
+              },
+              {
+                "sum": 400000,
+                "fee": 3600,
+                "icon": { "icon": "ActualBalanceIcon" }
+              }
+            ]
+          }
+        ]
+      }
+    },
+
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/Insurance/Insurance.example.json

@@ -0,0 +1,21 @@
+{
+  "title": "Заголовок",
+  "description": "Описание",
+  "insurance": 500000,
+  "benefits": [
+    {
+      "label": "Заголовок 1",
+      "description": "Описание 1",
+      "icon": {
+        "icon": "ShieldTickIcon"
+      }
+    },
+    {
+      "label": "Заголовок 2",
+      "description": "Описание 2",
+      "icon": {
+        "icon": "ShieldTickIcon"
+      }
+    }
+  ]
+}

package/src/components/Insurance/Insurance.fixture.tsx

@@ -1,11 +1,12 @@
-import { Insurance } from './Insurance';
+import { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import { Picture } from '../../model/Picture';
+import { Insurance } from './Insurance';
 
 const benefits: Benefit[] = [
   {
     label: 'Телесное повреждение',
+    description: 'Описание',
     icon: { icon: 'ShieldTickIcon' },
   },
   {
@@ -48,7 +49,7 @@ export default {
         description="Покрываемые риски программы «Защита вас и ваших близких»"
         benefits={benefits}
         image={image}
-        insuranceSum={500000}
+        sum={500000}
       />
       <Insurance
         context={context}
@@ -57,7 +58,7 @@ export default {
         description="Покрываемые риски программы «Защита вас и ваших близких»"
         benefits={benefits}
         image={image}
-        insuranceSum={500000}
+        sum={500000}
         monthLimit={25000}
       />
     </div>

package/src/components/Insurance/Insurance.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { InsuranceContent } from './InsuranceContent';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { InsuranceContent } from './InsuranceContent';
 
 export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
 
 export const Insurance = JSX<InsuranceProps>(
-  ({ className = '', title, description, image, benefits, insuranceSum, monthLimit }) => {
+  ({ className = '', title, description, image, benefits, sum, monthLimit }) => {
     return (
       <section className={`px-[100px] py-[50px] bg-white text-primary-text ${className}`}>
         {title ? <Heading headingType="h3" title={title} className="text-center" /> : null}
@@ -23,11 +23,9 @@ export const Insurance = JSX<InsuranceProps>(
               ) : null}
 
               <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
-                {insuranceSum
-                  ? renderValueBlock('Страховая сумма:', insuranceSum, Boolean(monthLimit))
-                  : null}
+                {sum ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
                 {monthLimit
-                  ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(insuranceSum))
+                  ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
                   : null}
               </div>
             </div>
@@ -50,8 +48,11 @@ function renderBenefit(benefit: Benefit, i: number) {
           asSVG
         />
       ) : null}
-      <div className="flex">
-        <div className="text-title-2xs">{benefit.label}</div>
+      <div>
+        {benefit?.label ? <div className="text-title-2xs">{benefit.label}</div> : null}
+        {benefit?.description ? (
+          <div className="mt-2 font-light text-secondary-text">{benefit.description}</div>
+        ) : null}
       </div>
     </div>
   );