Merge pull request #368 from edx/bseverino/idv-example-card

[MST-494] Clarify photo ID instructions with example image

src/id-verification/IdVerification.messages.js

@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'Next',
     description: 'Next button.',
   },
+  'id.verification.example.card.alt': {
+    id: 'id.verification.example.card.alt',
+    defaultMessage: 'Example of a valid identification card with a full name and photo.',
+    description: 'Alt text for an example identification card.'
+  },
   'id.verification.requirements.title': {
     id: 'id.verification.requirements.title',
     defaultMessage: 'Photo Verification Requirements',
@@ -33,7 +38,7 @@ const messages = defineMessages({
   },
   'id.verification.requirements.card.id.text': {
     id: 'id.verification.requirements.card.id.text',
-    defaultMessage: 'You need a valid ID that contains your full name and photo.',
+    defaultMessage: 'You need a valid identification card that contains your full name and photo.',
     description: 'Text that explains that the user needs a photo ID.',
   },
   'id.verification.privacy.title': {
@@ -433,7 +438,7 @@ const messages = defineMessages({
   },
   'id.verification.id.tips.description': {
     id: 'id.verification.id.tips.description',
-    defaultMessage: 'Next, we\'ll need you to take a photo of a valid ID that includes your name. Please have your ID ready.',
+    defaultMessage: 'Next, we\'ll need you to take a photo of a valid identification card that includes your full name and photo. Please have your ID ready.',
     description: 'Description for the ID Tips page.',
   },
   'id.verification.id.tips.list.well.lit': {

src/id-verification/_id-verification.scss

@@ -1,5 +1,8 @@
 .page__id-verification {
   .verification-panel {
+    img {
+      max-width: 100%;
+    }
     .card.accent {
       border-top: solid 4px theme-color('warning');
     }
@@ -8,7 +11,6 @@
       max-width: 20rem;
       img {
         display: block;
-        max-width: 100%;
         max-height: 10rem;
       }
     }

src/id-verification/panels/IdContextPanel.jsx

@@ -6,6 +6,7 @@ import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
 import CameraHelp from '../CameraHelp';
 import messages from '../IdVerification.messages';
+import exampleCard from '../assets/example-card.png';
 
 function IdContextPanel(props) {
   const panelSlug = 'id-context';
@@ -24,7 +25,7 @@ function IdContextPanel(props) {
           <p>
             {props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
           </p>
-          <ul className="mb-0">
+          <ul>
             <li>
               {props.intl.formatMessage(messages['id.verification.id.tips.list.well.lit'])}
             </li>
@@ -32,6 +33,10 @@ function IdContextPanel(props) {
               {props.intl.formatMessage(messages['id.verification.id.tips.list.clear'])}
             </li>
           </ul>
+          <img
+            src={exampleCard}
+            alt={props.intl.formatMessage(messages['id.verification.example.card.alt'])}
+          />
         </div>
       </div>
       <CameraHelp isOpen />

src/id-verification/panels/ReviewRequirementsPanel.jsx

@@ -8,6 +8,7 @@ import BasePanel from './BasePanel';
 
 import { IdVerificationContext } from '../IdVerificationContext';
 import messages from '../IdVerification.messages';
+import exampleCard from '../assets/example-card.png';
 
 function ReviewRequirementsPanel(props) {
   const { userId } = useContext(IdVerificationContext);
@@ -54,6 +55,10 @@ function ReviewRequirementsPanel(props) {
           </h6>
           <p className="mb-0">
             {props.intl.formatMessage(messages['id.verification.requirements.card.id.text'])}
+            <img
+              src={exampleCard}
+              alt={props.intl.formatMessage(messages['id.verification.example.card.alt'])}
+            />
           </p>
         </div>
       </div>

src/id-verification/panels/SubmittedPanel.jsx

@@ -12,8 +12,6 @@ function SubmittedPanel(props) {
   const { userId } = useContext(IdVerificationContext);
   const panelSlug = 'submitted';
 
-  // If the user accessed IDV through a course,
-  // link back to that course rather than the dashboard
   useEffect(() => {
     sendTrackEvent('edx.id_verification.submitted', {
       category: 'id_verification',