@redneckz/wildless-cms-uni-blocks 0.14.814 → 0.14.816

package/src/components/ApplicationForm/ApplicationForm.example.json

@@ -1222,5 +1222,92 @@
         }
       }
     }
+  ],
+  [
+    "Финансовый омбудсмен",
+    {
+      "content": {
+        "version": "primary",
+        "title": "Финансовый омбудсмен",
+        "typeForm": "FINOMBUDSMAN",
+        "endpoint": "lead",
+        "sections": [
+          {
+            "inputs": [
+              {
+                "name": "serviceDirection"
+              },
+              {
+                "name": "surname",
+                "required": true
+              },
+              {
+                "name": "name",
+                "required": true
+              },
+              {
+                "name": "inn",
+                "required": true,
+                "condition": {
+                  "name": "serviceDirection",
+                  "values": ["Юридическое лицо / ИП"]
+                }
+              },
+              {
+                "name": "fullName",
+                "label": "Наименование организации",
+                "condition": {
+                  "name": "serviceDirection",
+                  "values": ["Юридическое лицо / ИП"]
+                }
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "email",
+                "required": true
+              },
+              {
+                "name": "comment",
+                "required": true,
+                "label": "Ваше сообщение",
+                "condition": {
+                  "name": "serviceDirection",
+                  "values": ["Физическое лицо"]
+                }
+              },
+              {
+                "name": "partnerComments",
+                "label": "Ваше сообщение",
+                "required": true,
+                "condition": {
+                  "name": "serviceDirection",
+                  "values": ["Юридическое лицо / ИП"]
+                }
+              }
+            ]
+          },
+          {
+            "inputs": [
+              {
+                "name": "consentDataProcessing",
+                "required": true
+              }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "Согласен на обработку персональных данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
   ]
 ]

package/src/components/ApplicationForm/ApplicationForm.fixture.mobile.tsx

@@ -735,4 +735,64 @@ export default {
       <DialogManager />
     </div>
   ),
+  finOmbudsman: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Финансовый омбудсмен"
+        typeForm="FINOMBUDSMAN"
+        endpoint="lead"
+        sections={[
+          {
+            inputs: [
+              { name: 'serviceDirection' },
+              { name: 'surname', required: true },
+              { name: 'name', required: true },
+              {
+                name: 'inn',
+                required: true,
+                condition: {
+                  name: 'serviceDirection',
+                  values: ['Юридическое лицо / ИП'],
+                },
+              },
+              {
+                name: 'fullName',
+                label: 'Наименование организации',
+                condition: {
+                  name: 'serviceDirection',
+                  values: ['Юридическое лицо / ИП'],
+                },
+              },
+              { name: 'phone', required: true },
+              { name: 'email', required: true },
+              {
+                name: 'comment',
+                required: true,
+                label: 'Ваше сообщение',
+                condition: {
+                  name: 'serviceDirection',
+                  values: ['Физическое лицо'],
+                },
+              },
+              {
+                name: 'partnerComments',
+                required: true,
+                label: 'Ваше сообщение',
+                condition: {
+                  name: 'serviceDirection',
+                  values: ['Юридическое лицо / ИП'],
+                },
+              },
+            ],
+          },
+          { inputs: [{ name: 'consentDataProcessing', required: true }] },
+        ]}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
 };

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -730,4 +730,64 @@ export default {
       <DialogManager />
     </div>
   ),
+  finOmbudsman: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Финансовый омбудсмен"
+        typeForm="FINOMBUDSMAN"
+        endpoint="lead"
+        sections={[
+          {
+            inputs: [
+              { name: 'serviceDirection' },
+              { name: 'surname', required: true },
+              { name: 'name', required: true },
+              {
+                name: 'inn',
+                required: true,
+                condition: {
+                  name: 'serviceDirection',
+                  values: ['Юридическое лицо / ИП'],
+                },
+              },
+              {
+                name: 'fullName',
+                label: 'Наименование организации',
+                condition: {
+                  name: 'serviceDirection',
+                  values: ['Юридическое лицо / ИП'],
+                },
+              },
+              { name: 'phone', required: true },
+              { name: 'email', required: true },
+              {
+                name: 'comment',
+                required: true,
+                label: 'Ваше сообщение',
+                condition: {
+                  name: 'serviceDirection',
+                  values: ['Физическое лицо'],
+                },
+              },
+              {
+                name: 'partnerComments',
+                required: true,
+                label: 'Ваше сообщение',
+                condition: {
+                  name: 'serviceDirection',
+                  values: ['Юридическое лицо / ИП'],
+                },
+              },
+            ],
+          },
+          { inputs: [{ name: 'consentDataProcessing', required: true }] },
+        ]}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
 };

package/src/components/Blocks.mobile.ts

@@ -26,6 +26,7 @@ import { Depository } from './Depository/Depository';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
+import { GalleryLayout } from './GalleryLayout/GalleryLayout';
 import { GrantSupport } from './GrantSupport/GrantSupport';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
@@ -74,6 +75,7 @@ export const Blocks: BlocksRegistry = {
   ErrorBlock,
   ExchangeRateTile,
   Footer,
+  GalleryLayout,
   GrantSupport,
   Header,
   Headline,

package/src/components/Blocks.ts

@@ -28,6 +28,7 @@ import { Depository } from './Depository/Depository';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
+import { GalleryLayout } from './GalleryLayout/GalleryLayout';
 import { GracePeriod } from './GracePeriod/GracePeriod';
 import { GrantSupport } from './GrantSupport/GrantSupport';
 import { Header } from './Header/Header';
@@ -81,6 +82,7 @@ export const Blocks: BlocksRegistry = {
   ErrorBlock,
   ExchangeRateTile,
   Footer,
+  GalleryLayout,
   GracePeriod,
   GrantSupport,
   Header,

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -45,6 +45,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
             headlineVersion="XS"
             isEmbedded={true}
             align={align}
+            className="min-h-24"
           />
         }
         rightImage={

package/src/components/GalleryLayout/GalleryLayout.example.json

@@ -0,0 +1,102 @@
+{
+  "content": {
+    "gap": "L",
+    "version": "primary",
+    "padding": "p-xl"
+  },
+  "blocks": [
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "description": "Описание",
+        "headlineVersion": "XL",
+        "backwardButton": false,
+        "isDotted": true,
+        "buttons": [
+          {
+            "text": "Кнопка",
+            "version": "secondary"
+          }
+        ],
+        "padding": "p-xl",
+        "benefitsVersion": "normal",
+        "benefits": [
+          {
+            "label": "Преимущество №1",
+            "icon": {
+              "icon": "SmallClockIcon"
+            }
+          },
+          {
+            "label": "Преимущество №2",
+            "icon": {
+              "icon": "SignDocsIcon"
+            }
+          }
+        ],
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    }
+  ]
+}

package/src/components/GalleryLayout/GalleryLayout.fixture.tsx

@@ -0,0 +1,61 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { LinkProps } from '../../model/LinkProps';
+import '../../setup-fixture';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { Blocks } from '../Blocks';
+import { PRODUCT_BLOCK_WITH_IMAGE } from '../ProductBlock/ProductBlock.fixture';
+import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
+import { GalleryLayout } from './GalleryLayout';
+
+const options: BlockRendererOptions = {
+  blocksRegistry: Blocks,
+};
+
+const PRODUCT_BLOCK_TYPE = 'ProductBlock';
+
+const CONTENT: ProductBlockContent & UniBlockProps & { link?: LinkProps } = {
+  ...PRODUCT_BLOCK_WITH_IMAGE,
+  version: 'secondary',
+  padding: 'p-xl',
+  imageOptions: {
+    imageAlign: 'end',
+  },
+  className: 'rounded-xl', // for identity with maket
+  link: {
+    href: 'https://google.com',
+  },
+};
+
+const SHORT_TILE_CONTENT: ProductBlockContent & UniBlockProps = {
+  ...CONTENT,
+  image: {
+    ...CONTENT.image,
+    size: {
+      width: 130,
+      height: 130,
+    },
+  },
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <GalleryLayout
+        className="col-span-12"
+        gap="L"
+        padding="p-xl"
+        block={{
+          type: 'GalleryLayout',
+          blocks: [
+            { type: PRODUCT_BLOCK_TYPE, content: CONTENT },
+            { type: PRODUCT_BLOCK_TYPE, content: SHORT_TILE_CONTENT },
+            { type: PRODUCT_BLOCK_TYPE, content: SHORT_TILE_CONTENT },
+            { type: PRODUCT_BLOCK_TYPE, content: SHORT_TILE_CONTENT },
+            { type: PRODUCT_BLOCK_TYPE, content: SHORT_TILE_CONTENT },
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
+};

package/src/components/GalleryLayout/GalleryLayout.tsx

@@ -0,0 +1,140 @@
+import { type JSONSchema7Definition } from 'json-schema';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
+import { type ChildRenderProps } from '../../BlockRenderer/renderBlockList';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import { type BlockDecorator } from '../../model/BlockDecorator';
+import { type BlockDef } from '../../model/ContentPageDef';
+import { type LinkProps } from '../../model/LinkProps';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { getBorderStyle } from '../../utils/getBorderStyle';
+import { getInnerPadding } from '../../utils/getInnerPadding';
+import { style } from '../../utils/style';
+import { gapStyles } from '../HorizontalLayout/gapStyles';
+import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
+import { type GalleryLayoutContent } from './GalleryLayoutContent';
+
+const MIN_LENGTH_CHILD = 5;
+const SHORT_TILE_INDEXES = [1, 2, 3, 4];
+const LINK_SCHEMA: Record<string, JSONSchema7Definition> = {
+  link: {
+    allOf: [
+      { $ref: `#/definitions/LinkCommonProps` },
+      {
+        type: 'object',
+        properties: {
+          data: {
+            type: 'array',
+            items: { $ref: '#/definitions/AspectsDef' },
+            title: 'Дополнительные атрибуты',
+          },
+        },
+      },
+    ],
+    title: 'Ссылка',
+    required: ['href'],
+  },
+};
+
+export interface GalleryLayoutProps extends GalleryLayoutContent, UniBlockProps {}
+
+export const GalleryLayout = UniBlock<GalleryLayoutProps>(
+  ({
+    className = '',
+    padding = 'p-0',
+    gap = '',
+    isInnerPadding = true,
+    version = 'transparent',
+    isTheme = false,
+    isCardBorder = false,
+    ...rest
+  }) => (
+    <BlockWrapper
+      className={style(
+        'grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-4 lg:auto-rows-fr',
+        gapStyles[gap],
+        className,
+      )}
+      padding={padding}
+      version={version}
+      isTheme={isTheme}
+      {...rest}
+    >
+      {renderChildren({
+        ...rest,
+        renderProps: getRenderProps({ isInnerPadding, isCardBorder }),
+      })}
+    </BlockWrapper>
+  ),
+  {
+    childrenTypes: ['ProductBlock'],
+    childSchema: () => LINK_SCHEMA,
+    allowRemoveChild: (slot) => (slot?.blocks ?? []).length > MIN_LENGTH_CHILD,
+  },
+);
+
+const getRenderProps =
+  ({
+    isInnerPadding,
+    isCardBorder,
+  }: {
+    isInnerPadding: boolean;
+    isCardBorder: boolean;
+  }): ChildRenderProps =>
+  (childBlock, childOptions, i) =>
+    renderBlock(
+      childBlock,
+      {
+        ...childOptions,
+        blockDecorator: blockDecoratorWrapper(childOptions.blockDecorator, i),
+      },
+      {
+        className: style('w-full', getBorderStyle(isCardBorder)),
+        ...getInnerPadding(isInnerPadding),
+      },
+    );
+
+const blockDecoratorWrapper =
+  (blockDecorator?: BlockDecorator, idx = 0): BlockDecorator =>
+  (props, i) =>
+    blockDecorator?.(
+      {
+        ...props,
+        render: (renderProps) => productBlockDecorator(idx)({ ...props, ...renderProps }, i),
+      },
+      `wrap_${i}`,
+    ) ?? productBlockDecorator(idx)(props, i);
+
+const productBlockDecorator =
+  (idx: number): BlockDecorator =>
+  ({ blockClassName, block, render }, i) =>
+    (
+      <LinkWrapper key={i} {...block.content?.link} className={getChildStyle(idx)}>
+        {render({
+          blockClassName: style(blockClassName, 'h-full'),
+          block: modifyBlock(block, idx),
+        })}
+      </LinkWrapper>
+    );
+
+const getChildStyle = (index: number) =>
+  SHORT_TILE_INDEXES.includes(index)
+    ? 'lg:col-span-1 lg:row-span-1'
+    : 'lg:col-span-2 lg:row-span-2';
+
+const modifyBlock = (block: BlockDef, i: number) => {
+  const content: ProductBlockContent & { link?: LinkProps } = { ...block.content };
+
+  if (SHORT_TILE_INDEXES.includes(i)) {
+    delete content.description;
+    delete content.benefits;
+  }
+
+  if (content.link?.href) {
+    delete content.buttons;
+  }
+
+  return { ...block, content };
+};

package/src/components/GalleryLayout/GalleryLayout.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/GalleryLayout/GalleryLayoutContent.ts

@@ -0,0 +1,16 @@
+import { type ImageContent } from '../../ui-kit/Img/ImgProps';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+import { type GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
+
+export type LayoutCommitProps = {
+  gap?: GapVersion;
+  /** @title контур на дочерних элементах */
+  isCardBorder?: boolean;
+  /** @title Отступы вложенных компонентов */
+  isInnerPadding?: boolean;
+};
+
+/**
+ * @title Компоновщик галереи
+ */
+export type GalleryLayoutContent = UniBlockContent & LayoutCommitProps & ImageContent;

package/src/model/FormTypeFieldDef.ts

@@ -20,4 +20,5 @@ export type FormTypeFieldDef =
   | 'OUTSERVICE'
   | 'RFB'
   | 'SUPPORT'
-  | 'INVESTADVISER';
+  | 'INVESTADVISER'
+  | 'FINOMBUDSMAN';