refactor(condo): INFRA-917 remove tracking context (Part 2) (#5902)

* refactor(condo): INFRA-917 remove tracking context (Part 2)

* fix(condo): INFRA-917 fix broken test

* chore(condo): INFRA-917 sync submodules to main

* chore(condo): INFRA-917 fix remaining eventName

* chore(condo): INFRA-917 sync submodule

Author: SavelevMatthew

apps/callcenter

@@ -13,7 +13,6 @@ import { colors } from '@open-condo/ui/dist/colors'
 
 import Select, { CustomSelectProps } from '@condo/domains/common/components/antd/Select'
 import { Loader } from '@condo/domains/common/components/Loader'
-import { TrackingEventPropertiesType } from '@condo/domains/common/components/TrackingContext'
 import { isNeedToLoadNewElements } from '@condo/domains/common/utils/select.utils'
 
 import { InitialValuesGetter, useInitialValueGetter } from './useInitialValueGetter'
@@ -32,8 +31,6 @@ interface ISearchInput<S> extends Omit<CustomSelectProps<S>, 'onSelect'> {
     initialValueGetter?: InitialValuesGetter
     onSelect?: (value: string, option) => void
     infinityScroll?: boolean
-    eventName?: string
-    eventProperties?: TrackingEventPropertiesType
     setIsMatchSelectedProperty?: Dispatch<SetStateAction<boolean>>
 }
 
@@ -71,8 +68,6 @@ export const BaseSearchInput = <S extends string> (props: ISearchInput<S>) => {
         style,
         infinityScroll,
         value,
-        eventName,
-        eventProperties,
         loading,
         ...restSelectProps
     } = props
@@ -254,8 +249,6 @@ export const BaseSearchInput = <S extends string> (props: ISearchInput<S>) => {
             autoClearSearchValue={false}
             defaultActiveFirstOption={false}
             style={style}
-            eventName={eventName}
-            eventProperties={eventProperties}
             loading={loading}
         >
             {options}

apps/condo/domains/common/components/BaseSearchInput/index.tsx

@@ -23,7 +23,6 @@ export type InputWithCheckAllProps = {
     selectProps: ComponentProps<typeof GraphQlSearchInput>
     checkBoxOffset?: number
     form: FormInstance
-    checkBoxEventName?: string
     disabled?: boolean
     checkboxDisabled?: boolean
     checkboxHidden?: boolean
@@ -60,7 +59,6 @@ export const GraphQlSearchInputWithCheckAll: React.FC<InputWithCheckAllProps> =
         CheckAllMessage,
         form,
         checkBoxOffset,
-        checkBoxEventName,
         disabled,
         onDataLoaded,
         mutationOfFormAfterCheckAll,

apps/condo/domains/common/components/GraphQlSearchInputWithCheckAll.tsx

@@ -7,7 +7,6 @@ import { FilterValue, FilterDropdownProps } from 'antd/es/table/interface'
 import dayjs, { Dayjs } from 'dayjs'
 import get from 'lodash/get'
 import isArray from 'lodash/isArray'
-import isEmpty from 'lodash/isEmpty'
 import isFunction from 'lodash/isFunction'
 import React, { CSSProperties, useCallback, useMemo } from 'react'
 
@@ -23,7 +22,6 @@ import { colors } from '@condo/domains/common/constants/style'
 import { QueryArgType } from '@condo/domains/common/utils/tables.utils'
 
 import { Button } from '../Button'
-import { TrackingEventType, useTracking } from '../TrackingContext'
 
 
 type FilterIconType = (filtered?: boolean) => React.ReactNode
@@ -168,9 +166,6 @@ export const getTextFilterDropdown: GetTextFilterDropdownType = ({ containerStyl
 
 export const getOptionFilterDropdown: GetOptionFilterDropdownType = ({ containerStyles, checkboxGroupProps } = {}) => {
     return ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
-        const { logEvent, getEventName } = useTracking()
-
-        const eventName = getEventName(TrackingEventType.Checkbox)
 
         const options = useMemo(() => get(checkboxGroupProps, 'options'), [])
 
@@ -191,17 +186,6 @@ export const getOptionFilterDropdown: GetOptionFilterDropdownType = ({ container
                     .map((option) => get(option, 'label'))
                     .filter(Boolean)
             }
-            if (!isEmpty(selectedValue)) {
-                logEvent({
-                    eventName,
-                    eventProperties: {
-                        component: {
-                            id: checkboxGroupProps.id,
-                            value: selectedValue,
-                        },
-                    },
-                })
-            }
 
             setSelectedKeys(values as React.Key[])
             confirm({ closeDropdown: false })

apps/condo/domains/common/components/Table/Filters.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled'
 import { Tabs } from 'antd'
-import React from 'react'
+import React, { useCallback } from 'react'
 
 import { colors, fontSizes, shadows } from '@condo/domains/common/constants/style'
+import { analytics } from '@condo/domains/common/utils/analytics'
 
 import { StarIcon } from './icons/Star'
-import { ITrackingComponent, TrackingEventType, useTracking } from './TrackingContext'
 
 const IconWrapper = styled.span`
   display: flex;
@@ -70,27 +70,35 @@ const TabWrapper = styled.div`
   }
 `
 
-interface TabProps extends ITrackingComponent {
+interface TabProps {
     title: string
+    tabKey: string
     showIcon?: boolean
     icon?: React.ReactNode
     onClick?: React.MouseEventHandler<HTMLDivElement>
 }
 
 export const Tab: React.FC<TabProps> = ({
     title,
+    tabKey,
     showIcon = true,
     icon = <StarIcon/>,
-    eventName: propEventName,
     onClick,
 }) => {
-    const { getTrackingWrappedCallback, getEventName } = useTracking()
+    const onClickWrapped: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {
+        analytics.track('change', {
+            component: 'Tabs',
+            location: window.location.href,
+            activeKey: tabKey,
+        })
 
-    const eventName = propEventName ? propEventName : getEventName(TrackingEventType.Click)
-    const onClickCallback = eventName ? getTrackingWrappedCallback(eventName, {}, onClick) : onClick
+        if (onClick) {
+            onClick(e)
+        }
+    }, [])
 
     return (
-        <TabWrapper onClick={onClickCallback}>
+        <TabWrapper onClick={onClickWrapped}>
             {showIcon && (
                 <IconWrapper>
                     {icon}

apps/condo/domains/common/components/Tabs.tsx

@@ -1,34 +1,29 @@
 import { Radio as DefaultRadio, RadioProps } from 'antd'
-import get from 'lodash/get'
-import React from 'react'
-
-import { useTracking, TrackingEventPropertiesType, TrackingEventType } from '@condo/domains/common/components/TrackingContext'
-
-export interface CustomRadioProps extends RadioProps {
-    eventName?: string
-    eventProperties?: TrackingEventPropertiesType
-}
-
-const Radio = (props: CustomRadioProps) => {
-    const { eventName: propEventName, eventProperties = {}, onChange, ...restProps } = props
-    const { getTrackingWrappedCallback, getEventName } = useTracking()
-
-    const eventName = propEventName ? propEventName : getEventName(TrackingEventType.Radio)
-    const componentProperties = { ...eventProperties }
-
-    if (restProps.value) {
-        componentProperties['component'] = { value: restProps.value }
-
-        const componentId = get(restProps, 'id')
-        if (componentId) {
-            componentProperties['component']['id'] = componentId
+import React, { useCallback } from 'react'
+
+import { analytics } from '@condo/domains/common/utils/analytics'
+
+/** @deprecated use Radio from "@open-condo/ui" */
+const Radio = (props: RadioProps) => {
+    const { onChange, id, value, ...restProps } = props
+
+    const onChangeWrapped: RadioProps['onChange'] = useCallback((e) => {
+        if (typeof value === 'string') {
+            analytics.track('check', {
+                component: 'Radio',
+                location: window.location.href,
+                id,
+                value,
+            })
         }
-    }
 
-    const onChangeCallback = eventName ? getTrackingWrappedCallback(eventName, componentProperties, onChange) : onChange
+        if (onChange) {
+            onChange(e)
+        }
+    }, [])
 
     return (
-        <DefaultRadio {...restProps} onChange={onChangeCallback} />
+        <DefaultRadio {...restProps} id={id} onChange={onChangeWrapped} />
     )
 }