feat: add analyticsEvents to BackgroundCard (#556)

* feat: add analyticsEvents to BackgroundCard
gravity-ui · Sep 13, 2023 · 12db1d3 · 12db1d3
1 parent d41019b
commit 12db1d3
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 10 deletions.
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -375,7 +375,10 @@ export interface PriceDetailsProps {
     items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[];
 }
 
-export interface PriceItemProps extends PriceDetailsProps, PriceDescriptionProps {}
+export interface PriceItemProps
+    extends PriceDetailsProps,
+        PriceDescriptionProps,
+        AnalyticsEventsBase {}
 
 export interface PriceFoldableDetailsProps {
     title: string;

diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts
@@ -100,6 +100,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
 
 export interface BackgroundCardProps
     extends CardBaseProps,
+        AnalyticsEventsBase,
         Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
     background?: ThemeSupporting<ImageObjectProps>;
@@ -109,6 +110,7 @@ export interface BackgroundCardProps
 
 export interface BasicCardProps
     extends CardBaseProps,
+        AnalyticsEventsBase,
         Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     icon?: ImageProps;
@@ -126,9 +128,9 @@ export interface BannerCardProps {
     button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
 }
 
-export interface MediaCardProps extends MediaProps, CardBaseProps {}
+export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}
 
-export interface LayoutItemProps extends ClassNameProps {
+export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
     media: MediaProps;
     metaInfo?: string[];

diff --git a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx
@@ -23,6 +23,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
         theme: cardTheme = 'default',
         links,
         buttons,
+        analyticsEvents,
     } = props;
 
     const {themeValue: theme} = useContext(ThemeValueContext);
@@ -34,6 +35,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
             className={b({padding: paddingBottom, theme: cardTheme})}
             url={url}
             border={borderType}
+            analyticsEvents={analyticsEvents}
         >
             <CardBase.Content>
                 <BackgroundImage

diff --git a/src/sub-blocks/BackgroundCard/schema.ts b/src/sub-blocks/BackgroundCard/schema.ts
@@ -2,6 +2,7 @@ import _ from 'lodash';
 
 import {ImageObjectProps} from '../../components/Image/schema';
 import {BaseProps, CardBase, withTheme} from '../../schema/validators/common';
+import {AnalyticsEventSchema} from '../../schema/validators/event';
 import {ContentBase} from '../Content/schema';
 
 const BackgroundCardContentProps = _.omit(ContentBase, ['size']);
@@ -25,6 +26,19 @@ export const BackgroundCard = {
                 type: 'string',
                 enum: ['s', 'm', 'l', 'xl'],
             },
+            analyticsEvents: {
+                oneOf: [
+                    {
+                        ...AnalyticsEventSchema,
+                        optionName: 'single',
+                    },
+                    {
+                        type: 'array',
+                        items: AnalyticsEventSchema,
+                        optionName: 'list',
+                    },
+                ],
+            },
         },
     },
 };
diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx
@@ -18,6 +18,7 @@ const LayoutItem = ({
     border,
     fullscreen,
     className,
+    analyticsEvents,
 }: LayoutItemProps) => (
     <div className={b(null, className)}>
         {fullscreen && hasFullscreen(media) ? (
@@ -31,11 +32,12 @@ const LayoutItem = ({
                         {...media}
                         {...fullscreenMediaProps}
                         className={b('media', {border}, mediaClassName)}
+                        analyticsEvents={analyticsEvents}
                     />
                 )}
             </FullscreenMedia>
         ) : (
-            <Media {...media} className={b('media', {border})} />
+            <Media {...media} className={b('media', {border})} analyticsEvents={analyticsEvents} />
         )}
         {metaInfo && <MetaInfo items={metaInfo} className={b('meta-info')} />}
         <div className={b('content')}>

diff --git a/src/sub-blocks/LayoutItem/schema.ts b/src/sub-blocks/LayoutItem/schema.ts
@@ -2,6 +2,7 @@ import {omit} from 'lodash';
 
 import metaInfo from '../../components/MetaInfo/schema';
 import {BaseProps, MediaProps} from '../../schema/validators/common';
+import {AnalyticsEventSchema} from '../../schema/validators/event';
 import {ContentBase} from '../../sub-blocks/Content/schema';
 
 export const LayoutItem = {
@@ -19,5 +20,18 @@ export const LayoutItem = {
         fullscreen: {
             type: 'boolean',
         },
+        analyticsEvents: {
+            oneOf: [
+                {
+                    ...AnalyticsEventSchema,
+                    optionName: 'single',
+                },
+                {
+                    type: 'array',
+                    items: AnalyticsEventSchema,
+                    optionName: 'list',
+                },
+            ],
+        },
     },
 };
diff --git a/src/sub-blocks/MediaCard/MediaCard.tsx b/src/sub-blocks/MediaCard/MediaCard.tsx
@@ -8,8 +8,13 @@ import './MediaCard.scss';
 
 const b = block('MediaCard');
 
-const MediaCard = ({border, ...mediaProps}: MediaCardProps) => (
-    <CardBase className={b()} bodyClassName={b('body')} border={border}>
+const MediaCard = ({border, analyticsEvents, ...mediaProps}: MediaCardProps) => (
+    <CardBase
+        className={b()}
+        bodyClassName={b('body')}
+        border={border}
+        analyticsEvents={analyticsEvents}
+    >
         <CardBase.Content>
             <Media {...mediaProps} />
         </CardBase.Content>

diff --git a/src/sub-blocks/MediaCard/schema.ts b/src/sub-blocks/MediaCard/schema.ts
@@ -1,4 +1,5 @@
 import {AnimatableProps, BaseProps, CardBase, MediaProps} from '../../schema/validators/common';
+import {AnalyticsEventSchema} from '../../schema/validators/event';
 
 export const MediaCardBlock = {
     'media-card': {
@@ -9,6 +10,19 @@ export const MediaCardBlock = {
             ...CardBase,
             ...MediaProps,
             ...AnimatableProps,
+            analyticsEvents: {
+                oneOf: [
+                    {
+                        ...AnalyticsEventSchema,
+                        optionName: 'single',
+                    },
+                    {
+                        type: 'array',
+                        items: AnalyticsEventSchema,
+                        optionName: 'list',
+                    },
+                ],
+            },
         },
     },
 };
diff --git a/src/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.tsx b/src/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.tsx
@@ -6,6 +6,7 @@ import {CardBase} from '../../../components';
 import {BREAKPOINTS} from '../../../constants';
 import {Col, Grid, GridColumnSize, Row} from '../../../grid';
 import {
+    AnalyticsEventsBase,
     CardBorder,
     PriceDescriptionProps,
     PriceDetailsListProps,
@@ -24,7 +25,7 @@ const CombinedPricesGroupSize = {
     [GridColumnSize.Lg]: 3,
 };
 
-interface CombinedPriceDetailedProps {
+interface CombinedPriceDetailedProps extends AnalyticsEventsBase {
     items: PriceItemProps[];
     numberGroupItems: number;
     useMixedView?: boolean;
@@ -43,6 +44,7 @@ const CombinedPriceDetailed = (props: CombinedPriceDetailedProps) => {
         useMixedView,
         getDescriptionComponent,
         getDetailsComponent,
+        analyticsEvents,
     } = props;
 
     const [groupItemsSize, setGroupItemsSize] = useState<number>(numberGroupItems);
@@ -103,7 +105,7 @@ const CombinedPriceDetailed = (props: CombinedPriceDetailedProps) => {
     const chunkedItems = _.chunk(items, groupItemsSize);
 
     return (
-        <CardBase className={b()} border={border}>
+        <CardBase className={b()} border={border} analyticsEvents={analyticsEvents}>
             <CardBase.Content>
                 <Grid>
                     {chunkedItems.map((chunk: PriceItemProps[], id) => {

diff --git a/src/sub-blocks/PriceDetailed/SeparatePriceDetailed/SeparatePriceDetailed.tsx b/src/sub-blocks/PriceDetailed/SeparatePriceDetailed/SeparatePriceDetailed.tsx
@@ -28,8 +28,13 @@ const SeparatePriceDetailed = (props: SeparatePriceDetailedProps) => {
 
     return (
         <Fragment>
-            {items.map((item: PriceItemProps, id: number) => (
-                <CardBase key={id} className={b()} border={border}>
+            {items.map(({analyticsEvents, ...item}: PriceItemProps, id: number) => (
+                <CardBase
+                    key={id}
+                    className={b()}
+                    border={border}
+                    analyticsEvents={analyticsEvents}
+                >
                     <CardBase.Content>
                         {getDescriptionComponent(item)}
                         {getDetailsComponent(item.items)}

diff --git a/src/sub-blocks/PriceDetailed/schema.ts b/src/sub-blocks/PriceDetailed/schema.ts
@@ -1,4 +1,5 @@
 import {AnimatableProps, BaseProps, textSize} from '../../schema/validators/common';
+import {AnalyticsEventSchema} from '../../schema/validators/event';
 import {filteredArray} from '../../schema/validators/utils';
 
 const PriceDetailedDetailsType = ['marked-list', 'settings'];
@@ -162,6 +163,19 @@ const PriceItem = {
     properties: {
         ...PriceDetailsProps,
         ...PriceDescriptionProps,
+        analyticsEvents: {
+            oneOf: [
+                {
+                    ...AnalyticsEventSchema,
+                    optionName: 'single',
+                },
+                {
+                    type: 'array',
+                    items: AnalyticsEventSchema,
+                    optionName: 'list',
+                },
+            ],
+        },
     },
 };