@openedx/frontend-app-learner-dashboard 1.0.0-alpha.0

package/src/tracking/trackers/course.test.js

@@ -0,0 +1,80 @@
+import { keyStore } from 'utils';
+import { createEventTracker, createLinkTracker } from 'data/services/segment/utils';
+import { categories, eventNames } from '../constants';
+import * as trackers from './course';
+
+jest.mock('data/services/segment/utils', () => ({
+  createEventTracker: jest.fn(args => ({ createEventTracker: args })),
+  createLinkTracker: jest.fn((cb, href) => ({ createLinkTracker: { cb, href } })),
+}));
+
+const testEventName = 'test-event-name';
+const courseId = 'test-course-id';
+const options = { test: 'options' };
+const href = 'test-href';
+const moduleKeys = keyStore(trackers);
+
+describe('course trackers', () => {
+  describe('Utilities and helpers', () => {
+    describe('courseEventTracker', () => {
+      it('calls createEventTracker w/ label, category and passed options', () => {
+        expect(trackers.courseEventTracker(testEventName, courseId, options)).toEqual(
+          createEventTracker(
+            testEventName,
+            { category: categories.dashboard, label: courseId, test: options.test },
+          ),
+        );
+      });
+      it('defaults to passing an empty object for options if not provided', () => {
+        expect(trackers.courseEventTracker(testEventName, courseId)).toEqual(
+          createEventTracker(testEventName, { category: categories.dashboard, label: courseId }),
+        );
+      });
+    });
+    describe('courseLinkTracker', () => {
+      it('returns link tracker creation method', () => {
+        expect(trackers.courseLinkTracker(testEventName)(courseId, href)).toEqual(
+          createLinkTracker(trackers.courseEventTracker(testEventName, courseId), href),
+        );
+      });
+    });
+  });
+  describe('Non-link events', () => {
+    describe('courseOptionsDropdownClicked', () => {
+      it('creates course event tracker for courseOptionsDropdownClicked event', () => {
+        expect(trackers.courseOptionsDropdownClicked(courseId)).toEqual(
+          trackers.courseEventTracker(eventNames.courseOptionsDropdownClicked, courseId),
+        );
+      });
+    });
+  });
+  describe('Link events', () => {
+    const courseLinkTracker = (eventName) => (...args) => ({
+      courseLinkTracker: { eventName, ...args },
+    });
+    beforeEach(() => {
+      jest.spyOn(trackers, moduleKeys.courseLinkTracker).mockImplementationOnce(courseLinkTracker);
+    });
+    describe('courseImageClicked', () => {
+      it('creates courseLinkTracker for courseImageClicked event', () => {
+        expect(trackers.courseImageClicked(courseId, href)).toEqual(
+          courseLinkTracker(eventNames.courseImageClicked)(courseId, href),
+        );
+      });
+    });
+    describe('courseTitleClicked', () => {
+      it('creates courseLinkTracker for courseTitleClicked event', () => {
+        expect(trackers.courseTitleClicked(courseId, href)).toEqual(
+          courseLinkTracker(eventNames.courseTitleClicked)(courseId, href),
+        );
+      });
+    });
+    describe('enterCourseClicked', () => {
+      it('creates courseLinkTracker for enterCourseClicked event', () => {
+        expect(trackers.enterCourseClicked(courseId, href)).toEqual(
+          courseLinkTracker(eventNames.enterCourseClicked)(courseId, href),
+        );
+      });
+    });
+  });
+});

package/src/tracking/trackers/credit.js

@@ -0,0 +1,20 @@
+import { createEventTracker, createLinkTracker } from '../../data/services/segment/utils';
+import { creditPurchaseUrl } from '../../data/services/lms/urls';
+import { categories, eventNames } from '../constants';
+
+/**
+ * Create event tracker for purchase credit event
+ * @param {string} fromCourseRun - course run identifier for leaving course
+ * @return {callback} - callback that triggers the event tracker
+ */
+export const purchase = (courseId) => createLinkTracker(
+  createEventTracker(eventNames.purchaseCredit, {
+    label: courseId,
+    category: categories.credit,
+  }),
+  creditPurchaseUrl(courseId),
+);
+
+export default {
+  purchase,
+};

