fix: fix subscription prices and program dashboard max-width (#32278)
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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.'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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.',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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')
|
||||
),
|
||||
{
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 },
|
||||
) %>
|
||||
|
||||
Reference in New Issue
Block a user