feat: Add cta on billing for >20k annual spend customers (#19508)

* add cta on billing for >20k annual spend customers * Update UI snapshots for `chromium` (1) * tweak the bullets, add dismissal logic, handle small screen sizes * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * give it a box, update wording, improve spacing * fix spacing so it lines up across the top properly * fix * Update UI snapshots for `chromium` (1) * address pr feedback * auto-dismiss on annual plan * remove unused hedgehog png * slight tweak to css for smaller screens * Update UI snapshots for `chromium` (1) * lint * Update UI snapshots for `chromium` (1) * fix dark mode * Update UI snapshots for `chromium` (1) --------- Co-authored-by: Bianca Yang <[email protected]> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Raquel Smith <[email protected]>
PostHog · Jan 4, 2024 · b0d4816 · b0d4816
1 parent ab4d0eb
commit b0d4816
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 119 deletions.
diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--light.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--light.png
diff --git a/...tend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--dark.png b/...tend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--dark.png
diff --git a/...end/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--light.png b/...end/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--light.png
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount.png
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2.png
diff --git a/frontend/src/scenes/billing/Billing.tsx b/frontend/src/scenes/billing/Billing.tsx
diff --git a/frontend/src/scenes/billing/billingLogic.ts b/frontend/src/scenes/billing/billingLogic.ts
@@ -162,9 +162,32 @@ export const billingLogic = kea<billingLogicType>([
                 return projectedTotal
             },
         ],
+        over20kAnnual: [
+            (s) => [s.billing, s.preflight, s.projectedTotalAmountUsd],
+            (billing, preflight, projectedTotalAmountUsd) => {
+                if (!billing || !preflight?.cloud) {
+                    return
+                }
+                if (
+                    billing.current_total_amount_usd_after_discount &&
+                    (parseFloat(billing.current_total_amount_usd_after_discount) > 1666 ||
+                        projectedTotalAmountUsd > 1666) &&
+                    billing.billing_period?.interval === 'month'
+                ) {
+                    return true
+                }
+                return
+            },
+        ],
+        isAnnualPlan: [
+            (s) => [s.billing],
+            (billing) => {
+                return billing?.billing_period?.interval === 'year'
+            },
+        ],
         billingAlert: [
-            (s) => [s.billing, s.preflight, s.projectedTotalAmountUsd, s.productSpecificAlert],
-            (billing, preflight, projectedTotalAmountUsd, productSpecificAlert): BillingAlertConfig | undefined => {
+            (s) => [s.billing, s.preflight, s.productSpecificAlert],
+            (billing, preflight, productSpecificAlert): BillingAlertConfig | undefined => {
                 if (productSpecificAlert) {
                     return productSpecificAlert
                 }
@@ -228,21 +251,6 @@ export const billingLogic = kea<billingLogicType>([
                         } allocation.`,
                     }
                 }
-
-                if (
-                    billing.current_total_amount_usd_after_discount &&
-                    (parseFloat(billing.current_total_amount_usd_after_discount) > 1000 ||
-                        projectedTotalAmountUsd > 1000) &&
-                    billing.billing_period?.interval === 'month'
-                ) {
-                    return {
-                        status: 'info',
-                        title: `Switch to annual up-front billing to save up to 20% on your bill.`,
-                        contactSupport: true,
-                        buttonCTA: 'Contact sales',
-                        dismissKey: 'annual-billing-cta',
-                    }
-                }
             },
         ],
     }),

diff --git a/frontend/src/styles/utilities.scss b/frontend/src/styles/utilities.scss
@@ -1408,3 +1408,7 @@ $decorations: underline, overline, line-through, no-underline;
 .aspect-video {
     aspect-ratio: 16 / 9;
 }
+
+.-scale-x-1 {
+    transform: scaleX(-1);
+}