add text and disabled reason

PostHog · Dec 22, 2023 · 7fdd0d9 · 7fdd0d9
1 parent 1d94246
commit 7fdd0d9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 41 deletions.
diff --git a/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx b/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
@@ -1,6 +1,6 @@
 import { LemonBanner, LemonButton, LemonModal, LemonTextArea, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { ExportsUnsubscribeTable } from 'scenes/pipeline/ExportsUnsubscribeTable'
+import { ExportsUnsubscribeTable, exportsUnsubscribeTableLogic } from 'scenes/pipeline/ExportsUnsubscribeTable'
 
 import { BillingProductV2AddonType, BillingProductV2Type } from '~/types'
 
@@ -15,8 +15,15 @@ export const UnsubscribeSurveyModal = ({
     const { surveyID, surveyResponse } = useValues(billingProductLogic({ product }))
     const { setSurveyResponse, reportSurveySent, reportSurveyDismissed } = useActions(billingProductLogic({ product }))
     const { deactivateProduct } = useActions(billingLogic)
+    const { unsubscribeDisabledReason, itemsToDisable } = useValues(exportsUnsubscribeTableLogic)
 
     const textAreaNotEmpty = surveyResponse['$survey_response']?.length > 0
+    const includesExportsAddon =
+        product.type == 'group_analytics' ||
+        (product.type == 'product_analytics' &&
+            (product as BillingProductV2Type)?.addons?.filter((addon) => addon.type === 'group_analytics')[0]
+                ?.subscribed)
+
     return (
         <LemonModal
             onClose={() => {
@@ -25,7 +32,20 @@ export const UnsubscribeSurveyModal = ({
             width={'max(40vw)'}
         >
             <div>
-                {product.type === 'group_analytics' ? <ExportsUnsubscribeTable /> : <></>}
+                {includesExportsAddon && itemsToDisable.length > 0 ? (
+                    <div className="mb-6">
+                        <div className="mb-4">
+                            <h3 className="mt-2 mb-2">{`Important: Disable remaining export apps`}</h3>
+                            <p>
+                                To avoid unexpected impact on your data, you must explicitly disable the following apps
+                                and exports before unsubscribing:
+                            </p>
+                        </div>
+                        <ExportsUnsubscribeTable />
+                    </div>
+                ) : (
+                    <></>
+                )}
                 <h3 className="mt-2 mb-4">{`Why are you unsubscribing from ${product.name}?`}</h3>
                 <div className="flex flex-col gap-3.5">
                     <LemonTextArea
@@ -89,6 +109,7 @@ export const UnsubscribeSurveyModal = ({
                         <LemonButton
                             type={textAreaNotEmpty ? 'primary' : 'tertiary'}
                             status={textAreaNotEmpty ? 'primary' : 'muted'}
+                            disabledReason={includesExportsAddon && unsubscribeDisabledReason}
                             onClick={() => {
                                 textAreaNotEmpty
                                     ? reportSurveySent(surveyID, surveyResponse)

diff --git a/frontend/src/scenes/pipeline/ExportsUnsubscribeTable/exportsUnsubscribeTableLogic.tsx b/frontend/src/scenes/pipeline/ExportsUnsubscribeTable/exportsUnsubscribeTableLogic.tsx
@@ -1,5 +1,4 @@
-import { lemonToast } from '@posthog/lemon-ui'
-import { actions, afterMount, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import { actions, afterMount, connect, kea, path, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
 import { IconDatabase } from 'lib/lemon-ui/icons'
@@ -10,6 +9,7 @@ import { BatchExportConfiguration, PluginConfigTypeNew } from '~/types'
 
 import { pipelineTransformationsLogic } from '../transformationsLogic'
 import { RenderApp } from '../utils'
+import type { exportsUnsubscribeTableLogicType } from './exportsUnsubscribeTableLogicType'
 
 export interface ItemToDisable {
     plugin_config_id: number | undefined // exactly one of plugin_config_id or batch_export_id is set
@@ -21,19 +21,15 @@ export interface ItemToDisable {
     disabled: boolean
 }
 
-export const exportsUnsubscribeTableLogic = kea([
+export const exportsUnsubscribeTableLogic = kea<exportsUnsubscribeTableLogicType>([
     path(['scenes', 'pipeline', 'ExportsUnsubscribeTableLogic']),
     connect({
         values: [pluginsLogic, ['plugins'], pipelineTransformationsLogic, ['canConfigurePlugins'], userLogic, ['user']],
     }),
 
     actions({
-        openModal: true,
-        closeModal: true,
         disablePlugin: (id: number) => ({ id }),
         pauseBatchExport: (id: string) => ({ id }),
-        startUnsubscribe: true,
-        completeUnsubscribe: true,
     }),
     loaders(({ values }) => ({
         pluginConfigsToDisable: [
@@ -84,9 +80,9 @@ export const exportsUnsubscribeTableLogic = kea([
                 return loading
                     ? 'Loading...'
                     : Object.values(pluginConfigsToDisable).some((pluginConfig) => pluginConfig.enabled)
-                    ? 'All apps above need to be disabled explicitly first'
+                    ? 'All apps above must be disabled first'
                     : Object.values(batchExportConfigs).some((batchExportConfig) => !batchExportConfig.paused)
-                    ? 'All batch exports need to be deleted first'
+                    ? 'All batch exports must be disabled first'
                     : null
             },
         ],
@@ -123,36 +119,6 @@ export const exportsUnsubscribeTableLogic = kea([
             },
         ],
     }),
-    reducers({
-        modalOpen: [
-            false,
-            {
-                openModal: () => true,
-                closeModal: () => false,
-            },
-        ],
-    }),
-    listeners(({ actions, values }) => ({
-        // Usage guide:
-        // const { startUnsubscribe } = useActions(ExportsUnsubscribeTableLogic)
-        // const { loading } = useValues(ExportsUnsubscribeTableLogic)
-        // return (<>
-        //   <ExportsUnsubscribeTable />
-        //   <LemonButton loading={loading} onClick={startUnsubscribe}>Unsubscribe from data pipelines</LemonButton>
-        // </>)
-        startUnsubscribe() {
-            if (values.loading || values.unsubscribeDisabledReason) {
-                actions.openModal()
-            } else {
-                actions.completeUnsubscribe()
-            }
-        },
-        completeUnsubscribe() {
-            actions.closeModal()
-            lemonToast.success('Successfully unsubscribed from all data pipelines')
-            // TODO: whatever needs to happen for the actual unsubscription
-        },
-    })),
     afterMount(({ actions }) => {
         actions.loadPluginConfigs()
         actions.loadBatchExportConfigs()