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