show quota exceeded cards correctly (#7868)

## Summary quota exceeded cards would not be shown because of an error in the frontend meter exceeded logic ## How did you test this change? before ![image](https://github.com/highlight/highlight/assets/1351531/51aa1193-e77d-4fe4-8b96-2e130aa8b349) after ![image](https://github.com/highlight/highlight/assets/1351531/4322cb3d-73c5-429e-975f-f2113c193512) fixes HIG-4388 ## Are there any deployment considerations? no ## Does this work require review from our design team? no
highlight · Mar 1, 2024 · 391a7f5 · 391a7f5
1 parent 14cd831
commit 391a7f5
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 24 deletions.
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -2,6 +2,8 @@ name: Publish Production Docker Images
 
 on:
     workflow_dispatch:
+    pull_request:
+        types: [opened, synchronize]
     release:
         types: [published]
 

diff --git a/frontend/src/pages/Billing/utils/utils.ts b/frontend/src/pages/Billing/utils/utils.ts
@@ -3,7 +3,9 @@ import moment from 'moment'
 import { GetBillingDetailsForProjectQuery } from '@/graph/generated/operations'
 
 import {
+	BillingDetails,
 	Maybe,
+	Plan,
 	PlanType,
 	ProductType,
 	RetentionPeriod,
@@ -67,28 +69,63 @@ export const RETENTION_PERIOD_LABELS: { [K in RetentionPeriod]: string } = {
 }
 
 export const getMeterAmounts = (
-	data: GetBillingDetailsForProjectQuery,
+	details:
+		| Maybe<
+				{ __typename?: 'BillingDetails' } & Pick<
+					BillingDetails,
+					| 'meter'
+					| 'membersMeter'
+					| 'errorsMeter'
+					| 'logsMeter'
+					| 'tracesMeter'
+					| 'sessionsBillingLimit'
+					| 'errorsBillingLimit'
+					| 'logsBillingLimit'
+					| 'tracesBillingLimit'
+				> & {
+						plan: { __typename?: 'Plan' } & Pick<
+							Plan,
+							| 'type'
+							| 'interval'
+							| 'membersLimit'
+							| 'sessionsLimit'
+							| 'errorsLimit'
+							| 'logsLimit'
+							| 'tracesLimit'
+							| 'sessionsRate'
+							| 'errorsRate'
+							| 'logsRate'
+							| 'tracesRate'
+						>
+					}
+		  >
+		| undefined
+		| null,
 ): { [K in ProductType]: [number, number | undefined] } => {
-	const sessionsMeter = data.billingDetailsForProject?.meter ?? 0
-	const sessionsQuota = data.billingDetailsForProject?.sessionsBillingLimit
-		? data.billingDetailsForProject.plan.sessionsLimit +
-		  (data.billingDetailsForProject.sessionsBillingLimit ?? 0)
-		: undefined
-	const errorsMeter = data.billingDetailsForProject?.errorsMeter ?? 0
-	const errorsQuota = data.billingDetailsForProject?.errorsBillingLimit
-		? data.billingDetailsForProject.plan.errorsLimit +
-		  (data.billingDetailsForProject.errorsBillingLimit ?? 0)
-		: undefined
-	const logsMeter = data.billingDetailsForProject?.logsMeter ?? 0
-	const logsQuota = data.billingDetailsForProject?.logsBillingLimit
-		? data.billingDetailsForProject.plan.logsLimit +
-		  (data.billingDetailsForProject.logsBillingLimit ?? 0)
-		: undefined
-	const tracesMeter = data.billingDetailsForProject?.tracesMeter ?? 0
-	const tracesQuota = data.billingDetailsForProject?.tracesBillingLimit
-		? data.billingDetailsForProject.plan.tracesLimit +
-		  (data.billingDetailsForProject.tracesBillingLimit ?? 0)
-		: undefined
+	if (!details) {
+		return {
+			[ProductType.Sessions]: [0, undefined],
+			[ProductType.Errors]: [0, undefined],
+			[ProductType.Logs]: [0, undefined],
+			[ProductType.Traces]: [0, undefined],
+		}
+	}
+	const sessionsMeter = details?.meter ?? 0
+	const sessionsQuota = details?.sessionsBillingLimit
+		? details?.sessionsBillingLimit
+		: details?.plan.sessionsLimit
+	const errorsMeter = details?.errorsMeter ?? 0
+	const errorsQuota = details?.errorsBillingLimit
+		? details?.errorsBillingLimit
+		: details?.plan.errorsLimit
+	const logsMeter = details?.logsMeter ?? 0
+	const logsQuota = details?.logsBillingLimit
+		? details?.logsBillingLimit
+		: details?.plan.logsLimit
+	const tracesMeter = details?.tracesMeter ?? 0
+	const tracesQuota = details?.tracesBillingLimit
+		? details?.tracesBillingLimit
+		: details?.plan.tracesLimit
 	return {
 		[ProductType.Sessions]: [sessionsMeter, sessionsQuota],
 		[ProductType.Errors]: [errorsMeter, errorsQuota],
@@ -100,7 +137,7 @@ export const getMeterAmounts = (
 export const getQuotaPercents = (
 	data: GetBillingDetailsForProjectQuery,
 ): [ProductType, number][] => {
-	const amts = getMeterAmounts(data)
+	const amts = getMeterAmounts(data.billingDetailsForProject)
 	const sessionAmts = amts[ProductType.Sessions]
 	const errorAmts = amts[ProductType.Errors]
 	const logAmts = amts[ProductType.Logs]

diff --git a/frontend/src/pages/LogsPage/OverageCard/OverageCard.tsx b/frontend/src/pages/LogsPage/OverageCard/OverageCard.tsx
@@ -38,7 +38,7 @@ export const OverageCard = ({ productType }: Props) => {
 		)
 	}
 
-	const meters = getMeterAmounts(data)
+	const meters = getMeterAmounts(data.billingDetails)
 	const meter = meters[productType][0]
 	const quota = meters[productType][1]
 	if (quota === undefined || meter < quota) {

diff --git a/frontend/src/pages/Sessions/SessionsFeedV3/OverageCard/OverageCard.tsx b/frontend/src/pages/Sessions/SessionsFeedV3/OverageCard/OverageCard.tsx
@@ -38,7 +38,7 @@ export const OverageCard = ({ productType }: Props) => {
 		)
 	}
 
-	const meters = getMeterAmounts(data)
+	const meters = getMeterAmounts(data.billingDetails)
 	const meter = meters[productType][0]
 	const quota = meters[productType][1]
 	if (quota === undefined || meter < quota) {