feat(product tours): add tour wait period config (#48224)

## Problem

closes #48209 (comment)

<!-- Who are we building for, what are their needs, why is this important? -->

<!-- Does this fix an issue? Uncomment the line below with the issue ID to automatically close it when merged -->

<!-- Closes #ISSUE_ID -->

SDK PR: PostHog/posthog-js#3109

## Changes

- adds new wait period config in product tour UI
- updates API to handle wait period by adding person property checks to targeting flags

<!-- If there are frontend changes, please include screenshots. -->

<!-- If a reference design was involved, include a link to the relevant Figma frame! -->

## How did you test this code?

<!-- Briefly describe the steps you took. -->

<!-- Include automated tests if possible, otherwise describe the manual testing routine. -->

<!-- Docs reminder: If this change requires updated docs, please do that! Engineers are the primary people responsible for their documentation. 🙌 -->

👉 _Stay up-to-date with_ [_PostHog coding conventions_](https://posthog.com/docs/contribute/coding-conventions) _for a smoother review._

## Publish to changelog?

<!-- For features only -->

<!-- If publishing, you must provide changelog details in the #changelog Slack channel. You will receive a follow-up PR comment or notification. -->

<!-- If not, write "no" or "do not publish to changelog" to explicitly opt-out of posting to #changelog. Removing this entire section will not prevent posting. -->

Author: adboio

frontend/src/scenes/product-tours/components/AutoShowSection.tsx

@@ -16,6 +16,7 @@ import {
 import { EventSelect } from 'lib/components/EventSelect/EventSelect'
 import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { toSentenceCase } from 'lib/utils'
 import { AddEventButton } from 'scenes/surveys/AddEventButton'
 import { SurveyMatchTypeLabels } from 'scenes/surveys/constants'
 import {
@@ -28,6 +29,7 @@ import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
 import {
     ActionType,
     AnyPropertyFilter,
+    EffectiveProductTourType,
     ProductTourDisplayConditions,
     ProductTourDisplayFrequency,
     PropertyDefinitionType,
@@ -41,6 +43,13 @@ import { getDefaultDisplayFrequency, getDisplayFrequencyOptions, isAnnouncement
 
 type TourTriggerType = 'immediate' | 'event' | 'action'
 
+const ALL_TOUR_TYPES: EffectiveProductTourType[] = ['tour', 'announcement', 'banner']
+
+const TOUR_TYPE_OPTIONS = ALL_TOUR_TYPES.map((type) => ({
+    key: type,
+    label: toSentenceCase(type),
+}))
+
 /**
  * this should probably be re-used from surveys!!
  *
@@ -399,6 +408,66 @@ export function AutoShowSection({ id }: { id: string }): JSX.Element | null {
                     />
                     <span className="text-sm">seconds before showing the {entityKeyword}</span>
                 </div>
+
+                <div className="mt-4">
+                    <div className="flex flex-row gap-2 items-center">
+                        <LemonCheckbox
+                            checked={!!conditions.seenTourWaitPeriod}
+                            onChange={(checked) => {
+                                onChange({
+                                    ...conditions,
+                                    seenTourWaitPeriod: checked ? { days: 7, types: [...ALL_TOUR_TYPES] } : undefined,
+                                })
+                            }}
+                        />
+                        <span className="text-sm">Don't show to users who recently saw another...</span>
+                    </div>
+                    {conditions.seenTourWaitPeriod && (
+                        <div className="ml-7 mt-2 flex flex-row gap-2 items-center">
+                            <div className="w-80 max-w-80">
+                                <LemonInputSelect
+                                    mode="multiple"
+                                    value={conditions.seenTourWaitPeriod.types || []}
+                                    onChange={(values) => {
+                                        onChange({
+                                            ...conditions,
+                                            seenTourWaitPeriod: {
+                                                ...conditions.seenTourWaitPeriod!,
+                                                types: values as EffectiveProductTourType[],
+                                            },
+                                        })
+                                    }}
+                                    options={TOUR_TYPE_OPTIONS}
+                                    placeholder="Select types..."
+                                    disablePrompting
+                                    size="small"
+                                />
+                            </div>
+                            <span className="text-sm whitespace-nowrap">in the last</span>
+                            <LemonInput
+                                type="number"
+                                size="small"
+                                min={1}
+                                max={365}
+                                value={conditions.seenTourWaitPeriod.days ?? NaN}
+                                onChange={(newValue) => {
+                                    if (!conditions.seenTourWaitPeriod) {
+                                        return
+                                    }
+                                    onChange({
+                                        ...conditions,
+                                        seenTourWaitPeriod: {
+                                            ...conditions.seenTourWaitPeriod,
+                                            days: newValue as number,
+                                        },
+                                    })
+                                }}
+                                className="w-12"
+                            />
+                            <span className="text-sm">days</span>
+                        </div>
+                    )}
+                </div>
             </div>
 
             <div>

frontend/src/scenes/product-tours/components/NewProductTourModal.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { IconCursorClick, IconMegaphone } from '@posthog/icons'
 import { LemonButton, LemonInput, LemonLabel, LemonModal } from '@posthog/lemon-ui'
 
-type TourType = 'tour' | 'announcement' | 'banner' | undefined
+import { EffectiveProductTourType } from '~/types'
 
 export interface NewProductTourModalProps {
     isOpen: boolean
@@ -23,7 +23,7 @@ export function NewProductTourModal({
     onCreateTour,
     existingTourNames,
 }: NewProductTourModalProps): JSX.Element {
-    const [tourType, setTourType] = useState<TourType>()
+    const [tourType, setTourType] = useState<EffectiveProductTourType>()
     const [tourName, setTourName] = useState<string | undefined>()
     const [tourNameError, setTourNameError] = useState<string | undefined>()
 

frontend/src/scenes/product-tours/productTourLogic.ts

@@ -388,6 +388,15 @@ export const productTourLogic = kea<productTourLogicType>([
                     }
                 }
 
+                const waitPeriod = content.conditions?.seenTourWaitPeriod
+                if (waitPeriod) {
+                    if (!waitPeriod.types || waitPeriod.types.length === 0) {
+                        errors._form = 'Wait period requires at least one type selected'
+                    } else if (!waitPeriod.days || waitPeriod.days < 1) {
+                        errors._form = 'Wait period requires a number of days'
+                    }
+                }
+
                 return errors
             },
             submit: async (formValues: ProductTourForm) => {

frontend/src/types.ts

@@ -3474,6 +3474,13 @@ export interface StepOrderVersion {
     created_at: string
 }
 
+export type EffectiveProductTourType = 'tour' | 'announcement' | 'banner'
+
+export interface ProductTourWaitPeriod {
+    days: number
+    types: EffectiveProductTourType[]
+}
+
 export interface ProductTourDisplayConditions {
     url?: string
     urlMatchType?: SurveyMatchType
@@ -3492,6 +3499,7 @@ export interface ProductTourDisplayConditions {
         values: SurveyEventsWithProperties[]
     } | null
     linkedFlagVariant?: string
+    seenTourWaitPeriod?: ProductTourWaitPeriod
 }
 
 export interface ProductTourAppearance {