feat: add support for a technical support URL in the LTI-based provider download instructions

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}
         />
       );
     }