@gravity-ui/page-constructor 4.51.2-alpha.0 → 4.53.0

package/build/esm/models/common.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { MetrikaGoal } from './';
 export interface Refable<T> {
     ref?: React.Ref<T>;
 }
@@ -7,9 +8,59 @@ export declare enum Theme {
     Dark = "dark"
 }
 export declare const themeNames: Record<Theme, string>;
+/**
+ * @deprecated Pixel will be deleted
+ */
+type PixelCommand = 'track' | 'trackCustom';
+/**
+ * @deprecated Pixel will be deleted
+ */
+export interface PixelEvent {
+    command: PixelCommand;
+    event: PixelEventType | string;
+    data?: Object;
+}
+/**
+ * @deprecated Pixel will be deleted from package
+ */
+export declare enum PixelEventType {
+    AddPaymentInfo = "AddPaymentInfo",
+    AddToCart = "AddToCart",
+    AddToWishlist = "AddToWishlist",
+    CompleteRegistration = "CompleteRegistration",
+    Contact = "Contact",
+    CustomizeProduct = "CustomizeProduct",
+    Donate = "Donate",
+    FindLocation = "FindLocation",
+    InitiateCheckout = "InitiateCheckout",
+    Lead = "Lead",
+    PageView = "PageView",
+    Purchase = "Purchase",
+    Schedule = "Schedule",
+    Search = "Search",
+    StartTrial = "StartTrial",
+    SubmitApplication = "SubmitApplication",
+    Subscribe = "Subscribe",
+    ViewContent = "ViewContent"
+}
 export type Modifiers = {
     [name: string]: string | boolean | undefined;
 };
+/**
+ * @deprecated Pixel will be deleted
+ */
+export interface Pixel<TEvent = string> {
+    trackStandard: (event: TEvent, data?: Object) => void;
+    trackCustom: (event: string, data?: Object) => void;
+    track: (trackEvents: string | string[] | PixelEvent[] | PixelEvent) => void;
+}
+/**
+ * @deprecated Metrika will be deleted
+ */
+export interface Metrika {
+    reachGoal: (counterName: string, ...args: any) => void;
+    reachGoals: (goals: MetrikaGoal, counterName?: string) => void;
+}
 export interface ClassNameProps {
     className?: string;
 }
@@ -46,7 +97,7 @@ export type AnalyticsEvent<T = {}> = T & {
     context?: string;
     target?: string;
 };
-export type AnalyticsEventsProp = AnalyticsEvent | AnalyticsEvent[];
 export interface AnalyticsEventsBase {
-    analyticsEvents?: AnalyticsEventsProp;
+    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
 }
+export {};

package/build/esm/models/common.js

@@ -7,6 +7,30 @@ export const themeNames = {
     [Theme.Light]: 'Light',
     [Theme.Dark]: 'Dark',
 };
