feat: Add alert message in the FE when exceeded the API usage (#4027)

Co-authored-by: Matthew Elwell <[email protected]>
Flagsmith · Jun 18, 2024 · da46dab · da46dab
1 parent 85f30f5
commit da46dab
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 21 deletions.
diff --git a/frontend/common/services/useOrganisationUsage.ts b/frontend/common/services/useOrganisationUsage.ts
@@ -18,6 +18,7 @@ export const organisationUsageService = service
               query.organisationId
             }/usage-data/?${Utils.toParam({
               environment_id: query.environmentId,
+              period: query.billing_period,
               project_id: query.projectId,
             })}`,
           }

diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
@@ -59,6 +59,10 @@ export type Req = {
     organisationId: string
     projectId?: string
     environmentId?: string
+    billing_period?:
+      | 'current_billing_period'
+      | 'previous_billing_period'
+      | '90_day_period'
   }
   deleteIdentity: {
     id: string

diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
@@ -633,7 +633,7 @@ export type Res = {
   rolesPermissionUsers: PagedResponse<RolePermissionUser>
   createRolePermissionGroup: RolePermissionGroup
   rolePermissionGroup: PagedResponse<RolePermissionGroup>
-  getSubscriptionMetadata: { id: string }
+  getSubscriptionMetadata: { id: string; max_api_calls: number }
   environment: Environment
   metadataModelFieldList: PagedResponse<MetadataModelField>
   metadataModelField: MetadataModelField

diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js
@@ -378,6 +378,9 @@ const App = class extends Component {
                     {user && (
                       <OrganisationLimit
                         id={AccountStore.getOrganisation()?.id}
+                        organisationPlan={
+                          AccountStore.getOrganisation()?.subscription.plan
+                        }
                       />
                     )}
                     {user && showBanner && (

diff --git a/frontend/web/components/ButterBar.tsx b/frontend/web/components/ButterBar.tsx
@@ -26,6 +26,7 @@ const ButterBar: React.FC<ButterBarProps> = ({ billingStatus, projectId }) => {
     { skip: !projectId },
   )
   const processingRef = useRef(false)
+
   const checkProcessing = useCallback(
     (processing: FeatureImport | undefined) => {
       if (processing) {

diff --git a/frontend/web/components/OrganisationLimit.tsx b/frontend/web/components/OrganisationLimit.tsx
@@ -1,37 +1,75 @@
 import { FC } from 'react'
 import WarningMessage from './WarningMessage'
-import ErrorMessage from './ErrorMessage'
 import Utils from 'common/utils/utils'
 import { useGetSubscriptionMetadataQuery } from 'common/services/useSubscriptionMetadata'
 import Format from 'common/utils/format'
 import { useGetOrganisationUsageQuery } from 'common/services/useOrganisationUsage'
+import Icon from './Icon'
+import { Button } from './base/forms/Button'
+import Constants from 'common/constants'
 
 type OrganisationLimitType = {
   id: string
+  organisationPlan: string
 }
 
-const OrganisationLimit: FC<OrganisationLimitType> = ({ id }) => {
-  const { data: totalApiCalls } = useGetOrganisationUsageQuery(
-    {
-      organisationId: id,
-    },
-    { skip: !id },
-  )
+const OrganisationLimit: FC<OrganisationLimitType> = ({
+  id,
+  organisationPlan,
+}) => {
+  let body = { organisationId: id }
+  if (Utils.getPlanName(organisationPlan) !== 'free') {
+    body = { ...body, ...{ billing_period: 'current_billing_period' } }
+  }
+
+  const { data: totalApiCalls } = useGetOrganisationUsageQuery(body, {
+    skip: !id,
+  })
   const { data: maxApiCalls } = useGetSubscriptionMetadataQuery({ id })
   const maxApiCallsPercentage = Utils.calculateRemainingLimitsPercentage(
     totalApiCalls?.totals.total,
     maxApiCalls?.max_api_calls,
     70,
   ).percentage
 
-  const alertMaxApiCallsText = `You have used ${Format.shortenNumber(
+  const apiUsageMessageText = `${Format.shortenNumber(
     totalApiCalls?.totals.total,
-  )}/${Format.shortenNumber(
-    maxApiCalls?.max_api_calls,
-  )} of your allowed requests.`
+  )}/${Format.shortenNumber(maxApiCalls?.max_api_calls)}`
+
+  const alertMaxApiCallsText = `You have used ${apiUsageMessageText} of your allowed requests.`
+
+  const QuotaExceededMessage = () => {
+    return (
+      <div
+        className={'alert alert-danger announcement'}
+        style={{ display: 'initial' }}
+      >
+        <span className='icon-alert'>
+          <Icon name='close-circle' />
+        </span>
+        <>
+          Your organisation has exceeded its API usage quota{' '}
+          {`(${alertMaxApiCallsText}).`}{' '}
+          {Utils.getPlanName(organisationPlan) === 'Free' ? (
+            <b>Please upgrade your plan to continue receiving service.</b>
+          ) : (
+            <b>Automated billing for the overages may apply.</b>
+          )}
+        </>
+        <Button
+          className='btn ml-3'
+          onClick={() => {
+            document.location.replace(Constants.upgradeURL)
+          }}
+        >
+          Upgrade plan
+        </Button>
+      </div>
+    )
+  }
 
   return (
-    <Row>
+    <Row className='justify-content-center'>
       {Utils.getFlagsmithHasFeature('payments_enabled') &&
         Utils.getFlagsmithHasFeature('max_api_calls_alert') &&
         (maxApiCallsPercentage < 100 ? (
@@ -41,13 +79,7 @@ const OrganisationLimit: FC<OrganisationLimitType> = ({ id }) => {
             enabledButton
           />
         ) : (
-          maxApiCallsPercentage >= 100 && (
-            <ErrorMessage
-              error={alertMaxApiCallsText}
-              errorMessageClass={'announcement'}
-              enabledButton
-            />
-          )
+          maxApiCallsPercentage >= 100 && <QuotaExceededMessage />
         ))}
     </Row>
   )