fix: fix subscription prices and program dashboard max-width (#32278)

This commit is contained in:
Nawfal Ahmed
2023-05-23 16:17:28 +05:00
committed by GitHub
parent abac77e106
commit 2d9c528827
10 changed files with 25 additions and 16 deletions

View File

@@ -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

View File

@@ -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.'
);
});
});

View File

@@ -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',
);
});
});

View File

@@ -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.',
);
});
});

View File

@@ -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,

View File

@@ -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) {

View File

@@ -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')
),
{

View File

@@ -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,

View File

@@ -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,

View File

@@ -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 },
) %>