+/**
+ * @deprecated Pixel will be deleted from package
+ */
+export var PixelEventType;
+(function (PixelEventType) {
+    PixelEventType["AddPaymentInfo"] = "AddPaymentInfo";
+    PixelEventType["AddToCart"] = "AddToCart";
+    PixelEventType["AddToWishlist"] = "AddToWishlist";
+    PixelEventType["CompleteRegistration"] = "CompleteRegistration";
+    PixelEventType["Contact"] = "Contact";
+    PixelEventType["CustomizeProduct"] = "CustomizeProduct";
+    PixelEventType["Donate"] = "Donate";
+    PixelEventType["FindLocation"] = "FindLocation";
+    PixelEventType["InitiateCheckout"] = "InitiateCheckout";
+    PixelEventType["Lead"] = "Lead";
+    PixelEventType["PageView"] = "PageView";
+    PixelEventType["Purchase"] = "Purchase";
+    PixelEventType["Schedule"] = "Schedule";
+    PixelEventType["Search"] = "Search";
+    PixelEventType["StartTrial"] = "StartTrial";
+    PixelEventType["SubmitApplication"] = "SubmitApplication";
+    PixelEventType["Subscribe"] = "Subscribe";
+    PixelEventType["ViewContent"] = "ViewContent";
+})(PixelEventType || (PixelEventType = {}));
 export var PredefinedEventTypes;
 (function (PredefinedEventTypes) {
     PredefinedEventTypes["Default"] = "default-event";

package/build/esm/models/constructor-items/common.d.ts

@@ -1,7 +1,7 @@
 import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils';
-import { AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps } from '../common';
+import { AnalyticsEventsBase, ClassNameProps, PixelEvent, PixelEventType, QAProps } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -62,6 +62,7 @@ export type ContentSize = 's' | 'l';
 export type ContentTextSize = 's' | 'm' | 'l';
 export type ContentTheme = 'default' | 'dark' | 'light';
 export type FileLinkType = 'vertical' | 'horizontal';
+export type ImageCardMargins = 's' | 'm';
 export interface Themable {
     theme?: TextTheme;
 }
@@ -124,6 +125,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
     customControlsOptions?: CustomControlsOptions;
+    metrika?: MetrikaVideo;
     ariaLabel?: string;
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
@@ -135,6 +137,8 @@ export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     colorTheme?: TextTheme;
     arrow?: boolean;
     target?: string;
+    metrikaGoals?: MetrikaGoal;
+    pixelEvents?: ButtonPixel;
     extraProps?: HTMLProps<HTMLAnchorElement>;
 }
 export interface FileLinkProps extends ClassNameProps, Tabbable {
@@ -155,6 +159,8 @@ export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps,
     primary?: boolean;
     theme?: ButtonTheme;
     img?: ButtonImageProps | string;
+    metrikaGoals?: MetrikaGoal;
+    pixelEvents?: ButtonPixel;
     target?: string;
 }
 export type ButtonImagePosition = 'left' | 'right';
@@ -178,6 +184,7 @@ export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
     ratio?: number;
+    metrika?: MetrikaVideo;
     previewImg?: string;
 }
 export interface MediaComponentYoutubeProps {
@@ -231,6 +238,23 @@ export interface YMapMarkerLabel {
 }
 export type MapProps = GMapProps | YMapProps;
 export type ThemedMediaProps = ThemeSupporting<MediaProps>;
+export interface NewMetrikaGoal {
+    name: string;
+    isCrossSite?: boolean;
+    counterName?: string;
+    params?: Record<string, string>;
+}
+export type MetrikaGoal = string | string[] | NewMetrikaGoal[];
+export interface MetrikaVideo {
+    counterName?: string;
+    play?: MetrikaGoal;
+    stop?: MetrikaGoal;
+}
+export interface ButtonPixelEvent {
+    name: PixelEventType;
+    data?: Object;
+}
+export type ButtonPixel = ButtonPixelEvent[];
 export interface DataLensObjectProps {
     id: string;
     theme: 'dark' | 'light';
@@ -255,7 +279,8 @@ export interface HeaderBreadCrumbsProps extends ClassNameProps {
         text: ReactNode;
     }[];
     theme?: TextTheme;
-    analyticsEvents?: AnalyticsEventsProp;
+    metrikaGoals?: MetrikaGoal;
+    pixelEvents?: ButtonPixel;
 }
 export interface TitleItemProps extends Justifyable, TitleItemBaseProps {
     navTitle?: string;
@@ -344,6 +369,8 @@ export interface YandexFormProps extends AnalyticsEventsBase {
     };
     onSubmit?: () => void;
     onLoad?: () => void;
+    metrikaGoals?: string | string[];
+    pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
 }
 export interface WithBorder {
     border?: MediaBorder;

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -1,9 +1,9 @@
 import { ClassNameProps, QuoteType } from '../../models';
 import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
-import { AnalyticsEventsBase } from '../common';
+import { AnalyticsEventsBase, PixelEvent } from '../common';
 import { ContentBlockProps } from './blocks';
-import { AuthorItem, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
+import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageCardMargins, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -22,7 +22,8 @@ export declare enum SubBlockType {
      * @deprecated Will be removed, use BasicCard instead
      */
     Card = "card",
-    PriceCard = "price-card"
+    PriceCard = "price-card",
+    ImageCard = "image-card"
 }
 export declare enum IconPosition {
     Top = "top",
@@ -35,6 +36,10 @@ export interface PositionedIcon {
 export interface IconWrapperProps {
     icon?: PositionedIcon;
 }
+export declare enum ImageCardDirection {
+    Direct = "direct",
+    Reverse = "reverse"
+}
 export declare const SubBlockTypes: SubBlockType[];
 export interface DividerProps {
     size?: DividerSize;
@@ -65,6 +70,7 @@ export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsB
      * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame
      */
     onLoad?: (arg: HubspotEventData) => void;
+    pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
     createDOMElement?: boolean;
 }
@@ -136,6 +142,13 @@ export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     fullscreen?: boolean;
     icon?: PositionedIcon;
 }
+export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
+    image: ImageProps;
+    enableImageBorderRadius?: boolean;
+    margins?: ImageCardMargins;
+    direction?: ImageCardDirection;
+    backgroundColor?: string;
+}
 export type DividerModel = {
     type: SubBlockType.Divider;
 } & DividerProps;
@@ -166,5 +179,8 @@ export type BasicCardModel = {
 export type PriceCardModel = {
     type: SubBlockType.PriceCard;
 } & PriceCardProps;
-export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel;
+export type ImageCardModel = {
+    type: SubBlockType.ImageCard;
+} & ImageCardProps;
+export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel | ImageCardModel;
 export type SubBlock = SubBlockModels;

package/build/esm/models/constructor-items/sub-blocks.js

@@ -18,10 +18,16 @@ export var SubBlockType;
      */
     SubBlockType["Card"] = "card";
     SubBlockType["PriceCard"] = "price-card";
+    SubBlockType["ImageCard"] = "image-card";
 })(SubBlockType || (SubBlockType = {}));
 export var IconPosition;
 (function (IconPosition) {
     IconPosition["Top"] = "top";
     IconPosition["Left"] = "left";
 })(IconPosition || (IconPosition = {}));
+export var ImageCardDirection;
+(function (ImageCardDirection) {
+    ImageCardDirection["Direct"] = "direct";
+    ImageCardDirection["Reverse"] = "reverse";
+})(ImageCardDirection || (ImageCardDirection = {}));
 export const SubBlockTypes = Object.values(SubBlockType);

package/build/esm/models/guards.d.ts

@@ -1,4 +1,6 @@
 import { Block, ConstructorItem, FormBlockData, FormBlockHubspotData, FormBlockYandexData } from './';
+import { MetrikaGoal, NewMetrikaGoal } from './index';
 export declare function isBlock(block: ConstructorItem): block is Block;
+export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
 export declare function isYandexDataForm(data: FormBlockData): data is FormBlockYandexData;
 export declare function isHubspotDataForm(data: FormBlockData): data is FormBlockHubspotData;

package/build/esm/models/guards.js

@@ -2,6 +2,9 @@ import { BlockTypes, } from './';
 export function isBlock(block) {
     return block.type in BlockTypes;
 }
+export function isNewMetrikaFormat(metrika) {
+    return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
+}
 export function isYandexDataForm(data) {
     return Boolean(data.yandex);
 }

package/build/esm/schema/constants.d.ts

@@ -1,6 +1,82 @@
 import { BlockType } from '../models';
 export declare const blockSchemas: Record<BlockType, object>;
 export declare const cardSchemas: {
+    'image-card': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            image: {
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
+            };
+            direction: {
+                type: string;
+                enum: string[];
+            };
+            margins: {
+                type: string;
+                enum: string[];
+            };
+            backgroundColor: {
+                type: string;
+            };
+            title: {
+                oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        urlTitle: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                    contentType?: undefined;
+                })[];
+            };
+            text: {
+                type: string;
+                contentType: string;
+                inputType: string;
+            };
+            border: {
+                type: string;
+                enum: string[];
+            };
+            type: {};
+            when: {
+                type: string;
+            };
+        };
+    };
     'price-card': {
         additionalProperties: boolean;
         required: string[];
@@ -78,6 +154,94 @@ export declare const cardSchemas: {
                                 optionName: string;
                             })[];
                         };
