From 2d9c528827ff917cccc1cbb696913f7a9746d230 Mon Sep 17 00:00:00 2001 From: Nawfal Ahmed <111358247+NawfalAhmed@users.noreply.github.com> Date: Tue, 23 May 2023 16:17:28 +0500 Subject: [PATCH] fix: fix subscription prices and program dashboard max-width (#32278) --- .../models/program_subscription_model.js | 13 +++++++++++-- .../spec/program_alert_list_view_spec.js | 4 ++-- .../spec/program_details_sidebar_view_spec.js | 2 +- .../spec/program_details_view_spec.js | 4 ++-- .../views/program_alert_list_view.js | 2 +- lms/static/sass/views/_program-list.scss | 2 +- .../program_details_sidebar.underscore | 2 +- .../program_details_tab_view.underscore | 4 ++-- .../program_details_view.underscore | 4 ++-- .../upgrade_message_subscription.underscore | 4 ++-- 10 files changed, 25 insertions(+), 16 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 0a52d9358c..8f15092a67 100644 --- a/lms/static/js/learner_dashboard/models/program_subscription_model.js +++ b/lms/static/js/learner_dashboard/models/program_subscription_model.js @@ -2,6 +2,8 @@ import Backbone from 'backbone'; import moment from 'moment'; import DateUtils from 'edx-ui-toolkit/js/utils/date-utils'; +import StringUtils from 'edx-ui-toolkit/js/utils/string-utils'; + /** * Model for Program Subscription Data. @@ -15,7 +17,7 @@ class ProgramSubscriptionModel extends Backbone.Model { userPreferences = {}, } = context; - const priceInUSD = subscription_prices?.find(({ currency }) => currency === 'USD')?.price; + const priceInUSD = subscription_prices?.find(({ currency }) => currency === 'USD'); const trialMoment = moment( DateUtils.localizeTime( DateUtils.stringToMoment(data.trial_end), @@ -24,7 +26,14 @@ class ProgramSubscriptionModel extends Backbone.Model { ); const subscriptionState = data.subscription_state?.toLowerCase() ?? ''; - const subscriptionPrice = '$' + parseFloat(priceInUSD); + const subscriptionPrice = StringUtils.interpolate( + gettext('${price}/month {currency}'), + { + price: parseFloat(priceInUSD?.price), + currency: priceInUSD?.currency, + } + ); + const subscriptionUrl = subscriptionState === 'active' ? urls.manage_subscription_url diff --git a/lms/static/js/learner_dashboard/spec/program_alert_list_view_spec.js b/lms/static/js/learner_dashboard/spec/program_alert_list_view_spec.js index ed12a98ab5..2e8d8beb3e 100644 --- a/lms/static/js/learner_dashboard/spec/program_alert_list_view_spec.js +++ b/lms/static/js/learner_dashboard/spec/program_alert_list_view_spec.js @@ -11,7 +11,7 @@ describe('Program Alert List View', () => { hasActiveTrial: true, nextPaymentDate: 'May 8, 2023', remainingDays: 2, - subscriptionPrice: '$100', + subscriptionPrice: '$100/month USD', subscriptionState: 'active', subscriptionUrl: null, trialEndDate: 'Apr 20, 2023', @@ -52,7 +52,7 @@ describe('Program Alert List View', () => { 'Subscription trial expires in 2 days' ); expect(view.$('.alert:last .alert-message').text().trim()).toEqual( - 'Your Test Program trial will expire in 2 days at 5:59 am on Apr 20, 2023 and the card on file will be charged $100/month.' + 'Your Test Program trial will expire in 2 days at 5:59 am on Apr 20, 2023 and the card on file will be charged $100/month USD.' ); }); }); diff --git a/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js b/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js index f889a7e0a2..554cc31190 100644 --- a/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js +++ b/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js @@ -262,7 +262,7 @@ describe('Program Progress View', () => { testSubscriptionState( 'inactive', 'Inactive subscription', - 'Restart your subscription for $100/month. Your payment history is still available', + 'Restart your subscription for $100/month USD. Your payment history is still available', ); }); }); 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 e8c24edd09..29f7e5bdef 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 @@ -695,7 +695,7 @@ describe('Program Details View', () => { testSubscriptionState( 'pre', 'Start 7-day free trial', - '$100/month subscription after trial ends. Cancel anytime.', + '$100/month USD subscription after trial ends. Cancel anytime.', ); }); @@ -720,7 +720,7 @@ describe('Program Details View', () => { testSubscriptionState( 'inactive', 'Restart my subscription', - 'Unlock verified access to all courses for $100/month. Cancel anytime.', + 'Unlock verified access to all courses for $100/month USD. 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 687be87991..d564271859 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 @@ -61,7 +61,7 @@ class ProgramAlertListView extends Backbone.View { { 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}/month.', 'Your {programName} trial will expire in {remainingDays} days at {trialEndTime} on {trialEndDate} and the card on file will be charged {subscriptionPrice}/month.', remainingDays), + 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/static/sass/views/_program-list.scss b/lms/static/sass/views/_program-list.scss index c00ae3a444..23f9a78b7c 100644 --- a/lms/static/sass/views/_program-list.scss +++ b/lms/static/sass/views/_program-list.scss @@ -8,7 +8,7 @@ .program-list-wrapper { @include make-row(); padding: ($baseline*2) ($baseline/2); - max-width: 82rem; + max-width: 79rem; margin: 0 auto; @include media-breakpoint-up(md) { diff --git a/lms/templates/learner_dashboard/program_details_sidebar.underscore b/lms/templates/learner_dashboard/program_details_sidebar.underscore index 0f562fffc4..cab7aad04b 100644 --- a/lms/templates/learner_dashboard/program_details_sidebar.underscore +++ b/lms/templates/learner_dashboard/program_details_sidebar.underscore @@ -26,7 +26,7 @@ subscriptionState === 'active' ? gettext('View your receipts or modify your subscription on the {a_start}Orders and subscriptions{a_end} page') : subscriptionState === 'inactive' - ? gettext('Restart your subscription for {subscriptionPrice}/month. Your payment history is still available on the {a_start}Orders and subscriptions{a_end} page') + ? gettext('Restart your subscription for {subscriptionPrice}. Your payment history is still available on the {a_start}Orders and subscriptions{a_end} page') : gettext('If you had a subscription previously, your payment history is still available on the {a_start}Orders and subscriptions{a_end} page') ), { diff --git a/lms/templates/learner_dashboard/program_details_tab_view.underscore b/lms/templates/learner_dashboard/program_details_tab_view.underscore index 9b24c6ddd8..4532cc2180 100644 --- a/lms/templates/learner_dashboard/program_details_tab_view.underscore +++ b/lms/templates/learner_dashboard/program_details_tab_view.underscore @@ -89,8 +89,8 @@ : subscriptionState === 'active' ? gettext('Your next billing date is {nextPaymentDate}') : subscriptionState === 'inactive' - ? gettext('Unlock verified access to all courses for {subscriptionPrice}/month. Cancel anytime.') - : gettext('{subscriptionPrice}/month subscription after trial ends. Cancel anytime.') + ? gettext('Unlock verified access to all courses for {subscriptionPrice}. Cancel anytime.') + : gettext('{subscriptionPrice} subscription after trial ends. Cancel anytime.') ), { subscriptionPrice, diff --git a/lms/templates/learner_dashboard/program_details_view.underscore b/lms/templates/learner_dashboard/program_details_view.underscore index d4c69489bf..2a03bf75b9 100644 --- a/lms/templates/learner_dashboard/program_details_view.underscore +++ b/lms/templates/learner_dashboard/program_details_view.underscore @@ -64,8 +64,8 @@ : subscriptionState === 'active' ? gettext('Your next billing date is {nextPaymentDate}') : subscriptionState === 'inactive' - ? gettext('Unlock verified access to all courses for {subscriptionPrice}/month. Cancel anytime.') - : gettext('{subscriptionPrice}/month subscription after trial ends. Cancel anytime.') + ? gettext('Unlock verified access to all courses for {subscriptionPrice}. Cancel anytime.') + : gettext('{subscriptionPrice} subscription after trial ends. Cancel anytime.') ), { subscriptionPrice, diff --git a/lms/templates/learner_dashboard/upgrade_message_subscription.underscore b/lms/templates/learner_dashboard/upgrade_message_subscription.underscore index eb8d10e93a..7a3471f9a3 100644 --- a/lms/templates/learner_dashboard/upgrade_message_subscription.underscore +++ b/lms/templates/learner_dashboard/upgrade_message_subscription.underscore @@ -11,8 +11,8 @@ <%- StringUtils.interpolate( ( subscriptionState === 'inactive' - ? gettext('Pay {subscriptionPrice}/month for all courses in this program') - : gettext('Pay {subscriptionPrice}/month after {trialLength}-day free trial') + ? gettext('Pay {subscriptionPrice} for all courses in this program') + : gettext('Pay {subscriptionPrice} after {trialLength}-day free trial') ), { subscriptionPrice, trialLength }, ) %>