Skip to content

Commit

Permalink
Revert "feat: let people subscribe from the paygate itself" (#20843)
Browse files Browse the repository at this point in the history 
Revert "feat: let people subscribe from the paygate itself (#20773)"

This reverts commit 5c06e8e.
  • Loading branch information
@raquelmsmith
raquelmsmith authored Mar 12, 2024
1 parent 5c06e8e commit 02c2de6
Show file tree
Hide file tree
Showing 8 changed files with 20 additions and 183 deletions.
Binary file modified ...d/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.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.
86 changes: 4 additions & 82 deletions frontend/src/lib/components/PayGateMini/PayGateMini.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { IconInfo } from '@posthog/icons'
import { LemonButton, Link, Tooltip } from '@posthog/lemon-ui'
import { Link, Tooltip } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { lowercaseFirstLetter } from 'lib/utils'
import { billingLogic } from 'scenes/billing/billingLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
Expand All @@ -13,8 +12,6 @@ import { userLogic } from 'scenes/userLogic'

import { AvailableFeature } from '~/types'

import { PayGateMiniButton } from './PayGateMiniButton'

export interface PayGateMiniProps {
feature: AvailableFeature
currentUsage?: number
Expand All @@ -41,8 +38,7 @@ export function PayGateMini({
}: PayGateMiniProps): JSX.Element | null {
const { preflight, isCloudOrDev } = useValues(preflightLogic)
const { hasAvailableFeature, availableFeature } = useValues(userLogic)
const { billing, billingLoading } = useValues(billingLogic)
const { featureFlags } = useValues(featureFlagLogic)
const { billing } = useValues(billingLogic)
const { hideUpgradeModal } = useActions(sceneLogic)

const product = billing?.products.find((product) => product.features?.some((f) => f.key === feature))
Expand All @@ -63,85 +59,11 @@ export function PayGateMini({
}
}

if (billingLoading) {
return null
}

if (gateVariant && preflight?.instance_preferences?.disable_paid_fs) {
return null // Don't show anything if paid features are explicitly disabled
}

return featureFlags[FEATURE_FLAGS.SUBSCRIBE_FROM_PAYGATE] === 'test' ? (
gateVariant && product && featureInfo ? (
<div
className={clsx(
className,
background && 'bg-side border border-border',
'PayGateMini rounded flex flex-col items-center p-4 text-center'
)}
>
<div className="flex text-4xl text-warning">{getProductIcon(product.name, featureInfo.icon_key)}</div>
<h3>{featureInfo.name}</h3>
{featureDetailsWithLimit?.limit && gateVariant !== 'move-to-cloud' ? (
<div>
<p>
You've reached your usage limit for{' '}
<Tooltip title={featureInfo.description}>
<span>
<b>{featureInfo.name}</b>
<IconInfo className="ml-0.5 text-muted" />
</span>
</Tooltip>
.
</p>
<p className="border border-border bg-side rounded p-4">
<b>Your current plan limit:</b>{' '}
<span>
{featureDetailsWithLimit.limit} {featureDetailsWithLimit.unit}
</span>
</p>
<p>
Please upgrade your <b>{product.name}</b> plan to create more {featureInfo.name}
</p>
</div>
) : (
<>
<p>{featureInfo.description}</p>
<p>
{gateVariant === 'move-to-cloud' ? (
<>This feature is only available on PostHog Cloud.</>
) : (
<>
Upgrade your <b>{product?.name}</b> plan to use this feature.
</>
)}
</p>
</>
)}
{isGrandfathered && (
<div className="flex gap-x-2 bg-side p-4 rounded text-left mb-4">
<IconInfo className="text-muted text-2xl" />
<p className="text-muted mb-0">
Your plan does not include this feature, but previously set settings may remain. Please
upgrade your plan to regain access.
</p>
</div>
)}
{featureInfo.docsUrl && (
<div className="mb-4">
<>
<Link to={featureInfo.docsUrl} target="_blank">
Learn more in PostHog Docs.
</Link>
</>
</div>
)}
<PayGateMiniButton product={product} featureInfo={featureInfo} gateVariant={gateVariant} />
</div>
) : (
<div className={className}>{children}</div>
)
) : gateVariant && product && featureInfo ? (
return gateVariant && product && featureInfo ? (
<div
className={clsx(
className,
Expand Down
56 changes: 0 additions & 56 deletions frontend/src/lib/components/PayGateMini/PayGateMiniButton.tsx
View file

This file was deleted.

3 changes: 0 additions & 3 deletions frontend/src/lib/constants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,6 @@ export const FEATURE_FLAGS = {
SESSION_REPLAY_LINKED_VARIANTS: 'session-replay-linked-variants', // owner: #team-replay
REPLAY_ERROR_CLUSTERING: 'session-replay-error-clustering', // owner: #team-replay
AUDIT_LOGS_ACCESS: 'audit-logs-access', // owner: #team-growth
SUBSCRIBE_FROM_PAYGATE: 'subscribe-from-paygate', // owner: #team-growth
} as const
export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]

Expand Down Expand Up @@ -288,5 +287,3 @@ export const SESSION_REPLAY_MINIMUM_DURATION_OPTIONS: LemonSelectOptions<number
value: 15000,
},
]

export const UNSUBSCRIBE_SURVEY_ID = '018b6e13-590c-0000-decb-c727a2b3f462'
4 changes: 2 additions & 2 deletions frontend/src/scenes/apps/frontendAppsLogic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { urls } from 'scenes/urls'

import { FrontendApp, FrontendAppConfig } from '~/types'

// import { frontendAppRequire } from './frontendAppRequire'
import { frontendAppRequire } from './frontendAppRequire'
import type { frontendAppsLogicType } from './frontendAppsLogicType'

/** Manages the loading and lifecycle of frontend apps. */
Expand Down Expand Up @@ -56,7 +56,7 @@ export const frontendAppsLogic = kea<frontendAppsLogicType>([
`${siteUrl}/api/plugin_config/${id}/frontend${reload ? '?_=' + new Date().valueOf() : ''}`
)
if ('getFrontendApp' in exports) {
const app = exports.getFrontendApp()
const app = exports.getFrontendApp(frontendAppRequire)
if ('scene' in app) {
if (app.scene.onInit) {
window.setTimeout(() => app.scene.onInit(values.appConfigs[id]), 0)
Expand Down
11 changes: 6 additions & 5 deletions frontend/src/scenes/billing/BillingProduct.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { IconCheckCircle, IconChevronDown, IconDocument, IconInfo, IconPlus } fr
import { LemonButton, LemonSelectOptions, LemonTable, LemonTag, Link } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
import { IconChevronRight } from 'lib/lemon-ui/icons'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
Expand All @@ -26,6 +25,8 @@ import { PlanComparisonModal } from './PlanComparison'
import { ProductPricingModal } from './ProductPricingModal'
import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'

export const UNSUBSCRIBE_SURVEY_ID = '018b6e13-590c-0000-decb-c727a2b3f462'

export const getTierDescription = (
tiers: BillingV2TierType[],
i: number,
Expand Down Expand Up @@ -639,7 +640,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
)}
<div className="flex gap-x-2 items-center mb-2">
<IconCheckCircle className="text-success" />
<Link onClick={() => toggleIsPlanComparisonModalOpen()}>
<Link onClick={toggleIsPlanComparisonModalOpen}>
<b>And more...</b>
</Link>
</div>
Expand All @@ -658,7 +659,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
{product.unit}s free
</b>
, then just ${upgradePlan?.tiers?.[1]?.unit_amount_usd} per {product.unit} and{' '}
<Link onClick={() => toggleIsPlanComparisonModalOpen()}>volume discounts</Link>.
<Link onClick={toggleIsPlanComparisonModalOpen}>volume discounts</Link>.
</p>
)}
</div>
Expand All @@ -667,7 +668,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
<div className="flex flex-wrap gap-x-2 gap-y-2">
<LemonButton
type="secondary"
onClick={() => toggleIsPlanComparisonModalOpen()}
onClick={toggleIsPlanComparisonModalOpen}
className="grow"
center
>
Expand Down Expand Up @@ -709,7 +710,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
product={product}
includeAddons={isOnboarding}
modalOpen={isPlanComparisonModalOpen}
onClose={() => toggleIsPlanComparisonModalOpen()}
onClose={toggleIsPlanComparisonModalOpen}
/>
</div>
)}
Expand Down
35 changes: 7 additions & 28 deletions frontend/src/scenes/billing/PlanComparison.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,17 @@ import { IconCheckCircle, IconWarning, IconX } from '@posthog/icons'
import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import React from 'react'
import { getProductIcon } from 'scenes/products/Products'
import { urls } from 'scenes/urls'
import useResizeObserver from 'use-resize-observer'

import { BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType, BillingV2PlanType } from '~/types'

import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils'
import { billingLogic } from './billingLogic'
import { UNSUBSCRIBE_SURVEY_ID } from './BillingProduct'
import { billingProductLogic } from './billingProductLogic'
import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'

Expand Down Expand Up @@ -119,7 +118,7 @@ export const PlanComparison = ({
const { width, ref: planComparisonRef } = useResizeObserver()
const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
const currentPlanIndex = plans.findIndex((plan) => plan.current_plan)
const { surveyID, comparisonModalHighlightedFeatureKey } = useValues(billingProductLogic({ product }))
const { surveyID } = useValues(billingProductLogic({ product }))
const { reportSurveyShown, setSurveyResponse } = useActions(billingProductLogic({ product }))

const upgradeButtons = plans?.map((plan, i) => {
Expand All @@ -131,26 +130,18 @@ export const PlanComparison = ({
? 'mailto:[email protected]?subject=Enterprise%20plan%20request'
: !plan.included_if
? getUpgradeProductLink(product, plan.plan_key || '', redirectPath, includeAddons)
: plan.included_if == 'has_subscription' &&
i >= currentPlanIndex &&
!billing?.has_active_subscription
? urls.organizationBilling()
: undefined
}
type={plan.current_plan || i < currentPlanIndex ? 'secondary' : 'primary'}
status={
plan.current_plan || (plan.included_if == 'has_subscription' && i >= currentPlanIndex)
? 'default'
: 'alt'
}
status={plan.current_plan ? 'default' : 'alt'}
fullWidth
center
disableClientSideRouting={!plan.contact_support}
disabledReason={
plan.included_if == 'has_subscription' && i >= currentPlanIndex
? billing?.has_active_subscription
? 'Unsubscribe from all products to remove'
: null
: 'Subscribe to any product for access'
: plan.current_plan
? 'Current plan'
: undefined
Expand All @@ -172,10 +163,6 @@ export const PlanComparison = ({
? 'Downgrade'
: plan.contact_support
? 'Get in touch'
: plan.included_if == 'has_subscription' &&
i >= currentPlanIndex &&
!billing?.has_active_subscription
? 'View products'
: 'Subscribe'}
</LemonButton>
{!plan.current_plan && !plan.free_allocation && includeAddons && product.addons?.length > 0 && (
Expand Down Expand Up @@ -277,11 +264,11 @@ export const PlanComparison = ({
{fullyFeaturedPlan?.features?.map((feature, i) => (
<tr
key={`tr-${feature.key}`}
className={clsx(
className={
i == fullyFeaturedPlan?.features?.length - 1 && !billing?.has_active_subscription
? 'PlanTable__tr__border'
: ''
)}
}
>
<th
className={clsx(
Expand All @@ -291,15 +278,7 @@ export const PlanComparison = ({
)}
>
<Tooltip title={feature.description}>
<div
className={
comparisonModalHighlightedFeatureKey === feature.key
? 'border-b-2 border-danger-lighter px-1 pb-1 w-max'
: undefined
}
>
<span>{feature.name}</span>
</div>
<span>{feature.name}</span>
</Tooltip>
</th>
{plans?.map((plan) => (
Expand Down
8 changes: 1 addition & 7 deletions frontend/src/scenes/billing/billingProductLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const billingProductLogic = kea<billingProductLogicType>([
billingLoaded: true,
setShowTierBreakdown: (showTierBreakdown: boolean) => ({ showTierBreakdown }),
toggleIsPricingModalOpen: true,
toggleIsPlanComparisonModalOpen: (highlightedFeatureKey?: string) => ({ highlightedFeatureKey }),
toggleIsPlanComparisonModalOpen: true,
setSurveyResponse: (surveyResponse: string, key: string) => ({ surveyResponse, key }),
reportSurveyShown: (surveyID: string, productType: string) => ({ surveyID, productType }),
reportSurveySent: (surveyID: string, surveyResponse: Record<string, string>) => ({
Expand Down Expand Up @@ -101,12 +101,6 @@ export const billingProductLogic = kea<billingProductLogicType>([
setSurveyID: (_, { surveyID }) => surveyID,
},
],
comparisonModalHighlightedFeatureKey: [
null as string | null,
{
toggleIsPlanComparisonModalOpen: (_, { highlightedFeatureKey }) => highlightedFeatureKey || null,
},
],
}),
selectors(({ values }) => ({
customLimitUsd: [
Expand Down

0 comments on commit 02c2de6

Please sign in to comment.