feat(accounts): add hook for custom delete account modal (#45677)

We want to let getsentry set a custom modal for closing an account

static/app/types/hooks.tsx

@@ -92,6 +92,11 @@ type FirstPartyIntegrationAdditionalCTAProps = {
   integrations: Integration[];
 };
 
+type AttemptCloseAttemptProps = {
+  handleRemoveAccount: () => void;
+  organizationSlugs: string[];
+};
+
 type GuideUpdateCallback = (nextGuide: Guide | null, opts: {dismissed?: boolean}) => void;
 
 /**
@@ -99,6 +104,7 @@ type GuideUpdateCallback = (nextGuide: Guide | null, opts: {dismissed?: boolean}
  */
 export type ComponentHooks = {
   'component:codecov-integration-cta': () => React.ReactNode;
+  'component:confirm-account-close': () => React.ComponentType<AttemptCloseAttemptProps>;
   'component:dashboards-header': () => React.ComponentType<DashboardHeadersProps>;
   'component:disabled-app-store-connect-multiple': () => React.ComponentType<DisabledAppStoreConnectMultiple>;
   'component:disabled-custom-symbol-sources': () => React.ComponentType<DisabledCustomSymbolSources>;

static/app/views/settings/account/accountClose.tsx

@@ -4,7 +4,7 @@ import {addErrorMessage, addLoadingMessage} from 'sentry/actionCreators/indicato
 import {ModalRenderProps, openModal} from 'sentry/actionCreators/modal';
 import {Alert} from 'sentry/components/alert';
 import {Button} from 'sentry/components/button';
-import Confirm from 'sentry/components/confirm';
+import HookOrDefault from 'sentry/components/hookOrDefault';
 import {
   Panel,
   PanelAlert,
@@ -15,6 +15,7 @@ import {
 import {t, tct} from 'sentry/locale';
 import {Organization} from 'sentry/types';
 import AsyncView from 'sentry/views/asyncView';
+import {ConfirmAccountClose} from 'sentry/views/settings/account/confirmAccountClose';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import TextBlock from 'sentry/views/settings/components/text/textBlock';
 
@@ -106,9 +107,15 @@ class AccountClose extends AsyncView<Props, State> {
     });
   };
 
-  handleRemoveAccount = async () => {
+  get orgSlugsToRemove() {
     const {orgsToRemove} = this.state;
-    const orgs = orgsToRemove === null ? this.singleOwnerOrgs : Array.from(orgsToRemove);
+    return (
+      (orgsToRemove === null ? this.singleOwnerOrgs : Array.from(orgsToRemove)) || []
+    );
+  }
+
+  handleRemoveAccount = async () => {
+    const orgs = this.orgSlugsToRemove;
 
     addLoadingMessage('Closing account\u2026');
 
@@ -133,6 +140,11 @@ class AccountClose extends AsyncView<Props, State> {
   renderBody() {
     const {organizations, orgsToRemove} = this.state;
 
+    const HookedCustomConfirmAccountClose = HookOrDefault({
+      hookName: 'component:confirm-account-close',
+      defaultComponent: props => <ConfirmAccountClose {...props} />,
+    });
+
     return (
       <div>
         <SettingsPageHeader title="Close Account" />
@@ -183,16 +195,10 @@ class AccountClose extends AsyncView<Props, State> {
             ))}
           </PanelBody>
         </Panel>
-
-        <Confirm
-          priority="danger"
-          message={t(
-            'This is permanent and cannot be undone, are you really sure you want to do this?'
-          )}
-          onConfirm={this.handleRemoveAccount}
-        >
-          <Button priority="danger">{t('Close Account')}</Button>
-        </Confirm>
+        <HookedCustomConfirmAccountClose
+          handleRemoveAccount={this.handleRemoveAccount}
+          organizationSlugs={this.orgSlugsToRemove}
+        />
       </div>
     );
   }

static/app/views/settings/account/confirmAccountClose.tsx

@@ -0,0 +1,21 @@
+import {Button} from 'sentry/components/button';
+import Confirm from 'sentry/components/confirm';
+import {t} from 'sentry/locale';
+
+export function ConfirmAccountClose({
+  handleRemoveAccount,
+}: {
+  handleRemoveAccount: () => void;
+}) {
+  return (
+    <Confirm
+      priority="danger"
+      message={t(
+        'This is permanent and cannot be undone, are you really sure you want to do this?'
+      )}
+      onConfirm={handleRemoveAccount}
+    >
+      <Button priority="danger">{t('Close Account')}</Button>
+    </Confirm>
+  );
+}