From 0077714cb0c733b8a2d9c40d62dd91071a421200 Mon Sep 17 00:00:00 2001
From: Vishal Sharma <makeavish786@gmail.com>
Date: Wed, 18 Sep 2024 19:06:03 +0530
Subject: [PATCH] chore: add note on data refresh in billing (#5938)

* chore: add note on data refresh in billing

* chore: add a class name and move these inline styles to the scss file

* chore: add light mode
---
 .../BillingContainer/BillingContainer.styles.scss     | 11 +++++++++++
 .../container/BillingContainer/BillingContainer.tsx   |  7 ++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/BillingContainer/BillingContainer.styles.scss b/frontend/src/container/BillingContainer/BillingContainer.styles.scss
index e4c7deec06..2bc41d89e6 100644
--- a/frontend/src/container/BillingContainer/BillingContainer.styles.scss
+++ b/frontend/src/container/BillingContainer/BillingContainer.styles.scss
@@ -50,6 +50,13 @@
 			align-items: center;
 		}
 	}
+
+	.billing-update-note {
+		text-align: left;
+		font-size: 13px;
+		color: var(--bg-vanilla-200);
+		margin-top: 16px;
+	}
 }
 
 .ant-skeleton.ant-skeleton-element.ant-skeleton-active {
@@ -75,5 +82,9 @@
 				}
 			}
 		}
+
+		.billing-update-note {
+			color: var(--bg-ink-200);
+		}
 	}
 }
diff --git a/frontend/src/container/BillingContainer/BillingContainer.tsx b/frontend/src/container/BillingContainer/BillingContainer.tsx
index e366f068b2..449474a429 100644
--- a/frontend/src/container/BillingContainer/BillingContainer.tsx
+++ b/frontend/src/container/BillingContainer/BillingContainer.tsx
@@ -348,7 +348,12 @@ export default function BillingContainer(): JSX.Element {
 	const BillingUsageGraphCallback = useCallback(
 		() =>
 			!isLoading && !isFetchingBillingData ? (
-				<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
+				<>
+					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
+					<div className="billing-update-note">
+						Note: Billing metrics are updated once every 24 hours.
+					</div>
+				</>
 			) : (
 				<Card className="empty-graph-card" bordered={false}>
 					<Spinner size="large" tip="Loading..." height="35vh" />