feat: sort subscription programs in program dashboard (#32651)

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({

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');
     });
 });

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();
     }