@gravity-ui/page-constructor 4.33.0 → 4.34.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/build/cjs/blocks/Form/Form.css +136 -0
  2. package/build/cjs/blocks/Form/Form.d.ts +4 -0
  3. package/build/cjs/blocks/Form/Form.js +59 -0
  4. package/build/cjs/blocks/Form/InnerForm/InnerForm.d.ts +9 -0
  5. package/build/cjs/blocks/Form/InnerForm/InnerForm.js +28 -0
  6. package/build/cjs/blocks/Form/schema.d.ts +202 -0
  7. package/build/cjs/blocks/Form/schema.js +44 -0
  8. package/build/cjs/blocks/index.d.ts +1 -0
  9. package/build/cjs/blocks/index.js +3 -1
  10. package/build/cjs/components/Image/Image.js +2 -2
  11. package/build/cjs/components/YandexForm/YandexForm.d.ts +2 -17
  12. package/build/cjs/components/YandexForm/YandexForm.js +6 -4
  13. package/build/cjs/components/YandexForm/schema.d.ts +16 -0
  14. package/build/cjs/components/YandexForm/schema.js +13 -0
  15. package/build/cjs/constructor-items.d.ts +1 -0
  16. package/build/cjs/constructor-items.js +1 -0
  17. package/build/cjs/editor/data/templates/form-block.json +20 -0
  18. package/build/cjs/models/constructor-items/blocks.d.ts +31 -4
  19. package/build/cjs/models/constructor-items/blocks.js +13 -1
  20. package/build/cjs/models/constructor-items/common.d.ts +17 -1
  21. package/build/cjs/models/guards.d.ts +3 -1
  22. package/build/cjs/models/guards.js +9 -1
  23. package/build/cjs/schema/constants.js +2 -1
  24. package/build/cjs/schema/validators/blocks.d.ts +1 -0
  25. package/build/cjs/schema/validators/blocks.js +1 -0
  26. package/build/cjs/sub-blocks/HubspotForm/schema.d.ts +22 -0
  27. package/build/cjs/sub-blocks/HubspotForm/schema.js +17 -0
  28. package/build/esm/blocks/Form/Form.css +136 -0
  29. package/build/esm/blocks/Form/Form.d.ts +5 -0
  30. package/build/esm/blocks/Form/Form.js +57 -0
  31. package/build/esm/blocks/Form/InnerForm/InnerForm.d.ts +9 -0
  32. package/build/esm/blocks/Form/InnerForm/InnerForm.js +26 -0
  33. package/build/esm/blocks/Form/schema.d.ts +202 -0
  34. package/build/esm/blocks/Form/schema.js +40 -0
  35. package/build/esm/blocks/index.d.ts +1 -0
  36. package/build/esm/blocks/index.js +1 -0
  37. package/build/esm/components/Image/Image.js +2 -3
  38. package/build/esm/components/YandexForm/YandexForm.d.ts +2 -17
  39. package/build/esm/components/YandexForm/YandexForm.js +5 -3
  40. package/build/esm/components/YandexForm/schema.d.ts +16 -0
  41. package/build/esm/components/YandexForm/schema.js +10 -0
  42. package/build/esm/constructor-items.d.ts +1 -0
  43. package/build/esm/constructor-items.js +2 -1
  44. package/build/esm/editor/data/templates/form-block.json +20 -0
  45. package/build/esm/models/constructor-items/blocks.d.ts +31 -4
  46. package/build/esm/models/constructor-items/blocks.js +12 -0
  47. package/build/esm/models/constructor-items/common.d.ts +17 -1
  48. package/build/esm/models/guards.d.ts +3 -1
  49. package/build/esm/models/guards.js +7 -1
  50. package/build/esm/schema/constants.js +3 -2
  51. package/build/esm/schema/validators/blocks.d.ts +1 -0
  52. package/build/esm/schema/validators/blocks.js +1 -0
  53. package/build/esm/sub-blocks/HubspotForm/schema.d.ts +22 -0
  54. package/build/esm/sub-blocks/HubspotForm/schema.js +14 -0
  55. package/package.json +1 -1
  56. package/server/models/constructor-items/blocks.d.ts +31 -4
  57. package/server/models/constructor-items/blocks.js +13 -1
  58. package/server/models/constructor-items/common.d.ts +17 -1
  59. package/server/models/guards.d.ts +3 -1
  60. package/server/models/guards.js +9 -1
  61. package/widget/index.js +1 -1