package/src/tracking/trackers/credit.test.js

@@ -0,0 +1,38 @@
+import { createEventTracker, createLinkTracker } from 'data/services/segment/utils';
+import { creditPurchaseUrl } from 'data/services/lms/urls';
+
+import { eventNames, categories } from '../constants';
+import * as trackers from './credit';
+
+jest.mock('data/services/segment/utils', () => ({
+  createEventTracker: jest.fn(args => ({ createEventTracker: args })),
+  createLinkTracker: jest.fn((cb, href) => ({ createLinkTracker: { cb, href } })),
+}));
+
+jest.mock('data/services/lms/urls', () => ({
+  creditPurchaseUrl: jest.fn(courseId => `credit-purchase-url/${courseId}`),
+}));
+
+const courseId = 'test-course-id';
+
+describe('credit trackers', () => {
+  describe('purchase', () => {
+    it('creates a link tracker for purchase credit event with category and label', () => {
+      const purchasedEvent = trackers.purchase(courseId);
+
+      expect(creditPurchaseUrl).toHaveBeenCalledWith(courseId);
+      expect(createEventTracker).toHaveBeenCalledWith(eventNames.purchaseCredit, {
+        label: courseId,
+        category: categories.credit,
+      });
+
+      expect(purchasedEvent).toEqual(createLinkTracker(
+        createEventTracker(eventNames.purchaseCredit, {
+          label: courseId,
+          category: categories.credit,
+        }),
+        creditPurchaseUrl(courseId),
+      ));
+    });
+  });
+});

package/src/tracking/trackers/engagement.js

@@ -0,0 +1,23 @@
+import { createEventTracker } from '../../data/services/segment/utils';
+import { categories, eventNames } from '../constants';
+
+export const engagementOptions = {
+  category: categories.userEngagement,
+  displayName: 'v1',
+};
+
+/**
+ * Creates callback which sends segment event for unenroll with reason event
+ * @param {string} courseId - course run identifier
+ * @param {string} reason - unenroll reason
+ * @param {bool} isEntitlement - is the course an entitlement course?
+ * @return {callback} - callback that will send the appropriate segment message.
+ */
+export const unenrollReason = (courseId, reason, isEntitlement) => createEventTracker(
+  isEntitlement ? eventNames.entitlementUnenrollReason : eventNames.unenrollReason,
+  { reason, course_id: courseId, ...engagementOptions },
+);
+
+export default {
+  unenrollReason,
+};

package/src/tracking/trackers/engagement.test.js

@@ -0,0 +1,31 @@
+import { createEventTracker } from 'data/services/segment/utils';
+import { eventNames } from '../constants';
+import * as trackers from './engagement';
+
+jest.mock('data/services/segment/utils', () => ({
+  createEventTracker: jest.fn(args => ({ createEventTracker: args })),
+}));
+
+const courseId = 'test-course-id';
+const reason = 'test-reason';
+
+describe('engagement trackers', () => {
+  describe('unenrollReason', () => {
+    test('creates event tracker for unenrollReason if not entitlement', () => {
+      expect(trackers.unenrollReason(courseId, reason, false)).toEqual(
+        createEventTracker(
+          eventNames.unenrollReason,
+          { reason, course_id: courseId, ...trackers.engagementOptions },
+        ),
+      );
+    });
+    test('creates event tracker for entitlementUnenrollReason if entitlement', () => {
+      expect(trackers.unenrollReason(courseId, reason, false)).toEqual(
+        createEventTracker(
+          eventNames.unenrollReason,
+          { reason, course_id: courseId, ...trackers.engagementOptions },
+        ),
+      );
+    });
+  });
+});

package/src/tracking/trackers/entitlements.js

