feat: add i18n across the platform

src/ValidationPanelPage.jsx

@@ -48,10 +48,12 @@ const ValidationPanelPage = () => {
           )
           : (
             <div className="container-lg">
-              <Stack direction="horizontal" className="my-5 justify-content-between">
+              <Stack direction="horizontal" className="mt-5 mb-4 justify-content-between align-items-end">
                 <div>
                   <h1>{intl.formatMessage(messages.heading)}</h1>
-                  <h3>{isValidator ? 'Course validation processes' : 'My course validation processes' }</h3>
+                  <h3 className="mt-5">{isValidator ? intl.formatMessage(messages.validatorTitle)
+                    : intl.formatMessage(messages.courseAutorTitle)}
+                  </h3>
                 </div>
                 {!isValidator && <Button onClick={open} variant="brand">{intl.formatMessage(messages.newRecordCreatorButton)}</Button>}
               </Stack>

src/components/CourseValidationRequestForm/CourseValidationRequestForm.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import * as Yup from 'yup';
 import { useEffect, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { FormikProvider, useFormik } from 'formik';
 import { Button, Stack } from '@edx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
@@ -15,8 +16,11 @@ import { SelectField } from '../SelectField';
 import { ModalLayout } from '../ModalLayout';
 import { getCourseValidationRequestForm } from './helpers';
 import { getValidationBodies } from '../../data/api';
+import globalMessages from '../../messages';
+import messages from './messages';
 
 const CourseValidationRequestForm = ({ isOpen, close }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
 
   const availableUserCourses = useSelector((state) => state.courses.availableUserCourses.data.results);
@@ -33,6 +37,7 @@ const CourseValidationRequestForm = ({ isOpen, close }) => {
     availableUserCourses,
     availableCourseCategories,
     availableValidationBodies,
+    intl,
   );
 
   const initialValues = {
@@ -45,11 +50,11 @@ const CourseValidationRequestForm = ({ isOpen, close }) => {
   };
 
   const FormSchema = Yup.object().shape({
-    courseId: Yup.string().required('Please select a course!'),
-    validationBodyId: Yup.number().required('Please select a validation body!'),
+    courseId: Yup.string().required(intl.formatMessage(messages.feedbackSelectCourse)),
+    validationBodyId: Yup.number().required(intl.formatMessage(messages.feedbackSelectValidationBody)),
     // When is needed category as array
     // categoryIds: Yup.array().of(Yup.string()).min(1, 'Please select at least one category!'),
-    categoryId: Yup.number().required('Please select at least one category!'),
+    categoryId: Yup.number().required(intl.formatMessage(messages.feedbackSelectCategory)),
     comment: Yup.string(),
   });
 
@@ -99,7 +104,7 @@ const CourseValidationRequestForm = ({ isOpen, close }) => {
     <FormikProvider value={formik}>
       <ModalLayout isOpen={isOpen} onClose={handleClose}>
         <Stack gap={3}>
-          <span className="lead">Submit a course for validation</span>
+          <span className="lead">{intl.formatMessage(messages.CourseValidationFormTitle)}</span>
           <Stack gap={2}>
             {
               validationRequestFormFields?.map((field) => (
@@ -116,8 +121,8 @@ const CourseValidationRequestForm = ({ isOpen, close }) => {
             }
           </Stack>
           <Stack gap={2} direction="horizontal" className="justify-content-end mb-4">
-            <Button variant="tertiary" onClick={handleClose} className="px-5">Cancel</Button>
-            <Button onClick={formik.handleSubmit} className="px-5">Submit</Button>
+            <Button variant="tertiary" onClick={handleClose} className="px-5">{intl.formatMessage(globalMessages.formActionCancel)}</Button>
+            <Button onClick={formik.handleSubmit} className="px-5">{intl.formatMessage(globalMessages.formActionSubmmit)}</Button>
           </Stack>
         </Stack>
       </ModalLayout>

src/components/CourseValidationRequestForm/helpers.js

@@ -1,17 +1,20 @@
 /* eslint-disable import/prefer-default-export */
 import { adaptOptions } from '../../utils/helpers';
+import globalMessages from '../../messages';
+import messages from './messages';
 
 export const getCourseValidationRequestForm = (
   availableUserCourses,
   availableCourseCategories,
   availableValidationBodies,
+  intl,
 ) => ([
   {
     name: 'courseId',
     // select, autosuggest, textarea or input
     as: 'autosuggest',
-    label: 'Course Name',
-    description: 'Please select one of your courses from the list below',
+    label: intl.formatMessage(globalMessages.courseName),
+    description: intl.formatMessage(messages.descriptionSelectCourse),
     // prop when 'as' property is 'select'
     // This properties come from API or Constants
     options: adaptOptions(availableUserCourses)?.sort((a, b) => {
@@ -23,23 +26,23 @@ export const getCourseValidationRequestForm = (
   {
     name: 'validationBodyId',
     as: 'autosuggest',
-    label: 'Validation Body',
-    description: 'Please select the applicable validation body for your course',
+    label: intl.formatMessage(globalMessages.validationBody),
+    description: intl.formatMessage(messages.descriptionSelectValidationBody),
     options: adaptOptions(availableValidationBodies),
   },
   {
     name: 'categoryId',
     // When is needed category as array
     // isArray: true,
     as: 'autosuggest',
-    label: 'Category',
-    description: 'Please select the appropriate category for your course',
+    label: intl.formatMessage(globalMessages.categories),
+    description: intl.formatMessage(messages.descriptionSelectCategory),
     options: adaptOptions(availableCourseCategories),
   },
   {
     name: 'comment',
     as: 'textarea',
-    label: 'Comments',
-    description: 'Type any comment or explanation for your course',
+    label: intl.formatMessage(globalMessages.comment),
+    description: intl.formatMessage(messages.descriptionComment),
   },
 ]);

src/components/CourseValidationRequestForm/messages.js

@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  CourseValidationFormTitle: {
+    id: 'course.validation.request.form.title',
+    defaultMessage: 'Submit a course for validation',
+    description: 'Title of the course validation request form',
+  },
+  descriptionSelectCourse: {
+    id: 'course.validation.request.form.description.course',
+    defaultMessage: 'Please select one of your courses from the list below',
+    description: 'Description display in the course select',
+  },
+  feedbackSelectCourse: {
+    id: 'course.validation.request.form.feedback.course',
+    defaultMessage: 'Please select a course',
+    description: 'Feedback display in the course select',
+  },
+  descriptionSelectValidationBody: {
+    id: 'course.validation.request.form.description.validation.body',
+    defaultMessage: 'Please select the applicable validation body for your course',
+    description: 'Description display in the validation body select',
+  },
+  feedbackSelectValidationBody: {
+    id: 'course.validation.request.form.feedback.validation.body',
+    defaultMessage: 'Please select a validation body',
+    description: 'Feedback display in the validation body select',
+  },
+  descriptionSelectCategory: {
+    id: 'course.validation.request.form.description.category',
+    defaultMessage: 'Please select the appropriate category for your course',
+    description: 'Description display in the category select',
+  },
+  feedbackSelectCategory: {
+    id: 'course.validation.request.form.feedback.category',
+    defaultMessage: 'Please select a category',
+    description: 'Feedback display in the category select',
+  },
+  descriptionComment: {
+    id: 'course.validation.request.form.description.comment',
+    defaultMessage: 'Type any comment or explanation for your course',
+    description: 'Description display in the description input',
+  },
+});
+
+export default messages;

src/components/PopUpMessage/PopUpMessage.jsx

@@ -1,27 +1,22 @@
 /* eslint-disable react/jsx-no-useless-fragment */
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
 import { Info } from '@edx/paragon/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { resetPopUpMessage } from '../../data/slices';
+import messages from './messages';
 
-const codeMessages = {
-  409: 'The validation process for this course is already underway.',
-  400: 'This action cannot be completed at the moment. Please try refreshing the page and try again.',
-  401: 'You are not authorized to execute this action.',
-  404: 'There was an error trying to find the register you are looking for.',
-  500: 'An unknown error occurred. Please try again later.',
-};
-
-const getErrorMessage = (message) => {
+const getErrorMessage = (message, intl) => {
   if (message) {
     const errCode = message?.match(/(\d+)/)?.[0];
-    return codeMessages[errCode];
+    return intl.formatMessage(messages[errCode]);
   }
 
   return '';
 };
 
 const PopUpMessage = () => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const { variant, message } = useSelector((state) => state.popUpMessage);
 
@@ -31,7 +26,7 @@ const PopUpMessage = () => {
 
   return (
     <>
-      { !message
+      {!message
         ? null
         : (
           <Alert
@@ -44,7 +39,7 @@ const PopUpMessage = () => {
             icon={Info}
             style={{ position: 'fixed', bottom: 0, zIndex: 1 }}
           >
-            {getErrorMessage(message)}
+            {getErrorMessage(message, intl)}
           </Alert>
         )}
     </>

src/components/PopUpMessage/messages.js

@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  409: {
+    id: 'pop.up.message.409.error',
+    defaultMessage: 'The validation process for this course is already underway.',
+    description: 'Message displayed when the API response with a 409 error',
+  },
+  400: {
+    id: 'pop.up.message.400.error',
+    defaultMessage: 'This action cannot be completed at the moment. Please try refreshing the page and try again.',
+    description: 'Message displayed when the API response with a 400 error',
+  },
+  401: {
+    id: 'pop.up.message.401.error',
+    defaultMessage: 'You are not authorized to execute this action.',
+    description: 'Message displayed when the API response with a 401 error',
+  },
+  404: {
+    id: 'pop.up.message.404.error',
+    defaultMessage: 'There was an error trying to find the register you are looking for.',
+    description: 'Message displayed when the API response with a 404 error',
+  },
+  500: {
+    id: 'pop.up.message.500.error',
+    defaultMessage: 'An unknown error occurred. Please try again later.',
+    description: 'Message displayed when the API response with a 500 error',
+  },
+});
+
+export default messages;

src/components/SelectField/SelectField.jsx

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { FieldArray } from 'formik';
 import { Close } from '@edx/paragon/icons';
 import { Chip, Form, Stack } from '@edx/paragon';
 import { useState } from 'react';
+import globalMessages from '../../messages';
 
 const CustomOption = ({
   className, onClick, value, optionId, label, children,
@@ -43,6 +45,7 @@ CustomOption.defaultProps = {
 const SelectField = ({
   label, description, name, as, options, handleChange, value, errorMessage, isArray, isLoading, disabled, setFieldValue,
 }) => {
+  const intl = useIntl();
   const [selected, setSelected] = useState('');
   if (isArray) {
     return (
@@ -53,7 +56,7 @@ const SelectField = ({
             <span>{label}</span>
             <span className="small">{description}</span>
             <Form.Autosuggest
-              placeholder="Select at least one..."
+              placeholder={intl.formatMessage(globalMessages.multiselectPlaceholder)}
               isInvalid={!!errorMessage}
               onSelected={(newValue) => {
                 const valueFoundIndex = value.findIndex((el) => el === newValue);
@@ -99,7 +102,7 @@ const SelectField = ({
         <span>{label}</span>
         <span className="small">{description}</span>
         <Form.Autosuggest
-          placeholder="Select one"
+          placeholder={intl.formatMessage(globalMessages.selectPlaceholder)}
           isLoading={isLoading}
           isInvalid={!!errorMessage}
           value={value ? selected : ''}
@@ -147,7 +150,7 @@ const SelectField = ({
           disabled={disabled}
           size="sm"
         >
-          <option hidden> Select one... </option>
+          <option hidden> {intl.formatMessage(globalMessages.multiselectPlaceholder)} </option>
           {options?.map((optionInfo) => (
             <option key={optionInfo.key} value={optionInfo.id}>{optionInfo.label}</option>
           ))}

src/components/Timeline/RecordItem.jsx

@@ -32,7 +32,7 @@ const RecordItem = ({
         <FormattedMessage
           id="record.item.validation.date"
           defaultMessage="Validation date: {date}"
-          description="date when the record was created"
+          description="Date when the record was created"
           values={{
             date: (
               <FormattedDate
@@ -50,7 +50,7 @@ const RecordItem = ({
           <FormattedMessage
             id="record.item.validation.status"
             defaultMessage="<b>Status</b>: {status}"
-            description="status of the record"
+            description="Status of the record"
             tagName="div"
             values={{
               b: bold,
@@ -60,7 +60,7 @@ const RecordItem = ({
           <FormattedMessage
             id="record.item.validation.reportedBy"
             defaultMessage="<b>Reported by</b>: {user}"
-            description="reportedBy of the record"
+            description="Identify who reported the record"
             tagName="div"
             values={{
               b: bold,
@@ -70,30 +70,30 @@ const RecordItem = ({
           <FormattedMessage
             id="record.item.validation.body"
             defaultMessage="<b>Validator body</b>: {validationBody}"
-            description="identify who was in charge to validate the course"
+            description="Identify the validation body in charge to validate the course"
             tagName="div"
             values={{
               b: bold,
               validationBody,
             }}
           />
           {status === VALIDATION_STATUS.DISAPPROVED && (
-          <div>
-            <FormattedMessage
-              id="record.item.validation.reason"
-              defaultMessage="Reason: "
-              description="identify who was in charge to validate the course"
-              tagName="b"
-            />
-            {reason}
-          </div>
+            <div>
+              <FormattedMessage
+                id="record.item.validation.reason"
+                defaultMessage="Reason: "
+                description="Identify the reason to reject the course"
+                tagName="b"
+              />
+              {reason}
+            </div>
           )}
         </div>
         <div className="mt-2">
           <FormattedMessage
             id="record.item.validation.comment"
             defaultMessage="Info: "
-            description="Shown the label for additional information left for the validator"
+            description="Shown additional information left for the record reporter"
             tagName="b"
           />
           {comment}