Maintenance: Mobile - Simplify confirmation interface

app/frontend/apps/mobile/components/CommonConfirmation/CommonConfirmation.vue

@@ -3,33 +3,29 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import CommonSectionPopup from '#mobile/components/CommonSectionPopup/CommonSectionPopup.vue'
-import { useConfirmationDialog } from './useConfirmationDialog.ts'
-
-// TODO: Add a story for this component.
-
-const { confirmationDialog } = useConfirmationDialog()
+import { confirmationOptions } from '#shared/utils/confirmation.ts'
 
 const localState = computed({
-  get: () => !!confirmationDialog.value,
+  get: () => !!confirmationOptions.value,
   set: (value) => {
-    if (!value) confirmationDialog.value = undefined
+    if (!value) confirmationOptions.value = undefined
   },
 })
 
 const item = computed(() => {
   return {
     type: 'button' as const,
-    label: confirmationDialog.value?.buttonTitle || __('OK'),
-    buttonVariant: confirmationDialog.value?.buttonVariant,
-    onAction: confirmationDialog.value?.confirmCallback,
+    label: confirmationOptions.value?.buttonTitle || __('OK'),
+    buttonVariant: confirmationOptions.value?.buttonVariant,
+    onAction: confirmationOptions.value?.confirmCallback,
   }
 })
 
 const callCancelCallback = (isCancel: boolean) => {
   if (!isCancel) return
 
-  if (confirmationDialog.value?.cancelCallback) {
-    confirmationDialog.value.cancelCallback()
+  if (confirmationOptions.value?.cancelCallback) {
+    confirmationOptions.value.cancelCallback()
   }
 }
 </script>
@@ -47,8 +43,8 @@ const callCancelCallback = (isCancel: boolean) => {
       >
         {{
           $t(
-            confirmationDialog?.heading,
-            ...(confirmationDialog?.headingPlaceholder || []),
+            confirmationOptions?.heading,
+            ...(confirmationOptions?.headingPlaceholder || []),
           )
         }}
       </div>

app/frontend/apps/mobile/components/CommonConfirmation/__tests__/CommonConfirmation.spec.ts

@@ -1,33 +1,30 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
+import { confirmationOptions } from '#shared/utils/confirmation.ts'
 import {
   renderComponent,
   type ExtendedRenderResult,
 } from '#tests/support/components/index.ts'
 import { waitForNextTick } from '#tests/support/utils.ts'
 
-import { useConfirmationDialog } from '../useConfirmationDialog.ts'
 import CommonConfirmation from '../CommonConfirmation.vue'
 
 let wrapper: ExtendedRenderResult
 
 beforeEach(() => {
-  const { confirmationDialog } = useConfirmationDialog()
-  confirmationDialog.value = undefined
+  confirmationOptions.value = undefined
 
   wrapper = renderComponent(CommonConfirmation, { shallow: false })
 })
 
 describe('popup confirm behaviour', () => {
   it('renders confirmation dialog with default values', async () => {
-    const { showConfirmation } = useConfirmationDialog()
-
     const confirmCallbackSpy = vi.fn()
 
-    showConfirmation({
+    confirmationOptions.value = {
       heading: 'Test heading',
       confirmCallback: confirmCallbackSpy,
-    })
+    }
 
     await waitForNextTick()
 
@@ -39,16 +36,14 @@ describe('popup confirm behaviour', () => {
   })
 
   it('renders confirmation dialog with custom values', async () => {
-    const { showConfirmation } = useConfirmationDialog()
-
     const confirmCallbackSpy = vi.fn()
 
-    showConfirmation({
+    confirmationOptions.value = {
       heading: 'Test heading',
       buttonTitle: 'Custom button title',
       buttonVariant: 'danger',
       confirmCallback: confirmCallbackSpy,
-    })
+    }
 
     await waitForNextTick()
 
@@ -59,16 +54,14 @@ describe('popup confirm behaviour', () => {
   })
 
   it('closes the confirmation dialog by using cancel', async () => {
-    const { showConfirmation } = useConfirmationDialog()
-
     const confirmCallbackSpy = vi.fn()
     const cancelCallbackSpy = vi.fn()
 
-    showConfirmation({
+    confirmationOptions.value = {
       heading: 'Test heading',
       confirmCallback: confirmCallbackSpy,
       cancelCallback: cancelCallbackSpy,
-    })
+    }
 
     await waitForNextTick()
 

app/frontend/apps/mobile/components/CommonDialogObjectForm/CommonDialogObjectForm.vue

@@ -22,7 +22,7 @@ import { useObjectAttributes } from '#shared/entities/object-attributes/composab
 import { useObjectAttributeFormData } from '#shared/entities/object-attributes/composables/useObjectAttributeFormData.ts'
 import CommonButton from '#mobile/components/CommonButton/CommonButton.vue'
 import CommonDialog from '#mobile/components/CommonDialog/CommonDialog.vue'
-import { useConfirmationDialog } from '../CommonConfirmation/useConfirmationDialog.ts'
+import { waitForConfirmation } from '#shared/utils/confirmation.ts'
 
 export interface Props {
   name: string
@@ -70,8 +70,6 @@ const initialFlatObject = {
 const { attributesLookup: objectAttributesLookup } = useObjectAttributes(
   props.type,
 )
-const { waitForConfirmation } = useConfirmationDialog()
-
 const cancelDialog = async () => {
   if (isDirty.value) {
     const confirmed = await waitForConfirmation(

app/frontend/apps/mobile/pages/account/views/AccountAvatar.vue

@@ -23,11 +23,11 @@ import {
 import type { AccountAvatarActiveQuery } from '#shared/graphql/types.ts'
 import { useRouter } from 'vue-router'
 import { useHeader } from '#mobile/composables/useHeader.ts'
-import { useConfirmationDialog } from '#mobile/components/CommonConfirmation/useConfirmationDialog.ts'
 import CommonButton from '#mobile/components/CommonButton/CommonButton.vue'
 import CommonButtonGroup from '#mobile/components/CommonButtonGroup/CommonButtonGroup.vue'
 import CommonLoader from '#mobile/components/CommonLoader/CommonLoader.vue'
 import type { CommonButtonOption } from '#mobile/components/CommonButtonGroup/types.ts'
+import { waitForConfirmation } from '#shared/utils/confirmation.ts'
 import { useAccountAvatarActiveQuery } from '../avatar/graphql/queries/active.api.ts'
 import { useAccountAvatarAddMutation } from '../avatar/graphql/mutations/add.api.ts'
 import { useAccountAvatarDeleteMutation } from '../avatar/graphql/mutations/delete.api.ts'
@@ -145,17 +145,17 @@ const removeAvatar = () => {
   })
 }
 
-const { showConfirmation } = useConfirmationDialog()
-
 const confirmRemoveAvatar = async () => {
   if (!canRemoveAvatar()) return
 
-  showConfirmation({
-    heading: __('Do you really want to delete your current avatar?'),
-    buttonTitle: __('Delete avatar'),
-    buttonVariant: 'danger',
-    confirmCallback: removeAvatar,
-  })
+  const confirmed = await waitForConfirmation(
+    __('Do you really want to delete your current avatar?'),
+    {
+      buttonTitle: __('Delete avatar'),
+      buttonVariant: 'danger',
+    },
+  )
+  if (confirmed) removeAvatar()
 }
 
 const saveButtonActive = computed(() => {

app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleReplyDialog.vue

@@ -10,7 +10,7 @@ import CommonDialog from '#mobile/components/CommonDialog/CommonDialog.vue'
 import { closeDialog } from '#shared/composables/useDialog.ts'
 import type { TicketById } from '#shared/entities/ticket/types.ts'
 import type { FormRef } from '#shared/components/Form/types.ts'
-import { useConfirmationDialog } from '#mobile/components/CommonConfirmation/useConfirmationDialog.ts'
+import { waitForConfirmation } from '#shared/utils/confirmation.ts'
 
 interface Props {
   name: string
@@ -34,8 +34,6 @@ const label = computed(() =>
   props.newTicketArticlePresent ? __('Edit reply') : __('Add reply'),
 )
 
-const { waitForConfirmation } = useConfirmationDialog()
-
 const articleFormGroupNodeContext = computed(
   () => props.articleFormGroupNode?.context,
 )

app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/TicketAction/TicketActionChangeCustomerDialog.vue

@@ -25,7 +25,7 @@ import type {
   TicketById,
   TicketCustomerUpdateFormData,
 } from '#shared/entities/ticket/types.ts'
-import { useConfirmationDialog } from '#mobile/components/CommonConfirmation/useConfirmationDialog.ts'
+import { waitForConfirmation } from '#shared/utils/confirmation.ts'
 
 export interface Props {
   name: string
@@ -36,8 +36,6 @@ const props = defineProps<Props>()
 
 const { form, isDirty, canSubmit } = useForm()
 
-const { waitForConfirmation } = useConfirmationDialog()
-
 const cancelDialog = async () => {
   if (isDirty.value) {
     const confirmed = await waitForConfirmation(

app/frontend/apps/mobile/pages/ticket/composable/useTicketsMerge.ts

@@ -1,7 +1,6 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
 import type { FormKitNode } from '@formkit/core'
-import { useConfirmationDialog } from '#mobile/components/CommonConfirmation/useConfirmationDialog.ts'
 import {
   useNotifications,
   NotificationTypes,
@@ -16,6 +15,7 @@ import { useTicketMergeMutation } from '#shared/entities/ticket/graphql/mutation
 import type { AutocompleteSearchMergeTicketEntry } from '#shared/graphql/types.ts'
 import { keyBy } from 'lodash-es'
 import type { TicketById } from '#shared/entities/ticket/types.ts'
+import { waitForConfirmation } from '#shared/utils/confirmation.ts'
 import { AutocompleteSearchMergeTicketDocument } from '../graphql/queries/autocompleteSearchMergeTicket.api.ts'
 import TicketMergeStatus from '../components/TicketDetailView/TicketMergeStatus.vue'
 
@@ -38,8 +38,6 @@ export const useTicketsMerge = (
   const { notify } = useNotifications()
   const router = useRouter()
 
-  const { waitForConfirmation } = useConfirmationDialog()
-
   let localOptions: Record<string, AutocompleteSearchMergeTicketEntry> = {}
 
   const mergeTickets = async () => {

app/frontend/apps/mobile/pages/ticket/views/TicketCreate.vue

@@ -36,7 +36,6 @@ import CommonStepper from '#mobile/components/CommonStepper/CommonStepper.vue'
 import CommonButton from '#mobile/components/CommonButton/CommonButton.vue'
 import CommonBackButton from '#mobile/components/CommonBackButton/CommonBackButton.vue'
 import { errorOptions } from '#shared/router/error.ts'
-import { useConfirmationDialog } from '#mobile/components/CommonConfirmation/useConfirmationDialog.ts'
 import {
   useTicketDuplicateDetectionHandler,
   type TicketDuplicateDetectionPayload,
@@ -47,6 +46,7 @@ import { convertFilesToAttachmentInput } from '#shared/utils/files.ts'
 import { useDialog } from '#shared/composables/useDialog.ts'
 import { useStickyHeader } from '#shared/composables/useStickyHeader.ts'
 import type { ApolloError } from '@apollo/client'
+import { waitForConfirmation } from '#shared/utils/confirmation.ts'
 import { useTicketCreateMutation } from '../graphql/mutations/create.api.ts'
 
 const router = useRouter()
@@ -451,8 +451,6 @@ watch(
 useEventListener('scroll', setIsScrolledToBottom)
 useEventListener('resize', setIsScrolledToBottom)
 
-const { waitForConfirmation } = useConfirmationDialog()
-
 onBeforeRouteLeave(async () => {
   if (!isDirty.value) return true
 

app/frontend/apps/mobile/pages/ticket/views/TicketDetailView.vue

@@ -29,11 +29,11 @@ import { useApplicationStore } from '#shared/stores/application.ts'
 import { useTicketView } from '#shared/entities/ticket/composables/useTicketView.ts'
 import type { TicketInformation } from '#mobile/entities/ticket/types.ts'
 import CommonLoader from '#mobile/components/CommonLoader/CommonLoader.vue'
-import { useConfirmationDialog } from '#mobile/components/CommonConfirmation/useConfirmationDialog.ts'
 import { useOnlineNotificationSeen } from '#shared/composables/useOnlineNotificationSeen.ts'
 import { useErrorHandler } from '#shared/errors/useErrorHandler.ts'
 import { getOpenedDialogs } from '#shared/composables/useDialog.ts'
 import { useCommonSelect } from '#mobile/components/CommonSelect/useCommonSelect.ts'
+import { waitForConfirmation } from '#shared/utils/confirmation.ts'
 import { useTicketEdit } from '../composable/useTicketEdit.ts'
 import { TICKET_INFORMATION_SYMBOL } from '../composable/useTicketInformation.ts'
 import { useTicketQuery } from '../graphql/queries/ticket.api.ts'
@@ -210,8 +210,6 @@ provide<TicketInformation>(TICKET_INFORMATION_SYMBOL, {
 
 useOnlineNotificationSeen(ticket)
 
-const { waitForConfirmation } = useConfirmationDialog()
-
 onBeforeRouteLeave(async () => {
   if (!isDirty.value) return true
 

app/frontend/apps/mobile/pages/ticket/views/TicketInformation/TicketInformationDetails.vue

@@ -15,7 +15,7 @@ import CommonShowMoreButton from '#mobile/components/CommonShowMoreButton/Common
 import CommonSectionMenuItem from '#mobile/components/CommonSectionMenu/CommonSectionMenuItem.vue'
 import { useTicketView } from '#shared/entities/ticket/composables/useTicketView.ts'
 import CommonLoader from '#mobile/components/CommonLoader/CommonLoader.vue'
-import { useConfirmationDialog } from '#mobile/components/CommonConfirmation/useConfirmationDialog.ts'
+import { waitForConfirmation } from '#shared/utils/confirmation.ts'
 import TicketObjectAttributes from '../../components/TicketDetailView/TicketObjectAttributes.vue'
 import TicketTags from '../../components/TicketDetailView/TicketTags.vue'
 import { useTicketInformation } from '../../composable/useTicketInformation.ts'
@@ -38,8 +38,6 @@ const ticketFormGroupNode = computed(() => {
   return form.value?.formNode?.at('ticket')
 })
 
-const { waitForConfirmation } = useConfirmationDialog()
-
 const discardTicketEditDialog = async () => {
   if (!ticketFormGroupNode.value) return
 

app/frontend/shared/components/CommonDateTime/__tests__/CommonDateTime.spec.ts

@@ -1,13 +1,13 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
-import { type Props } from '../CommonDateTime.vue'
+import { nextTick } from 'vue'
+import { renderComponent } from '#tests/support/components/index.ts'
+import { useApplicationStore } from '#shared/stores/application.ts'
+import CommonDateTime, { type Props } from '../CommonDateTime.vue'
 
-vi.useFakeTimers().setSystemTime(new Date('2020-10-11T10:10:10Z'))
-
-const { nextTick } = await import('vue')
-const { renderComponent } = await import('#tests/support/components/index.ts')
-const { useApplicationStore } = await import('#shared/stores/application.ts')
-const { default: CommonDateTime } = await import('../CommonDateTime.vue')
+vi.hoisted(() => {
+  vi.useFakeTimers().setSystemTime(new Date('2020-10-11T10:10:10Z'))
+})
 
 const dateTime = '2020-10-10T10:10:10Z'
 const renderDateTime = (props: Props) => {