Keep the query params intact within the app. (#201)

Currently, if the user lands on one page with course_id and enroll action
params and navigates to another page with the MFE, the query params
are not passed to that other page and resulting in not enrolling into
the course.

Also add these query params into login and register payload.

VAN-415

src/data/constants.js

@@ -24,3 +24,7 @@ export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+
                                  + '|^"([\\001-\\010\\013\\014\\016-\\037!#-\\[\\]-\\177]|\\\\[\\001-\\011\\013\\014\\016-\\177])*"'
                                  + ')@((?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\\.)+)(?:[A-Z0-9-]{2,63})'
                                  + '|\\[(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)){3}\\]$';
+
+// Query string parameters that can be passed to LMS to manage
+// things like auto-enrollment upon login and registration.
+export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next'];

src/data/utils/dataUtils.js

@@ -1,5 +1,8 @@
 // Utility functions
 
+import * as QueryString from 'query-string';
+import { AUTH_PARAMS } from '../constants';
+
 export default function processLink(link) {
   let matches;
   link.replace(/(.*?)<a href=["']([^"']*).*?>([^<]+)<\/a>(.*)/g, function () { // eslint-disable-line func-names
@@ -40,3 +43,25 @@ export const processTpaHintURL = (params) => {
   }
   return tpaHint;
 };
+
+export const updatePathWithQueryParams = (path) => {
+  const queryParams = window.location.search;
+
+  if (!queryParams) {
+    return path;
+  }
+
+  return `${path}${queryParams}`;
+};
+
+export const getAllPossibleQueryParam = () => {
+  const urlParams = QueryString.parse(document.location.search);
+  const params = {};
+  Object.entries(urlParams).forEach(([key, value]) => {
+    if (AUTH_PARAMS.indexOf(key) > -1) {
+      params[key] = value;
+    }
+  });
+
+  return params;
+};

src/data/utils/dataUtils.test.js

@@ -1,4 +1,5 @@
-import processLink from './dataUtils';
+import { LOGIN_PAGE } from '../constants';
+import processLink, { updatePathWithQueryParams } from './dataUtils';
 
 describe('processLink', () => {
   it('should use the provided processLink function to', () => {
@@ -12,3 +13,20 @@ describe('processLink', () => {
     expect(matches[2]).toEqual(expectedText);
   });
 });
+
+describe('updatePathWithQueryParams', () => {
+  it('should append query params into the path', () => {
+    const params = '?course_id=testCourseId';
+    const expectedPath = `${LOGIN_PAGE}${params}`;
+
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: 'http://localhost/',
+        search: params,
+      },
+    });
+    const updatedPath = updatePathWithQueryParams(LOGIN_PAGE);
+
+    expect(updatedPath).toEqual(expectedPath);
+  });
+});

src/data/utils/index.js

@@ -1,2 +1,8 @@
-export { default, getTpaProvider, processTpaHintURL } from './dataUtils';
+export {
+  default,
+  getTpaProvider,
+  processTpaHintURL,
+  updatePathWithQueryParams,
+  getAllPossibleQueryParam,
+} from './dataUtils';
 export { default as AsyncActionType } from './reduxUtils';