feat: add support for a technical support URL in the LTI-based provid…

…er download instructions (#127)

This commit adds support for displaying a technical support URL for LTI-based providers on the download instructions interstitial. The download instructions will display a technical support URL when it is returned from the proctoring settings backend endpoint. If the technical support URL is not available, then the technical support email and technical support phone number will be used instead.

src/data/__snapshots__/redux.test.jsx.snap

@@ -84,6 +84,7 @@ Object {
       "provider_name": "",
       "provider_tech_support_email": "",
       "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
     },
     "timeIsOver": false,
   },
@@ -129,6 +130,7 @@ Object {
       "provider_name": "",
       "provider_tech_support_email": "",
       "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
     },
     "timeIsOver": false,
   },
@@ -148,6 +150,7 @@ Object {
   "provider_name": "",
   "provider_tech_support_email": "",
   "provider_tech_support_phone": "",
+  "provider_tech_support_url": "",
 }
 `;
 
@@ -302,6 +305,7 @@ Object {
       "provider_name": "",
       "provider_tech_support_email": "",
       "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
     },
     "timeIsOver": false,
   },
@@ -370,6 +374,7 @@ Object {
       "provider_name": "",
       "provider_tech_support_email": "",
       "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
     },
     "timeIsOver": false,
   },

src/data/slice.js

@@ -17,6 +17,7 @@ export const examSlice = createSlice({
       },
       provider_tech_support_email: '',
       provider_tech_support_phone: '',
+      provider_tech_support_url: '',
       provider_name: '',
       learner_notification_from_email: '',
       integration_specific_email: '',

src/instructions/Instructions.test.jsx

@@ -723,7 +723,7 @@ describe('SequenceExamWrapper', () => {
     expect(screen.getByText('You have submitted this proctored exam for review')).toBeInTheDocument();
   });
 
-  it('Shows correct download instructions for LTI provider if attempt status is created', () => {
+  it('Shows correct download instructions for LTI provider if attempt status is created, with support email and phone', () => {
     store.getState = () => ({
       examState: Factory.build('examState', {
         activeAttempt: {},
@@ -760,6 +760,46 @@ describe('SequenceExamWrapper', () => {
     expect(screen.getByText('Start Exam')).toBeInTheDocument();
   });
 
+  it('Shows correct download instructions for LTI provider if attempt status is created with support URL', () => {
+    store.getState = () => ({
+      examState: Factory.build('examState', {
+        activeAttempt: {},
+        proctoringSettings: Factory.build('proctoringSettings', {
+          provider_name: 'LTI Provider',
+          provider_tech_support_email: '[email protected]',
+          provider_tech_support_phone: '+123456789',
+          provider_tech_support_url: 'www.example.com',
+        }),
+        exam: Factory.build('exam', {
+          is_proctored: true,
+          type: ExamType.PROCTORED,
+          attempt: Factory.build('attempt', {
+            attempt_status: ExamStatus.CREATED,
+          }),
+        }),
+      }),
+    });
+
+    render(
+      <ExamStateProvider>
+        <Instructions>
+          <div>Sequence</div>
+        </Instructions>
+      </ExamStateProvider>,
+      { store },
+    );
+
+    expect(screen.getByText(
+      'If you have issues relating to proctoring, you can contact LTI Provider technical support by visiting',
+      { exact: false },
+    )).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'www.example.com in a new tab' })).toHaveAttribute('href', 'www.example.com');
+
+    expect(screen.getByText('Set up and start your proctored exam.')).toBeInTheDocument();
+    expect(screen.getByText('Start System Check')).toBeInTheDocument();
+    expect(screen.getByText('Start Exam')).toBeInTheDocument();
+  });
+
   it('Hides support contact info on download instructions for LTI provider if not provided', () => {
     store.getState = () => ({
       examState: Factory.build('examState', {

src/instructions/proctored_exam/download-instructions/LtiProviderInstructions.jsx

@@ -1,47 +1,70 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@edx/paragon';
 
 const LtiProviderExamInstructions = ({
-  providerName, supportEmail, supportPhone,
-}) => (
-  <>
-    <p>
-      <FormattedMessage
-        id="exam.DownloadSoftwareProctoredExamInstructions.text1"
-        defaultMessage={'Note: As part of the proctored exam setup, you '
-        + 'will be asked to verify your identity. Before you begin, make '
-        + 'sure you are on a computer with a webcam, and that you have a '
-        + 'valid form of photo identification such as a driver’s license or passport.'}
-      />
-    </p>
-    {supportEmail && supportPhone && (
-      <p>
+  providerName, supportEmail, supportPhone, supportURL,
+}) => {
+  const supportURLHyperlink = (chunks) => (
+    <Hyperlink destination={chunks} target="_blank">
+      {chunks}
+    </Hyperlink>
+  );
+
+  const getSupportText = () => {
+    // We assume that an LTI-based provider will either have a supportURL or a supportEmail and supportPhone.
+    // In the unlikely event a provider has all three, we prioritize the supportURL.
+    if (supportURL) {
+      return (
         <FormattedMessage
-          id="exam.DownloadSoftwareProctoredExamInstructions.supportText"
+          id="exam.DownloadSoftwareProctoredExamInstructions.LTI.supportText.URL"
           defaultMessage={'If you have issues relating to proctoring, you can contact '
-          + '{providerName} technical support by emailing {supportEmail} or by calling {supportPhone}.'}
+            + '{providerName} technical support by visiting <a>{supportURL}</a>.'}
+          values={{
+            providerName,
+            supportURL,
+            a: supportURLHyperlink,
+          }}
+        />
+      );
+    }
+    if (supportEmail && supportPhone) {
+      return (
+        <FormattedMessage
+          id="exam.DownloadSoftwareProctoredExamInstructions.LTI.supportText.EmailPhone"
+          defaultMessage={'If you have issues relating to proctoring, you can contact '
+            + '{providerName} technical support by emailing {supportEmail} or by calling {supportPhone}.'}
           values={{
             providerName,
             supportEmail,
             supportPhone,
           }}
         />
-      </p>
-    )}
-  </>
-);
+      );
+    }
+    return null;
+  };
+
+  return (
+    <p>
+      {getSupportText()}
+    </p>
+  );
+};
 
 LtiProviderExamInstructions.propTypes = {
   providerName: PropTypes.string,
   supportEmail: PropTypes.string,
   supportPhone: PropTypes.string,
+  supportURL: PropTypes.string,
 };
 
 LtiProviderExamInstructions.defaultProps = {
   providerName: '',
   supportEmail: '',
   supportPhone: '',
+  supportURL: '',
 };
 
 export default LtiProviderExamInstructions;

src/instructions/proctored_exam/download-instructions/index.jsx

@@ -39,6 +39,7 @@ const DownloadSoftwareProctoredExamInstructions = ({ intl, skipProctoredExam })
     provider_name: providerName,
     provider_tech_support_email: supportEmail,
     provider_tech_support_phone: supportPhone,
+    provider_tech_support_url: supportURL,
     exam_proctoring_backend: proctoringBackend,
   } = proctoringSettings;
   const examHasLtiProvider = !useLegacyAttemptApi;
@@ -81,6 +82,7 @@ const DownloadSoftwareProctoredExamInstructions = ({ intl, skipProctoredExam })
           providerName={providerName}
           supportEmail={supportEmail}
           supportPhone={supportPhone}
+          supportURL={supportURL}
         />
       );
     }