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 {