@@ -0,0 +1,34 @@
+import { createEventTracker } from '../../data/services/segment/utils';
+import { eventNames } from '../constants';
+
+/**
+ * Create event tracker for leave entitlement session event
+ * @param {string} fromCourseRun - course run identifier for leaving course
+ * @return {callback} - callback that triggers the event tracker
+ */
+export const leaveSession = (fromCourseRun) => (
+  createEventTracker(eventNames.leaveSession, { fromCourseRun, toCourseRun: null })
+);
+/**
+ * Create event tracker for new entitlement session event
+ * @param {string} toCourseRun - course run identifier for new course
+ * @return {callback} - callback that triggers the event tracker
+ */
+export const newSession = (toCourseRun) => (
+  createEventTracker(eventNames.newSession, { fromCourseRun: null, toCourseRun })
+);
+/**
+ * Create event tracker for switch entitlement session event
+ * @param {string} fromCourseRun - course run identifier for leaving course
+ * @param {string} toCourseRun - course run identifier for new course
+ * @return {callback} - callback that triggers the event tracker
+ */
+export const switchSession = (fromCourseRun, toCourseRun) => (
+  createEventTracker(eventNames.switchSession, { fromCourseRun, toCourseRun })
+);
+
+export default {
+  leaveSession,
+  newSession,
+  switchSession,
+};

package/src/tracking/trackers/entitlements.test.js

@@ -0,0 +1,34 @@
+import { createEventTracker } from 'data/services/segment/utils';
+import { eventNames } from '../constants';
+import * as trackers from './entitlements';
+
+jest.mock('data/services/segment/utils', () => ({
+  createEventTracker: jest.fn(args => ({ createEventTracker: args })),
+}));
+
+const fromCourseRun = 'test-from-course-run';
+const toCourseRun = 'test-to-course-run';
+
+describe('entitlements trackers', () => {
+  describe('leaveSession', () => {
+    it('creates event tracker for leaveSession event', () => {
+      expect(trackers.leaveSession(fromCourseRun)).toEqual(
+        createEventTracker(eventNames.leaveSession, { fromCourseRun, toCourseRun: null }),
+      );
+    });
+  });
+  describe('newSession', () => {
+    it('creates event tracker for newSession event', () => {
+      expect(trackers.newSession(toCourseRun)).toEqual(
+        createEventTracker(eventNames.newSession, { fromCourseRun: null, toCourseRun }),
+      );
+    });
+  });
+  describe('switchSession', () => {
+    it('creates event tracker for switchSession event', () => {
+      expect(trackers.switchSession(fromCourseRun, toCourseRun)).toEqual(
+        createEventTracker(eventNames.switchSession, { fromCourseRun, toCourseRun }),
+      );
+    });
+  });
+});

package/src/tracking/trackers/filter.js

@@ -0,0 +1,21 @@
+import { createEventTracker } from '../../data/services/segment/utils';
+import { categories, eventNames } from '../constants';
+
+export const filterClicked = () => createEventTracker(
+  eventNames.filterClicked,
+  { category: categories.filter },
+)();
+
+export const filterOptionSelected = (filters = []) => createEventTracker(
+  eventNames.filterOptionSelected,
+  {
+    category: categories.filter,
+    // make sure to clone before sorting
+    filters: [...filters].sort(),
+  },
+)();
+
+export default {
+  filterClicked,
+  filterOptionSelected,
+};

package/src/tracking/trackers/filter.test.js

@@ -0,0 +1,45 @@
+import { createEventTracker } from 'data/services/segment/utils';
+import { eventNames, categories } from '../constants';
+import * as trackers from './filter';
+
+jest.mock('data/services/segment/utils', () => ({
+  createEventTracker: jest.fn(() => () => {}),
+}));
+
+const filters = ['test-filter-2', 'test-filter-1'];
+
+describe('filter trackers', () => {
+  afterEach(() => createEventTracker.mockClear());
+  test('filter clicked event', () => {
+    trackers.filterClicked();
+    expect(createEventTracker).toHaveBeenCalledWith(eventNames.filterClicked, {
+      category: categories.filter,
+    });
+  });
+
+  describe('filter option selected event', () => {
+    test('with filter', () => {
+      trackers.filterOptionSelected(filters);
+      expect(createEventTracker).toHaveBeenCalledWith(
+        eventNames.filterOptionSelected,
+        {
+          category: categories.filter,
+          filters: [filters[1], filters[0]],
+        },
+      );
+      // make sure filter isn't using the original array
+      expect(createEventTracker.mock.calls[0][1].filters).not.toBe(filters);
+    });
+
+    test('without filter', () => {
+      trackers.filterOptionSelected();
+      expect(createEventTracker).toHaveBeenCalledWith(
+        eventNames.filterOptionSelected,
+        {
+          category: categories.filter,
+          filters: [],
+        },
+      );
+    });
+  });
+});

