Merge branch 'main' into nlp-background-audio

Author: p2edwards

hub/models/extra_user_detail.py

@@ -35,6 +35,8 @@ def save(
         if not update_fields or (update_fields and 'data' in update_fields):
             self.standardize_json_field('data', 'organization', str)
             self.standardize_json_field('data', 'name', str)
+            if not created:
+                self._sync_org_name()
 
         super().save(
             force_insert=force_insert,
@@ -59,3 +61,22 @@ def save(
                 self.user.id,
                 self.validated_password,
             )
+
+    def _sync_org_name(self):
+        """
+        Synchronizes the `name` field of the Organization model with the
+        "organization" attribute found in the `data` field of ExtraUserDetail,
+        but only if the user is the owner.
+
+        This ensures that any updates in the metadata are accurately reflected
+        in the organization's name.
+        """
+        user_organization = self.user.organization
+        if user_organization.is_owner(self.user):
+            try:
+                organization_name = self.data['organization'].strip()
+            except (KeyError, AttributeError):
+                organization_name = None
+
+            user_organization.name = organization_name
+            user_organization.save(update_fields=['name'])

jsapp/js/account/accountSidebar.tsx

@@ -3,13 +3,13 @@ import {NavLink} from 'react-router-dom';
 import {observer} from 'mobx-react-lite';
 import bem from 'js/bem';
 import Icon from 'js/components/common/icon';
-import {IconName} from 'jsapp/fonts/k-icons';
+import type {IconName} from 'jsapp/fonts/k-icons';
 import Badge from '../components/common/badge';
 import subscriptionStore from 'js/account/subscriptionStore';
 import './accountSidebar.scss';
 import useWhenStripeIsEnabled from 'js/hooks/useWhenStripeIsEnabled.hook';
-import {OrganizationContext} from 'js/account/organizations/useOrganization.hook';
 import {ACCOUNT_ROUTES} from 'js/account/routes.constants';
+import {useOrganizationQuery} from './stripe.api';
 
 interface AccountNavLinkProps {
   iconName: IconName;
@@ -34,9 +34,8 @@ function AccountNavLink(props: AccountNavLinkProps) {
 
 function AccountSidebar() {
   const [showPlans, setShowPlans] = useState(false);
-  const [organization, _] = useContext(OrganizationContext);
 
-  const isOrgOwner = useMemo(() => organization?.is_owner, [organization]);
+  const orgQuery = useOrganizationQuery();
 
   useWhenStripeIsEnabled(() => {
     if (!subscriptionStore.isInitialised) {
@@ -61,7 +60,7 @@ function AccountSidebar() {
         name={t('Security')}
         to={ACCOUNT_ROUTES.SECURITY}
       />
-      {isOrgOwner && (
+      {orgQuery.data?.is_owner && (
         <>
           <AccountNavLink
             iconName='reports'
@@ -80,7 +79,7 @@ function AccountSidebar() {
                   iconName='plus'
                   name={t('Add-ons')}
                   to={ACCOUNT_ROUTES.ADD_ONS}
-                  isNew={true}
+                  isNew
                 />
               )}
             </>

jsapp/js/account/billingContextProvider.component.tsx

@@ -1,26 +1,22 @@
 import React, {ReactNode} from 'react';
 import {UsageContext, useUsage} from 'js/account/usage/useUsage.hook';
 import {ProductsContext, useProducts} from 'js/account/useProducts.hook';
-import {
-  OrganizationContext,
-  useOrganization,
-} from 'js/account/organizations/useOrganization.hook';
 import sessionStore from 'js/stores/session';
+import {useOrganizationQuery} from 'js/account/stripe.api';
 
 export const BillingContextProvider = (props: {children: ReactNode}) => {
+  const orgQuery = useOrganizationQuery();
+
   if (!sessionStore.isLoggedIn) {
     return <>{props.children}</>;
   }
-  const [organization, reloadOrg, orgStatus] = useOrganization();
-  const usage = useUsage(organization?.id);
+  const usage = useUsage(orgQuery.data?.id || null);
   const products = useProducts();
   return (
-    <OrganizationContext.Provider value={[organization, reloadOrg, orgStatus]}>
-      <UsageContext.Provider value={usage}>
-        <ProductsContext.Provider value={products}>
-          {props.children}
-        </ProductsContext.Provider>
-      </UsageContext.Provider>
-    </OrganizationContext.Provider>
+    <UsageContext.Provider value={usage}>
+      <ProductsContext.Provider value={products}>
+        {props.children}
+      </ProductsContext.Provider>
+    </UsageContext.Provider>
   );
 };

jsapp/js/account/organizations/organizations.utils.tsx

@@ -0,0 +1,47 @@
+import type {SubscriptionInfo} from 'jsapp/js/account/stripe.types';
+import type {EnvStoreData} from 'jsapp/js/envStore';
+
+/** Only use this directly for complex cases/strings (for example, possessive case). 
+ * Otherwise, use getSimpleMMOLabel.
+ * @param {EnvStoreData} envStoreData
+ * @param {SubscriptionInfo} subscription
+ * @returns boolean indicating whether an MMO should be referred to as a 'team' or as an 'organization
+ */
+export function shouldUseTeamLabel(
+  envStoreData: EnvStoreData,
+  subscription: SubscriptionInfo | null
+) {
+  if (subscription) {
+    return (
+      subscription.items[0].price.product.metadata?.plan_type !== 'enterprise'
+    );
+  }
+
+  return envStoreData.use_team_label;
+}
+
+/**
+ * @param {EnvStoreData} envStoreData
+ * @param {SubscriptionInfo} subscription
+ * @param {boolean} plural
+ * @param {boolean} capitalize
+ * @returns Translated string for referring to MMO as 'team' or 'organization'
+ * */
+export function getSimpleMMOLabel(
+  envStoreData: EnvStoreData,
+  subscription: SubscriptionInfo | null,
+  plural: boolean = false,
+  capitalize: boolean = false
+) {
+  if (shouldUseTeamLabel(envStoreData, subscription)) {
+    if (plural) {
+      return capitalize ? t('Teams') : t('teams');
+    }
+    return capitalize ? t('Team') : t('team');
+  }
+
+  if (plural) {
+    return capitalize ? t('Organizations') : t('organizations');
+  }
+  return capitalize ? t('Organization') : t('organization');
+}

jsapp/js/account/organizations/requireOrgOwner.component.tsx

@@ -1,30 +1,31 @@
-import React, {Suspense, useContext, useEffect} from 'react';
+import React, {Suspense, useEffect} from 'react';
 import {useNavigate} from 'react-router-dom';
-import {OrganizationContext} from 'js/account/organizations/useOrganization.hook';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
 import {ACCOUNT_ROUTES} from 'js/account/routes.constants';
+import {useOrganizationQuery} from 'js/account/stripe.api';
 
 interface Props {
   children: React.ReactNode;
   redirect?: boolean;
 }
 
 export const RequireOrgOwner = ({children, redirect = true}: Props) => {
-  const [organization, _, orgStatus] = useContext(OrganizationContext);
   const navigate = useNavigate();
+  const orgQuery = useOrganizationQuery();
 
+  // Redirect to Account Settings if you're not the owner
   useEffect(() => {
     if (
       redirect &&
-      !orgStatus.pending &&
-      organization &&
-      !organization.is_owner
+      !orgQuery.isPending &&
+      orgQuery.data &&
+      !orgQuery.data.is_owner
     ) {
       navigate(ACCOUNT_ROUTES.ACCOUNT_SETTINGS);
     }
-  }, [organization, orgStatus.pending, redirect]);
+  }, [redirect, orgQuery.isSuccess, orgQuery.data, navigate]);
 
-  return redirect && organization?.is_owner ? (
+  return redirect && orgQuery.data?.is_owner ? (
     <Suspense fallback={null}>{children}</Suspense>
   ) : (
     <LoadingSpinner />

jsapp/js/account/organizations/useOrganization.hook.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import {useNavigate, useSearchParams} from 'react-router-dom';
 import styles from './plan.module.scss';
-import {postCheckout, postCustomerPortal} from '../stripe.api';
+import {postCheckout, postCustomerPortal, useOrganizationQuery} from '../stripe.api';
 import Button from 'js/components/common/button';
 import classnames from 'classnames';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
@@ -37,7 +37,6 @@ import type {ConfirmChangeProps} from 'js/account/plans/confirmChangeModal.compo
 import ConfirmChangeModal from 'js/account/plans/confirmChangeModal.component';
 import {PlanContainer} from 'js/account/plans/planContainer.component';
 import {ProductsContext} from '../useProducts.hook';
-import {OrganizationContext} from 'js/account/organizations/useOrganization.hook';
 import {ACCOUNT_ROUTES} from 'js/account/routes.constants';
 import {useRefreshApiFetcher} from 'js/hooks/useRefreshApiFetcher.hook';
 
@@ -115,8 +114,7 @@ export default function Plan(props: PlanProps) {
   >([]);
   const [products, loadProducts, productsStatus] = useContext(ProductsContext);
   useRefreshApiFetcher(loadProducts, productsStatus);
-  const [organization, loadOrg, orgStatus] = useContext(OrganizationContext);
-  useRefreshApiFetcher(loadOrg, orgStatus);
+  const orgQuery = useOrganizationQuery();
   const [confirmModal, setConfirmModal] = useState<ConfirmChangeProps>({
     newPrice: null,
     products: [],
@@ -149,8 +147,8 @@ export default function Plan(props: PlanProps) {
 
   const isDataLoading = useMemo(
     (): boolean =>
-      !(products.isLoaded && organization && state.subscribedProduct),
-    [products.isLoaded, organization, state.subscribedProduct]
+      !(products.isLoaded && orgQuery.data && state.subscribedProduct),
+    [products.isLoaded, orgQuery.data, state.subscribedProduct]
   );
 
   const isDisabled = useMemo(() => isBusy, [isBusy]);
@@ -227,10 +225,10 @@ export default function Plan(props: PlanProps) {
 
   // if the user is not the owner of their org, send them back to the settings page
   useEffect(() => {
-    if (!organization?.is_owner) {
+    if (!orgQuery.data?.is_owner) {
       navigate(ACCOUNT_ROUTES.ACCOUNT_SETTINGS);
     }
-  }, [organization]);
+  }, [orgQuery.data]);
 
   // Re-fetch data from API and re-enable buttons if displaying from back/forward cache
   useEffect(() => {
@@ -372,15 +370,15 @@ export default function Plan(props: PlanProps) {
   };
 
   const buySubscription = (price: Price, quantity = 1) => {
-    if (!price.id || isDisabled || !organization?.id) {
+    if (!price.id || isDisabled || !orgQuery.data?.id) {
       return;
     }
     setIsBusy(true);
     if (activeSubscriptions.length) {
       if (!isDowngrade(activeSubscriptions, price, quantity)) {
         // if the user is upgrading prices, send them to the customer portal
         // this will immediately change their subscription
-        postCustomerPortal(organization.id, price.id, quantity)
+        postCustomerPortal(orgQuery.data.id, price.id, quantity)
           .then(processCheckoutResponse)
           .catch(() => setIsBusy(false));
       } else {
@@ -395,7 +393,7 @@ export default function Plan(props: PlanProps) {
       }
     } else {
       // just send the user to the checkout page
-      postCheckout(price.id, organization.id, quantity)
+      postCheckout(price.id, orgQuery.data.id, quantity)
         .then(processCheckoutResponse)
         .catch(() => setIsBusy(false));
     }
@@ -441,7 +439,7 @@ export default function Plan(props: PlanProps) {
       </div>
     );
 
-  if (!products.products.length || !organization) {
+  if (!products.products.length || !orgQuery.data) {
     return null;
   }
 
@@ -557,7 +555,7 @@ export default function Plan(props: PlanProps) {
             isBusy={isBusy}
             setIsBusy={setIsBusy}
             products={products.products}
-            organization={organization}
+            organization={orgQuery.data}
             onClickBuy={buySubscription}
           />
         )}

jsapp/js/account/plans/plan.component.tsx

@@ -1,13 +1,8 @@
 import BillingButton from 'js/account/plans/billingButton.component';
 import React, {useContext} from 'react';
-import type {
-  Price,
-  Organization,
-  SinglePricedProduct,
-} from 'js/account/stripe.types';
-import {postCustomerPortal} from 'js/account/stripe.api';
+import type {Price, SinglePricedProduct} from 'js/account/stripe.types';
+import {postCustomerPortal, useOrganizationQuery} from 'js/account/stripe.api';
 import {processCheckoutResponse} from 'js/account/stripe.utils';
-import {OrganizationContext} from 'js/account/organizations/useOrganization.hook';
 
 interface PlanButtonProps {
   buySubscription: (price: Price, quantity?: number) => void;
@@ -34,15 +29,15 @@ export const PlanButton = ({
   quantity,
   isSubscribedToPlan,
 }: PlanButtonProps) => {
-  const [organization] = useContext(OrganizationContext);
+  const orgQuery = useOrganizationQuery();
 
-  if (!product || !organization || product.price.unit_amount === 0) {
+  if (!product || !orgQuery.data || product.price.unit_amount === 0) {
     return null;
   }
 
   const manageSubscription = (subscriptionPrice?: Price) => {
     setIsBusy(true);
-    postCustomerPortal(organization.id, subscriptionPrice?.id, quantity)
+    postCustomerPortal(orgQuery.data.id, subscriptionPrice?.id, quantity)
       .then(processCheckoutResponse)
       .catch(() => setIsBusy(false));
   };

jsapp/js/account/plans/planButton.component.tsx

@@ -2,7 +2,7 @@ import {keepPreviousData, useQuery} from '@tanstack/react-query';
 import {endpoints} from 'js/api.endpoints';
 import type {PaginatedResponse} from 'js/dataInterface';
 import {fetchGet} from 'js/api';
-import {QueryKeys} from '../queryKeys';
+import {QueryKeys} from 'js/query/queryKeys';
 
 export interface AccessLog {
   /** User URL */

jsapp/js/query/queries/accessLogs.query.ts renamed to jsapp/js/account/security/accessLogs/accessLogs.query.ts

@@ -6,7 +6,7 @@ import React from 'react';
 import PaginatedQueryUniversalTable from 'js/universalTable/paginatedQueryUniversalTable.component';
 
 // Utilities
-import useAccessLogsQuery, {type AccessLog} from 'js/query/queries/accessLogs.query';
+import useAccessLogsQuery, {type AccessLog} from './accessLogs.query';
 import {formatTime} from 'js/utils';
 // import sessionStore from 'js/stores/session';