clean up logic and flow

PostHog · Oct 30, 2024 · a2770e1 · a2770e1
1 parent 813ea5b
commit a2770e1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 26 deletions.
diff --git 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 => (
         <div className="flex flex-col gap-4">
             <div className="text-center">
                 <h3 className="text-lg mb-2">How about now? Was that enough hedgehogs?</h3>
@@ -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 ? (
                         <>
                             <LemonButton
                                 type="secondary"
@@ -159,7 +162,7 @@ export const UnsubscribeSurveyModal = ({
                     ) : null
                 }
             >
-                {surveyStep === 1 ? (
+                {unsubscribeModalStep === 1 ? (
                     <div className="flex flex-col gap-3.5">
                         {unsubscribeError && (
                             <LemonBanner type="error">
@@ -267,7 +270,7 @@ export const UnsubscribeSurveyModal = ({
                         ) : null}
                     </div>
                 ) : (
-                    renderStep2()
+                    renderHedgehogStep()
                 )}
             </LemonModal>
         </>

diff --git a/frontend/src/scenes/billing/billingLogic.tsx b/frontend/src/scenes/billing/billingLogic.tsx
@@ -231,6 +231,7 @@ export const billingLogic = kea<billingLogicType>([
 
                 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<billingLogicType>([
                     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
@@ -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<billingProductLogicType>([
             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<billingProductLogicType>([
                 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<billingProductLogicType>([
         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({