fix: Update Track Selection to support verified only mode (#29497)

REV-2450

common/djangoapps/course_modes/tests/test_views.py

@@ -564,6 +564,7 @@ class CourseModeViewTest(CatalogIntegrationMixin, UrlResetMixin, ModuleStoreTest
         self.assertContains(response, '<span class="award-icon">')
         self.assertContains(response, '<span class="popover-icon">')
         self.assertContains(response, '<span class="note-icon">')
+        self.assertContains(response, '<div class="grid-options">')
 
         # Check for upgrade button ID
         self.assertContains(response, 'track_selection_upgrade')
@@ -608,6 +609,9 @@ class CourseModeViewTest(CatalogIntegrationMixin, UrlResetMixin, ModuleStoreTest
         # Check min_price was correctly passed in.
         self.assertContains(response, min_price)
 
+        # Check for the HTML element for courses with more than one mode
+        self.assertContains(response, '<div class="grid-options">')
+
     def _assert_legacy_page(self, response, **_):
         """
         Assert choose.html was rendered.
@@ -650,7 +654,11 @@ class CourseModeViewTest(CatalogIntegrationMixin, UrlResetMixin, ModuleStoreTest
         This test checks that the right template is rendered.
 
         """
-        # The active course mode already exists. Create verified course mode:
+        # Create audit/honor course modes
+        for mode in ('audit', 'honor'):
+            CourseModeFactory.create(mode_slug=mode, course_id=self.course_that_started.id)
+
+        # Create verified course mode:
         verified_mode = CourseModeFactory.create(
             mode_slug='verified',
             course_id=self.course_that_started.id,
@@ -674,6 +682,32 @@ class CourseModeViewTest(CatalogIntegrationMixin, UrlResetMixin, ModuleStoreTest
                     response = self.client.get(url)
                     expected_page_assertion_function(self, response, min_price=verified_mode.min_price)
 
+    def test_verified_mode_only(self):
+        # Create only the verified mode and enroll the user
+        CourseModeFactory.create(
+            mode_slug='verified',
+            course_id=self.course_that_started.id,
+            min_price=149,
+        )
+        CourseEnrollmentFactory(
+            is_active=True,
+            course_id=self.course_that_started.id,
+            user=self.user
+        )
+
+        # Value Prop TODO (REV-2378): remove waffle flag from tests once the new Track Selection template is rolled out.
+        with override_waffle_flag(VALUE_PROP_TRACK_SELECTION_FLAG, active=True):
+            with patch(GATING_METHOD_NAME, return_value=True):
+                with patch(CDL_METHOD_NAME, return_value=True):
+                    url = reverse('course_modes_choose', args=[str(self.course_that_started.id)])
+                    response = self.client.get(url)
+                    # Check that only the verified option is rendered
+                    self.assertNotContains(response, "Choose a path for your course in")
+                    self.assertContains(response, "Earn a certificate")
+                    self.assertNotContains(response, "Access this course")
+                    self.assertContains(response, '<div class="grid-single">')
+                    self.assertNotContains(response, '<div class="grid-options">')
+
 
 @unittest.skipUnless(settings.ROOT_URLCONF == 'lms.urls', 'Test only valid in lms')
 class TrackSelectionEmbargoTest(UrlResetMixin, ModuleStoreTestCase):

common/djangoapps/course_modes/views.py

@@ -176,12 +176,15 @@ class ChooseModeView(View):
             user=request.user,
             course_key=course_key
         )
+        is_single_mode = len(modes) == 1
+
         context = {
             "course_modes_choose_url": reverse(
                 "course_modes_choose",
                 kwargs={'course_id': course_id}
             ),
             "modes": modes,
+            "is_single_mode": is_single_mode,
             "has_credit_upsell": has_credit_upsell,
             "course_name": course.display_name_with_default,
             "course_org": course.display_org_with_default,

lms/static/sass/views/_track_selection.scss

@@ -12,6 +12,12 @@
         line-height: 1.8rem;
     }
 
+    .grid-single {
+        margin: auto;
+        width: 450px;
+        margin-bottom: 2rem;
+    }
+
     .track-selection-choice, .verified-note {
         margin: 0 1rem;
     }
@@ -269,10 +275,13 @@
         .choice-bullets {
             padding: 0 2rem 1rem 1rem;
         }
+        .grid-single {
+            width: 100%;
+        }
     }
 
     @media (min-width: map-get($grid-breakpoints, 'md')) {
-        .track-selection-options {
+        .grid-options {
             display: grid;
             grid-template-columns: 50% 50%;
         }

lms/templates/course_modes/track_selection.html

@@ -86,13 +86,21 @@ from openedx.core.djangolib.js_utils import js_escaped_string
                 <article class="register-choose content-main">
                     <header class="page-header">
                         <h3 class="py-md-3">
-                            ${_("Choose a path for your course in")} ${_(course_name)}
+                            % if is_single_mode:
+                                ${_(course_name)}
+                            % else:
+                                ${_("Choose a path for your course in")} ${_(course_name)}
+                            % endif
                         </h3>
                     </header>
 
                     <form class="form-register-choose mb-4 mt-0" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
                         <div class="row">
-                        <div class="track-selection-options">
+                        % if is_single_mode:
+                        <div class="grid-single">
+                        % else:
+                        <div class="grid-options">
+                        % endif
                             % if "verified" in modes:
                             <div class="track-selection-choice track-selection-certificate mr-md-2">
                                 <div class="certificate-container">
@@ -137,6 +145,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
                                 )}</div>
                             </div>
                             % endif
+                            % if "audit" in modes:
                             <div class="track-selection-choice track-selection-audit ml-md-3">
                                 <p class="float-right text-uppercase price-display">${_("Free")}</p>
                                 <div class="choice-title"><h4>${_("Access this course")}</h4></div>
@@ -149,6 +158,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
                                     </li>
                                 </ul>
                             </div>
+                            % endif
                         </div>
                         <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
                     </form>