From 139d0b23921a6729faee1b52852e98bfb22c052f Mon Sep 17 00:00:00 2001
From: Nawfal Ahmed <111358247+NawfalAhmed@users.noreply.github.com>
Date: Thu, 6 Jul 2023 14:01:40 +0500
Subject: [PATCH] feat: sort subscription programs in program dashboard
 (#32651)

---
 .../learner_dashboard/program_list_factory.js | 31 +++++++++++++++++++
 .../spec/program_card_view_spec.js            |  3 +-
 .../views/program_card_view.js                |  5 +--
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/lms/static/js/learner_dashboard/program_list_factory.js b/lms/static/js/learner_dashboard/program_list_factory.js
index c4621b356834..c577122ba0e9 100644
--- a/lms/static/js/learner_dashboard/program_list_factory.js
+++ b/lms/static/js/learner_dashboard/program_list_factory.js
@@ -25,6 +25,37 @@ function ProgramListFactory(options) {
         new HeaderView({
             context: options,
         }).render();
+
+        const activeSubscriptions = options.programsSubscriptionData
+            .filter(({ subscription_state }) => subscription_state === 'active')
+            .sort((a, b) => new Date(b.created) - new Date(a.created));
+
+        // Sort programs so programs with active subscriptions are at the top
+        if (activeSubscriptions.length) {
+            options.programsData = options.programsData
+                .map((programsData) => ({
+                    ...programsData,
+                    subscriptionIndex: activeSubscriptions.findIndex(
+                        ({ resource_id }) => resource_id === programsData.uuid,
+                    ),
+                }))
+                .sort(({ subscriptionIndex: indexA }, { subscriptionIndex: indexB }) => {
+                    switch (true) {
+                        case indexA === -1 && indexB === -1:
+                            // Maintain the original order for non-subscription programs
+                            return 0;
+                        case indexA === -1:
+                            // Move non-subscription program to the end
+                            return 1;
+                        case indexB === -1:
+                            // Keep non-subscription program to the end
+                            return -1;
+                        default:
+                            // Sort by subscriptionIndex in ascending order
+                            return indexA - indexB;
+                    }
+                });
+        }
     }
 
     new CollectionListView({
diff --git a/lms/static/js/learner_dashboard/spec/program_card_view_spec.js b/lms/static/js/learner_dashboard/spec/program_card_view_spec.js
index 1cbd91fb620b..c83825bd5530 100644
--- a/lms/static/js/learner_dashboard/spec/program_card_view_spec.js
+++ b/lms/static/js/learner_dashboard/spec/program_card_view_spec.js
@@ -42,6 +42,7 @@ describe('Program card View', () => {
                 name: 'Wageningen University & Research',
             },
         ],
+        subscriptionIndex: 1,
     };
     const userProgress = [
         {
@@ -173,6 +174,6 @@ describe('Program card View', () => {
     });
 
     it('should render the subscription badge if subscription is active', () => {
-        expect(view.$('.subscription-badge .badge').html().trim()).toEqual('Subscribed');
+        expect(view.$('.subscription-badge .badge').html()?.trim()).toEqual('Subscribed');
     });
 });
diff --git a/lms/static/js/learner_dashboard/views/program_card_view.js b/lms/static/js/learner_dashboard/views/program_card_view.js
index 658081ad0157..be9d42ed0a21 100644
--- a/lms/static/js/learner_dashboard/views/program_card_view.js
+++ b/lms/static/js/learner_dashboard/views/program_card_view.js
@@ -31,10 +31,7 @@ class ProgramCardView extends Backbone.View {
         }
         this.isSubscribed = (
             context.isUserB2CSubscriptionsEnabled &&
-            context.subscriptionCollection?.some({
-                resource_id: this.model.get('uuid'),
-                subscription_state: 'active',
-            })
+            this.model.get('subscriptionIndex') > -1
         ) ?? false;
         this.render();
     }