Revert "feat(billing): update cancellation reasons (#90593)"

getsentry-bot · dashed · getsentry-bot · commit b4d35ea9ba5d · 2025-05-01T18:58:05.000Z
This reverts commit 7711e7a. Co-authored-by: dashed <139499+dashed@users.noreply.github.com>
diff --git a/static/gsApp/views/cancelSubscription.spec.tsx b/static/gsApp/views/cancelSubscription.spec.tsx
@@ -45,7 +45,9 @@ describe('CancelSubscription', function () {
       await screen.findByRole('heading', {name: 'Cancel Subscription'})
     ).toBeInTheDocument();
     expect(
-      await screen.findByText('The project/product/company is shutting down.')
+      await screen.findByRole('radio', {
+        name: 'The project/product/company is shutting down.',
+      })
     ).toBeInTheDocument();
   });
 
@@ -65,9 +67,9 @@ describe('CancelSubscription', function () {
   it('displays followup textarea when option is selected', async function () {
     render(<CancelSubscription />);
 
-    const radio = await screen.findByText(
-      'The project/product/company is shutting down.'
-    );
+    const radio = await screen.findByRole('radio', {
+      name: 'The project/product/company is shutting down.',
+    });
     expect(radio).toBeInTheDocument();
 
     expect(screen.queryByRole('textbox', {name: 'followup'})).not.toBeInTheDocument();
@@ -81,46 +83,19 @@ describe('CancelSubscription', function () {
       method: 'DELETE',
     });
     render(<CancelSubscription />);
-    const radio = await screen.findByText('We are switching to a different solution.');
-    expect(radio).toBeInTheDocument();
-
-    await userEvent.click(radio);
-    await userEvent.type(screen.getByRole('textbox'), 'Cancellation reason');
-    await userEvent.click(screen.getByRole('button', {name: /Cancel Subscription/}));
-
-    expect(mock).toHaveBeenCalledWith(
-      `/customers/${organization.slug}/`,
-      expect.objectContaining({
-        data: {
-          reason: 'competitor',
-          followup: 'Cancellation reason',
-          checkboxes: [],
-        },
-      })
-    );
-  });
-
-  it('calls cancel API with checkboxes', async function () {
-    const mock = MockApiClient.addMockResponse({
-      url: `/customers/${organization.slug}/`,
-      method: 'DELETE',
-    });
-    render(<CancelSubscription />);
-    const radio = await screen.findByText("Sentry doesn't fit our needs.");
+    const radio = await screen.findByRole('radio', {name: 'Other'});
     expect(radio).toBeInTheDocument();
 
     await userEvent.click(radio);
-    await userEvent.click(screen.getByTestId('checkbox-reach_out'));
     await userEvent.type(screen.getByRole('textbox'), 'Cancellation reason');
     await userEvent.click(screen.getByRole('button', {name: /Cancel Subscription/}));
 
     expect(mock).toHaveBeenCalledWith(
       `/customers/${organization.slug}/`,
       expect.objectContaining({
         data: {
-          reason: 'not_a_fit',
+          reason: 'other',
           followup: 'Cancellation reason',
-          checkboxes: ['reach_out'],
         },
       })
     );
diff --git a/static/gsApp/views/cancelSubscription.tsx b/static/gsApp/views/cancelSubscription.tsx
@@ -2,10 +2,9 @@ import {Fragment, useCallback, useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 import moment from 'moment-timezone';
 
-import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
+import {addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
-import {Checkbox} from 'sentry/components/core/checkbox';
 import RadioGroupField from 'sentry/components/forms/fields/radioField';
 import TextareaField from 'sentry/components/forms/fields/textareaField';
 import Form from 'sentry/components/forms/form';
@@ -35,64 +34,46 @@ import usePromotionTriggerCheck from 'getsentry/utils/usePromotionTriggerCheck';
 import withPromotions from 'getsentry/utils/withPromotions';
 
 type CancelReason = [string, React.ReactNode];
-type CancelCheckbox = [string, React.ReactNode];
 
-const CANCEL_STEPS: Array<{
-  followup: React.ReactNode;
-  reason: CancelReason;
-  checkboxes?: CancelCheckbox[];
-}> = [
+const CANCEL_STEPS: Array<{followup: React.ReactNode; reason: CancelReason}> = [
   {
-    reason: ['migration', t('Consolidating Sentry accounts.')],
-    followup: t(
-      'If migrating to another existing account, can you provide the org slug?'
-    ),
+    reason: ['shutting_down', t('The project/product/company is shutting down.')],
+    followup: t('Sorry to hear that! Anything more we should know?'),
   },
   {
-    reason: ['competitor', t('We are switching to a different solution.')],
-    followup: t("Care to share the solution you've chosen and why?"),
+    reason: ['only_need_free', t('We only need the features on the free plan.')],
+    followup: t(
+      'Fair enough. Which features on the free plan are most important to you?'
+    ),
   },
   {
     reason: ['not_a_fit', t("Sentry doesn't fit our needs.")],
-    followup: t('Give us more feedback?'),
-    checkboxes: [
-      [
-        'reach_out',
-        t(
-          "Prefer to share feedback live? Let us know what you'd like to discuss and we'll have a Product Manager reach out!"
-        ),
-      ],
-    ],
+    followup: t('Bummer. What features were missing for you?'),
   },
   {
-    reason: ['pricing_expensive', t('Pricing is too expensive.')],
-    followup: t('Anything more we should know?'),
-  },
-  {
-    reason: ['pricing_value', t("I didn't get the value I wanted.")],
-    followup: t('What was missing?'),
+    reason: ['competitor', t('We are switching to a different solution.')],
+    followup: t('Thanks for letting us know. Which solution(s)? Why?'),
   },
   {
-    reason: ['only_need_free', t('We only need the free plan.')],
-    followup: t('Fair enough. Anything more we should know?'),
-    checkboxes: [
-      ['features', t("I don't need so much volume.")],
-      ['volume', t('Developer features are enough for me.')],
-    ],
+    reason: ['pricing', t("The pricing doesn't fit our needs.")],
+    followup: t("What about it wasn't right for you?"),
   },
   {
     reason: ['self_hosted', t('We are hosting Sentry ourselves.')],
     followup: t('Are you interested in a single tenant version of Sentry?'),
   },
   {
-    reason: ['shutting_down', t('The project/product/company is shutting down.')],
-    followup: t('Sorry to hear that! Anything more we should know?'),
+    reason: ['no_more_errors', t('We no longer get any errors.')],
+    followup: t("Congrats! What's your secret?"),
+  },
+  {
+    reason: ['other', t('Other')],
+    followup: t('Other reason?'),
   },
 ];
 
 type State = {
   canSubmit: boolean;
-  checkboxes: Record<string, boolean>;
   showFollowup: boolean;
   understandsMembers: boolean;
   val: CancelReason[0] | null;
@@ -101,7 +82,6 @@ type State = {
 function CancelSubscriptionForm() {
   const organization = useOrganization();
   const navigate = useNavigate();
-  const api = useApi();
   const {data: subscription, isPending} = useApiQuery<Subscription>(
     [`/customers/${organization.slug}/`],
     {staleTime: 0}
@@ -111,37 +91,8 @@ function CancelSubscriptionForm() {
     showFollowup: false,
     understandsMembers: false,
     val: null,
-    checkboxes: {},
   });
 
-  const handleSubmitSuccess = (resp: any) => {
-    subscriptionStore.loadData(organization.slug);
-    const msg = resp?.responseJSON?.details || t('Successfully cancelled subscription');
-
-    addSuccessMessage(msg);
-    navigate({
-      pathname: normalizeUrl(`/settings/${organization.slug}/billing/`),
-    });
-  };
-
-  const handleSubmit = async (data: any) => {
-    try {
-      const submitData = {
-        ...data,
-        checkboxes: Object.keys(state.checkboxes).filter(key => state.checkboxes[key]),
-      };
-
-      const response = await api.requestPromise(`/customers/${subscription?.slug}/`, {
-        method: 'DELETE',
-        data: submitData,
-      });
-
-      handleSubmitSuccess(response);
-    } catch (error) {
-      addErrorMessage(error.responseJSON?.detail || t('Failed to cancel subscription'));
-    }
-  };
-
   if (isPending || !subscription) {
     return <LoadingIndicator />;
   }
@@ -188,6 +139,16 @@ function CancelSubscriptionForm() {
 
   const followup = CANCEL_STEPS.find(cancel => cancel.reason[0] === state.val)?.followup;
 
+  const handleSubmitSuccess = (resp: any) => {
+    subscriptionStore.loadData(organization.slug);
+    const msg = resp?.responseJSON?.details || t('Successfully cancelled subscription');
+
+    addSuccessMessage(msg);
+    navigate({
+      pathname: normalizeUrl(`/settings/${organization.slug}/billing/`),
+    });
+  };
+
   return (
     <Fragment>
       <Alert.Container>
@@ -214,51 +175,27 @@ function CancelSubscriptionForm() {
         <PanelHeader>{t('Cancellation Reason')}</PanelHeader>
 
         <PanelBody withPadding>
-          <Form onSubmit={handleSubmit} onSubmitSuccess={handleSubmitSuccess} hideFooter>
+          <Form
+            apiMethod="DELETE"
+            apiEndpoint={`/customers/${subscription.slug}/`}
+            onSubmitSuccess={handleSubmitSuccess}
+            hideFooter
+          >
             <TextBlock>
               {t('Please help us understand why you are cancelling:')}
             </TextBlock>
 
-            <RadioGroupContainer
+            <RadioGroupField
               stacked
               name="reason"
               label=""
               inline={false}
-              choices={CANCEL_STEPS.map<CancelReason>(cancel => [
-                cancel.reason[0],
-                <RadioContainer key={cancel.reason[0]}>
-                  {cancel.reason[1]}
-                  {cancel.checkboxes && state.val === cancel.reason[0] && (
-                    <Fragment>
-                      {cancel.checkboxes.map(([name, label]) => (
-                        <ExtraContainer key={name}>
-                          <Checkbox
-                            data-test-id={`checkbox-${name}`}
-                            checked={state.checkboxes[name]}
-                            name={name}
-                            onChange={(value: any) => {
-                              setState(currentState => ({
-                                ...currentState,
-                                checkboxes: {
-                                  ...currentState.checkboxes,
-                                  [name]: value.target.checked,
-                                },
-                              }));
-                            }}
-                          />
-                          {label}
-                        </ExtraContainer>
-                      ))}
-                    </Fragment>
-                  )}
-                </RadioContainer>,
-              ])}
+              choices={CANCEL_STEPS.map<CancelReason>(cancel => cancel.reason)}
               onChange={(val: any) =>
                 setState(currentState => ({
                   ...currentState,
                   canSubmit: true,
                   showFollowup: true,
-                  checkboxes: {},
                   val,
                 }))
               }
@@ -339,33 +276,6 @@ function CancelSubscriptionWrapper({
   );
 }
 
-const RadioContainer = styled('div')`
-  display: flex;
-  flex-direction: column;
-
-  label {
-    grid-template-columns: max-content 1fr;
-    grid-template-rows: auto auto;
-
-    > div:last-child {
-      grid-column: 2;
-    }
-  }
-`;
-
-const RadioGroupContainer = styled(RadioGroupField)`
-  label {
-    align-items: flex-start;
-  }
-`;
-
-const ExtraContainer = styled('div')`
-  display: flex;
-  align-items: center;
-  gap: ${space(1)};
-  padding: ${space(1)} 0;
-`;
-
 export default withSubscription(withPromotions(CancelSubscriptionWrapper), {
   noLoader: true,
 });
