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({