wip towards billing

PostHog · Dec 15, 2023 · 35a304f · 35a304f
1 parent 1c192e5
commit 35a304f
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 28 deletions.
diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -17,9 +17,10 @@ import { More } from 'lib/lemon-ui/LemonButton/More'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { capitalizeFirstLetter, compactNumber } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { ExportsUnsubscribeModal, exportsUnsubscribeModalLogic } from 'scenes/pipeline/ExportsUnsubscribeModal'
 import { getProductIcon } from 'scenes/products/Products'
 
-import { BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
+import { AvailableFeature, BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
 
 import { convertLargeNumberToWords, getUpgradeProductLink, summarizeUsage } from './billing-utils'
 import { BillingGauge, BillingGauge3000 } from './BillingGauge'
@@ -45,9 +46,32 @@ export const getTierDescription = (
         : `> ${summarizeUsage(tiers?.[i - 1].up_to || null)}`
 }
 
+const RemoveAddOnButton = (addon: BillingProductV2AddonType): JSX.Element => {
+    // Some products require extra steps before unsubscribing
+    if (addon.type === AvailableFeature.DATA_PIPELINES) {
+        const { startUnsubscribe } = useActions(exportsUnsubscribeModalLogic)
+        const { loading } = useValues(exportsUnsubscribeModalLogic)
+        return (
+            <>
+                <ExportsUnsubscribeModal />
+                <LemonButton status="stealth" fullWidth loading={loading} onClick={() => startUnsubscribe}>
+                    Remove addon
+                </LemonButton>
+            </>
+        )
+    }
+
+    // Default unsubscribe path
+    const { deactivateProduct } = useActions(billingLogic)
+    return (
+        <LemonButton status="stealth" fullWidth onClick={() => deactivateProduct(addon.type)}>
+            Remove addon
+        </LemonButton>
+    )
+}
+
 export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonType }): JSX.Element => {
     const { billing, redirectPath } = useValues(billingLogic)
-    const { deactivateProduct } = useActions(billingLogic)
     const { isPricingModalOpen, currentAndUpgradePlans } = useValues(billingProductLogic({ product: addon }))
     const { toggleIsPricingModalOpen } = useActions(billingProductLogic({ product: addon }))
 
@@ -87,19 +111,7 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
                     )}
                     {addon.subscribed ? (
                         <>
-                            <More
-                                overlay={
-                                    <>
-                                        <LemonButton
-                                            status="stealth"
-                                            fullWidth
-                                            onClick={() => deactivateProduct(addon.type)}
-                                        >
-                                            Remove addon
-                                        </LemonButton>
-                                    </>
-                                }
-                            />
+                            <More overlay={RemoveAddOnButton(addon)} />
                         </>
                     ) : addon.included_with_main_product ? (
                         <LemonTag type="completion" icon={<IconCheckmark />}>

diff --git a/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx b/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
@@ -87,7 +87,7 @@ export const UnsubscribeSurveyModal = ({ product }: { product: BillingProductV2T
                                 textAreaNotEmpty
                                     ? reportSurveySent(surveyID, surveyResponse)
                                     : reportSurveyDismissed(surveyID)
-                                deactivateProduct(product.type)
+                                deactivateProduct(product.type) // TODO: Not sure if this needs to be changed for data pipelines unsubscribe too or not
                             }}
                         >
                             Unsubscribe

diff --git a/frontend/src/scenes/billing/billingLogic.ts b/frontend/src/scenes/billing/billingLogic.ts
@@ -124,7 +124,6 @@ export const billingLogic = kea<billingLogicType>([
                     lemonToast.success('Billing limits updated')
                     return parseBillingResponse(response)
                 },
-
                 deactivateProduct: async (key: string) => {
                     const response = await api.get('api/billing-v2/deactivate?products=' + key)
                     lemonToast.success('Product unsubscribed')

diff --git a/frontend/src/scenes/pipeline/ExportsUnsubscribeModal/exportsUnsubscribeModalLogic.tsx b/frontend/src/scenes/pipeline/ExportsUnsubscribeModal/exportsUnsubscribeModalLogic.tsx
@@ -1,12 +1,12 @@
-import { lemonToast } from '@posthog/lemon-ui'
 import { actions, afterMount, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
 import { IconDatabase } from 'lib/lemon-ui/icons'
+import { billingLogic } from 'scenes/billing/billingLogic'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { userLogic } from 'scenes/userLogic'
 
-import { BatchExportConfiguration, PluginConfigTypeNew } from '~/types'
+import { AvailableFeature, BatchExportConfiguration, PluginConfigTypeNew } from '~/types'
 
 import { pipelineTransformationsLogic } from '../transformationsLogic'
 import { RenderApp } from '../utils'
@@ -26,6 +26,7 @@ export const exportsUnsubscribeModalLogic = kea<exportsUnsubscribeModalLogicType
     path(['scenes', 'pipeline', 'exportsUnsubscribeModalLogic']),
     connect({
         values: [pluginsLogic, ['plugins'], pipelineTransformationsLogic, ['canConfigurePlugins'], userLogic, ['user']],
+        actions: [billingLogic, ['deactivateProduct']],
     }),
 
     actions({
@@ -134,13 +135,6 @@ export const exportsUnsubscribeModalLogic = kea<exportsUnsubscribeModalLogicType
         ],
     }),
     listeners(({ actions, values }) => ({
-        // Usage guide:
-        // const { startUnsubscribe } = useActions(exportsUnsubscribeModalLogic)
-        // const { loading } = useValues(exportsUnsubscribeModalLogic)
-        // return (<>
-        //   <ExportsUnsubscribeModal />
-        //   <LemonButton loading={loading} onClick={startUnsubscribe}>Unsubscribe from data pipelines</LemonButton>
-        // </>)
         startUnsubscribe() {
             if (values.loading || values.unsubscribeDisabledReason) {
                 actions.openModal()
@@ -150,8 +144,7 @@ export const exportsUnsubscribeModalLogic = kea<exportsUnsubscribeModalLogicType
         },
         completeUnsubscribe() {
             actions.closeModal()
-            lemonToast.success('Successfully unsubscribed from all data pipelines')
-            // TODO: whatever needs to happen for the actual unsubscription
+            actions.deactivateProduct(AvailableFeature.DATA_PIPELINES)
         },
     })),
     afterMount(({ actions }) => {

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -91,6 +91,7 @@ export enum AvailableFeature {
     SURVEYS_STYLING = 'surveys_styling',
     SURVEYS_TEXT_HTML = 'surveys_text_html',
     SURVEYS_MULTIPLE_QUESTIONS = 'surveys_multiple_questions',
+    DATA_PIPELINES = 'data_pipelines',
 }
 
 export enum ProductKey {