fix_error

src/pages/AccountPage.vue

@@ -40,12 +40,26 @@
       </q-list>
     </pn-scroll-list>
   </pn-page-card>
+
+  <pn-small-dialog
+    v-model="showStopUsingDialog"
+    icon="mdi-close-box-outline"
+    color="negative"
+    title="account__stop_using_dialog_title"
+    message1="account__stop_using_dialog_message1"
+    message2="account__stop_using_dialog_message2"
+    mainBtnLabel="account__stop_using_dialog_btn_ok"
+    @clickMainBtn="onConfirmStopUsing"
+  />
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
+  import { computed, ref, inject } from 'vue'
   import { useRouter } from 'vue-router'
   import { useAuthStore } from 'stores/auth'
+  import type { WebApp } from '@twa-dev/types'
+
+  const tg = inject('tg') as WebApp
 
   const router = useRouter()
   const authStore = useAuthStore()
@@ -68,16 +82,22 @@
     { id: 5, name: 'account__company_data', icon: 'mdi-account-group-outline', description: 'account__company_data_description', pathName: 'your_company' },
     { id: 6, name: 'account__settings', icon: 'mdi-cog-outline', description: 'account__settings_description', iconColor: 'info', pathName: 'settings' },
     { id: 7, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
-    { id: 9, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
-    { id: 10, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
+    { id: 8, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
+    { id: 9, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' },
+    { id: 10, name: 'account__stop_using', icon: 'mdi-close-box-outline', description: 'account__stop_using_description', iconColor: 'negative', pathName: 'stop_using' }
   ]))
 
   const displayItems = computed(() => (
     items.value.filter((item: ItemList) => !('display' in item) || item.display === true)
   ))
 
+  const showStopUsingDialog = ref(false)
   async function goTo (path: string) {
-    await router.push({ name: path })
+    if (path !== 'stop_using') {
+      await router.push({ name: path })
+    } else {
+      showStopUsingDialog.value = true
+    }
   }
 
   async function logout () {
@@ -85,6 +105,10 @@
     await router.push({ name: 'login' })
   }
 
+  function onConfirmStopUsing () {
+    tg.close()
+  }
+
 </script>
 
 <style lang="scss">