From 05bdf4ee020561d3627ed2d5380c047d5f2268bc Mon Sep 17 00:00:00 2001 From: Syed Sajjad Hussain Shah Date: Fri, 18 Aug 2023 13:06:36 +0500 Subject: [PATCH] feat: add experiment and eventing to recommendations painted door exp VAN-1604 --- public/index.html | 9 ++ src/App.jsx | 33 ++--- src/App.test.jsx | 3 + src/RecsPaintedDoorExpContext.jsx | 120 ++++++++++++++++++ src/__snapshots__/App.test.jsx.snap | 82 ++++++------ .../__snapshots__/index.test.jsx.snap | 6 +- src/components/ModalView/index.jsx | 17 ++- .../CollapsedHeader/CollapseMenuBody.jsx | 35 +++-- .../CollapsedHeader/CollapseMenuBody.test.jsx | 7 + .../CollapseMenuBody.test.jsx.snap | 20 --- .../__snapshots__/index.test.jsx.snap | 4 - .../CollapsedHeader/index.jsx | 4 - .../CollapsedHeader/index.test.jsx | 17 --- .../__snapshots__/index.test.jsx.snap | 11 -- .../ExpandedHeader/index.jsx | 29 ++++- .../LookingForChallengeWidget/index.jsx | 7 +- .../LookingForChallengeWidget/index.test.jsx | 9 ++ .../RecommendationsPanel/LoadedView.jsx | 56 ++++++-- .../RecommendationsPanel/LoadedView.test.jsx | 6 + .../__snapshots__/LoadedView.test.jsx.snap | 26 ++-- src/widgets/RecommendationsPanel/index.jsx | 5 - .../recsPaintedDoorExpTrack.js | 35 +++++ src/widgets/RecommendationsPanel/track.js | 9 ++ 23 files changed, 392 insertions(+), 158 deletions(-) create mode 100644 src/RecsPaintedDoorExpContext.jsx create mode 100644 src/widgets/RecommendationsPanel/recsPaintedDoorExpTrack.js diff --git a/public/index.html b/public/index.html index ba091dc4..cfe5611c 100755 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,15 @@ + <% if (process.env.OPTIMIZELY_URL) { %> + + <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %> + + <% } %>
diff --git a/src/App.jsx b/src/App.jsx index 353340c2..27a46446 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -29,6 +29,7 @@ import LearnerDashboardHeader from './containers/LearnerDashboardHeader'; import messages from './messages'; import './App.scss'; +import { PaintedDoorExperimentProvider } from './RecsPaintedDoorExpContext'; export const App = () => { const { authenticatedUser } = React.useContext(AppContext); @@ -78,21 +79,23 @@ export const App = () => { {formatMessage(messages.pageTitle)}
- -
- {hasNetworkFailure - ? ( - - - - ) : ( - - - - )} -
-
- + + +
+ {hasNetworkFailure + ? ( + + + + ) : ( + + + + )} +
+
+ +
); diff --git a/src/App.test.jsx b/src/App.test.jsx index a5eb23f1..ab39cf81 100644 --- a/src/App.test.jsx +++ b/src/App.test.jsx @@ -25,6 +25,9 @@ jest.mock('components/ZendeskFab', () => 'ZendeskFab'); jest.mock('ExperimentContext', () => ({ ExperimentProvider: 'ExperimentProvider', })); +jest.mock('RecsPaintedDoorExpContext', () => ({ + PaintedDoorExperimentProvider: 'PaintedDoorExperimentProvider', +})); jest.mock('data/redux', () => ({ selectors: 'redux.selectors', actions: 'redux.actions', diff --git a/src/RecsPaintedDoorExpContext.jsx b/src/RecsPaintedDoorExpContext.jsx new file mode 100644 index 00000000..460e14d1 --- /dev/null +++ b/src/RecsPaintedDoorExpContext.jsx @@ -0,0 +1,120 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { StrictDict } from 'utils'; +import * as module from './RecsPaintedDoorExpContext'; +import { + useEmailConfirmationData, + useHasAvailableDashboards, + useRequestIsPending, +} from './data/redux/hooks'; +import { RequestKeys } from './data/constants/requests'; +import { trackPaintedDoorVariationGroup } from './widgets/RecommendationsPanel/recsPaintedDoorExpTrack'; + +export const state = StrictDict({ + enterpriseUser: (val) => React.useState(val), // eslint-disable-line + experimentData: (val) => React.useState(val), // eslint-disable-line +}); + +const PAINTED_DOOR_RECOMMENDATIONS_EXP_ID = 25116810832; +const PAINTED_DOOR_RECOMMENDATIONS_PAGE = 'url_targeting_for_van1604_recommendations_painted_door_exp'; +const PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION = 'btn_navbar'; +const PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION = 'btn_widget'; + +export function getPaintedDoorRecommendationsExperimentVariation() { + try { + if (window.optimizely && window.optimizely.get('data').experiments[PAINTED_DOOR_RECOMMENDATIONS_EXP_ID]) { + const selectedVariant = window.optimizely.get('state').getVariationMap()[PAINTED_DOOR_RECOMMENDATIONS_EXP_ID]; + return selectedVariant?.name; + } + } catch (e) { /* empty */ } + return ''; +} + +export function activatePaintedDoorRecommendationsExperiment() { + window.optimizely = window.optimizely || []; + window.optimizely.push({ + type: 'page', + pageName: PAINTED_DOOR_RECOMMENDATIONS_PAGE, + }); +} + +export const PaintedDoorExperimentContext = React.createContext(); + +const useIsEnterpriseUser = () => { + const [enterpriseUser, setEnterpriseUser] = module.state.enterpriseUser({ + isEnterpriseUser: false, + isLoading: true, + }); + + const initIsPending = useRequestIsPending(RequestKeys.initialize); + const hasAvailableDashboards = useHasAvailableDashboards(); + const confirmationData = useEmailConfirmationData(); + + React.useEffect(() => { + if (!initIsPending && Object.keys(confirmationData).length && hasAvailableDashboards) { + setEnterpriseUser(prev => ({ + ...prev, + isEnterpriseUser: true, + isLoading: false, + })); + } else if (!initIsPending && Object.keys(confirmationData).length && !hasAvailableDashboards) { + setEnterpriseUser(prev => ({ + ...prev, + isEnterpriseUser: false, + isLoading: false, + })); + } + }, [initIsPending]); // eslint-disable-line react-hooks/exhaustive-deps + + return enterpriseUser; +}; + +export const PaintedDoorExperimentProvider = ({ children }) => { + const [experimentData, setExperimentData] = module.state.experimentData({ + experimentVariation: '', + isPaintedDoorNavbarBtnVariation: false, + isPaintedDoorWidgetBtnVariation: false, + experimentLoading: true, + }); + const enterpriseUser = useIsEnterpriseUser(); + + const contextValue = React.useMemo( + () => ({ + ...experimentData, + }), + [experimentData], + ); + + React.useEffect(() => { + let timer = null; + if (!enterpriseUser.isLoading && !enterpriseUser.isEnterpriseUser) { + activatePaintedDoorRecommendationsExperiment(); + timer = setTimeout(() => { + const variation = getPaintedDoorRecommendationsExperimentVariation(); + setExperimentData(prev => ({ + ...prev, + experimentVariation: variation, + isPaintedDoorNavbarBtnVariation: variation === PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION, + isPaintedDoorWidgetBtnVariation: variation === PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION, + experimentLoading: false, + })); + trackPaintedDoorVariationGroup(variation); + }, 500); + } + return () => clearTimeout(timer); + }, [enterpriseUser]); // eslint-disable-line react-hooks/exhaustive-deps + + return ( + + {children} + + ); +}; + +export const usePaintedDoorExperimentContext = () => React.useContext(PaintedDoorExperimentContext); + +PaintedDoorExperimentProvider.propTypes = { + children: PropTypes.node.isRequired, +}; + +export default usePaintedDoorExperimentContext; diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap index cec5dc86..aa1ef90f 100644 --- a/src/__snapshots__/App.test.jsx.snap +++ b/src/__snapshots__/App.test.jsx.snap @@ -11,20 +11,22 @@ exports[`App router component component initialize failure snapshot 1`] = `
- -
- - - -
-
- + + +
+ + + +
+
+ +
`; @@ -40,16 +42,18 @@ exports[`App router component component no network failure snapshot 1`] = `
- -
- - - -
-
- + + +
+ + + +
+
+ +
`; @@ -65,20 +69,22 @@ exports[`App router component component refresh failure snapshot 1`] = `
- -
- - - -
-
- + + +
+ + + +
+
+ +
`; diff --git a/src/components/ModalView/__snapshots__/index.test.jsx.snap b/src/components/ModalView/__snapshots__/index.test.jsx.snap index 317d9d4f..df1e44fa 100644 --- a/src/components/ModalView/__snapshots__/index.test.jsx.snap +++ b/src/components/ModalView/__snapshots__/index.test.jsx.snap @@ -35,15 +35,17 @@ exports[`ModalView snapshot should renders default ModalView 1`] = ` Skip for now - + diff --git a/src/components/ModalView/index.jsx b/src/components/ModalView/index.jsx index 7f1a4039..c4b52b97 100644 --- a/src/components/ModalView/index.jsx +++ b/src/components/ModalView/index.jsx @@ -1,18 +1,26 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ModalDialog, ActionRow, Button } from '@edx/paragon'; +import { ModalDialog, ActionRow } from '@edx/paragon'; import { useIntl } from '@edx/frontend-platform/i18n'; import messages from './messages'; import './index.scss'; +import { + trackPaintedDoorRecommendationHomeInterestBtnClicked, + trackPaintedDoorRecommendationHomeSkipBtnClicked, +} from '../../widgets/RecommendationsPanel/recsPaintedDoorExpTrack'; export const ModalView = ({ isOpen, onClose, + variation, }) => { const { formatMessage } = useIntl(); + const handleSkipBtnClick = () => trackPaintedDoorRecommendationHomeSkipBtnClicked(variation); + const handleInterestBtnClick = () => trackPaintedDoorRecommendationHomeInterestBtnClicked(variation); + return (
- + {formatMessage(messages.modalSkipButton)} - + + {formatMessage(messages.modalCountMeButton)} + @@ -53,6 +63,7 @@ ModalView.defaultProps = { ModalView.propTypes = { onClose: PropTypes.func.isRequired, isOpen: PropTypes.bool, + variation: PropTypes.string.isRequired, }; export default ModalView; diff --git a/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx index 0034705a..d643d147 100644 --- a/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx @@ -14,15 +14,31 @@ import { findCoursesNavDropdownClicked } from '../hooks'; import ModalView from '../../../components/ModalView'; import messages from '../messages'; +import { useRecommendationsModal } from '../../../components/ModalView/hooks'; +import usePaintedDoorExperimentContext from '../../../RecsPaintedDoorExpContext'; +import { + trackPaintedDoorRecommendationHomeBtnClicked, +} from '../../../widgets/RecommendationsPanel/recsPaintedDoorExpTrack'; -export const CollapseMenuBody = ({ isOpen, isRecommendationsModalOpen, setIsRecommendationsModalOpen }) => { +export const CollapseMenuBody = ({ isOpen }) => { const { formatMessage } = useIntl(); const { authenticatedUser } = React.useContext(AppContext); const dashboard = reduxHooks.useEnterpriseDashboardData(); const { courseSearchUrl } = reduxHooks.usePlatformSettingsData(); + const { isRecommendationsModalOpen, toggleRecommendationsModal } = useRecommendationsModal(); const exploreCoursesClick = findCoursesNavDropdownClicked(urls.baseAppUrl(courseSearchUrl)); + const { + experimentVariation, + isPaintedDoorNavbarBtnVariation, + experimentLoading, + } = usePaintedDoorExperimentContext(); + + const handleSeeAllRecommendationsClick = () => { + toggleRecommendationsModal(); + trackPaintedDoorRecommendationHomeBtnClicked(experimentVariation); + }; return ( isOpen && ( @@ -41,12 +57,14 @@ export const CollapseMenuBody = ({ isOpen, isRecommendationsModalOpen, setIsReco > {formatMessage(messages.discoverNew)} + {(!experimentLoading && isPaintedDoorNavbarBtnVariation) && ( + )} @@ -99,7 +117,11 @@ export const CollapseMenuBody = ({ isOpen, isRecommendationsModalOpen, setIsReco )} - +
) ); @@ -107,13 +129,6 @@ export const CollapseMenuBody = ({ isOpen, isRecommendationsModalOpen, setIsReco CollapseMenuBody.propTypes = { isOpen: PropTypes.bool.isRequired, - isRecommendationsModalOpen: PropTypes.bool, - setIsRecommendationsModalOpen: PropTypes.func, -}; - -CollapseMenuBody.defaultProps = { - isRecommendationsModalOpen: false, - setIsRecommendationsModalOpen: () => {}, }; export default CollapseMenuBody; diff --git a/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx index b259cfe1..d7f635c0 100644 --- a/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx @@ -30,6 +30,13 @@ jest.mock('hooks', () => ({ }, })); +jest.mock('../../../components/ModalView/hooks', () => ({ + useRecommendationsModal: jest.fn(() => ({ + isRecommendationsModalOpen: false, + toggleRecommendationsModal: jest.fn(), + })), +})); + jest.mock('../hooks', () => ({ findCoursesNavDropdownClicked: (url) => jest.fn().mockName(`findCoursesNavDropdownClicked("${url}")`), })); diff --git a/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap b/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap index 1ebed645..2bd93e68 100644 --- a/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap @@ -26,12 +26,6 @@ exports[`CollapseMenuBody render 1`] = ` > Discover New - - `; @@ -107,21 +97,11 @@ exports[`CollapseMenuBody render unauthenticated 1`] = ` > Discover New - - `; diff --git a/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/index.test.jsx.snap b/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/index.test.jsx.snap index c9c9d32f..c1dd8431 100644 --- a/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/index.test.jsx.snap +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/index.test.jsx.snap @@ -20,8 +20,6 @@ exports[`CollapsedHeader renders 1`] = ` `; @@ -45,8 +43,6 @@ exports[`CollapsedHeader renders with isOpen true 1`] = ` `; diff --git a/src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx b/src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx index 7481642e..e9e84a39 100644 --- a/src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx @@ -5,7 +5,6 @@ import { Menu, Close } from '@edx/paragon/icons'; import { IconButton, Icon } from '@edx/paragon'; import { useLearnerDashboardHeaderData, useIsCollapsed } from '../hooks'; -import { useRecommendationsModal } from '../../../components/ModalView/hooks'; import CollapseMenuBody from './CollapseMenuBody'; import BrandLogo from '../BrandLogo'; @@ -16,7 +15,6 @@ export const CollapsedHeader = () => { const { formatMessage } = useIntl(); const isCollapsed = useIsCollapsed(); const { isOpen, toggleIsOpen } = useLearnerDashboardHeaderData(); - const { isRecommendationsModalOpen, toggleRecommendationsModal } = useRecommendationsModal(); return ( isCollapsed && ( @@ -40,8 +38,6 @@ export const CollapsedHeader = () => { ) diff --git a/src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx b/src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx index 395cb6c4..54a5ece4 100644 --- a/src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx +++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx @@ -3,7 +3,6 @@ import { shallow } from 'enzyme'; import CollapsedHeader from '.'; import { useLearnerDashboardHeaderData, useIsCollapsed } from '../hooks'; -import { useRecommendationsModal } from '../../../components/ModalView/hooks'; jest.mock('../BrandLogo', () => jest.fn(() => 'BrandLogo')); jest.mock('./CollapseMenuBody', () => jest.fn(() => 'CollapseMenuBody')); @@ -16,26 +15,14 @@ jest.mock('../hooks', () => ({ })), })); -jest.mock('../../../components/ModalView/hooks', () => ({ - useRecommendationsModal: jest.fn(), -})); - describe('CollapsedHeader', () => { it('renders', () => { - useRecommendationsModal.mockReturnValueOnce({ - isRecommendationsModalOpen: false, - toggleRecommendationsModal: jest.fn(), - }); const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it('render nothing if not collapsed', () => { useIsCollapsed.mockReturnValueOnce(false); - useRecommendationsModal.mockReturnValueOnce({ - isRecommendationsModalOpen: false, - toggleRecommendationsModal: jest.fn(), - }); const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -45,10 +32,6 @@ describe('CollapsedHeader', () => { isOpen: true, toggleIsOpen: jest.fn().mockName('toggleIsOpen'), }); - useRecommendationsModal.mockReturnValueOnce({ - isRecommendationsModalOpen: false, - toggleRecommendationsModal: jest.fn(), - }); const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap b/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap index 21836c61..9426255d 100644 --- a/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap +++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap @@ -33,13 +33,6 @@ exports[`ExpandedHeader render 1`] = ` > Discover New - @@ -53,10 +46,6 @@ exports[`ExpandedHeader render 1`] = ` - `; diff --git a/src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx b/src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx index 39248e7d..dece55ca 100644 --- a/src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx +++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx @@ -14,6 +14,10 @@ import { useRecommendationsModal } from '../../../components/ModalView/hooks'; import messages from '../messages'; import ModalView from '../../../components/ModalView'; import BrandLogo from '../BrandLogo'; +import usePaintedDoorExperimentContext from '../../../RecsPaintedDoorExpContext'; +import { + trackPaintedDoorRecommendationHomeBtnClicked, +} from '../../../widgets/RecommendationsPanel/recsPaintedDoorExpTrack'; export const ExpandedHeader = () => { const { formatMessage } = useIntl(); @@ -22,6 +26,21 @@ export const ExpandedHeader = () => { const { isRecommendationsModalOpen, toggleRecommendationsModal } = useRecommendationsModal(); const exploreCoursesClick = findCoursesNavClicked(urls.baseAppUrl(courseSearchUrl)); + const { + experimentVariation, + isPaintedDoorNavbarBtnVariation, + experimentLoading, + } = usePaintedDoorExperimentContext(); + + console.log('test ', { + experimentVariation, + isPaintedDoorNavbarBtnVariation, + experimentLoading, + }); + const handleSeeAllRecommendationsClick = () => { + toggleRecommendationsModal(); + trackPaintedDoorRecommendationHomeBtnClicked(experimentVariation); + }; return ( !isCollapsed && ( @@ -54,13 +73,15 @@ export const ExpandedHeader = () => { > {formatMessage(messages.discoverNew)} + {(!experimentLoading && isPaintedDoorNavbarBtnVariation) && ( + )} + {!experimentLoading && isPaintedDoorWidgetBtnVariation ? ( + + ) : ( + + )} - + ); }; @@ -59,8 +93,6 @@ LoadedView.propTypes = { marketingUrl: PropTypes.string, })).isRequired, isControl: PropTypes.oneOf([true, false, null]), - setIsRecommendationsModalOpen: PropTypes.func.isRequired, - isRecommendationsModalOpen: PropTypes.bool.isRequired, }; export default LoadedView; diff --git a/src/widgets/RecommendationsPanel/LoadedView.test.jsx b/src/widgets/RecommendationsPanel/LoadedView.test.jsx index 555965d7..6638faa3 100644 --- a/src/widgets/RecommendationsPanel/LoadedView.test.jsx +++ b/src/widgets/RecommendationsPanel/LoadedView.test.jsx @@ -19,6 +19,12 @@ jest.mock('./track', () => ({ findCoursesWidgetClicked: (href) => jest.fn().mockName(`track.findCoursesWidgetClicked('${href}')`), })); jest.mock('./components/CourseCard', () => 'CourseCard'); +jest.mock('../../components/ModalView/hooks', () => ({ + useRecommendationsModal: jest.fn(() => ({ + isRecommendationsModalOpen: false, + toggleRecommendationsModal: jest.fn(), + })), +})); describe('RecommendationsPanel LoadedView', () => { const props = { diff --git a/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap b/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap index 6676fa5f..26268187 100644 --- a/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap +++ b/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap @@ -64,17 +64,16 @@ exports[`RecommendationsPanel LoadedView snapshot with personalize recommendatio className="text-center explore-courses-btn" > - `; @@ -142,16 +141,15 @@ exports[`RecommendationsPanel LoadedView snapshot without personalize recommenda className="text-center explore-courses-btn" > - `; diff --git a/src/widgets/RecommendationsPanel/index.jsx b/src/widgets/RecommendationsPanel/index.jsx index 47bfb362..4bec621c 100644 --- a/src/widgets/RecommendationsPanel/index.jsx +++ b/src/widgets/RecommendationsPanel/index.jsx @@ -4,7 +4,6 @@ import LookingForChallengeWidget from 'widgets/LookingForChallengeWidget'; import LoadingView from './LoadingView'; import LoadedView from './LoadedView'; import hooks from './hooks'; -import { useRecommendationsModal } from '../../components/ModalView/hooks'; export const RecommendationsPanel = () => { const { @@ -15,8 +14,6 @@ export const RecommendationsPanel = () => { isLoading, } = hooks.useRecommendationPanelData(); - const { isRecommendationsModalOpen, toggleRecommendationsModal } = useRecommendationsModal(); - if (isLoading) { return (); } @@ -25,8 +22,6 @@ export const RecommendationsPanel = () => { ); } diff --git a/src/widgets/RecommendationsPanel/recsPaintedDoorExpTrack.js b/src/widgets/RecommendationsPanel/recsPaintedDoorExpTrack.js new file mode 100644 index 00000000..d201a013 --- /dev/null +++ b/src/widgets/RecommendationsPanel/recsPaintedDoorExpTrack.js @@ -0,0 +1,35 @@ +import { StrictDict } from 'utils'; +import { createEventTracker } from 'data/services/segment/utils'; + +export const eventNames = StrictDict({ + variationGroup: 'edx.bi.user.recommendation_home.variation.group', + recommendationHomeBtnClicked: 'edx.bi.user.recommendation_home.btn.clicked', + recommendationHomeModalInterestBtnClicked: 'edx.bi.user.recommendation_home.modal.interest_btn.clicked', + recommendationHomeModalSkipBtnClicked: 'edx.bi.user.recommendation_home.modal.skip_btn.clicked', +}); + +export const trackPaintedDoorVariationGroup = (variation) => { + createEventTracker(eventNames.variationGroup, { + variation, + page: 'dashboard', + }); +}; + +export const trackPaintedDoorRecommendationHomeBtnClicked = (variation) => { + createEventTracker(eventNames.recommendationHomeBtnClicked, { + variation, + page: 'dashboard', + }); +}; + +export const trackPaintedDoorRecommendationHomeInterestBtnClicked = (variation) => { + createEventTracker(eventNames.recommendationHomeModalInterestBtnClicked, { + variation, + }); +}; + +export const trackPaintedDoorRecommendationHomeSkipBtnClicked = (variation) => { + createEventTracker(eventNames.recommendationHomeModalSkipBtnClicked, { + variation, + }); +}; diff --git a/src/widgets/RecommendationsPanel/track.js b/src/widgets/RecommendationsPanel/track.js index 7f57a725..2cdc9f93 100644 --- a/src/widgets/RecommendationsPanel/track.js +++ b/src/widgets/RecommendationsPanel/track.js @@ -4,6 +4,7 @@ import track from 'tracking'; export const eventNames = StrictDict({ recommendedCourseClicked: 'edx.bi.user.recommended.course.click', + recommendationsUnavailable: 'edx.bi.user.recommendations.unavailable', }); export const linkNames = StrictDict({ @@ -23,7 +24,15 @@ export const recommendedCourseClicked = (courseKey, isControl, href) => createLi href, ); +export const trackRecommendationUnavailable = () => { + createEventTracker(eventNames.recommendationsUnavailable, { + type: 'personalized', + page: 'dashboard', + }); +}; + export default { findCoursesWidgetClicked, recommendedCourseClicked, + trackRecommendationUnavailable, };