diff --git a/jsapp/js/account/subscriptionStore.ts b/jsapp/js/account/subscriptionStore.ts index ac9de4411c..e41289dea8 100644 --- a/jsapp/js/account/subscriptionStore.ts +++ b/jsapp/js/account/subscriptionStore.ts @@ -2,7 +2,8 @@ import {makeAutoObservable} from 'mobx'; import {handleApiFail, fetchGet} from 'js/api'; import {ACTIVE_STRIPE_STATUSES, ROOT_URL} from 'js/constants'; import type {PaginatedResponse} from 'js/dataInterface'; -import type {Product, SubscriptionInfo} from 'js/account/stripe.types'; +import {PlanNames, type Product, type SubscriptionInfo} from 'js/account/stripe.types'; +import envStore from 'js/envStore'; const PRODUCTS_URL = '/api/v2/stripe/products/'; @@ -43,6 +44,22 @@ class SubscriptionStore { }); } + /* + * The plan name displayed to the user. This will display, in order of precedence: + * * The user's active plan subscription + * * The FREE_TIER_DISPLAY["name"] setting (if the user registered before FREE_TIER_CUTOFF_DATE + * * The free plan + */ + public get planName() { + if ( + this.planResponse.length && + this.planResponse[0].items.length + ) { + return this.planResponse[0].items[0].price.product.name; + } + return envStore.data?.free_tier_display?.name || PlanNames.FREE; + } + private onFetchSubscriptionInfoDone( response: PaginatedResponse ) { diff --git a/jsapp/js/account/usage/yourPlan.component.tsx b/jsapp/js/account/usage/yourPlan.component.tsx index 665c20263f..1decccae2d 100644 --- a/jsapp/js/account/usage/yourPlan.component.tsx +++ b/jsapp/js/account/usage/yourPlan.component.tsx @@ -33,18 +33,7 @@ export const YourPlan = () => { const [session] = useState(() => sessionStore); const [productsContext] = useContext(ProductsContext); - /* - * The plan name displayed to the user. This will display, in order of precedence: - * * The user's active plan subscription - * * The FREE_TIER_DISPLAY["name"] setting (if the user registered before FREE_TIER_CUTOFF_DATE - * * The free plan - */ - const planName = useMemo(() => { - if (subscriptions.planResponse.length) { - return subscriptions.planResponse[0].items[0].price.product.name; - } - return env.data?.free_tier_display?.name || PlanNames.FREE; - }, [env.isReady, subscriptions.isInitialised]); + const planName = subscriptions.planName; // The start date of the user's plan. Defaults to the account creation date if the user doesn't have a subscription. const startDate = useMemo(() => {