feat(sdk): show message in tooltip for negative balance (#762)

raystack · Sep 3, 2024 · bfa5cf7 · bfa5cf7
1 parent 396ca73
commit bfa5cf7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/sdks/js/packages/core/react/components/organization/billing/upcoming-billing-cycle.tsx b/sdks/js/packages/core/react/components/organization/billing/upcoming-billing-cycle.tsx
@@ -4,7 +4,7 @@ import { useFrontier } from '~/react/contexts/FrontierContext';
 import { V1Beta1Invoice, V1Beta1Plan } from '~/src';
 import { toast } from 'sonner';
 import Skeleton from 'react-loading-skeleton';
-import { Flex, Text, Image, Button } from '@raystack/apsara';
+import { Flex, Text, Image, Button, Tooltip } from '@raystack/apsara';
 import billingStyles from './billing.module.css';
 import line from '~/react/assets/line.svg';
 import Amount from '../../helpers/Amount';
@@ -15,6 +15,7 @@ import {
   getPlanNameWithInterval,
   makePlanSlug
 } from '~/react/utils';
+import { NEGATIVE_BALANCE_TOOLTIP_MESSAGE } from '~/react/utils/constants';
 
 function LabeledBillingData({
   label,
@@ -258,10 +259,20 @@ export const UpcomingBillingCycle = ({
         <LabeledBillingData
           label="Amount"
           value={
-            <Amount
-              currency={upcomingInvoice?.currency}
-              value={Number(upcomingInvoice?.amount)}
-            />
+            <Flex gap={'medium'}>
+              <Amount
+                currency={upcomingInvoice?.currency}
+                value={Number(upcomingInvoice?.amount)}
+              />
+              {Number(upcomingInvoice?.amount) < 0 ? (
+                <Tooltip
+                  message={NEGATIVE_BALANCE_TOOLTIP_MESSAGE}
+                  side="bottom"
+                >
+                  <InfoCircledIcon />
+                </Tooltip>
+              ) : null}
+            </Flex>
           }
         />
       </Flex>

diff --git a/sdks/js/packages/core/react/utils/constants.ts b/sdks/js/packages/core/react/utils/constants.ts
@@ -4,6 +4,9 @@ export const DEFAULT_TOKEN_PRODUCT_NAME = 'token';
 export const DEFAULT_PLAN_UPGRADE_MESSAGE =
   'Any remaining balance from your current plan will be prorated and credited to your account in future billing cycles.';
 
+export const NEGATIVE_BALANCE_TOOLTIP_MESSAGE =
+  'This negative amount shows a credit balance for prorated seats, which will be applied to future invoices.';
+
 export const SUBSCRIPTION_STATES = {
   ACTIVE: 'active',
   PAST_DUE: 'past_due',