From f6d92af7a31faa16716dabaca2c1f0231b4e898e Mon Sep 17 00:00:00 2001
From: Abhishek-Punhani <punhani.manavabhi@gmail.com>
Date: Fri, 30 May 2025 17:45:42 +0530
Subject: [PATCH]  Migrate 'Failed to delete account' alert from Vuetify to
 Kolibri Design System

---
 .../pages/Account/DeleteAccountForm.vue       | 19 ++++++++++---------
 .../pages/__tests__/deleteAccountForm.spec.js | 17 +++++++++++++----
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/settings/pages/Account/DeleteAccountForm.vue b/contentcuration/contentcuration/frontend/settings/pages/Account/DeleteAccountForm.vue
index 438a4f1c93..449c28ab16 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Account/DeleteAccountForm.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Account/DeleteAccountForm.vue
@@ -20,11 +20,15 @@
         @input="deletionEmailInvalidMessage = ''"
       />
     </KModal>
-    <Alert
-      v-model="deletionFailed"
-      :header="$tr('deletionFailed')"
-      :text="$tr('deletionFailedText')"
-    />
+
+    <KModal
+      v-if="deletionFailed"
+      :title="$tr('deletionFailed')"
+      :submitText="$tr('ok')"
+      @submit="deletionFailed = false"
+    >
+      <p>{{ $tr('deletionFailedText') }}</p>
+    </KModal>
   </div>
 
 </template>
@@ -33,13 +37,9 @@
 <script>
 
   import { mapActions, mapState } from 'vuex';
-  import Alert from 'shared/views/Alert';
 
   export default {
     name: 'DeleteAccountForm',
-    components: {
-      Alert,
-    },
     props: {
       value: {
         type: Boolean,
@@ -98,6 +98,7 @@
       deletionFailed: 'Failed to delete account',
       deletionFailedText:
         'Failed to delete your account. Please contact us here: https://community.learningequality.org.',
+      ok: 'OK',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/settings/pages/__tests__/deleteAccountForm.spec.js b/contentcuration/contentcuration/frontend/settings/pages/__tests__/deleteAccountForm.spec.js
index 6f4fbfb77d..4510417b45 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/__tests__/deleteAccountForm.spec.js
+++ b/contentcuration/contentcuration/frontend/settings/pages/__tests__/deleteAccountForm.spec.js
@@ -42,11 +42,20 @@ describe('deleteAccountForm', () => {
     wrapper.vm.deleteUserAccount();
     expect(deleteAccount).toHaveBeenCalled();
   });
-  it('should show alert if account deletion fails', async () => {
+  it('should show KModal if account deletion fails', async () => {
     await wrapper.setData({ accountDeletionEmail: email });
     deleteAccount.mockImplementation(() => Promise.reject('error'));
-    wrapper.vm.deleteUserAccount().catch(() => {
-      expect(wrapper.vm.deletionFailed).toBe(true);
-    });
+    try {
+      await wrapper.vm.deleteUserAccount();
+    } catch (e) {
+      throw new Error(e);
+    }
+    await wrapper.vm.$nextTick();
+    const modals = wrapper.findAllComponents({ name: 'KModal' });
+    const errorModal = modals.at(1);
+    expect(errorModal.exists()).toBe(true);
+    expect(errorModal.text()).toContain(
+      'Failed to delete your account. Please contact us here: https://community.learningequality.org.',
+    );
   });
 });