diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
index 75bb4175e7d7c..a3501bb03bd9e 100644
--- 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 (
+ <>
+
+ startUnsubscribe}>
+ Remove addon
+
+ >
+ )
+ }
+
+ // Default unsubscribe path
+ const { deactivateProduct } = useActions(billingLogic)
+ return (
+ deactivateProduct(addon.type)}>
+ Remove addon
+
+ )
+}
+
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 ? (
<>
-
- deactivateProduct(addon.type)}
- >
- Remove addon
-
- >
- }
- />
+
>
) : addon.included_with_main_product ? (
}>
diff --git a/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx b/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
index f4bbb17473f7a..4807ae26c7e94 100644
--- 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
index ec549af6fe264..dd1e266cdfbde 100644
--- a/frontend/src/scenes/billing/billingLogic.ts
+++ b/frontend/src/scenes/billing/billingLogic.ts
@@ -124,7 +124,6 @@ export const billingLogic = kea([
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
index 05c312a6dc267..3b9f1aca5922f 100644
--- 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 ({
- // Usage guide:
- // const { startUnsubscribe } = useActions(exportsUnsubscribeModalLogic)
- // const { loading } = useValues(exportsUnsubscribeModalLogic)
- // return (<>
- //
- // Unsubscribe from data pipelines
- // >)
startUnsubscribe() {
if (values.loading || values.unsubscribeDisabledReason) {
actions.openModal()
@@ -150,8 +144,7 @@ export const exportsUnsubscribeModalLogic = kea {
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index b3ba06262231b..a8d133750f1d1 100644
--- 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 {