Skip to content

Add back ai estimates #20040

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

Merged
ianmatson merged 1 commit into from
Sep 9, 2026
Merged

Add back ai estimates #20040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 5 additions & 2 deletions src/components/Pricing/PricingCalculator/Tabbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -923,12 +923,15 @@ export default function Tabbed() {
</div>
{/* Two ways to leave with an estimate: a link to this one, or a prompt that builds
one from what the visitor already pays for elsewhere. Same row, same weight. */}
<div className="flex flex-wrap items-center justify-between gap-2 mt-2">
<div
className="flex flex-wrap items-center justify-between gap-2 mt-2"
data-ai-estimate-placement="inside-calculator"
>
<CopyURLButton onClick={generateURL} />
<RenderInClient
render={() => {
const variant = window.posthog?.getFeatureFlag?.(AI_PRICING_FLAG)
return variant && variant !== AI_PRICING_EXPERIMENT_VARIANTS.control ? (
return variant === AI_PRICING_EXPERIMENT_VARIANTS.inside_calculator ? (
<AgentEstimateLink
source="calculator-total"
className="text-sm font-bold text-red dark:text-yellow"
Expand Down
19 changes: 19 additions & 0 deletions src/components/Pricing/Redesign/CalculatorSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ import React, { useEffect } from 'react'
import { useLocation } from '@reach/router'
import { Calculator } from 'components/Pricing/Test/Calculator'
import { scrollToElement } from 'components/ScrollToElement'
import { RenderInClient } from 'components/RenderInClient'
import AgentEstimateLink, {
AI_PRICING_EXPERIMENT_VARIANTS,
AI_PRICING_FLAG,
} from 'components/Pricing/AgentEstimateLink'

/**
* The pricing calculator as a plain, always-visible section.
Expand All @@ -27,6 +32,20 @@ export default function CalculatorSection(): JSX.Element {
// `my-0` loses to its `mb-12` in Tailwind's cascade regardless of class order, so it
// takes a child selector to win on specificity.
<div className="not-prose [&>section]:my-0 [&>section]:px-0">
<RenderInClient
render={() =>
window.posthog?.getFeatureFlag?.(AI_PRICING_FLAG) ===
AI_PRICING_EXPERIMENT_VARIANTS.outside_calculator ? (
<p className="text-[15px] text-secondary mb-6" data-ai-estimate-placement="outside-calculator">
Coming from another tool?{' '}
<AgentEstimateLink source={AI_PRICING_EXPERIMENT_VARIANTS.outside_calculator} /> using your
real usage there.
</p>
) : (
<></>
)
}
/>
<Calculator hideHeader id="" />
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/Pricing/Redesign/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Components for the pricing page, served on **`/pricing`**. The page that assembles them is `pages/pricing/index.tsx`.

These components shipped behind the `pricing-page-redesign` experiment. The redesign is now the only pricing page. The calculator is always visible as its own section (`CalculatorSection`). Nothing here reads a feature flag.
These components shipped behind the `pricing-page-redesign` experiment. The redesign is now the only pricing page. The calculator is always visible as its own section (`CalculatorSection`). The `ai-pricing` experiment controls the AI estimate entry point: `control` hides it, `inside-calculator` places it beside **Share estimate**, and `outside-calculator` places it above the calculator and in the **Estimating usage** guidance. Unknown or unavailable flag values hide the AI estimate links. The shared `AgentEstimateLink` popover retains the ChatGPT, Claude, and copy-prompt actions and their existing analytics events.

## Why

Expand Down
39 changes: 19 additions & 20 deletions src/components/Pricing/Test/Calculator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,8 +215,25 @@ export const Calculator = ({ hideHeader = false, id = 'calculator' }: Calculator
<h4 className="text-lg mb-2">Estimating usage</h4>
<SidebarList>
<SidebarListItem>
Not sure what your volume looks like? Add the tracking code to your site and check back
in a few days – no credit card required.
Not sure what your volume looks like?{' '}
<RenderInClient
placeholder={<>Add</>}
render={() =>
window.posthog?.getFeatureFlag?.(AI_PRICING_FLAG) ===
AI_PRICING_EXPERIMENT_VARIANTS.outside_calculator ? (
<>
<AgentEstimateLink
label="Generate an AI estimate"
source="pricing-page-estimating-usage"
/>{' '}
or add
</>
) : (
<>Add</>
)
}
/>{' '}
the tracking code to your site and check back in a few days – no credit card required.
</SidebarListItem>
<SidebarListItem>
If something stupid happens and you get an unexpected bill (like if{' '}
Expand All @@ -232,24 +249,6 @@ export const Calculator = ({ hideHeader = false, id = 'calculator' }: Calculator
</Link>{' '}
to help!
</SidebarListItem>
<RenderInClient
render={() => {
const variant = window.posthog?.getFeatureFlag?.(AI_PRICING_FLAG)
return variant && variant !== AI_PRICING_EXPERIMENT_VARIANTS.control ? (
<SidebarListItem>
Coming from another tool?{' '}
<AgentEstimateLink
label="Create an estimate"
source="pricing-page-estimating-usage"
className={sidebarLinkClasses}
/>{' '}
using your real usage there.
</SidebarListItem>
) : (
<></>
)
}}
/>
</SidebarList>
</div>
</div>
Expand Down
Loading