diff --git a/jsapp/js/account/usage/yourPlan.component.tsx b/jsapp/js/account/usage/yourPlan.component.tsx index 1decccae2d..ef4a732490 100644 --- a/jsapp/js/account/usage/yourPlan.component.tsx +++ b/jsapp/js/account/usage/yourPlan.component.tsx @@ -14,6 +14,8 @@ import { import {ProductsContext} from '../useProducts.hook'; import {getSubscriptionChangeDetails} from '../stripe.utils'; import {ACCOUNT_ROUTES} from 'js/account/routes.constants'; +import {useOrganizationQuery} from '../organization/organizationQuery'; +import {FeatureFlag, useFeatureFlag} from 'jsapp/js/featureFlags'; const BADGE_COLOR_KEYS: {[key in SubscriptionChangeType]: BadgeColor} = { [SubscriptionChangeType.RENEWAL]: 'light-blue', @@ -32,6 +34,8 @@ export const YourPlan = () => { const [env] = useState(() => envStore); const [session] = useState(() => sessionStore); const [productsContext] = useContext(ProductsContext); + const orgQuery = useOrganizationQuery(); + const areMmosEnabled = useFeatureFlag(FeatureFlag.mmosEnabled); const planName = subscriptions.planName; @@ -58,6 +62,10 @@ export const YourPlan = () => { } }, [env.isReady, subscriptions.isInitialised]); + const showPlanUpdateLink = areMmosEnabled + ? orgQuery.data?.request_user_role === 'owner' + : true; + const subscriptionUpdate = useMemo(() => { return getSubscriptionChangeDetails(currentPlan, productsContext.products); }, [currentPlan, productsContext.isLoaded]); @@ -116,20 +124,22 @@ export const YourPlan = () => { /> )} - + {showPlanUpdateLink && ( + + )} {subscriptionUpdate?.type === SubscriptionChangeType.CANCELLATION && (