feat(billing): experiment with adding pricing/feature table on the or…

…g billing page (#13105) Co-authored-by: Emanuele Capparelli <k@emkpp.com>
PostHog · Dec 5, 2022 · 8fc6d25 · 8fc6d25
1 parent 65184fc
commit 8fc6d25
Show file tree

Hide file tree

Showing 10 changed files with 808 additions and 234 deletions.
diff --git a/frontend/src/lib/components/LemonButton/LemonButton.tsx b/frontend/src/lib/components/LemonButton/LemonButton.tsx
@@ -111,7 +111,7 @@ function LemonButtonInternal(
                 className
             )}
             disabled={disabled || loading}
-            to={to}
+            to={disabled ? undefined : to}
             target={targetBlank ? '_blank' : undefined}
             {...linkOnlyProps}
             {...buttonProps}

diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -489,6 +489,7 @@ export const eventUsageLogic = kea<eventUsageLogicType>({
             completionPercent: number
         ) => ({ activeTasksCount, completedTasksCount, completionPercent }),
         reportActivationSideBarTaskClicked: (key: string) => ({ key }),
+        reportBillingUpgradeClicked: (plan: string) => ({ plan }),
     },
     listeners: ({ values }) => ({
         reportAxisUnitsChanged: (properties) => {
@@ -1180,5 +1181,10 @@ export const eventUsageLogic = kea<eventUsageLogicType>({
                 key,
             })
         },
+        reportBillingUpgradeClicked: ({ plan }) => {
+            posthog.capture('billing upgrade button clicked', {
+                plan,
+            })
+        },
     }),
 })
diff --git a/frontend/src/scenes/billing/v2/test/Billing.tsx b/frontend/src/scenes/billing/v2/test/Billing.tsx
diff --git a/frontend/src/scenes/billing/v2/test/BillingHero.tsx b/frontend/src/scenes/billing/v2/test/BillingHero.tsx
@@ -8,7 +8,9 @@ export const BillingHero = (): JSX.Element => {
                 <p className="text-xs uppercase my-0">How pricing works</p>
                 <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">Product analytics, session recording, feature flags, a/b testing, and more.</p>
+                <p className="mt-2 mb-0">
+                    Upgrade to get access to features like A/B testing, multivariate feature flags, and more.
+                </p>
             </div>
             <div className="BillingHero__hog">
                 <BlushingHog className="BillingHero__hog__img" />

diff --git a/frontend/src/scenes/billing/v2/test/PlanTable.scss b/frontend/src/scenes/billing/v2/test/PlanTable.scss
@@ -0,0 +1,29 @@
+.PlanTable {
+    max-width: 1200px;
+    table {
+        table-layout: fixed;
+        td {
+            vertical-align: top;
+            padding: 1.25rem;
+        }
+        th {
+            vertical-align: top;
+            padding: 1.25rem;
+            font-weight: 800;
+            text-align: left;
+
+            &.PlanTable__th__section {
+                padding: 0.25rem 1.25rem 0.25rem;
+                font-weight: 500;
+            }
+
+            &.PlanTable__th__subfeature {
+                padding: 1rem 0 1rem 2rem;
+                font-weight: 600;
+            }
+        }
+    }
+    .PlanTable__tr__border {
+        border-bottom: 3px rgba(0, 0, 0, 0.07) dotted;
+    }
+}