fix: improve downgrade flow in onboarding

frontend/src/scenes/billing/PlanComparison.tsx

@@ -121,8 +121,12 @@ export const PlanComparison = ({
     const { width, ref: planComparisonRef } = useResizeObserver()
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
     const currentPlanIndex = plans.findIndex((plan) => plan.current_plan)
-    const { surveyID, comparisonModalHighlightedFeatureKey } = useValues(billingProductLogic({ product }))
-    const { reportSurveyShown, setSurveyResponse } = useActions(billingProductLogic({ product }))
+    const { surveyID, comparisonModalHighlightedFeatureKey, billingProductLoading } = useValues(
+        billingProductLogic({ product })
+    )
+    const { reportSurveyShown, setSurveyResponse, setBillingProductLoading } = useActions(
+        billingProductLogic({ product })
+    )
     const billingDaysRemaining = billing?.billing_period?.current_period_end.diff(dayjs(), 'days')
     const billingDaysTotal = billing?.billing_period?.current_period_end.diff(
         billing.billing_period?.current_period_start,
@@ -136,6 +140,8 @@ export const PlanComparison = ({
                     to={
                         plan.contact_support
                             ? 'mailto:[email protected]?subject=Enterprise%20plan%20request'
+                            : i < currentPlanIndex
+                            ? undefined // Downgrade action handled in onClick
                             : !plan.included_if
                             ? getUpgradeProductLink(product, plan.plan_key || '', redirectPath, includeAddons)
                             : plan.included_if == 'has_subscription' &&
@@ -166,12 +172,14 @@ export const PlanComparison = ({
                         if (!plan.current_plan) {
                             // TODO: add current plan key and new plan key
                             reportBillingUpgradeClicked(product.type)
+                            setBillingProductLoading(product.type)
                         }
-                        if (plan.included_if == 'has_subscription' && !plan.current_plan && i < currentPlanIndex) {
+                        if (!plan.included_if && !plan.current_plan && i < currentPlanIndex) {
                             setSurveyResponse(product.type, '$survey_response_1')
                             reportSurveyShown(UNSUBSCRIBE_SURVEY_ID, product.type)
                         }
                     }}
+                    loading={billingProductLoading === product.type && !plan.current_plan && !plan.contact_support}
                     data-attr={`upgrade-${plan.name}`}
                 >
                     {plan.current_plan

frontend/src/scenes/billing/billingLogic.tsx

@@ -172,6 +172,12 @@ export const billingLogic = kea<billingLogicType>([
                 },
 
                 deactivateProduct: async (key: string) => {
+                    // clear upgrade params from URL
+                    const currentURL = new URL(window.location.href)
+                    currentURL.searchParams.delete('upgraded')
+                    currentURL.searchParams.delete('products')
+                    router.actions.push(currentURL.pathname + currentURL.search)
+
                     actions.resetUnsubscribeError()
                     try {
                         const response = await api.getResponse('api/billing-v2/deactivate?products=' + key)

frontend/src/scenes/billing/billingProductLogic.ts

@@ -30,6 +30,7 @@ export const billingProductLogic = kea<billingProductLogicType>([
             [
                 'updateBillingLimits',
                 'updateBillingLimitsSuccess',
+                'loadBilling',
                 'loadBillingSuccess',
                 'deactivateProduct',
                 'setProductSpecificAlert',
@@ -266,6 +267,7 @@ export const billingProductLogic = kea<billingProductLogicType>([
                     ? actions.reportSurveySent(values.surveyID, values.surveyResponse)
                     : actions.reportSurveyDismissed(values.surveyID)
             }
+            location.reload()
         },
         setScrollToProductKey: ({ scrollToProductKey }) => {
             if (scrollToProductKey && scrollToProductKey === props.product.type) {

frontend/src/scenes/onboarding/OnboardingBillingStep.tsx

@@ -24,7 +24,7 @@ export const OnboardingBillingStep = ({
     product: BillingProductV2Type
     stepKey?: OnboardingStepKey
 }): JSX.Element => {
-    const { billing, redirectPath } = useValues(billingLogic)
+    const { billing, redirectPath, billingLoading } = useValues(billingLogic)
     const { productKey } = useValues(onboardingLogic)
     const { currentAndUpgradePlans } = useValues(billingProductLogic({ product }))
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
@@ -39,13 +39,14 @@ export const OnboardingBillingStep = ({
             showSkip={!product.subscribed}
             stepKey={stepKey}
             continueOverride={
-                product?.subscribed ? undefined : (
+                product?.subscribed && !billingLoading ? undefined : (
                     <BillingUpgradeCTA
                         // TODO: redirect path won't work properly until navigation is properly set up
-                        to={getUpgradeProductLink(product, plan.plan_key || '', redirectPath, true)}
+                        to={getUpgradeProductLink(product, plan?.plan_key || '', redirectPath, true)}
                         type="primary"
                         status="alt"
                         center
+                        disabledReason={billingLoading && 'Please wait...'}
                         disableClientSideRouting
                         onClick={() => {
                             reportBillingUpgradeClicked(product.type)
@@ -57,7 +58,7 @@ export const OnboardingBillingStep = ({
                 )
             }
         >
-            {billing?.products && productKey && product ? (
+            {billing?.products && productKey && product && !billingLoading ? (
                 <div className="mt-6">
                     {product.subscribed && (
                         <div className="mb-8">
@@ -92,15 +93,17 @@ export const OnboardingBillingStep = ({
                         </div>
                     )}
 
-                    {(!product.subscribed || showPlanComp) && (
+                    {(!product.subscribed || showPlanComp) && !billingLoading && (
                         <>
                             <BillingHero />
                             <PlanComparison product={product} includeAddons />
                         </>
                     )}
                 </div>
             ) : (
-                <Spinner className="text-lg" />
+                <div className="flex items-center justify-center my-6">
+                    <Spinner className="text-2xl text-muted" />
+                </div>
             )}
         </OnboardingStep>
     )