+                        metrikaGoals: {
+                            oneOf: ({
+                                type: string;
+                                optionName: string;
+                                items?: undefined;
+                            } | {
+                                type: string;
+                                items: {
+                                    type: string;
+                                    additionalProperties?: undefined;
+                                    required?: undefined;
+                                    properties?: undefined;
+                                };
+                                optionName: string;
+                            } | {
+                                type: string;
+                                items: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: string[];
+                                    properties: {
+                                        name: {
+                                            type: string;
+                                        };
+                                        isCrossSite: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                                optionName: string;
+                            })[];
+                        };
+                        pixelEvents: {
+                            type: string;
+                            items: {
+                                type: string;
+                                required: string[];
+                                additionalProperties: boolean;
+                                properties: {
+                                    name: {
+                                        type: string;
+                                        enum: import("../models").PixelEventType[];
+                                    };
+                                    data: {};
+                                };
+                                select: {
+                                    $data: string;
+                                };
+                                selectCases: {
+                                    SubmitApplication: {
+                                        additionalProperties: boolean;
+                                        properties: {
+                                            name: {};
+                                        };
+                                    };
+                                    Contact: {
+                                        additionalProperties: boolean;
+                                        properties: {
+                                            name: {};
+                                        };
+                                    };
+                                    Lead: {
+                                        additionalProperties: boolean;
+                                        properties: {
+                                            name: {};
+                                            data: {
+                                                type: string;
+                                                additionalProperties: boolean;
+                                                properties: {
+                                                    content_category: {
+                                                        type: string;
+                                                    };
+                                                    content_name: {
+                                                        type: string;
+                                                    };
+                                                    currency: {
+                                                        type: string;
+                                                    };
+                                                    value: {
+                                                        type: string;
+                                                    };
+                                                };
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        };
                         analyticsEvents: {
                             oneOf: ({
                                 optionName: string;
@@ -978,6 +1142,94 @@ export declare const cardSchemas: {
                             optionName: string;
                         })[];
                     };
+                    metrikaGoals: {
+                        oneOf: ({
+                            type: string;
+                            optionName: string;
+                            items?: undefined;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties?: undefined;
+                                required?: undefined;
+                                properties?: undefined;
+                            };
+                            optionName: string;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    isCrossSite: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            optionName: string;
+                        })[];
+                    };
+                    pixelEvents: {
+                        type: string;
+                        items: {
+                            type: string;
+                            required: string[];
+                            additionalProperties: boolean;
+                            properties: {
+                                name: {
+                                    type: string;
+                                    enum: import("../models").PixelEventType[];
+                                };
+                                data: {};
+                            };
+                            select: {
+                                $data: string;
+                            };
+                            selectCases: {
+                                SubmitApplication: {
+                                    additionalProperties: boolean;
+                                    properties: {
+                                        name: {};
+                                    };
+                                };
+                                Contact: {
+                                    additionalProperties: boolean;
+                                    properties: {
+                                        name: {};
+                                    };
+                                };
+                                Lead: {
+                                    additionalProperties: boolean;
+                                    properties: {
+                                        name: {};
+                                        data: {
+                                            type: string;
+                                            additionalProperties: boolean;
+                                            properties: {
+                                                content_category: {
+                                                    type: string;
+                                                };
+                                                content_name: {
+                                                    type: string;
+                                                };
+                                                currency: {
+                                                    type: string;
+                                                };
+                                                value: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        };
+                    };
                     analyticsEvents: {
                         oneOf: ({
                             optionName: string;

package/build/esm/schema/constants.js

@@ -1,7 +1,7 @@
 import { BannerBlock, BannerCard, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './validators/blocks';
-import { BackgroundCard, BasicCard, Divider, MediaCardBlock, PriceCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
+import { BackgroundCard, BasicCard, Divider, ImageCard, MediaCardBlock, PriceCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
 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);
-export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard), PriceCardBlock);
+export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard), PriceCardBlock), ImageCard);
 export const constructorBlockSchemaNames = [
     'divider',
     'quote',
@@ -38,4 +38,5 @@ export const constructorCardSchemaNames = [
     'basic-card',
     'layout-item',
     'price-card',
+    'image-card',
 ];