feat: Add alert message in the FE when exceeded the API usage

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.period,
               project_id: query.projectId,
             })}`,
           }

frontend/common/types/requests.ts

@@ -59,6 +59,7 @@ export type Req = {
     organisationId: string
     projectId?: string
     environmentId?: string
+    period?: string
   }
   deleteIdentity: {
     id: string

frontend/common/types/responses.ts

@@ -621,7 +621,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

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 && (

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) {

frontend/web/components/ErrorMessage.js

@@ -34,6 +34,16 @@ export default class ErrorMessage extends PureComponent {
                 .join('<br/>'),
             }}
           />
+        ) : this.props.exceeded ? (
+          <>
+            Your organisation has exceeded its API usage quota{' '}
+            <b>{`(${error}).`}</b>{' '}
+            {Utils.getPlanName(this.props.organisationPlan) === 'Free' ? (
+              <b>Please upgrade your plan to continue receiving service.</b>
+            ) : (
+              <b>Automated billing for the overages may apply.</b>
+            )}
+          </>
         ) : (
           error
         )}

frontend/web/components/OrganisationLimit.tsx

@@ -8,27 +8,33 @@ import { useGetOrganisationUsageQuery } from 'common/services/useOrganisationUsa
 
 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, ...{ 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 errorMessageText = `${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 ${errorMessageText} of your allowed requests.`
 
   return (
     <Row>
@@ -43,9 +49,11 @@ const OrganisationLimit: FC<OrganisationLimitType> = ({ id }) => {
         ) : (
           maxApiCallsPercentage >= 100 && (
             <ErrorMessage
-              error={alertMaxApiCallsText}
+              error={errorMessageText}
+              organisationPlan={organisationPlan}
               errorMessageClass={'announcement'}
               enabledButton
+              exceeded
             />
           )
         ))}