From e8660b941fe2ac89507a75811d56b7e73a9d8e1b Mon Sep 17 00:00:00 2001
From: Fateme Khodayari <55655542+FatemeKhodayari@users.noreply.github.com>
Date: Tue, 27 Feb 2024 00:32:08 +0330
Subject: [PATCH] fix: translation for header of course filter form (course
 status) (#289)

---
 .../components/FilterForm.jsx                 | 33 +++++++++++--------
 .../CourseFilterControls/messages.js          |  5 +++
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/containers/CourseFilterControls/components/FilterForm.jsx b/src/containers/CourseFilterControls/components/FilterForm.jsx
index 0e5808d..7abdb2c 100644
--- a/src/containers/CourseFilterControls/components/FilterForm.jsx
+++ b/src/containers/CourseFilterControls/components/FilterForm.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { FilterKeys } from 'data/constants/app';
 
 import { Form } from '@edx/paragon';
 
 import Checkbox from './Checkbox';
+import messages from '../messages';
 
 export const filterOrder = [
   FilterKeys.inProgress,
@@ -18,20 +20,23 @@ export const filterOrder = [
 export const FilterForm = ({
   filters,
   handleFilterChange,
-}) => (
-  <Form.Group>
-    <div className="filter-form-heading mb-1">Course Status</div>
-    <Form.CheckboxSet
-      name="course-status-filters"
-      onChange={handleFilterChange}
-      value={filters}
-    >
-      {filterOrder.map(filterKey => (
-        <Checkbox filterKey={filterKey} key={filterKey} />
-      ))}
-    </Form.CheckboxSet>
-  </Form.Group>
-);
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Form.Group>
+      <div className="filter-form-heading mb-1">{formatMessage(messages.courseStatus)}</div>
+      <Form.CheckboxSet
+        name="course-status-filters"
+        onChange={handleFilterChange}
+        value={filters}
+      >
+        {filterOrder.map(filterKey => (
+          <Checkbox filterKey={filterKey} key={filterKey} />
+        ))}
+      </Form.CheckboxSet>
+    </Form.Group>
+  );
+};
 FilterForm.propTypes = {
   filters: PropTypes.arrayOf(PropTypes.string).isRequired,
   handleFilterChange: PropTypes.func.isRequired,
diff --git a/src/containers/CourseFilterControls/messages.js b/src/containers/CourseFilterControls/messages.js
index af895dc..39875b7 100644
--- a/src/containers/CourseFilterControls/messages.js
+++ b/src/containers/CourseFilterControls/messages.js
@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  courseStatus: {
+    id: 'learner-dash.courseListFilters.courseStatus',
+    description: 'course status filter form heading',
+    defaultMessage: 'Course Status',
+  },
   inProgress: {
     id: 'learner-dash.courseListFilters.inProgress',
     description: 'in-progress filter checkbox label for course list filters',