package/src/tracking/trackers/findCourses.js

@@ -0,0 +1,16 @@
+import { createLinkTracker, createEventTracker } from '../../data/services/segment/utils';
+import { categories, eventNames } from '../constants';
+
+export const findCoursesClicked = (href, args = {}) => createLinkTracker(
+  createEventTracker(eventNames.findCoursesClicked, {
+    pageName: 'learner_home',
+    linkType: 'button',
+    linkCategory: categories.searchButton,
+    ...args,
+  }),
+  href,
+);
+
+export default {
+  findCoursesClicked,
+};

package/src/tracking/trackers/findCourses.test.js

@@ -0,0 +1,45 @@
+import { createLinkTracker, createEventTracker } from 'data/services/segment/utils';
+import { findCoursesClicked } from './findCourses';
+import { categories, eventNames } from '../constants';
+
+jest.mock('data/services/segment/utils', () => ({
+  createEventTracker: jest.fn((args) => ({ createEventTracker: args })),
+  createLinkTracker: jest.fn((args) => ({ createLinkTracker: args })),
+}));
+
+describe('find courses trackers', () => {
+  const url = 'http://example.com';
+  const defaultProps = {
+    pageName: 'learner_home',
+    linkType: 'button',
+    linkCategory: categories.searchButton,
+  };
+  beforeEach(() => {
+    createEventTracker.mockClear();
+    createLinkTracker.mockClear();
+  });
+  test('no args', () => {
+    findCoursesClicked(url);
+    expect(createEventTracker).toHaveBeenCalledWith(eventNames.findCoursesClicked, defaultProps);
+    expect(createLinkTracker).toHaveBeenCalledWith(
+      createEventTracker(eventNames.findCoursesClicked, defaultProps),
+      url,
+    );
+  });
+
+  test('with args', () => {
+    const args = { linkName: 'foo' };
+    findCoursesClicked(url, args);
+    expect(createEventTracker).toHaveBeenCalledWith(eventNames.findCoursesClicked, {
+      ...defaultProps,
+      ...args,
+    });
+    expect(createLinkTracker).toHaveBeenCalledWith(
+      createEventTracker(eventNames.findCoursesClicked, {
+        ...defaultProps,
+        ...args,
+      }),
+      url,
+    );
+  });
+});

package/src/tracking/trackers/socialShare.js

@@ -0,0 +1,11 @@
+import api from '../../data/services/lms/api';
+
+/**
+ * Track Social Share event click.
+ * @param {string} courseId - course run identifier
+ * @param {string} site - sharing destination ('facebook', 'twitter')
+ * @return {func} - Callback that tracks the event when fired.
+ */
+export const shareClicked = (courseId, site) => () => api.logShare({ courseId, site });
+
+export default shareClicked;

package/src/tracking/trackers/socialShare.test.js

@@ -0,0 +1,17 @@
+import api from 'data/services/lms/api';
+import * as trackers from './socialShare';
+
+jest.mock('data/services/lms/api', () => ({
+  logShare: jest.fn(args => ({ logShare: args })),
+}));
+
+const courseId = 'test-course-id';
+const site = 'test-site';
+
+describe('entitlements trackers', () => {
+  describe('shareClicked', () => {
+    it('creates event tracker for trackShare api event', () => {
+      expect(trackers.shareClicked(courseId, site)()).toEqual(api.logShare({ courseId, site }));
+    });
+  });
+});

package/src/utils/StrictDict.js

