Skip to content

Commit

Permalink
fix: onboarding 3000 fixes (#19329)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daibhin
daibhin authored Dec 14, 2023
1 parent 3c399da commit 6ce4298
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 21 deletions.
Binary file modified frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
}),

afterMount(({ values }) => {
if (values.shouldShowWelcomeAnnouncement) {
if (!values.sidePanelOpen && values.shouldShowWelcomeAnnouncement) {
sidePanelStateLogic.findMounted()?.actions.openSidePanel(SidePanelTab.Welcome)
}
}),
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/lib/components/ActivationSidebar/activationLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'

import { navigationLogic } from '~/layout/navigation/navigationLogic'
import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
import { dashboardsModel } from '~/models/dashboardsModel'
import { EventDefinitionType, ProductKey, TeamBasicType } from '~/types'
import { EventDefinitionType, ProductKey, SidePanelTab, TeamBasicType } from '~/types'

import type { activationLogicType } from './activationLogicType'

Expand Down Expand Up @@ -67,6 +68,8 @@ export const activationLogic = kea<activationLogicType>([
['loadPluginsSuccess', 'loadPluginsFailure'],
navigationLogic,
['toggleActivationSideBar', 'showActivationSideBar', 'hideActivationSideBar'],
sidePanelStateLogic,
['openSidePanel'],
eventUsageLogic,
['reportActivationSideBarShown'],
savedInsightsLogic,
Expand Down Expand Up @@ -373,6 +376,7 @@ export const activationLogic = kea<activationLogicType>([
'*': (_, params) => {
if (params?.onboarding_completed && !values.hasCompletedAllTasks) {
actions.toggleActivationSideBar()
actions.openSidePanel(SidePanelTab.Activation)
} else {
actions.hideActivationSideBar()
}
Expand Down
46 changes: 28 additions & 18 deletions frontend/src/scenes/billing/PlanComparison.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import './PlanComparison.scss'

import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { IconCheckmark, IconClose, IconWarning } from 'lib/lemon-ui/icons'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
Expand All @@ -27,11 +29,11 @@ export function PlanIcon({
<div className="flex items-center text-xs text-muted">
{!feature ? (
<>
<IconClose className={`text-danger mx-4 ${className}`} />
<IconClose className={clsx('text-danger mx-4', className)} />
</>
) : feature.limit ? (
<>
<IconWarning className={`text-warning mx-4 shrink-0 ${className}`} />
<IconWarning className={clsx('text-warning mx-4 shrink-0', className)} />
{feature.limit &&
`${convertLargeNumberToWords(feature.limit, null)} ${feature.unit && feature.unit}${
timeDenominator ? `/${timeDenominator}` : ''
Expand All @@ -40,7 +42,7 @@ export function PlanIcon({
</>
) : (
<>
<IconCheckmark className={`text-success mx-4 shrink-0 ${className}`} />
<IconCheckmark className={clsx('text-success mx-4 shrink-0', className)} />
{feature.note}
</>
)}
Expand All @@ -64,7 +66,10 @@ const getProductTiers = (
tiers?.map((tier, i) => (
<div
key={`${plan.plan_key}-${product.type}-${tier.up_to}`}
className={`flex ${width && width < 100 ? 'flex-col mb-2' : ' justify-between items-center'}`}
className={clsx(
'flex',
width && width < 100 ? 'flex-col mb-2' : 'justify-between items-center'
)}
ref={tiersRef}
>
<span className="text-xs">
Expand All @@ -80,7 +85,7 @@ const getProductTiers = (
) : product?.free_allocation ? (
<div
key={`${plan.plan_key}-${product.type}-tiers`}
className={`flex ${width && width < 100 ? 'flex-col mb-2' : ' justify-between items-center'}`}
className={clsx('flex', width && width < 100 ? 'flex-col mb-2' : ' justify-between items-center')}
ref={tiersRef}
>
<span className="text-xs">
Expand Down Expand Up @@ -108,13 +113,15 @@ export const PlanComparison = ({
const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
const { redirectPath, billing } = useValues(billingLogic)
const { width, ref: planComparisonRef } = useResizeObserver()
const is3000 = useFeatureFlag('POSTHOG_3000', 'test')

const upgradeButtons = plans?.map((plan) => {
return (
<td key={`${plan.plan_key}-cta`} className="PlanTable__td__upgradeButton">
<LemonButton
to={getUpgradeProductLink(product, plan.plan_key || '', redirectPath, includeAddons)}
type={plan.current_plan ? 'secondary' : 'primary'}
status={is3000 ? 'primary-alt' : 'primary'}
fullWidth
center
disableClientSideRouting
Expand Down Expand Up @@ -180,7 +187,7 @@ export const PlanComparison = ({
<span className="font-bold">{product.name}</span>
</p>
)}
<p className="ml-0 text-xs text-muted mt-1">Priced per {product.unit}</p>
<p className={clsx('ml-0 text-xs mt-1', !is3000 && 'text-muted')}>Priced per {product.unit}</p>
</th>
{plans?.map((plan) => (
<td key={`${plan.plan_key}-tiers-td`}>{getProductTiers(plan, product)}</td>
Expand Down Expand Up @@ -241,9 +248,12 @@ export const PlanComparison = ({
}
>
<th
className={`text-muted PlanTable__th__feature ${
width && width < 600 && 'PlanTable__th__feature--reduced_padding'
} ${i == fullyFeaturedPlan?.features?.length - 1 ? 'PlanTable__th__last-feature' : ''}`}
className={clsx(
'PlanTable__th__feature',
width && width < 600 && 'PlanTable__th__feature--reduced_padding',
i == fullyFeaturedPlan?.features?.length - 1 && 'PlanTable__th__last-feature',
!is3000 && 'text-muted'
)}
>
<Tooltip title={feature.description}>{feature.name}</Tooltip>
</th>
Expand Down Expand Up @@ -293,21 +303,21 @@ export const PlanComparison = ({
?.features?.map((feature, i) => (
<tr key={`tr-${feature.key}`}>
<th
className={`text-muted PlanTable__th__feature ${
className={clsx(
'text-muted PlanTable__th__feature',
width &&
width < 600 &&
'PlanTable__th__feature--reduced_padding'
} ${
width < 600 &&
'PlanTable__th__feature--reduced_padding',
// If this is the last feature in the list, add a class to add padding to the bottom of
// the cell (which makes the whole row have the padding)
i ==
(includedProduct.plans.find(
(plan) => plan.included_if == 'has_subscription'
)?.features?.length || 0) -
1
(includedProduct.plans.find(
(plan) => plan.included_if == 'has_subscription'
)?.features?.length || 0) -
1
? 'PlanTable__th__last-feature'
: ''
}`}
)}
>
<Tooltip title={feature.description}>{feature.name}</Tooltip>
</th>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export function ExperimentImplementationDetails({ experiment }: ExperimentImplem
<b>Implement your experiment in code</b>
<selectedOption.Snippet variant={currentVariant} flagKey={experiment?.feature_flag?.key ?? ''} />

<Link to={selectedOption.documentationLink} target="_blank">
<Link subtle to={selectedOption.documentationLink} target="_blank">
See the docs for more implementation information.
</Link>
</div>
Expand Down

0 comments on commit 6ce4298

Please sign in to comment.