feat: add onboarding billing step (#17514)

* update billing hero

* restructure plan comparison so it can be used w/o modal

* no onboarding for inclusion-only products

* add basic billing step

* improve variable naming

* fix

* make billing step work after subscribe & addons

* automatically include billing step in onboarding

* show billing step properly

* tolerate sub'd product on intro

* store when someone has sub'd during onboarding

* just put addons on the main screen

frontend/src/scenes/billing/BillingHero.tsx

@@ -9,8 +9,8 @@ export const BillingHero = (): JSX.Element => {
                 <h1 className="ingestion-title">Get the whole hog.</h1>
                 <h1 className="ingestion-title text-danger">Only pay for what you use.</h1>
                 <p className="mt-2 mb-0">
-                    Upgrade to any paid product plan to get access to features like A/B testing, multivariate feature
-                    flags, and more.
+                    Add your credit card details to get access to premium product and platform features. Set billing
+                    limits as low as $0 to control spend.
                 </p>
             </div>
             <div className="BillingHero__hog">

frontend/src/scenes/billing/BillingProduct.tsx

@@ -15,15 +15,15 @@ import {
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
-import { convertLargeNumberToWords, getUpgradeAllProductsLink, summarizeUsage } from './billing-utils'
+import { convertLargeNumberToWords, getUpgradeProductLink, summarizeUsage } from './billing-utils'
 import { BillingGauge } from './BillingGauge'
 import { billingLogic } from './billingLogic'
 import { BillingLimitInput } from './BillingLimitInput'
 import { billingProductLogic } from './billingProductLogic'
 import { capitalizeFirstLetter, compactNumber } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { ProductPricingModal } from './ProductPricingModal'
-import { PlanComparisonModal } from './PlanComparisonModal'
+import { PlanComparisonModal } from './PlanComparison'
 
 export const getTierDescription = (
     tiers: BillingV2TierType[],
@@ -621,21 +621,12 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                         Compare plans
                                     </LemonButton>
                                     <LemonButton
-                                        to={
-                                            // if we're in onboarding we want to upgrade them to the product and the addons at once
-                                            isOnboarding
-                                                ? getUpgradeAllProductsLink(
-                                                      product,
-                                                      upgradeToPlanKey || '',
-                                                      redirectPath
-                                                  )
-                                                : // otherwise we just want to upgrade them to the product
-                                                  `/api/billing-v2/activation?products=${
-                                                      product.type
-                                                  }:${upgradeToPlanKey}${
-                                                      redirectPath && `&redirect_path=${redirectPath}`
-                                                  }`
-                                        }
+                                        to={getUpgradeProductLink(
+                                            product,
+                                            upgradeToPlanKey || '',
+                                            redirectPath,
+                                            isOnboarding // if in onboarding, we want to include addons, otherwise don't
+                                        )}
                                         type="primary"
                                         icon={<IconPlus />}
                                         disableClientSideRouting

frontend/src/scenes/billing/PlanComparison.scss

@@ -0,0 +1,42 @@
+.PlanComparisonModal {
+    max-width: 900px;
+}
+table.PlanComparison {
+    table-layout: fixed;
+    td {
+        vertical-align: top;
+        padding: 0.75rem 1.25rem;
+
+        &.PlanTable__td__upgradeButton {
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+        }
+    }
+    th {
+        vertical-align: top;
+        padding: 0.75rem 1.25rem 0.75rem;
+        font-weight: 600;
+        text-align: left;
+
+        &.PlanTable__th__section {
+            padding: 0.25rem 1.25rem 0.25rem;
+            font-weight: 500;
+        }
+
+        &.PlanTable__th__feature {
+            padding: 0.75rem 1.25rem 0.75rem 3.25rem;
+            font-weight: 600;
+        }
+
+        &.PlanTable__th__last-feature {
+            padding-bottom: 2rem;
+        }
+
+        p {
+            font-weight: 400;
+        }
+    }
+}
+.PlanTable__tr__border {
+    border-bottom: 3px rgba(0, 0, 0, 0.07) dotted;
+}