Commit 02d5fd97 authored by Max Alekseenko's avatar Max Alekseenko

add event for banner

parent e6b4b29e
...@@ -19,6 +19,7 @@ export enum EventTypes { ...@@ -19,6 +19,7 @@ export enum EventTypes {
EXPERIMENT_STARTED = 'Experiment started', EXPERIMENT_STARTED = 'Experiment started',
FILTERS = 'Filters', FILTERS = 'Filters',
BUTTON_CLICK = 'Button click', BUTTON_CLICK = 'Button click',
PROMO_BANNER = 'Promo banner',
} }
/* eslint-disable @typescript-eslint/indent */ /* eslint-disable @typescript-eslint/indent */
...@@ -122,5 +123,9 @@ Type extends EventTypes.BUTTON_CLICK ? { ...@@ -122,5 +123,9 @@ Type extends EventTypes.BUTTON_CLICK ? {
'Content': 'Swap button'; 'Content': 'Swap button';
'Source': string; 'Source': string;
} : } :
Type extends EventTypes.PROMO_BANNER ? {
'Source': 'Marketplace';
'Link': string;
} :
undefined; undefined;
/* eslint-enable @typescript-eslint/indent */ /* eslint-enable @typescript-eslint/indent */
...@@ -182,16 +182,16 @@ const FeaturedApp = ({ ...@@ -182,16 +182,16 @@ const FeaturedApp = ({
); );
}; };
const IframeBanner = () => { const IframeBanner = ({ contentUrl, linkUrl }: { contentUrl: string; linkUrl: string }) => {
const [ isFrameLoading, setIsFrameLoading ] = useState(true); const [ isFrameLoading, setIsFrameLoading ] = useState(true);
const handleIframeLoad = useCallback(() => { const handleIframeLoad = useCallback(() => {
setIsFrameLoading(false); setIsFrameLoading(false);
}, []); }, []);
if (!feature.isEnabled) { const handleClick = useCallback(() => {
return null; mixpanel.logEvent(mixpanel.EventTypes.PROMO_BANNER, { Source: 'Marketplace', Link: linkUrl });
} }, [ linkUrl ]);
return ( return (
<Skeleton <Skeleton
...@@ -204,9 +204,10 @@ const IframeBanner = () => { ...@@ -204,9 +204,10 @@ const IframeBanner = () => {
overflow="hidden" overflow="hidden"
> >
<Link <Link
href={ feature.banner?.linkUrl } href={ linkUrl }
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
onClick={ handleClick }
position="absolute" position="absolute"
w="100%" w="100%"
h="100%" h="100%"
...@@ -218,7 +219,7 @@ const IframeBanner = () => { ...@@ -218,7 +219,7 @@ const IframeBanner = () => {
as="iframe" as="iframe"
h="100%" h="100%"
w="100%" w="100%"
src={ feature.banner?.contentUrl } src={ contentUrl }
title="Marketplace banner" title="Marketplace banner"
onLoad={ handleIframeLoad } onLoad={ handleIframeLoad }
/> />
...@@ -248,7 +249,7 @@ const Banner = ({ apps, favoriteApps, isLoading, onInfoClick, onFavoriteClick, o ...@@ -248,7 +249,7 @@ const Banner = ({ apps, favoriteApps, isLoading, onInfoClick, onFavoriteClick, o
/> />
); );
} else if (feature.banner) { } else if (feature.banner) {
return <IframeBanner/>; return <IframeBanner contentUrl={ feature.banner.contentUrl } linkUrl={ feature.banner.linkUrl }/>;
} }
return null; return null;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment