diff --git a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx index f1ba0bdf475dd..c86227c64cbac 100644 --- a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx +++ b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx @@ -16,6 +16,7 @@ type PayGateSupportedFeatures = | AvailableFeature.ROLE_BASED_ACCESS | AvailableFeature.CORRELATION_ANALYSIS | AvailableFeature.PATHS_ADVANCED + | AvailableFeature.SURVEYS_STYLING export interface PayGateMiniProps { feature: PayGateSupportedFeatures @@ -69,6 +70,11 @@ const FEATURE_SUMMARIES: Record< umbrella: 'advanced analysis capabilities', docsHref: 'https://posthog.com/manual/paths', }, + [AvailableFeature.SURVEYS_STYLING]: { + description: 'Customize the look and feel of your surveys with custom colors and positions.', + umbrella: 'surveys customization', + docsHref: 'https://posthog.com/docs/surveys', + }, } /** A sort of paywall for premium features. diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx index fd25cde2002a9..c36c0681db90c 100644 --- a/frontend/src/lib/constants.tsx +++ b/frontend/src/lib/constants.tsx @@ -194,6 +194,8 @@ export const FEATURE_MINIMUM_PLAN: Partial [AvailableFeature.ROLE_BASED_ACCESS]: LicensePlan.Enterprise, [AvailableFeature.RECORDINGS_FILE_EXPORT]: LicensePlan.Scale, [AvailableFeature.RECORDINGS_PERFORMANCE]: LicensePlan.Scale, + [AvailableFeature.SURVEYS_STYLING]: LicensePlan.Scale, + [AvailableFeature.SURVEYS_MULTIPLE_QUESTIONS]: LicensePlan.Scale, } export const ENTITY_MATCH_TYPE = 'entities' diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx index 9b8b0b41f8a08..3aa821bf1d9c1 100644 --- a/frontend/src/scenes/surveys/SurveyEdit.tsx +++ b/frontend/src/scenes/surveys/SurveyEdit.tsx @@ -21,9 +21,10 @@ import { LinkSurveyQuestion, RatingSurveyQuestion, SurveyUrlMatchType, + AvailableFeature, } from '~/types' import { FlagSelector } from 'scenes/early-access-features/EarlyAccessFeature' -import { IconCancel, IconDelete, IconPlus, IconPlusMini } from 'lib/lemon-ui/icons' +import { IconCancel, IconDelete, IconLock, IconPlus, IconPlusMini } from 'lib/lemon-ui/icons' import { BaseAppearance, Customization, @@ -45,6 +46,8 @@ import { CodeEditor } from 'lib/components/CodeEditors' import { FEATURE_FLAGS } from 'lib/constants' import { featureFlagLogic as enabledFeaturesLogic } from 'lib/logic/featureFlagLogic' import { SurveyFormAppearance } from './SurveyFormAppearance' +import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini' +import { userLogic } from 'scenes/userLogic' function PresentationTypeCard({ title, @@ -99,6 +102,7 @@ export default function SurveyEdit(): JSX.Element { setSelectedSection, } = useActions(surveyLogic) const { featureFlags } = useValues(enabledFeaturesLogic) + const { hasAvailableFeature } = useValues(userLogic) return (
@@ -589,6 +593,12 @@ export default function SurveyEdit(): JSX.Element { type="secondary" className="w-max mt-2" icon={} + sideIcon={} + disabledReason={ + hasAvailableFeature(AvailableFeature.SURVEYS_MULTIPLE_QUESTIONS) + ? null + : 'Subscribe for multiple question surveys' + } onClick={() => { setSurveyValue('questions', [ ...survey.questions, @@ -692,17 +702,19 @@ export default function SurveyEdit(): JSX.Element { key: SurveyEditSection.Customization, header: 'Customization', content: ( - - {({ value, onChange }) => ( - { - onChange(appearance) - }} - /> - )} - + + + {({ value, onChange }) => ( + { + onChange(appearance) + }} + /> + )} + + ), }, ] diff --git a/frontend/src/types.ts b/frontend/src/types.ts index a1652c4a75eb5..6c377dc66769c 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -79,6 +79,9 @@ export enum AvailableFeature { BESPOKE_PRICING = 'bespoke_pricing', INVOICE_PAYMENTS = 'invoice_payments', SUPPORT_SLAS = 'support_slas', + SURVEYS_STYLING = 'surveys_styling', + SURVEYS_TEXT_HTML = 'surveys_text_html', + SURVEYS_MULTIPLE_QUESTIONS = 'surveys_multiple_questions', } export type AvailableProductFeature = { diff --git a/posthog/constants.py b/posthog/constants.py index e7ef03baf7014..3beb8ca12b3b9 100644 --- a/posthog/constants.py +++ b/posthog/constants.py @@ -33,6 +33,9 @@ class AvailableFeature(str, Enum): ROLE_BASED_ACCESS = "role_based_access" RECORDINGS_FILE_EXPORT = "recordings_file_export" RECORDINGS_PERFORMANCE = "recordings_performance" + SURVEYS_STYLING = "surveys_styling" + SURVEYS_TEXT_HTML = "surveys_text_html" + SURVEYS_MULTIPLE_QUESTIONS = "surveys_multiple_questions" TREND_FILTER_TYPE_ACTIONS = "actions"