@@ -0,0 +1,40 @@
1
+ import omit from 'lodash/omit';
2
+ import { ImageProps } from '../../components/Image/schema';
3
+ import { YandexFormProps } from '../../components/YandexForm/schema';
4
+ import { BlockBaseProps } from '../../schema/validators/common';
5
+ import { ContentBase } from '../../sub-blocks/Content/schema';
6
+ import { HubspotFormProps } from '../../sub-blocks/HubspotForm/schema';
7
+ const FormBlockContentProps = omit(ContentBase, ['size', 'centered', 'colSizes']);
8
+ export const FormBlock = {
9
+ 'form-block': {
10
+ additionalProperties: false,
11
+ required: ['formData'],
12
+ properties: Object.assign(Object.assign({}, BlockBaseProps), { title: {
13
+ type: 'string',
14
+ }, formData: {
15
+ oneOf: [
16
+ {
17
+ type: 'object',
18
+ optionName: 'yandex',
19
+ properties: {
20
+ yandex: YandexFormProps,
21
+ },
22
+ },
23
+ {
24
+ type: 'object',
25
+ optionName: 'hubspot',
26
+ properties: {
27
+ hubspot: HubspotFormProps,
28
+ },
29
+ },
30
+ ],
31
+ }, textContent: {
32
+ additionalProperties: false,
33
+ properties: FormBlockContentProps,
34
+ }, direction: {
35
+ enum: ['content-form', 'form-content', 'center'],
36
+ }, image: ImageProps, backgroundColor: {
37
+ type: 'string',
38
+ } }),
39
+ },
40
+ };
@@ -16,3 +16,4 @@ export { default as CardLayoutBlock } from './CardLayout/CardLayout';
16
16
  export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
17
17
  export { default as ShareBlock } from './Share/Share';
18
18
  export { default as FilterBlock } from './FilterBlock/FilterBlock';
19
+ export { default as FormBlock } from './Form/Form';
@@ -16,3 +16,4 @@ export { default as CardLayoutBlock } from './CardLayout/CardLayout';
16
16
  export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
17
17
  export { default as ShareBlock } from './Share/Share';
18
18
  export { default as FilterBlock } from './FilterBlock/FilterBlock';
19
+ export { default as FormBlock } from './Form/Form';
@@ -1,4 +1,3 @@
1
- import { __rest } from "tslib";
2
1
  import React, { Fragment, useContext, useState } from 'react';
3
2
  import { BREAKPOINTS } from '../../constants';
4
3
  import { ProjectSettingsContext } from '../../context/projectSettingsContext';
@@ -13,7 +12,7 @@ const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (React
13
12
  React.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
14
13
  const Image = (props) => {
15
14
  const projectSettings = useContext(ProjectSettingsContext);
16
- const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa } = props, rest = __rest(props, ["src", "alt", "disableCompress", "tablet", "desktop", "mobile", "style", "className", "onClick", "containerClassName", "qa"]);
15
+ const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
17
16
  const [imgLoadingError, setImgLoadingError] = useState(false);
18
17
  const src = imageSrc || desktop;
19
18
  if (!src) {
@@ -28,6 +27,6 @@ const Image = (props) => {
28
27
  mobile && (React.createElement(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })),
29
28
  tablet && (React.createElement(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: BREAKPOINTS.md, qa: qaAttributes.tabletSource })),
30
29
  src && !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })),
31
- React.createElement(ImageBase, Object.assign({ className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) }, rest))));
30
+ React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
32
31
  };
33
32
  export default Image;
@@ -1,20 +1,5 @@
1
- import { PixelEvent } from '../../models';
2
- import { AnalyticsEventsBase } from '../../models/common';
1
+ import { YandexFormProps } from '../../models';
3
2
  export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
4
- export interface YandexFormProps extends AnalyticsEventsBase {
5
- id: number | string;
6
- containerId?: string;
7
- theme?: string;
8
- className?: string;
9
- headerHeight?: number;
10
- customFormOrigin?: string;
11
- params?: {
12
- [key: string]: string;
13
- };
14
- onSubmit?: () => void;
15
- onLoad?: () => void;
16
- metrikaGoals?: string | string[];
17
- pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
18
- }
3
+ export declare const YANDEX_FORM_SECTION = "surveys";
19
4
  declare const YandexForm: (props: YandexFormProps) => JSX.Element;
