diff --git a/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx b/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
index 20ba7cc4b8eb6..ea2912c20e42f 100644
--- a/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
+++ b/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
@@ -39,15 +39,15 @@ export const UnsubscribeSurveyModal = ({
}): JSX.Element | null => {
const { trigger, HogfettiComponent } = useHogfetti()
- const { surveyID, surveyResponse, isAddonProduct, surveyStep } = useValues(
+ const { surveyID, surveyResponse, isAddonProduct, unsubscribeModalStep } = useValues(
billingProductLogic({ product, hogfettiTrigger: trigger })
)
const {
setSurveyResponse,
toggleSurveyReason,
reportSurveyDismissed,
- setStepTwo,
- resetStep,
+ setUnsubscribeModalStep,
+ resetUnsubscribeModalStep,
setHedgehogSatisfied,
triggerMoreHedgehogs,
} = useActions(billingProductLogic({ product }))
@@ -73,14 +73,14 @@ export const UnsubscribeSurveyModal = ({
const handleUnsubscribe = (): void => {
if (surveyResponse['$survey_response_2'].includes('Not enough hedgehogs')) {
- setStepTwo()
+ setUnsubscribeModalStep(2)
triggerMoreHedgehogs()
} else {
deactivateProduct(billing?.subscription_level === 'paid' && !isAddonProduct ? 'all_products' : product.type)
}
}
- const renderStep2 = (): JSX.Element => (
+ const renderHedgehogStep = (): JSX.Element => (
How about now? Was that enough hedgehogs?
@@ -112,11 +112,8 @@ export const UnsubscribeSurveyModal = ({
type="tertiary"
loading={billingLoading}
onClick={() => {
- resetStep()
- setSurveyResponse(
- '$survey_response_2',
- surveyResponse['$survey_response_2'].filter((r) => r !== 'Not enough hedgehogs')
- )
+ resetUnsubscribeModalStep()
+ reportSurveyDismissed(surveyID)
}}
>
You convinced me to stay! 💕
@@ -132,12 +129,18 @@ export const UnsubscribeSurveyModal = ({
onClose={() => {
reportSurveyDismissed(surveyID)
resetUnsubscribeError()
- resetStep()
+ resetUnsubscribeModalStep()
}}
width="max(44vw)"
- title={isAddonProduct ? action : `${action} from ${product.name}`}
+ title={
+ isAddonProduct
+ ? action
+ : product.type === 'platform_and_support'
+ ? `${action} your plan`
+ : `${action} from ${product.name}`
+ }
footer={
- surveyStep === 1 ? (
+ unsubscribeModalStep === 1 ? (
<>
- {surveyStep === 1 ? (
+ {unsubscribeModalStep === 1 ? (
{unsubscribeError && (
@@ -267,7 +270,7 @@ export const UnsubscribeSurveyModal = ({
) : null}
) : (
- renderStep2()
+ renderHedgehogStep()
)}
>
diff --git a/frontend/src/scenes/billing/billingLogic.tsx b/frontend/src/scenes/billing/billingLogic.tsx
index 8aafd3c6d5eab..9d686f373d378 100644
--- a/frontend/src/scenes/billing/billingLogic.tsx
+++ b/frontend/src/scenes/billing/billingLogic.tsx
@@ -231,6 +231,7 @@ export const billingLogic = kea([
deactivateProduct: async (key: string) => {
// clear upgrade params from URL
+ // Note(@zach): This is not working properly. We need to look into this.
const currentURL = new URL(window.location.href)
currentURL.searchParams.delete('upgraded')
currentURL.searchParams.delete('products')
@@ -240,7 +241,12 @@ export const billingLogic = kea([
try {
const response = await api.getResponse('api/billing/deactivate?products=' + key)
const jsonRes = await getJSONOrNull(response)
+
+ lemonToast.success(
+ "You have been unsubscribed. We're sad to see you go. May the hedgehogs be ever in your favour."
+ )
actions.reportProductUnsubscribed(key)
+
return parseBillingResponse(jsonRes)
} catch (error: any) {
if (error.code) {
diff --git a/frontend/src/scenes/billing/billingProductLogic.ts b/frontend/src/scenes/billing/billingProductLogic.ts
index 5b4e65ee71844..a2b3d9718fa46 100644
--- a/frontend/src/scenes/billing/billingProductLogic.ts
+++ b/frontend/src/scenes/billing/billingProductLogic.ts
@@ -1,4 +1,4 @@
-import { LemonDialog, lemonToast } from '@posthog/lemon-ui'
+import { LemonDialog } from '@posthog/lemon-ui'
import { actions, connect, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { forms } from 'kea-forms'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -75,8 +75,8 @@ export const billingProductLogic = kea([
products,
redirectPath,
}),
- setStepTwo: true,
- resetStep: true,
+ setUnsubscribeModalStep: (step: number) => ({ step }),
+ resetUnsubscribeModalStep: true,
setHedgehogSatisfied: (satisfied: boolean) => ({ satisfied }),
triggerMoreHedgehogs: true,
}),
@@ -156,11 +156,11 @@ export const billingProductLogic = kea([
toggleIsPlanComparisonModalOpen: (_, { highlightedFeatureKey }) => highlightedFeatureKey || null,
},
],
- surveyStep: [
+ unsubscribeModalStep: [
1 as number,
{
- setStepTwo: () => 2,
- resetStep: () => 1,
+ setUnsubscribeModalStep: (_, { step }) => step,
+ resetUnsubscribeModalStep: () => 1,
},
],
hedgehogSatisfied: [
@@ -322,14 +322,13 @@ export const billingProductLogic = kea([
deactivateProductSuccess: async (_, breakpoint) => {
if (!values.unsubscribeError && values.surveyID) {
actions.reportSurveySent(values.surveyID, values.surveyResponse)
- if (values.hedgehogSatisfied) {
- lemonToast.success("We're sad to see you go, but glad you got enough hedgehogs!")
- }
+ await breakpoint(400)
+ document.getElementsByClassName('Navigation3000__scene')[0].scrollIntoView()
}
- await breakpoint(200)
},
setScrollToProductKey: ({ scrollToProductKey }) => {
- if (scrollToProductKey && scrollToProductKey === props.product.type) {
+ // Only scroll to the product if it's an addon product. With subscribe to all products we don't need it for parent products.
+ if (scrollToProductKey && values.isAddonProduct && scrollToProductKey === props.product.type) {
setTimeout(() => {
if (props.productRef?.current) {
props.productRef?.current.scrollIntoView({