From 4d93fd6c0f520e08ba8d10b7ffdcbecdd50e97e2 Mon Sep 17 00:00:00 2001
From: Alie Langston <alangsto@wellesley.edu>
Date: Wed, 31 Mar 2021 14:14:58 -0400
Subject: [PATCH] Added upload help text to photo context panels

updated messages
---
 src/id-verification/CameraHelp.jsx            | 18 ++++++++-
 .../IdVerification.messages.js                | 10 +++++
 .../tests/panels/IdContextPanel.test.jsx      | 31 +++++++++++++++
 .../panels/PortraitPhotoContextPanel.test.jsx | 39 ++++++++++++++++++-
 4 files changed, 96 insertions(+), 2 deletions(-)

diff --git a/src/id-verification/CameraHelp.jsx b/src/id-verification/CameraHelp.jsx
index b5e6c3a..d797493 100644
--- a/src/id-verification/CameraHelp.jsx
+++ b/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'])}
diff --git a/src/id-verification/IdVerification.messages.js b/src/id-verification/IdVerification.messages.js
index 0a42a02..2eee4d4 100644
--- a/src/id-verification/IdVerification.messages.js
+++ b/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?',
diff --git a/src/id-verification/tests/panels/IdContextPanel.test.jsx b/src/id-verification/tests/panels/IdContextPanel.test.jsx
index 9453d53..d2ba4f2 100644
--- a/src/id-verification/tests/panels/IdContextPanel.test.jsx
+++ b/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();
+  });
 });
diff --git a/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx b/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx
index ba083a5..8a7c958 100644
--- a/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx
+++ b/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();
+  });
 });