pay gates wip

PostHog · Oct 19, 2023 · 62ae697 · 62ae697
1 parent 3fe9dc2
commit 62ae697
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 12 deletions.
diff --git 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
@@ -194,6 +194,8 @@ export const FEATURE_MINIMUM_PLAN: Partial<Record<AvailableFeature, LicensePlan>
     [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
@@ -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 (
         <div className="flex flex-row gap-4">
@@ -589,6 +593,12 @@ export default function SurveyEdit(): JSX.Element {
                                                 type="secondary"
                                                 className="w-max mt-2"
                                                 icon={<IconPlus />}
+                                                sideIcon={<IconLock className="ml-1 text-base text-muted" />}
+                                                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: (
-                                          <Field name="appearance" label="">
-                                              {({ value, onChange }) => (
-                                                  <Customization
-                                                      appearance={value || defaultSurveyAppearance}
-                                                      surveyQuestionItem={survey.questions[0]}
-                                                      onAppearanceChange={(appearance) => {
-                                                          onChange(appearance)
-                                                      }}
-                                                  />
-                                              )}
-                                          </Field>
+                                          <PayGateMini feature={AvailableFeature.SURVEYS_STYLING}>
+                                              <Field name="appearance" label="">
+                                                  {({ value, onChange }) => (
+                                                      <Customization
+                                                          appearance={value || defaultSurveyAppearance}
+                                                          surveyQuestionItem={survey.questions[0]}
+                                                          onAppearanceChange={(appearance) => {
+                                                              onChange(appearance)
+                                                          }}
+                                                      />
+                                                  )}
+                                              </Field>
+                                          </PayGateMini>
                                       ),
                                   },
                               ]

diff --git 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
@@ -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"