✨(frontend) add faqs to a category and get from a course

- add course_faq placeholder to category detail page
- get the course_faq content from the category detail page

CHANGELOG.md

@@ -32,6 +32,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
     in the learner dashboard
 - Add `PaymentScheduleHelper` utils
 - Display installment information on certificate product blocks
+- Create FAQ's for a category and use them in a course page 
 
 ### Changed
 

src/richie/apps/courses/settings/__init__.py

@@ -304,6 +304,11 @@ def richie_placeholder_conf(name):
         "plugins": ["CKEditorPlugin"],
         "limits": {"CKEditorPlugin": 1},
     },
+    "courses/cms/category_detail.html course_faq": {
+        "name": _("Faq"),
+        "plugins": ["NestedItemPlugin"],
+        "child_classes": {"NestedItemPlugin": ["NestedItemPlugin"]},
+    },
     # Person detail
     "courses/cms/person_detail.html categories": {
         "name": _("Categories"),

src/richie/apps/courses/templates/courses/cms/category_detail.html

@@ -190,6 +190,15 @@ <h2 class="category-detail__title">{% trans "Related blogposts" %}</h2>
             {% endif %}
         {% endwith %}
 
+        <div id="page{{ page_suffix }}" class="category-detail__course_faq category-detail__block">
+            <div class="category-detail__row">
+                <h2 class="category-detail__title">{% trans "Category FAQ's" %}</h2>
+                {% placeholder "course_faq" or %}
+                    <p class="category-detail__empty">{% trans 'Enter a FAQ for this category' %}</p>
+                {% endplaceholder %}
+            </div>
+        </div>
+
         {% with persons=category.get_persons %}
             {% if persons %}
                 {% autopaginate persons GLIMPSE_PAGINATION_PERSONS %}

src/richie/apps/courses/templates/courses/cms/course_detail.html

@@ -472,6 +472,26 @@ <h2 class="course-detail__title">
             {% endif %}
         {% endblock information %}
 
+        {% block course_faq %}
+            <!-- Showing all categories FAQs of categories pages that have a page id. -->
+
+            {% get_categories_pages_have_faqs current_page.course as pages_have_faqs %}
+            {% if pages_have_faqs %}
+                <div class="course-detail__faqs course-detail__block course-detail__row">
+                    {% with is_syllabus_property=True %}   
+                        <h2 class="course-detail__title">{% blocktrans context "course_detail__title" %}Additional information{% endblocktrans %}</h2>            
+
+                        {% for page in pages_have_faqs %}
+                            {% with reverse_id=page.reverse_id %}
+                                <h3 class="course-detail__faq_title">{{ page.get_title }}</h3>
+                                {% show_placeholder "course_faq" reverse_id %}
+                            {% endwith %}
+                        {% endfor %}                           
+                    {% endwith %}
+                </div>
+            {% endif %}    
+        {% endblock course_faq %}
+
         {% block licenses %}
             {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_license_content" or not current_page|is_empty_placeholder:"course_license_participation" %}
             <div class="course-detail__license course-detail__block course-detail__block--divider">

src/richie/apps/courses/templatetags/extra_tags.py

@@ -13,6 +13,7 @@
 from classytags.arguments import Argument, MultiValueArgument
 from classytags.core import Options, Tag
 from classytags.utils import flatten_context
+from cms.api import Page
 from cms.templatetags.cms_tags import (
     Placeholder,
     PlaceholderOptions,
@@ -23,6 +24,8 @@
 from cms.utils.plugins import get_plugins
 
 from richie.apps.courses.defaults import RICHIE_MAX_ARCHIVED_COURSE_RUNS
+from richie.apps.courses.models.category import Category
+from richie.apps.courses.models.course import Course
 
 from ..lms import LMSHandler
 from ..models import CourseRunCatalogVisibility
@@ -271,6 +274,36 @@ def joanie_product_widget_props(context):
     return json.dumps({"productId": product_id, "courseCode": course_code})
 
 
+@register.simple_tag()
+def get_categories_pages_have_faqs(course: Course) -> list[Page]:
+    """
+    Return categories pages that have FAQs and also have a page id.
+
+    usage: `{% get_categories_pages_have_faqs current_page.course as pages_have_faqs %}`
+    """
+
+    categories_pages: list[Category] = course.get_categories()
+    categories_pages = categories_pages.filter(
+        extended_object__reverse_id__isnull=False
+    )
+
+    categories_with_faq: list[Category] = []
+    for category in categories_pages:
+        plugins = (
+            category.extended_object.get_placeholders()
+            .get(slot="course_faq")
+            .get_plugins()
+        )
+        if len(plugins) > 0:
+            categories_with_faq.append(category)
+
+    pages_have_faq: list[Page] = [
+        category.extended_object for category in categories_with_faq
+    ]
+
+    return pages_have_faq
+
+
 @register.simple_tag(takes_context=True)
 def course_runs_list_widget_props(context):
     """

tests/apps/courses/test_templates_category_detail.py

@@ -21,6 +21,7 @@
     OrganizationFactory,
     PersonFactory,
 )
+from richie.plugins.nesteditem.defaults import ACCORDION
 
 
 class CategoryCMSTestCase(CMSTestCase):
@@ -553,3 +554,78 @@ def test_template_category_detail_meta_description_empty(self):
             response,
             '<meta name="description"',
         )
+
+
+class CategoryFAQTestCase(CMSTestCase):
+    """
+    Test case to validate a category FAQ's content against UI aspects
+    """
+
+    def test_template_category_detail_has_course_faq(self):
+        """
+        Validates the creation of FAQ's for a category and its content
+        """
+
+        faq_quantity = 3
+        category = CategoryFactory.create(page_title="Accessible", should_publish=True)
+        placeholder = category.extended_object.placeholders.get(slot="course_faq")
+        container = add_plugin(
+            language="en",
+            placeholder=placeholder,
+            plugin_type="NestedItemPlugin",
+            variant=ACCORDION,
+        )
+
+        for question in range(1, faq_quantity):
+            question_container = add_plugin(
+                language="en",
+                placeholder=placeholder,
+                plugin_type="NestedItemPlugin",
+                target=container,
+                content=f"{question}. question?",
+                variant=ACCORDION,
+            )
+
+            add_plugin(
+                language="en",
+                placeholder=placeholder,
+                plugin_type="NestedItemPlugin",
+                target=question_container,
+                content=f"Answer of question {question}.",
+                variant=ACCORDION,
+            )
+
+        page = category.get_page()
+        page.publish("en")
+        url = page.get_absolute_url()
+        response = self.client.get(url)
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(
+            response, '<h2 class="category-detail__title">Category FAQ\'s</h2>'
+        )
+
+        for question in range(1, faq_quantity):
+            self.assertContains(response, f"{question}. question?")
+            self.assertContains(response, f"Answer of question {question}.")
+
+    def test_template_category_detail_empty_course_faq(self):
+        """
+        Validates when a category does not have FAQ's it renders a message indicating
+        """
+
+        category = CategoryFactory.create(page_title="Accessible", should_publish=True)
+
+        page = category.get_page()
+        page.publish("en")
+        url = page.get_absolute_url()
+        response = self.client.get(url)
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(
+            response, '<h2 class="category-detail__title">Category FAQ\'s</h2>'
+        )
+        self.assertContains(
+            response,
+            '<p class="category-detail__empty">Enter a FAQ for this category</p>',
+        )