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

package/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/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/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -0,0 +1,52 @@
+import { context } from '../../setup-fixture';
+import { InsuranceAmountBlock } from './InsuranceAmountBlock';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <InsuranceAmountBlock
+        className="col-span-12"
+        context={context}
+        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: 600000,
+                fee: 3600,
+                icon: { icon: 'MoneyInsuranceIcon' },
+              },
+            ],
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/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/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/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/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -43,19 +43,19 @@ export default {
             label: 'В мобильном приложении или интернет-банке',
             description: 'Для всех клиентов Россельхозбанка',
             icon: { icon: 'SignDocsIcon' },
-            button: { text: 'Войти в интернет-банк' },
+            button: { text: 'Войти в интернет-банк', href: 'https://www.rshb.ru/' },
           },
           {
             label: 'Через Госуслуги',
             description: 'При наличии данных в Единой биометрической системе',
             icon: { icon: 'ClockIcon' },
-            button: { text: 'Оформить' },
+            button: { text: 'Оформить', href: 'https://www.rshb.ru/' },
           },
           {
             label: 'В офисах Россельхозбанка',
             description: 'Откройте вклад',
             icon: { icon: 'ComfortableCompIcon' },
-            button: { text: 'Офисы на карте' },
+            button: { text: 'Офисы на карте', href: 'https://www.rshb.ru/' },
           },
         ]}
       />

package/src/components/StepsBlock/StepsBlock.tsx

@@ -83,7 +83,7 @@ const renderStepTitle = (step: Step, i: number, isMainButton: boolean) => {
         <Button
           className="box-border mt-8 py-3 h-12 w-full max-w-[240px]"
           version="primary"
-          href="#"
+          href={step.button?.href}
         >
           {step.button.text}
         </Button>

package/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/src/icons/IconName.ts

@@ -32,6 +32,7 @@ export enum IconMap {
   DocsIcon = 'DocsIcon',
   DocumentTextIcon = 'DocumentTextIcon',
   DollarIcon = 'DollarIcon',
+  DoneIcon = 'DoneIcon',
   EarthIcon = 'EarthIcon',
   EmptyWalletChangeIcon = 'EmptyWalletChangeIcon',
   EmptyWalletIcon = 'EmptyWalletIcon',
@@ -113,6 +114,7 @@ export enum IconTitleMap {
   DocsIcon = 'Документы',
   DocumentTextIcon = 'Документ с текстом',
   DollarIcon = 'Доллар',
+  DoneIcon = "Зелёная 'галочка'",
   EarthIcon = 'Земля',
   EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом',
   EmptyWalletIcon = 'Пустой кошелёк',
@@ -168,7 +170,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 =
@@ -203,6 +205,7 @@ export type IconName =
   | 'DocsIcon'
   | 'DocumentTextIcon'
   | 'DollarIcon'
+  | 'DoneIcon'
   | 'EarthIcon'
   | 'EmptyWalletChangeIcon'
   | 'EmptyWalletIcon'

package/src/model/Insurance.ts

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

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

@@ -1,36 +0,0 @@
-{
-  "title": "Страховые риски и продукты",
-  "description": "Описание",
-  "insurance": 500000,
-  "limit": null,
-  "image": {
-    "src": "insurance.png",
-    "title": "страхование",
-    "format": "webp",
-    "alt": "страхование",
-    "size": {
-      "width": 400,
-      "height": 300
-    },
-    "sources": [
-      {
-        "src": "insurance.png 1x, insurance-2x.png 2x",
-        "format": "png"
-      }
-    ]
-  },
-  "benefits": [
-    {
-      "label": "Пункт 1",
-      "icon": {
-        "icon": "ShieldTickIcon"
-      }
-    },
-    {
-      "label": "Пункт 2",
-      "icon": {
-        "icon": "ShieldTickIcon"
-      }
-    }
-  ]
-}

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

@@ -1,36 +0,0 @@
-{
-  "title": "Страховые риски и продукты",
-  "description": "Описание",
-  "insurance": 500000,
-  "limit": null,
-  "image": {
-    "src": "insurance.png",
-    "title": "страхование",
-    "format": "webp",
-    "alt": "страхование",
-    "size": {
-      "width": 400,
-      "height": 300
-    },
-    "sources": [
-      {
-        "src": "insurance.png 1x, insurance-2x.png 2x",
-        "format": "png"
-      }
-    ]
-  },
-  "benefits": [
-    {
-      "label": "Пункт 1",
-      "icon": {
-        "icon": "ShieldTickIcon"
-      }
-    },
-    {
-      "label": "Пункт 2",
-      "icon": {
-        "icon": "ShieldTickIcon"
-      }
-    }
-  ]
-}