Add ability to store and retrieve course run key

Add course run key to POST request
Change text based on return location
Minor style fixes

src/id-verification/IdVerification.messages.js

@@ -336,11 +336,16 @@ const messages = defineMessages({
     defaultMessage: 'We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 1-2 days). In the meantime, you can still access all available course content.',
     description: 'Text confirming that ID verification request has been received.',
   },
-  'id.verification.return': {
-    id: 'id.verification.submitted.return',
+  'id.verification.return.dashboard': {
+    id: 'id.verification.return.dashboard',
     defaultMessage: 'Return to Your Dashboard',
     description: 'Button to return to the dashboard.',
   },
+  'id.verification.return.course': {
+    id: 'id.verification.return.course',
+    defaultMessage: 'Return to Course',
+    description: 'Return to the course which ID verification was accessed from.',
+  },
 });
 
 export default messages;

src/id-verification/IdVerificationPage.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { Route, Switch, Redirect, useRouteMatch } from 'react-router-dom';
+import { Route, Switch, Redirect, useRouteMatch, useLocation } from 'react-router-dom';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Modal, Button } from '@edx/paragon';
 import { idVerificationSelector } from './data/selectors';
@@ -22,8 +22,17 @@ import messages from './IdVerification.messages';
 // eslint-disable-next-line react/prefer-stateless-function
 function IdVerificationPage(props) {
   const { path } = useRouteMatch();
+  const { search } = useLocation();
+
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  // Course run key is passed as a query string
+  useEffect(() => {
+    if (search) {
+      sessionStorage.setItem('courseRunKey', search.substring(1));
+    }
+  }, [search]);
+
   return (
     <>
       {/* If user reloads, redirect to the beginning of the process */}
@@ -33,9 +42,6 @@ function IdVerificationPage(props) {
           <div className="col-lg-6 col-md-8">
             <IdVerificationContextProvider>
               <Switch>
-                <Route exact path={path}>
-                  <Redirect to={`${path}/review-requirements`} />
-                </Route>
                 <Route path={`${path}/review-requirements`} component={ReviewRequirementsPanel} />
                 <Route path={`${path}/request-camera-access`} component={RequestCameraAccessPanel} />
                 <Route path={`${path}/portrait-photo-context`} component={PortraitPhotoContextPanel} />

src/id-verification/data/service.js

@@ -45,6 +45,7 @@ export async function submitIdVerification(verificationData) {
     facePhotoFile: 'face_image',
     idPhotoFile: 'photo_id_image',
     idPhotoName: 'full_name',
+    courseRunKey: 'course_key',
   };
   const postData = {};
   // Don't include blank/null/undefined values.

src/id-verification/panels/SubmittedPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
@@ -17,7 +17,19 @@ function Survey() {
 }
 
 function SubmittedPanel(props) {
+  const [returnUrl, setReturnUrl] = useState('dashboard');
+  const [returnText, setReturnText] = useState('id.verification.return.dashboard');
   const panelSlug = 'submitted';
+
+  // If the user accessed IDV through a course,
+  // link back to that course rather than the dashboard
+  useEffect(() => {
+    if (sessionStorage.getItem('courseRunKey')) {
+      setReturnUrl(`courses/${sessionStorage.getItem('courseRunKey')}`);
+      setReturnText('id.verification.return.course');
+    }
+  }, []);
+
   return (
     <BasePanel
       name={panelSlug}
@@ -26,8 +38,8 @@ function SubmittedPanel(props) {
       <p>
         {props.intl.formatMessage(messages['id.verification.submitted.text'])}
       </p>
-      <a className="btn btn-primary" href={`${getConfig().LMS_BASE_URL}/dashboard`} style={{ marginBottom: 50 }}>
-        {props.intl.formatMessage(messages['id.verification.return'])}
+      <a className="btn btn-primary" href={`${getConfig().LMS_BASE_URL}/${returnUrl}`} style={{ marginBottom: 50 }}>
+        {props.intl.formatMessage(messages[returnText])}
       </a>
       <Survey />
     </BasePanel>

src/id-verification/panels/SummaryPanel.jsx

@@ -29,6 +29,7 @@ function SummaryPanel(props) {
         facePhotoFile,
         idPhotoFile,
         idPhotoName: nameToBeUsed,
+        courseRunKey: sessionStorage.getItem('courseRunKey'),
       };
       const result = await submitIdVerification(verificationData);
       if (result.success) {