@redneckz/wildless-cms-uni-blocks 0.2.109 → 0.2.113

package/mobile/src/components/ComparisonTable/TableRow.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Row } from './ComparisonTableContent';
+import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { TableCarouselContainer } from './TableCarouselContainer';
+import { TableCell } from './TableCell';
+import { TableRowContainer } from './TableRowContainer';
+
+export interface TableRowProps {
+  className?: string;
+  row: Row;
+  activeCardIndex: number;
+  isColoredFirstColumn: boolean;
+  isFirstRow: boolean;
+  isLastRow: boolean;
+}
+
+export const TableRow = JSX<TableRowProps>(
+  ({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
+    <TableRowContainer>
+      {header?.title ? (
+        <div
+          className={`text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
+            !isLastRow ? 'border-solid' : ''
+          }`}
+        >
+          {header.title}
+        </div>
+      ) : null}
+      {data?.length ? (
+        <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
+          {data.map((cell, i) => (
+            <TableCell
+              key={String(i)}
+              cell={cell}
+              isFirstRow={isFirstRow}
+              isLastRow={isLastRow}
+              isFillGradient={isColoredFirstColumn && i === 0}
+            />
+          ))}
+        </TableCarouselContainer>
+      ) : null}
+    </TableRowContainer>
+  ),
+);

package/mobile/src/components/ComparisonTable/TableRowContainer.tsx

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export const TableRowContainer = JSX(({ children }) => (
+  <div className="self-start flex flex-col" role="row">
+    <div className="flex">{children}</div>
+  </div>
+));

package/mobile/src/components/ComparisonTable/constants.ts

@@ -0,0 +1,6 @@
+export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+export const BORDER_CLASSES = 'border-main-stroke border-solid border';
+export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+export const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
+export const COLS_LENGTH_FOR_SCROLL = 2;
+export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

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

@@ -0,0 +1,452 @@
+{
+  "title": "Кредиты",
+  "slug": "credits",
+  "description": "Акционерное общество «Российский Сельскохозяйственный банк»* — один из крупнейших банков в России. Созданный в 2000 году в целях развития национальной кредитно-финансовой системы.",
+  "keywords": ["кредит", "акция"],
+  "robots": ["index", "follow"],
+  "og": {
+    "type": "article",
+    "url": "https://foo.com/bar/baz"
+  },
+  "date": "2022-04-08",
+  "style": ["bg-secondary-light"],
+  "likeControl": true,
+  "slots": {
+    "header": {
+      "style": ["mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
+      "blocks": [
+        {
+          "type": "Header",
+          "content": {
+            "defaultLocation": "Москва"
+          }
+        }
+      ]
+    }
+  },
+  "blocks": [
+    {
+      "type": "ProductGallery",
+      "style": ["col-span-12"],
+      "content": {
+        "slides": [
+          {
+            "nav": {
+              "title": "Деньги на любые цели",
+              "desc": "Ставка от 12,5% годовых на срок до 5 лет"
+            },
+            "productBlock": {
+              "title": "Ставка от 12,5% годовых на срок до 5 лет!»",
+              "items": [
+                "Потребительский кредит по специальной процентной ставке",
+                "Получите деньги без залога и поручительства",
+                "Кредитный лимит до 5 млн рублей"
+              ],
+              "buttons": [
+                {
+                  "href": "https://rshb.ru",
+                  "text": "Подробнее",
+                  "target": "_blank",
+                  "version": "primary"
+                }
+              ],
+              "image": {
+                "src": "money-1.png",
+                "title": "деньги",
+                "format": "webp",
+                "alt": "Кредит наличными",
+                "size": {
+                  "width": 280,
+                  "height": 280
+                }
+              }
+            }
+          },
+          {
+            "nav": {
+              "title": "Для людей в возрасте",
+              "desc": "Ставка от 12,5% годовых на срок до 3 лет"
+            },
+            "productBlock": {
+              "title": "Ставка от 12,5% годовых на срок до 3 лет!»",
+              "items": [
+                "Потребительский кредит по специальной процентной ставке",
+                "Получите деньги без залога и поручительства",
+                "Кредитный лимит до 5 млн рублей"
+              ],
+              "buttons": [
+                {
+                  "href": "https://rshb.ru",
+                  "text": "Подробнее",
+                  "target": "_blank",
+                  "version": "primary"
+                }
+              ],
+              "image": {
+                "src": "money-2.png",
+                "title": "Деньги",
+                "format": "webp",
+                "alt": "Кредит наличными",
+                "size": {
+                  "width": 280,
+                  "height": 280
+                }
+              }
+            }
+          },
+          {
+            "nav": {
+              "title": "Выгодно покупать",
+              "desc": "Дополнительные бонусные баллы за покупки"
+            },
+            "productBlock": {
+              "title": "Дополнительные бонусные баллы за покупки!»",
+              "buttons": [
+                {
+                  "href": "https://rshb.ru",
+                  "text": "Подробнее",
+                  "target": "_blank",
+                  "version": "primary"
+                }
+              ],
+              "image": {
+                "src": "credit-card-1.png",
+                "title": "Кредитка",
+                "format": "webp",
+                "alt": "Кредит наличными",
+                "size": {
+                  "width": 280,
+                  "height": 280
+                }
+              }
+            }
+          },
+          {
+            "nav": {
+              "title": "Карты Unionpay",
+              "desc": "Кэшбэк до 20% у партнеров"
+            },
+            "productBlock": {
+              "title": "Карты Unionpay»",
+              "items": [
+                "Потребительский кредит по специальной процентной ставке",
+                "Получите деньги без залога и поручительства",
+                "Кредитный лимит до 5 млн рублей"
+              ],
+              "buttons": [
+                {
+                  "href": "https://rshb.ru",
+                  "text": "Подробнее",
+                  "target": "_blank",
+                  "version": "primary"
+                }
+              ],
+              "image": {
+                "src": "credit-card-1.png",
+                "title": "Кредитка",
+                "format": "webp",
+                "alt": "Кредит наличными",
+                "size": {
+                  "width": 280,
+                  "height": 280
+                }
+              }
+            }
+          }
+        ]
+      }
+    },
+    {
+      "type": "Unknown",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Какой то новый блок"
+      }
+    },
+    {
+      "type": "ProductBlock",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Потребительский кредит наличными",
+        "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
+        "breadcrumbs": [
+          {
+            "text": "Главная",
+            "href": "/"
+          },
+          {
+            "text": "Кредитные карты",
+            "href": "/credit"
+          },
+          {
+            "text": "Кредитная карта Своя Union Pay"
+          }
+        ],
+        "benefits": [
+          {
+            "label": "До 5 млн ₽",
+            "description": "Кредитный лимит",
+            "icon": "EmptyWalletIcon"
+          },
+          {
+            "label": "От 16,9%",
+            "description": "Ставка по кредиту",
+            "icon": "PercentageSquareIcon"
+          },
+          {
+            "label": "До 5 лет",
+            "description": "Срок кредитования",
+            "icon": "CalendarIcon"
+          }
+        ],
+        "buttons": [
+          {
+            "href": "https://rshb.ru",
+            "text": "Оформить карту",
+            "target": "_blank",
+            "version": "primary"
+          },
+          {
+            "href": "https://rshb.ru",
+            "text": "Подробнее",
+            "target": "_blank",
+            "version": "secondary"
+          }
+        ],
+        "image": {
+          "src": "money-1.png",
+          "alt": "Кредиты в РСХБ",
+          "format": "webp",
+          "size": {
+            "width": 280,
+            "height": 280
+          }
+        }
+      }
+    },
+    {
+      "type": "StepsBlock",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит",
+        "steps": [
+          {
+            "label": "Заявка на кредит",
+            "description": "Оставьте онлайн-заявку на потребительский кредит"
+          },
+          {
+            "label": "В случае одобрения",
+            "description": "Менеджер свяжется с вами и согласует встречу"
+          },
+          {
+            "label": "Получение наличных",
+            "description": "Получите наличные в отделении банка"
+          }
+        ]
+      }
+    },
+    {
+      "type": "TextBlock",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Все карты Россельхозбанка работают",
+        "description": "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
+        "blockVersion": "primary",
+        "iconVersion": "small"
+      }
+    },
+    {
+      "type": "Headline",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Своя кредитная карта",
+        "description": "Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.",
+        "align": "center",
+        "bgColor": "transparent"
+      }
+    },
+    {
+      "type": "Footer",
+      "style": ["col-span-12"],
+      "content": {
+        "topItems": [
+          {
+            "href": "https://rshb.ru/",
+            "text": "Частным клиентам",
+            "target": "_blank",
+            "items": [
+              {
+                "href": "https://rshb.ru/",
+                "text": "Кредитные карты"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Дебетовые карты"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Кредиты"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Ипотека"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Вклады и сбережения"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Инвестиции"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Страхование"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Премиальным клиентам"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Биометрическая регистрация"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Перевод денег"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Обмен денег"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Акции"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Тарифы"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Архивная информация"
+              }
+            ]
+          },
+          {
+            "href": "https://rshb.ru/",
+            "text": "Бизнес клиентам",
+            "target": "_blank",
+            "items": [
+              {
+                "href": "https://rshb.ru/",
+                "text": "РКО"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Кредиты"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Депозиты"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Эквайринг"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Банковские карты"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "ВЭД"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Инвестиции"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Обмен валюты"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Страхование"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Партнёрские программы"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Онлайн-сервисы"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Акции"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Тарифы"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Архивная информация"
+              }
+            ]
+          }
+        ],
+        "contacts": [
+          {
+            "text": "+7 (495) 787-7-787",
+            "description": "Для звонков из-за границы",
+            "type": "tel"
+          },
+          {
+            "text": "example@example.com",
+            "description": "Для писем",
+            "type": "email"
+          },
+          {
+            "text": "7787",
+            "description": "Абонентам МТС, Мегафон, Билайн и Tele2",
+            "type": "tel"
+          }
+        ],
+        "documents": [
+          {
+            "text": "Информация о процентных ставках по договорам банковского вклада с физическими лицами",
+            "href": "https://rshb.ru/",
+            "target": "_blank"
+          },
+          {
+            "text": "Раскрытие информации профессиональным участником рынка ценных бумаг",
+            "href": "https://rshb.ru/",
+            "target": "_blank"
+          },
+          {
+            "text": "Раскрытие информации",
+            "href": "https://rshb.ru/",
+            "target": "_blank"
+          },
+          {
+            "text": "Удостоверяющий центр",
+            "href": "https://rshb.ru/",
+            "target": "_blank"
+          },
+          {
+            "text": "Финансовая культура",
+            "href": "https://rshb.ru/",
+            "target": "_blank"
+          }
+        ],
+        "socialMedia": [
+          { "href": "https://vk.com" },
+          { "href": "https://ok.ru" },
+          { "href": "https://t.me" }
+        ]
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,125 @@
+import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
+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;
+  block: BlockDef;
+  render: (props: { blockClassName: string; block: BlockDef }) => VNode;
+}
+
+export type BlockDecorator<VNode = any> = (
+  props: BlockDecoratorProps<VNode>,
+  index?: number | string,
+) => any;
+
+export type JSXBlock = (
+  props: PropsWithChildren<UniBlockProps & BlockContent, any>,
+  context?: any,
+) => any;
+
+export type BlocksRegistry = Record<string, JSXBlock>;
+
+export interface ContentPageProps extends UniBlockProps {
+  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 });
+
+export const ContentPage = JSX<ContentPageProps>(
+  ({
+    className,
+    context,
+    blocksRegistry,
+    data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' },
+    blockDecorator = defaultBlockDecorator,
+  }) => {
+    const { header } = slots;
+
+    return (
+      <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
+              className="rounded-tl-lg sticky bottom-0 pointer-events-auto"
+              context={context}
+            />
+          </div>
+        )}
+      </section>
+    );
+  },
+);
+
+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/mobile/src/components/ContentPage/ContentPageContext.tsx

@@ -0,0 +1,37 @@
+export interface Router {
+  pathname: string;
+  query: Record<string, string | string[] | undefined>;
+  href?: string;
+  basePath?: string;
+  push: (url: string) => void;
+}
+
+export interface LikeService {
+  likeCount: number;
+  like: () => void;
+  dislike: () => void;
+}
+
+export type HandlerDecorator = <F extends Function>(handler: F, targetContent: any) => F;
+
+export interface Search {
+  term: string;
+  setTerm: (t: string) => void;
+}
+
+export type AsyncDataHook = <Data, Error = any>(
+  key: string,
+  fetcher: () => Promise<Data>,
+) => { data?: Data; error?: Error };
+
+export type GeolocationHook = (defaultLocation: string) => [string, () => void];
+
+export interface ContentPageContext {
+  useRouter: () => Router;
+  useState: <State>(initialState: State) => [State, (_: State) => void];
+  useAsyncData: AsyncDataHook;
+  useGeolocation: GeolocationHook;
+  useLikeService: () => LikeService;
+  useSearch: () => Search;
+  handlerDecorator?: HandlerDecorator;
+}