20
5
  export default YandexForm;
@@ -7,13 +7,15 @@ import { DefaultEventNames } from '../../models/common';
7
7
  import { block } from '../../utils';
8
8
  import { HEADER_HEIGHT } from '../constants';
9
9
  export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
10
+ export const YANDEX_FORM_SECTION = 'surveys';
10
11
  const CONTAINER_ID = 'pc-yandex-form-container';
11
12
  const b = block('yandex-form');
12
13
  const YandexForm = (props) => {
13
- const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
14
+ const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, customFormSection, } = props;
14
15
  const formContainerRef = useRef(null);
15
16
  const iframeRef = useRef();
16
17
  const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;
18
+ const yaFormSection = customFormSection || YANDEX_FORM_SECTION;
17
19
  const handleMetrika = useMetrika();
18
20
  const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);
19
21
  const isMobile = useContext(MobileContext);
@@ -35,7 +37,7 @@ const YandexForm = (props) => {
35
37
  queryParams.set(param, params[param]);
36
38
  });
37
39
  }
38
- const src = `${yaFormOrigin}/surveys/${id}/?${queryParams}`;
40
+ const src = `${yaFormOrigin}/${yaFormSection}/${id}/?${queryParams}`;
39
41
  if (iframeRef.current) {
40
42
  iframeRef.current.src = src;
41
43
  }
@@ -50,7 +52,7 @@ const YandexForm = (props) => {
50
52
  iframeRef.current.width = '100%';
51
53
  container.appendChild(iframeRef.current);
52
54
  }
