@redneckz/wildless-cms-uni-blocks 0.3.56 → 0.3.58

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

@@ -61,11 +61,12 @@
       "type": "ProductGallery",
       "style": ["col-span-12"],
       "content": {
+        "version": "secondary",
         "slides": [
           {
             "nav": {
               "title": "Деньги на любые цели",
-              "desc": "Ставка от 12,5% годовых на срок до 5 лет"
+              "description": "Ставка от 12,5% годовых на срок до 5 лет"
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 5 лет!»",
@@ -79,7 +80,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -103,7 +104,7 @@
           {
             "nav": {
               "title": "Для людей в возрасте",
-              "desc": "Ставка от 12,5% годовых на срок до 3 лет"
+              "description": "Ставка от 12,5% годовых на срок до 3 лет"
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 3 лет!»",
@@ -117,7 +118,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -141,7 +142,7 @@
           {
             "nav": {
               "title": "Выгодно покупать",
-              "desc": "Дополнительные бонусные баллы за покупки"
+              "description": "Дополнительные бонусные баллы за покупки"
             },
             "productBlock": {
               "title": "Дополнительные бонусные баллы за покупки!»",
@@ -150,7 +151,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -168,7 +169,7 @@
           {
             "nav": {
               "title": "Карты Unionpay",
-              "desc": "Кэшбэк до 20% у партнеров"
+              "description": "Кэшбэк до 20% у партнеров"
             },
             "productBlock": {
               "title": "Карты Unionpay»",
@@ -182,7 +183,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {

package/mobile/src/components/ContentPage/ContentPage.tsx

@@ -19,8 +19,8 @@ export type BlockDecorator<VNode = any> = (
   index?: number | string,
 ) => any;
 
-export type JSXBlock = (
-  props: PropsWithChildren<UniBlockProps & BlockContent, any>,
+export type JSXBlock<BlockProps = BlockContent> = (
+  props: PropsWithChildren<UniBlockProps & BlockProps, any>,
   context?: any,
 ) => any;
 

package/mobile/src/components/GroupBlock/BlocksTypeProps.ts

@@ -0,0 +1,40 @@
+import type { ProductBlockContent } from '../../components/ProductBlock/ProductBlockContent';
+import type { ProductTileContent } from '../../components/ProductTile/ProductTileContent';
+import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+
+export interface ActiveHandler {
+  context: ContentPageContext;
+  blocks?: GroupBlockDef[];
+  initialState?: boolean;
+}
+
+export interface GroupBlockCommonProps {
+  /** @title Стиль */
+  style?: string[];
+  /** @title Теги */
+  tags?: string[];
+}
+
+/**
+ * @title Продуктовый блок
+ * @default {"blockType": "ProductBlock"}
+ */
+export type ProductBlockDef = ProductBlockContent &
+  GroupBlockCommonProps & { blockType: 'ProductBlock' };
+
+/**
+ * @title Продуктовая плитка
+ * @default {"blockType": "ProductTile"}
+ */
+export type ProductTileDef = ProductTileContent &
+  GroupBlockCommonProps & { blockType: 'ProductTile' };
+
+/**
+ * @title Выберите блок
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Содержимое блока
+ */
+export type GroupBlockDef = EmptyOption | ProductBlockDef | ProductTileDef;

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

@@ -0,0 +1,7 @@
+import { ProductBlock } from '../ProductBlock/ProductBlock';
+import { ProductTile } from '../ProductTile/ProductTile';
+
+export const EmbeddableGroupBlocks = {
+  ProductBlock,
+  ProductTile,
+};

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

@@ -0,0 +1,27 @@
+{
+  "tabs": [
+    { "title": "Еще программы", "index": 0 },
+    { "title": "Страхование жизни", "index": 1, "tag": "tag1" },
+    { "title": "Страхование здоровья", "index": 2, "tag": "tag2" }
+  ],
+  "blocks": [
+    {
+      "blockType": "ProductBlock",
+      "title": "Продуктовый блок",
+      "description": "Описание текстового блока",
+      "tags":["tag2"]
+    },
+    {
+      "blockType": "ProductTile",
+      "title": "Продуктовая плитка",
+      "description": "Описание текстового блока",
+      "tags":["tag1"]
+    },
+    {
+      "blockType": "ProductBlock",
+      "title": "Продуктовый блок",
+      "description": "Описание текстового блока",
+      "tags":["tag2"]
+    }
+  ]
+}

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

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { GroupBlockContent, GroupBlockTab } from './GroupBlockContent';
+import { GroupBlockTabs } from './GroupBlockTabs';
+import { GroupBlocksItem } from './GroupBlocksItem';
+import { filterBlocksByTag } from './filterBlocksByTag';
+
+export interface TabsItemProps extends GroupBlockTab {
+  count?: number;
+}
+
+export interface GroupBlockProps extends GroupBlockContent, UniBlockProps {
+  tabs?: TabsItemProps[];
+}
+
+export const GroupBlock = JSX<GroupBlockProps>(
+  ({ className = '', tabs, context, anchor = null, groupBlocks = [] }) => {
+    const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
+
+    const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
+
+    const tabsNewMap = tabs?.map((tab) => {
+      const count = tab.tag
+        ? groupBlocks.filter((block) => block?.tags?.includes(`${tab.tag}`)).length
+        : groupBlocks.length;
+
+      return { ...tab, count };
+    });
+
+    return (
+      <section id={anchor} className={`box-border gap-1 h-12 ${className}`}>
+        {tabsNewMap?.length ? (
+          <GroupBlockTabs currentTag={currentTag} onTabClick={setCurrentTag} tabs={tabsNewMap} />
+        ) : null}
+        {groupBlocks.length ? (
+          <div className="list-none">
+            <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);

package/mobile/src/components/GroupBlock/GroupBlockContent.ts

@@ -0,0 +1,23 @@
+import type { GroupBlockDef } from './BlocksTypeProps';
+
+/**
+ *  @title Таб
+ */
+export interface GroupBlockTab {
+  /** @title Название */
+  title?: string;
+  /** @title Tег */
+  tag?: string;
+}
+
+/**
+ * @title Блок-группировки
+ */
+export interface GroupBlockContent {
+  /** @title Блоки */
+  groupBlocks?: GroupBlockDef[];
+  /** @title Табы */
+  tabs?: GroupBlockTab[];
+  /** @title Показывать счетчик блоков во вкладках */
+  isShowCounter?: boolean;
+}

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

@@ -0,0 +1,54 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { TabsItemProps } from './GroupBlock';
+
+export type TabClickHandler = (tag) => void;
+
+export interface GroupBlockTabsProps {
+  onTabClick: TabClickHandler;
+  currentTag?: string;
+  className?: string;
+  tabs?: TabsItemProps[];
+  isShowCounter?: boolean;
+}
+
+export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
+  const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
+
+  return (
+    <div className={`mb-2 box-border flex gap-x-1 h-12 ${className}`} role="tablist">
+      {tabs?.map(renderTab(onTabClick, isShowCounter, currentTag))}
+    </div>
+  );
+});
+
+const badgeStyle = 'w-[22px] h-[22px] rounded-full text-m-sm';
+
+const renderTab =
+  (onTabClick: TabClickHandler, isShowCounter: boolean, currentTag?: string) =>
+  (tab: TabsItemProps, i: number) => {
+    const isActive = currentTag === tab.tag;
+    const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
+    const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
+    const counterBlockStyle = `${badgeStyle} 
+      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-text/10 text-secondary-text'}`;
+
+    return (
+      <div
+        key={String(i)}
+        className={`flex h-full w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
+        role="tab"
+        onClick={() => onTabClick(tab.tag)}
+        aria-selected={String(isActive)}
+        tag={tab?.tag}
+      >
+        <div className="flex flex-1 items-center justify-center">
+          {tab?.title ? <h3 className={`mr-8 ${tabText}`}>{tab?.title}</h3> : null}
+          {isShowCounter ? (
+            <div className={`flex items-center justify-center ${counterBlockStyle}`}>
+              <span>{tab.count}</span>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  };

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

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { UniBlockProps } from '../../types';
+import { style2className } from '../../utils/style2className';
+import type { GroupBlockDef } from './BlocksTypeProps';
+import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
+import { GroupBlockContent } from './GroupBlockContent';
+
+export interface GroupBlocksProps extends GroupBlockContent, UniBlockProps {}
+
+export const GroupBlocksItem = JSX<GroupBlocksProps>(({ groupBlocks, context }) => {
+  return (
+    <div className={'grid grid-cols-12 gap-2 box-border'}>
+      {groupBlocks?.length ? groupBlocks.map(renderBlock(context)) : null}
+    </div>
+  );
+});
+
+export const renderBlock = (context: ContentPageContext) => (block: GroupBlockDef, i: number) => {
+  const type = block?.blockType;
+  if (!type || !(type in EmbeddableGroupBlocks)) {
+    return null;
+  }
+  const classNameBlock = style2className(block?.style);
+  const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+  return (
+    <EmbeddedBlock key={`block_${i}`} context={context} {...block} className={classNameBlock} />
+  );
+};

package/mobile/src/components/GroupBlock/filterBlocksByTag.ts

@@ -0,0 +1,5 @@
+import { GroupBlockDef } from './BlocksTypeProps';
+
+export const filterBlocksByTag = (blocks: GroupBlockDef[], tag?: string) => {
+  return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
+};

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

@@ -0,0 +1,27 @@
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { GroupBlockDef } from './BlocksTypeProps';
+import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
+import { style2className } from '../../utils/style2className';
+
+type EmbeddableBlocksProps = {
+  groupBlocks?: GroupBlockDef[];
+  context: ContentPageContext;
+  className?: string;
+};
+
+export const renderBlock =
+  ({ context, className }: EmbeddableBlocksProps) =>
+  (block: GroupBlockDef, i: number) => {
+    const type = block?.blockType;
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+      return null;
+    }
+    const classNameBlock = style2className(block?.style);
+    const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+    return (
+      <div className={className} key={`block_${i}`}>
+        <EmbeddedBlock context={context} {...block} className={classNameBlock} />
+      </div>
+    );
+  };

package/mobile/src/components/OtherProducts/OtherProductsContent.ts

@@ -14,7 +14,10 @@ export interface BlockItemCommonProps {
    * @title Отображать в раскрытом виде
    */
   isExpanded?: boolean;
-  /** @title Блоки */
+  /**
+   * @title Блоки
+   * @maxItems 10
+   */
   blocks?: BlockDef[];
   columns?: ColumnsCount;
 }
@@ -27,7 +30,6 @@ export interface OtherProductsContent {
   title?: string;
   /**
    * @title Список
-   * @maxItems 10
    */
   blockItems?: BlockItemCommonProps[];
   colorPalette?: ColorPalette;

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

@@ -10,14 +10,13 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 234,
-            "height": 234
+            "width": 608,
+            "height": 299
           }
         },
+        "version": "primary",
         "description": "Описание",
-        "isDotted": "true",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "version": "primary"
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
       }
     },
     {
@@ -30,14 +29,13 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 234,
-            "height": 234
+            "width": 608,
+            "height": 299
           }
         },
+        "version": "primary",
         "description": "Описание",
-        "isDotted": "true",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "version": "primary"
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
       }
     }
   ]

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -1,4 +1,5 @@
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /** @title Кнопка под слайдом */
 interface ProductGalleryNav {
@@ -19,17 +20,13 @@ export interface ProductSlide {
 }
 
 /**
- * @title Продуктовая галерея (для мобильных горизонтальная прокрутка shift+mouseScroll)
+ * @title Продуктовая галерея
  */
 export interface ProductGalleryContent {
-  /**
-   * @title Задержка
-   * @hidden //! temporary not used
-   */
-  duration?: number;
   /**
    * @title Слайды
    * @minItems 2
    */
   slides?: ProductSlide[];
+  version?: BlockVersion;
 }

package/mobile/src/icons/SafeIcon.svg

@@ -1 +1,7 @@
-<svg title="Сейф" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 12.83V15c0 5 2 7 7 7h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 19h8c2 0 3-1 3-3V8c0-2-1-3-3-3H8C6 5 5 6 5 8v8c0 2 1 3 3 3Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 9.5h2.48a2.5 2.5 0 0 1 0 5H5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 9.99h-3M19 14h-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.2 12h.1" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Сейф" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 12.83V15c0 5 2 7 7 7h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 9.5h2.48a2.5 2.5 0 0 1 0 5H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 19h8c2 0 3-1 3-3V8c0-2-1-3-3-3H8C6 5 5 6 5 8v8c0 2 1 3 3 3Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19 9.99h-3M19 14h-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7.2 12h.1" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/mobile/src/types.ts

@@ -77,3 +77,5 @@ export interface DaDataSuggestion<T> {
 export interface DaDataAddress {
   city?: string | null;
 }
+
+export type FuncSetNumber = (value: number) => void;

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -13,7 +13,7 @@ type EmbeddableBlocksProps = {
 export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
   blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
 
-export const renderBlock =
+const renderBlock =
   ({ context, columns, className }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;

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

@@ -32,9 +32,7 @@ export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className
         fill="white"
         viewBox="0 0 11 9"
       />
-      {text ? (
-        <span className="font-sans ml-3 text-sm leading-5 cursor-pointer">{text}</span>
-      ) : null}
+      {text ? <span className="font-sans ml-3 text-m-base cursor-pointer">{text}</span> : null}
     </label>
   </div>
 ));

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

@@ -20,19 +20,15 @@ export const InputRange = JSX<InputRangeProps>(
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? (
-            <span className="absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5">
-              {title}
-            </span>
-          ) : null}
+          {title ? <span className="text-base text-secondary-text pl-4">{title}</span> : null}
           <input
-            className={`m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${ title ? 'pt-4' : '' }`}
+            className={`m-0 mt-[5px] font-sans text-title w-full h-14 border border-solid border-main-stroke rounded-md
+                        outline-none p-0 pl-4 box-border text-primary-text`}
             value={addSpacesBetweenNumbers(value)}
             onChange={(e) => handleChange(e.target.value)}
             onBlur={handleBlur}
           />
-          <div className="absolute inset-x-0 top-[35px] px-4 leading-[18px]">
+          <div className="absolute inset-x-0 bottom-[-4px] px-4 leading-[18px]">
             <input
               className="box-border w-full m-0 cursor-pointer slider"
               type="range"
@@ -47,7 +43,9 @@ export const InputRange = JSX<InputRangeProps>(
         </label>
         <div className="flex justify-between my-3">
           {items.map((item, i) => (
-            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4"> {item} </span>
+            <span key={String(i)} className="text-sm leading-[14px] text-secondary-text pl-4">
+              {item}
+            </span>
           ))}
         </div>
       </div>

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,3 +1,5 @@
+import type { FuncSetNumber } from '../../types';
+
 export interface InputRangeProps {
   className?: string;
   items?: string[];
@@ -6,5 +8,5 @@ export interface InputRangeProps {
   step?: number;
   value?: number;
   title?: string;
-  onChange?: (value: number) => void;
+  onChange?: FuncSetNumber;
 }

package/mobile/src/ui-kit/Tabs/TabsProps.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import { FuncSetNumber } from '../../types';
 
 /**
  * @title Вкладка
@@ -11,7 +12,7 @@ export interface Tab {
   icon?: Picture;
 }
 
-export type TabClickHandler = (value: number) => void;
+export type TabClickHandler = FuncSetNumber;
 
 export interface TabsProps {
   tabs?: Tab[];

package/mobile/src/utils/style2className.ts

@@ -1,2 +1,3 @@
-export const style2className = (style: string[] | undefined | null): string =>
-  style ? style.join(' ') : '';
+export function style2className(style: string[] | undefined | null): string {
+  return style ? style.filter(Boolean).join(' ') : '';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.56",
+  "version": "0.3.58",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/common.css

@@ -72,6 +72,13 @@ html {
     width: 100%;
   }
 
+  .calc-rate-text {
+    background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+  }
+
   input[type='range'].slider {
     -webkit-appearance: none;
     height: 4px;

package/src/components/BlockContent.ts

@@ -5,6 +5,7 @@ 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 { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
@@ -48,4 +49,5 @@ export type BlockContent =
   | TextBlockContent
   | TileContent
   | NavigationContent
-  | LinkListContent;
+  | LinkListContent
+  | GroupBlockContent;

package/src/components/Blocks.ts

@@ -2,6 +2,7 @@ import { Accordion } from './Accordion/Accordion';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { Calculator } from './Calculator/Calculator';
 import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -19,7 +20,6 @@ import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
-import { ProductGalleryGreen } from './ProductGalleryGreen/ProductGalleryGreen';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
 import { Recommendation } from './Recommendation/Recommendation';
@@ -27,12 +27,14 @@ 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';
 
 export const Blocks = {
   Accordion,
   BenefitsBlock,
   Bonus,
   ComparisonTable,
+  Calculator,
   CreditCalculator,
   ExchangeRateTile,
   Footer,
@@ -47,7 +49,6 @@ export const Blocks = {
   PictureText,
   ProductBlock,
   ProductGallery,
-  ProductGalleryGreen,
   ProductTile,
   PromoTile,
   OtherProducts,
@@ -58,4 +59,5 @@ export const Blocks = {
   Tile,
   Navigation,
   Placeholder,
+  GroupBlock,
 };