From bfa5cf721257a169118d1bd37dce226b668ce435 Mon Sep 17 00:00:00 2001 From: Rishabh Mishra Date: Tue, 3 Sep 2024 15:11:51 +0530 Subject: [PATCH] feat(sdk): show message in tooltip for negative balance (#762) --- .../billing/upcoming-billing-cycle.tsx | 21 ++++++++++++++----- .../js/packages/core/react/utils/constants.ts | 3 +++ 2 files changed, 19 insertions(+), 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 index 2605f4ca7..958530842 100644 --- 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 = ({ + + + {Number(upcomingInvoice?.amount) < 0 ? ( + + + + ) : null} + } /> diff --git a/sdks/js/packages/core/react/utils/constants.ts b/sdks/js/packages/core/react/utils/constants.ts index e341b1335..f1edfd505 100644 --- 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',