From 522eb199dffda9fdc068b480119c49c29d7570ab Mon Sep 17 00:00:00 2001
From: James Kiger <68701146+jamesrkiger@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:13:29 -0500
Subject: [PATCH] feat(organizations): org role logic for usage page plan
 update button TASK-999 (#5296)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 📣 Summary
Adds logic to only display "See plans" button for organization owners.
Role check is behind a feature flag.

### 👀 Preview steps

1. Create an MMO, add an admin.
2. View usage page with `ff_mmosEnabled=true` as admin. You should not
see the "See plans" button.
3. View the usage page as organization owner. You should see the "See
plans" button".
---
 jsapp/js/account/usage/yourPlan.component.tsx | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

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 = () => {
             />
           )}
         </div>
-        <nav>
-          <BillingButton
-            label={'See plans'}
-            type='secondary'
-            onClick={() => window.location.assign('#' + ACCOUNT_ROUTES.PLAN)}
-          />
-          {/* This is commented out until the add-ons tab on the Plans page is implemented
-        <BillingButton
-          label={'get add-ons'}
-          // TODO: change this to point to the add-ons tab
-          onClick={() => window.location.assign('#' + ACCOUNT_ROUTES.PLAN)}
-        />
-         */}
-        </nav>
+        {showPlanUpdateLink && (
+          <nav>
+            <BillingButton
+              label={'See plans'}
+              type='secondary'
+              onClick={() => window.location.assign('#' + ACCOUNT_ROUTES.PLAN)}
+            />
+            {/* This is commented out until the add-ons tab on the Plans page is implemented
+              <BillingButton
+                label={'get add-ons'}
+                // TODO: change this to point to the add-ons tab
+                onClick={() => window.location.assign('#' + ACCOUNT_ROUTES.PLAN)}
+              />
+            */}
+          </nav>
+        )}
       </section>
       {subscriptionUpdate?.type === SubscriptionChangeType.CANCELLATION && (
         <div className={styles.subscriptionChangeNotice}>