feat: [1/n] Teams Downgrade Flow Experiment

frontend/src/lib/constants.tsx

@@ -239,6 +239,7 @@ export const FEATURE_FLAGS = {
     REPLAY_LANDING_PAGE: 'replay-landing-page', // owner :#team-replay
     CORE_WEB_VITALS: 'core-web-vitals', // owner: @rafaeelaudibert #team-web-analytics
     LLM_OBSERVABILITY: 'llm-observability', // owner: #team-ai-product-manager
+    TEAMS_DOWNGRADE_FLOW: 'teams-downgrade-flow', // owner: @sjhavar #team-growth
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/scenes/billing/BillingProductAddonActions.tsx

@@ -14,6 +14,8 @@ import { getProration } from './billing-utils'
 import { billingLogic } from './billingLogic'
 import { formatFlatRate } from './BillingProductAddon'
 import { billingProductLogic } from './billingProductLogic'
+import { downgradeLogic } from './downgradeLogic'
+import { DowngradeModal } from './DowngradeModal'
 
 interface BillingProductAddonActionsProps {
     productRef: React.RefObject<HTMLDivElement>
@@ -36,6 +38,8 @@ export const BillingProductAddonActions = ({ addon, productRef }: BillingProduct
         cancelTrial,
     } = useActions(billingProductLogic({ product: addon }))
     const { featureFlags } = useValues(featureFlagLogic)
+    const { showDowngradeModal } = useActions(downgradeLogic)
+    const { isUserInExperiment } = useValues(downgradeLogic)
 
     const upgradePlan = currentAndUpgradePlans?.upgradePlan
     const { prorationAmount, isProrated } = useMemo(
@@ -69,19 +73,28 @@ export const BillingProductAddonActions = ({ addon, productRef }: BillingProduct
             return null
         }
         return (
-            <More
-                overlay={
-                    <LemonButton
-                        fullWidth
-                        onClick={() => {
-                            setSurveyResponse('$survey_response_1', addon.type)
-                            reportSurveyShown(UNSUBSCRIBE_SURVEY_ID, addon.type)
-                        }}
-                    >
-                        Remove add-on
-                    </LemonButton>
-                }
-            />
+            <>
+                <More
+                    overlay={
+                        <LemonButton
+                            fullWidth
+                            onClick={() => {
+                                if (isUserInExperiment) {
+                                    showDowngradeModal({
+                                        addon,
+                                    })
+                                } else {
+                                    setSurveyResponse('$survey_response_1', addon.type)
+                                    reportSurveyShown(UNSUBSCRIBE_SURVEY_ID, addon.type)
+                                }
+                            }}
+                        >
+                            Remove add-on
+                        </LemonButton>
+                    }
+                />
+                <DowngradeModal />
+            </>
         )
     }
 

frontend/src/scenes/billing/DowngradeModal.tsx

@@ -0,0 +1,34 @@
+import { LemonButton, LemonModal } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+
+import { downgradeLogic } from './downgradeLogic'
+
+export function DowngradeModal(): JSX.Element | null {
+    const { isDowngradeModalOpen, currentAddon } = useValues(downgradeLogic)
+    const { hideDowngradeModal, handleDowngrade } = useActions(downgradeLogic)
+
+    if (!currentAddon) {
+        return null
+    }
+
+    return (
+        <LemonModal
+            isOpen={isDowngradeModalOpen}
+            onClose={hideDowngradeModal}
+            title={`Unsubscribe from ${currentAddon.name}`}
+            description="Your team is actively using these features and will lose access to it immediately"
+            footer={
+                <>
+                    <LemonButton type="secondary" onClick={hideDowngradeModal}>
+                        Cancel
+                    </LemonButton>
+                    <LemonButton type="primary" status="danger" onClick={handleDowngrade}>
+                        Unsubscribe
+                    </LemonButton>
+                </>
+            }
+        >
+            <div className="mt-2 mb-6">TODO: Add features that are used here</div>
+        </LemonModal>
+    )
+}

frontend/src/scenes/billing/downgradeLogic.ts

@@ -0,0 +1,63 @@
+import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import { FEATURE_FLAGS, UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+
+import { BillingProductV2AddonType } from '~/types'
+
+import { billingProductLogic } from './billingProductLogic'
+import type { downgradeLogicType } from './downgradeLogicType'
+
+export interface ShowDowngradeModalPayload {
+    addon: BillingProductV2AddonType
+}
+
+export const downgradeLogic = kea<downgradeLogicType>([
+    path(['scenes', 'billing', 'downgradeLogic']),
+
+    connect({
+        values: [featureFlagLogic, ['featureFlags']],
+    }),
+
+    actions({
+        showDowngradeModal: (payload: ShowDowngradeModalPayload) => ({ payload }),
+        hideDowngradeModal: true,
+        handleDowngrade: true,
+    }),
+
+    reducers({
+        isDowngradeModalOpen: [
+            false,
+            {
+                showDowngradeModal: () => true,
+                hideDowngradeModal: () => false,
+            },
+        ],
+        currentAddon: [
+            null as BillingProductV2AddonType | null,
+            {
+                showDowngradeModal: (_, { payload }) => payload.addon,
+                hideDowngradeModal: () => null,
+            },
+        ],
+    }),
+
+    selectors({
+        isUserInExperiment: [
+            (s) => [s.featureFlags],
+            (featureFlags): boolean => {
+                return featureFlags[FEATURE_FLAGS.TEAMS_DOWNGRADE_FLOW] === 'test'
+            },
+        ],
+    }),
+
+    listeners(({ actions, values }) => ({
+        handleDowngrade: async () => {
+            if (values.currentAddon) {
+                const logic = billingProductLogic({ product: values.currentAddon })
+                logic.actions.setSurveyResponse('$survey_response_1', values.currentAddon.type)
+                logic.actions.reportSurveyShown(UNSUBSCRIBE_SURVEY_ID, values.currentAddon.type)
+            }
+            actions.hideDowngradeModal()
+        },
+    })),
+])