feat(organizations): hide organization fields from settings for mmo o…

…rganizations - TASK-978 (#5280)

### 📣 Summary
Organization fields are not displayed anymore in setting screens for
MMOs.

### 👀 Preview steps
Feature/no-change template:
1. ℹ️ have account
2. Go to "settings" view at `/#/account/settings`
3. Use the feature flag `?ff_mmoEnabled=true`
4. Set the organization as MMO
5. 🟢 Fields should not be displayed
6. Set the feature flag to false as in `?ff_mmoEnabled=false`
7. 🟢 Fields should be displayed again

### 💭 Notes
The 'organization', 'organization_type' and 'organization_website' are
now being hidden when the current organization has the `is_mmo` flag.

jsapp/js/account/accountSettingsRoute.tsx

@@ -20,6 +20,7 @@ import type {
 } from './account.constants';
 import {HELP_ARTICLE_ANON_SUBMISSIONS_URL} from 'js/constants';
 import {useSession} from '../stores/useSession';
+import {useOrganizationQuery} from './organization/organizationQuery';
 
 bem.AccountSettings = makeBem(null, 'account-settings', 'form');
 bem.AccountSettings__left = makeBem(bem.AccountSettings, 'left');
@@ -39,12 +40,17 @@ const AccountSettings = () => {
 
   const {currentLoggedAccount, refreshAccount} = useSession();
 
+  const [displayedFields, setDisplayedFields] = useState<Array<keyof AccountFieldsValues>>([]);
+
+  const orgQuery = useOrganizationQuery();
+
   useEffect(() => {
-    if (!currentLoggedAccount) {
+
+    if (!currentLoggedAccount || !orgQuery.data) {
       return;
     }
 
-    setFormFields({
+    const fields = {
       name: currentLoggedAccount.extra_details.name,
       organization_type: currentLoggedAccount.extra_details.organization_type,
       organization: currentLoggedAccount.extra_details.organization,
@@ -60,8 +66,29 @@ const AccountSettings = () => {
       instagram: currentLoggedAccount.extra_details.instagram,
       newsletter_subscription:
         currentLoggedAccount.extra_details.newsletter_subscription,
-    });
-  }, [currentLoggedAccount]);
+    };
+
+    setFormFields(fields);
+
+    const fieldKeys = Object.keys(fields) as Array<keyof AccountFieldsValues>;
+
+    const organization = orgQuery.data;
+
+    // We will not display organization fields if user is a member of an MMO,
+    // only displaying these fields in organization settings view
+    setDisplayedFields(
+      !organization?.is_mmo
+        ? fieldKeys
+        : fieldKeys.filter((key) =>
+            ![
+              'organization',
+              'organization_website',
+              'organization_type',
+            ].includes(key)
+          )
+    );
+
+  }, [currentLoggedAccount, orgQuery.data]);
 
   usePrompt({
     when: !isPristine,
@@ -159,6 +186,7 @@ const AccountSettings = () => {
               errors={fieldErrors}
               values={formFields}
               onFieldChange={onFieldChange}
+              displayedFields={displayedFields}
             />
           </bem.AccountSettings__item>
         )}