@@ -0,0 +1,19 @@
+const strictGet = (target, name) => {
+  if (name === Symbol.toStringTag) {
+    return target;
+  }
+
+  if (name === '$$typeof') {
+    return typeof target;
+  }
+
+  if (name in target || name === '_reactFragment') {
+    return target[name];
+  }
+
+  return undefined;
+};
+
+const StrictDict = (dict) => new Proxy(dict, { get: strictGet });
+
+export default StrictDict;

package/src/utils/StrictDict.test.js

@@ -0,0 +1,66 @@
+import StrictDict from './StrictDict';
+
+const value1 = 'valUE1';
+const value2 = 'vALue2';
+const key1 = 'Key1';
+const key2 = 'keY2';
+
+jest.spyOn(window, 'Error').mockImplementation(error => ({ stack: error }));
+
+describe('StrictDict', () => {
+  let consoleError;
+  let consoleLog;
+  let windowError;
+  beforeEach(() => {
+    consoleError = window.console.error;
+    consoleLog = window.console.lot;
+    windowError = window.Error;
+    window.console.error = jest.fn();
+    window.console.log = jest.fn();
+    window.Error = jest.fn(error => ({ stack: error }));
+  });
+  afterAll(() => {
+    window.console.error = consoleError;
+    window.console.log = consoleLog;
+    window.Error = windowError;
+  });
+  const rawDict = {
+    [key1]: value1,
+    [key2]: value2,
+  };
+  const dict = StrictDict(rawDict);
+  it('provides key access like a normal dict object', () => {
+    expect(dict[key1]).toEqual(value1);
+  });
+  it('allows key listing', () => {
+    expect(Object.keys(dict)).toEqual([key1, key2]);
+  });
+  it('allows item listing', () => {
+    expect(Object.values(dict)).toEqual([value1, value2]);
+  });
+  it('allows stringification', () => {
+    expect(dict.toString()).toEqual(rawDict.toString());
+    expect({ ...dict }).toEqual({ ...rawDict });
+  });
+  it('allows type querying', () => {
+    expect(typeof dict).toEqual('object');
+    expect(dict.$$typeof).toEqual('object');
+  });
+  it('allows entry listing', () => {
+    expect(Object.entries(dict)).toEqual(Object.entries(rawDict));
+  });
+  describe('missing key', () => {
+    it('logs error with target, name, and error stack', () => {
+      // eslint-ignore-next-line no-unused-vars
+      const callBadKey = () => dict.fakeKey;
+      callBadKey();
+      expect(window.console.error.mock.calls).toEqual([
+        [{ target: dict, name: 'fakeKey' }],
+        [Error('invalid property "fakeKey"').stack],
+      ]);
+    });
+    it('returns undefined', () => {
+      expect(dict.fakeKey).toEqual(undefined);
+    });
+  });
+});

package/src/utils/dateFormatter.js

@@ -0,0 +1,9 @@
+import moment from 'moment';
+
+export const dateFormatter = (formatDate, date) => formatDate(moment(date).toDate(), {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+
+export default dateFormatter;

package/src/utils/hooks.js

@@ -0,0 +1,12 @@
+import { useIntl } from '@openedx/frontend-base';
+
+import dateFormatter from './dateFormatter';
+
+export const useFormatDate = () => {
+  const { formatDate } = useIntl();
+  return (date) => dateFormatter(formatDate, date);
+};
+
+export default {
+  useFormatDate,
+};

package/src/utils/index.js

@@ -0,0 +1,5 @@
+export const nullMethod = () => ({});
+
+export { default as StrictDict } from './StrictDict';
+export { default as keyStore } from './keyStore';
+export { default as dateFormatter } from './dateFormatter';

package/src/utils/keyStore.js

@@ -0,0 +1,10 @@
+import StrictDict from './StrictDict';
+
+const keyStore = (collection) => StrictDict(
+  Object.keys(collection).reduce(
+    (obj, key) => ({ ...obj, [key]: key }),
+    {},
+  ),
+);
+
+export default keyStore;

package/src/widgets/LearnerDashboardHeader/ConfirmEmailBanner/ConfirmEmailBanner.scss

@@ -0,0 +1,3 @@
+.confirm-email-now-button {
+  text-decoration: underline !important;
+}