From 260df228fb7d7ec91657f69f3e7bbdac7eccac60 Mon Sep 17 00:00:00 2001
From: Diana Villalvazo <diana.villalvazo@wgu.edu>
Date: Thu, 7 Aug 2025 14:24:46 -0600
Subject: [PATCH] Replace of injectIntl with useIntl() 4/10 (#1299)

* refactor: Replace of injectIntl with useIntl()

* fix: improve coverage
---
 src/id-verification/panels/SubmittedPanel.jsx | 19 ++++------
 .../panels/TakeIdPhotoPanel.jsx               | 27 ++++++-------
 .../panels/TakePortraitPhotoPanel.jsx         | 19 ++++------
 .../tests/panels/SubmittedPanel.test.jsx      | 15 ++------
 .../tests/panels/TakeIdPhotoPanel.test.jsx    | 38 +++++++++++++------
 .../panels/TakePortraitPhotoPanel.test.jsx    | 15 ++------
 6 files changed, 62 insertions(+), 71 deletions(-)

diff --git a/src/id-verification/panels/SubmittedPanel.jsx b/src/id-verification/panels/SubmittedPanel.jsx
index 6397e07..ec92c43 100644
--- a/src/id-verification/panels/SubmittedPanel.jsx
+++ b/src/id-verification/panels/SubmittedPanel.jsx
@@ -1,7 +1,7 @@
-import React, { useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useRedirect } from '../../hooks';
 
@@ -10,10 +10,11 @@ import messages from '../IdVerification.messages';
 
 import BasePanel from './BasePanel';
 
-const SubmittedPanel = (props) => {
+const SubmittedPanel = () => {
   const { userId } = useContext(IdVerificationContext);
   const { location: returnUrl, text: returnText } = useRedirect();
   const panelSlug = 'submitted';
+  const intl = useIntl();
 
   useEffect(() => {
     sendTrackEvent('edx.id_verification.submitted', {
@@ -25,24 +26,20 @@ const SubmittedPanel = (props) => {
   return (
     <BasePanel
       name={panelSlug}
-      title={props.intl.formatMessage(messages['id.verification.submitted.title'])}
+      title={intl.formatMessage(messages['id.verification.submitted.title'])}
     >
       <p>
-        {props.intl.formatMessage(messages['id.verification.submitted.text'])}
+        {intl.formatMessage(messages['id.verification.submitted.text'])}
       </p>
       <a
         className="btn btn-primary"
         href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}
         data-testid="return-button"
       >
-        {props.intl.formatMessage(messages[returnText])}
+        {intl.formatMessage(messages[returnText])}
       </a>
     </BasePanel>
   );
 };
 
-SubmittedPanel.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(SubmittedPanel);
+export default SubmittedPanel;
diff --git a/src/id-verification/panels/TakeIdPhotoPanel.jsx b/src/id-verification/panels/TakeIdPhotoPanel.jsx
index 783d881..573dd93 100644
--- a/src/id-verification/panels/TakeIdPhotoPanel.jsx
+++ b/src/id-verification/panels/TakeIdPhotoPanel.jsx
@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
@@ -14,11 +14,12 @@ import ImageFileUpload from '../ImageFileUpload';
 import CollapsibleImageHelp from '../CollapsibleImageHelp';
 import SupportedMediaTypes from '../SupportedMediaTypes';
 
-const TakeIdPhotoPanel = (props) => {
+const TakeIdPhotoPanel = () => {
   const panelSlug = 'take-id-photo';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
   const { setIdPhotoFile, idPhotoFile, useCameraForId } = useContext(IdVerificationContext);
   const [mounted, setMounted] = useState(false);
+  const intl = useIntl();
 
   useEffect(() => {
     // This prevents focus switching to the heading when taking a photo
@@ -30,31 +31,31 @@ const TakeIdPhotoPanel = (props) => {
       name={panelSlug}
       focusOnMount={!mounted}
       title={useCameraForId
-        ? props.intl.formatMessage(messages['id.verification.id.photo.title.camera'])
-        : props.intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
+        ? intl.formatMessage(messages['id.verification.id.photo.title.camera'])
+        : intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
     >
       <div>
         {idPhotoFile && !useCameraForId && (
           <ImagePreview
             src={idPhotoFile}
-            alt={props.intl.formatMessage(messages['id.verification.id.photo.preview.alt'])}
+            alt={intl.formatMessage(messages['id.verification.id.photo.preview.alt'])}
           />
         )}
 
         {useCameraForId ? (
           <div>
             <p>
-              {props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
+              {intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
             </p>
             <Camera onImageCapture={setIdPhotoFile} isPortrait={false} />
           </div>
         ) : (
           <div style={{ marginBottom: '1.25rem' }}>
             <p data-testid="upload-text">
-              {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
+              {intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
               <SupportedMediaTypes />
             </p>
-            <ImageFileUpload onFileChange={setIdPhotoFile} intl={props.intl} />
+            <ImageFileUpload onFileChange={setIdPhotoFile} intl={intl} />
           </div>
         )}
       </div>
@@ -62,15 +63,11 @@ const TakeIdPhotoPanel = (props) => {
       <CollapsibleImageHelp />
       <div className="action-row" style={{ visibility: idPhotoFile ? 'unset' : 'hidden' }}>
         <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-          {props.intl.formatMessage(messages['id.verification.next'])}
+          {intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>
     </BasePanel>
   );
 };
 
-TakeIdPhotoPanel.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(TakeIdPhotoPanel);
+export default TakeIdPhotoPanel;
diff --git a/src/id-verification/panels/TakePortraitPhotoPanel.jsx b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
index eccb0c5..956aa7f 100644
--- a/src/id-verification/panels/TakePortraitPhotoPanel.jsx
+++ b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
@@ -10,11 +10,12 @@ import IdVerificationContext from '../IdVerificationContext';
 
 import messages from '../IdVerification.messages';
 
-const TakePortraitPhotoPanel = (props) => {
+const TakePortraitPhotoPanel = () => {
   const panelSlug = 'take-portrait-photo';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
   const { setFacePhotoFile, facePhotoFile } = useContext(IdVerificationContext);
   const [mounted, setMounted] = useState(false);
+  const intl = useIntl();
 
   useEffect(() => {
     // This prevents focus switching to the heading when taking a photo
@@ -25,26 +26,22 @@ const TakePortraitPhotoPanel = (props) => {
     <BasePanel
       name={panelSlug}
       focusOnMount={!mounted}
-      title={props.intl.formatMessage(messages['id.verification.portrait.photo.title.camera'])}
+      title={intl.formatMessage(messages['id.verification.portrait.photo.title.camera'])}
     >
       <div>
         <p>
-          {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
+          {intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
         </p>
         <Camera onImageCapture={setFacePhotoFile} isPortrait />
       </div>
       <CameraHelp isPortrait />
       <div className="action-row" style={{ visibility: facePhotoFile ? 'unset' : 'hidden' }}>
         <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-          {props.intl.formatMessage(messages['id.verification.next'])}
+          {intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>
     </BasePanel>
   );
 };
 
-TakePortraitPhotoPanel.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(TakePortraitPhotoPanel);
+export default TakePortraitPhotoPanel;
diff --git a/src/id-verification/tests/panels/SubmittedPanel.test.jsx b/src/id-verification/tests/panels/SubmittedPanel.test.jsx
index 215e312..4e53fa3 100644
--- a/src/id-verification/tests/panels/SubmittedPanel.test.jsx
+++ b/src/id-verification/tests/panels/SubmittedPanel.test.jsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
   render, cleanup, act, screen,
 } from '@testing-library/react';
 import '@edx/frontend-platform/analytics';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import IdVerificationContext from '../../IdVerificationContext';
 import SubmittedPanel from '../../panels/SubmittedPanel';
 
@@ -12,13 +11,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
 }));
 
-const IntlSubmittedPanel = injectIntl(SubmittedPanel);
-
 describe('SubmittedPanel', () => {
-  const defaultProps = {
-    intl: {},
-  };
-
   const contextValue = {
     facePhotoFile: 'test.jpg',
     idPhotoFile: 'test.jpg',
@@ -43,7 +36,7 @@ describe('SubmittedPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlSubmittedPanel {...defaultProps} />
+            <SubmittedPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
@@ -59,7 +52,7 @@ describe('SubmittedPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlSubmittedPanel {...defaultProps} />
+            <SubmittedPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
@@ -75,7 +68,7 @@ describe('SubmittedPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlSubmittedPanel {...defaultProps} />
+            <SubmittedPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
diff --git a/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx b/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
index 8f92a20..a8f28b8 100644
--- a/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
+++ b/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
   render, cleanup, act, screen, fireEvent,
 } from '@testing-library/react';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import IdVerificationContext from '../../IdVerificationContext';
 import TakeIdPhotoPanel from '../../panels/TakeIdPhotoPanel';
+import messages from '../../IdVerification.messages';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
@@ -13,13 +13,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
 
 jest.mock('../../Camera');
 
-const IntlTakeIdPhotoPanel = injectIntl(TakeIdPhotoPanel);
-
 describe('TakeIdPhotoPanel', () => {
-  const defaultProps = {
-    intl: {},
-  };
-
   const contextValue = {
     facePhotoFile: 'test.jpg',
     idPhotoFile: null,
@@ -37,7 +31,7 @@ describe('TakeIdPhotoPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakeIdPhotoPanel {...defaultProps} />
+            <TakeIdPhotoPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
@@ -52,7 +46,7 @@ describe('TakeIdPhotoPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakeIdPhotoPanel {...defaultProps} />
+            <TakeIdPhotoPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
@@ -70,7 +64,7 @@ describe('TakeIdPhotoPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakeIdPhotoPanel {...defaultProps} />
+            <TakeIdPhotoPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
@@ -85,7 +79,7 @@ describe('TakeIdPhotoPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakeIdPhotoPanel {...defaultProps} />
+            <TakeIdPhotoPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
@@ -98,4 +92,24 @@ describe('TakeIdPhotoPanel', () => {
     const text = await screen.findByTestId('upload-text');
     expect(text.textContent).toContain('Please upload a photo of your identification card');
   });
+
+  it('shows correct text if useCameraForId', async () => {
+    contextValue.useCameraForId = true;
+    await act(async () => render((
+      <Router>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <TakeIdPhotoPanel />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    // check that upload title and text are correct
+    const title = await screen.findByText(messages['id.verification.id.photo.title.camera'].defaultMessage);
+    expect(title).toBeVisible();
+
+    const text = await screen.findByText(messages['id.verification.id.photo.instructions.camera'].defaultMessage);
+    expect(text).toBeVisible();
+  });
 });
diff --git a/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx b/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx
index 816fafc..f546c37 100644
--- a/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx
+++ b/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx
@@ -1,10 +1,9 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
   render, cleanup, act, screen, fireEvent,
 } from '@testing-library/react';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import IdVerificationContext from '../../IdVerificationContext';
 import TakePortraitPhotoPanel from '../../panels/TakePortraitPhotoPanel';
 
@@ -16,13 +15,7 @@ jest.mock('../../Camera', () => function CameraMock() {
   return <></>;
 });
 
-const IntlTakePortraitPhotoPanel = injectIntl(TakePortraitPhotoPanel);
-
 describe('TakePortraitPhotoPanel', () => {
-  const defaultProps = {
-    intl: {},
-  };
-
   const contextValue = {
     facePhotoFile: null,
     idPhotoFile: null,
@@ -39,7 +32,7 @@ describe('TakePortraitPhotoPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakePortraitPhotoPanel {...defaultProps} />
+            <TakePortraitPhotoPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
@@ -54,7 +47,7 @@ describe('TakePortraitPhotoPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakePortraitPhotoPanel {...defaultProps} />
+            <TakePortraitPhotoPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
@@ -73,7 +66,7 @@ describe('TakePortraitPhotoPanel', () => {
       <Router>
         <IntlProvider locale="en">
           <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakePortraitPhotoPanel {...defaultProps} />
+            <TakePortraitPhotoPanel />
           </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>