diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png index 9ccbe27971b45..f599ea59d602b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png differ 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 index 7ef2222880396..fe6ebe0fbdaff 100644 Binary files a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount.png and b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount.png differ diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2.png index a931bed1128b3..c9e9c33192efb 100644 Binary files a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2.png and b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2.png differ diff --git a/frontend/src/mocks/fixtures/_billing_v2.json b/frontend/src/mocks/fixtures/_billing_v2.json index 61bb2e194b877..64f31e5c16d16 100644 --- a/frontend/src/mocks/fixtures/_billing_v2.json +++ b/frontend/src/mocks/fixtures/_billing_v2.json @@ -455,6 +455,7 @@ "price_description": null, "usage_key": "events", "image_url": "https://posthog.com/images/product/product-icons/product-analytics.svg", + "icon_key": "IconGraph", "docs_url": "https://posthog.com/docs/product-analytics", "subscribed": true, "plans": [ @@ -749,6 +750,7 @@ "description": "Understand how groups of users behave.", "price_description": null, "image_url": "https://posthog.com/images/product/product-icons/group-analytics.svg", + "icon_key": "IconPeople", "docs_url": "https://posthog.com/docs/product-analytics/group-analytics", "type": "group_analytics", "tiers": [ diff --git a/frontend/src/mocks/fixtures/_billing_v2_with_discount.json b/frontend/src/mocks/fixtures/_billing_v2_with_discount.json index dde4a079cd356..24a8abfff031a 100644 --- a/frontend/src/mocks/fixtures/_billing_v2_with_discount.json +++ b/frontend/src/mocks/fixtures/_billing_v2_with_discount.json @@ -382,6 +382,7 @@ "description": "Trends, funnels, path analysis + more.", "price_description": null, "usage_key": "events", + "icon_key": "IconGraph", "image_url": "https://posthog.com/images/product/product-icons/product-analytics.svg", "docs_url": "https://posthog.com/docs/product-analytics", "subscribed": true, @@ -677,6 +678,7 @@ "description": "Understand how groups of users behave.", "price_description": null, "image_url": "https://posthog.com/images/product/product-icons/group-analytics.svg", + "icon_key": "IconPeople", "docs_url": "https://posthog.com/docs/product-analytics/group-analytics", "type": "group_analytics", "tiers": [], diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx index 5e7dbb1efcf0c..4f041630529c8 100644 --- a/frontend/src/scenes/billing/BillingProduct.tsx +++ b/frontend/src/scenes/billing/BillingProduct.tsx @@ -24,6 +24,7 @@ import { capitalizeFirstLetter, compactNumber } from 'lib/utils' import { eventUsageLogic } from 'lib/utils/eventUsageLogic' import { ProductPricingModal } from './ProductPricingModal' import { PlanComparisonModal } from './PlanComparison' +import { getProductIcon } from 'scenes/products/Products' import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal' const UNSUBSCRIBE_SURVEY_ID = '018b6e13-590c-0000-decb-c727a2b3f462' @@ -60,9 +61,7 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
- {addon.image_url ? ( - {`Logo - ) : null} +
{getProductIcon(addon.icon_key, 'text-2xl')}

{addon.name}

@@ -294,13 +293,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
- {product.image_url ? ( - {`Logo - ) : null} + {getProductIcon(product.icon_key, 'text-2xl')}

{product.name}

{product.description}
diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx index 646c553ce8dc8..0fcd7bbf695ca 100644 --- a/frontend/src/scenes/billing/PlanComparison.tsx +++ b/frontend/src/scenes/billing/PlanComparison.tsx @@ -8,6 +8,7 @@ import { useActions, useValues } from 'kea' import { eventUsageLogic } from 'lib/utils/eventUsageLogic' import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils' import { billingLogic } from './billingLogic' +import { getProductIcon } from 'scenes/products/Products' export function PlanIcon({ feature, @@ -211,13 +212,7 @@ export const PlanComparison = ({
- {product.image_url && ( - {`Logo - )} + {getProductIcon(product.icon_key, 'text-2xl')} {product.name} @@ -275,13 +270,7 @@ export const PlanComparison = ({ className="PlanTable__th__section bg-side justify-left rounded text-left mb-2" >
- {includedProduct.image_url && ( - {`Logo - )} + {getProductIcon(includedProduct.icon_key, 'text-2xl')} {includedProduct.name} diff --git a/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx b/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx index 5bba423b8dd12..54618e56a0d64 100644 --- a/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx +++ b/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx @@ -2,6 +2,7 @@ import { LemonButton, LemonCard } from '@posthog/lemon-ui' import { OnboardingStep } from './OnboardingStep' import { OnboardingStepKey, onboardingLogic } from './onboardingLogic' import { useActions, useValues } from 'kea' +import { getProductIcon } from 'scenes/products/Products' export const OnboardingOtherProductsStep = ({ stepKey = OnboardingStepKey.OTHER_PRODUCTS, @@ -27,13 +28,7 @@ export const OnboardingOtherProductsStep = ({ key={suggestedProduct.type} >
-
- {suggestedProduct.name} -
+
{getProductIcon(suggestedProduct.icon_key, 'text-2xl')}

{suggestedProduct.name}

{suggestedProduct.description}

diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx index e05e18ee22f24..11f9d4c0c1132 100644 --- a/frontend/src/scenes/products/Products.tsx +++ b/frontend/src/scenes/products/Products.tsx @@ -1,5 +1,4 @@ import { LemonButton } from '@posthog/lemon-ui' -import { IconBarChart } from 'lib/lemon-ui/icons' import { SceneExport } from 'scenes/sceneTypes' import { BillingProductV2Type, ProductKey } from '~/types' import { useActions, useValues } from 'kea' @@ -14,6 +13,7 @@ import { LemonCard } from 'lib/lemon-ui/LemonCard/LemonCard' import { router } from 'kea-router' import { getProductUri } from 'scenes/onboarding/onboardingLogic' import { productsLogic } from './productsLogic' +import * as Icons from '@posthog/icons' export const scene: SceneExport = { component: Products, @@ -64,19 +64,17 @@ function OnboardingNotCompletedButton({ url, productKey }: { url: string; produc ) } +export function getProductIcon(iconKey?: string | null, className?: string): JSX.Element { + return Icons[iconKey || 'IconLogomark']({ className }) +} + function ProductCard({ product }: { product: BillingProductV2Type }): JSX.Element { const { currentTeam } = useValues(teamLogic) const onboardingCompleted = currentTeam?.has_completed_onboarding_for?.[product.type] return (
-
- {product.image_url ? ( - {`Logo - ) : ( - - )} -
+
{getProductIcon(product.icon_key, 'text-2xl')}

{product.name}

diff --git a/frontend/src/types.ts b/frontend/src/types.ts index e439c2b4e5f15..6394f126dc74b 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -1174,6 +1174,7 @@ export interface BillingProductV2Type { name: string description: string price_description?: string | null + icon_key?: string | null image_url?: string | null docs_url: string | null free_allocation?: number @@ -1210,6 +1211,7 @@ export interface BillingProductV2AddonType { description: string price_description: string | null image_url: string | null + icon_key?: string docs_url: string | null type: string tiers: BillingV2TierType[] | null