53
- }, [locale.lang, theme, isMobile, yaFormOrigin, id, containerId, params]);
55
+ }, [locale.lang, theme, isMobile, yaFormOrigin, yaFormSection, id, containerId, params]);
54
56
  const handleSubmit = useCallback(() => {
55
57
  if (formContainerRef && formContainerRef.current) {
56
58
  const { top } = formContainerRef.current.getBoundingClientRect();
@@ -0,0 +1,16 @@
1
+ export declare const YandexFormProps: {
2
+ type: string;
3
+ required: string[];
4
+ properties: {
5
+ id: {
6
+ type: string;
7
+ };
8
+ containerId: {
9
+ type: string;
10
+ };
11
+ type: {};
12
+ when: {
13
+ type: string;
14
+ };
15
+ };
16
+ };
@@ -0,0 +1,10 @@
1
+ import { BaseProps } from '../../schema/validators/common';
2
+ export const YandexFormProps = {
3
+ type: 'object',
4
+ required: ['id'],
5
+ properties: Object.assign(Object.assign({}, BaseProps), { id: {
6
+ type: 'string',
7
+ }, containerId: {
8
+ type: 'string',
9
+ } }),
10
+ };
@@ -17,6 +17,7 @@ export declare const blockMap: {
17
17
  "share-block": ({ items, title }: import("./models").ShareBlockProps) => JSX.Element;
18
18
  "map-block": ({ map, ...props }: import("./models").MapBlockProps) => JSX.Element;
19
19
  "filter-block": import("react").FC<import("./models").FilterBlockProps>;
20
+ "form-block": import("react").FC<import("./models").FormBlockProps>;
20
21
  };
21
22
  export declare const subBlockMap: {
22
23
  divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;
@@ -1,4 +1,4 @@
1
- import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './blocks';
1
+ import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './blocks';
2
2
  import { BlockType, NavigationItemType, SubBlockType } from './models';
3
3
  import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
4
4
  import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
@@ -22,6 +22,7 @@ export const blockMap = {
22
22
  [BlockType.ShareBlock]: ShareBlock,
23
23
  [BlockType.MapBlock]: MapBlock,
24
24
  [BlockType.FilterBlock]: FilterBlock,
25
+ [BlockType.FormBlock]: FormBlock,
25
26
  };
26
27
  export const subBlockMap = {
27
28
  [SubBlockType.Divider]: Divider,
@@ -0,0 +1,20 @@
1
+ {
2
+ "template": {
3
+ "type": "form-block",
4
+ "formData": {
5
+ "yandex": {
6
+ "hash": "hashString",
7
+ "title": ""
8
+ }
9
+ },
10
+ "direction": "center",
11
+ "textContent": {
12
+ "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
13
+ "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
14
+ },
15
+ "image": {
16
+ "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
17
+ },
18
+ "backgroundColor": "#262626"
19
+ }
20
+ }
@@ -3,8 +3,8 @@ import { ButtonSize } from '@gravity-ui/uikit';
3
3
  import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
4
4
  import { ThemeSupporting } from '../../utils';
5
5
  import { AnalyticsEventsBase } from '../common';
6
- import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps } from './common';
7
- import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
6
+ import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
7
+ import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
8
8
  export declare enum BlockType {
9
9
  PromoFeaturesBlock = "promo-features-block",
10
10
  ExtendedFeaturesBlock = "extended-features-block",
@@ -23,7 +23,8 @@ export declare enum BlockType {
23
23
  ContentLayoutBlock = "content-layout-block",
24
24
  ShareBlock = "share-block",
25
25
  MapBlock = "map-block",
26
- FilterBlock = "filter-block"
26
+ FilterBlock = "filter-block",
27
+ FormBlock = "form-block"
27
28
  }
28
29
  export declare const BlockTypes: BlockType[];
29
30
  export declare const HeaderBlockTypes: BlockType[];
@@ -297,6 +298,29 @@ export interface ShareBlockProps {
297
298
  items: PCShareSocialNetwork[];
298
299
  title?: string;
299
300
  }
301
+ export declare enum FormBlockDataTypes {
302
+ YANDEX = "yandex",
303
+ HUBSPOT = "hubspot"
304
+ }
305
+ export declare enum FormBlockDirection {
306
+ FormContent = "form-content",
307
+ ContentForm = "content-form",
308
+ Center = "center"
309
+ }
310
+ export interface FormBlockYandexData {
311
+ yandex: YandexFormProps;
312
+ }
313
+ export interface FormBlockHubspotData {
314
+ hubspot: HubspotFormProps;
315
+ }
316
+ export type FormBlockData = FormBlockYandexData | FormBlockHubspotData;
317
+ export interface FormBlockProps {
318
+ formData: FormBlockData;
319
+ title?: string;
320
+ textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
321
+ direction?: FormBlockDirection;
322
+ background?: BackgroundImageProps;
323
+ }
300
324
  export type HeaderBlockModel = {
301
325
  type: BlockType.HeaderBlock;
302
326
  } & HeaderBlockProps;
@@ -351,6 +375,9 @@ export type ContentLayoutBlockModel = {
351
375
  export type ShareBLockModel = {
352
376
  type: BlockType.ShareBlock;
353
377
  } & ShareBlockProps;
354
- type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | TabsBlockModel | HeaderBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
378
+ export type FormBlockModel = {
379
+ type: BlockType.FormBlock;
380
+ } & FormBlockProps;
381
+ type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | TabsBlockModel | HeaderBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel | FormBlockModel;
355
382
  export type Block = BlockModels & BlockBaseProps;
356
383
  export {};
@@ -18,6 +18,7 @@ export var BlockType;
18
18
  BlockType["ShareBlock"] = "share-block";
19
19
  BlockType["MapBlock"] = "map-block";
20
20
  BlockType["FilterBlock"] = "filter-block";
21
+ BlockType["FormBlock"] = "form-block";
21
22
  })(BlockType || (BlockType = {}));
22
23
  export const BlockTypes = Object.values(BlockType);
23
24
  export const HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];
@@ -41,3 +42,14 @@ export var PCShareSocialNetwork;
41
42
  PCShareSocialNetwork["Facebook"] = "facebook";
42
43
  PCShareSocialNetwork["LinkedIn"] = "linkedin";
43
44
  })(PCShareSocialNetwork || (PCShareSocialNetwork = {}));
45
+ export var FormBlockDataTypes;
46
+ (function (FormBlockDataTypes) {
47
+ FormBlockDataTypes["YANDEX"] = "yandex";
48
+ FormBlockDataTypes["HUBSPOT"] = "hubspot";
49
+ })(FormBlockDataTypes || (FormBlockDataTypes = {}));
50
+ export var FormBlockDirection;
51
+ (function (FormBlockDirection) {
52
+ FormBlockDirection["FormContent"] = "form-content";
53
+ FormBlockDirection["ContentForm"] = "content-form";
54
+ FormBlockDirection["Center"] = "center";
55
+ })(FormBlockDirection || (FormBlockDirection = {}));
@@ -1,7 +1,7 @@
1
1
  import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
2
2
  import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
3
3
  import { ThemeSupporting } from '../../utils';
4
- import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
4
+ import { AnalyticsEventsBase, ClassNameProps, PixelEvent, PixelEventType, QAProps } from '../common';
5
5
  export declare enum AuthorType {
6
6
  Column = "column",
7
7
  Line = "line"
@@ -340,4 +340,20 @@ export interface TitleProps {
340
340
  title?: TitleItemProps | string;
341
341
  subtitle?: string;
342
342
  }
343
+ export interface YandexFormProps extends AnalyticsEventsBase {
344
+ id: number | string;
345
+ containerId?: string;
346
+ theme?: string;
347
+ className?: string;
348
+ headerHeight?: number;
349
+ customFormOrigin?: string;
350
+ customFormSection?: string;
351
+ params?: {
352
+ [key: string]: string;
353
+ };
354
+ onSubmit?: () => void;
355
+ onLoad?: () => void;
356
+ metrikaGoals?: string | string[];
357
+ pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
358
+ }
343
359
  export {};
@@ -1,4 +1,6 @@
1
- import { Block, ConstructorItem } from './';
1
+ import { Block, ConstructorItem, FormBlockData, FormBlockHubspotData, FormBlockYandexData } from './';
2
2
  import { MetrikaGoal, NewMetrikaGoal } from './index';
3
3
  export declare function isBlock(block: ConstructorItem): block is Block;
4
4
  export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
5
+ export declare function isYandexDataForm(data: FormBlockData): data is FormBlockYandexData;
6
+ export declare function isHubspotDataForm(data: FormBlockData): data is FormBlockHubspotData;
@@ -1,7 +1,13 @@
1
- import { BlockTypes } from './';
1
+ import { BlockTypes, } from './';
2
2
  export function isBlock(block) {
3
3
  return block.type in BlockTypes;
4
4
  }
5
5
  export function isNewMetrikaFormat(metrika) {
6
6
  return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
7
7
  }
8
+ export function isYandexDataForm(data) {
9
+ return Boolean(data.yandex);
10
+ }
11
+ export function isHubspotDataForm(data) {
12
+ return Boolean(data.hubspot);
13
+ }
@@ -1,6 +1,6 @@
1
- import { BannerBlock, BannerCard, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './validators/blocks';
1
+ import { BannerBlock, BannerCard, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './validators/blocks';
2
2
  import { BackgroundCard, BasicCard, Divider, MediaCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
3
- export const blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), TableBlock), TabsBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock), FilterBlock);
3
+ export const blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), TableBlock), TabsBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock), FilterBlock), FormBlock);
4
4
  export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard);
