@redneckz/wildless-cms-uni-blocks 0.2.91 → 0.2.94

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

@@ -11,26 +11,32 @@
   "date": "2022-04-08",
   "style": ["p-20", "pt-0", "gap-5", "bg-secondary-light"],
   "likeControl": true,
-  "blocks": [
-    {
-      "type": "Header",
-      "style": ["col-span-12", "-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
-      "content": {
-        "defaultLocation": "Москва",
-        "topItems": [
-          {
-            "href": "https://rshb.ru/",
-            "text": "Бизнес клиентам",
-            "target": "_blank"
-          },
-          {
-            "href": "https://rshb.ru/",
-            "text": "Частным клиентам",
-            "target": "_blank"
+  "slots": {
+    "header": {
+      "blocks": [
+        {
+          "type": "Header",
+          "style": ["-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
+          "content": {
+            "defaultLocation": "Москва",
+            "topItems": [
+              {
+                "href": "https://rshb.ru/",
+                "text": "Бизнес клиентам",
+                "target": "_blank"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Частным клиентам",
+                "target": "_blank"
+              }
+            ]
           }
-        ]
-      }
-    },
+        }
+      ]
+    }
+  },
+  "blocks": [
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],
@@ -92,6 +98,7 @@
                 "src": "worker.png",
                 "title": "Рабочий",
                 "format": "webp",
+                "alt": "Кредит наличными",
                 "size": {
                   "width": 280,
                   "height": 280
@@ -106,7 +113,6 @@
             },
             "productBlock": {
               "title": "Дополнительные бонусные баллы за покупки!»",
-              "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
               "buttons": [
                 {
                   "href": "https://rshb.ru",
@@ -119,6 +125,7 @@
                 "src": "credit-card-1.png",
                 "title": "Кредитка",
                 "format": "webp",
+                "alt": "Кредит наличными",
                 "size": {
                   "width": 280,
                   "height": 280
@@ -133,7 +140,6 @@
             },
             "productBlock": {
               "title": "Карты Unionpay»",
-              "description": "Кэшбэк до 20% у партнеров",
               "items": [
                 "Потребительский кредит по специальной процентной ставке",
                 "Получите деньги без залога и поручительства",
@@ -151,6 +157,7 @@
                 "src": "credit-card-1.png",
                 "title": "Кредитка",
                 "format": "webp",
+                "alt": "Кредит наличными",
                 "size": {
                   "width": 280,
                   "height": 280
@@ -1408,7 +1415,7 @@
             "href": "/abc7/yolo.png"
           },
           {
-            "text": "Some more generic text, and even more, more text",
+            "text": "Some more generic text, and even more, more text, and more generic text, and even more, more text, and even more",
             "href": "/abc8/archive.zip",
             "fileSize": "2.3МБ"
           },
@@ -1425,6 +1432,403 @@
         ]
       }
     },
+    {
+      "type": "TariffsTable",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Другие дебетовые карты Россельхозбанка",
+        "rowHeaders": [
+          {
+            "title": "Начисление процентов на остаток по счету",
+            "icon": "OkIcon"
+          },
+          {
+            "title": "Снятие наличных",
+            "icon": "GlassIcon"
+          },
+          {
+            "title": "Оформление онлайн",
+            "icon": "ShieldTickIcon"
+          },
+          {
+            "title": "Кэшбэк баллами"
+          },
+          {
+            "title": "Стоимость обслуживания"
+          },
+          {
+            "title": "Стоимость SMS-сервиса"
+          },
+          {
+            "title": "Дополнительная информация"
+          }
+        ],
+        "columns": [
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "Бесплатно",
+                  "description": "В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Платёжные системы картинкой"
+                },
+                {
+                  "image": {
+                    "src": "payment-systems.png",
+                    "format": "webp",
+                    "size": {
+                      "width": 288,
+                      "height": 56
+                    },
+                    "alt": "Платёжные системы",
+                    "title": "Платёжные системы"
+                  }
+                }
+              ],
+              [
+                {
+                  "label": "Кнопки-иконки"
+                },
+                {
+                  "buttons": [
+                    {
+                      "icon": "AppleIcon",
+                      "rounded": true,
+                      "version": "secondary",
+                      "href": "/_blank",
+                      "target": "_blank"
+                    },
+                    {
+                      "icon": "PlayMarketIcon",
+                      "rounded": true,
+                      "version": "secondary",
+                      "href": "/secondary"
+                    }
+                  ]
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "list": {
+                    "items": ["item 1", "item 2", "item 3"]
+                  }
+                }
+              ],
+              [
+                {
+                  "image": {
+                    "src": "money-1.png",
+                    "format": "webp",
+                    "size": {
+                      "width": 140,
+                      "height": 140
+                    },
+                    "alt": "Деньги"
+                  }
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "1%",
+                  "description": "В сторонних банкоматах, минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                },
+                {
+                  "list": {
+                    "isDotted": false,
+                    "items": ["item 1", "item 2", "item 3"]
+                  }
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                },
+                {
+                  "list": {
+                    "version": "primary",
+                    "items": ["item 1", "item 2", "item 3"]
+                  }
+                }
+              ],
+              [
+                {
+                  "description": "Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic"
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно"
+                }
+              ],
+              [
+                {
+                  "label": "Есть"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Для членов профсоюзных организаций"
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "Бесплатно",
+                  "description": "В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Платёжные системы картинкой"
+                },
+                {
+                  "image": {
+                    "src": "payment-systems.png",
+                    "format": "webp",
+                    "size": {
+                      "width": 288,
+                      "height": 56
+                    },
+                    "alt": "Платёжные системы",
+                    "title": "Платёжные системы"
+                  }
+                }
+              ],
+              [
+                {
+                  "label": "Кнопки-иконки"
+                },
+                {
+                  "buttons": [
+                    {
+                      "icon": "AppleIcon",
+                      "rounded": true,
+                      "version": "secondary",
+                      "href": "/_blank",
+                      "target": "_blank"
+                    },
+                    {
+                      "icon": "PlayMarketIcon",
+                      "rounded": true,
+                      "version": "secondary",
+                      "href": "/secondary"
+                    }
+                  ]
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "list": {
+                    "items": ["item 1", "item 2", "item 3"]
+                  }
+                }
+              ],
+              [
+                {
+                  "image": {
+                    "src": "money-1.png",
+                    "format": "webp",
+                    "size": {
+                      "width": 140,
+                      "height": 140
+                    },
+                    "alt": "Деньги"
+                  }
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "В банкоматах и кассах Россельхозбанка и банков-партнеров"
+                },
+                {
+                  "label": "1%",
+                  "description": "В сторонних банкоматах, минимум 150 руб"
+                }
+              ],
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                },
+                {
+                  "list": {
+                    "isDotted": false,
+                    "items": ["item 1", "item 2", "item 3"]
+                  }
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                },
+                {
+                  "list": {
+                    "version": "primary",
+                    "items": ["item 1", "item 2", "item 3"]
+                  }
+                }
+              ],
+              [
+                {
+                  "description": "Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic"
+                }
+              ]
+            ]
+          },
+          {
+            "data": [
+              [
+                {
+                  "label": "Нет"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно"
+                }
+              ],
+              [
+                {
+                  "label": "Есть"
+                }
+              ],
+              [
+                {
+                  "label": "До 20%"
+                }
+              ],
+              [
+                {
+                  "label": "Бесплатно",
+                  "description": "При обороте по карте от 10000 ₽ в месяц"
+                }
+              ],
+              [
+                {
+                  "label": "69 рублей в месяц"
+                }
+              ],
+              [
+                {
+                  "description": "Для членов профсоюзных организаций"
+                }
+              ]
+            ]
+          }
+        ]
+      }
+    },
     {
       "type": "PictureText",
       "style": ["col-span-12"],

package/src/components/ContentPage/ContentPage.tsx

@@ -3,6 +3,7 @@ import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { Placeholder } from '../Placeholder/Placeholder';
+import { ContentPageContext } from './ContentPageContext';
 
 interface BlockDecoratorProps<VNode> {
   blockClassName: string;
@@ -20,12 +21,21 @@ export type JSXBlock = (
   context?: any,
 ) => any;
 
+export type BlocksRegistry = Record<string, JSXBlock>;
+
 export interface ContentPageProps extends UniBlockProps {
-  blocksRegistry: Record<string, JSXBlock>;
+  blocksRegistry: BlocksRegistry;
   data: ContentPageDef;
   blockDecorator?: BlockDecorator;
 }
 
+export interface RenderBlockFunc {
+  block: BlockDef;
+  blockDecorator: BlockDecorator;
+  blocksRegistry: BlocksRegistry;
+  context: ContentPageContext;
+}
+
 const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
   render({ blockClassName, block });
 
@@ -34,14 +44,32 @@ export const ContentPage = JSX<ContentPageProps>(
     className,
     context,
     blocksRegistry,
-    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
+    data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' },
     blockDecorator = defaultBlockDecorator,
   }) => {
+    const { header } = slots;
+
     return (
-      <section className="relative" data-theme={colorPalette}>
-        <div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`}>
-          {blocks?.length ? blocks.map(renderBlock) : null}
-        </div>
+      <section
+        className={`relative ${style2className(pageStyle)} ${className || ''}`}
+        data-theme={colorPalette}
+      >
+        {header?.blocks?.length ? (
+          <div className={`${style2className(header?.style)}`}>
+            {header.blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
+        {blocks?.length ? (
+          <div className="container grid grid-cols-12 gap-1">
+            {blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
         {likeControl && (
           <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
             <LikeControl
@@ -52,39 +80,46 @@ export const ContentPage = JSX<ContentPageProps>(
         )}
       </section>
     );
-
-    function renderBlock(block: BlockDef, i: number) {
-      const { type } = block;
-      if (!(type in blocksRegistry)) {
-        console.warn(`No block with "${type}" is registered`);
-      }
-
-      const BlockComponent = blocksRegistry[type] || Placeholder;
-      return blockDecorator(
-        {
-          blockClassName: style2className(block.style),
-          block,
-          render: (props) => {
-            const { version, content, blocks } = props.block;
-            return (
-              <BlockComponent
-                key={`${type}-${i}`}
-                className={props.blockClassName}
-                version={version}
-                context={context}
-                {...content}
-              >
-                {blocks?.length ? blocks.map(renderBlock) : null}
-              </BlockComponent>
-            );
-          },
-        },
-        `block-${i}`,
-      );
-    }
   },
 );
 
+function renderBlock(
+  { block, blockDecorator, blocksRegistry, context }: RenderBlockFunc,
+  i: number,
+) {
+  const { type } = block;
+  if (!(type in blocksRegistry)) {
+    console.warn(`No block with "${type}" is registered`);
+  }
+
+  const BlockComponent = blocksRegistry[type] || Placeholder;
+  return blockDecorator(
+    {
+      blockClassName: style2className(block.style),
+      block,
+      render: (props) => {
+        const { version, content, blocks } = props.block;
+        return (
+          <BlockComponent
+            key={`${type}-${i}`}
+            className={props.blockClassName}
+            version={version}
+            context={context}
+            {...content}
+          >
+            {blocks?.length
+              ? blocks.map((block, i) =>
+                  renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+                )
+              : null}
+          </BlockComponent>
+        );
+      },
+    },
+    `block-${i}`,
+  );
+}
+
 function style2className(style: string[] | undefined | null): string {
   return style ? style.join(' ') : '';
 }

package/src/components/ContentPage/ContentPageHead.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { ContentPageMeta } from '../../types';
 
 export interface ContentPageHeadProps {
-  HeadComponent: Function;
+  HeadComponent: <Props, Context, VNode>(props: Props, context?: Context) => VNode;
   data: ContentPageMeta;
 }
 

package/src/components/ContentPage/toMobilePage.ts

@@ -1,13 +1,30 @@
 import type { BlockDef, ContentPageDef } from '../../types';
 
 export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
-  const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+  const { blocks, slots } = contentPage;
+
   return {
     ...contentPage,
-    blocks,
+    blocks: getMobileBlocks(blocks),
+    slots:
+      slots &&
+      Object.keys(slots).reduce(
+        (res, key) => ({
+          ...res,
+          [key]: {
+            ...slots[key],
+            blocks: getMobileBlocks(slots[key].blocks),
+          },
+        }),
+        {},
+      ),
   };
 }
 
+function getMobileBlocks(blocks?: BlockDef[]) {
+  return blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+}
+
 function toMobileBlock(block: BlockDef): BlockDef {
   const { mobile } = block;
   if (mobile) {

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -129,7 +129,7 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
               aria-label="Соглашение на обработку персональных данных"
             >
               Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
-              требованиям ФЗ «О персональных данных»
+              требованиям ФЗ «О персональных данных»
             </div>
           </div>
         </div>