feat: subscription changes and alerts for program dashboard and details (#32217)

* feat: subscription changes on program dashboard and details (#31909)

  - add a h2 programs heading on program dashboard
  - subscription ui changes on program dashboard
  - subscription alerts on both pages

* feat: add subscription upsell, fix responsive layout of program dashboard (#31943)

* test: update tests for subscription changes on program dashboard (#32021)

* feat: subscription api changes on program dashboard (#32085)

* feat: add subscription segment events to program details and dashboard (#32164)

* feat: subscription changes on program dashboard and details pages (#32205)

lms/static/js/learner_dashboard/models/program_subscription_model.js

@@ -11,8 +11,8 @@ class ProgramSubscriptionModel extends Backbone.Model {
         const {
             subscriptionData: [data = {}],
             programData: { subscription_prices },
-            urls,
-            userPreferences,
+            urls = {},
+            userPreferences = {},
         } = context;
 
         const priceInUSD = subscription_prices?.find(({ currency }) => currency === 'USD')?.price;
@@ -35,6 +35,8 @@ class ProgramSubscriptionModel extends Backbone.Model {
                 ? trialMoment.isAfter(moment.utc())
                 : false;
 
+        const remainingDays = trialMoment.diff(moment.utc(), 'days');
+
         const [nextPaymentDate] = ProgramSubscriptionModel.formatDate(
             data.next_payment_date,
             userPreferences
@@ -50,6 +52,7 @@ class ProgramSubscriptionModel extends Backbone.Model {
             {
                 hasActiveTrial,
                 nextPaymentDate,
+                remainingDays,
                 subscriptionPrice,
                 subscriptionState,
                 subscriptionUrl,
@@ -66,8 +69,8 @@ class ProgramSubscriptionModel extends Backbone.Model {
             return ['', ''];
         }
 
-        const userTimezone = userPreferences?.time_zone || 'UTC';
-        const userLanguage = userPreferences?.['pref-lang'] || 'en';
+        const userTimezone = userPreferences.time_zone || 'UTC';
+        const userLanguage = userPreferences['pref-lang'] || 'en';
         const context = {
             datetime: date,
             timezone: userTimezone,