Lk/translation only for verified (openedx#1355)

* chore: update verified mode logic

* chore: add is staff logic

* chore: add test

Author: leangseu-edx

plugins/UnitTranslationPlugin/__snapshots__/index.test.jsx.snap

@@ -13,3 +13,17 @@ exports[`<UnitTranslationPlugin /> render TranslationSelection when translation
   unitId="unitId"
 />
 `;
+
+exports[`<UnitTranslationPlugin /> render translation when the user is staff 1`] = `
+<TranslationSelection
+  availableLanguages={
+    Array [
+      "en",
+    ]
+  }
+  courseId="courseId"
+  id="id"
+  language="en"
+  unitId="unitId"
+/>
+`;

plugins/UnitTranslationPlugin/index.jsx

@@ -2,29 +2,34 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { useModel } from '@src/generic/model-store';
+import { VERIFIED_MODES } from '@src/constants';
 
 import TranslationSelection from './translation-selection';
 import { fetchTranslationConfig } from './data/api';
 
 const UnitTranslationPlugin = ({ id, courseId, unitId }) => {
-  const { language } = useModel('coursewareMeta', courseId);
-  const { enrollmentMode } = useModel('courseHomeMeta', courseId);
+  const { language, enrollmentMode } = useModel('coursewareMeta', courseId);
+  const { isStaff } = useModel('courseHomeMeta', courseId);
   const [translationConfig, setTranslationConfig] = useState({
     enabled: false,
     availableLanguages: [],
   });
 
-  const verifiedMode = enrollmentMode === 'verified';
+  const hasVerifiedEnrollment = isStaff || (
+    enrollmentMode !== null
+    && enrollmentMode !== undefined
+    && VERIFIED_MODES.includes(enrollmentMode)
+  );
 
   useEffect(() => {
-    if (verifiedMode) {
+    if (hasVerifiedEnrollment) {
       fetchTranslationConfig(courseId).then(setTranslationConfig);
     }
   }, []);
 
   const { enabled, availableLanguages } = translationConfig;
 
-  if (!verifiedMode || !enabled || !language || !availableLanguages.length) {
+  if (!hasVerifiedEnrollment || !enabled || !language || !availableLanguages.length) {
     return null;
   }
 

plugins/UnitTranslationPlugin/index.test.jsx

@@ -22,14 +22,23 @@ describe('<UnitTranslationPlugin />', () => {
     courseId: 'courseId',
     unitId: 'unitId',
   };
-  const mockInitialState = ({ enabled = true, availableLanguages = ['en'] }) => {
-    useState.mockReturnValue([{ enabled, availableLanguages }, jest.fn()]);
+  const mockInitialState = ({
+    enabled = true,
+    availableLanguages = ['en'],
+    language = 'en',
+    enrollmentMode = 'verified',
+    isStaff = false,
+  }) => {
+    useState.mockReturnValueOnce([{ enabled, availableLanguages }, jest.fn()]);
+
+    when(useModel)
+      .calledWith('coursewareMeta', props.courseId)
+      .mockReturnValueOnce({ language, enrollmentMode });
+
+    when(useModel)
+      .calledWith('courseHomeMeta', props.courseId)
+      .mockReturnValueOnce({ isStaff });
   };
-  when(useModel)
-    .calledWith('coursewareMeta', props.courseId)
-    .mockReturnValue({ language: 'en' })
-    .calledWith('courseHomeMeta', props.courseId)
-    .mockReturnValue({ enrollmentMode: 'verified' });
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -53,27 +62,36 @@ describe('<UnitTranslationPlugin />', () => {
   });
 
   it('render empty when course language has not been set', () => {
-    when(useModel)
-      .calledWith('coursewareMeta', props.courseId)
-      .mockReturnValueOnce({ language: null });
-    mockInitialState({});
+    mockInitialState({
+      language: null,
+    });
 
     const wrapper = shallow(<UnitTranslationPlugin {...props} />);
 
     expect(wrapper.isEmptyRender()).toBe(true);
   });
 
   it('render empty when student is enroll as verified', () => {
-    when(useModel)
-      .calledWith('courseHomeMeta', props.courseId)
-      .mockReturnValueOnce({ enrollmentMode: 'audit' });
-    mockInitialState({});
+    mockInitialState({
+      enrollmentMode: 'audit',
+    });
 
     const wrapper = shallow(<UnitTranslationPlugin {...props} />);
 
     expect(wrapper.isEmptyRender()).toBe(true);
   });
 
+  it('render translation when the user is staff', () => {
+    mockInitialState({
+      enrollmentMode: 'audit',
+      isStaff: true,
+    });
+
+    const wrapper = shallow(<UnitTranslationPlugin {...props} />);
+
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+
   it('render TranslationSelection when translation is enabled and language is available', () => {
     mockInitialState({});
 

src/constants.js

@@ -33,3 +33,14 @@ export const REDIRECT_MODES = {
   HOME_REDIRECT: 'home-redirect',
   SURVEY_REDIRECT: 'survey-redirect',
 };
+
+export const VERIFIED_MODES = [
+  'professional',
+  'verified',
+  'no-id-professional',
+  'credit',
+  'masters',
+  'executive-education',
+  'paid-executive-education',
+  'paid-bootcamp',
+];

src/courseware/course/chat/Chat.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { Xpert } from '@edx/frontend-lib-learning-assistant';
 import { injectIntl } from '@edx/frontend-platform/i18n';
 
+import { VERIFIED_MODES } from '@src/constants';
 import { useModel } from '../../../generic/model-store';
 
 const Chat = ({
@@ -20,21 +21,10 @@ const Chat = ({
   } = useSelector(state => state.specialExams);
   const course = useModel('coursewareMeta', courseId);
 
-  const VERIFIED_MODES = [
-    'professional',
-    'verified',
-    'no-id-professional',
-    'credit',
-    'masters',
-    'executive-education',
-    'paid-executive-education',
-    'paid-bootcamp',
-  ];
-
   const hasVerifiedEnrollment = (
     enrollmentMode !== null
     && enrollmentMode !== undefined
-    && [...VERIFIED_MODES].some(mode => mode === enrollmentMode)
+    && VERIFIED_MODES.includes(enrollmentMode)
   );
 
   const validDates = () => {