Added upload help text to photo context panels

updated messages

src/id-verification/CameraHelp.jsx

@@ -1,13 +1,29 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Collapsible } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import messages from './IdVerification.messages';
+import IdVerificationContext from './IdVerificationContext';
 
 function CameraHelp(props) {
+  const { optimizelyExperimentName } = useContext(IdVerificationContext);
+
   return (
     <div>
+      { optimizelyExperimentName
+        && (
+        <Collapsible
+          styling="card"
+          title={props.intl.formatMessage(messages['id.verification.camera.help.upload.question'])}
+          className="mb-4 shadow"
+          defaultOpen={props.isOpen}
+        >
+          <p>
+            {props.intl.formatMessage(messages['id.verification.camera.help.upload.answer'])}
+          </p>
+        </Collapsible>
+        )}
       <Collapsible
         styling="card"
         title={props.intl.formatMessage(messages['id.verification.camera.help.sight.question'])}

src/id-verification/IdVerification.messages.js

@@ -446,6 +446,16 @@ const messages = defineMessages({
     defaultMessage: 'If you require assistance with taking a photo for submission, contact edX support for additional suggestions.',
     description: 'Confirming what to do if the user has difficult holding their head relative to the camera.',
   },
+  'id.verification.camera.help.upload.question': {
+    id: 'id.verification.camera.help.upload.question',
+    defaultMessage: 'What if I want to upload a photo instead?',
+    description: 'Question on what to do if the user would like to upload a photo instead.',
+  },
+  'id.verification.camera.help.upload.answer': {
+    id: 'id.verification.camera.help.upload.answer',
+    defaultMessage: 'On the next page you will have the option to switch to upload mode. By selecting that option, you will be able to upload a photo instead.',
+    description: 'Confirming what to do if the user would like to upload a photo.',
+  },
   'id.verification.id.photo.unclear.question': {
     id: 'id.verification.id.photo.unclear.question',
     defaultMessage: 'Is your ID image not clear or too blurry?',

src/id-verification/tests/panels/IdContextPanel.test.jsx

@@ -4,6 +4,7 @@ import { createMemoryHistory } from 'history';
 import {
   render, cleanup, act, screen, fireEvent,
 } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import '@edx/frontend-platform/analytics';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import IdVerificationContext from '../../IdVerificationContext';
@@ -23,6 +24,7 @@ describe('IdContextPanel', () => {
   };
 
   const contextValue = {
+    optimizelyExperimentName: '',
     facePhotoFile: 'test.jpg',
   };
 
@@ -44,4 +46,33 @@ describe('IdContextPanel', () => {
     fireEvent.click(button);
     expect(history.location.pathname).toEqual('/take-id-photo');
   });
+
+  it('does not show help text for photo upload if not part of experiment', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlIdContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const title = await screen.queryByText('What if I want to upload a photo instead?');
+    expect(title).not.toBeInTheDocument();
+  });
+
+  it('shows help text for photo upload if part of experiment', async () => {
+    contextValue.optimizelyExperimentName = 'test';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlIdContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const title = await screen.queryByText('What if I want to upload a photo instead?');
+    expect(title).toBeInTheDocument();
+  });
 });

src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx

@@ -4,9 +4,11 @@ import { createMemoryHistory } from 'history';
 import {
   render, cleanup, act, screen, fireEvent,
 } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import '@edx/frontend-platform/analytics';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import PortraitPhotoContextPanel from '../../panels/PortraitPhotoContextPanel';
+import IdVerificationContext from '../../IdVerificationContext';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
@@ -21,6 +23,10 @@ describe('PortraitPhotoContextPanel', () => {
     intl: {},
   };
 
+  const contextValue = {
+    optimizelyExperimentName: '',
+  };
+
   afterEach(() => {
     cleanup();
   });
@@ -29,7 +35,9 @@ describe('PortraitPhotoContextPanel', () => {
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">
-          <IntlPortraitPhotoContextPanel {...defaultProps} />
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlPortraitPhotoContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
     )));
@@ -37,4 +45,33 @@ describe('PortraitPhotoContextPanel', () => {
     fireEvent.click(button);
     expect(history.location.pathname).toEqual('/take-portrait-photo');
   });
+
+  it('does not show help text for photo upload if not part of experiment', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlPortraitPhotoContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const title = await screen.queryByText('What if I want to upload a photo instead?');
+    expect(title).not.toBeInTheDocument();
+  });
+
+  it('shows help text for photo upload if part of experiment', async () => {
+    contextValue.optimizelyExperimentName = 'test';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlPortraitPhotoContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const title = await screen.queryByText('What if I want to upload a photo instead?');
+    expect(title).toBeInTheDocument();
+  });
 });