5
5
  export const constructorBlockSchemaNames = [
6
6
  'divider',
@@ -27,6 +27,7 @@ export const constructorBlockSchemaNames = [
27
27
  'content-layout-block',
28
28
  'share-block',
29
29
  'filter-block',
30
+ 'form-block',
30
31
  ];
31
32
  export const constructorCardSchemaNames = [
32
33
  'media-card',
@@ -16,3 +16,4 @@ export * from '../../blocks/CardLayout/schema';
16
16
  export * from '../../blocks/ContentLayout/schema';
17
17
  export * from '../../blocks/Share/schema';
18
18
  export * from '../../blocks/FilterBlock/schema';
19
+ export * from '../../blocks/Form/schema';
@@ -16,3 +16,4 @@ export * from '../../blocks/CardLayout/schema';
16
16
  export * from '../../blocks/ContentLayout/schema';
17
17
  export * from '../../blocks/Share/schema';
18
18
  export * from '../../blocks/FilterBlock/schema';
19
+ export * from '../../blocks/Form/schema';
@@ -0,0 +1,22 @@
1
+ export declare const HubspotFormProps: {
2
+ type: string;
3
+ required: string[];
4
+ properties: {
5
+ region: {
6
+ type: string;
7
+ };
8
+ portalId: {
9
+ type: string;
10
+ };
11
+ formId: {
12
+ type: string;
13
+ };
14
+ formInstanceId: {
15
+ type: string;
16
+ };
17
+ type: {};
18
+ when: {
19
+ type: string;
20
+ };
21
+ };
22
+ };
@@ -0,0 +1,14 @@
1
+ import { BaseProps } from '../../schema/validators/common';
2
+ export const HubspotFormProps = {
3
+ type: 'object',
4
+ required: ['portalId', 'formId'],
5
+ properties: Object.assign(Object.assign({}, BaseProps), { region: {
6
+ type: 'string',
7
+ }, portalId: {
8
+ type: 'string',
9
+ }, formId: {
10
+ type: 'string',
11
+ }, formInstanceId: {
12
+ type: 'string',
13
+ } }),
14
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "4.33.0",
3
+ "version": "4.34.1",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -3,8 +3,8 @@ import { ButtonSize } from '@gravity-ui/uikit';
3
3
  import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
4
4
  import { ThemeSupporting } from '../../utils';
5
5
  import { AnalyticsEventsBase } from '../common';
6
- import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps } from './common';
7
- import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
6
+ import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
7
+ import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
8
8
  export declare enum BlockType {
9
9
  PromoFeaturesBlock = "promo-features-block",
10
10
  ExtendedFeaturesBlock = "extended-features-block",
@@ -23,7 +23,8 @@ export declare enum BlockType {
23
23
  ContentLayoutBlock = "content-layout-block",
24
24
  ShareBlock = "share-block",
25
25
  MapBlock = "map-block",
26
- FilterBlock = "filter-block"
26
+ FilterBlock = "filter-block",
27
+ FormBlock = "form-block"
27
28
  }
28
29
  export declare const BlockTypes: BlockType[];
29
30
  export declare const HeaderBlockTypes: BlockType[];
@@ -297,6 +298,29 @@ export interface ShareBlockProps {
297
298
  items: PCShareSocialNetwork[];
298
299
  title?: string;
299
300
  }
301
+ export declare enum FormBlockDataTypes {
302
+ YANDEX = "yandex",
303
+ HUBSPOT = "hubspot"
304
+ }
305
+ export declare enum FormBlockDirection {
306
+ FormContent = "form-content",
307
+ ContentForm = "content-form",
308
+ Center = "center"
309
+ }
310
+ export interface FormBlockYandexData {
311
+ yandex: YandexFormProps;
312
+ }
313
+ export interface FormBlockHubspotData {
314
+ hubspot: HubspotFormProps;
315
+ }
316
+ export type FormBlockData = FormBlockYandexData | FormBlockHubspotData;
317
+ export interface FormBlockProps {
318
+ formData: FormBlockData;
319
+ title?: string;
320
+ textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
321
+ direction?: FormBlockDirection;
322
+ background?: BackgroundImageProps;
323
+ }
300
324
  export type HeaderBlockModel = {
301
325
  type: BlockType.HeaderBlock;
302
326
  } & HeaderBlockProps;
@@ -351,6 +375,9 @@ export type ContentLayoutBlockModel = {
351
375
  export type ShareBLockModel = {
352
376
  type: BlockType.ShareBlock;
353
377
  } & ShareBlockProps;
354
- type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | TabsBlockModel | HeaderBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
378
+ export type FormBlockModel = {
379
+ type: BlockType.FormBlock;
380
+ } & FormBlockProps;
381
+ type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | TabsBlockModel | HeaderBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel | FormBlockModel;
355
382
  export type Block = BlockModels & BlockBaseProps;
356
383
  export {};
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PCShareSocialNetwork = exports.SliderType = exports.SliderBreakpointNames = exports.HeaderBlockTypes = exports.BlockTypes = exports.BlockType = void 0;
3
+ exports.FormBlockDirection = exports.FormBlockDataTypes = exports.PCShareSocialNetwork = exports.SliderType = exports.SliderBreakpointNames = exports.HeaderBlockTypes = exports.BlockTypes = exports.BlockType = void 0;
4
4
  var BlockType;
5
5
  (function (BlockType) {
6
6
  BlockType["PromoFeaturesBlock"] = "promo-features-block";
@@ -21,6 +21,7 @@ var BlockType;
21
21
  BlockType["ShareBlock"] = "share-block";
22
22
  BlockType["MapBlock"] = "map-block";
23
23
  BlockType["FilterBlock"] = "filter-block";
24
+ BlockType["FormBlock"] = "form-block";
24
25
  })(BlockType = exports.BlockType || (exports.BlockType = {}));
25
26
  exports.BlockTypes = Object.values(BlockType);
26
27
  exports.HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];
@@ -44,3 +45,14 @@ var PCShareSocialNetwork;
44
45
  PCShareSocialNetwork["Facebook"] = "facebook";
45
46
  PCShareSocialNetwork["LinkedIn"] = "linkedin";
46
47
  })(PCShareSocialNetwork = exports.PCShareSocialNetwork || (exports.PCShareSocialNetwork = {}));
48
+ var FormBlockDataTypes;
49
+ (function (FormBlockDataTypes) {
50
+ FormBlockDataTypes["YANDEX"] = "yandex";
51
+ FormBlockDataTypes["HUBSPOT"] = "hubspot";
52
+ })(FormBlockDataTypes = exports.FormBlockDataTypes || (exports.FormBlockDataTypes = {}));
53
+ var FormBlockDirection;
54
+ (function (FormBlockDirection) {
55
+ FormBlockDirection["FormContent"] = "form-content";
56
+ FormBlockDirection["ContentForm"] = "content-form";
57
+ FormBlockDirection["Center"] = "center";
58
+ })(FormBlockDirection = exports.FormBlockDirection || (exports.FormBlockDirection = {}));
@@ -1,7 +1,7 @@
1
1
  import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
2
2
  import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
3
3
  import { ThemeSupporting } from '../../utils';
4
- import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
4
+ import { AnalyticsEventsBase, ClassNameProps, PixelEvent, PixelEventType, QAProps } from '../common';
5
5
  export declare enum AuthorType {
6
6
  Column = "column",
7
7
  Line = "line"
@@ -340,4 +340,20 @@ export interface TitleProps {
340
340
  title?: TitleItemProps | string;
341
341
  subtitle?: string;
342
342
  }
343
+ export interface YandexFormProps extends AnalyticsEventsBase {
344
+ id: number | string;
345
+ containerId?: string;
346
+ theme?: string;
347
+ className?: string;
348
+ headerHeight?: number;
349
+ customFormOrigin?: string;
350
+ customFormSection?: string;
351
+ params?: {
352
+ [key: string]: string;
353
+ };
354
+ onSubmit?: () => void;
355
+ onLoad?: () => void;
356
+ metrikaGoals?: string | string[];
357
+ pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
358
+ }
343
359
  export {};
@@ -1,4 +1,6 @@
1
- import { Block, ConstructorItem } from './';
1
+ import { Block, ConstructorItem, FormBlockData, FormBlockHubspotData, FormBlockYandexData } from './';
2
2
  import { MetrikaGoal, NewMetrikaGoal } from './index';
3
3
  export declare function isBlock(block: ConstructorItem): block is Block;
4
4
  export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
5
+ export declare function isYandexDataForm(data: FormBlockData): data is FormBlockYandexData;
6
+ export declare function isHubspotDataForm(data: FormBlockData): data is FormBlockHubspotData;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.isNewMetrikaFormat = exports.isBlock = void 0;
3
+ exports.isHubspotDataForm = exports.isYandexDataForm = exports.isNewMetrikaFormat = exports.isBlock = void 0;
4
4
  const _1 = require("./");
5
5
  function isBlock(block) {
6
6
  return block.type in _1.BlockTypes;
@@ -10,3 +10,11 @@ function isNewMetrikaFormat(metrika) {
10
10
  return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
11
11
  }
12
12
  exports.isNewMetrikaFormat = isNewMetrikaFormat;
13
+ function isYandexDataForm(data) {
14
+ return Boolean(data.yandex);
15
+ }
16
+ exports.isYandexDataForm = isYandexDataForm;
17
+ function isHubspotDataForm(data) {
18
+ return Boolean(data.hubspot);
19
+ }
20
+ exports.isHubspotDataForm = isHubspotDataForm;