From c6934dda8c8fe0b262f69a0e3e9ae986ebc8ddc6 Mon Sep 17 00:00:00 2001 From: Nawfal Ahmed <111358247+NawfalAhmed@users.noreply.github.com> Date: Mon, 5 Jun 2023 17:46:11 +0500 Subject: [PATCH] PON-241: Copy changes on Program details page (#32352) * feat: update subscription info text in various states * feat: update subscription trial ending alert --- .../models/program_subscription_model.js | 34 +++++++++++++++---- .../spec/program_details_view_spec.js | 4 +-- .../views/program_alert_list_view.js | 8 +++-- .../program_details_tab_view.underscore | 4 +-- .../program_details_view.underscore | 4 +-- 5 files changed, 39 insertions(+), 15 deletions(-) diff --git a/lms/static/js/learner_dashboard/models/program_subscription_model.js b/lms/static/js/learner_dashboard/models/program_subscription_model.js index edff274790..ae102503cb 100644 --- a/lms/static/js/learner_dashboard/models/program_subscription_model.js +++ b/lms/static/js/learner_dashboard/models/program_subscription_model.js @@ -18,11 +18,9 @@ class ProgramSubscriptionModel extends Backbone.Model { } = context; const priceInUSD = subscription_prices?.find(({ currency }) => currency === 'USD'); - const trialMoment = moment( - DateUtils.localizeTime( - DateUtils.stringToMoment(data.trial_end), - 'UTC' - ) + const trialMoment = DateUtils.localizeTime( + DateUtils.stringToMoment(data.trial_end), + 'UTC' ); const subscriptionState = data.subscription_state?.toLowerCase() ?? ''; @@ -44,7 +42,10 @@ class ProgramSubscriptionModel extends Backbone.Model { ? trialMoment.isAfter(moment.utc()) : false; - const remainingDays = trialMoment.diff(moment.utc(), 'days'); + const remainingDays = ProgramSubscriptionModel.getRemainingDays( + data.trial_end, + userPreferences + ); const [currentPeriodEnd] = ProgramSubscriptionModel.formatDate( data.current_period_end, @@ -91,10 +92,29 @@ class ProgramSubscriptionModel extends Backbone.Model { const localTime = DateUtils.localizeTime( DateUtils.stringToMoment(date), userTimezone - ).format('HH:mm'); + ).format('HH:mm (z)'); return [localDate, localTime]; } + + static getRemainingDays(trialEndDate, userPreferences) { + if (!trialEndDate) { + return 0; + } + + const userTimezone = userPreferences.time_zone || 'UTC'; + const trialEndTime = DateUtils.localizeTime( + DateUtils.stringToMoment(trialEndDate), + userTimezone + ).startOf('day'); + const currentTime = DateUtils.localizeTime( + moment.utc(), + userTimezone + ).startOf('day'); + + return trialEndTime.diff(currentTime, 'days'); + + } } export default ProgramSubscriptionModel; diff --git a/lms/static/js/learner_dashboard/spec/program_details_view_spec.js b/lms/static/js/learner_dashboard/spec/program_details_view_spec.js index b574e644d9..c5eec98e46 100644 --- a/lms/static/js/learner_dashboard/spec/program_details_view_spec.js +++ b/lms/static/js/learner_dashboard/spec/program_details_view_spec.js @@ -703,7 +703,7 @@ describe('Program Details View', () => { testSubscriptionState( 'active', 'Manage my subscription', - 'Active trial ends', + 'Trial ends', true, ); }); @@ -720,7 +720,7 @@ describe('Program Details View', () => { testSubscriptionState( 'inactive', 'Restart my subscription', - 'Unlock verified access to all courses for $100/month USD. Cancel anytime.', + '$100/month USD subscription. Cancel anytime.', ); }); }); diff --git a/lms/static/js/learner_dashboard/views/program_alert_list_view.js b/lms/static/js/learner_dashboard/views/program_alert_list_view.js index d564271859..4f1ba37961 100644 --- a/lms/static/js/learner_dashboard/views/program_alert_list_view.js +++ b/lms/static/js/learner_dashboard/views/program_alert_list_view.js @@ -57,11 +57,15 @@ class ProgramAlertListView extends Backbone.View { return alertList.concat(this.trialEndingAlerts.map( ({ title: programName, remainingDays, ...data }) => ({ title: StringUtils.interpolate( - ngettext('Subscription trial expires in {remainingDays} day', 'Subscription trial expires in {remainingDays} days', remainingDays), + remainingDays < 1 + ? gettext('Subscription trial expires in less than 24 hours') + : ngettext('Subscription trial expires in {remainingDays} day', 'Subscription trial expires in {remainingDays} days', remainingDays), { remainingDays } ), message: StringUtils.interpolate( - ngettext('Your {programName} trial will expire in {remainingDays} day at {trialEndTime} on {trialEndDate} and the card on file will be charged {subscriptionPrice}.', 'Your {programName} trial will expire in {remainingDays} days at {trialEndTime} on {trialEndDate} and the card on file will be charged {subscriptionPrice}.', remainingDays), + remainingDays < 1 + ? gettext('Your {programName} trial will expire at {trialEndTime} on {trialEndDate} and the card on file will be charged {subscriptionPrice}.') + : ngettext('Your {programName} trial will expire in {remainingDays} day at {trialEndTime} on {trialEndDate} and the card on file will be charged {subscriptionPrice}.', 'Your {programName} trial will expire in {remainingDays} days at {trialEndTime} on {trialEndDate} and the card on file will be charged {subscriptionPrice}.', remainingDays), { programName, remainingDays, diff --git a/lms/templates/learner_dashboard/program_details_tab_view.underscore b/lms/templates/learner_dashboard/program_details_tab_view.underscore index 35fe29151a..1a970ae3bb 100644 --- a/lms/templates/learner_dashboard/program_details_tab_view.underscore +++ b/lms/templates/learner_dashboard/program_details_tab_view.underscore @@ -85,11 +85,11 @@ <%- StringUtils.interpolate( ( hasActiveTrial - ? gettext('Active trial ends {trialEndDate} at {trialEndTime}') + ? gettext('Trial ends {trialEndDate} at {trialEndTime}') : subscriptionState === 'active' ? gettext('Your next billing date is {currentPeriodEnd}') : subscriptionState === 'inactive' - ? gettext('Unlock verified access to all courses for {subscriptionPrice}. Cancel anytime.') + ? gettext('{subscriptionPrice} subscription. Cancel anytime.') : gettext('{subscriptionPrice} subscription after trial ends. Cancel anytime.') ), { diff --git a/lms/templates/learner_dashboard/program_details_view.underscore b/lms/templates/learner_dashboard/program_details_view.underscore index 6d48ce7ff7..6f03af4e7f 100644 --- a/lms/templates/learner_dashboard/program_details_view.underscore +++ b/lms/templates/learner_dashboard/program_details_view.underscore @@ -60,11 +60,11 @@ <%- StringUtils.interpolate( ( hasActiveTrial - ? gettext('Active trial ends {trialEndDate} at {trialEndTime}') + ? gettext('Trial ends {trialEndDate} at {trialEndTime}') : subscriptionState === 'active' ? gettext('Your next billing date is {currentPeriodEnd}') : subscriptionState === 'inactive' - ? gettext('Unlock verified access to all courses for {subscriptionPrice}. Cancel anytime.') + ? gettext('{subscriptionPrice} subscription. Cancel anytime.') : gettext('{subscriptionPrice} subscription after trial ends. Cancel anytime.') ), {