Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: render projected amount at top of page #29195

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+28 −1
Open

feat: render projected amount at top of page #29195

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e314f8f
render projected amount at top of page
zlwaterfield Feb 25, 2025
c0012b8
Merge branch 'master' into zach/show-forecast
zlwaterfield Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/src/lib/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,7 @@ export const FEATURE_FLAGS = {
WEB_ANALYTICS_TABLE_SORTING: 'web-analytics-table-sorting', // owner: @rafaeelaudibert #team-web-analytics
ONBOARDING_DATA_WAREHOUSE_FOR_PRODUCT_ANALYTICS: 'onboarding-data-warehouse-for-product-analytics', // owner: @joshsny #team-growth
DELAYED_LOADING_ANIMATION: 'delayed-loading-animation', // owner: @raquelmsmith
PROJECTED_TOTAL_AMOUNT: 'projected-total-amount', // owner: @zach
} as const
export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]

Expand Down
26 changes: 25 additions & 1 deletion frontend/src/scenes/billing/Billing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ import { Field, Form } from 'kea-forms'
import { router } from 'kea-router'
import { RestrictionScope, useRestrictedArea } from 'lib/components/RestrictedArea'
import { supportLogic } from 'lib/components/Support/supportLogic'
import { OrganizationMembershipLevel } from 'lib/constants'
import { FEATURE_FLAGS, OrganizationMembershipLevel } from 'lib/constants'
import { dayjs } from 'lib/dayjs'
import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { humanFriendlyCurrency, toSentenceCase } from 'lib/utils'
import { useEffect } from 'react'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
Expand All @@ -38,6 +39,8 @@ export function Billing(): JSX.Element {
const { preflight, isCloudOrDev } = useValues(preflightLogic)
const { openSupportForm } = useActions(supportLogic)

const { featureFlags } = useValues(featureFlagLogic)

const restrictionReason = useRestrictedArea({
minimumAccessLevel: OrganizationMembershipLevel.Admin,
scope: RestrictionScope.Organization,
Expand Down Expand Up @@ -187,6 +190,27 @@ export function Billing(): JSX.Element {
humanFriendlyCurrency(billing.current_total_amount_usd)}
</div>
</div>
{featureFlags[FEATURE_FLAGS.PROJECTED_TOTAL_AMOUNT] &&
billing?.projected_total_amount_usd &&
parseFloat(billing?.projected_total_amount_usd) > 0 && (
<div>
<LemonLabel
info="This is roughly calculated based on your current bill and the remaining time left in this billing period. This number updates once daily."
className="text-secondary"
>
Projected total
</LemonLabel>
<div className="font-semibold text-2xl text-secondary">
{billing.discount_percent
? humanFriendlyCurrency(
billing.projected_total_amount_usd_after_discount
)
: humanFriendlyCurrency(
billing?.projected_total_amount_usd
)}
Comment on lines +209 to +210
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Optional chaining is redundant here since we already check for billing?.projected_total_amount_usd on line 194

Suggested change
billing?.projected_total_amount_usd
)}
billing.projected_total_amount_usd
)}

</div>
</div>
)}
{billing?.discount_amount_usd && (
<div>
<LemonLabel
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1745,6 +1745,8 @@ export interface BillingType {
deactivated?: boolean
current_total_amount_usd?: string
current_total_amount_usd_after_discount?: string
projected_total_amount_usd?: string
projected_total_amount_usd_after_discount?: string
products: BillingProductV2Type[]

custom_limits_usd?: {
Expand Down
Loading