@gravity-ui/page-constructor 1.14.0 → 1.15.0-alpha.0

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -9,6 +9,7 @@ import { VideoContext } from '../../context/videoContext';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { PlayVideo } from '../../icons';
+import { useAnalytics } from '../../hooks';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
@@ -16,7 +17,7 @@ const FPS = 60;
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
     const { metrika } = useContext(MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -31,6 +32,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [started, setStarted] = useState(autoPlay);
     const [paused, setPaused] = useState(false);
     const [ended, setEnded] = useState(false);
+    const handleAnalytics = useAnalytics();
     useImperativeHandle(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -79,6 +81,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
+    const playEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'play'), [analyticsEvents]);
+    const stopEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'stop'), [analyticsEvents]);
     const playIcon = useMemo(() => {
         let playButtonContent;
         switch (type) {
@@ -104,12 +108,27 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(goal, counterName);
             }
         }
+        if (handleAnalytics && analyticsEvents) {
+            const events = isMuted ? playEvents : stopEvents;
+            if (events) {
+                handleAnalytics(events);
+            }
+        }
         if (isMuted) {
             setProps({ playingVideoRef: ref.current });
         }
         // In order to the progress bar to update (equals 0) before displaying
         setTimeout(() => setMuted(!isMuted), 0);
-    }, [playerRef, setProps, videoMetrika, metrika]);
+    }, [
+        playerRef,
+        metrika,
+        videoMetrika,
+        handleAnalytics,
+        analyticsEvents,
+        playEvents,
+        stopEvents,
+        setProps,
+    ]);
     const handleClick = useCallback(() => changeMute(muted), [changeMute, muted]);
     const handleClickPreview = useCallback(() => {
         setIsPlaying(true);
@@ -120,7 +139,12 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-    }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
+        if (handleAnalytics && analyticsEvents) {
+            if (playEvents) {
+                handleAnalytics(playEvents);
+            }
+        }
+    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, analyticsEvents, playEvents]);
     const onPause = useCallback(() => {
         // For support correct state for youtube
         setIsPlaying(false);

package/build/esm/components/YandexForm/YandexForm.d.ts

@@ -1,4 +1,5 @@
 import { PixelEvent } from '../../models';
+import { AnalyticsEventV2 } from '../../models/common';
 export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
 export interface YandexFormProps {
     id: number | string;
@@ -14,6 +15,7 @@ export interface YandexFormProps {
     onLoad?: () => void;
     metrikaGoals?: string | string[];
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
+    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
 }
 declare const YandexForm: (props: YandexFormProps) => JSX.Element;
 export default YandexForm;

package/build/esm/components/YandexForm/YandexForm.js

@@ -4,15 +4,17 @@ import { LocaleContext } from '../../context/localeContext';
 import { MobileContext } from '../../context/mobileContext';
 import { block } from '../../utils';
 import { useMetrika } from '../../hooks/useMetrika';
+import { useAnalytics } from '../..//hooks';
 export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const b = block('yandex-form');
 const YandexForm = (props) => {
-    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, customFormOrigin, } = props;
+    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
     const formContainerRef = useRef(null);
     const iframeRef = useRef();
     const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;
     const handleMetrika = useMetrika();
+    const handleAnalytics = useAnalytics();
     const isMobile = useContext(MobileContext);
     const locale = useContext(LocaleContext);
     const updateFormIframe = useCallback((container) => {
@@ -53,10 +55,19 @@ const YandexForm = (props) => {
             window.scrollBy(0, top - headerHeight);
         }
         handleMetrika({ metrikaGoals, pixelEvents });
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
         if (onSubmit) {
             onSubmit();
         }
-    }, [handleMetrika, metrikaGoals, pixelEvents, onSubmit, headerHeight]);
+    }, [
+        handleMetrika,
+        metrikaGoals,
+        pixelEvents,
+        handleAnalytics,
+        analyticsEvents,
+        onSubmit,
+        headerHeight,
+    ]);
     const handleMessage = useCallback(({ origin, data }) => {
         if (origin !== yaFormOrigin) {
             return;

package/build/esm/containers/PageConstructor/Provider.d.ts

@@ -1,4 +1,5 @@
 import { MetrikaContextProps } from '../../context/metrikaContext';
+import { AnalyticsContextProps } from '../../context/analyticsContext';
 import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
 import { SSRContextProps } from '../../context/ssrContext';
 import { LocaleContextProps } from '../../context/localeContext';
@@ -13,5 +14,6 @@ export interface PageConstructorProviderProps {
     ssrConfig?: SSRContextProps;
     theme?: ConstructorTheme;
     projectSettings?: ProjectSettingsContextProps;
+    analytics?: AnalyticsContextProps;
 }
 export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

package/build/esm/containers/PageConstructor/Provider.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import { MetrikaContext } from '../../context/metrikaContext';
+import { AnalyticsContext } from '../../context/analyticsContext';
 import { MobileContext } from '../../context/mobileContext';
 import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
 import { SSRContext } from '../../context/ssrContext';
@@ -8,7 +9,7 @@ import { LocationContext } from '../../context/locationContext';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { DEFAULT_THEME } from '../../components/constants';
 export const PageConstructorProvider = (props) => {
-    const { isMobile, locale = {}, location = {}, metrika = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, } = props;
+    const { isMobile, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         React.createElement(ThemeValueContext.Provider, { value: { themeValue: theme } }),
@@ -17,6 +18,7 @@ export const PageConstructorProvider = (props) => {
         React.createElement(LocationContext.Provider, { value: location }),
         React.createElement(MobileContext.Provider, { value: Boolean(isMobile) }),
         React.createElement(MetrikaContext.Provider, { value: metrika }),
+        React.createElement(AnalyticsContext.Provider, { value: analytics }),
         React.createElement(SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
     ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */

package/build/esm/context/analyticsContext/analyticsContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AnalyticsEventV2 } from '../../models';
+export interface AnalyticsContextProps {
+    sendEvents?: (e: AnalyticsEventV2 | AnalyticsEventV2[]) => void;
+}
+export declare const AnalyticsContext: React.Context<AnalyticsContextProps>;

package/build/esm/context/analyticsContext/analyticsContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const AnalyticsContext = React.createContext({});

package/build/esm/context/analyticsContext/index.d.ts

@@ -0,0 +1 @@
+export * from './analyticsContext';

package/build/esm/context/analyticsContext/index.js

@@ -0,0 +1 @@
+export * from './analyticsContext';

package/build/esm/context/metrikaContext/metrikaContext.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
 import { Metrika, Pixel } from '../../models';
 export interface MetrikaContextProps {
+    /**
+     * @deprecated Metrika will be deleted
+     */
     metrika?: Metrika;
+    /**
+     * @deprecated Metrika will be deleted
+     */
     pixel?: Pixel;
 }
 export declare const MetrikaContext: React.Context<MetrikaContextProps>;

package/build/esm/hooks/index.d.ts

@@ -2,4 +2,5 @@ export { default as useFocus } from './useFocus';
 export { default as useWindowBreakpoint } from './useWindowBreakpoint';
 export { useIntersection } from './useIntersection';
 export { default as useMount } from './useMount';
+export * from './useAnalytics';
 export * from './hubspot';

package/build/esm/hooks/index.js

@@ -2,4 +2,5 @@ export { default as useFocus } from './useFocus';
 export { default as useWindowBreakpoint } from './useWindowBreakpoint';
 export { useIntersection } from './useIntersection';
 export { default as useMount } from './useMount';
+export * from './useAnalytics';
 export * from './hubspot';

package/build/esm/hooks/useAnalytics.d.ts

@@ -0,0 +1,2 @@
+import { AnalyticsEventV2 } from '../models';
+export declare const useAnalytics: () => ((e?: AnalyticsEventV2 | AnalyticsEventV2[]) => void) | undefined;

package/build/esm/hooks/useAnalytics.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { AnalyticsContext } from '../context/analyticsContext';
+export const useAnalytics = () => {
+    const { sendEvents } = useContext(AnalyticsContext);
+    if (!sendEvents) {
+        return undefined;
+    }
+    return (e) => {
+        if (!e) {
+            return;
+        }
+        sendEvents(e);
+    };
+};

package/build/esm/hooks/useMetrika.d.ts

@@ -1,7 +1,13 @@
 import { ButtonPixel, MetrikaGoal, PixelEvent } from '../models';
+/**
+ * @deprecated Metrika will be deleted
+ */
 type UseMetrikaProps = {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
 };
+/**
+ * @deprecated useMetrika will be deleted
+ */
 export declare const useMetrika: () => ({ metrikaGoals, pixelEvents }: UseMetrikaProps) => void;
 export {};

package/build/esm/hooks/useMetrika.js

@@ -2,12 +2,20 @@ import { useContext } from 'react';
 import { MetrikaContext } from '../context/metrikaContext';
 import { PixelEventType } from '../models';
 import { isNewMetrikaFormat } from '../models/guards';
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated Metrika will be deleted, which uses this logic
+ */
 function isButtonPixel(pixelEvents) {
     if (Array.isArray(pixelEvents) && pixelEvents.length && 'name' in pixelEvents) {
         return true;
     }
     return false;
 }
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated useMetrika will be deleted
+ */
 export const useMetrika = () => {
     const { metrika, pixel } = useContext(MetrikaContext);
     return ({ metrikaGoals, pixelEvents }) => {

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

@@ -7,12 +7,21 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
+/**
+ * @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",
@@ -36,11 +45,17 @@ export declare enum PixelEventType {
 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;
@@ -49,4 +64,25 @@ export interface ClassNameProps {
     className?: string;
 }
 export type Timeout = ReturnType<typeof setTimeout> | undefined;
+export type AnalyticsParameter = {
+    key: string;
+    value: string | number | boolean;
+};
+export type AnalyticsCounters = {
+    include?: string[];
+    exclude?: string[];
+};
+export type AnalyticsEvent = {
+    name: string;
+    type?: string;
+    counters?: AnalyticsCounters;
+    category?: string;
+    label?: string;
+    params?: AnalyticsParameter[];
+};
+export type AnalyticsEventV2<T = {}> = T & {
+    name: string;
+    type?: string;
+    counters?: AnalyticsCounters;
+};
 export {};

package/build/esm/models/common.js

@@ -3,6 +3,9 @@ export var Theme;
     Theme["Light"] = "light";
     Theme["Dark"] = "dark";
 })(Theme || (Theme = {}));
+/**
+ * @deprecated Pixel will be deleted from package
+ */
 export var PixelEventType;
 (function (PixelEventType) {
     PixelEventType["AddPaymentInfo"] = "AddPaymentInfo";

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

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
-import { ClassNameProps, PixelEventType } from '../common';
+import { AnalyticsEventV2, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -110,6 +110,7 @@ export interface MediaVideoProps {
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
+    analyticsEvents?: AnalyticsEventV2[];
 }
 export interface LinkProps extends Stylable {
     url: string;
@@ -121,6 +122,7 @@ export interface LinkProps extends Stylable {
     target?: string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
 }
 export interface FileLinkProps extends ClassNameProps {
     href: string;
@@ -139,6 +141,7 @@ export interface ButtonProps {
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    analyticsEvents?: AnalyticsEventV2[];
     target?: string;
 }
 export interface ButtonImageProps {
@@ -167,6 +170,7 @@ export interface MediaComponentVideoProps {
     video: MediaVideoProps;
     height?: number;
     metrika?: MetrikaVideo;
+    analyticsEvents?: AnalyticsEventV2[];
     previewImg?: string;
 }
 export interface MediaComponentYoutubeProps {
@@ -222,6 +226,7 @@ export interface HeaderBreadCrumbsProps extends ClassNameProps {
     theme?: TextTheme;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
 }
 export interface PreviewContentItemProps {
     title: string;

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

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 import { ContentBlockProps } from './blocks';
-import { PixelEvent } from '../common';
+import { AnalyticsEventV2, PixelEvent } from '../common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -61,6 +61,7 @@ export interface HubspotFormProps extends HubspotEventHandlers {
     onLoad?: (arg: HubspotEventData) => void;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
     hubspotEvents?: string[];
+    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
 }
 export interface PartnerProps extends CardBaseProps {
     text: string;

package/build/esm/schema/validators/common.d.ts

@@ -414,6 +414,9 @@ export declare const ButtonProps: {
             };
         })[];
     };
+    /**
+     * @deprecated Metrika will be deleted
+     */
     metrikaGoals: {
         anyOf: ({
             type: string;
@@ -443,6 +446,9 @@ export declare const ButtonProps: {
             };
         })[];
     };
+    /**
+     * @deprecated Pixel will be deleted
+     */
     pixelEvents: {
         type: string;
         items: {
@@ -499,6 +505,84 @@ export declare const ButtonProps: {
             };
         };
     };
+    analyticsEvents: {
+        anyOf: ({
+            type: string;
+            propertyNames: {
+                type: string;
+            };
+            additionalProperty: {
+                type: string;
+            };
+            required: string[];
+            properties: {
+                name: {
+                    type: string;
+                };
+                type: {
+                    type: string;
+                };
+                counters: {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: never[];
+                    properties: {
+                        include: {
+                            type: string;
+                            items: {
+                                type: string;
+                            };
+                        };
+                        exclude: {
+                            type: string;
+                            items: {
+                                type: string;
+                            };
+                        };
+                    };
+                };
+            };
+        } | {
+            type: string;
+            items: {
+                type: string;
+                propertyNames: {
+                    type: string;
+                };
+                additionalProperty: {
+                    type: string;
+                };
+                required: string[];
+                properties: {
+                    name: {
+                        type: string;
+                    };
+                    type: {
+                        type: string;
+                    };
+                    counters: {
+                        type: string;
+                        additionalProperties: boolean;
+                        required: never[];
+                        properties: {
+                            include: {
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                            exclude: {
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        })[];
+    };
     target: {
         type: string;
         enum: string[];
@@ -629,6 +713,9 @@ export declare const ButtonBlock: {
                 };
             })[];
         };
+        /**
+         * @deprecated Metrika will be deleted
+         */
         metrikaGoals: {
             anyOf: ({
                 type: string;
@@ -658,6 +745,9 @@ export declare const ButtonBlock: {
                 };
             })[];
         };
+        /**
+         * @deprecated Pixel will be deleted
+         */
         pixelEvents: {
             type: string;
             items: {
@@ -714,6 +804,84 @@ export declare const ButtonBlock: {
                 };
             };
         };
+        analyticsEvents: {
+            anyOf: ({
+                type: string;
+                propertyNames: {
+                    type: string;
+                };
+                additionalProperty: {
+                    type: string;
+                };
+                required: string[];
+                properties: {
+                    name: {
+                        type: string;
+                    };
+                    type: {
+                        type: string;
+                    };
+                    counters: {
+                        type: string;
+                        additionalProperties: boolean;
+                        required: never[];
+                        properties: {
+                            include: {
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                            exclude: {
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                };
+            } | {
+                type: string;
+                items: {
+                    type: string;
+                    propertyNames: {
+                        type: string;
+                    };
+                    additionalProperty: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            })[];
+        };
         target: {
             type: string;
             enum: string[];

package/build/esm/schema/validators/common.js

@@ -1,6 +1,7 @@
 import { pixelEvents } from './pixel';
 import { Theme } from '../../models';
 import { ImageProps, urlPattern } from '../../components/Image/schema';
+import { AnalyticsEventV2Schema } from './event';
 export const mediaDirection = ['media-content', 'content-media'];
 export const textSize = ['s', 'm', 'l'];
 export const containerSizesArray = ['sm', 'md', 'lg', 'xl', 'all'];
@@ -306,6 +307,9 @@ export const ButtonProps = {
             },
         ],
     },
+    /**
+     * @deprecated Metrika will be deleted
+     */
     metrikaGoals: {
         anyOf: [
             { type: 'string' },
@@ -328,7 +332,13 @@ export const ButtonProps = {
             },
         ],
     },
+    /**
+     * @deprecated Pixel will be deleted
+     */
     pixelEvents,
+    analyticsEvents: {
+        anyOf: [AnalyticsEventV2Schema, { type: 'array', items: AnalyticsEventV2Schema }],
+    },
     target: {
         type: 'string',
         enum: ['_self', '_blank', '_parent', '_top'],