feat: add error handling for account deletion

jwplayer · Jun 11, 2023 · 25b2f5a · 25b2f5a
1 parent 08dc0fa
commit 25b2f5a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/public/locales/en/user.json b/public/locales/en/user.json
@@ -34,6 +34,7 @@
     "delete_account": {
       "title": "Delete account",
       "body": "Permanently delete your account and all of your content.",
+      "error": "An error occurred while deleting your account. Please try again.",
       "modal": {
         "title": "Enter password to continue",
         "placeholder": "Enter your password",

diff --git a/src/components/DeleteAccountModal/DeleteAccountModal.tsx b/src/components/DeleteAccountModal/DeleteAccountModal.tsx
@@ -11,8 +11,9 @@ import styles from './DeleteAccountModal.module.scss';
 
 import type { DeleteAccountFormData } from '#types/account';
 import useForm from '#src/hooks/useForm';
-import { addQueryParam, removeMultipleQueryParams } from '#src/utils/location';
+import { addQueryParam, removeQueryParam } from '#src/utils/location';
 import { deleteAccountData, logout } from '#src/stores/AccountController';
+import Alert from '#components/Alert/Alert';
 
 const DeleteAccountModal = () => {
   const { t } = useTranslation('user');
@@ -26,7 +27,6 @@ const DeleteAccountModal = () => {
     },
     onError: () => {
       setEnteredPassword('');
-      handleCancel();
     },
   });
 
@@ -47,9 +47,13 @@ const DeleteAccountModal = () => {
   );
 
   const handleCancel = () => {
-    navigate(removeMultipleQueryParams(location, ['confirmation', 'u']));
+    navigate(removeQueryParam(location, 'u'));
   };
 
+  if (deleteAccount.isError) {
+    return <Alert open isSuccess={false} onClose={handleCancel} message={t('account.delete_account.error')} />;
+  }
+
   return enteredPassword ? (
     <div className={styles.formContainer}>
       <h2 className={styles.heading}>{t('account.delete_account.title')}</h2>

diff --git a/src/containers/AccountModal/AccountModal.tsx b/src/containers/AccountModal/AccountModal.tsx
@@ -20,7 +20,7 @@ import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import Welcome from '#components/Welcome/Welcome';
 import PaymentFailed from '#components/PaymentFailed/PaymentFailed';
 import Dialog from '#components/Dialog/Dialog';
-import { addQueryParam, removeMultipleQueryParams } from '#src/utils/location';
+import { addQueryParam, removeQueryParam } from '#src/utils/location';
 import DeleteAccountModal from '#src/components/DeleteAccountModal/DeleteAccountModal';
 import FinalizePayment from '#components/FinalizePayment/FinalizePayment';
 import WaitingForPayment from '#components/WaitingForPayment/WaitingForPayment';
@@ -60,7 +60,7 @@ const AccountModal = () => {
   }, [viewParam, loading, isPublicView, user, toLogin]);
 
   const closeHandler = useEventCallback(() => {
-    navigate(removeMultipleQueryParams(location, ['u', 'confirmation']));
+    navigate(removeQueryParam(location, 'u'));
   });
 
   const renderForm = () => {