Updating usage endpoints for organizations and subscriptions

jsapp/js/account/plan.component.tsx

@@ -27,7 +27,7 @@ import Button from 'js/components/common/button';
 import classnames from 'classnames';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
 import {notify} from 'js/utils';
-import {BaseProduct} from "js/account/subscriptionStore";
+import {ACTIVE_STRIPE_STATUSES} from 'js/constants';
 
 interface PlanState {
   subscribedProduct: null | BaseSubscription;
@@ -53,12 +53,6 @@ const initialState = {
   featureTypes: ['support', 'advanced', 'addons'],
 };
 
-/*
-  Stripe Subscription statuses that are shown as active in the UI.
-  Subscriptions with a status in this array will show an option to 'Manage'.
-*/
-const activeSubscriptionStatuses = ['active', 'past_due', 'trialing'];
-
 const subscriptionUpgradeMessageDuration = 8000;
 
 function planReducer(state: PlanState, action: DataUpdates) {
@@ -100,8 +94,11 @@ export default function Plan() {
     [state.products, state.organization, state.subscribedProduct]
   );
 
-  const hasManageableStatus = useCallback((subscription: BaseSubscription) =>
-    activeSubscriptionStatuses.includes(subscription.status), []);
+  const hasManageableStatus = useCallback(
+    (subscription: BaseSubscription) =>
+      ACTIVE_STRIPE_STATUSES.includes(subscription.status),
+    []
+  );
 
   const hasActiveSubscription = useMemo(() => {
     if (state.subscribedProduct) {
@@ -113,9 +110,7 @@ export default function Plan() {
   }, [state.subscribedProduct]);
 
   useMemo(() => {
-    if (
-      state.subscribedProduct?.length > 0
-    ) {
+    if (state.subscribedProduct?.length > 0) {
       const subscribedFilter =
         state.subscribedProduct?.[0].items[0].price.recurring?.interval;
       if (!hasManageableStatus(state.subscribedProduct)) {
@@ -207,7 +202,10 @@ export default function Plan() {
       const filterAmount = state.products.map((product: Product) => {
         const filteredPrices = product.prices.filter((price: BasePrice) => {
           const interval = price.recurring?.interval;
-          return interval === state.intervalFilter && product.metadata.product_type === 'plan';
+          return (
+            interval === state.intervalFilter &&
+            product.metadata.product_type === 'plan'
+          );
         });
 
         return {
@@ -216,8 +214,12 @@ export default function Plan() {
         };
       });
 
-      return filterAmount.filter((product: Product) => product.prices)
-        .sort((priceA: Price, priceB: Price) => priceA.prices.unit_amount > priceB.prices.unit_amount);
+      return filterAmount
+        .filter((product: Product) => product.prices)
+        .sort(
+          (priceA: Price, priceB: Price) =>
+            priceA.prices.unit_amount > priceB.prices.unit_amount
+        );
     }
     return [];
   }, [state.products, state.intervalFilter]);
@@ -244,9 +246,10 @@ export default function Plan() {
       const subscriptions = getSubscriptionsForProductId(product.id);
 
       if (subscriptions.length > 0) {
-        return subscriptions.some((subscription: BaseSubscription) =>
-          subscription.items[0].price.id === product.prices.id &&
-          hasManageableStatus(subscription)
+        return subscriptions.some(
+          (subscription: BaseSubscription) =>
+            subscription.items[0].price.id === product.prices.id &&
+            hasManageableStatus(subscription)
         );
       }
       return false;
@@ -262,7 +265,7 @@ export default function Plan() {
       }
 
       return subscriptions.some((subscription: BaseSubscription) =>
-          hasManageableStatus(subscription)
+        hasManageableStatus(subscription)
       );
     },
     [state.subscribedProduct]

jsapp/js/account/usage.api.ts

@@ -5,18 +5,27 @@ interface AssetUsage {
   asset__name: string;
   submission_count_current_month: number;
   submission_count_all_time: number;
-  nlp_usage_current_month: unknown,
-  nlp_usage_all_time: unknown,
+  nlp_usage_current_month: unknown;
+  nlp_usage_all_time: unknown;
   storage_bytes: number;
 }
 
 interface UsageResponse {
-  per_asset_usage: AssetUsage[],
-  total_submission_count_current_month: number,
-  total_submission_count_all_time: number,
-  total_storage_bytes: number,
-  total_nlp_asr_seconds: number,
-  total_nlp_mt_characters: number,
+  per_asset_usage: AssetUsage[];
+  total_submission_count: {
+    current_month: number;
+    current_year: number;
+    all_time: number;
+  };
+  total_storage_bytes: number;
+  total_nlp_usage: {
+    asr_seconds_current_month: number;
+    mt_characters_current_month: number;
+    asr_seconds_current_year: number;
+    mt_characters_current_year: number;
+    asr_seconds_all_time: number;
+    mt_characters_all_time: number;
+  };
 }
 
 const USAGE_URL = '/api/v2/service_usage/';

jsapp/js/account/usage.component.tsx

@@ -9,16 +9,16 @@ import Button from '../components/common/button';
 interface UsageState {
   storage: number;
   monthlySubmissions: number;
-  transcriptionMinutes: number;
-  translationChars: number;
+  monthlyTranscriptionMinutes: number;
+  monthlyTranslationChars: number;
 }
 
 export default function Usage() {
   const [usage, setUsage] = useState<UsageState>({
     storage: 0,
     monthlySubmissions: 0,
-    transcriptionMinutes: 0,
-    translationChars: 0,
+    monthlyTranscriptionMinutes: 0,
+    monthlyTranslationChars: 0,
   });
 
   function truncate(decimal: number) {
@@ -30,9 +30,12 @@ export default function Usage() {
       setUsage({
         ...usage,
         storage: truncate(data.total_storage_bytes / 1000000000), // bytes to GB
-        monthlySubmissions: data.total_submission_count_current_month,
-        transcriptionMinutes: Math.floor(truncate(data.total_nlp_asr_seconds / 60)), // seconds to minutes
-        translationChars: data.total_nlp_mt_characters,
+        monthlySubmissions: data.total_submission_count['current_month'],
+        monthlyTranscriptionMinutes: Math.floor(
+          truncate(data.total_nlp_usage['asr_seconds_current_month'] / 60)
+        ), // seconds to minutes
+        monthlyTranslationChars:
+          data.total_nlp_usage['mt_characters_current_month'],
       });
     });
   }, []);
@@ -67,7 +70,7 @@ export default function Usage() {
           </div>
           <div className={styles.usage}>
             <strong className={styles.description}>{t('Monthly use')}</strong>
-            <strong>{usage.transcriptionMinutes}</strong>
+            <strong>{usage.monthlyTranscriptionMinutes}</strong>
           </div>
         </div>
         <div className={styles.box}>
@@ -79,7 +82,7 @@ export default function Usage() {
           </div>
           <div className={styles.usage}>
             <strong className={styles.description}>{t('Monthly use')}</strong>
-            <strong>{usage.translationChars}</strong>
+            <strong>{usage.monthlyTranslationChars}</strong>
           </div>
         </div>
       </div>